¿Cómo optimizar el diseño de una página de e-commerce?

Un e-commerce comprende un elemento clave para muchas pequeñas empresas ya que su estructura de negocio de es un puente entre marcas y sus consumidores. Conoce cómo a se puede optimizar el diseño de página web en un e-commerce cómo facilitar el proceso de compra para el usuario final.


Para que una página web pueda realizar ventas significativas, debe tener un buen diseño de user experience. Como menciona econsultancy, el 88% de los usuarios no volvería a una página web si tiene una mala experiencia de usuario. Evidentemente, los usuarios recurren a un portal en búsqueda de productos, servicios y beneficios que ese mismo le puede proporcionar mejor que otros.

Los productos son el elemento más crucial y, con el fin de obtener un buen ratio de conversión, se necesita un buen diseño que ayude a destacar la marca, los productos a los clientes, y hacer más fácil el proceso de compra. Para ello, se necesita una buena experiencia de usuario (UX), de lo contrario, un mal diseño comprenderá abandono y mayor tasa de rebote (abandono del usuario sin haber interactuado con la página).

Entonces ¿qué se debe considerar en el diseño de una página de e-commerce?

Navegación simple

El objetivo de la página web debe ser generar más compras por parte del usuario. Se pierde el sentido de este si se tiene un buen diseño pero es de difícil navegación y no se generan transacciones. Uno debe tomar en cuenta que cada elemento del sitio web debe estar bien organizado.


Una sólida página de inicio

A mejor primera impresión, menor índice de rebote. Dado que es el punto de partida con un usuario, la navegación debe ser simple y clara. Debe transmitir el mensaje de la marca y tener fácil acceso a todas las secciones importantes del portal.

Como punto de partida tomamos el logotipo, debe tener visibilidad ya que es el elemento principal de la identidad de la marca y es importante que el usuario perciba la presencia de la marca en el sitio web. Asimismo, se debe acompañar con un pie página dónde el usuario pueda encontrar enlaces de soporte e información adicional como preguntas frecuentes, servicios, contacto, acceso a suscripción, así como la Política de Privacidad y los Términos y Condiciones.

El portal e-commerce de Asos destaca por su propuesta de valor diferencial. A primera interacción cuenta con una gran imagen, explicando el público objetivo y parte de la mercadería que se encuentra. Se evidencian estímulos que dirigen al usuario a la sección de hombres o mujeres y el pie de página es simple y ofrece secciones de asistencia al usuario. Desarrollamos un mapa de atención visual para analizar el recorrido visual de un usuario.


Buena presencia de marca

Es esencial diseñar una experiencia de usuario que exponga vigorosamente a la marca. Durante la creación de la experiencia de usuario, se debe integrar los atributos de marca y los puntos de contacto para reforzar la percepción de los clientes sobre la misma y fomentar experiencias positivas en el sitio web. 


El uso eficaz de elementos visuales

Eyetracking diseño e-commerce
Heatmap Asos.
Fuente: Neurometrics.

El uso de elementos visuales como líneas, formas, colores, y patrones, son fundamentales de cualquier tipo de comunicación visual, tienen gran impacto sobre la recordación de la marca. Se debe buscar mantener una coherencia visual del sitio web para ayudar a los clientes a navegar por el portal.

La consistencia visual es clave, por ello, uno debe asegurarse de mantener una constancia en las fuentes tipográficas, tamaño de elementos, colores, botones, estilo fotográfico, etc.

Nuevamente el ejemplo de Asos, este caso en la sección de mujeres. Encontramos una equilibrada distribución de elementos y un patrón cohesivo en el estilo fotográfico, a través de un mapa de atención visual evidenciamos los puntos de atención visual de un usuario.


Búsqueda accesible

El diseño de la página web de un e-commerce debe comprender una buena arquitectura de elementos del mismo. Dado a que el objetivo principal es la compra del usuario, la búsqueda debe ser de fácil acceso y un proceso intuitivo. Los productos fáciles de encontrar son productos fáciles de vender.

Ponemos el caso de Amazon, gran parte del proceso de búsqueda se da a través de la navegación por categorías a través de un menú desplegable. La interfaz de usuario de Amazon ofrece a los usuarios una visión general instantánea de cada subcategoría. Es una interacción desplegable que muestra a los usuarios la gran cantidad de categorías de productos que tiene.

Ben Kamens explica el código científico detrás de esto, la navegación anidada es ideal para los usuarios y ayuda a Amazon a poner algún orden en su escaparate virtual. Es así cómo la navegación multiacceso aumenta la accesibilidad y la capacidad de búsqueda. 

Diseño e-commerce
Menú Amazon. Fuente: Ben Kamens

Presentación del producto

Una vez que el usuario encuentra el producto, se encuentra con un momento decisivo en el proceso de compra. Para esta etapa del recorrido se debe pensar en un diseño óptimo y la disposición de contenido de las páginas de productos. Se debe agregar información selectiva sobre los productos, lo que es suficiente para que los clientes conozcan las características y beneficios más críticos de los mismos. 

Una herramienta como la vista rápida ayuda a los productos a mostrarse de forma conveniente para el cliente. Permite a los usuarios ver la información del producto en detalle rápidamente, sin ser dirigido a otra página.

El feedback de usuarios impulsa el comercio electrónico UX

Las opiniones contribuyen a una experiencia positiva en el comercio electrónico. El 95% de los consumidores confían en el feedback en línea como guía para tomar decisiones sobre productos (Instituto Baymard), haciendo de los mismos una parte esencial de la compra en línea.

Asimismo, es una oportunidad para que uno interactúe con los clientes y hacerles saber que está dispuesto a escucharlos y resolver sus inquietudes. Este tipo de interacción es una manera eficaz de generar vínculos con los compradores, aumentar la transparencia en la tienda y mejorar la experiencia del usuario.


El diseño de una buena experiencia de usuario en el marco de un e-commerce es una de las cosas más importantes a tener en cuenta ante la creación de una página web. Es fundamental para todas las tiendas en línea. Una buena experiencia de usuario atrae y conserva al público, incrementa los índices de conversión y estimula a los usuarios a convertirse en clientes leales.

Ivanna Zlatar
Ivanna Zlatar

Experience Designer