Cómo crear una página de error 404 efectiva

error 404
Compartir:

Los detalles son a menudo los aspectos más interesantes de un producto. Estos pequeños detalles conforman el producto en su conjunto. Todos ellos (animaciones de carga, iconos e inclusos las páginas de error 404), deben complementar la apariencia general de tu sitio web.

La página de error 404 informa a los usuarios que han seguido un enlace inexistente o han escrito una dirección que no existe. Ésta puede tener una gran variedad de diseños (minimalista, divertida, seria, etc.). Su diseño depende de tu tipo de negocio y del estado de ánimo que desees mostrar.

La página de error siempre debe verse bien, ser informativa y fácil de usar.

¿Qué elementos debes agregar a la página de error 404?

  • Logotipo de la empresa.
  • Texto que se ajuste al aspecto general del sitio, como «Página de error», «404» o «Ooops».
  • Una descripción de por qué ocurrió el error.
  • Un enlace a la página principal del sitio web o un cuadro de búsqueda.

Consejos para crear una página de error 404 efectiva y atractiva

Cíñete al estilo general del sitio

La página 404 es parte de tu sitio, así que trata de mantener el mismo estilo, fuentes, colores y tono que utilizas en todas las demás páginas.

Proporciona opciones

Cuando se muestra la página 404, los usuarios se redirigen a la página anterior. Sin embargo, ¿a quién le gusta volver? Es mejor dar a los usuarios la oportunidad de ir más lejos, por ejemplo, a la página de inicio o a tu porfolio.

Explica lo que salió mal

Es genial si explicas brevemente lo que salió mal. Una o dos frases bastarán.

No sobrecargues la página

Existe la posibilidad de que un usuario llegue a tu sitio a través de un enlace roto desde una fuente diferente, una URL incorrecta o una página que se haya eliminado. Si deseas que el usuario navegue más por tu sitio web, ofrece un par de enlaces, por ejemplo, a la página de inicio o la sección de trabajos. Estos enlaces se pueden resaltar por separado o colocarse en el pie de página. Pero mantente en unos pocos enlaces y no abrumes al usuario con demasiados.

Añade un poco de diversión

Los usuarios pueden estar molestos si no pueden encontrar la información que están buscando. Entonces, ¿por qué no animarles? Imágenes o vídeos divertidos harán este trabajo perfectamente.

Recurre a las emociones

Algunos diseñadores eliminan deliberadamente el número 404 y usan en su lugar un «¡Uy!», «Hmmm» u «Ohhh» y agregan animaciones o ilustraciones para atraer las emociones de las personas. Este enfoque alienta a los visitantes a buscar más a fondo la información que desean.

Haz una página de error interactiva

Las páginas de error interactivas o las páginas con elementos de gamificación son excelentes para involucrar a los usuarios. Figma, una herramienta online creada específicamente para el diseño de interfaces, ofrece dicha página de error. El 404 se representa en vectores que puedes remodelar como desees.

Usa el producto

Para las compañías que venden productos diferentes, es una buena idea usar imágenes de éstos.

Un ejemplo de esto es Pixar, que para su página de error eligió a Tristeza, un personaje de la película “Del Revés”. Este personaje es triste, lo que encaja perfectamente en la página de error.

Conclusión

Los diseñadores no deben crear una mera página de error 404. Al contrario, deben ver esta página como una oportunidad para aplicar la creatividad y hacer que los usuarios naveguen más por un sitio web.

Siempre es mejor no tener enlaces rotos en tu sitio web, pero diseñar una página de error 404 creativa y efectiva es esencial. Puedes buscar los enlaces rotos con la herramienta gratuita Search Console de Google.

 

¿Quieres que te ayudemos a mejorar el diseño de tu sitio web?

Contáctanos

Fuente: Design your way

Compartir:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies