13 elementos indispensables para el diseño de la página de productos comerciales electrónicos para conversiones más altas

Dado que se espera que las ventas de comercio electrónico global crezcan a $ 4.8 billones para 2021, ¿no debe ver seriamente cómo diseñar el comercio electrónico para múltiples conversiones? Si bien aquí se aplican algunos consejos básicos de conversión para sitios de WordPress, un sitio de comercio electrónico generalmente no cumple con las mismas reglas cuando se trata de formato y apariencia. Específicamente, me gustaría hacer una inmersión profunda hoy en lo que hace para una página de comercio electrónico con alta conversión. Después de todo, esta página es el último paso antes de la conversión, por lo que es la última oportunidad que tiene para finalizar el negocio y convertir a los visitantes en clientes que pagan.
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. Páginas de diseño de productos de comercio electrónico No hay garantía de que sus visitantes comprarán algo una vez que lleguen a sus páginas de productos. Pero es su trabajo cuando construye un sitio de comercio electrónico para no darles razones adicionales para abandonarlo. Honestamente, creo que la forma más segura de diseñar una página de comercio electrónico es comenzar con un diseño y un aspecto similar a un minorista en línea que todos ya conocen y todos confían.

Hay mucho en esta página; Sin embargo, todos los elementos cruciales de la conversión están presentes.
No me gusta el aspecto del sitio de Amazon. Creo que el tipo es demasiado pequeño, sucede demasiados, y la calidad de las descripciones y las fotos del vendedor no siempre es excelente. Dicho esto, el diseño de la página del producto de Amazon funciona bien, porque se presenta lógicamente y se aplica de manera consistente a todo el sitio. Por lo tanto, mientras observamos cómo construir páginas de productos de comercio electrónico para su sitio de WordPress, me gustaría usar esto como una especie de marco de alambre para las mejores prácticas de diseño de productos en lo que analiza la conversión. Como describe cada uno de los esenciales. Elementos necesarios para diseñar una página de comercio electrónico con una alta conversión, destacaré un ejemplo del sitio web que demuestre bien cada punto. Si sigue de arriba a abajo, descubrirá que cada uno de los elementos (excepto quizás con el espacio en blanco) es parte de la fórmula de éxito de Amazon, pero cada sitio ha encontrado una excelente manera de hacer un giro único. . 1. Barra de direcciones
Un ejemplo de la URL realizada correctamente, desde el sitio web de Bean Box.

Es posible que no piense demasiado en la barra de direcciones de sus páginas de productos, pero es algo que decir sobre respetar una fórmula estricta aquí. Esto es lo que necesitará:
Https. Si este es un sitio de comercio electrónico, no es negociable. También es la primera señal de confianza que los visitantes deben reunirse en su sitio en general.
Una estructura simple. Debido a que los productos siempre son más profundos en la estructura de la ruta, concéntralos en mantenerlos claramente etiquetados y fáciles de seguir. Agregar códigos SKU de productos y otras etiquetas de referencia en la URL no distraerá a los visitantes. Un caracol optimizado. Cuando piensa en SEO para páginas de comercio electrónico, la palabra clave para la página del producto debe servir como una babosa. En otras palabras, si su producto se llama “Bean Box”, use la caja de frijoles como una babosa para fines de SEO.
2. Espacio en blanco
Un ejemplo de espacio en blanco utilizado para resaltar un producto en el sitio web de Apple.
Las mejores páginas de los productos de comercio electrónico no necesariamente cubren mucho contenido. Apple ya es una marca de sinónimo de minimalismo, por lo que no es sorprendente que su diseño web use grandes espacios blancos para adaptarse a sus productos. Aquí hay algunos otros consejos para minimizar el espacio que puede tomar de este ejemplo, así como otros sitios comerciales electrónicos que usan bien el espacio en blanco:

Mantenga las páginas de productos ligeros en el texto y use un espaciado amplio entre diferentes elementos (descritos a continuación) para ayudar a los clientes a centrarse en los detalles clave en una fila.
Use un color de fondo sólido (preferiblemente blanco) detrás de las fotos y descripciones del producto. Ayuda a mantener el enfoque en el producto.
No coloque una barra lateral en las páginas de sus productos si puede ayudarlo.
Al mostrar más de tres o cuatro imágenes o videos de su producto, use un rápido y lleno de funciones para reducir el espacio utilizado.
3. Navegación
Un ejemplo de navegar a través de migas de pan. Claro, si hay una barra de búsqueda, en cualquier momento puede ingresar exactamente el producto deseado (si sabe cómo se llama); De lo contrario, requiere muchos clics para volver a girar sus pasos de la consulta de búsqueda inicial.
Como diseñador, puede usar una navegación a través de las migas de pan en la parte superior de la página de su producto para simplificar el trabajo que sus visitantes deben hacer después de todo, ya están interesados ​​en este producto o tipo de producto, ¿no? Debido a que las migajas muestran todas las categorías y subcategorías que llevaron al producto, es la solución ideal para llevarlas de vuelta a una etapa anterior, para que no tengan que reanudar su búsqueda nuevamente. 4. Imágenes y videos del producto

Bellroy incluye una combinación de fotos y videos en su galería de imágenes.
Diría que nueve de cada diez veces (o tal vez incluso más que eso) encontrará imágenes de los productos ubicados en el lado izquierdo de la página. Tiene sentido cuando lo piensas. Si desarrolla sitios web con idiomas escritos de izquierda a derecha, los ojos de sus clientes se enderezarán automáticamente en la esquina superior izquierda de sus páginas, dónde están las fotos del producto.
Es por eso que no puede rayar con la producción de fotos o videos para su sitio de comercio electrónico. Esta es la primera impresión de que los visitantes sobre el producto y podrían hacer o romper de manera realista su decisión de comprar. Entonces, ¿qué puede hacer para asegurarse de haber usado las imágenes del producto correctamente? Primero, instale un complemento de optimización como Smush Pro. Cargará archivos multimedia muy altos en su sitio y no desea comprometer la velocidad de carga o la calidad de la imagen en este proceso.

Nunca incluya imágenes o videos que no sean claros o de baja resolución.
Si una imagen no se ajusta a su producto en la mejor luz o no es una representación exacta (es decir, es demasiado halagadora), no lo incluya.
Debido a que los clientes no pueden probar los productos de antemano, cargue diferentes imágenes que los muestren desde diferentes ángulos o cuando lo usan un modelo.
No use videos con productos promocionales aquí; En su lugar, use videos que realmente muestren el producto en acción.
Además, si su producto viene en diferentes colores o tamaños, deben representarse aquí. La mejor manera de administrar esto es que cambian cuando se cambia la variación (consulte la información a continuación).
Si ha logrado recopilar contenido generado por los usuarios, incluya aquí (con el permiso de los usuarios, por supuesto).
Para los productos que se beneficiarían de 360 ​​exploraciones, piense en usar un complemento de realidad virtual.
5. Nombre del producto
El nombre del producto Bose es la combinación perfecta de una marca con una etiqueta de producto clara. En términos de nombre del producto, cuanto más claro esté en el producto, mejor. Esto no significa escribir un nombre de producto de tres líneas, como los que a veces ve en Amazon, que describe el producto con detalles exagerados: “Producto X en rojo, impermeable, duradero, liviano, de tamaño pequeño a grande, fabricado en el Nosotros, etc. y así etc. ” Simplemente escriba un nombre de producto sensible único.
Además, con respecto a la formulación del nombre del producto, debe seguir las mismas convenciones de nombre de SEO que usaría para cualquier otra página en un sitio de WordPress. Esto significa la inclusión del enfoque de palabras clave en el nombre y limitarla a 55 caracteres o menos (para fines de búsqueda). 6. Precio
American Eagle demuestra una excelente manera de atraer instantáneamente la atención de los visitantes con el precio.
El precio del producto debe ser lo siguiente que sus visitantes ven con el nombre del producto. Incluso si los invierte completamente en el valor del producto con una descripción bien escrita y maravillosas páginas de productos, un alto precio podría ser un factor decisivo. Así que póngalo al frente y al centro.

Además, si ofrece un descuento especial, colóquelo justo al lado del precio inicial y no tiene miedo de usar un color brillante y atractivo para llamar la atención sobre los ahorros de costos. 7. Evaluaciones y revisiones
Un hermoso ejemplo de cómo se puede resaltar una simple exhibición de un producto y puede ayudar a “vender” un producto sin decir demasiado.
Aunque las revisiones reales de los clientes o los testimonios de los clientes no deben estar en la parte superior de la página de su producto, la evaluación de las estrellas y el número de revisiones deberían hacerlo. La prueba social es una parte increíblemente importante del panorama del comercio electrónico, porque los clientes no pueden probar fácilmente los productos de antemano, por lo que deben estar aquí, cuanto más alto sea la página. Las estrellas pueden no siempre tener sentido para el tipo de producto que ofrece. Si es algo así como un servicio comercial, los testimonios tendrán más sentido. Y si es algo así como una reserva o restaurante de hotel, es posible que desee optar por algo como esto, en el que se les dice a los visitantes cuántos otros consumidores con pensamientos similares tienen en cuenta la compra:

Priceline hace evidencia social de una manera diferente, pero funciona para este estilo de comercio electrónico.
Tenga en cuenta que existe la posibilidad de que sus productos no reciban revisiones positivas para comenzar y está bien. Por lo tanto, los escritos reales se proporcionan debajo de la descripción del producto. Los visitantes pueden correr y leer quejas para sí mismos para decidir si son válidos o no y ver si la empresa detrás de ellos escucha o no responde a esas quejas. 8. Descripción del producto
Harry incluye una breve descripción que se centra en los beneficios que obtendrán los clientes de los productos.

Como mencioné anteriormente, es mejor mantener las páginas de productos ligeros en el texto, especialmente por encima del pliegue. Recomendaría usar mensajes muy cortos, basados ​​en valor y descripción. Por supuesto, debe explicar brevemente cuál es el producto, pero es importante darse un momento aquí para vender el producto. Esto significa resaltar los beneficios y proporcionar a los clientes una razón para ver el resto de la página. 9. Las mejores variantes sobre estas variaciones es que, al seleccionar una diferente, las fotos de la izquierda se actualizan para que coincidan.
No todos los productos en su tienda en línea proporcionarán variantes de las cuales los clientes pueden elegir. Sin embargo, si existen, haga que sean muy fáciles de elegir entre las opciones disponibles y también informarles a tiempo qué opciones no están disponibles. Nada perturba más a un cliente que encontrar el producto deseado, seleccionar el tamaño y luego hacer clic en CTA solo para descubrir que el producto ya no existe en esa versión. Entonces, cuando diseñe este artículo, en primer lugar, facilite su uso. Las menciones de caída son excelentes si tiene más de cinco opciones para mostrar. Luego, por supuesto, use un indicador claro que le indique a los clientes que están disponibles. El cuidado de texto funcionaría, así como la eliminación completa de las variaciones para los productos que no están disponibles.

Johnny Cupcakes usa el texto gris para mostrar las variantes agotadas.

Y, dado que me refiero a este tema, esta es una excelente manera de despertar un sentido de emergencia de visitantes. Supongamos que un artículo popular está a punto de agotarse pronto en cierta dimensión. En lugar de esperar hasta que se cuide la variación, coloque una advertencia roja brillante a su lado, que informa a los visitantes que tiene un stock bajo y/o se completará pronto. Esto puede motivar a más clientes a tomar medidas antes. 10. Ctabarnes & Noble coloca sus CTA en primer plano. Además, observe cómo un botón fantasma usa para contrastar un CTA más bajo aquí.
El botón CTA obviamente está jugando un papel importante en el proceso de conversión del comercio electrónico, por lo que realmente no puede experimentar dónde poner el impulso. Cuando se trata de una página de producto, ese botón debe estar al frente y en el centro. También debe estar bien diseñado, de color audaz y decirle a los clientes exactamente qué sucederá al hacer clic en él.

“Agregar la canasta” colocará el artículo en el carrito de compras para que pueda continuar navegando en la tienda.
“Comprar ahora” iniciará el proceso de compra.

“Agregar a la lista de deseos” arrojará el producto en una lista y lo guardará para más adelante.
Si la página de su producto es larga y quiere asegurarse de que la idea de hacer una compra tenga en cuenta, puede usar el siguiente truco (es decir, una barra superior pegajosa) para mantener el botón siempre presente:

Este es un toque agradable y no es algo que a menudo se ve en los sitios comerciales electrónicos.
Otra cosa que hacer en esta sección es colocar los detalles de compra relevantes junto a CTA. Por ejemplo: Fecha de envío estimada.

Una breve declaración sobre su política de devolución y reembolso.
Cualquier impuesto o impuesto asociado con la compra.
Una declaración de garantía.
11. Redes sociales
La apariencia limpia y simple de los íconos sociales en el producto de poo-pourri es un toque agradable.
Idealmente, tendrá íconos de redes sociales que se muestran en cada página de su sitio de WordPress. Si aún no están allí, asegúrese de colocarlos en sus páginas de productos de comercio electrónico, con un énfasis especial en las plataformas que son amigables con las imágenes. Esto significa Pinterest, Instagram, Facebook y tal vez incluso Twitter. Esto les dará a sus clientes una manera fácil de compartir sus productos favoritos a otros. 12. Características del producto

Los dispositivos como Fitbit necesitan espacio para mostrar sus especificaciones técnicas, y este ejemplo se ve fantástico.
Si la descripción del producto es el lugar donde discute brevemente el valor de su producto, entonces las características del producto son donde puede ingresar más detalles técnicos. Las especificaciones de dimensión, las instrucciones de cuidado y mantenimiento, los requisitos de ensamblaje, las piezas incluidas, etc. deben colocarse en esta sección en plegamiento. Si tiene mucho que cubrir, use pestañas para fortalecer la información en un solo espacio y evitar que los clientes funcionen demasiado lejos. 13. Productos relacionados
No todas las secciones relacionadas se verán iguales.Para algunos, solo una imagen del producto, el nombre y la evaluación de la estrella serán suficientes.Esta también es una buena opción si desea dar a los clientes menos opciones de clic.
Uso de datos sobre sus productos, sobre tendencias de compra comunes y hábitos de compra personal de sus clientes. Puede crear una sección útil de “productos relacionados”. Es una gran oportunidad no solo para vender o cruzar el producto que ya están interesados, sino que también es una buena manera de proporcionarles recomendaciones alternativas si no ha funcionado. Una vez que haya terminado de diseñar las páginas de productos de comercio electrónico con los elementos anteriores, no olvide usar complementos de WordPress para optimizar su rendimiento. Incluso si sus páginas se ven geniales y encuentran el aspecto perfecto, si las páginas tardan demasiado en cobrar o los visitantes ven una advertencia de seguridad, podría costarle. Entonces, si aún no los tiene instalados en su sitio, asegúrese de tener un complemento de optimización de rendimiento como Hummingbird y un complemento de seguridad como el Defensor. Optimización de la página de productos comerciales electrónicos: consejos finales además de las consideraciones relacionadas con el diseño de la página del producto, como mejorar la apariencia y garantizar que su contenido explique completamente los beneficios y características de su producto (y genere confianza en su Compañía), busque formas de implementar desencadenantes psicológicos para enderezar la atención de los consumidores sobre la adición. botón para el carrito. Una vez que haya establecido el diseño de la página de productos comerciales electrónicos utilizando los métodos discutidos anteriormente, asegúrese de probar sus páginas A/B y ver si hay otros elementos o aspectos a los que sus visitantes serían más receptivos.
El modelo de Amazon es una opción inteligente para el principio.Mantenga los detalles de sus productos en un orden lógico, mantenga las páginas con una longitud manejable y proporcione una estructura coherente en su sitio.
Etiquetas:
CONVERSIÓN

comercio electrónico
Página de productos comerciales electrónicos