Consejos de diseño para el error

Diseño UX
11/6/2021
|
Torresburriel Estudio
Consejos de diseño para el error

Una de las tareas a afrontar en el trabajo con productos digitales es gestionar los errores que, antes o después, acaban produciéndose. Algunos pueden afectar a cliente, mientras que afectan a los servidores.

Es recomendable conocer cuáles son estos errores y las razones por las que se producen, sobre todo porque las soluciones son diferentes. 

Obviamente, en este artículo no vamos a hablar de soluciones técnicas, sino que vamos a centrarnos en cómo afrontar el diseño de estas páginas de la manera más inteligente posible, facilitando así una experiencia de usuario óptima que evite puntos de bloqueo al usuario, mientras le ofrece la información correcta.

Algo más que crítico ante los episodios cíclicos de caída de servicios de infraestructura, como ha sucedido recientemente con Fastly o con Google a finales de 2020.

Diseñar para el error 

La mejor manera de solucionar un error de cliente (los errores 4xx) es que no se produzca. En este sentido, hay muchas fórmulas, siendo la primera de ellas, diseñar para el error

Es necesario conocer dónde pueden ocurrir esos errores para dar una solución de manera preventiva y usar estas cinco fórmulas:

  1. Confirmaciones inteligentes
  2. Avisos o señales preventivas
  3. Añadir restricciones
  4. Deshacer las últimas acciones
  5. Mostrar el resultado antes de la acción

A pesar de todo esto, los errores pueden producirse por muchas razones. De hecho, es una de las páginas más interesantes de descubrir en muchos sitios, porque hay verdaderas joyas creativas:

Página de error de Marvel.com
Página de error de Marvel.com

Consejos para diseñar páginas de error

En DesignShack han publicado un artículo sobre algunas de las fórmulas para aprovechar las páginas 404 de manera inteligente, consejos que valen también para otras páginas de error.

Gestionar los errores es fundamental, ya que pueden dar al traste con todo el trabajo de diseño de producto realizado hasta ese momento. 

Para empezar, has de seguir unas normas básicas:

  1. Escribir en un idioma fácil de entender
  2. Indicar qué ha causado el error
  3. Indicar cómo se puede solucionar el problema

Estas normas no son precisamente nuevas, ya que las establecía en un artículo de 1998 Jakob Nielsen. Si te fijas, muchas de las pantallas de error 404 siguen estas tres normas, pero no siempre sucede así en errores de servidor por caída de servicio. En múltiples ocasiones, nos encontramos con una pantalla similar a esta:

Un error 503 típico.
Un error 503 típico. Imagen vía OnlineOrNot

Con esto en mente, tenemos varias cuestiones que pueden mejorar una página de error y hacerla útil para la experiencia de usuario e, incluso, para cumplar objetivos de negocio. Estos son nuestros consejos:

  1. Texto sencillo y directo explicando qué está sucediendo: un simple “Para ver este contenido, necesitas tener tu sesión iniciada” acompañado de un botón de login no sólo explica qué es lo que sucede, sino que muestra una solución.
    En este sentido, para los errores 5xx, es importante traducirlos para que se entiendan. “Estamos haciendo mantenimiento de sistemas. Estaremos de vuelta en diez minutos”. Una persona de a pie de calle no tiene porqué saber qué es un error 503 o un 404. No entender qué sucede en estos casos da como resultado una experiencia negativa.
  2. Ofrece pasos adicionales: esos pasos han de estar relacionados con el error. El caso anterior puede servir para gestionar un error 403 (usuario no autorizado) pero no vale para un error 404 (contenido no encontrado). En este caso se puede ofrecer un enlace a la página principal o un campo de búsqueda.
  3. Respeta la imagen y el tono de tu marca: además de incluir elementos de marca en esta página, el tono ha de ajustarse también a lo habitual. Piensa que esta página es también parte de la experiencia, con lo que tanto la parte visual como el lenguaje utilizado ha de ser coherente con el resto de aspectos de tu producto.
  4. Cuándo se va a solucionar: como veníamos en el primer ejemplo, en el caso de los errores 5xx indicar cuánto tiempo tiene que esperar el usuario antes de poder acceder de nuevo.
    Si no es posible indicar un espacio de tiempo, podemos ofrecer contactar o acceder a una página pública de status, en la que se pueda hacer el seguimiento del estado del producto.
  5. No ocultes toda la información técnica: en muchos casos, la información que se ve en el ordenador del usuario puede ser importante para identificar una posible solución. “Por favor, copia el texto a continuación y envíalo a nuestro equipo de soporte técnico” puede también servir para gestionar errores que necesitan información que se genera en el ordenador cliente, ayudando a realizar gestiones proactivas.
  6. Empatiza: escribir y repasar los mensajes que se envían son fundamentales. Estamos ante un momento de frustración, con lo que hay que medir correctamente los términos a utilizar.
La página de error 404 de LinkedIn
La página de error 404 de LinkedIn

Estos consejos sirven para dar respuesta a las cinco W’s que son aplicables a casi cualquier proceso:

  1. Quién ha causado el error
  2. Qué ha pasado
  3. Por qué ha sucedido
  4. Cuándo se solucionará
  5. Cómo responder ante ese error

Ten una estrategia de solución de errores

Piensa que algo puede fallar. Y has de afrontarlo cuanto antes mejor. Por eso es importante que te adelantes a los usuarios. 

Identificar los posibles puntos de error más comunes y cómo se pueden solucionar esos problemas de la manera más rápida y eficiente posible, servirán para conseguir que la experiencia sea satisfactoria.  

Uno de esos puntos es la búsqueda. Los usuarios pueden escribir erróneamente lo que van a buscar, como pueden ser marcas o errores de tecleo, algo tan común con las pantallas táctiles. 

En este caso, una estrategia de normalización y corrección para mostrar la información que se está intentando buscar es fundamental. También podemos aprovechar los campos de búsqueda para mejorar la experiencia del usuario mostrándole el término correcto:

Sugerencias de búsqueda
En este caso vemos cómo el sistema reacciona ante un error de escritura, mostrando al usuario una solución satisfactoria.

También es muy importante la proactividad ante las paradas programadas. Enviar notificaciones (correo, mensaje in-app) con tiempo suficiente para que los usuarios puedan planificar, ayudarán a evitar que las tasas de error se disparen y, con ellos, la frustración o los contactos con atención al cliente.

Recuerda: una parte importante del diseño de producto consiste en hacer que el producto funcione correctamente. Por eso, cuanto antes seas capaz de solucionar los posibles puntos de error, más satisfactoria será la experiencia de tu producto y menos factible es que ocurra un error humano a causa de un mal diseño.

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.