Cómo armar la página 404 perfecta

Si nunca has terminado en una página 404, probablemente nunca has usado internet.

El concepto es simple: Si una computadora accede a un URL que el servidor no puede resolver, este responde con la respuesta «404 No Encontrado» – o en otras palabras «Sí, estoy aquí, pero no pude encontrar el item que solicitaste».

Mientras que el 404 nació como una simple necesidad del protocolo HTTP, mucho diseño de experiencia de usuario y una cierta subcultura ha crecido alrededor de él.

Aquí hay algunas reglas, las cuales deberían ser seguidas para crear la página perfecta de error 404:

Diseño:

El diseño de la página de error no debería distraer al usuario del motivo de la página web que es enganchar a los usuarios. La mayoría de personas la consideran la página más molesta. Debe ser diseñada primero para ayudar a tus visitantes y en el proceso evitar que se muevan a otra página.

Como objetivo secundario, la página 404 puede también brindar una oportunidad para construir tu marca dejando una impresión positiva y duradera en tus usuarios. Como regla general, es a menudo la gente que tuvo una experiencia inicialmente negativa (por ejemplo, se perdió) pero luego recibió ayuda, los que pueden volverse tus mayores aliados.

El uso de colores, la escala de las imágenes debe ser apropiado para evitar esa sensación molesta de visitar enlaces rotos/páginas de error. Como todos sabemos, páginas bien diseñadas construyen marcas.

Enlaces de Redes Sociales

Proveer enlaces de redes sociales en la página 404 es una gran forma de resolver el problema de un usuario y reunir nuevos fans a la vez. El Facebook, Twitter, Pinterest, Tumblr y otras páginas oficiales de tu sitio pueden estar disponibles para enganchar nuevos usuarios.

Esto también introduce la posibilidad de un soporte de usuario entre la audiencia. A veces – especialmente en la noche – un usuario perdido o desorientado puede ser ayudado por otros usuarios incluso antes de que los operadores del canal de redes sociales tengan tiempo para responder.

Enlaces principales

Cada usuario debería conocer algunos enlaces importantes del sitio web que ayudan a aumentar la participación de los usuarios.

Sin embargo, este no es el momento adecuado para presentar el mapa de tu sitio por completo. Si el usuario está perdido, no le obligues a filtrar docenas de enlaces para darse cuenta de lo que están buscando. Mantén las opciones en un numero menor a 7 como mucho.

En la mayoría de situaciones estas opciones pueden incluir (pero no se limitan a):

• Inicio
• Publicaciones recientes
• Búsqueda
• Acerca de
• Contacto

Esta es ciertamente una oportunidad para priorizar (e incluso completar) tu función de búsqueda web. En sitios pequeños, donde la mayoría de del trafico va hacia dos o tres publicaciones populares, podría valer la pena enlazar esas publicaciones en tu página 404.

Brinda un formulario de contacto online

El usuario también puede recibir algunas instrucciones brindándole un formulario de contacto en línea. El formulario debe incluir los detalles de lo que estaban buscando y qué encontraron al hacerlo (enlace roto, página de error, etc.)

Chat en vivo también es una consideración valiosa – particularmente si los usuarios perdidos se traducen en ventas perdidas para tu sitio.

Esto puede ayudar a los visitantes a encontrar lo que quieren y lo que perdieron. Recuerda mantener el formulario simple para que los usuarios puedan enviar sus mensajes fácilmente.

Humor en Audio/Video/Diagrama

Un video/audio de reproducción automáticos pueden también aparecer en una página de error que guíe al usuario o describa a la organización. El humor como parte de la explicación también debe tomarse en consideración así como alguna animación interesante.

Esta una oportunidad para sorprender, deleitar y entretener a los usuarios en un momento en el que no se lo esperan – mientras resuelves sus problemas.

Abajo, pondré una lista de mis diseños de páginas 404 favoritos en la web. Míralos y asegúrate que hacer tu página de error fantástica con algunos diseños creativos e informativos.

Algunos son realmente interesantes ya que dan información y enlaces que los hacen excepcionalmente bien. También puedes darte cuenta que algunos necesitan mejoras en términos de diseño e información.

craigslist

Craigslist tiene una página simple de error con un enlace a la páginas de inicio y un diseño básico.

Niki Brown

Algunos enlaces importantes aparecen en esta página con un nuevo concepto de brindar algunos enlaces secretos que te llevan a buena música. Esto puede ayudar a que los usuarios se queden en la página por más tiempo.

cubeecraft

Aquí, aparece un enlace de descarga de la imagen que muestra una excelente formulación de diseño. Lo mismo puede hacerse de una manera que refuerce el motivo principal de la página, por ejemplo juguetes.

Project-euh

Esta provee un enlace animado, es una manera única de representar una página 404 mediante la cual cada elemento de diseño redirige a otro enlace interactivo que incluye juegos, texto interactivo y efectos en el cursor del mouse, efectos de sonido, etc.

Technorati

Página simple de error con un feed a las últimas publicaciones, esto puede ayudar a la que participación de los usuarios se centre en otras publicaciones relacionadas.

Technorati.comAcme

Esta es otra forma de representar una página 404 que luce diferente a otra, pero se han perdido varias cosas.

Expansion Broadcast

Puedes llenar el formulario de su página de error si no encontraste lo que buscabas. Esta es una excelente forma de interactuar con visitantes y además puede hacerles ganar presencia social con sus perfiles de Twitter y Facebook.

Attrition

Diseño simple con mensajes simples presentando información útil/mensajes de error sobre la página solicitada.

Orange Coat

Otra excelente forma de representación mediante un diagrama de flujo que guía a los visitantes al siguiente paso inmediato.

Disney

Un visitor que llega a esta página puede enconrar buena información con FAQ’s importantes, feedback, enlaces de descarga, etc.

Design Zillas

Gran manera de representar la página 404 con un buen diseño, los enlaces oficiales de redes sociales, y la información de contacto.

Twingly

Muestran un carácter familiar y usan al «Ninja» para transmitir su mensaje y email. El diseño se ve bien.

webo group

Página de error 404 con diseño simple.

Griffin Technology

Otro diseño básico con enlaces para contactar al webmaster y equipo de soporte.

nosh

Otra páginaa de error con algunos pensamientos únicos y con video como una manera de evitar que los usuarios se vayan del sitio. El video no existe, ¿es una manera de mostrar su sentido del humor o de verdad se olvidaron de ponerlo? Alguna información importante y enlaces para descargar su aplicación gratuita en iPhone o Android, también puedes registrarte en el sitio.

YepLike

Ciertamente es un diseño sorprendente comparado con otros.

TrentWalten

Esta página de error no es buena en términos de información, pero la forma en que han representado las imágenes al azar es excelente.

Marvel

Han colocado una opción de búsqueda avanzada que te ayudará en una búsqueda más. Algunos enlaces importantes también están disponibles para los visitantes en un solo lugar.

Mozilla

La página de error de Mozilla ha proporcionado algunos consejos para los visitantes con enlaces a la página de inicio y seguimiento de errores.

THCNET

Ok, es cierto que la página 404 de THCNET no ayuda realmente a encontrar cualquier cosa que estés buscando en THCNET. En cambio, te presentan una version jugable del antiguo videojuego Zork.

Para mí, esto es más convincente que cualquier cosa que estuviera buscando.

Limpfish

El diseño de Limpfish es muy simple, con un poco de espacio para el humor en su contenido que redirige a la portada después de hacer clic. Pero, seguramente perdieron algunos enlaces a medios importantes y redes sociales.

Starbucks

Su página de error permite a los usuarios leer la información con algunos enlaces – mapa del sitio, página y página de comentarios. La página se ve bien con el texto conciso y diseño básico.

Heinz

Heinz la ha mantenido sencilla, proporcionando un producto popular y algunos otros enlaces importantes en su página 404. También han sido diseñados simplemente colocando la imagen de su producto bastante bien.

Inspiration Bit

Han demostrado algo de inteligencia en su página de error 404, proporcionando información recomendada. El visitante al menos hará clic en cualquiera de estos enlaces incluso si la consulta de búsqueda era diferente antes. También se podría notar que estos vínculos se proporcionan en todas las páginas con iconos de redes sociales.

Realmac Software

Apuesto que no puedes dejar de reír después de llegar a esta página. También han proporcionado con algunos enlaces importantes para sus cuentas de Twitter, Flickr y Vimeo oficiales.

Home Star Runner

Prepárate para escuchar algún sonido. Esta página 404 está diseñada para mostrar lo que el sitio web quiere transmitir – diseño de historieta simple y algo de texto con humor.

StudyTonight

Studytonight demuestra una excelente manera de atraer a los usuarios mediante el uso de un personaje con un texto excepcionalmente bien escrito. También se dan algunos enlaces principales.

 

[Traduccion1 url=»SitePoint» nombre=»https://www.sitepoint.com/craft-perfect-404-page/»]