Presentación de los 10 principios heurísticos de usabilidad web de Jakob Nielsen y principios de legibilidad para el diseño web

1. Principios Heurísticos de
Usabilidad y Legibilidad Web
NINO ZEGARRA MALATESTA

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

4. Los 10 Principios heurísticos
Informar
sobre lo
que está
pasando
Principios
de
Usabilidad
Hablar el
lenguaje
del
usuario
Libertad
y
Control
de uso
Ayuda 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

5. 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

6. 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.

7. 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.

8. 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.

9. 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”.

10. Principio # 5. “Prevención de errores”

11. 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.

12. Principio # 6. “Mejor reconocer que
memorizar”

13. 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.

14. Principio # 7. “Flexibilidad y eficiencia de
uso”

15. 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.

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

17. 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”

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

19. 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 concretas
Un 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.

20. Principio # 10. “Ayuda y documentación”

21. Principios de Legibilidad

22. 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.

23. 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

24. 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.

25. 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.

26. 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.

27. ¿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.

28. ¿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 */

29. 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.

30. 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.

31. 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

32. ¿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

33. 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

34. 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)?