Legibilidad de textos en páginas web: ¿cómo lograrla?

Como continuidad a mi articulo anterior, donde menciono algunos conceptos básicos que mejoran nuestros diseños, me gustaría complementarlo con un listado de elementos que hacen nuestro blog o sitio web más legible y a la vez incrementa su usabilidad.

Una página web legible puede recorrer un largo camino con sus usuarios, y la legibilidad tiene un gran impacto en su experiencia. Diseñar para web tiene que ver con hacer que la experiencia del usuario sea lo más placentera posible.

Encabezados fáciles de usar

Los encabezados son un elemento clave en tipografía, web e impresa por igual. Son parte de la jerarquía del texto y un factor importante en el contenido de fácil revisión.

En primer lugar, el tamaño del encabezado es tan importante como el tamaño del cuerpo de texto. Si este es demasiado grande y además tiene una gran cantidad de contenido puede desorientar al usuario al leer y hacer que se pierda. En última instancia, arruinará el flujo del contenido y será una distracción. Los encabezados que son demasiado pequeños también arruinarán la jerarquía del artículo. Si el encabezado es demasiado pequeño, no llamará la atención del usuario como debería.

Es importante proporcionar un amplio espacio entre el encabezado y el cuerpo de texto

 

Texto escaneable o de fácil revisión

En ocasiones en lugar de realizar una lectura detallada, ejecutamos una lectura superficial, mejor conocida como «escaneo».

El texto escaneable va de la mano con texto legible. Hacer una copia escaneable consiste en un buen uso de los

 encabezados, la jerarquía y los puntos de enfoque para guiar al usuario a través del contenido.

Entonces, ¿qué hace que la copia sea escaneable? Bueno, hay muchos factores:

El tamaño y la posición del encabezado, el tamaño del texto del cuerpo, la altura de la línea de texto, el contraste del texto y la manera en que se diferencian los puntos de enfoque afectan la capacidad de copia escaneable.

Los puntos de enfoque son ciertos elementos u objetos dentro del diseño que atraen, o se supone que atraen, la atención del usuario. Esto podría ser un encabezado, un elemento gráfico, un botón, etc.

Espacio en blanco

En diseños de contenido pesado, el espaciado contribuye a la legibilidad del contenido. El espacio en blanco ayuda a compensar grandes cantidades de texto y ayuda a que los ojos del usuario fluyan a través del texto. También proporciona separación entre elementos en el diseño, incluidos gráficos y texto.

Consistencia

La consistencia a menudo se considera una técnica importante para la usabilidad, pero también se aplica a la legibilidad. La consistencia en la jerarquía es importante para un diseño fácil de usar. Esto significa que todos los encabezados de la misma importancia en la jerarquía deben ser del mismo tamaño, color y fuente. Por ejemplo, todos los encabezados

en un artículo deben ser idénticos.

¿Por qué? Esta coherencia proporciona a los usuarios un punto de enfoque familiar cuando escanean y ayuda a organizar el contenido.

Densidad del texto

La densidad del texto se refiere a la cantidad de palabras que colocas en un área. La densidad del contenido tiene un gran impacto en la legibilidad de su contenido. La densidad se ve afectada por las opciones de espaciado, como la altura de la línea, el espaciado entre letras y el tamaño del texto. Si encuentra un equilibrio entre todos estos para que el contenido no sea demasiado compacto ni demasiado espaciado, tendrá una densidad perfecta que es legible y escaneable.

Énfasis de los elementos importantes

Otro factor clave es el énfasis de ciertos elementos dentro del contenido del cuerpo. Esto incluye resaltar enlaces,  texto importante y mostrar citas. Los puntos de enfoque son esenciales en la tipografía web. Al enfatizar estos objetos, proporciona puntos de enfoque para el usuario. Estos puntos y objetos ayudan a romper el texto monótono.

Al proporcionar estos puntos de enfoque, hacemos que el cuerpo de texto sea extremadamente escaneable. Las líneas clave de texto en negrita atraen inmediatamente la atención del usuario y, por lo tanto, es un elemento muy importante para la presentación de información relevante.

Organización de la información

La forma en que organizas la información en un artículo puede fortalecer la legibilidad. Los usuarios son guiados con facilidad a través de contenido que está organizado correctamente, porque la información es más fácil de encontrar.

Implementación correcta de gráficos

Cada cuerpo de texto necesita algún tipo de soporte visual, ya sea una imagen, icono, gráfico o ilustración. Colocar el gráfico en el artículo puede ser un desafío. Se necesita suficiente espacio entre el gráfico y el texto.

Si el elemento gráfico es una imagen, un borde limpio es una buena idea para proporcionar una separación limpia del texto. Los bordes pueden ayudar a guiar los ojos del usuario y son buenos para agregar estilo al contenido. Sin embargo, es importante mantener las fronteras en el contenido simple. Deben tener una paleta de colores sutiles y no deben ser demasiado grandes.

En el caso de elementos gráficos como iconos e ilustraciones, el espacio es el único separador que se debe usar. El contenido debe moverse limpiamente alrededor del gráfico sin interrumpir el texto.

Uso de separadores

Los separadores son una manera simple y fácil de dividir el texto en secciones de una manera limpia y organizada. Se pueden usar para dividir elementos de jerarquía, como encabezados y cuerpo de texto. También se pueden usar para dividir el contenido en secciones.

La forma más simple de dividir es el uso de una sola línea. Estos se usan con mayor frecuencia para dividir elementos de jerarquía y son muy útiles para hacer divisiones sutiles que aún juegan un papel importante en la legibilidad.

Otra forma común de dividir contenido es usar cuadros. Los cuadros de texto son excelentes para separar contenido no relacionado en una sola página. Ayudan a mover los ojos del usuario a través de un diseño complejo.

Buenos márgenes

El espacio en blanco realmente ayuda a atraer la atención del usuario sobre el texto. El área en blanco (espacio en blanco) obliga al ojo a enfocarse en el texto. Por lo tanto, el espacio en blanco influirá en el flujo y la legibilidad del contenido.

Los márgenes son uno de los mejores elementos de espacio en blanco y también admiten elementos de texto. Los márgenes en ambos lados obligarán al ojo del usuario a enfocarse hacia adentro en el contenido central del artículo.

Los márgenes también apoyan el artículo de otra manera. Ayudan a separar el contenido del resto del diseño y el diseño. Los márgenes ayudan a definir el artículo y su separación.

Fuente: smashingmagazine.com