Experiencia de Usuario UX con las tipografías
Compartir
Las tipografías forman parte esencial en el proceso de User Experience UX, este factor determina directamente la rapidez o legibilidad de los textos y si no va acorde con el diseño suele ser una mala experiencia para los usuarios.
Existen miles de Fuentes tipográficas destinadas para los distintos soportes o plataformas, y es por eso que debemos saber distinguir cada una de ellas para no cometer el error de muchos sitios y portales web.
Las tipografías van relacionadas directamente con las emociones, y es mediante el uso adecuado para establecer estos estados de ánimos positivos, un mal uso de puede generar desacomodos por parte del lector lo que significa que disminuye totalmente el interés de la lectura.
Fue demostrado por dos investigadores de Microsoft ( K.Larson y R. Picard ) en un estudio llamado The Aesthetics of Reading.
Se entregaron dos versiones de un artículo del periódico The New Yorker una original y otra con una tipografía de menor alcance de lectura.
En esta investigación se genero un impacto en el estado anímico del lector, al leer una tipografía mas agradable y legible se involucran mas con la lectura y el tiempo pasa más rápido y genera ayudas a la creación de problemas que aumenta la productividad.
Tips o aspectos fundamentales para tener presente en cada lectura.
- Mantener una consistencia en su diseño, a esto me refiero al alto y ancho del los caracteres.
- Todos los tamaños De Fuentes deben ser legibles tanto los grandes como los más pequeños.
- La altura de las bajas debe ser suficiente para no quedar disminuidas frente a las mayúsculas.
- El interletrado debe estar acorde al espacio establecido del área de lectura.
- Los caracteres deben tener diferenciación para no confundir al lector entre una letra y otra.
Existen dos rostros fundamentales en las familiar tipográficas
1. Serif
Estas son fuentes que contienen pequeños apéndices en la parte superior e inferior de una carta. Ejemplos de ello son Times New Roman, Century, Bookman y Courier. Estas son las que se deben utilizar cuando la pagina lleva grandes cantidades de texto.
2. Sans-serif
Estas fuentes tienen sólo trazos de línea primaria, y poseen una forma más simple. Ejemplos de estas fuentes son Futura, Helvética, y Arial. Suelen ser utilizada para frases cortas.
Luego de tener una tipografía ya seleccionada debemos tomar en cuenta factores fundamentales para sacar el mayor provecho de la lectura y a la legibilidad de este como:
Tamaño
Nielsen empleaba un tamaño mínimo de 10 puntos correspondiente a 13pixeles o bien 12 puntos que corresponde a 16 pixeles eso si el publico objetivo eran personas mayores.
En la actualidad algunos argumentan un tamaño ideal de 16 pixeles o bien utilizarlo en porcentajes.
Algunos tamaños más utilizados.
14 pixeles para: Twitter, Amazon, Weibo, Wikipedia
13 pixeles para: Google, Yahoo, Baidu
Claramente los 10 y 12 en Arial o Verdana ya son historia.
Palabras por línea
Lineas demasiado cortas de textos nos matan la lectura y realmente cansan y rompen el ritmo, generando tensión en la lectura y las líneas demasiado largas nos genera una dificultan el hacer el salto de una a otra línea.
El ancho satisfactorio va entre los 45 y 75 caracteres, una línea de 66 caracteres se puede considerar ideal para obtener una buena experiencia de lectura.
Interlineado
Corresponde a la separación entre las líneas de un párrafo o bien con código el Line height, idealmente en términos tipográficos debería estar en los 1.2 em por lo que en web debería ser 1.5 en promedio.
Un estudio de los sitios más populares entre 50 sitios entregan una medida de 1.48 em.
Color
Este sencillo factor puede atraer la atención de muchos usuarios, junto con la combinación entre el texto y el fondo, este debe ser óptimo para que la lectura sea legible.
Por lo general la mayoría de las tipografías están diseñadas bajo la tonalidad negro y fondo blanco.
Las fuentes Sans Serif funcionan mejor con color al ser más robustas y no necesitar tantos detalles como las fuentes con serifa.
Una buena herramienta es Colour Contrast Analyser, ayuda a determinar la legibilidad del texto y el contraste de los elementos visuales, como los controles gráficos y los indicadores visuales.