cabecera-web-optimizada-para-cro

¬°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.

 

mapa-calor-cabecera-web

 

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!

 

ejemplo-cabecera

 

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.

 

ejemplo-cabecera-2

 

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”.

ejemplo-cabecera-3

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.

cabecera-blog-1

 

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?

 

cabecera-blog-2

 

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:

cabecera-blog-4

 

 

cabecera-blog-5

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:

cabecera-corporativa-3

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.

 

cabecera-corporativa-4

 

cabecera-corporativa-1

 

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.

cabecera-corporativa-2

 

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.

cabecera-responsive         cabecera-responsive-2

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!