Consigue que se asomen a tu Tienda Online

 

Hoy en Web Conversion Master vamos a explicarte c贸mo sacarle partido a tu ecommerce a partir de un elemento muy importante: su escaparate. 驴Pensabas que s贸lo las tiendas offline contaban con este elemento de persuasi贸n? Si es as铆, estabas equivocado. Las tiendas online tambi茅n cuentan con 茅l. As铆 que sigue leyendo y desc煤bre c贸mo optimizar el escaparate de tu ecommerce para empezar a obtener m谩s conversiones.

 

驴Cu谩l es el 鈥渆scaparate鈥 de una tienda online?

El escaparate de una ecommerce se corresponde con una de las p谩ginas base de nuestra web: La home.

La home es el primer elemento que toma contacto con nuestros usuarios online por lo que, en gran medida, de ella depende que un visitante siga navegando por nuestra tienda o no.

En el 谩mbito offline el escaparate es el reclamo que tienen los comercios para atraer a sus clientes hacia el interior. En el online, la home es la que realiza dicha funci贸n. Por lo tanto, deberemos aprender a optimizarla al m谩ximo para conseguir atraer a nuestros visitantes y que sigan navegando.

Si no atraes a los clientes hacia t铆, no vendran nunca - tuit茅alo

Powered by Vcgs-Toolbox

 

Cambios de Tendencia en las home o escaparates

Si te fijas, la mayor铆a de las p谩ginas de inicio o homes actuales cuentan con una estructura m谩s o menos similar a esta:

home3

 

 

El hecho de que el dise帽o de este tipo de p谩ginas sea parecido se debe a una cuesti贸n de tendencias. Actualmente esta distribuci贸n funciona bastante bien y es eficaz para las ventas por ese motivo la gran mayor铆a de p谩ginas decide apostar por crear sus 鈥渆scaparates鈥 o p谩ginas de inicio de esta forma. Sin embargo, si en determinado el momento apareciera un dise帽o distinto que registrara mejores resultados en cuanto a usabilidad, conversi贸n, etc. la tendencia evidentemente variar铆a. Eso es lo que lleva ocurriendo durante todo este tiempo.

La estructura y apariencia de los 鈥渆scaparates鈥 o homepages ha variado much铆simo a lo largo de los a帽os. - tuit茅alo

Powered by Vcgs-Toolbox

En sus inicios las ecommerce contaban con dise帽os muy poco cuidados en los que, factores como la persuasi贸n o la credibilidad (pilares b谩sicos de la conversi贸n web), no se atend铆an para nada. Echa un vistazo.

apple_antigua

 

Tras estas V1 (version one) o primeras versiones, se sucedi贸 un nuevo cambio de tendencia en el dise帽o de las p谩ginas web provocado, entre otros factores, por el afianzamiento de Internet como medio de comunicaci贸n y la democratizaci贸n de la tecnolog铆a para acceder a dicho medio. As铆 el uso de Internet empez贸 a aumentar de forma exponencial.

Ese cambio tambi茅n afect贸 a la apariencia de las p谩ginas web. Con m谩s p煤blico observando, los sites deb铆an empezar a presentar una imagen m谩s cuidada y profesional.

Lleg贸 entonces la etapa de los dise帽os web hechos con Flash en la cual la apariencia de las webs mejor贸 espectacularmente gracias a la dinamizaci贸n de las p谩ginas con elementos en movimiento y efectos hasta entonces nunca vistos.

Al final de esta etapa pudimos ver dise帽os tan sorprendentes como el ejemplo que te dejamos aqu铆 (todav铆a vigente).

Observa:

flash1

Sin embargo, el esplendor y pomposidad del dise帽o con Flash se evapor贸 r谩pidamente cuando empez贸 la fiebre del posicionamiento. Ser el primero en los resultados de Google supon铆a sacrificar p谩ginas enteras para incluir c贸digo legible para el buscador.

Empez贸 a entenderse que las p谩gina en Flash no eran buena opci贸n: demasiado pesadas, difilmente posicionables, nada usables y con baja accesibilidad.

Finalmente la soluci贸n se present贸 de la mano del c贸digo .html combinado con el maravilloso .css (y sus derivados: .html5 + .css3, etc.)

Esta combinaci贸n de c贸digos totalmente compatibles solucion贸 la papeleta para muchos dise帽adores y desarrolladores puesto que permit铆a crear p谩ginas usables, accesibles, de f谩cil posicionamiento, ligeras y lo m谩s importante, visualmente atractivas.

El objetivo: conseguir una p谩gina: usable, accesible, de f谩cil posicionamiento, ligera y visualmente atractiva. - tuit茅alo

Powered by Vcgs-Toolbox

 

C贸mo Optimizar Tu Home para CRO

Como ya hemos dicho, el cambio de tendencias nos ha llevado hasta un tipo de dise帽o y estructura determinados. Volvamos a verlo:

home_mockup

 

 

home9

Si nos fijamos, la estructura de los 鈥渆scaparates鈥 o homepages actuales incluye varios elementos en com煤n. Si bien, en cada caso el dise帽o puede variar un poco, la base es generalmente la misma.

A continuaci贸n vamos a detallar esos elementos uno por uno y a indicar qu茅 cuestiones importantes debes tener en cuenta para optimizarlos y conseguir un resultado de 10.

 

Cabecera

La cabecera de nuestra home act煤a como sello corporativo en nuestro escaparate. En ella es muy importante incluir:

  • El logo
  • Los datos de contacto
  • El men煤 de navegaci贸n
  • El buscador
  • El carrito de la compra

 

cabecera

Sumado a esos elementos no estar铆a de sobra a帽adir:

  • Logos de redes sociales
  • Enlace de registro

Lo que se busca es que la cabecera no est茅 demasiado sobresaturada de elementos por esta raz贸n hemos de discriminar los que realmente son importantes de aquellos que no lo son.

Lo que est谩 claro es que la primera relaci贸n de elementos son obligatorios. El resto se puede derivar a otra zona de nuestro escaparate.

La forma de distribuir esos elementos en la cabecera responde a una convenci贸n que lleva tiempo establecida. El logo a la izquierda, el buscador a la derecha, junto al carrito, etc. Pero que, sin embargo, puede variar ligeramente:

 

cabecera2

 

Lo realmente importante, al margen de c贸mo se sit煤en los elementos, es que 茅stos destaquen lo suficiente para que el usuario sepa regresar a ellos cuando los necesite.

Slider

Esta es una de las zonas m谩s interesantes de nuestro 鈥渆scaparate鈥. Se conoce como zona de 鈥渟lider鈥 porque es habitual que en ella aparezca un carrusel de im谩genes de gran formato, un slider propiamente dicho. Sin embargo, esta tendencia est谩 cambiando y ahora las tiendas online est谩n optando por incluir una imagen est谩tica en lugar de dicho carrusel. Por este motivo quiz谩 ser铆a mejor identificar este apartado como la secci贸n de la 鈥渋magen de cabecera鈥

Sea como sea la terminolog铆a, lo cierto es que en este apartado tenemos la posibilidad de colocar nuestros mensajes m谩s interesantes: ofertas, promociones, novedades, rebajas, etc. Todo ello en un espacio totalmente destacado y llamativo. Observa:

 

slider2 slider4

 

Cosas importantes para crear tu zona de Slider:

  • Cuida mucho el dise帽o gr谩fico de tus im谩genes, tanto las fotograf铆as que emplees como los textos, los iconos, botones, etc. Si es necesario recurrir a un profesional para que realice tu imagen de cabecera. 隆Hazlo!
  • Trabaja cuidadosamente la llamada a la acci贸n de tu slider. Ten en cuenta que si no resulta impactante para tus usuarios no recibir谩s ning煤n click.
  • No te olvides de a帽adir un bot贸n para hacer efectiva esa llamada y, por supuesto, recuerda enlazar ese elemento con una p谩gina concreta de tu web que haga referencia al mensaje que incluyes en el slider.

 

slider3

 

Miniaturas de productos

Estos thumbnails o miniaturas te ayudar谩n a presentar ante tu usuario una peque帽a muestra de tu cat谩logo. Es adecuado que no incluyas m谩s de dos l铆neas de productos por secci贸n ya que no es adecuado sobresaturar a tus visitantes.

miniaturas1

 

Cosas importantes para tus miniaturas:

  • Cuida mucho las im谩genes
  • A帽ade indicativos si tus productos est谩n rebajados
  • Muestra el precio
  • Coloca el bot贸n de compra o de +info de forma destacada
  • Indica si tus productos est谩n disponibles
  • Utiliza efectos over .css para dar un toque de dinamismo.

 

Destacados

Los destacados te ayudar谩n a identificar caracter铆sticas de tus productos de forma m谩s visual y llamativa. Observa:

destacado3

Lo importante de estos destacados es que sean concretos en cuanto a texto e incluyan caracter铆sticas realmente importantes sobre tu negocio.

Generalmente lo que se incluye en este tipo de apartados son los beneficios del usuario o las bondades de tu producto o servicio.

 

Llamadas a la acci贸n

destacados 1 destacado2

Las llamadas a la acci贸n nos sirven para atraer al usuario hacia una secci贸n o apartado concreto. El objetivo es que dicho usuario haga click en ellas y para eso es esencial que:

  • El mensaje que incluyamos est茅 pensado para la persuasi贸n
  • Que se cuide mucho el dise帽o gr谩fico de estas llamadas
  • Que sean clickables y redirijan al visitante hacia la secci贸n que queremos que vea
  • Que sean lo suficientemente visibles como para que el resto de elementos 聽no se las 鈥渃oma鈥

Testimonios y sellos de calidad

Los testimonios y sellos de calidad refuerzan la credibilidad de nuestro sitio. No hay nada tan efectivo como que un cliente satisfecho hable de nuestra tienda online, nuestros productos o nuestros servicios.

Pero para que estos testimonios resulten realmente eficaces deben ser testimonios reales que sepan llegar al usuario y consigan que 茅ste deposite su confianza en nosotros.

Los testimonios deben incluir: foto de la persona, nombre, ciudad o profesi贸n y texto.

testimonios1

Una nueva tendencia en este tipo de elementos son los v铆deo-testimonios. Realmente 煤tiles si se saben trabajar de forma adecuada.

 

A la hora de afianzar nuestra credibilidad de cara a nuestros visitantes tambi茅n tenemos otro elemento que puede ayudarnos. Se trata de los sellos de calidad que en este caso pueden identificarse con las marcas con las que trabajamos o con alg煤n distintivo que hayan obtenido nuestros productos o servicios.

testimonios2

 

V铆deos

video1

Incluir v铆deos dentro de tu 鈥渆scaparate鈥 es una muy buena forma de llegar a tus vistantes de forma efectiva y r谩pida. Sabemos que muy poca gente lee nuestros mensajes por lo tanto si podemos transmitirlos de una forma m谩s visual y atractiva tendremos un punto a nuestro favor.

Lo importante para que estos v铆deos sean realmente eficaces es:

  • Que est茅n cuidadosamente preparados y montados
  • Que realmente contengan informaci贸n de inter茅s para nuestros usuarios
  • Que no excedan los 2 minutos

 

Si sigues las indicaciones y consejos que te hemos ofrecido hoy en Web Conversion Master conseguir谩s una home o 鈥渆scaparate鈥 贸ptimo para la venta. No dejes escapar m谩s tiempo y empieza 隆ya! a optimizar tu p谩gina para CRO.

隆Te esperamos en el pr贸ximo post!

photo credit: cuantofalta via photopin cc