¿Cómo Diseñar La Cabecera Perfecta para Convertir? (Con Ejemplos)

¡Mucha Atención!  En Web Conversion Master hemos realizado una selección de las cabeceras web que mejor convierten actualmente y te las hemos traído en bandeja para que consigas tener un Diseño Web Optimizado para Conversión. ¡Adelante!

La cabecera web  o header, constituye un elemento muy importante en todas las webs ya que, en la gran mayoría de plantillas, permanece visible durante toda la navegación.

Además, es uno de los puntos que más interacción recibe por parte del usuario, tal y como nos muestran los resultados obtenidos en los mapas de calor y de clicks.

 

 

Por lo tanto, si tenemos un elemento visible e interactuable es muy acertado aprovechar su “potencial” para incluir en esa zona toda aquella información que nos interesa que esté presentes ante el usuario de forma continuada.

La idea es que la cabecera se convierta en una especie de panel de control al que recurrir cuando el visitante necesita consultar algo, buscar algún producto, cambiar de categoría, contactar con nosotros…etc.

Aprendida la lección, en el artículo de hoy  TE LO VAMOS A PONER FÁCIL. Lejos de soltarte el rollazo sobre cómo conseguir una cabecera web efectiva, vamos a mostrarte ejemplos concretos para que tengas claro, de una vez por todas cómo crear cabeceras web optimizadas para CRO.

Lógicamente, dependiendo del tipo de página que tengamos, optaremos por una u otra cabecera web. Nosotros hoy, nos hemos centrado en los 3 principales tipos de web: ecommerce, web coroporativa o blog. Y para cada una de ellas hemos estado indagando para mostrarte las cabeceras que mejor se ajustan a cada tipo.

¡Vamos a verlo!

Cabeceras Ecommerce optimizadas para conversión web

Evidentemente si estamos hablando de una ecommerce, hay un elemento característico que no encontraremos en cualquier otro tipo de cabecera. Ese elemento es, como imaginarás, el Carrito de la compra.

Entonces, si tenemos claro que ese es el elementos diferenciador de nuestra cabecera. ¿Porqué todavía hay webs que no le dan la importancia que se merece? ¿Porque hay webs que lo esconden o no lo destacan lo suficiente? Esto es claramente un error.

En una página que venda tienen que primar, por encima de todo, aquellos elementos que refuerzan su caracter comercial.

Fíjate en el siguiente ejemplo. ¡Así es como se monta una cabecera para ecommerce!

 

 

Como habrás podido comprobar, en esta ella se han incluido todos los elementos que nos interesa que estén presentes durante la navegación del usuario. Estos son:

• Logo (identidad corporativa) + Subtitular
• Enlaces a perfiles sociales
• Destacados (portes + devoluciones gratis)
• Contacto
• Carrito de la compra bien visible
• Acceso privado y registro
• Menú de navegación
• Buscador

Evidentemente, la distribución no tiene porqué ser exactamente esta, puede variar en función de las necesidades de cada página; sin embargo sí es VITAL que el diseño esté bien cuidado porque estamos hablando de ubicar 8 elementos en un espacio relativamente pequeño y todo ha de quedar estéticamente cohesionado.

En el ejemplo siguiente, además de los 8 elementos citados anteriormente, también se ha incluido el combo para la selección de idioma. Sin embargo, como vemos la distribución permanece estable y no nos da la sensación de agobio.

 

 

Sobre los Destacados en la Cabecera

Como podemos ver en el siguiente ejemplo, en esta cabecera no se ha incluido ningún destacado promocional (gastos de envío gratis, devoluciones gratis, producto ecológico, etc.)

¿Por qué? Porque quizá esta ecommerce no tenga ningún aspecto diferenciado que destacar en su cabecera. Tenemos que ser conscientes de que en este apartado sólo podremos incluir destacados verdaderamente relevantes para el usuario. De nada sirve que le digamos “Somos profesionales” “Atención personalizada” o “Producto de Calidad”.

Nota Importante sobre los Menús de Navegación

En todos estos ejemplos, hemos visto que el menú principal de navegación se incluye dentro de la cabecera de forma horizontal. Sin embargo, habréis comprobado que en la actualidad un montón de tiendas online siguen manteniendo su menú de navegación principal en uno de los laterales de su página.

Respecto a los menús de navegación, todavía no se ha determinado que ubicación es la que mejor funciona para CRO, por esta razón, no estás obligado, por ahora, a incluirlo en tu cabecera. Sin embargo, te diré que la tendencia actual es hacerlo. Muy pocas de las plantillas actuales siguen mostrando un menú vertical, sobretodo después de que apareciesen los conocidos menús fijos. Esos que permanecen visibles el 100% del tiempo de navegación en la parte superior de la pantalla.

 

Cabeceras de Blogs preparadas para la conversión

Ocurre que, para cada tipo de página, hay un diseño predefinido. Antes hemos visto que, en las ecommerce, los elementos que incluían las diversas cabeceras se repetían. En una página de blog ocurre lo mismo.

En esta ocasión el objetivo o la finalidad de un blog es la divulgación de contenido útil, sin embargo, a título personal el autor o encargado de la página, suele ser contactado por otras páginas o empresas, bien para publicar contenido de las mismas en su propia plataforma o para crear posts y nutrir a éstas de contenido. Todo ello le reporta un beneficio que, evidentemente, tiene que seguir explotando.

Por eso mismo, vemos que los enlaces hacia redes sociales y la opción de contactar siempre están presentes en este tipo de cabeceras.

 

Por otro lado también se le da muchísima importancia y presencia al logo. Y esto es porque, en el caso de páginas de blog, es muy importante que el usuario retenga el nombre del mismo para que vuelva a encontrarlo cuando lo precise. Esto se llama fidelización y un factor muy importante para conseguirla es una buena  y potente presencia de marca.

En estos ejemplos vemos como el nombre del blog se destaca por encima de cualquier elementos de la cabecera. Esto, no pasaba en las cabeceras de ecommerce, ya que en dicho sector el nivel de fidelización suele ser mucho más bajo.

Fíjate como, es sobre el propio logo, sobre el que se sustenta toda la fuerza de la página. Es como si te estuviera dando la bienvenida, ¿No crees?

 

 

En los ejemplos anteriores, vemos que se ha optado por colores muy neutros para destacar la cabecera de las páginas de blog. Sin embargo, dos de los blogs más conocidos del ámbito del Marketing Online de este país, optan por aportar un toque de color a sus cabeceras para lograr más diferenciación.

Así vemos los siguientes ejemplos:

 

 

Cabeceras para Páginas Corporativas

El caso de las páginas corporativas es un caso peculiar en la tipología de página web. Se trata de páginas fijas que permanecen en la web a modo de catálogos comerciales.

Al no tener activado el proceso de compra, solo pueden llegar a convertir a través del contacto directo con el usuario. Contacto que debe nacer del propio visitante.

Observa este ejemplo:

Como puedes ver, esta página nos muestra su teléfono y email de contacto y además, el horario de apertura de su tienda física junto con su dirección.

En este caso, la web se podría entender como un refuerzo online de la actividad comercial que el negocio realiza offline.

Este tipo de página no suelen ser muy funcionales pero no, por esta razón son menos eficaces. La verdad es que muchas de ellas registran una muy buena conversión debido al hecho de que todavía existen usuarios que priman el contacto directo con el empresario antes de adquirir sus productos o servicios.

Para este tipo de visitantes, una ecommerce al uso es demasiado impersonal y prefieren tratar con páginas como estas.

 

 

 

Otro de los aspectos esenciales en este tipo de página y, por consiguiente, en sus cabeceras es la apariencia. Para que una página de estas características consiga conversiones es muy importante que transmita una imagen seria y profesional, y al mismo tiempo actualizada.

Ese grado de actualización se lo da la sección “blog” la cual vemos también en todas estas cabeceras corporativas.

 

Comportamiento de las Cabeceras en Responsive

Hemos visto 3 tipos de cabeceras para 3 tipos de web diferentes, sin embargo, llegado el momento de la verdad (el momento de la interacción con el usuario final) todas ellas deben presentar un comportamiento similar para adaptarse a la navegación actual. Y esto pasa sí o sí por la versión responsive.

Hay muchas personas que piensan que la versión responsive es simplemente un pequeño cambio respecto a la versión desktop. Sin Embargo, conseguir una buena versión responsive pasa por replantear completamente el diseño de nuestra página y adaptarlo a las necesidades del usuario en móvil y, asímismo, a las dimensiones de pantalla de cada dispositivo.

Veamos una muestra de cómo la página de Cleando condibe su versión responsive.

         

Veamos que, en Responsive, las cabeceras son el elemento primordial a la hora de estructurar todo el contenido. Como vemos son el primer elemento (además de verdad) con el que el usuario se topa. De ahí que su presencia y su distribución sean, si cabe, mucho más representativas.

Para operar con éxito ante una versión responsive de una cabecera web es necesario tener en cuenta estas premisas:

• Muestra ÚNICAMENTE lo imprescindible. No lo necesario, sino lo realmente imprescindible
• Distribuye de forma aireada y centrada los diferentes elementos
• No utilices muchos colores de contraste, esto satura visualmente al usuario
• Opta por una Fuente de tamaño adecuado

 

Y con esto y un bizcocho damos por finalizado nuestro post de hoy. Esperamos que te haya sido de utilidad y que nos dejes un comentario aquí debajo. Que ¿Por qué? pues porque es gratis, solo te va a llevar un minuto y además, si tienes alguna duda importante, te la contestamos sin problema (porque somos así, ejeej).

¡Nos vemos en el próximo post!