Úsalo: Usabilidad y Accesibilidad para el diseño web. Usabilidad para todos

Resumen:

En las pantallas de ordenador los textos se leen más lento y con más dificultad que los impresos. Además, el internauta es impaciente y tiene a su alcance millones de otras páginas a un solo clic de distancia. Los buenos usos provenientes de la creación de textos impresos también son útiles en la web, especialmente la claridad, sencillez y concreción. La adecuada gestión del hipertexto y los aspectos formales del texto representan la otra parte de la calidad de un texto web

Versión para imprimir (PDF)

• Redacción de textos
  • Principios de escritura web
• La gestión de hipertextos
  
  • Estructura y complejidad del hipertexto
  • Dónde ubicar los enlaces
• Aspectos formales
  
  • Columnas vs segmentos
  • Elegir los tipos

Redacción de textos

Escribir para la red no es como escribir para un soporte impreso. Para entender la diferencia hay que tener en cuenta varias consideraciones:

• La lectura en un monitor de ordenador es más cansada, incómoda y lenta que en un buen texto impreso.
• El hipertexto influye mucho en la conformación de la unidad textual y en la construcción de la ruta de lectura del usuario, pues los hiperenlaces que nutren los textos de la red permiten muchas lecturas alternativas y complementarias a partir de una misma base textual. Esto además, está muy relacionado con que
• En la red el lector no es como en el mundo impreso. El internauta es impaciente, voraz, inconstante. Realiza mucho menos esfuerzo sobre cada texto, pues tiene a su disposición, rápida y fácilmente, millones de alternativas. Si un texto le resulta complejo, le aburre o le abruma, hay mucha probabilidad de que abandone y busque otro más digerible. El internauta no lee, escanea rápidamente la pantalla en busca de algo que le interese.
• Aunque escribamos textos en español, a veces no está claro si todos los que hablan español son capaces de entender igual de bien determinados textos escritos en español, o si aquellos que no lo usan como lengua propia comprenden todo lo dicho.

Al respecto de esto último cabe plantearse cuál es el tono adecuado para cada texto. A veces, un pretendido texto con guiños humorísticos puede convertirse para otras personas en algún tipo de alusión ofensiva, debido a que ciertos giros lingüísticos coloquiales pueden tener diversos significados en distintos lugares donde se hable el español.

Ya en su libro de 2001, Nielsen afirmaba que era bueno dotar a los textos de cierto sentido del humor, pero sin pasarse, y también que no era bueno que sonaran excesivamente a lenguaje publicitario.

Lo cierto es que cada día se nos cuelan por los rincones expresiones que maltratan el español, lo desvirtúan, y propician que tengamos problemas de comunicación entre aquellos que utilizamos esta lengua. Lo peor es que, en la mayoría de los casos, quienes perpetran tales actos de agresión al lenguaje son quienes más deberían hacer por defenderlo: políticos y periodistas.

Los periodistas por una combinación de un poco de prisa, otro de descuido y otro de incompetencia. Al final se hacen malas traducciones de teletipos en otros idiomas y el error se repite contínuamente y se perpetua (”implementar” por “implement” y una legión de falsos amigos que terminan por extenderse).

Los políticos por su afán de usar palabras grandilocuentes, por engordar lo cotidiano, y por camuflar la verdad ante sus votantes: “flexibilidad laboral” por “bajada de salarios”, “mal comportamiento de los precios” por “subida de los precios”, “guerra preventiva” por “ataque” o “invasión”, “aviones que hacen varias salidas” por “aviones que hacen varios bombardeos”, etc.

Al final, todos terminamos cediendo e incorporando a nuestro hablar cotidiano expresiones incorrectas que, de forma artificial, no auspicaida por la propia sociedad con el discurrir de los lustros, se agarran como una sanguijuela a nuestra lengua.

Para adentrarse en este tema son recomendables algunos de los libros de Alex Grijelmo, actual presidente de la Agencia EFE:

• Defensa apasionada del español. Dedica bastantes páginas a denunciar los barbarismos que se cuelan por la puerta de atrás, los falsos amigos que terminan por meterse en nuestro vocabulario, el descuido de ciertos textos que deberían ser impecables (periódicos, textos oficiales y administrativos), etc.
• La seducción de las palabras. El lenguaje no es inocente. Las palabras son como racimos de cerezas, van juntas en nuestro ideario colectivo, tiras de una y salen otras. Los sinónimos ofrecen muchos matices, no existe la sinonimia perfecta en el subconsciente de la mente. La manipulación por el lenguaje (sobre todo de los políticos, publicistas y periodistas) está a la orden del día.
• El estilo del periodista. Imprescindible para todo aprendiz de periodista y para aquellos que escriban habitualmente sobre cuestiones de actualidad, entre ellos los que escribimos en la red. Nutrido con abundantes ejemplos periodísticos de buenas y malas prácticas.

También resulta interesante consultar alguno de los libros de estilo de los principales periódicos españoles, especialmente el de El País, cuya edición también fue responsabilidad de Grijelmo y, por supuesto, las dos partes de El dardo en la palabra, del difunto maestro Lázaro Carreter. Verdaderos agijonazos, llenos de sentido del humor, contra los que maltratan a diario la lengua.

De entrada, sería una buena práctica empezar por algunas cuestiones básicas, en las que solemos caer de vez en cuando:

• No dejarse invadir por el barbarismo: en este contexto en su mayor parte son anglicismos. Emplear “implantar” o “aplicar” cuando veamos un “implementar”, “reiniciar” en lugar de “resetear” o “reinicializar” (engorde artificial de palabras). Algunas expresiones costará, pues están ya haciéndose hueco: “artículo” por “post”, “bitácora” por “blog”, “en línea” por “online”.
• No emplear expresiones engordadas artificialmente: “reinicialización” por “reiniciar”, “compartimentalización” por “hacer compartimentos” o, simplemente, “dividir”.
• Huir de los juegos de palabras complejos y localismos: cosas como lo del “inglés playero” o aludir a referencias culturales de ámbito geográfico muy limitado.
• Cuidado con los eufemismos. Muchas veces, lo políticamente correcto no es más que una forma de esconder la verdad. “Crecimiento negativo” es “descenso”. También están los eufemismos negativos, los que pretenden culpar más que encubrir, como denominar “piratería” a la “copia de ficheros en la red”, aunque no sea legal (¿ven? he empleado”no sea legal” en lugar de “sea ilegal”, difuminando la fuerza de la expresión “ilegal”). “afroamericano” o “persona de color” es una sandez para eludir la expresión “negro”.
• No dar el sentido que no tienen a palabras manipuladas. No caigamos en el juego de los manipuladores del lenguaje. “Radical” es el que se preocupa por las raices, no el “violento”.

Principios de escritura web

Para Kilian (1998) tres son los principios fundamentales para escribir texto web:

• Orientación. El lector debe recibir antecedentes del sitio y medios de navegación por él. La página principal le debe orientar sobre qué trata el sitio, cómo está estructurado y cómo navegar en él. La orientación ha de ser la mínima necesaria, evitando frases superfluas. Los fragmentos de texto han de ser coherentes, tener sentido por sí mismos.
• Información. Claridad y corrección. El texto debe entenderse en la primera lectura; las palabras cortas y sencillas funcionan mejor. La corrección ortográfica, gramatical y exactitud en datos no sólo mejora la claridad, sino que transmite información no verbal sobre la calidad del sitio.
• Acción. Actitud optimista (mostrar los problemas pero, sobre todo, las soluciones). Lenguaje centrado en el usuario (mejor “tú” que “yo”)

De forma más concreta es importante estar pendiente de:

Títulos y subtítulos. Si el sitio web ha de contener piezas informativas, que será lo más normal, estará bien emplear subtítulos que complementen al título de cada pieza. Por un lado, aportan más información con muy pocas palabras y, por otro, si segmentamos el bloque de texto en otros menores, y a cada subtítulo le hacemos corresponder un enlace con una parte de la pieza, ayudan a estructurar esa unidad informativa en varios segmentos menores.

Resúmenes y tablas de contenido. Los contenidos se deben estructurar mediante resúmenes y tablas de contenidos

Captar el interés. Emplear sorpresas y ganchos ayuda a mantener el interés del lector. Es bueno que los hipervínculos sean informativos, explicativos, atractivos y que ofrezcan una buena idea de lo que va a encontrar el lector al seguir el enlace.

También está bien aportar explicaciones a enlaces o partes que pudieran resultar confusas a determinados usuarios (explicaciones junto al enlace hacia una sección).

Emplear listas. Cada vez que sea posible debemos presentar una enumeración en forma de listas y, a ser posible, con apartados y subapartados. Se leen mejor y ayudan a ofrecer enlaces relacionados.

Frases sencillas. Sujeto, verbo, predicado. No complicar innecesariamente las frases. Un párrafo, una idea. Pensemos si podemos dividir en dos un párrafo de 6-8 líneas. Nielsen recomienda usar menos del 50% del texto usado habitualmente en una publicación escrita.

Lenguaje simple e informal. Es más adecuado que el elegante o formal, ya que la lectura es más rápida en el primero.

Mejor verbos fuertes que débiles. Debemos emplear antes el verbo que la perífrasis verbal construida con él:

• Tomar una decisión vs decidir
• Hacer uso de vs usar
• Sirve para explicar vs explica
• Efectuar una prueba vs probar

Ser precisos. Ciertas expresiones, que emplean palabras con marcada polisemia, pueden confundir al lector, especialmente si se descontextualizan (un titular recopilado en otro lugar distinto del original). Si nos referimos a cuestiones meteorolólgicas es mejor hablar de “clima” que de “tiempo”.

Utilizar la negrita y el destacado. Las partes más importantes deben sobresalir. Los textos en negrita o destacados (cursiva) deben contener la esencia del total.

Usar encabezados para organizar el texto. Ayudan a estructurar mejor los textos, otorgan tamaños de letra proporcionales a la importancia de cada parte, mejoran la lectura en dispositivos adaptados y la presencia en los buscadores.

Usar ladillos. En textos largos deben insertarse una o varias palabras que anticipen el contenido de los párrafos siguientes. Deben de ser cortos (Escribir pensando en lo visual)

Estilo de pirámide invertida. La idea principal o conclusión del texto debe escribirse al principio del mismo para lograr interesar al usuario en la lectura de éste. Después se debe continuar con los razonamientos generales que sustentan el argumento. Para terminar se pueden ofrecer enlaces a otras páginas donde se ofrecen más detalles como tablas de datos, resultados concretos o informaciones previas.

Este tipo de redacción, característica de los textos periodísticos informativos, se conoce como el ‘estilo de pirámide invertida’. Se trata de una secuenciación completamente opuesta a la utilizada tradicionalmente en los artículos científicos y académicos. De esta manera se asegura que el lector retiene lo más importante de la argumentación aunque no llegue a leer hasta el final del artículo o de la página.

La gestión de hipertextos

La multiplicidad de funciones y prestaciones de cualquier dispositivo es un arma de doble filo. Si el usuario lo maneja sin problemas le reportan gran beneficio y una buena experiencia de usuario. Sin embargo, si el usuario no es capaz de utilizarlo adecuadamente, o si el dispositivo no se deja utilizar adecuadamente, es posible que incluso no se pueda utilizar las funciones básicas.

Algo así ocurre con las páginas web, en general, y con el Hipertexto en particular, que es el tema que ahora nos atañe.

El diseño del concepto de Hipertexto, intuido por Vannevar Bush (1945) y acuñado por Nelson (Villa, 2004), y su posterior implantación en el web se inspira en la forma pensamiento humana: línea, salto, vuelta, nuevo salto, ideas paralelas, vuelta a la primera idea, idea relacionada, nueva línea… Esta forma de pensar es necesariamente compleja y, por tanto, tratar de representarla implica cierto grado de complejidad.

Estructura y complejidad del hipertexto

Una solución de compromiso entre complejidad abstracta y plasmación en un sistema manejable es el Hipertexto. Pero, si se fijan, estamos hablando de “plasmación”, “representación”, pero poco hemos dicho de “asimilación”, “cognición” o “aprehensión”. Es decir, el que algo sirva para representar dignamente una cosa no quiere decir, necesariamente, que sea la mejor manera para difundirla, para enseñarla, para que los demás lo entiendan.

Buscar la fidelidad en la representación de la forma de pensamiento humano no tiene porqué ser algo necesariemante deseable para la mayoría de páginas web, aunque sí pueda serlo el intentar una representación muy simplificada de la misma.

Por tanto, parece que una elevada complejidad del hipertexto ofrecido al usuario será contraproducente.

Otra cuestión difícil de manejar es el grado exacto del empleo ideal del hipertexto. Como hemos visto, una cosa es un método para la representación de ideas (para lo que podría valer el hipertexto), pero la duda que emerge es si no estaremos confundiendo cuestiones. Es decir, por ejemplo, para un diseñador la mejor manera de poder incluir una cantidad enorme de enlaces en una web es emplear menús desplegables o algo por el estilo. Sin embargo, eso no es lo mejor para el usuario.

Partimos de la premisa de que estamos inmersos, al menos de momento, en una sociedad donde el modelo básico de aprendizaje se basa (aún) fundamentalmente en la lectura y, más concretamente, en la lectura secuencial.

Por tanto, para un usuario novato en la red el hipertexto presentará dificultades en su interacción física (leves si se han seguido los estándares al respecto). Sin embargo, serán las dificultades conceptuales y cognitivas las más importantes. Parece fácil saber que si se pincha en un texto azul y subrayado irás a otra página. Incluso se puede intuir la temática si el texto descriptivo del hipervínculo es lo suficientemente bueno. Pero el problema se plantea cuando la red de documentos e ideas se hace demasiado compleja para el lector. Antes de perderse ¿Cuantas páginas simultáneas puede tener abiertas? ¿Cuantas líneas argumentales paralelas a la principal puede seguir? ¿Hasta qué punto vale la pena enriquecer un texto con muchos enlaces si corremos el riesgo de abrumar al lector?.

Del otro lado, la propia filosofía del Hipertexto indica que es el usuario, en última instancia, quien elige el camino a recorrer a partir de las alternativas de construcción de la narración que el autor propone, lo que sugiere que tampoco es bueno limitar excesivamente las opciones del usuario en este aspecto.

Falta, entonces, llegar a alguna conclusión válida en cuanto a la densidad de los enlaces integrados en el texto, así como al tipo, densidad y profundidad del sistema navegacional, lo que entronca directamente con la Arquitectura de la Información.

En cuanto la densidad y profundidad del árbol de navegación, un estudio de Bernard (2002) sugiere que son más efectivos los sistemas cóncavos:

Concave shapes (i.e., (6 x 2 x 2 x 12)) are more navigationally efficient than relatively constant shapes (i.e., (4 x 4 x 4 x 4)) of the same size and depth. Norman and Chin argue that the concave structure is an optimal design because having a larger percentage—and thus more defined—descriptor items at the beginning of a search helps the user form a more exact match between the concept related to the target item and the actual target item itself. At the terminal level, broad menus reduce the overall information uncertainty, since at this level the target items are more explicitly defined. [...]

It is further suggested that websites which have several or more levels of depth attempt to give the user the greatest number of choices at both the top and terminal levels of the site, while constricting the choices between these levels.

Hipertexto de 6 x 2 x 2 x 12 nodos

Dónde ubicar los enlaces

En cuanto al lugar ideal para ubicar los enlaces vinculados a los conceptos citados en el texto, otro estudio de Bernard et. al. (2001) confirma la idea intuitiva de que lo que mejor funciona es incluir los enlaces integrados en el texto, mejor que en el lateral a la altura en que se mencionan (segunda mejor opción), o que agrupados en el lateral o en el pie de página.

No se ponen muy de acuerdo los autores que han hecho estudios al respecto. Alysson Troffer (2000) recoge la impresión de algunos de los estudiosos del tema:

• Para Mark Bersntein los problemas de desorientación provienen de la mala escritura y no de los enlaces. Bersntein afirma que no hay pruebas de que los hiperenlaces desorienten ni de que la lectura secuencial evite dicha desorientación. Su consejo es que el número de enlaces venga dado por cada situación, de modo que los documentos en los que es mejor una lectura atenta deberán llevar pocos enlaces, y que los que requieran de muchas explicaciones adicionales sí tengan un mayor número de enlaces.
• Khan y Locatis apoyan la idea de usar una baja densidad de enlaces argumentando para ello que en su estudio los mejores resultados se daban con textos con baja densidad de enlaces y, además, con éstos dispuestos en forma de lista. Si se dan más opciones de hacer clic habrá más posibilidades de error en la navegación. Además, con pocos enlaces la carga cognitiva se reduce porque el usuario está más concentrado en la búsqueda y exploración.
• Lynch y Horton muestran dos posibles problemas con los enlaces integrados: Interfieren el flujo narrativo, invitando al lector a irse a otro sitio, y no siempre se consigue que los rótulos de los enlaces sean lo suficientemente claros como para hacerse una idea del contenido del otro documento.
• Finalmente el propio Bersntein aporta sus razones, bajo el lema “menos es más”, para usar una baja densidad de enlaces:

• Muchos enlaces pueden confundir a los lectores al introducir temas tangenciales.
• El autor debe ser un filtro (el famoso Gatekeeper de los mass media) y seleccionar los enlaces para el lector.
• Además, un alto número de éstos propicia el error y pérdida de tiempo
• Si no se quiere interrumpir a un lector en un punto determinado lo mejor es no poner ahí un enlace.
• No todo lo que puede ser enlazado debe ser enlazado
• No obstante, es bueno proporcionar enlaces externos, pues ello proporciona una ventaja competitiva sobre el resto de sitios.
• Sin embargo, la razón más sorprendente que aporta Bernstein para ser tacaño con el número de enlaces es “¿Porqué invitar a tus lectores a abandonar tu sitio? Podrían no volver nunca” [sic].

Parece intuirse por lo anterior que no hay una fórmula mágica que indique la densidad ideal, y que la experiencia del usuario ha de marcar, en gran medida, qué densidad de enlace es la adecuada. No en vano, el Hipertexto es una convención artificial, que subvierte el tradicional proceso de lectura secuencial. Un internauta experto podrá manejar sin problemas un texto con gran densidad de enlaces, e incluso agradecerá dicha riqueza hipertextual, pero ese mismo texto podría desorientar profundamente a un usuario novato, no acostumbrado a trabajar con 10 ventanas (o pestañas) de navegador simultáneamente.

Nosotros nos quedamos con una fórmula mixta: pocos enlaces integrados en el texto, los fundamentales, y el resto aparte, en forma de listado en un lateral. Un ejemplo de esta práctica lo llevan a cabo algunos diarios digitales, especialmente el diario El Mundo. No es raro que este diario incluya algún enlace integrado en el texto de la noticia y, en forma de despiece, el resto de enlaces a noticias o temas relacionados. Un ejemplo cualquiera puede ser una noticia, en este caso una del 21 de diciembre de 2004: “Los líderes chiíes llaman a la calma tras la oleada de atentados contra su comunidad en Kerbala y Nayaf“. Esa noticia contiene un enlace integrado, una infografía y un despiece con un enlace a una noticia relacionada y a un especial. Además, utiliza la negrita para destacar algunas de las expresiones clave de la noticia.

Por otro lado, tal vez funcionarían mejor los sistemas de hipertexto si, en lugar de limitarnos a hiperenlazar páginas (o nodos) previamente creados, empleáramos una percepción más global a la hora de creación de documentos, de manera que se editaran en el mismo proceso creativo los diversos nodos de un mismo sistema, al tiempo que se crean los hiperenlaces entre ellos pues, no en vano el 25% del éxito de un sistema hipermedia es la elaboración documental (Pastor y Saorín, 1998).

Veamos algunas recomendaciones básicas en relación a los enlaces, extraídas de Detalles de usabilidad en los enlaces de Joaquín Martí, y basadas, sobre todo, en el respeto a los estándares:

• Enlaces subrayados y de color azul.
• Distintos colores según el estado del enlace.
• Innovaciones [no estándar] en el uso de enlaces, como los iconos que indican si un enlace es externo, o las capas semi transparentes que explican el contenido del enlace.
• Mantener el tamaño del enlace al pasar el ratón (que en estado hover no cambie el grosor del texto).
• No usar JavaScript en la barra de estado cuando se coloca el cursor sobre el enlace.
• No usar enlaces mediante JavaScript.
• Enlaces integrados en el texto.
• Listas de enlaces. Cuando se precise un listado de enlaces lo mejor es utilizar el elemento lista de HTML.

Por su parte, César Martín aporta algunas cuestiones de detalle sobre el subrayado de los enlaces y su importancia para que el sitio funcione bien: algo tan simple como identificar lo que es un enlace de un elemento de separación (cambiando el color del elemento de separación p.e.) puede ser la diferencia entre que un sitio funcione bien o no lo haga.

Aspectos formales

Una parte del éxito de un buen texto tiene que ver con los aspectos formales que afectan a su legibilidad. Si un texto está muy bien redactado pero, debido a su presentación en pantalla, no se visualiza bien y, por tanto, cuesta leerlo, habrá resultado vano el esfuerzo previo en la redacción. El redactor debe pensar tanto en el contenido como en la forma.

Columnas vs segmentos

Una de las decisiones a tomar es si hay que disponer el texto en base a renglones cortos, de fácil lectura, pero con una gran profundidad y con el necesario abundante uso del scroll o si, por el contrario, es más conveniente recurrir a la partición o segmentación del texto en fragmentos fácilmente visualizables en una pantalla de ordenador común (fragmentos de texto de unas 100 palabras por cada pantalla) (Kilian, 1998).

La decisión dependerá del tipo de documento y sus objetivos. Los documentos pensados para leer detenidamente, detallados, amplios y, por tanto, muy susceptibles de terminar siendo impresos por el usuario, pueden ubicarse perfectamente en una única columna de unas 10 ó 12 palabras.

Por otro lado, los documentos que se puedan agrupar en pequeñas unidades con significado semántico con cierta independencia del resto, podrían agruparse en bloques de unas 100 palabras, y crear una estructura de hipertexto que de unión y coherencia final al conjunto de ellas.

Por tanto, en textos largos se debe dividir y agrupar el contenido en partes significativas, con sus respectivos títulos descriptivos para mostrarlo en distintas páginas. Cada página se enlaza entonces son el índice principal del artículo para permitir el acceso directo a la misma

Se supone que se leen peor los textos en un monitor que impresos. Al menos eso afirma Nielsen, que se lee un 25% más lento en una pantalla y, además, resulta menos placentero para el lector. Son muchos los estudios que avalan esta afirmación, sin embargo un estudio con usuarios realizado por Armentia et al (2000) viene a señalar justo lo contrario:

Sorprendentemente, quienes leyeron sobre una pantalla fueron, por término medio, un 8,3% más rápidos que quienes lo hicieron sobre papel. [...]

La sorpresa no terminó ahí. Los lectores en pantalla no sólo eran, en términos globales, más rápidos que los de papel; sino que además mostraban un mejor nivel de comprensión sobre el texto leído.

Tal vez la explicación a los resultados de este experimento sea que, simplemente, la cuestión es así como la muestra Armentia et al, o bien que se hizo mediante una muestra muy sesgada.

También hay que tener en cuenta que no todos los textos en línea se leen igual de bien. Son muchos los factores que mejoran la legibilidad de los textos en línea como el estilo de escritura y disposición de los textos, o el tipo de letra empleado, anchura de líneas, separación de caracteres, alineación, etc.

Un estudio de Chaparro et. al mide la facilidad de lectura de textos en línea en base a dos parámetros: la separación entre líneas y el margen del texto. En él se llega a la conclusión de que los participantes leen ligeramente más lento un texto con márgenes, pero así lo comprenden bastante mejor. Si además de poseer margen (10 mm para este estudio), el texto tiene cierta separación entre líneas (5 mm), los resultados de legibilidad y satisfacción mejoraban aún más.

Texto sin margen y sin interlineado

Texto con margen y separación entre líneas

La dificultad de lectura es una de las razones por las que aún se les sigue dando mucho trabajo a las impresoras para fijar en papel textos que se pueden encontrar en línea.

Consejos:

Si vas a ofrecer en tu página documentos largos, y especialmente si éstos son de tipo académico o más o menos científico o técnico (artículos, tutoriales…) prevé algún tipo de solución de impresión. La mejor opción es que el texto se imprima bien ya desde su versión HTML normal. En su defecto, dos posibilidades:

• Usar el formato PDF especialmente pensado para textos online destinados a la impresión. Es muy recomendable si se trata de una versión online de un texto de revista o similar impreso al que queremos conservar el aspecto de la versión en papel y utilizar éste como mera copia online del texto impreso.
• Hacer una versión HTML “para imprimir” . Lo ideal es usar un mismo fichero para el texto en cuestión y emplear dos hojas de estilo distintas, una para imprimir y otra para mostrar en pantalla. En esta versión, según César Martín:

• Si se dispone de la tecnología, es recomendable ofrecer una versión “para imprimir” de tal forma que el usuario pueda tener un documento limpio.
• Se deben eliminar todos los elementos de navegación dejando el logotipo de la empresa, el banner (si existiera) y una barra de localización del documento de tal forma que alguien puede encontrar el documento dentro del site a partir de la copia impresa (algo así como: Nombre del site / sección / subsección / nombre del articulo).
• Es recomendable dentro de la versión impresa o dejar el tamaño de la tabla sin definir o dejarlo por debajo de los 750 pixels de ancho.
• Según el estilo del documento, una columna más estrecha puede hacer que la lectura sea más ágil pero se debe tender a no ofrecer más de 10-12 palabras por linea.
• No se recomienda el uso de varias columnas. Esta bien usar varias columnas para ofrecer textos complementarios, pero no para maquetar un mismo texto.

Elegir los tipos

Los distintos estudios sobre legibilidad no dan una respuesta clara sobre qué tipos hay que elegir. A partir de la consulta a los libros de Nielsen se debería decir que en una pantalla de ordenador los tipos sans-serif se leen mejor que las serif y el mejor tamaño es el de 12 puntos. Sin embargo, cuando se consulta otros trabajos que se basen en estudios empíricos con usuarios, lo único que queda claro de esa afirmación es lo de los 12 puntos, pero no que se lea mejor un tipo sans-serif.

Lo primero es explicar la diferencia entre un tipo serif y otra sans-serif. El serif, o la serifa, es el remate de los extremos del trazo de cada letra. En una letra serif aparece este remate o adorno, pensado para mejorar la identificación del carácter durante una lectura rápida. Las letras sin serifa (sans-serif) son las que no poseen dicho acabado, y terminan sin ningún adorno en el extremo de sus trazos.

En principio, se supone que en papel, con impresión de calidad y mucha resolución, estos remates (serifas) hacen que se lea mejor, más rápido y más agradable. Las teorías de Nielsen afirman que en una pantalla de ordenador ocurre justo lo contrario, debido a que los monitores de ordenador no son capaces de ofrecer con nitidez el nivel de detalle que implica un tipo con serifa y, por tanto, se lee mejor una letra más simple como la sin serifa.

• Ejemplos de letras serif son: Times, Book, Garamond …
• Ejemplos de letras sans serif son: Arial, Verdana, Tahoma…

Hasta aquí todo encaja con la intuición y la propia experiencia, que nos dicen que así es como ocurre.

El problema surge cuando se intenta contrastar con más estudios empíricos, pues en otros trabajos se encuentran conclusiones contradictorias entre sí, lo que tiende a sembrar dudas sobre este asunto.

En 1997, un estudio de Alyson L. Hill afirmaba que se leía más rápido un tipo serif que una sans-serif:

In this experiment, Times NR (proportionally spaced) was faster than Courier New (non-proportionally spaced), while Arial (proportionally spaced) was slower than Courier New.

Leyendo algunos artículos de la muy recomendable Usability News (http://psychology.wichita.edu/surl/usabilitynews/) encotramos varios estudios que se contradicen entre sí en este aspecto.

En resumen se puede decir que en realidad no hay diferencias considerables en cuanto a rapidez y comprensión de los textos en función del tipo de letra serif o sans-serif. En lo que no se ponen de acuerdo los autores es en las preferencias de los usuarios al respecto.

Por ejemplo, un estudio de 2001, de Ralph F. wilson, sobre legibilidad de los textos de correo HTML, afirma en sus conclusiones:

My readers clearly prefer sans serif fonts to serif fonts for body text.

Por otro lado, Bernard et. al. afirman:

No significant difference in actual legibility between the font types were detected. There were, however, significant differences in reading time, but these differences may not be that meaningful for most online text because these differences were not substantial. It may, on the other hand, be helpful to consider using font types that are perceived as being legible. In this study, the font types that were perceived as being most legible were Courier, Comic, Verdana, Georgia, and Times.

Con lo que reducen la cuestión a la legibilidad percibida por el usuario, no a la real. Ello nos haría inclinarnos ligeramente por las letras sans-serif, más por que le gustan al usuario que porque se lean mejor. En otro estudio, estos autores concretan más:

For font attractiveness, Georgia was perceived as being more attractive than Arial, Courier, and Comic, while Times was perceived as more attractive than Courier. This contrasts with participants’ general preference for a particular font type. Overall, Verdana was the most preferred font, while Times was the least preferred. Thus it seems that the Georgia and Times serif fonts are considered more attractive, but they are generally less preferred. Of the fonts studied, Verdana appears to be the best overall font choice. Besides being the most preferred, it was read fairly quickly and was perceived as being legible.

Posteriormente, un estudio de Morrison y Noyes, concluía que:

The results from this experiment also provide contradictory evidence to Bernard et al. that sans serif fonts such as Arial are preferred to Times New Roman and other serif fonts. This experiment found that the serif font Times New Roman was preferred overall and in terms of personal usability and web usability to the ornate sans serif font.

Otra de las pocas cosas que queda clara tras leer unos cuantos artículos sobre el tema es que es difícil estudiar la legibilidad de los tipos como fenómeno aislado, pues, como afirman Morrison y Noyes, y como explica Manchón, hay muchos otros aspectos que influyen:

The usability of online fonts for reading text includes factors other than font style. Factors which could affect the readability of on-screen text include the spacing between the words, the line length on the screen, the amount of white space, the use of italics, underlining and boldness. (Morrison y Noyes)

A tenor de las opiniones y los estudios de los expertos, no queda totalmente claro qué tipo de letra deberíamos usar. Sería necesario que existiera más bibliografía y estudios de campo serios al respecto.

De momento aún parece recomendable escribir el cuerpo de los textos más o menos largos en letra sans serif, preferiblemente Verdana o Arial, y en un tamaño de 12 puntos (mejor puntos que pixels, pues los puntos permiten al usuario modificar fácilmente el tamaño del texto).

[Adenda 2/09/2005]. A nosotros también se nos cuelan malas traducciones, falsos amigos, que nos hacen caer en incorrecciones aunque, como en este caso, se trate de palabras ya muy extendidas, aunque incorrectas. Nos referimos a la utilización de “fuente” como (mala) traducción de “font”, que en realidad, significa “tipo”. Así se explica en un texto de Ricado Soca: La traducción de font es ‘tipos’ o ‘tipos móviles’ y no fuente. Hemos corregido, por tanto, este texto y reemplazado la expresión “fuente” por “tipo”, que era la correcta.

Artículos de Úsalo relacionados:

• Escribir noticias para la web. Dos enfoques
• Las entradillas con tipos grandes se leen más

Bibliografía:

• Armentia et. al. La información en la prensa digital: redacción, diseño y hábitos de lectura URL: http://www.ehu.es/zer/zer8/8armentia9.html
• Baker, Ryan; Bernard, Michael; & Riley, Shannon. Reading Online News: A Comparison of Three Presentation Formats
• Barbara Chaparro, J. Ryan Baker, A. Dawn Shaikh, Spring Hull, & Laurie Brady. Reading Online Text: A Comparison of Four White Space Layouts
• Berger, Sandy. Scanalog
• Bernard, M. et. al. (2001). Where Should You Put the Links? A Comparison of Four Locations . Usability News.
• Bernard, M. L. (2002). Examining the Effects of Hypertext Shape on User Performance . Usability News.
• Bernard, M.L., Lida, B., Riley, S., Hackler, T., & Janzen, K. (2002). A comparison of popular online fonts: Which size and type is best? Usability News 4.4 URL: http://psychology.wichita.edu/surl/usabilitynews/41/onlinetext.htm
• Bernard, M.L., Mills, M.M., Peterson, M., & Storrer, K. (2001). A comparison of popular online fonts: Which is best and when? Usability News 3.2
• Dawn Shaikh, A. Paper or Pixels: What are People Reading Online?
• EDUTEKA (2003). Hipertexto: Qué es y cómo utilizarlo para escribir en medios electrónicos . URL: http://www.eduteka.org/Hipertexto1.php
• El País. Libro de Estilo. Madrid, El País.
• Grijelmo, Álex, Defensa apasionada del idioma español, Madrid, Taurus, 1998.
• Grijelmo, Álex. El estilo del periodista, Madrid, Taurus, 1998, 5ª ed.
• Grijelmo, Álex: La seducción de las palabras. Taurus, Madrid, 2000.
• Hassan Montero, Yusef (2002). Diseño Hipermedia centrado en el usuario . Nosolousabilidad.
• Hassan Montero, Yusef. Optimización de páginas web para su impresión URL: http://www.nosolousabilidad.com/articulos/optimizacion_impresion.htm
• Hill, A. (1997). Readability Of Websites With Various Foreground/Background Color Combinations, Font Types And Word Styles URL: http://hubel.sfasu.edu/research/AHNCUR.html
• Kilian, Crawford. Escribir para la Web. Deusto. 1998.
• Lázaro Carreter, Fernando, El dardo en la palabra, Valencia, Galaxia Gutenberg, 1997.
• Manchón, Eduardo. Escribir y redactar contenidos para Internet. Alzado.org. URL: http://alzado.org/articulo.php?id_art=54
• Manchón, Eduardo. Fuentes, tipos de letra y recursos tipográficos . http://www.alzado.org/articulo.php?id_art=127
• Martí García, J. Detalles de usabilidad en los enlaces . 7bites. URL: http://www.7bytes.net/nota.php?id=5
• Martín, César (2004). Subrayar enlaces. Cuidar los detalles . Master-NET. URL: http://www.masterdisseny.com/master-net/usability/
• Martín, César. Formato Imprimir URL: http://www.alzado.org/articulo.php?id_art=29
• Morrison, S., Noyes, J. (2003). A Comparison of Two Computer Fonts: Serif versus Ornate Sans Serif . Usability News 5.2
• Nielsen, Jakob. Be Succinct! (Writing for the Web) URL: http://www.useit.com/alertbox/9703b.html
• Nielsen, Jakob. How Users Read on the Web . URL: http://www.useit.com/alertbox/9710a.html
• Nielsen, Jakob. PDF: Unfit for Human Consumption URL: http://www.useit.com/alertbox/20030714.html
• Pastor y Saorín (1998). La escritura hipermedia . Cuadernos de Documentación Multimedia. Troffer, Alysson (2000). Writing Effectively Online: How to Compose Hypertext. Link Density Issues and Tips . URL: http://homepage.mac.com/alysson/htlinks.density.html
• Vannevar Bush (1945). As We May Think
• Villa, Luis. Historia del Hipertexto: Memex URL: http://www.grancomo.com/e/historia_del_hipertexto_memex.php
• Villa, Luis. Historia del Hipertexto: Xanadú URL: http://www.grancomo.com/e/historia_del_hipertexto_xanadu.php
• Whitehead, Jim. Orality and Hypertext: An Interview with Ted Nelson URL: http://www.ics.uci.edu/~ejw/csr/nelson_pg.html
• Wilson, R. F. (2001) HTML E-Mail: Text Font Readability Study URL: http://www.wilsonweb.com/wmt6/html-email-fonts.htm

La mayor parte de este artículo se ha extraído de las siguientes entradas en Úsalo:

• La Usabilidad del Hipertexto es relativa
• Elegir los tipos de letra
• Escribir para la red. Corrección y panhispanismo
• Principios de escritura web