27 de may. de 2024 8 min read Patrones

Diseño de notificaciones y mensajes de estado

¿Cómo podemos dar visibilidad al estado del sistema? ¿Qué elementos debe tener una buena notificación? ¿Qué tipos de notificaciones y mensajes de estado podemos encontrar?

La primera de las reglas heurísticas de usabilidad de Nielsen hace referencia a la necesidad de dar visibilidad sobre el estado del sistema, es decir, mantener a las personas usuarias informadas de lo que está pasando en todo momento:

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

Este principio incluye tres elementos fundamentales:

Informar sobre un evento relevante,
dar una información adecuada,
y hacerlo en un tiempo razonable.

Una información será relevante si está relacionada con los objetivos de la persona y se presenta en el contexto de lo que está haciendo.

Por otra parte, la información llegará en un tiempo razonable si se notifica justo cuando el evento ha sucedido y/o la persona puede iniciar las acciones necesarias que se requieren.

Finalmente, dará una información adecuada si ésta incluye el contexto del evento y los siguientes pasos para entender cómo debe utilizarse la información.

Los mensajes de estado (no sólo de error sino de estado en general) son aquellos que informan de cuál es la situación tras un evento que ha podido provocar una persona usuaria o que se ha iniciado en segundo plano, es decir, por el propio funcionamiento del servicio ya sea de forma automática o no.

Además, tenemos que conocer que no todos los mensajes de estado se notifican, es decir, no todos interrumpen la actividad de un usuario para atrapar su atención, sino que simplemente se muestran en el contexto para facilitar el entendimiento de la información.

Para diseñar un buen mensaje de estado, debemos entender el contexto en el que sucede el evento que lo dispara y decidir:

Cuándo notificar y cuánto tiempo persiste la notificación.
Dónde mostrar el mensaje.
Qué acciones son necesarias por parte de las usuarias.
Qué lenguaje usar en cada tipo de mensaje.

Tan importante es decidir estas cosas como decidir no informar en absoluto si consideramos que el evento no es relevante o puede llegar a interrumpir y frustrar a las personas usuarias de tal manera que lleguen a fatigarse por el uso del producto.

Elementos gráficos

En la guía de notificaciones de Carbon Design System, encontramos los diferentes elementos visuales que podemos usar para notificar o mostrar un mensaje de estado en una interfaz gráfica.

En resumen:

En línea: no interrumpen la interacción y se muestran en su contexto.
Tostadas: notificaciones efímeras que aparecen durante un breve periodo de tiempo.
Banners: notificaciones a nivel de sistema no relacionadas con la tarea.
Paneles de notificaciones: lugares que recogen todas las notificaciones de un sistema.
Ventanas modales: altamente disruptivas, interrumpen la interacción para pedirle a las personas usuarias que realicen una acción determinada.

Tipos de mensajes de estado

Además de por los elementos gráficos que podemos usar, los mensajes de estado y notificación pueden ser de diferentes tipos:

Errores.
Confirmación de una acción.
Procesamiento de información.
Advertencias de una situación anormal.
Información adicional de interés.
Notificación de contenido relevante.
Información del estado de una sección.

A continuación, analizaremos algunos ejemplos para proponer buenas prácticas en el diseño de mensajes de estado.

Notificación mínima

Si tuviésemos que imaginar la representación de la notificación o mensaje más minimalista, podríamos imaginarnos una luz o icono que aparece donde antes no había nada, acompañadas o no de un breve sonido.

Es el caso de notificación de un mensaje entrante en una red social desde el móvil, o en el escritorio.

Representación de nuevo mensaje/contenido en Slack.

Pero también podemos verlas en los propios ordenadores de sobremesa o portátiles que emiten una luz parpadeando cuando no están encendidos ni apagados, sino en estado de suspensión.

El diseño de estas notificaciones no es un detalle menor, de hecho, fue Apple quien introdujo además un ritmo de parpadeo tal que pareciese el ritmo de la respiración de una persona en reposo, con un enfoque de calma completo y buscando el efecto antropomórfico.

Luz de estado encendido, apagado o suspensión.

Mensajes de error

Sobre la información y recuperación de errores, hablamos también en el artículo de principios heurísticos de Nielsen.

Los mensajes de error deben ser:

Claros y concisos.
Deben contener instrucciones para una solución.
Deben permanecer visibles hasta que el problema esté solucionado.

Confirmación de una acción

Cuando la acción que va a realizar un usuario tiene unas consecuencias irreversibles que podrían impactar a su experiencia, habitualmente usamos el patrón de confirmación de la acción.

La interacción se interrumpe por una ventana modal (o no) para asegurarse de que el usuario entiende las consecuencias de lo que está haciendo.

En el ejemplo vemos que el uso del lenguaje debe ser lo más específico posible, tened en cuenta que no todas las personas leen todo el texto completo, sino que saltan del título al botón y en ambos caso deben poder entenderse la acción que

Ventana modal de confirmación de una acción

Hay otros tipos de patrones de confirmación más disruptivos como aquellos que obligan a las personas a introducir ciertos caracteres, o menos disruptivos como los que se muestran en línea. En los casos menos invasivos, pueden coexistir con acciones para deshacer la acción.

Procesamiento de información

Es el caso de las pantallas de carga o splash screens que se utilizan cuando es necesario un tiempo para la carga de datos tras la autenticación de un usuario.

En estas pantallas además de tener un indicador de la carga (icono de progreso) habitualmente animado, podemos incluir algún mensaje que sirva para explicar qué se está haciendo, o como en el caso de Slack para no sonar aburridos y ofrecer una experiencia de espera más agradable, incluir alguna cita motivacional relacionada con el propósito de la aplicación.

Los indicadores de carga son el elemento gráfico más importante en estos casos y pueden ser de diferentes tipos:

Spinners. Círculos que gran continuamente que usamos cuando no sabemos la duración que tendrá la tarea.
Barras de progreso. Acompañadas de alguna etiqueta de tiempo estimado o porcentaje si se conoce cuándo terminará la acción, o moviéndose de un lado a otro cuando el tiempo es indeterminado.
Animaciones personalizadas. A veces se usan elementos de la marca como el logo animado para crear una experiencia más identitaria.

Advertencias de una situación anormal

Otro mensaje de estado muy valioso es aquel que sucede en el contexto de la interacción y que informa de una situación anormal que puede afectar a la acción más probable que el usuario ejecutará en ese contexto.

En Slack, cuando se detecta un problema de conexión a internet se informa de que es posible que los mensajes no se puedan enviar. Y lo hace con calma, sin dramas porque además proporciona un mecanismo para que podamos tratar de enviar el mensaje en cuanto la conexión se restablezca.

Información adicional de interés

Los centros de notificaciones son una herramienta que sirve a agrupar notificaciones y ofrecer un acceso rápido a ellas. Suelen usarse cuando la naturaleza de las notificaciones es muy diversa ya que permiten clasificar, priorizar y revisar el historial de las mismas.

En estos centros a veces vemos notificaciones de mensajería, como otra información adicional de interés pero no suficientemente relevante como para interrumpir a la persona, tales como recordatorios, confirmación de acciones realizadas en segundo plano (actualizaciones) y otras alertas de seguridad.

Información sobre contenido esperado o empty states

El diseño de pantallas vacías es otro de los patrones que encontramos de forma muy habitual y que nos ayudan a entender qué contenido es el esperado y qué puede hacer una persona para comenzar a crear o añadir contenido.

Suelen estar compuestas de:

Ilustración: que complemente el mensaje textual y ayude a captar la atención del usuario. Usualmente en tonos apagados para que no sea confundida con contenido real sino que se entienda como un placeholder.
Mensaje informativo orientativo o amigable: que dé una pista sobre qué acción debe hacer el usuario o qué evento debe suceder para que comience a ver contenido en esa región.
Llamada a la acción (CTA): con un estilo de acción primaria clara que ayude a generar contenido en la sección.

Las pantallas de estado vacías son muy útiles para usuarios que usan por primera vez el producto, pero también para reforzar la idea de que no existen datos cuando los usuarios han eliminado todo el contenido existente o cuando la búsqueda o filtrados no devuelve ningún resultado.

Patrones engañosos

Los patrones engañosos son una mala práctica de diseño que tratan de manipular o engañar a las personas usuarias para que tomen una decisión que pueden no ser de su interés.

Suelen usarse para aumentar el beneficio del servicio tras el producto donde lo único importante para éste es la conversión y no la experiencia de sus usuarias.

Ejemplo de falsa urgencia durante la reserva de una habitación

Las consecuencias de un patrón oscuro pueden llevar a la pérdida de confianza de las personas usuarias, una peor satisfacción en el servicio e incluso pueden llegar a ser ilegales.