comparte el articulo 

Principios de legibilidad que no deben ser ignorados al diseñar

Actualizado el 04/10/2013 < > 0 Comentarios

Resumen: Explicamos algunos aspectos relevantes que nos permitirán mejorar la usabilidad de nuestros sitios a través de elementos que promueven una mejor lectura

La legibilidad es la capacidad que algo sea leído gracias a la claridad con la que muestra, ésta característica del contenido, representa un aspecto muy relevante para medir la usabilidad de los sitios web. El hecho de presentar los textos de nuestras páginas de manera precisa, le permite al usuario asimilar más fácilmente la información.

Para poder lograr una correcta legibilidad en nuestro sitio, es necesario recurrir a una refinación de ciertos factores como la estructura, el estilo y el diseño. Debemos tener en mente que para poder lograr mantener la atención del usuario, tenemos que considerar el diseño de las letras como un aspecto relevante para la legibilidad, así como la composición total entre letras, palabras y oraciones, además de la manera en que éstas son presentadas al lector.

Muchos diseñadores cometen el error de enfocarse únicamente en lo artístico de un sitio y no verifican si realmente las composiciones de texto son realmente legibles para los usuarios. Es muy importante que el usuario pueda comprender la mayor parte de un texto con el menor cansancio posible, de esa manera podrá captar el mensaje que intentamos transmitir sin un esfuerzo lo suficientemente grande como para que considere abandonar el sitio o simplemente no regresar.

Debemos tener en consideración que no todas las fuentes se han diseñado para ser legibles. Existen algunos factores que afectan a cierto nivel la legibilidad de algunos tipos de letra, como por ejemplo su anchura, la forma de los caracteres, su longitud excedente a la de la línea de escritura y su contraste. Un buen comienzo para que su contenido sea legible para escoger una buena fuente.

Mejorar la legibilidad

Cuando se habla de mejorar la legibilidad de un sitio, lo primero que se viene a la mente de la mayoría de los diseñadores, es aumentar el tamaño de la fuente con la que se muestran los textos. Esta acción puede mejorar la claridad hasta cierto punto, pero no representará una solución total, ya que si el texto luce amontonado o tenue, por más que aumentemos el tamaño no solucionaremos el problema.

Es por esto que se tiene que voltear a ver otros factores de la estructura, los cuáles al ser analizados pueden verse refinados hasta llegar al grado que buscamos. A continuación, expondremos algunos consejos que te ayudarán a poner en práctica esta refinación y mejorar la legibilidad de tu sitio.

Establecer jerarquías

Es muy importante que al manejar grandes cantidades de texto, establezcamos una jerarquía que nos permita definir los encabezados de cada sección y a que nivel se encuentra el texto que se expone después de éste. El uso de jerarquías permite instruir al usuario acerca de cómo debe leer el contenido, esto se lograr mediante una diferenciación entre cabeceras, cuerpo del texto y el resto de los elementos tipográficos, como las citas.

Uso correcto del espacio vertical entre renglones

El espacio vertical entre las líneas de texto, mejor conocido como “line-height” en CSS, debe ser 30% a 50% más grande que el tamaño de fuente que estamos utilizando para desplegar el texto. La mayoría de los diseñadores utilizan una altura de línea equivalente a 1.4, esta medida es considerar como estándar; sin embargo, se puede presentar casos donde la tipografía demande una altura mayor, debido al excedente que se produce por una longitud muy grande en algunas letras.

Evita el uso de mayúsculas

En muchas ocasiones el uso de mayúsculas le da cierta estética a algunas partes de nuestros proyectos, su uso en encabezados se puede considerar aceptable, y se hace con el fin de captar la atención de la vista del usuario. Pero una vez que las mayúsculas pasan a utilizarse en todo el texto que se presenta en una página, se cae en un claro error de legibilidad, ya que el esfuerzo que debe realizar el usuario por captar el texto se vuelve más grande.

Trata de evitar el uso de la propiedad “text-transform” de CSS, al menos de que sea un caso muy necesario, y de ser así, busca dar alguna otra clase de énfasis para que el usuario pueda distinguir mejor el texto.

Usa el contraste sabiamente

Un buen contraste hará que el texto sea fácil de leer, mientras que uno malo puede arruinar rápidamente la experiencia del usuario, es por eso que debemos utilizarlo con prudencia. Un ejemplo de un buen uso de contrastes en el diseño, es utilizar texto negro sobre un fondo blanco, mientras que uno malo sería un texto de color rojo sobre un fondo verde.

No extiendas de más las líneas de texto

La longitud de una línea de texto, debe estar entre 65 y 75 caracteres. Tener más que estos caracteres, puede aburrir a los visitantes y la posibilidad de que dejen de leer aumenta en gran medida. Al manejar líneas con longitudes estándar, permitimos que los ojos de los usuarios fluyan desde el final de una línea a la siguiente con facilidad.

Busca un diseño limpio

Utiliza espacios en blanco siempre que sea posible, especialmente en los diseños con contenido muy sobrecargado, esto ayudará a mejorar bastante la legibilidad. Un diseño limpio te permite separar los elementos del diseño y hacer más fácil la tarea de lectura de contenido para el visitante.

Evita los párrafos largos

Es común oír quejas por el uso de párrafos extensos al exponer una entrada en un blog, para evitar el aburrimiento y cansancio de la vista por parte de nuestros visitantes, es recomendable dividir nuestros textos en párrafos pequeños pero concisos, que permitan identificar una idea y hagan de la lectura un proceso más ameno. Para poder lograr esto, podemos hacer uso de saltos de línea, espaciado, sangría, entre otros elementos.

Publicado el 02/07/2013, última actualización 04/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras