Guía de diseño: alertas

Lo que se debe y no se debe hacer en el diseño de alertas

Reservé un vuelo de último minuto a Nueva York la semana pasada y, por supuesto, fui recompensado con un asiento en la fila de salida de emergencia. Era un vuelo temprano, así que una vez que abordé el avión, me puse los auriculares y comencé a quedarme dormido.

Este fue un error de novato. La azafata me despertó poco después y me dijo que me quitara los auriculares. ¿Cómo podría olvidarlo? El temido discurso de la fila de salida. La azafata exigió toda nuestra atención mientras leía las reglas de la fila de salida de Delta, y al final tuve que aceptar explícitamente los términos (en voz alta).

Entonces, ¿con qué estoy de acuerdo? No tengo idea.

Recapitulemos. Fui forzado a despertar, obligado a quitarme los auriculares y obligado a hacer contacto visual con la azafata, y aun así su mensaje fue ignorado.

Entonces, en nuestras alertas, ¿cómo se supone que debemos informar y guiar a nuestros usuarios para que tomen la decisión correcta cuando están mucho más preocupados que yo en mi vuelo temprano? Bueno, por buen diseño, por supuesto.

Comencemos con la anatomía de un modo de alerta:

He visto estos componentes llamados por otros nombres. Vamos a seguir con eso.

Todas las alertas deben contener como mínimo un Título, una Descripción y un par de botones de acción (primario / secundario). Antes de entrar en más detalles sobre estos componentes, hablemos de la ubicación y los antecedentes de las alertas.

Colocar alertas en el medio (o ligeramente por encima del medio) de la página es la mejor práctica. Es fácil de desarrollar, optimiza la capacidad de detección para el usuario y nunca estará lejos del cursor.

El fondo debe atenuarse para resaltar la alerta y para indicar que se trata de un modal (requerido antes de interactuar con la página detrás de él). Me gusta un fondo negro con 0.55 opacidad, pero no borroso. Nunca se sabe si un usuario puede querer ver parte de la información detrás de la alerta para tomar una decisión. (Sin decir que los usuarios deberían necesitar confiar en la información detrás de una alerta, pero ¿por qué no acomodar esta posibilidad?)

La capacidad de detección de la alerta es alta y todavía sabe dónde se encuentra en la página.

Botones

Todas las alertas deben ir acompañadas de botones primarios y secundarios. Casi todos entienden esto bien. Pero el orden de los botones puede ser una molestia.

A Mac le gustan los botones principales a la izquierda mientras que a Windows le gusta a la derecha. No tengo preferencias personales, pero como usuario me molesta cuando no es lo mismo en toda la aplicación. Proporcione a sus usuarios cierta coherencia aquí, para que sepan qué esperar.

Los nombres de los botones no deben ser "Sí" / "No" u "Aceptar" / "Cancelar". Estos son genéricos y confusos.

¿Presiona Cancelar para revertir los cambios o presiona OK? La mente también lanza una moneda.

Los botones primarios deberían tener más peso, por lo que es mejor que el botón secundario sea gris o un botón fantasma. (Personalmente, me gustan los botones de texto sin ningún contorno).

El botón Descartar salta directamente de la página, disminuyendo la carga cognitiva.

El color del botón primario puede ser casi cualquier color, siempre y cuando no sea negativo (rojo, amarillo, naranja).

La única excepción a un color de botón positivo es cuando la alerta confirma una eliminación de alto impacto. En este caso, QUIERES que el botón primario sea rojo.

Aquí queremos advertirte que eliminar 3 cuentas no es algo que haces todos los días.

La opción "Aceptar" está bien si solo hay un botón en la alerta, pero generalmente en estos casos solo querrás aprovechar las notificaciones.

El título

El título debe explicar claramente por qué el usuario fue detenido. Esto significa explicar lo que sucederá (si es una alerta de confirmación) o lo que acaba de suceder (si es una alerta de error). Manténgalo en menos de 6 palabras pero no sea vago. Recuerde, el usuario puede no saber lo que acaba de hacer. Igual de probable, podrían ser multitarea. (Como buena regla general, siempre debe diseñar con la suposición de que los usuarios realizan múltiples tareas).

No haga que el Título sea una pregunta, ya que esto lo obligará a usar los botones "Sí" / "No", que, como se discutió anteriormente, no son ideales. ¿Todavía no está convencido? Vea abajo.

¿De qué está seguro? ¿A qué estás diciendo

La descripción

No te repitas: finge que el Título es la primera oración de la Descripción. Debe tener flujo, sin información repetitiva.

La descripción no te dice nada nuevo aquí. No solo es inútil, sino que está perdiendo el tiempo.

La parte más importante es que la Descripción es proporcionar los resultados / repercusiones de lo que acaba de suceder o de lo que sucederá si continúa. Esta es el área donde puede persuadir al usuario para que cancele.

Ahora el administrador sabe si continúan a) todo el trabajo del usuario se archivará yb) todavía están pagando por su licencia. Tal vez esto convenza al administrador de mantener al usuario activo o eliminar completamente la cuenta.

Al igual que el Título, la descripción no debe terminar en una pregunta. Esto generalmente agrega texto innecesario y solo brinda otra oportunidad para hacer que la alerta sea confusa.

Extras

Para eliminaciones de alto impacto, es posible que desee agregar más fricción a la experiencia de alerta. Puede cambiar el orden de los botones primario y secundario o poner menos peso en el botón primario.

Si los botones principales están generalmente en el lado derecho, entonces su instinto inicial será hacer clic en Cancelar.

Para eliminaciones de muy alto impacto, puede agregar aún más fricción.

Obligar a los usuarios a escribir

Pero no vayas demasiado lejos.

Algunas personas están entusiasmadas con esta alerta de InVision, pero creo que fueron demasiado lejos. Además, el botón principal significa que puede hacer clic en él inmediatamente. Si ese es el caso, solo haré clic en las casillas de verificación que deseo y continuaré.

Las alertas deben tener el botón Salir. Claro, hace lo mismo que Cancelar, pero la gente está acostumbrada, ¿por qué no agregarlo?

Puede cancelar o salir, lo que sea más fácil.

Como dice Don Norman de The Design of Everyday Things:

El [usuario] tiende a centrarse en la acción más que en el objeto sobre el que se está actuando.

Por lo tanto, debemos enfatizar el objeto con cursiva o letras en negrita:

Rápidamente ves que estás eliminando a Cheryl y ella está siendo eliminada del grupo de Banca.

¿Algo más que consideres vital para el diseño de alertas? ¿Algo con lo que no estás de acuerdo? ¡Interesado en escuchar todos y cada uno de los comentarios!