Que el contenido es una de las principales claves de una página web. Crea vínculos con el usuario, transmite los valores de tu marca, las bondades de tu producto, te da prestigio y te permite posicionarte en Google y otros buscadores. Pero de nada te sirve el mejor contenido si este es complicado de leer. Por eso hoy os queremos dar una serie de claves para mejorar la legibilidad de vuestra web.

Se trata de una lista elaborada por 25lines que nos pareció fantástica, y que queremos compartir con todos vosotros.

Claves visuales y de jerarquía para mejorar la legibilidad web

Selección de la fuente

La gran clave en este sentido es mantener la coherencia de estilo tipográfico. Por ejemplo, todos los títulos deben ser similares, ayudando al lector a jerarquizar el contenido.

Tamaño de la fuente

Un punto complicado en un mundo donde el tamaño de la pantalla puede variar tremendamente de un usuario a otro: de un móvil a un monitor de 40 pulgadas 4K. Por suerte, en el diseño actual ya no dependemos del número de pixels sino de porcentajes que se adaptan al tamaño del dispositivo.

Contraste de color

El fondo claro con tipografía oscura es una apuesta segura, al que la gente está acostumbrada. Usar otro tipo de contraste, especialmente para textos largos, puede ser arriesgado y causar que el lector se marche.

Longitud de las líneas

La tradición general apunta que los 50-60 caracteres son la longitud ideal para la legibilidad web y evitar que el lector tenga que hacer scroll lateral para leer el contenido.

Párrafos compactos

Para facilitar la navegación, los párrafos deben ser cortos y concisos, facilitando al lector encontrar la información que necesita. Párrafos de entre tres y cinco líneas facilitan mucho el trabajo al lector.

Contenido que va al grano

El contenido debe ir directo al tema que quieres hablar sin dar vueltas. Ten en cuenta que muchos lectores leerán el contenido en diagonal buscando algo en concreto. 

Minimiza la jerga especializada

El gran objetivo de un texto es hacer comprensivo para el lector algo que no entiende o conoce. Por eso el uso excesivo de jerga especializada puede hacer que el lector se pierda.

Formatea el contenido

Estructurar el contenido con titulares, subtitulares y listas con bullet points pueden ahorrar mucho tiempo al lector, haciéndoles llegar a la parte del texto que les interesa de forma inmediata.

Densidad del texto

La densidad del texto viene determinado por elementos como la separación de caracteres o el interlineado. Se recomienda mantener la consistencia en todo el texto, pero también se puede modificar para destacar frases o palabras.

Contenido estructurado

El contenido debe contar con una estructura sistemática que facilite su comprensión, apoyándose en texto, imágenes y tablas.

Implementación gráfica

Todo texto debe apoyarse en imágenes, gráficos, fotografías o vídeos que refuercen el mensaje y ayuden a entenderlo. Eso sí, cuida que no pesen demasiado y empeoren la experiencia de carga.

Separadores

Las líneas y las cajas de texto, junto a otros elementos para guiar al lector y organizar la jerarquía vertical y horizontal del contenido por secciones y subsecciones. 

Márgenes

El espacio en blanco es fundamental para que el usuario pueda distinguir los elementos del contenido del resto del diseño de la página, por lo que hay que asegurarse que el texto no sangra sobre otros elementos de la página.

Estilos de tipografia

Ya hemos comentado que la mejor forma de hacer legible un texto es mantenerlo en un fondo claro. Sin embargo, en ocasiones puedes jugar con distintos elementos siempre que la fuente no pierda claridad al reducir el tamaño de la pantalla.

Representación textual de fantasía

Si una página tiene mucho contenido, usar permanentemente el mismo estilo puede ser aburrido. Puedes usar distintas tipografías con elementos muy distintos en ciertos puntos para introducir variedad, pero asegúrate de mantener la coherencia y la legibilidad en pantallas pequeñas.

Tipografías de imprenta

Se trata de un estilo de tipografía que simula tener un relieve similar al causado por una imprenta. Proporciona profundidad y puede ayudar a enfatizar, por ejemplo, una cita.

Estilo del fondo

El fondo puede aportar mucho a un diseño web. Puedes aplicar colores más mate o sombras donde coincida con texto. Lo que debes tener en cuenta es que el color de la fuente y el del fondo deben elegirse de forma que mantengan el contraste.

Formateando los hipervínculos

Los hipervínculos son otro elemento fundamental de cualquier texto web. Deben diseñarse de forma que el lector los identifique de forma rápida, por ejemplo con otro color o subrayados, además de facilitar distinguir cuáles han sido clicados y cuáles no.

¡Esperamos que esta entrada te sirva para mejorar tu página web! Y recuerda que si tienes cualquier duda, en Diligent estamos aquí para ayudarte!