Tema 4.2 - Heuristicas de Nielsen

Aunque las heurísticas de Nielsen son una de las técnicas de pruebas de usabilidad, debido a su gran importancia hemos decidido dedicar un apartado completo para su explicación.

Éstas son una seria de métodos creados por Jakob Nielsen para evaluar el diseño y usabilidad de la interfaz de usuario sin usuarios y realizado por expertos (Personas con conocimientos de UI y UX). Este método se compone de 10 principios heurísticos que se describen a continuación: 

1.   Visibilidad del estado del sistema: El sistema siempre debe mantener a los usuarios informados sobre lo que ocurre, a través de una retroalimentación apropiada en un tiempo razonable. 

Buena práctica: Webs / apps en las; que el usuario sabe en todo momento el estado del sistema. Por ejemplo, en la imagen se ve que al usuario se le indica qué información ha buscado previamente y en qué página del proceso de compra se encuentra. Es importante indicar siempre dónde se encuentra el usuario respecto a la estructura de la página, así como de dónde viene y hacia dónde puede ir.

Mala práctica: Uso de breadcrumbs (migas de pan) que no permiten que se seleccione ninguna opción de menú cuando se navega por él. 

2.  Empate entre el sistema y el mundo real: El sistema debe hablar en el lenguaje del usuario, con palabras, frases y conceptos familiares para él. Utilizar convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico. 

Buena práctica: En todas las páginas donde se debe hacer una búsqueda por fecha, se usa (con más o menos variantes) el ya clásico datepicker. Su uso y apariencia están tan interiorizados por todos los usuarios, que se ha convertido en un estándar. 

Mala práctica: Una muy mala práctica referente a este heurístico, es el uso de un vocabulario o jerga que no sean familiares al lenguaje que suelen usar los usuarios. Por ejemplo, en la imagen al seleccionar el idioma ‘español’, el calendario aparece en el sistema anglosajón, mostrando el ‘Domingo’ como primer día de la semana. Este detalle seguramente será confuso para el usuario hispanohablante medio. 

3.  Control y libertad del usuario: A menudo los usuarios eligen funcionalidades por error y necesitan una "puerta de emergencia" para salir del estado indeseado. Ofrecer soporte para deshacer y rehacer acciones. 

Buena práctica: A veces cuando se realiza una acción (como por ejemplo la de suprimir un producto de un carrito de compra) es mejor permitir deshacer la acción que preguntar a través de un molesto aviso si realmente se quiere suprimir dicho producto. Gmail lleva años permitiendo deshacer la acción de envío de correos electrónicos, evitando así esos embarazosos correos con destinatario erróneo. 

Mala práctica: Una mala práctica muy común la encontramos en los anuncios en portales de vídeo. Por un lado, se permite correctamente al usuario “Saltar el anuncio”, pero por el otro se limita su libertad de interacción al intentar navegar por la barra de control del video. 

4.  Consistencia y estándares: Los usuarios no deben tener que preguntarse si las diversas palabras, situaciones, o acciones significan la misma cosa. Que se sigan las normas y convenciones de la plataforma sobre la que está implementando el sistema. 

Buena práctica: La consistencia es una de las claves, por no decir LA CLAVE, a la hora de diseñar UI’s usables. Un elemento, como por ejemplo un botón de acción, debe verse exactamente igual en todas las pantallas de la web. Esto hace que se limiten el número de acciones y operaciones que se representan, asegurando que los usuarios no deban aprender nuevas funcionalidades en cada tarea que realicen. Una de las principales ventajas de utilizar frameworks de diseño front-end, es que la consistencia de todos sus elementos está asegurada. 

Mala práctica: Un mal ejemplo de aplicación de la consistencia y los estándares lo encontramos en la siguiente imagen. Dónde sitúan el formulario de búsqueda en una zona muy poco común para esta finalidad: la parte izquierda, justo antes del logotipo de la marca. Situemos siempre los elementos dónde los usuarios esperan encontrarlos. 

5.  Prevención de errores: Antes que diseñar buenos mensajes de error, es mejor evitar que el problema ocurra. 

Buena práctica: Un escenario clásico donde ocurren muchos errores es en la validación de formularios. Esto ocurre cuando no se informan debidamente los requisitos de cada campo, y el usuario obtiene errores no esperados. Como ejemplo de formulario bien diseñado encontramos el del proceso de ‘Registro’ de Facebook. Dónde en todo momento se indican los detalles necesarios para completar cada campo. 

Mala práctica: Sin embargo, en el formulario de alta de la web de Correos no se informa de las características que debe tener cada campo. Cosa que hace que hasta que el usuario no valida el formulario, éste no sabe que por ejemplo el campo ‘Contraseña’ debe tener un mínimo 8 caracteres. 

6.  Reconocimiento mejor que recuerdo: Minimizar la carga de memoria del usuario haciendo que los objetos, las acciones y las opciones estén visibles. El usuario no debería tener que recordar la información de una parte del diálogo a otra. 

Buena práctica: Siempre se deben indicar los campos por los cuales se ha realizado una búsqueda. Por ejemplo, en la imagen se muestra una leyenda en la parte superior con los parámetros por los cuales se ha buscado un hotel. 

Mala práctica: Sin embargo, como se ve en la siguiente imagen, no se especifican claramente los conceptos ni los filtros a modo de resumen. Obligando así al usuario a revisar distintas zonas de la pantalla para recordar qué había buscado previamente. 

7.  Flexibilidad y eficiencia de uso: Los aceleradores, no vistos por el usuario principiante, mejoran la interacción para el usuario experto de tal manera que el sistema puede servir para usuarios inexpertos y experimentados. Es importante que el sistema permita personalizar acciones frecuentes. 

Buena práctica: Los atajos de teclado (shortcuts) son el clásico ejemplo de ‘aceleradores’ que mejoran la interacción de los usuarios expertos. Permitiendo así realizar acciones de manera más rápida y automatizada.

Mala práctica: En este sentido, se deben evitar casuísticas y acciones que afecten considerablemente al tiempo que invierte el usuario para llevarlas a cabo. Por ejemplo, el típico formulario en el que, si una vez se valida y existe un error, se borran todos los campos previamente informados, haciendo que el usuario pierda el tiempo y en definitiva, la paciencia. 

8.  Diseño estético y minimalista: Los diálogos no deberían contener información irrelevante o que se necesite raramente. Cada unidad extra de información en un diálogo compite con la información importante, disminuyendo su visibilidad relativa. 

Buena práctica: ¡Menos es más! En el diseño de una página solamente se debe mostrar aquella información que realmente es importante para el usuario. Evitando así, ruido y elementos innecesarios que no cumplen con el fin principal de esa página. Por ejemplo, Google  lleva años resistiéndose a añadir más información en su página inicial. Dando así protagonismo a su funcionalidad principal: el buscador.

Mala práctica: Sin embargo, otros portales presentan una estética sobrecargada y con demasiados elementos. 

9.  Ayudar a reconocer, diagnosticar y recuperarse de errores: Los mensajes de error deben estar expresados en lenguaje llano (sin códigos), indicando con precisión el problema y sugiriendo una solución. 

Buena práctica: Un muy buen ejemplo de página de error 404 la encontramos en la web oficial de Spotify. Dónde se informa correctamente del problema sucedido y de las posibles salidas para solucionarlo: “Preguntas frecuentes”, “Comunidad” y “Volver”. 

Mala práctica: Por el otro lado, como ejemplo de mala práctica encontramos la web de Renfe . Dónde en el proceso de compra de un billete, aparecen múltiples mensajes de error con un sistema de numeración que el usuario difícilmente entenderá. 

10.  Ayuda y documentación: Aunque es mejor que se pueda usar el sistema sin documentación, es necesario proveer al usuario de ayuda y documentación. Esta tiene que ser fácil de buscar, centrada en las tareas del usuario, con información de las etapas a realizar y que no sea muy extensa. 

Buena práctica: El portal Stackoverflow proporciona una detallada sección de ayuda en su ‘Help center’. En una misma página se puede encontrar un buscador, un módulo de Onboarding y las F.A.Q’s. 

Mala práctica: Cualquier página web que no presente ninguna sección de ayuda, documentación o incluso de contacto, posiblemente provocará desamparo e incertidumbre al usuario.