7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. UX

La importancia de la legibilidad en la web

Scroll to top
Read Time: 3 mins

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.

Isometric website with book and glassesIsometric website with book and glassesIsometric website with book and glasses
«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.

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.

Stripe documentation showing call-outs dividing lines and tablesStripe documentation showing call-outs dividing lines and tablesStripe documentation showing call-outs dividing lines and tables
Elementos visuales para fragmentar el contenido en Stripe docs

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.

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.