Ejemplos de páginas de Error 404

[vc_row margin_top=”30″ margin_bottom=”5″ padding_left=”40″ padding_right=”40″ bg_position=”top” bg_repeat=”no-repeat” bg_cover=”false” bg_attachment=”false” padding_top=”40″ padding_bottom=”40″ parallax_speed=”0.1″][vc_column width=”1/1″][vc_row_inner][vc_column_inner width=”1/3″][vc_single_image image=”35950″ css_animation=”bounce” border_color=”grey” img_link_target=”_self” img_size=”full”][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]Navegando por internet, el HTTP Error 404 o página no encontrada no es el mejor destino. Nos lleva a un sitio invalidado que indica que el host o administrador ha sido capaz de comunicarse con el servidor pero no existe el archivo. Es el equivalente a la “dirección desconocida-devolver al remitente” del correo postal. Ambas crean fastidio.

Lo interesante es poder revertir la mala experiencia del usuario cambiando su sentimiento de irritación por uno de asombro y, quizás, una sonrisa. Un sitio web óptimo exige que todas sus partes, incluido el mensaje de error de esa detestable página no encontrada, produzcan satisfacción. Todas las estrategias de branding que se implementen tienen que tener en cuenta que, cuando el visitante interactúa en el sitio, construye una imagen mental y emocional de su experiencia a la que califica de positiva o negativa. Y esta primera percepción no es fácil de cambiar.
La forma de comunicación más directa es la visual, que se convierte en una poderosa herramienta para fidelizar usuarios o clientes si se la sabe utilizar.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”34px”][dt_fancy_separator separator_style=”dashed” separator_color=”default” el_width=”100″][vc_empty_space height=”24px”][vc_column_text]Cómo  personalizar la página de Error 404

El objetivo es ofrecer información para que el usuario llegue al contenido que busca. Para captar su atención se le explica que se ha producido un error de acceso y se le brinda una solución.

A nivel visual hay dos opciones:[/vc_column_text][vc_empty_space height=”16px”][vc_column_text][dt_list style=”2″ bullet_position=”middle” dividers=”false”]

[dt_list_item]Se aplica el concepto de mantener el mismo diseño y apariencia de navegación de la web que forma parte de su identidad institucional. Al conjugarla con las posibles soluciones del problema se crea una importante herramienta para lograr la lealtad del usuario.[/dt_list_item]

[dt_list_item]La segunda alternativa es romper con el esquema tradicional. Se pueden elegir imágenes de impacto trabajadas con humor para causar asombro; o volcarse hacia la serenidad, la solidaridad y empatía para captar el interés. En cualquiera de estos casos, se tendrán que mantener los colores corporativos y el logotipo.
[/dt_list_item][/dt_list][/vc_column_text][vc_empty_space height=”34px”][dt_fancy_separator separator_style=”dashed” separator_color=”default” el_width=”100″][vc_empty_space height=”24px”][dt_fancy_title title=”Soluciones prácticas para asistir al usuario desde la página de Error 404 ” title_align=”left” title_size=”h3″ title_color=”default” el_width=”100″ title_bg=”disabled” separator_color=”default”][vc_empty_space height=”16px”][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][dt_fancy_title title=”La más eficaz es colocar un buscador ” title_align=”left” title_size=”h4″ title_color=”accent” el_width=”100″ title_bg=”disabled” separator_color=”default” separator_style=”dotted”][vc_empty_space height=”16px”][dt_vc_list style=”1″ bullet_position=”top” dividers=”true”]

  • Porque le facilita al visitante la posibilidad de una búsqueda personalizada y es una opción rápida que lo re direcciona correctamente manteniendo la ley de interactividad que es una de las claves de Internet.
  • Se fideliza al usuario con la posibilidad de suscribirse a los newsletter y de entrar a las últimas publicaciones del sitio.
  • Cuando la página Error 404 tiene una apariencia visual similar a la entrada principal del sitio, crea en el usuario/cliente sensación de familiaridad. Esta percepción, unida a las soluciones aportadas, influye en la imagen positiva.

[/dt_vc_list][vc_empty_space height=”16px”][/vc_column][vc_column width=”1/2″][vc_single_image image=”35644″ css_animation=”bounceIn” border_color=”grey” img_link_target=”_self” img_size=”full”][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_single_image image=”35643″ css_animation=”bounceIn” border_color=”grey” img_link_target=”_self” img_size=”full”][/vc_column][vc_column width=”1/2″][dt_fancy_title title=”Se le proporciona un e-mail de contacto ” title_align=”left” title_size=”h4″ title_color=”accent” el_width=”100″ title_bg=”disabled” separator_color=”default” separator_style=”dotted”][vc_empty_space height=”16px”][dt_vc_list style=”1″ bullet_position=”top” dividers=”true”]

  • El e-mail de contacto es interpretado por el usuario como posibilidad de ayuda y contención creando un estado de ánimo favorable.
  • Si se añaden los números de teléfonos se le da al visitante más opciones de comunicación directa.
  • La suscripción a los newsletter es un paso importante para mantener la fidelidad del cliente.
  • A nivel visual se mantienen el logotipo y los colores institucionales.

[/dt_vc_list][vc_empty_space height=”16px”][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][dt_fancy_title title=”Humor, imagen y soluciones prácticas ” title_align=”left” title_size=”h4″ title_color=”accent” el_width=”100″ title_bg=”disabled” separator_color=”default” separator_style=”dotted”][vc_empty_space height=”16px”][dt_vc_list style=”1″ bullet_position=”top” dividers=”true”]

  • Facilita buscador, contacto y newsletter.
  • El texto de la imagen ha sido pensado en base al humor y la ironía moderada.
  • La imagen produce simpatía inmediata.
  • El color de la imagen es relajante y el contraste de color con el fondo produce una atmósfera especial.

[/dt_vc_list][vc_empty_space height=”16px”][/vc_column][vc_column width=”1/2″][vc_single_image image=”35642″ css_animation=”bounceIn” border_color=”grey” img_link_target=”_self” img_size=”full”][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_single_image image=”35641″ css_animation=”bounceIn” border_color=”grey” img_link_target=”_self” img_size=”full”][/vc_column][vc_column width=”1/2″][dt_fancy_title title=”Humor, caricaturas y color” title_align=”left” title_size=”h4″ title_color=”accent” el_width=”100″ title_bg=”disabled” separator_color=”default” separator_style=”dotted”][vc_empty_space height=”16px”][dt_vc_list style=”1″ bullet_position=”top” dividers=”true”]

  • Permite volver a la página inicial y posee buscador.
  • El personaje de la página de error es Sherlock Holmes
  • La atención se centra en la imagen y el color. El Error 404 queda en segundo plano.

[/dt_vc_list][vc_empty_space height=”16px”][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_empty_space height=”16px”][dt_fancy_title title=”Hay muchos más ejemplos de páginas de error 404 de los cuáles sacar ideas. Aquí algunos:” title_align=”left” title_size=”h4″ title_color=”accent” el_width=”100″ title_bg=”disabled” separator_color=”default” separator_style=”dotted”][vc_empty_space height=”16px”][vc_single_image image=”35988″ css_animation=”bounceIn” border_color=”grey” img_link_target=”_self” img_size=”full”][vc_column_text]Página de error de Vueling[/vc_column_text][vc_empty_space height=”32px”][vc_single_image image=”35992″ css_animation=”bounceIn” border_color=”grey” img_link_target=”_self” img_size=”full”][vc_column_text]Página de error de Starbuks[/vc_column_text][vc_empty_space height=”32px”][vc_single_image image=”35991″ css_animation=”bounceIn” border_color=”grey” img_link_target=”_self” img_size=”full”][vc_column_text]Página de error 404 de Google[/vc_column_text][vc_empty_space height=”32px”][vc_single_image image=”35990″ css_animation=”bounceIn” border_color=”grey” img_link_target=”_self” img_size=”full”][vc_column_text]Página de error 404 de Lego[/vc_column_text][vc_empty_space height=”32px”][vc_single_image image=”35989″ css_animation=”bounceIn” border_color=”grey” img_link_target=”_self” img_size=”full”][vc_column_text]Página de error 404 de Nintendo[/vc_column_text][vc_empty_space height=”32px”][/vc_column][/vc_row]