UI Design

Heurísticas de Nielsen: Prevenir y reconocer

Todos hemos estado en algún sitio, app o incluso videojuegos, que nos han causado incertidumbre. ¿Qué tengo que hacer ahora? ¿Cómo vuelvo atrás? Muchas preguntas pueden llegar a agobiarnos dentro de una interfaz, inclusive de un correo. Hoy, en la tercera entrega sobre las heurísticas de Nielsen, analizaremos los principios de prevención y reconocimiento.

Un buen diseño es aquel que se adelanta a nuestras equivocaciones y facilita nuestra navegación, estas acciones forman parte de las 10 Heurísticas que nos permiten construir plataformas usables.

Si tienes curiosidad, también puedes revisar las heurísticas sobre libertad y consistencia o usabilidad.

Principio 5: Prevención de errores

Te aseguro que más de una vez querías mandar un documento por mail, pero sólo enviaste un correo vacío. Qué puedo decirte, genius.

Errores así suelen pasar cotidianamente, ya sea por despistado, por apuro, porque se quedó “pegado” el computador o simplemente lo olvidaste. Sea cual sea la razón, los usuarios y usuarias, no deben ni tienen la culpa. El problema de este tipo de errores, radica en que el sistema no fue capaz de adelantarse al contexto que nos lleva a equivocarnos. Es decir, es un error de diseño. 

Casos como estos los podemos observar en distintas instancias de interacción humano-máquina. Por ejemplo, al escribir tu nombre y apellido juntos, cuando la casilla de apellido es la siguiente; O cuando confirmas tu contraseña solo para saber que no es válida porque “no contiene una mayúscula, un número y un carácter especial”. Y tú piensas, ¿por qué no me avisaron antes?

¿Cometiste un error? No es tu culpa

Para poder quitarle la culpa y decepción a los usuarios y usuarias que usan nuestro servicio, es importante entender que sí o sí se van a equivocar (porque recordemos, somos humanos y los humanos se equivocan). 

Una vez que tienes esto claro, es importante identificar instancias en la interacción dónde sea más probable que cometan errores. Estas interacciones o micro-interacciones, pueden abarcar desde seleccionar un archivo, agendar una hora y día, agregar un producto al carro de compra que no querías o, sin ir más lejos, escribir mal una palabra en word.

Actualmente, Gmail es uno de los servicios que nos alerta por casi todo lo que hacemos -y no hacemos-. Por ejemplo, cuando escribimos un mail sin asunto, antes de enviarlo, desprende una alerta para informarte que tu correo no posee uno, dándote a elegir si quieres agregarlo o simplemente mandarlo sin él. También, nos alerta cuando redactamos un mail con la palabra “adjunto”, pero no hay ningún documento anexo. Ambas opciones nos dan la oportunidad de poder corregir nuestra acción antes de enviar.

Alerta de Gmail al no adjuntar archivo

Otros ejemplos son los distintos estados que un formulario puede adoptar al interactuar con el usuario, ayudándolo a saber dónde y porqué se equivocó. En IDA acostumbramos a diseñar formularios con tres elementos mínimos: La etiqueta, el placeholder, y el mensaje de prevención. 

Etiqueta

Nos ayuda a entender la naturaleza de la información solicitada, si es un texto, un número, una fecha o un mensaje más elaborado. 

Placeholder

Nos permite dar una instrucción clara. Ejemplo: “Escribe tu nombre”.

Mensaje de prevención 

Advierte sobre ciertas características. Por ejemplo, 150 caracteres máximos, sólo número, sólo letras, sólo mayúsculas, etc.

Distintos estados que puede tener un formulario

Principio 6: Reconocer antes que memorizar

¿De dónde vengo y a dónde voy? ¿A qué vine a este sitio?

Para entender este principio primero tenemos que asimilar algo sobre nuestros cerebros y cómo funciona la memoria.

Las personas recordamos información a través de dos mecanismo: El reconocimiento y el recuerdo. El primero se refiere a nuestra capacidad para “reconocer” un evento o pieza de información. Mientras que recordar requiere la recuperación de detalles relacionados en la memoria. 

En palabras simples, reconocer implica menos carga mental para nuestros usuarios, ya que, no deben hacer el esfuerzo de bucear en su memoria. 

Por ejemplo, sería imposible recordar todos los objetos que hemos agregado a nuestro carrito de compras del supermercado. Frente a eso, algunos e-commerce despliegan su ventana del carrito en todo momento, de forma que se pueda reconocer fácilmente qué y cuánto llevo; además de darme la flexibilidad de retirar o agregar algo más. 

Otro ejemplo muy simple y subvalorado, son las breadcrumbs o “migas de pan”. Ellas nos ayudan a reconocer las páginas por las que hemos navegado para llegar al punto donde te encuentras actualmente. Así, se evita que los usuarios deban recordar cada click que hicieron.

Breadcrumbs Blog IDA

Historial de búsqueda, íconos, “leer más tarde” o favoritos son algunas de las formas para promover la recuperación de memoria de nuestros usuarios. Los patrones de diseño son una herramientas ideal para estos casos, ya que ellos son diseñados en base a los esquemas mentales que construyen las personas según la experiencia. Puedes leer más sobre estos patrones en el artículo anterior o en UI Patterns.

Los formularios con autocompletado ayudan a reconocer la información que debe ingresa

Responsabilidad y usabilidad

La construcción de un diseño de experiencias memorable requiere de tiempo y dedicación. Además, siempre debemos tener en cuenta los errores que las personas puedan cometer durante cualquier proceso. Entregarle las herramientas para que este roce sea mínimo, es una de nuestras principales labores. 

Sabemos que diseñar el sitio web perfecto es imposible. Sin embargo, podemos lograr que sea útil y usable por nuestros usuarios. De nada sirve una plataforma que mejore el mundo con sus innovaciones si nadie puede usarla. Comprender las heurísticas de Nielsen es primordial para cualquier diseñador de experiencias.