Spanish (Español) translation by Carlos (you can also view the original English article)
La legibilidad en la web tiene que vencer muchos obstáculos. Aun si sigues todas las convenciones adecuadas, la presencia de anuncios digitales, ventanas emergentes y «click bait» pueden distraer del contenido principal de tu sitio. ¿Pero cómo afecta a la legibilidad? ¿Cómo puedes utilizar el diseño para mejorarlo? A continuación se presentan algunas maneras de pensar acerca de la legibilidad en la web.
«Un buen diseño busca una comunicación efectiva, no decoración a expensas de la legibilidad». - Vitaly Friedman
Los fundamentos: texto grande y legible
En lugar de utilizar tamaños de pt específicos, considera usar unidades de longitud relativa como em para escalar mejor en los distintos tamaños de dispositivos.
Para garantizar el contraste visual y la accesibilidad, revisa la guía del W3C sobre el uso de una relación de contraste de al menos 4:5:1 entre el texto y el fondo. Recuerda que los estándares de contraste son un conjunto de directrices. En realidad, los usuarios usarán una variedad de dispositivos en distintos entornos (poca luz, noche, etc.), quizá también con diferentes filtros de color del navegador o del sistema operativo. Así que procura cumplir con las directrices del contraste estándar, pero ten en cuenta que la vida real puede presentar aún más obstáculos para el contraste visual.
TipografíaLegibilidad tipográfica
AccesibilidadDiseñando contenido accesible: tipografía, estilo de fuente y estructura
Maximiza la claridad: evita la jerga
Al entender cómo leen las personas en la web (una pista: no leen, escanean), puedes escribir de una forma que maximice la claridad. Evita las oraciones largas o la excesiva dependencia en la terminología.
El caso límite es cuando estás escribiendo para una industria específica; puede haber términos comunes para tu público que deben ser examinados a través de estudios de usabilidad. Una trampa común es utilizar términos o siglas que les resulten familiares a tu grupo de trabajo, en lugar de trabajar con lo que coincide con el modelo mental de tu público.
Más claridad: contenido en fragmentos
Cuando haya casos en los que exista una gran cantidad de contenido en una página, trata de organizarlo en fragmentos. Ya sea a través del diseño visual (como añadir espacio, dividir líneas, color de fondo, sangría o elementos tipográficos), en diferentes formas de contenido o agrupando piezas similares de contenido, todas las formas de organización pueden ayudar a la comprensión y así se evita dar la impresión de un bloque de texto largo e intimidante.
Además de las palabras, elementos como diagramas, cuadros, tablas y llamadas también pueden ayudar a enfatizar los aportes clave o los llamados a la acción para tus lectores.
Claridad mediante patrones de lectura
En la web existen varios patrones de escaneo comunes, algunos bastante conocidos que se muestran mediante estudios de seguimiento ocular, incluyendo al patrón en forma de F y el patrón en forma de Z para leer en la web. Conocer cómo se mueve el ojo alrededor de una página puede ayudarte a priorizar la ubicación de la información más importante en la esquina superior izquierda y arriba del pliegue, ya que ahí es donde primero se mira.
Teoría del diseñoComprendiendo la estructura F en el diseño web
Teoría del diseñoComprendiendo la estructura Z en el diseño web
Conclusión
Por último, considera los objetivos de tus lectores en la página: ¿qué logran al leer esta página? ¿Cuál es el contexto? Al presentar contenido útil y respetar el tiempo de tu usuario con información breve y clara, ayudas a optimizar la experiencia de lectura y practicar un mejor diseño.
Legibilidad en Temas de WordPress
