Cómo diseñar una página de inicio para tu Magento 2 [Consejos y trucos]

Nunca tienes una segunda oportunidad para causar una primera impresión.

will rogers

Cuando hablamos de causar una buena primera impresión, debemos tener en cuenta que estamos hablando de los primeros segundos de atención de las personas. Estadísticamente, se tarda 0,2 segundos en formar una opinión sobre su sitio web. Y en las partes más interesantes de la página, la gente busca hasta 7 segundos.

Así que hoy hablaremos sobre cómo llamar su atención de inmediato y aumentar las conversiones de su página de inicio.

3 patrones principales de percepción visual

Antes de elegir los elementos que desea agregar a su página de inicio de Magento 2, debe comprender los principios de percepción de los usuarios del sitio web. Aquí están los 3 más importantes.

Énfasis en la esquina superior izquierda

Las encuestas, que utilizaron el seguimiento ocular para analizar el comportamiento de los consumidores, han demostrado que la esquina superior izquierda de un sitio web es el área más notable. Cuando un usuario abre su sitio web, comienza desde este punto y se mueve hacia la derecha y hacia abajo. Así es como se ve:

Fuente : CXL

Nota importante : nunca te olvides de tu público objetivo y sus características. Estas investigaciones fueron realizadas con los participantes que leen de izquierda a derecha .

El diagrama de Gutenberg confirma que el mismo patrón funciona para páginas con mucho contenido o texto:

Fuente : CXL

La única diferencia entre estas teorías es que la regla de Gutenberg define la esquina inferior derecha de la página como el lugar perfecto para las llamadas a la acción y los botones.

Desplazamiento

El área de la mitad superior de la página recibe la mayor atención de los usuarios, pero extraer toda la información no es una buena idea. Los usuarios se desplazan hasta el final de la página. Algunas investigaciones muestran que recibe muchas visitas. Por lo tanto, al diseñar su página de inicio de Magento 2, debe colocar su principal oferta valiosa en la parte superior de la página y guiar a los usuarios para que se desplacen hacia abajo. Wiltshire Farm Foods es un ejemplo de cómo puede hacerlo:

Llamativos

Finalmente, los estudios de seguimiento ocular destacan 2 puntos principales que son importantes para captar la atención adicional del usuario al configurar su página de inicio de Magento: contenido visual y encabezados. Y si todo está más o menos claro con los encabezados, entonces la elección de las visualizaciones debe abordarse con precaución durante el proceso de configuración de la página de inicio de Magento. Evite no solo imágenes pequeñas y borrosas, sino también imágenes de gran tamaño que muestren hombres que parecen modelos. Los estudios demuestran que una imagen de una persona “normal” frente a la cámara es la opción más atractiva.

Ahora, cuando conocemos los principales patrones de comportamiento, hablemos de contenido.

Qué contenido incluir

Todas las páginas de inicio de Magento 2 tienen diseños y estructuras similares:

Fuente : Experto en construcción de sitios web

El contenido de cada bloque puede diferir de un sitio a otro, pero la idea principal es la misma: primero viene el contenido principal con la información más crítica sobre su empresa, luego más detalles sobre su oferta con indicadores de confianza, y el contenido de la línea de fondo resume todo. cubrimos arriba. Veamos más de cerca los elementos más importantes.

Cómo personalizar el diseño de la página de inicio XML de Magento →

Navegación y búsqueda

En primer lugar, debe verificar si su página de inicio de Magento tiene un sistema de navegación fácil y claro. Incluye solo los enlaces más importantes en tu menú superior. Digamos que tienes una ferretería. Probablemente, las 2 categorías más populares de su tienda serán teléfonos inteligentes y computadoras portátiles. Por lo tanto, será lógico colocarlos al comienzo de su navegación en la esquina superior izquierda más notable. Por lo tanto, los usuarios los verán primero. El orden de clasificación exacto lo puede definir analizando sus estadísticas. Compruebe qué categoría de producto visitan los usuarios con más frecuencia y colóquela en primer lugar. Y luego organice todas las demás categorías en orden descendente del número de vistas. Si aún no tiene esta estadística, puede iniciar la prueba A/B y comparar 2 versiones de la navegación de su sitio web. En 2-4 semanas, tendrás suficientes datos para tomar una decisión informada sobre qué versión es la más conveniente para los usuarios. Además, puede usar WebVisor para rastrear sesiones sospechosas y comprender mejor el comportamiento del usuario.

Además, al crear su menú, tenga en cuenta que cada clic adicional que un usuario necesita hacer para encontrar el producto o la información necesarios disminuirá la tasa de conversión de su sitio web.

Consejo profesional : habilite el menú fijo para proporcionar a los usuarios acceso a elementos básicos de navegación en cualquier parte de la página y habilite filtros de categorías inteligentes con nuestra Navegación en capas mejorada .

Además, lea nuestro artículo sobre cómo configurar Google Analytics en Magento 2 → 

Titular y subtítulo

¿Que hace tu compañía? ¿Qué problema ayudas a resolver? El título y el subtítulo deben responder estas preguntas en 1 o 2 oraciones con palabras para que un recién llegado capte esta idea a primera vista.

llamada a la acción

Hay muchas formas en las que puede lucir su llamada a la acción (CTA) de botón/texto. Y probablemente ya sepa qué funciona mejor para su audiencia. Aquí queremos enfatizar solo un momento importante: nunca subestimes las pruebas. Incluso si está 100% seguro de que su CTA está funcionando bien en este momento, pero tiene una nueva idea, pruébela. Siempre puedes hacerlo mejor.

Beneficios

Los especialistas en marketing dicen: “Las características cuentan, los beneficios venden”. Es por eso que primero debe concentrarse en sus beneficios. Esto es lo que hace que su tienda se vea única y se destaque de la competencia. ¿Por qué los visitantes deberían elegirte? Además, la sección de beneficios debe afectar el lado emocional de las personas, así que concéntrate en los dolores del consumidor que puedes resolver.

Aspectos destacados o lista de características

A continuación, tienes 2 opciones aquí. Si tiene uno o 2 productos principales, puede hacer una lista de sus características principales y colocarla en su página de inicio. Pero para las grandes tiendas multimarca, este es el mejor lugar para destacar los mejores productos y categorías.

Consejo profesional : use recomendaciones de productos personalizadas en su página de inicio para mejorar las conversiones.

Pruebas sociales y testimonios

El 77% de los usuarios lee las reseñas antes de realizar una compra. Por lo tanto, si tiene valiosos testimonios, reseñas y citas de expertos o clientes importantes, es una buena idea ponerlos en su página de inicio. Es más probable que las personas compren en negocios en los que confían. Así que reúne todo lo que pueda mostrar tu credibilidad.

Consejo profesional : agregue la insignia de Google Reviews en las páginas de su tienda y recopile nuevas reseñas automáticamente.

Los 3 mejores ejemplos de páginas de inicio

Al final, queremos inspirarte brindándote algunos ejemplos de la vida real del diseño pegadizo de la página de inicio de Magento.

Crea el diseño de tu tienda ideal con Amasty Jet Theme →

poketo

La característica principal de esta marca es el uso de colores brillantes y saturados. Además, su sitio web es apto para discapacitados.

Cráneo de caramelo

Skullcandy tiene el equilibrio adecuado entre contenido visual y de texto.

jackie smith

Jackie Smith es otra marca que no le teme a nada más que a los colores blanco y negro. Los usan no solo para imágenes sino también para productos.

Comparta sus páginas de inicio con nosotros. ¿Qué enfoque usaste al crear uno nuevo?