Una guía completa para el diseño de notificaciones

Los mensajes periféricos en productos digitales, conocidos colectivamente como notificaciones, nunca deben dañar la experiencia del usuario. En su lugar, deben contribuir a una experiencia que ayude a las personas a lograr un objetivo. Abordar el diseño de notificaciones al principio del proceso de diseño del producto producirá mejores resultados.

Imagine un grupo de arquitectos diseñando una casa de tres pisos, trabajando en los planos durante meses. ¡Es impresionante! ¡Es bonito! Pero justo cuando están a punto de terminar el diagrama, uno de ellos exclama: “ ¡Espera! ¿Cómo llega la gente del primer al tercer piso? ¡Se olvidaron de la escalera!

Del mismo modo, los diseñadores de productos tienden a pensar en las mejoras de UX pequeñas pero críticas al final. Como ocurre con los estados vacíos, los diseñadores tienden a dejar el diseño de las notificaciones (alertas, mensajes de error, confirmaciones, anuncios y reconocimientos) hasta el final. El problema puede salir a la luz repentinamente cuando un desarrollador pregunta: “ ¿Cómo manejamos los errores? Debido a que se trata de una idea de último momento, este enfoque complementario produce con frecuencia "frankendesigns" descuidados, lo que daña la experiencia de usuario.

Para evitar tal escenario, es mejor usar un enfoque integrado para el diseño de notificaciones para mejorar las experiencias de los usuarios . Aunque es posible que los diseñadores no tengan toda la información al alcance de la mano, diseñar un marco de notificaciones completo durante el ciclo de vida del diseño del producto ayudará a preparar el producto para casos de uso imprevistos.

Al embarcarse en el diseño de notificaciones, el principio de diseño esencial a tener en cuenta es que deben ayudar (no impedir) a las personas a realizar tareas . Es imperativo probar prototipos de productos con anticipación y mapear los casos de uso en los que la mensajería periférica sería valiosa para ayudar en las interacciones . Sin embargo, la mejor manera de comunicarse con los usuarios variará y dependerá de varios factores clave:

• El tipo de información que se comunica.
• La urgencia de la información, si necesita ser vista de inmediato.
• Si se requiere la acción del usuario como resultado de la información

Además de cuál será el estilo y el comportamiento de las notificaciones, su tono debe establecerse mediante la copia de UX. Toda la copia de las notificaciones debe ser clara, concisa y útil. Un sistema de notificación bien diseñado también está diseñado teniendo en cuenta la accesibilidad y tiene la flexibilidad para adaptarse a diferentes idiomas.

La terminología utilizada para las notificaciones tiende a ser similar, pero variará ligeramente de un equipo a otro y de un proyecto a otro. Corresponde al diseñador determinar la terminología del marco de notificación, lo que se llama qué, así como sincronizar a todos sobre la justificación de su uso: qué, dónde y cómo .

Mejor usabilidad a través de un mejor diseño de notificación

Las notificaciones cumplen una función esencial en la usabilidad del producto. La " visibilidad del estado del sistema " es el número uno en la lista de las "10 heurísticas de usabilidad para el diseño de la interfaz de usuario" del Nielsen Norman Group. La regla establece que “ el sistema siempre debe mantener informados a los usuarios sobre lo que está sucediendo, mediante la retroalimentación adecuada dentro de un tiempo razonable. ”

Un sistema de notificación es una parte tan importante de la UX de un producto digital que sin él, el producto se sentiría como si algo se hubiera quedado fuera. Si no hay “visibilidad del estado del sistema” ni retroalimentación, es como conducir un automóvil sin tablero.

El tablero de un automóvil está lleno de indicadores, íconos y luces diseñados para proporcionar visibilidad del sistema operativo del automóvil y garantizar una operación segura y confiable. Cuando conducimos, un conjunto de lecturas y notificaciones sobre la temperatura del motor, el estado de la batería, la presión del aceite, las luces, los frenos, las bolsas de aire, etc., nos mantienen informados. Cuando queremos hacer un giro, hay una luz intermitente para la señal de giro, junto con un sonido de clic, ambos nos brindan retroalimentación. También tenemos un indicador de tanque de combustible que indica cuando el tanque de combustible está bajo.

Funciona de la misma manera con un producto digital. La visibilidad del estado del sistema y la retroalimentación es fundamental cuando se trata de usabilidad, y la usabilidad es la base de excelentes experiencias de usuario.

Establecimiento de un marco de notificación útil

Para diseñar bien un marco de notificación, puede ser útil pensar en las notificaciones en términos de "intensidad de la señal". ¿Qué mensajes periféricos necesitan más o menos atención? Por ejemplo, las interacciones que pueden ser potencialmente destructivas necesitan notificaciones "más fuertes", y las interacciones no destructivas necesitan notificaciones "más silenciosas".

Enviar a las personas la cantidad correcta de notificaciones es un acto de equilibrio , y exagerar está lleno de peligros; el producto puede recibir muchos comentarios negativos o, en el peor de los casos, alejar a las personas hasta el punto de que lo abandonen. Los diseñadores, por lo tanto, deben considerar cuidadosamente la UX y solo enviar mensajes con un propósito bien definido. También es una buena idea dar a los usuarios la flexibilidad de desactivar todas, o al menos algunas de las notificaciones.

El enfoque inicial para el diseño de notificaciones necesita una clasificación en tres niveles: atención alta, media y baja , es decir, "niveles de gravedad". Después de eso, los tipos de notificación deben definirse aún más mediante atributos específicos en esos tres niveles, ya sean alertas, advertencias, confirmaciones, errores, mensajes de éxito o indicadores de estado.

Una vez que se han identificado los atributos de notificación, es hora de crear una taxonomía de las diversas notificaciones que conformarán el marco. La siguiente no es una lista exhaustiva: los tipos de notificaciones diferirán según el producto, los casos de uso y otras variables. ( Tenga en cuenta : como se mencionó, diferentes equipos usan una variedad de terminologías. Por ejemplo, llamamos "confirmación" a una notificación que requiere la aprobación del usuario para continuar con una interacción destructiva. Algunos equipos pueden usar "confirmación" como un término para un mensaje de éxito.)

alta atencion

• Alertas (se requiere atención inmediata)
• Errores (se requiere acción inmediata)
• Excepciones (anomalías del sistema, algo no funcionó)
• Confirmaciones (acciones potencialmente destructivas que necesitan la confirmación del usuario para continuar)

Atención media

• Advertencias (no se requiere acción inmediata)
• Agradecimientos (retroalimentación sobre las acciones del usuario)
• Mensajes de éxito

baja atención

• Mensajes informativos (también conocidos como notificaciones pasivas, algo está listo para ver)
• Insignias (generalmente en íconos, que significan algo nuevo desde la última interacción)
• Indicadores de estado (retroalimentación del sistema)

Diseñando una gran notificación UX

Para diseñar un producto con una excelente UX, los diseñadores deben hacer una lista de todos los casos de uso en los que las notificaciones pueden ser útiles. Se recomienda que este proceso se realice en colaboración con un desarrollador, ya que en la mayoría de los casos pueden ser imparciales y capaces de ayudar a solucionar los casos extremos que el diseñador no haya considerado.

Los diseñadores también deben tomar nota de todas las interacciones durante las pruebas de usuario donde las notificaciones pueden proporcionar valor para mejorar la experiencia de usuario.

Una vez armada con la lista, el siguiente paso es categorizar las notificaciones según el nivel de atención y los atributos deseados. Nuevamente, debido a que las notificaciones no deben ser intrusivas , esto debe hacerse con cuidado. Algunas de las preguntas que debe hacerse durante este proceso son:

• ¿Qué desencadenaría la notificación?
• ¿Qué tipo de retroalimentación se está comunicando?
• ¿Dónde aparecería la notificación y cómo?
• ¿Qué notificación requeriría una interacción inmediata?
• ¿La notificación es persistente o no persistente?

A continuación, se deben determinar los códigos de colores y los íconos y colocarlos en un sistema de diseño (o guía de estilo). Al pasar por este proceso, los diseñadores deben tener en cuenta todas las instancias en las que aparecería una notificación y asegurarse de que se reproduzcan correctamente en todos los fondos.

La ubicación de las notificaciones también es clave. A riesgo de decir lo obvio, para evitar oscurecer la interfaz, las notificaciones deben aparecer en la parte superior o inferior, o cerca de las esquinas de la interfaz de usuario. Además, si el diseño responde, los diseñadores deben probar la apariencia de las notificaciones con varias ventanas gráficas. Es particularmente importante cuando se pueden mostrar mensajes de error con formularios móviles receptivos.

Diseñar un marco de notificación no es fácil. Es necesario considerar muchos pequeños detalles que ocurren en diferentes escenarios. Más allá de la accesibilidad y la legibilidad, se debe tener en cuenta la futura localización. Un sistema de notificación que se ve perfecto en inglés puede desmoronarse por completo cuando se usa en una plataforma alemana o japonesa.

Más preguntas para hacer cuando se trata de definir el comportamiento de las notificaciones :

• Si una alerta o advertencia está destinada a ser persistente, ¿cómo se aseguran los diseñadores de que las personas sigan teniendo acceso a ellas después de salir de la pantalla inicial?
• ¿Habría que incorporar un icono de alerta con un distintivo donde se viera un archivo de notificaciones?
• Si una notificación no es persistente, ¿cuánto tiempo pasará antes de que desaparezca? ¿Debería haber una opción para descartarla antes de que desaparezca?

Para las aplicaciones móviles, no solo las notificaciones dentro de la aplicación, sino también las notificaciones automáticas (a nivel del sistema, fuera de la aplicación) también deben diseñarse meticulosamente. En su mayoría son interrupciones, por lo que es crucial mirar la copia de la notificación y cómo y cuándo pedir permiso para enviarlas. Si se usan demasiado, pueden desanimar a las personas a usar la aplicación. Demasiadas notificaciones no esenciales pueden frustrar a los usuarios que luego pueden silenciar las notificaciones o dejar de usar la aplicación por completo.

Los diseñadores también deben considerar las notificaciones procesables que permiten a las personas ser productivas sin abrir una aplicación. Permitir que los usuarios realicen tareas pequeñas sin tener que acceder a una aplicación puede ser una herramienta poderosa para mejorar la UX.

Para las notificaciones push móviles, la mejor práctica de UX es retrasar las notificaciones de cualquier tipo (solicitar acceso a la ubicación de una persona, enviar notificaciones push, etc.) hasta que las personas hayan tenido la oportunidad de explorar un poco la aplicación.

Prácticas recomendadas de notificación para una gran experiencia de usuario

La observación de las siguientes prácticas recomendadas garantizará que las personas perciban las notificaciones como algo valioso, no como interrupciones, lo que mejorará la experiencia del usuario. Antes de diseñar un sistema de notificaciones y ponerlas en un sistema de diseño, considere estas mejores prácticas fundamentales:

• Clasifique las notificaciones por los tres niveles de atención discutidos anteriormente. Luego, defina la taxonomía de las diversas formas de notificación dentro de esos tres niveles.
• Al crear una guía de estilo para el sistema de notificación, especifique la longitud máxima de caracteres para la notificación en todos los idiomas en los que se publicará.
• Preste especial atención a la adaptabilidad y flexibilidad para acomodar diferentes tipos de contenido y longitudes de texto.
• Cree un esquema de color coherente para los tres niveles de atención, así como una iconografía coherente.
• Cree notificaciones concisas y fáciles de leer que brinden información útil.
• Considere cuidadosamente qué enviar y cuándo enviar. En dispositivos móviles, retrase el envío de notificaciones en aplicaciones recién descargadas para evitar alienar a las personas. Examine el contexto y los casos de uso de cerca.
• Errar por el lado de mostrar menos notificaciones, ya sean alertas o advertencias, u otras actualizaciones de estado de atención alta a media. En su lugar, colóquelos en una lista a la que las personas puedan acceder cuando quieran verlos (lo que se indica mediante una insignia de icono en la interfaz de usuario).
• Considere un sistema con una opción para marcar las notificaciones como "no volver a mostrar".
• Los reconocimientos no persistentes, como "barras de bocadillos", deben desaparecer de la pantalla después de un mínimo de cuatro segundos y un máximo de ocho segundos, con una opción para descartarlos antes y "deshacer" cuando corresponda.
• Para notificaciones de alto nivel de atención en dispositivos móviles, considere la retroalimentación de sonido y háptica cuando sea posible.
• Asegúrese de que haya un contraste adecuado en las notificaciones para facilitar la lectura y entre el fondo en el que aparecen las notificaciones. Tenga en cuenta que con diseños fluidos y receptivos, el fondo puede cambiar debajo de la notificación.

Mejores prácticas para mensajes de error

• Los mensajes de error deben ser simples y directos, preferiblemente procesables, escritos en un lenguaje fácil de leer y rápido de comprender.
• Evite códigos oscuros y abreviaturas como "el éxito de la respuesta recibida es falso". ”
• Proporcione descripciones claras y concisas del problema en lugar de “ se ha producido un error”. ”
• Evite culpar a las personas o decirles que hicieron algo mal, por ejemplo, diciendo que fue un “ comando ilegal”. ”
• Proporcione mensajes de error constructivos en contexto para que las personas puedan solucionar el problema.
• Evite indicar un error simplemente cambiando el campo a rojo. No lo hace accesible para personas con discapacidad. Siempre es mejor incluir otras señales visuales que los daltónicos puedan ver.
• Use la validación en línea para los campos de entrada en los formularios.
• Los mensajes de error no deberían desaparecer hasta que las personas hayan solucionado el problema.

Resumen

Las notificaciones contribuyen a una experiencia que ayuda a las personas a lograr un objetivo y deben tratarse como cualquier otro componente de un producto digital. Sin embargo, las notificaciones pueden cortar en ambos sentidos. Si se manejan bien, pueden impulsar la UX y ayudar al compromiso, pero cuando se ejecutan mal, corren el riesgo de convertirse en una molestia. Lograr el equilibrio adecuado es clave.

Las notificaciones no deben tratarse como una ocurrencia tardía. Para hacerlos correctamente, los diseñadores deben abordar los casos de uso desde el principio, definir las diversas formas durante el ciclo de vida del diseño del producto y probarlas exhaustivamente.

Un resumen rápido sobre la forma correcta de diseñar notificaciones:

• Comience el diseño de notificaciones temprano, no como una ocurrencia tardía.
• Clasifique las notificaciones por los tres niveles de atención: alto, medio y bajo.
• Codifique con colores, asigne iconos y determine ubicaciones.
• Clasifícalos por tipo: persistentes o no persistentes, emergentes, banner, diálogo, etc.
• Incorpóralos a un sistema de diseño.

Comprender cuándo y cómo usar las notificaciones es esencial para proporcionar una gran facilidad de uso y crear coherencia en los mensajes de productos. Al evaluar cuidadosamente los mensajes periféricos que deben mostrarse en el momento adecuado, los diseñadores pueden aumentar la eficiencia de un producto y mejorar su UX.

¡Háganos saber lo que piensas! Por favor, deje sus pensamientos, comentarios y comentarios a continuación.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Cómo trabajar de forma remota cuando más importa
• Cómo hacer la transición al trabajo remoto con facilidad
• Mejores prácticas y errores en el diseño de aplicaciones móviles
• La guía definitiva para el diseño de sitios web de comercio electrónico
• El bloqueo del chat: cuando falla un chatbot