Cuando diseñamos webs y apps solemos escenificar los llamados happy paths, caminos perfectos donde todo va fluido y el usuario puede solucionar su problema sin ningún inconveniente. Lejos de ese idílico camino, en la experiencia de uso real los usuarios afrontan todo tipo de problemas entre los que destacan el error 404 y el error 500.
Al igual que los usuarios se comunican con la interfaz gráfica (GUI), ésta se comunica con el servidor quien le responde con un código que empieza por un número de 3 cifras. Veamos qué significan:
- 100 el servidor confirma que le recibe, que no hay problema de comunicación.
- 200 el servidor confirma que la petición se ha solventado de forma correcta
- 300 el servidor indica que hay un problema de redirección
- 400 el servidor indica que el cliente (web o app) ha hecho mal la petición
- 500 el servidor indica un problema suyo y que por eso no puede solventar la petición
Tabla de contenidos
Estos son los errores que vamos a ver en esta entrada:
Puedes leer más sobre los códigos de error en este enlace de Wikipedia.
Como vemos, existen diferentes problemas relacionados con la comunicación entre el servidor y la web que pueden acechar a los usuarios y de los que deben estar informados.
Error 404 Not found
Los errores 404 son la respuesta a una petición que no se puede encontrar. Esto, en la práctica viene a ser que el usuario quiere acceder a un página que no existe ya porque se ha borrado o se ha movido a otra dirección sin comunicárselo al servidor. O quizá que nunca haya existido. Un error común en diseñadores juniors es diseñar enlaces que no van a ninguna parte.
De igual modo, el error 404 es muy común como resultado de búsquedas en una searchbar cuando el término de búsqueda no se ajusta a ninguna página conocida por el servidor.
Los errores 404 son el subgrupo más común perteneciente al de los errores de tipo 400. Son parte del grupo de errores provenientes del cliente (web/ app) respecto al servidor.
Por otra parte, es cierto que a veces se abusa del error 404 cuando se deberían usar otros más específicos para comunicar con mayor precisión al usuario su situación. Veamos cuáles son:
- Error 301 Moved Permanently: no se puede encontrar porque se ha movido a otra dirección (Si se sabe dónde, debería ir acompañado de una redirección automática y no mostrar el problema)
- Error 400 Bad Request: hay algún tipo de problema respecto al formato
- Error 401 Authorization Required: el usuario necesita permiso para acceder a esa pantalla. Por ejemplo cuando la pantalla sólo es accesible a usuarios registrados. Debe ir acompañado de un enlace a esa pantalla de registro.
- Error 403 Forbidden: el usuario necesita permiso para acceder a esa pantalla y no lo va a poder tener.
- Error 410 Gone: no se puede acceder porque el recurso se ha eliminado para siempre. Es más preciso que el 404
¿Cómo diseñar una página de error 404?
Los errores pueden estresar al usuario y desde luego son momentos tensos para la experiencia de usuario. Por eso es importante ser transparentes, ofrecer una vía de escape y también intentar acercar una posible solución al usuario.
¿Qué quiero decir con esto?
Primero, que hay que ajustarse al tipo de fallo. Si la página se ha movido, lo correcto es indicar que se ha movido. Así mismo, si la página se ha eliminado por completo, indicarlo correctamente.
Segundo, que hay que ofrecer una vía de escape para que el usuario no termine su camino en esa pantalla de error. A ser posible volver al último punto antes del error.
Tercero, que también debemos ser precisos con las palabras. Se debe explicar en qué consiste y qué puede hacer el usuario para salir del enredo. Por ejemplo, si tras hacer una búsqueda no se encuentra nada como lo que busca el usuario, se le puede animar a utilizar otras palabras, o tal vez a buscarlo por otra ruta.
En la imagen anterior vemos diferentes puntos a tener en cuenta al diseñar una página 404.
- Enlace de regreso a página previa
- Título útil para el usuario
- Explicación y posibles alternativas
- Alternativa en forma de buscador abierto
- Páginas más comunes para que el usuario pruebe esas rutas
Finalmente, podemos pensar en la parte estética. Una vez que la parte de usabilidad está cubierta, podemos pensar en cómo mejorar la experiencia con estética y branding. Aquí cabe algún guiño que a la vez que quite hierro al fallo, transforme la crisis en oportunidad, que conecte al usuario con la marca.
Este ejemplo de Disney que he sacado de Medium es genial en cuanto a conectar con el usuario pero flojo en cuanto a usabilidad. Te dan un buscador para que intentes de nuevo tu búsqueda pero no te dan ninguna pista que te permita
Error 500 Internal Server Error
Como decíamos, los errores de tipo 500 indican fallos en el servidor, concretamente el error 500 señala que hay un fallo interno del servidor del que no se conoce más información. Lo que sí sabemos es que no es un problema ni con el navegador, ni el ordenador ni la conexión a internet del usuario. Es un problema exclusivo del sitio que se intenta visitar.
¿Cómo diseñar una página de error 505?
Si el camino del usuario se topa con un error 500 hay que informarle del problema para que no pierda el tiempo. Una buena práctica puede ser que recargue de nuevo pues muchas veces el fallo es tan mínimo que con recargar se soluciona.
Esto se puede complicar un poco si el error aparece en un proceso de compra, sobre todo después de una pantalla de pago. Normalmente los servidores y sistemas de pago tienen protección contra estos errores pero podría darse el caso de que fallen o no existan. En los procesos de compra, si el usuario recarga podría ser que se añada al carrito la misma cantidad de ítems seleccionada anteriormente. En cuanto a los pagos, podría ser que se cobrara 2 veces el importe.
Para estos casos, lo mejor es tener un protocolo externo en el proceso de compra, que confirme al cliente qué cantidad ha comprado y qué cantidad ha pagado. Además de darle facilidades para la subsanación del problema.
Dejando estos matices aparte, el diseño de la pantalla de error 500 debe cumplir los mismos principios que el error 404. Ser tan precisa como sea posible, ser clara con el usuario, ofrecer vías de escape y posibles soluciones.
Imagen error 500 bien
En la imagen anterior vemos diferentes puntos a tener en cuenta al diseñar una página 404.
- Enlace de regreso a página previa
- Título útil para el usuario
- Explicación del fallo
- Alternativa en forma de botón de recargar
De nuevo, el contenido de marca y estético se puede llevar a cabo una vez los problemas de usabilidad estén controlados.
