Principios Heurísticos de Usabilidad y Legibilidad

WebNINO ZEGARRA MALATESTA

¿Qué es Usabilidad?

“Usabilidad es el atributo de calidad que mide lo fáciles que son de usar las interfaces Web.” Jakob Nielsen

Los 10 Principios heurísticosInformar sobre lo que está pasando

Principios de

Usabilidad

Hablar el lenguaje

del usuario

Libertad y Control

de usoAyuda y Documentación

Diseño estético y

minimalista

Consistencia Estándares de diseño

Flexibilidad y

experiencia de Uso

Prevención de errores

Reconocer antes que recordar

Ayuda a reconocer

errores

Principio # 1. “Visibilidad del estatus del sistema”

Las barras de proceso que nos indican cómo avanza la subida de un archivo.

El usuario debe saber que está sucediendo mientras interactúa con la página web, ya que de no hacerlo, lo único que generarás es incertidumbre.

Los mensajes de confirmación de envío de formularios

Iconos que nos indican un trabajo en proceso

Principio # 2. “Consistencia entre el sistema y el mundo real”El sistema tiene que “hablar el idioma” del target usando el mismo lenguaje. Y esto no se refiere sólo al texto, sino también a elementos de comunicación y estructura como:1. Las imágenes.2. El orden en que se hacen las cosas.3. La forma en que se presenta la información.

Principio # 3. “El usuario es libre y tiene el control”El usuario debe poder navegar libremente por la web y no sentirse encasillado, si el usuario siente que tiene el control, su experiencia de uso será la correcta y se sentirá gratificado; de no serlo así, sencillamente abandonará la navegación.

Principio #4. “Consistencia y estándares”El diseño de la web debe ser consistente en todas sus páginas, no por creatividad debemos modificar la estructura, colores, iconos y terminologías usadas.

Principio # 5. “Prevención de errores”

Realizar testeos antes de levantar una web nos va a permitir identificar errores que el usuario va a cometer y nuestro diseño debe preverlos para poder guiar al usuario a la solución del error u omisión.1. Incluyendo información contextual preventiva en el punto problemático.2. Suprimiendo condiciones que son proclives a inducir a error.3. Pidiendo confirmación al usuario.Haciendo comprobaciones en tiempo real.Dos ejemplos típicos de formulario:• Un campo que cambia de color para recordarte que lo has dejado en blanco.• Una comprobación en tiempo real que te dice que la segunda contraseña que has puesto no coincide con la primera, antes de dar a “enviar”.

Principio # 5. “Prevención de errores”

Principio # 6. “Mejor reconocer que memorizar”El usuario debe tener siempre toda la información a mano, y no verse obligado a usar su memoria para seguir el hilo de la interacción. Pónselo fácil para que no tenga que estar memorizando cómo volver a la página anterior o cómo encontrar aquel producto que ya ha visto y le interesaba:

Si el usuario tiene que “recordar” cómo se hace algo en tu web en lugar de “saberlo” intuitivamente, tienes un problema.Si el usuario tiene que recordar decisiones que ha tomado previamente porque no le muestras esa información cuando la necesita (por ejemplo en un proceso de compra), su experiencia de uso se empobrece considerablemente, y tendrás muchos más abandonos en la web.

Principio # 6. “Mejor reconocer que memorizar”

Principio # 7. “Flexibilidad y eficiencia de uso”Para los visitantes recurrentes y que realizan las mismas acciones se deberá usar “aceleradores” que acorten el tiempo y les permitan realizar esas tareas más rápido y directas estas acciones. Para los usuarios nuevos se deberán ocultar estos “aceleradores” a fin de no desorientarlos durante la navegación en nuestra web.El diseño de nuestro interfaz de usuario debe ser flexible para comportarse “a la medida” de usuarios novatos y usuarios expertos.Ejemplos:Un “puente” que nos lleve de la página de inicio a la página que más visitan nuestros usuarios, saltando pasos intermedios.Mostrarle al usuario los últimos productos que le ha interesado en su última visita, o en la visita en curso, ya que probablemente querrá volver a consultarlos.

Principio # 7. “Flexibilidad y eficiencia de uso”

Principio # 8. “Diseño estético y minimalista”El principio de un diseño minimalista es que menos es más, esto quiere decir que nuestra web no debe estar recargada de banner, textos e imágenes que no contribuyen a legibilidad de la información y dificultan la navegación, ya que cada unidad extra de información compite con las unidades relevantes de información y reduce la visibilidad relativa de esta.

Principio # 8. “Diseño estético y minimalista”

Principio # 9. “Ayuda al usuario a reconocer, diagnosticar y recuperarse de los errores”Los mensajes de error tienen que estar escritos en el lenguaje del usuario y no con tecnicismos y deben siempre sugerir una solución o un camino de salida.Ejemplo: Para el típico “ERROR 404” (página no encontrada) deberíamos sustituirla con una imagen amistosa y un mensaje que nos diga “La página buscada ya no se encuentra aquí, por favor presiona el enlace para volver a la página principal del enlace”

Principio # 9. “Ayuda al usuario a reconocer, diagnosticar y recuperarse de los errores”

Principio # 10. “Ayuda y documentación”

Lo ideal de una web es que sea intuitiva; sin embargo, el usuario necesitará en ocasiones ayuda o información y estas deben ser fáciles de encontrar y que esté diseñada para acciones concretasUn buen ejemplo es la lista de preguntas frecuentes (normalmente abreviado en inglés como FAQ (Frequently asked question) o Questions and Answers que puedes encontrar en la “ayuda” de redes sociales y tiendas web.

Principio # 10. “Ayuda y documentación”

Principios de Legibilidad

Alineado horizontal:

El estudio publicado en Jakob Nielsen’s Alertbox recomienda que cualquier párrafo de texto debe comenzar a una distancia del margen izquierdo de la página situada entre los 300 px. y los 600 px. ya el usuario dedica el 69% de su tiempo en mirar hacia la mitad izquierda de la pantalla.

Ancho de párrafo:

Cualquier párrafo deberá estar formado por líneas de texto de no más de 20 palabras por línea. Esto son alrededor de 500 pixeles de ancho en caso de utilizar un tamaño de fuente de 10-12 pixeles, las consecuencias de optimizar el ancho de página son un incremento en la legibilidad del texto

Tamaño de fuente:

Como norma, es recomendable utilizar un tamaño de fuente igual o superior a los 10 pixeles. No obstante, es conveniente emplear tamaños de fuente alrededor de los 14 pixeles si la audiencia del sitio web gira más allá de los 40 años.

Tipografía:

Los tipos de fuente más recomendados son aquellas especialmente diseñadas para ser mostradas en pantalla (y no en papel). Estas son las Arial, Georgia, Times, Verdana o Courier entre otras. Ante la duda, usar Verdana.

Interlineado:

El interlineado es muy necesario para lograr que nuestro texto sea legible. No se deben usar líneas muy juntas que hagan saltar de una a la otra por error. Tampoco líneas muy espaciadas que visualmente parezcan formar parte de párrafos distintos. Se recomienda utilizar un interlineado superior al tamaño de fuente. Es decir, para un tamaño de fuente de 10 pixeles es conveniente utilizar un interlineado de, por ejemplo, 12 pixeles.

¿Qué es un ems?

Es una técnica basada en el font–size de la letra M declarada en el font-family y se usa para poder asignar medidas relativas, ya que al asignar tamaños en pixeles estamos dando un tamaño absoluto que no va a cambiar, pero al asignar tamaños con Ems estamos asignando medidas que dependen directamente del elemento que lo contiene, si este cambia, lo que declaremos en Ems también lo va a hacer, ayudándonos a tener diseños que se ajusten a la resolución de cada navegador.

¿Qué es un ems?

Realmente, los ems son la solución a todos los males relacionados con ajustar el tamaño de un texto para la web.Un em es que es una medida relativa al tamaño base utilizado. Dicho de otra manera, si el tamaño base de tu texto está ajustado a 10px, 1em será igual a 10px (1 * 10px = 10px). Trabajar con ems facilita las cosas.

font-size: 10px; /* Este es el tamaño de fuente base para body */font-size: 1em; /* Tamaño resultante: 1em * 10px = 10px */line-height: 1.2em; /* Interlineado resultante: 1em * 10px = 12px */

Semejanzas y diferencias entre REMS EMS

Semejanzas:• Ambos son unidades de longitud

relativas.• Ambos se basan en el font-size de la

letra "m" de la tipografía declarada en font-family.

• Los dos priman la accesibilidad y los tamaños de tipografía y cajas dependerían (en teoría) de las "preferencias/necesidades" del visitante.

Diferencia:Em: la base de cálculo del valor computado es el font-size de la caja padre.Rem: la base es el valor de font-size del elemento raíz. En puridad debería ser el tamaño de la fuente que el usuario haya marcado en la opción que a tal efecto tiene el navegador. Pero en muchos casos, los diseñadores reescriben dicho valor en el selector Html.

Color y Contraste

El color del texto dentro del contexto correspondiente es importante también. Si colocas un texto azul sobre un fondo también azul, aunque sea algo diferente, puede ser difícil de leer. Hay una razón para que muchos diseñadores opten por colocar un texto claro sobre un fondo oscuro y viceversa: el contraste hace que los texto sean más fáciles de leer.

Color y Contraste

Las longitudes de las líneas óptimas pueden ayudar a determinar el tamaño del texto. Lo primero es saber hacia que dispositivo va a ir orientada la maqueta, escritorio o dispositivo móvil. Las siguientes recomendaciones son un buen punto de partida:• Escritorio: 55 a 75 caracteres por línea, incluyendo

espacios; lo ideal es andar cerca de los 65 caracteres por línea.• Dispositivos móviles: 35 a 50 caracteres por línea• Escritorio: 1,5 veces el tamaño de la tipografía• Dispositivos móviles: 1,75-2 veces el tamaño de la

tipografía

¿Cómo dar jerarquía al texto?

Debes analizar el conjunto para agregar jerarquía dentro del texto utilizando estos elementos. Y recuerda aportar un estilo definido para cada uno de ellos que trabaje en armonía con el resto de elementos y el cuerpo de texto principal. Los elementos que puedes utilizar son:• Encabezados• Enlaces• Negrita o cursiva en el texto• Listas de viñetas o numeradas• Elementos gráficos como fotos o infografías• Subtítulos• Entresacas• Mezclar serif y sans serif según los elementos

Tipografías recomendadas

A continuación te indicamos algunas tipografías recomendables por su legibilidad.

Con Serifs• Arvo• Old Standard TT• Abril Fatface• Vollkorn• Josefin Slab

San Serifs• Open Sans• Lato• Exo• Nobile• Droid Sans

Lista de comprobación de legibilidad

• ¿Es el tipo de cuerpo principal lo suficientemente grande? ¿Está dentro del rango de longitud de línea óptimo para cada tipo de dispositivo?

• ¿Hay suficiente interlineado?• ¿Hay suficiente espacio entre el texto y el borde de la página y otros

elementos del diseño?• ¿Hay suficiente contraste entre el fondo y el texto del cuerpo principal?• ¿Hay espacio adicional entre cada párrafo nuevo?• ¿Tienen un estilo diferente los encabezados frente al texto de contenido?• ¿Utilizas otros elementos (listas de viñetas, negrita, etc) para romper

grandes bloques de texto?• ¿Utilizas tipografías legibles para el cuerpo de texto principal

(preferiblemente serif simple o sans serif)?