15 sep
2011

Mejorar la legibilidad de nuestros contenidos

jeroglifico

Un factor importante para el éxito de una web con contenidos es su legibilidad. Hay que tener en cuenta este factor para que nuestros visitantes lean de forma cómoda y entiendan los contenidos.

Aunque ni este blog ni yo mismo estemos especializados en estos temas, quiero compartir con vosotros algunos consejos que he ido recabando y que empezaré a aplicar a partir de ahora :):

¿Cómo se leen las páginas web?

Pensemos en cómo se lee una web: el usuario no tiene abierta una sola página (¿Cuantas tienes abiertas en este momento?) y cambia cada poco tiempo de pestaña, lo que disminuye la atención prestada.

Además, las páginas no se leen, se hojean: La estadística dice que 79% de los usuarios “escanea” la página en vez de leerla. Por tanto, no le podemos pedir toda su atención y debemos ponérselo fácil, dándole texto y estructuras fácilmente reconocibles:

  • Enlaces diferenciados (y con texto descriptivo).
  • Texto con énfasis para remarcar las ideas.
  • Listas con bullets o numeradas, fácilmente identificables visualmente.
Es curioso ver que la vista se fija en los números mejorando la “escaneabilidad” del texto, por lo que es preferible usar dígitos que su equivalente en texto.

Estructurar los artículos

Pirámide invertida: Deberíamos seguir un esquema de pirámide invertida: presentar la conclusión y la información más importante al principio y posteriormente desarrollarla.

Usa cabeceras para separar partes: Una buena manera par trocear el contenido es el uso de cabeceras. Dan pistas visuales de la estructura del documento y mejoran la “orientación” del usuario en la página. Evita usar gráficos como cabeceras.

No te enrolles: Evita los párrafos interminables, hay que dividirlos y separarlos para que se identifiquen visualmente y mejoren su lectura. Mejor tener 3 párrafos cortos que uno muy largo.

Nos podemos apoyar en herramientas que puede ayudarnos a identificar cuando nos hemos pasado de “literarios”: Juicy Studio tiene el Readability Test, que recibe la url de la página a analizar, aunque tiene el problema de no distinguir los elementos del layout de los de contenido. Hay otros tests que nos permiten introducir directamente el texto, como : Readability Index Calculator, Readability Assessment o incluso desde Microsoft Word.

11 caracteres: A la hora de “planificar” los textos de los encabezados, ítems de listas y los textos de enlaces, hay que tener en cuenta que los primeros 11 caracteres son fundamentales.

Cuidado con las siglas y abreviaturas: Hay una excesiva profusión de las mismas, lo que hace el texto difícil de entender para el que no esté muy familiarizado con el tema. El uso de abbr mejora la comprensión de las mismas.

Diseñando la página

En lo que toca al layout unas cuantas consideraciones que me parecieron útiles:

  • Conocer qué es el F-Shaped Pattern e intentar aplicarlo :)
  • Que el artículo se diferencie claramente del resto de la página y no se confunda con los elementos del layout. Nada de intercalar publicidad o banners en el medio.
  • Si una imagen es parte integral de un artículo debe ocupar un espacio en medio del texto, como si fuera un párrafo más. Si hacemos que el texto fluya a su alrededor es posible que el usuario lo entienda como un mero elemento decorativo.
  • Para logar una longitud de línea óptima (unos sugieren 40-50 caracteres, otros dicen que hasta 75 son aceptables), lo mejor son los layouts fijos, en un monitor grande con un layout líquido puede ser muy difícil seguir las líneas.
  • Respecto a usar tipos de letras con o sin serifa (los remates de las letras), hay muchos estudios al respecto, me quedo con  “Which Are More Legible: Serif or Sans Serif Typefaces?” (muy bien documentado) y con la “Legibility and readability on the World Wide Web” que analiza distintas familias de letras, tamaños y combinaciones de colores. En todo caso lo mejor es usar fuentes específicamente diseñadas para pantallas.
  • Para mantener un contraste adecuado entre letras y fondo, el diseñador debería utilizar una herramienta de comprobación. Personalmente recomiendo el Colour Contrast Analyser.
  • Se pueden sacar más ideas de 30 maneras para mejorar la legibilidad.

Espero que os resulte útil y/o interesante!

Saludos cancamuseros!

No se aceptan más comentarios
Seguir a enriquin en Twitter View Enrique Blanco's profile on LinkedIn

En ocasiones veo business

Este es el blog personal de Enrique Blanco, Ingeniero Informático y Executive MBA por el Instituto de Empresa, donde trataré temas relacionados con la tecnología, las empresas, Internet y, en general, cosas que me resulten interesantes.

Actualmente trabajo como consultor en Aventia y soy uno de los socios fundadores y el responsable técnico de Deportempresas.

Últimos Comentarios

Comment RSS

Histórico