La página de inicio no es una galería ni un folleto. Es un mecanismo de enrutamiento. Su único trabajo es llevar al visitante adecuado al producto adecuado lo más rápido posible. Cada decisión de diseño en la página de inicio debería servir a ese objetivo.
Este artículo explica cómo diseñar la página de inicio de una tienda online que funcione. Qué incluir, qué dejar fuera, qué errores arruinan las conversiones y cómo pensar el diseño en móvil, donde navegan la mayoría de tus compradores.
Si quieres ver el panorama completo de las páginas que necesita tu tienda, empieza por qué páginas necesita toda tienda online.
¿Para qué sirve realmente la página de inicio?
La página de inicio atiende a visitantes que aún no han decidido. Saben algo de tu marca, o te encontraron en una búsqueda o en redes sociales, pero no se han comprometido a comprar. La página de inicio es el momento en que deciden si siguen adelante.
Tiene que responder a tres preguntas al instante. ¿Qué vende esta tienda? ¿Es para alguien como yo? ¿Qué debo hacer ahora? Si alguna de esas respuestas no está clara, los visitantes se van. No porque tus productos sean malos, sino porque la página de inicio no les dio un motivo para quedarse.
Cómo diseñar la sección principal (hero)
La sección hero es lo primero que ve un visitante. Está a la vista sin hacer scroll, y carga con la mayor parte del peso de la primera impresión.
Un buen hero tiene cuatro elementos. Un titular que nombra lo que vendes con palabras sencillas. Una línea de apoyo corta que añade contexto, a menudo un beneficio clave o un rasgo diferencial. Una imagen que muestra el producto o el resultado que crea. Y un único botón de llamada a la acción que dice al visitante exactamente adónde ir.
El titular es la pieza más importante. Hazlo específico. "Bolsos de cuero hechos a mano para el día a día" funciona. "Donde la artesanía se une a la función" no. Los compradores escanean rápido. Si tu titular requiere interpretación, ya los has perdido.
El botón de llamada a la acción debe nombrar un destino, no una sensación. "Ver bolsos" o "Ver novedades" funciona. "Descubre más" o "Explora ahora" no. Da al visitante una dirección, no una sugerencia.
La imagen de tu hero debe mostrar el producto con claridad. Las imágenes de estilo de vida funcionan bien cuando el producto necesita contexto para entenderse, como la ropa o los artículos para el hogar. Las fotos solo del producto funcionan mejor cuando la claridad importa más que la aspiración, como en herramientas o electrónica. Usa imágenes de alta calidad. Un hero borroso o mal iluminado socava todo lo demás.
Qué mostrar debajo del hero
Cuando un visitante pasa del hero, busca motivos más concretos para quedarse. Esta sección de la página de inicio debería mostrar productos o categorías que coincidan con lo que es más probable que quieran tus compradores.
No intentes mostrarlo todo. Elige tus más vendidos, tus productos de mayor margen o la categoría en la que acaba la mayoría de tus compradores. Entre tres y seis productos destacados es un rango razonable. Más que eso empieza a verse recargado y crea parálisis de decisión.
Los bloques de categorías funcionan bien en tiendas con una gama amplia de productos. En lugar de productos individuales, muestra las tres o cuatro categorías principales con una imagen y una etiqueta claras para cada una. Deja que los compradores elijan por sí mismos la sección adecuada de la tienda.
La sección destacada también debería ser dinámica. Ve rotando productos de temporada, artículos en oferta o novedades. Una página de inicio que nunca cambia no da a los visitantes recurrentes ningún motivo para seguir bajando.
Cómo usar la prueba social en la página de inicio
Los compradores confían más en otros compradores que en las tiendas. La prueba social en la página de inicio genera credibilidad antes de que el visitante llegue a una página de producto.
Las formas más eficaces de prueba social en la página de inicio son reseñas cortas de clientes o valoraciones con estrellas, una cifra de clientes o de pedidos enviados, menciones en prensa o logotipos de medios y sellos de confianza de terceros, como iconos de pago seguro o marcas de certificación reconocidas.
Que sea conciso. Uno o dos testimonios sólidos son más eficaces que un muro de reseñas de cinco estrellas. El logotipo de un único medio reconocible hace más que una lista de diez nombres desconocidos. Elige la prueba que más signifique para el comprador más escéptico sobre comprarte por primera vez.
¿Conviene incluir una sección con la historia de la marca?
Una sección corta con la historia de la marca en la página de inicio es opcional, pero ayuda en ciertos contextos. Funciona mejor cuando la historia del fundador es parte del motivo por el que un comprador elegiría esta marca frente a un competidor más grande. Los productos artesanales, el abastecimiento ético, las marcas impulsadas por una comunidad y los productos liderados por su fundador se benefician de un breve momento humano en la página de inicio.
Si la incluyes, que sea corta. Dos o tres frases y un enlace a la página completa de quiénes somos bastan. No la pongas sobre el primer pantallazo ni encima de los productos destacados. La historia añade calidez, pero son los productos los que impulsan las decisiones.
En tiendas donde el producto se defiende solo, omite la sección de historia. Una página que vende artículos de uso común no necesita una historia de origen. Usa ese espacio para mostrar más producto.
Lo que la página de inicio no necesita
El desorden en la página de inicio es tan dañino como una sección que falta. Cada elemento que no hace un trabajo le quita atención a algo que sí lo hace.
Entre los errores comunes de la página de inicio están demasiadas llamadas a la acción compitiendo al mismo nivel, vídeos o animaciones con reproducción automática que ralentizan la página, grandes bloques de texto que nadie lee, un menú de navegación con más de seis o siete elementos y popups que aparecen antes de que el visitante haya tenido tiempo de ver nada.
Cada opción adicional que impones a un visitante es un pequeño coste de fricción. La página de inicio debería sentirse clara, no ocupada. Si no puedes decidir entre dos elementos, quita el que no esté directamente ligado a llevar al visitante a un producto.
Diseño de la página de inicio en móvil
Más de la mitad de todo el tráfico del ecommerce viene del móvil. El diseño de tu página de inicio debería pensarse primero para móvil, no adaptarse después desde el escritorio.
En móvil, el titular del hero debería ser lo bastante corto para leerse en dos líneas. El botón de llamada a la acción debería ser lo bastante grande para tocarlo con facilidad. Las imágenes de producto deberían apilarse con limpieza en una sola columna. La navegación debería colapsarse en un menú que no domine la pantalla.
Prueba cada cambio de la página de inicio en un teléfono antes de publicarlo. Lo que se ve limpio en un monitor de escritorio puede convertirse en un desplazamiento confuso en una pantalla pequeña. La experiencia del comprador en móvil es tu principal restricción de diseño, no una ocurrencia posterior.
La claridad sobre los envíos también importa en móvil. Los compradores en el teléfono suelen estar cerca de una decisión de compra. Un banner visible en la página de inicio con el importe mínimo para envío gratis o la entrega estimada puede convertir una sesión de navegación en una sesión de compra. Para saber más sobre cómo configurar los envíos de tu tienda, mira cómo configurar los envíos de tu tienda online.
Cómo apoya WEMASY el diseño de la página de inicio
El sistema de ecommerce de WEMASY incluye herramientas de diseño de página de inicio creadas para tiendas online. Secciones hero, cuadrículas de productos destacados, bloques de categorías y secciones de prueba social están disponibles sin código a medida. El mismo sistema gestiona el diseño móvil automáticamente.
Mira qué herramientas de página de inicio y de tienda hay en cada nivel en la página de precios de WEMASY.
Preguntas frecuentes
¿Cuántas llamadas a la acción debe tener una página de inicio?
Una llamada a la acción principal a la vista sin hacer scroll, y luego llamadas secundarias más abajo ligadas a secciones concretas. La principal debería ser la acción más importante que quieres que haga un visitante nuevo, normalmente "Comprar ahora" o un enlace a una categoría concreta. Varias llamadas principales con el mismo peso visual diluyen la atención y reducen los clics en todas. Con el creador de webs de WEMASY, puedes configurarlo directamente en tu tienda.
¿Debo mostrar precios en la página de inicio?
No necesariamente en la propia página de inicio, pero mostrar precios en las tarjetas de productos destacados es útil. Los compradores escanean los rangos de precio para saber si una tienda entra en su presupuesto. Ocultar los precios hasta la página de producto añade fricción y puede parecer evasivo. Si tus productos son premium, mostrar un precio de partida fija las expectativas de forma positiva en lugar de crear una sorpresa.
¿Cada cuánto debo actualizar la página de inicio?
Actualiza los productos destacados y las secciones de temporada cuando tengas novedades, una promoción en marcha o un cambio de temporada en lo que buscan los compradores. La sección hero puede mantenerse estable más tiempo, pero renuévala cuando cambie tu oferta principal o tu posicionamiento. Una página de inicio que se ve igual durante un año entero da señal de una tienda sin actividad.
¿Afecta la velocidad de carga de la página de inicio a las ventas?
Sí. Una página de inicio que tarda más de tres segundos en cargar en móvil pierde a una parte importante de los visitantes antes de que vean nada. Las imágenes grandes sin comprimir son la causa más común. Comprime las imágenes antes de subirlas, evita el vídeo con reproducción automática en el hero y limita los scripts de terceros. La velocidad es una decisión de diseño de la página de inicio, no solo técnica.
¿Debe la página de inicio enlazar a todas las categorías de producto?
No necesariamente. Enlaza a las categorías que querrá la mayoría de tus compradores. Un menú de navegación puede llevar la lista completa de categorías. El cuerpo de la página de inicio debería mostrar las categorías que generan más conversiones o que quieres priorizar. Enlazar a todo crea ruido visual y diluye las páginas que más importan.
¿Dónde deben ir los sellos de confianza en la página de inicio?
Cerca del hero, junto a la llamada a la acción, o en una barra de confianza específica entre el hero y los productos destacados. Los compradores tienden a buscar señales de confianza en el momento en que se plantean hacer clic en una llamada a la acción. Poner los sellos solo en el pie de página solo llega a quienes ya han bajado hasta el final, lo cual es demasiado tarde para la mayoría de los visitantes nuevos.