fbpx
Artículos

La
_
cara
_
b
_
del
_
diseño:
_
Mensajes
_
de
_
error
_
amigables
_
en
_
app
_
o
_
web

Desarrollo Software a medida  ·  Diseño UX UI

Dotar de carácter a los mensajes de error puede que no parezca algo destacable cuando se está dando vida a la experiencia de usuario, pero actúa de manera determinante sobre cuál es la percepción final que tiene el usuario de nuestra app o web.

Vivimos inmersos en una sociedad donde las redes sociales están presentes a diario en la mayoría de nuestras vidas. Nos saturamos de fotos bonitas y vidas que parecen perfectas porque, no nos engañemos, gran parte de las personas buscamos nuestro mejor lado para exponerlo al mundo. Pero, si se hurga un poco, detrás de esa exposición de algo ideal puede que haya un caos oculto.

Debemos asumir que tener problemas y cometer errores es lo que realmente forma parte de nuestras vidas y, queramos o no, ellos son nuestros mejores profesores.
Cuesta mostrar esa cara b y no pensamos en que quizás, como pasa a veces en la música, lo más valioso que tenemos no sea siempre lo más “conocido” o a lo que más visibilidad damos.

¿No resulta más fácil identificarse con un error cometido que con la perfección? ¿No sirve de ayuda ver cómo alguien ha salido reforzado de una situación complicada que podamos estar compartiendo?

En diseño ocurre lo mismo, se trabaja para presentar una interfaz impecable, con una navegación sin fisuras y, en ocasiones, nos olvidamos de esforzarnos en lo único que hay seguro en una app o web: los usuarios cometen errores.

Transformar esos errores en una experiencia lo más agradable posible se tendría que considerar una meta y no un añadido. Es más, sería muy bueno aprovechar esos errores para dotarlos de personalidad, expresando así una identidad de marca.
Se trata de diseñar de la misma manera, y con el mismo empeño, tanto para las cosas que funcionan bien siempre como para las que pueden funcionar mal en algún momento. Y es que, errores que aparentemente resultan inofensivos, en realidad entrañan una gran importancia para la experiencia de usuario.

Los mensajes de error no tienen que levantar muros sino dotarnos del suficiente poder para tranquilizar, guiar y, de este modo, fidelizar a los usuarios.

Hay que establecer una relación entre producto y usuario que sea buena y duradera. Como cualquier relación, cuesta más mantenerla que conseguirla, por eso debemos pulir las cosas que puedan frustrar a una de las partes. Un mal mensaje de error o desespera, y hace que el usuario abandone, o acaba convirtiéndose en un meme en el peor de los casos.

El responsable de diseño UX es el que mejor conoce la secuencia de acciones de un usuario, y el que se puede anticipar con mayor facilidad a los casos de error. Entre sus tareas está la de identificar los flujos que se completan con mayor frecuencia y comprender sus dependencias.

En este punto es fundamental trabajar codo con codo con el equipo de desarrollo para que transmitan de dónde se recoge la información que se muestra en la app o web, y qué procesos utilizan servicios que pueden fallar. Esto ayuda a ofrecer un contexto más completo al usuario.

Un buen mensaje o página de error avisa de qué salió mal, por qué salió mal (si se sabe) y cómo se puede solucionar.

diseño páginas de error

Claves en el diseño de páginas o mensajes de error

Considerar las siguientes pautas nos ayudará a mantener bajo control una buena experiencia de usuario cuando salta esa página de error o ese fastidioso aviso que interrumpe el flujo esperado.

Sin ambigüedades

  • Usar un lenguaje simple, lógico y conciso.
  • Dar una breve descripción que proporcione una idea clara del problema y cómo solucionarlo, descartando términos técnicos y manteniendo solo los detalles relevantes.
  • Usar como estructura básica [Descripción del error][Cómo solucionar este error].
  • Expresar un error con textos genéricos como “Ha habido un error” es tan inútil como girar el cuadrado en el Tetris, aunque en este caso por lo menos nos sirve como ejemplo de lo que no se tiene que hacer.

Con divulgación progresiva

Si hay información que es menos necesaria pero se requiere que esté disponible habría que colocarla en un apartado, acompañada de la opción Mostrar/Ocultar.

Sin sentencias de culpabilidad

  • Advertir sin culpabilizar, evitando las palabras con connotaciones negativas y en mayúsculas. Explicar la acción deseada en lugar de señalar en qué se ha equivocado.
  • Usar una voz activa para aceptar la responsabilidad cuando algo falla en nuestro lado. Por ejemplo, “No pudimos adjuntar su imagen” en lugar de “No se pudo adjuntar su imagen”.
  • Usar una voz pasiva para los errores cometidos por el usuario ayuda a suavizar una situación molesta.

Con el tono adecuado

  • El tono es cómo se transmite un error y dependerá de la gravedad del mismo.
  • Usar un tono acorde con la imagen que se quiere mostrar. Combinar con un toque de humor, cuando se precise y siempre y cuando se conozca a la audiencia, para que aporte complicidad con el usuario (tan necesario cuando hay una pantalla de por medio).
  • No hay que olvidar que se está tratando con personas y debemos comunicar los errores como si estuviésemos en el mismo lugar, orientando en el proceso que se esté realizando.

Acompañando de acciones

  • Algunos errores pueden necesitar de un botón o enlace para corregirlo y, dependiendo de cómo se muestre la alerta, hará falta también un botón que realice la acción de descartar.
  • Proporcionar las acciones adecuadas para conducir al usuario en los siguientes pasos a seguir. El texto de los botones y enlaces debe tener sentido si se lee de forma aislada, algo que además ayuda a los usuarios de lectores de pantalla.

Dotando de contexto

  • Mostrar la alerta en el momento y lugar adecuados.
  • Dotar al error de contexto, colocándolo cerca de la zona a la que pertenece, hace que este sea mucho más sencillo de solucionar.
  • Habrá que buscar respuesta a las preguntas ¿qué ha desencadenado el mensaje? ¿cuándo y dónde aparece? ¿cómo se puede enlazar el error con su sección de modo visual y no visual?

Aportando estilo

  • Dar contraste entre el color del texto y el del fondo. Pensar en la accesibilidad, haciendo uso de iconos, símbolos e imágenes para complementar y humanizar el diseño.
  • Optar por la gama de colores que las personas ya tenemos asociadas a circunstancias de peligro o error, como el rojo, o de alerta, como el naranja o amarillo.

Lo deseable sería que nuestra app o web no tuviera errores, pero eso es materialmente imposible. Aunque se haga un trabajo excelente nuestro producto puede depender de servicios de terceros, cuyo mantenimiento nos es ajeno, de cómo sean las condiciones de la conexión a internet, y otras tantas cosas más… Por lo que solo cabe diseñar pensando en poner “al mal tiempo buena cara”

El diseño UX/UI es clave en el desarrollo de un proyecto app o web y en Cuatroochenta somos expertos en generar la mejor experiencia de usuario desde una perspectiva omnicanal.

Consulta nuestros últimos proyectos

Volver arriba