5 formas de diseñar la primera página de un sitio de comercio electrónico para el crecimiento de las ventas

Sabe cómo crear páginas de productos y un embudo de pago para sitios comerciales electrónicos. ¿Pero realmente diseña sitios que aumentarán las conversiones y ayudarán a aumentar las ventas? Hoy, quiero alejarme de la segunda mitad del viaje de los clientes y centrarme solo en la primera parte de su visita. En esta publicación, hablaré sobre las cinco formas de diseñar la primera página de un sitio de comercio electrónico para aumentar las ventas. Si aún no ha creado su sitio de comercio electrónico, asegúrese de leer nuestra guía integral para planificar una tienda electrónica de WordPress.
Cómo diseñar la página principal de su sitio de comercio electrónico para aumentar las ventas con un sitio web más pequeño para informar, utilizar las necesidades de los visitantes y ganar un cliente potencial. Debido a que tienen menos capas de hoja de ruta y, por lo general, una sola necesidad de considerar, es fácil diseñar una ruta clara que llevará al visitante desde el punto de entrada a la conversión. Pero con los sitios de comercio electrónico, esto puede ser complicado. El inventario puede ser bastante extendido, y el público objetivo varió … lo que significa que atraer a los visitantes a la conversión no es tan fácil.
La mejor opción es diseñar sistemáticamente los sitios de comercio electrónico, para que se acerque a cada parte del viaje de usuario separado. Por ejemplo, sabe cómo diseñar páginas de productos comerciales electrónicos para aumentar las conversiones. También sabe qué pasarela de pago es la mejor para administrar el comercio electrónico de forma rápida y segura. Si piensa bien, los sitios comerciales electrónicos generalmente no siguen los mismos modelos que los sitios web de negocios tradicionales. No se basa en imágenes grandes con héroes y abundantes espacios en blanco para adaptarse a los mensajes de la marca. Los sitios comerciales electrónicos se centran en vender un inventario de productos o servicios, por lo que el diseño debe basarse menos en palabras cautivadoras y más en elementos visuales cautivadores. A continuación, he revelado 5 consejos para diseñar de manera más eficiente la primera página de un sitio comercial electrónico y un sitio de comercio electrónico y , en consecuencia, aumente las ventas. 1. Muestre la propuesta de valor (no digas), por lo general, una propuesta de valor es una declaración breve que está por encima de la imagen del héroe en la página inicial. Por lo general, un título descriptivo, una oración o dos y un potente botón CTA son todo lo que es necesario para comunicarse con los visitantes “Esto es lo que hacemos y lo que recibirá de nosotros”. Este fragmento de una infografía rápida muestra los elementos que generalmente encontrará en una propuesta de valor bien compuesta:
Un fragmento de la infografía rápida sobre propuestas valiosas.

Sin embargo, cuando se trata de sitios de comercio electrónico, significa más. Usemos este ejemplo de su reloj:
Se necesitan muy pocas palabras para explicar la propuesta de valor de su reloj. La página inicial de Thetest es un banner rotativo que incluye diferentes fotos de su línea de visualización. Las páginas internas de los productos hacen lo mismo, menos el texto superpuesto (que es un diseño web consistente):

Otro ejemplo de propuesta sin palabras de su reloj.
En el encabezado del encabezado, el único texto que aparece es “relojes” (relojes) y “Cizurini” (bandas). Los usuarios pasan con el mouse sobre el que quieren y tienen la oportunidad de elegir “mujeres”, “hombres” o temporada (ya que crean relojes para igualar el año).

Claramente, no es necesario que el reloj de TI intervenga en las imágenes claras de esta línea de productos, con una explicación de sus relojes y pulseras. Las imagenes hablan por si solas. Para los sitios de comercio electrónico cuya propuesta de valor es clara, úsela como una inspiración para comunicar su mensaje a los visitantes con pocas palabras o nada. 2. Agregue atajos al encabezado con muchos sitios web, es lógico querer diseñar un encabezado y una navegación que sea simple y al objeto, como WPMU de:
WPMU DE tiene una barra de navegación muy simple.
Al hacerlo, los visitantes se dan cuenta de qué tipo de información encontrarán en el sitio antes de correr hacia abajo para encontrar más de la propuesta de valor y otras secciones de la página inicial.

Con el comercio electrónico, miro esa barra superior de la misma manera que miro el anotador de mi navegador. Hay ciertas cosas que quiero hacer cada vez que entro en Chrome. Para ahorrar tiempo en su excavación, tengo todas mis páginas comúnmente utilizadas en la barra de marcado, cada una está bien etiquetada y las organicé lógicamente. Una barra de marcado, como navegar por el comercio electrónico, está destinado a simplificar las acciones de los Estados Unidos.
También sirven como un gran recordatorio para verificar mi negocio u otros trabajos de escritura, porque el recordatorio visual está constantemente allí.
La barra de encabezado de comercio electrónico debe hacer lo mismo para los visitantes. Su objetivo con este sitio es permitirles tomar medidas rápidas, no averiguar sobre su empresa y completar un formulario de contacto para obtener más información. Esto significa que todas las acciones que desea hacer debe ser fácilmente accesible en esa barra. Tome el sitio web de Nordstrom, por ejemplo:

El encabezado de navegación de Nordstrom incluye todos los atajos que necesitan sus clientes.
Por supuesto, está la barra de navegación bien organizada en el frente y en el centro. No hay nada demasiado simplificado aquí. Si alguien quiere encontrar bolsos para mujeres, mantas para niños, maquillaje, zapatos para hombres o artículos de liquidación, no hay suposición. Como muestra la investigación del Instituto Baymard:
“… Nuestras pruebas a gran escala en la página inicial de navegación de la página inicial muestran que no poder productos de productos directamente en la navegación principal del sitio causa problemas de navegación múltiples y graves para los usuarios”. También hay estos elementos adicionales que se encuentran en el encabezado de Nordstrom: Barra de búsqueda

Portal de inicio de sesión
Carrito de compras
Cada uno de estos elementos siempre está presente en el sitio, firmando a los visitantes para tomar un atajo y tomar un trabajo. Si espera aumentar las ventas en un sitio de comercio electrónico, brinde a los visitantes una forma rápida de llegar a esa parte del viaje.
3. Da mucho amor por sus imágenes para el principio, solo debe usar fotos y videos personalizados en sitios comerciales electrónicos. Los clientes no tienen el lujo de ver sus productos en persona, por lo que cuanto más pueda darles más elementos visuales, ángulos, variaciones y contextos, mejor. Y, como siempre, asegúrese de que las imágenes estén completamente optimizadas antes de publicarlas en su sitio. Esto debería incluir la preparación de cada imagen para la retina. Las fotos personalizadas y los archivos de imagen comprimidos son solo el comienzo. Las imágenes comerciales electrónicas también deben tener un gran impacto en los visitantes de inmediato.
Para hacer esto, se necesitará una pequeña experimentación. Lo que funciona para un sitio web no siempre funcionará para otro, por lo que significa estar abierto a jugar con factores y elementos como color, cantidad, variación, colocación, etc. Muchos de estos se reducen al contenido en sus imágenes, pero también depende del tipo de tienda que construya. Veamos algunos ejemplos. Reunse es un sitio web que brinda a los usuarios una solución organizacional simple. Esto significa que el proceso de “compras” gira en torno a la personalización de su propia solución organizacional que en torno a una serie de productos. Como tal, el sitio web no está lleno de muchos productos de ventas. Reune utiliza imágenes fuertes y singulares para mostrar la versatilidad de su producto.
Use imágenes de ancho completo, como lo anterior, para mostrar varios modelos que los clientes podrían construir solos utilizando el sistema Reath.
Luego tomemos el ejemplo de Lanbelle, un proveedor de soluciones para el cuidado de la piel.
Las imágenes de los productos en la página inicial de Lanbelle Emanate Refinement.
Debido a que la imagen de la marca es sinónimo de proporcionar a los clientes los mejores resultados, las imágenes deben dar una sensación de limpieza, refinamiento y mimos. Como tal, cada imagen se filma perfectamente y bien enmarcada. Y, por supuesto, debemos ver un mercado masivo como Amazon. Hoy en día, Amazon es una mezcla de productos que los clientes ni siquiera pueden tener altas expectativas para mostrar imágenes en la página inicial o en los resultados de búsqueda.

Amazon es un mercado demasiado grande para poder fortalecer de manera efectiva todos estos productos de manera organizada. Dicho esto, Amazon hace un trabajo relativamente bueno para mostrar solo imágenes de alta calidad. Desde el punto de vista organizacional, sin embargo, es un poco de miseria. Debido a que es una marca tan conocida y confiable, puede escapar con este tipo de sobrecarga de imágenes. Para sus propósitos, incluso si Amazon transforma a los visitantes en varios clientes, aconsejaría no diseñar tiendas de comercio electrónico con este tipo de apariencia y anuncios accidentales y abrumadores. Las imágenes deben transmitir el mensaje que desea que su marca envíe a los clientes; No solo para ser un vehículo para aumentar la cantidad potencial de productos comprados en la tienda. 4. Use el color para transmitir el color de emergencia y déficit es una herramienta muy poderosa para los diseñadores web. Al diseñar un sitio web, use la psicología del color para asegurarse de que sea atractivo para su audiencia, al tiempo que les envía el estilo y el mensaje correctos sobre su marca con sitios comerciales electrónicos que tienen un énfasis principal en vender un producto, el color puede ser una distracción no deseada. Es decir, a menos que use el color para llamar la atención sobre los mensajes que beneficiarán enormemente a sus clientes. Por ejemplo, tenemos a Leesa:
Un gran ejemplo de un temporizador de contradictorio inverso de Leesa.

Esta oferta emergente, en sí misma, es bastante atractiva. Sin embargo, tenga en cuenta el temporizador de tigas en la parte superior en rojo. Con el uso brillante del color y el movimiento del cronómetro que permite a los clientes saber que esta oferta está disponible por un período limitado de tiempo, Leesa usa estos elementos para transmitir la urgencia. Amazon es una marca que a menudo usa urgencia y escasez para obligar a los usuarios a darse prisa y hacer una compra. En este momento, “Prime Day” de Amazon es muy promocionado. Es un día y medio cuando Amazon ofrece muchas ofertas súper atractivas solo para los clientes. Por lo tanto, no solo espera aumentar el número de ventas realizadas durante ese tiempo, sino que probablemente espera obtener muchos más clientes antes. Las pancartas promocionales como estos traerán clientes y ventas este mes: las ventas y las promociones de Amazon son extremadamente efectivas para capturar más ventas.

Como puede ver, Amazon no lleva mucho para tener éxito. Solo una pancarta simple con la imagen de un producto de alta demanda y un precio tan bajo que los clientes no podrán abstenerse de regresar a Amazon para comprar ese día. 5. Motivar con Pop-Up Shopify Windows informa que los sitios comerciales electrónicos que publican códigos de cupón tienden a generar más ventas. Específico:
Los códigos promocionales aumentan la probabilidad de una ventas en un 8%.

De todas las ventas que tuvieron lugar en los sitios de Shopify en un año, el 17% de ellas usó un código de cupón.
(Sí, me doy cuenta de que estas son estadísticas de Shopify específicas, pero creo que son relevantes independientemente del CMS de comercio electrónico). Lo bueno es que es muy fácil implementar códigos de cupón utilizando ventanas emergentes y barras adhesivas. ¿Mi complemento favorito para eso? Hustle.use Hustle para mejorar sus ofertas promocionales.

No solo lo ayuda a mostrar hermosos códigos de cupón diseñados en su sitio, sino que puede recopilar direcciones de correo electrónico a cambio (ganar-ganar). Y puedes crear cuántas ofertas quieres. De esta manera, si alguien hace clic fuera de la ventana emergente porque supone que es irrelevante, puede atraparlo con otro bloqueado en la parte superior o inferior del sitio. Buffy usa esta ventana emergente para dar a los nuevos clientes un descuento en su primera compra:
Simple en ejecución, pero efectivo para llamar la atención sobre la oferta especial.

Es de colores brillantes, directamente al objeto e incluso tiene una pequeña mascota divertida. Polaroid Originals es otro que usa la ventana emergente para llamar la atención, pero es un enfoque interesante:
Es una elección de color interesante, pero creo que funciona bien en el sitio súper coloreado.
El sitio en sí es absolutamente increíble, con un fondo monocromático que pasa a uno mucho más colorido. Pero entonces tienes esta oferta emergente que es negra. Definitivamente está en un fuerte contraste con el resto del sitio web y seguramente atraerá mucha atención para hacerlo. Y aquí hay un ejemplo de una barra pegajosa en el sitio de Themeforest:
Las pancartas promocionales se han vuelto muy populares debido a la indexación móvil.
Además de los logotipos de plantillas y temas vendidos en el sitio, Themeforest generalmente tiene un diseño bastante discapacitado. Pero con este pequeño toque de color en la barra pegajosa, los clientes serán atraídos instantáneamente por la oferta especial. ¿Le gustaría aumentar sus conversiones en ventas? Luego haga esto … la conclusión es la siguiente: para estimular sus conversiones en línea, su sitio tiene que causar una fuerte impresión desde el principio. Y debe ser inquebrantable. Esto significa proporcionar a los clientes un lugar seguro para comprar, un sitio web rápido para leer el inventario y proporcionarles la cantidad correcta y el tipo de información que necesitan. Obviamente, esta lista no son los consejos de diseño para el comercio electrónico. Pero con la Guía de diseño de productos, sugerencias de pasarela de pago y ahora estos consejos sobre cómo diseñar la primera página de un sitio de comercio electrónico, tiene una imagen más completa al final de las ventas del modo de crecimiento en todo el viaje del usuario. ¿Está ahí? ¿Algo en esta guía de diseño de comercio electrónico que no se haya cubierto? Publique sus sugerencias en la sección de comentarios a continuación.

Etiquetas:
Optimización de la tasa de conversión

CONVERSIÓN
comercio electrónico

Diseño web de comercio electrónico
rebaja

carritos de compra