Saltar al contenido

Geniales consejos para user experience en el ecommerce

En esta ocasión, hablaremos del user experience en el ecommerce, son varios factores para que un portal de comercio electrónico tenga una experiencia de usuario genial.

Los factores pueden ser el diseño web, la arquitectura de navegación del portal ecommerce, igual que al ser responsive tenga la misma experiencia, las valoraciones y comentarios de los productos, el contenido extra, los productos de calidad  y la carga rápida al navegar.

Veremos por donde empezamos a dar los consejos, para esto, seleccioné un portal de ecommerce muy completo a nivel Latinoamérica.

Ya sea, si usamos WordPress u otro CMS o algún otro método de desarrollo web, es casi absoluto que tenga una estructura definida globalmente. Existen muchos acomodos pero al final todos son muy parecidos y eficientes.

Geniales consejos para user experience en el ecommerce

Header o cabecera (Azul)

  1. Head bar. Podemos poner el correo principal de contacto y los iconos de redes sociales, en ocasiones solo va un head bar como menú. Igual botones y menu de usuario, carrito de compra y log in / log out y join now.
  2. Logo marca. Este se debe acoplar a una medida optima a visualizar, debe tener buen contraste con su fondo, áreas seguras de visibilidad y respetar los lineamientos de identidad de marca.
  3. Buscador. Lo mas recomendable es que aparezca como icono y al usarlo salga como pop up, esto para no quitar mucha visibilidad, espacio y diseño. En este caso no se implemento pero resta poco a la función del diseño.
  4. Menú. Importante acomodar por importancia de izquierda a derecha, empezando por el botón de inicio. Debe contener los botones a las ligas que dirijan claramente a las funciones del portal. El uso de menús desplegables debe funcionar bien en modos responsive. Así como los demás elementos del Header, todo debe tener buen margen de espacio.

Body o cuerpo principal (rojo)

  1. Banner y slide show. Una buena opción para poner un producto destacado, alguna promoción,  publicidad, slide de entradas de tu blog o anuncio de algún evento. Recomendable no poner más de cinco slides.
  2. Área de Widget. Igual llamada barra lateral, aquí podemos meter muchas cosas funcionales para el usuario. Alguna llamada de acción, imagen destacada, producto destacado, enlaces principales, iconos de redes sociales, contador de entradas, rating de productos, mejores comentarios, banner de publicidad o productos, categorías, tops categoría en entradas, insignias, buscador, entre otros.
  3. Áreas personalizadas. Podemos crear tabs o cajas de categorías, en ellas, dependiendo del tipo de portal serán designadas, en este caso manejan dos d manera funcional, una mostrando lo último en productos agregados y un panel con todas las categorías de productos, esta última optimizó la experiencia de usuario, ya que en vez de estar en el menú principal, en la página de inicio podemos conocer la variedad y disposición de los tipos de productos que manejan.

Footer o pie de página (verde)

  1. Esta área varia mucho, en ellas podemos repetir cosas del header como el menú, iconos de redes sociales, logo marca. También podemos poner un par de widgets, entradas, páginas internas sobre la empresa, servicios,m aviso de privacidad y demás cosas.
portal ecommerce

Ahora tocare el tema del user experience, estos son los factores donde el usuario interactúa con el entorno del portal, cuyo resultado es la percepción positiva o negativa de los productos en un ecommerce.

Sabemos que en el comercio electrónico, el usuario reacciona al diseño, la calidad de los contenidos, buscabilidad, utilidad, confianza y transmisión de la marca, así como accesibilidad, legibilidad, calidad de diseño de interacción e inclusive con las emociones y sentimientos.

Ahora bien, cuando el portal mantiene y muestra una máxima satisfacción de experiencia, es necesario compartirla e implementar herramientas .

Continuando con el ejemplo de Bellezacheck.com, mostramos el producto y las reseñas base infallible loreal, un claro ejemplo de un desarrollo de tres Tabs o pestañas para implementar en un producto de un ecommerce.

reseñas base infallible loreal

Crear la pestaña de Detalle, Reseñas y ¿Cómo usarlo? da la mejor experiencia de usuario que se necesita en este tipo de portales de comercio electrónico. El usuario necesita saber todos los detalles y características de lo que va a comprar, necesita ver las reseñas de otros usuarios sobre el producto que le interesa, así como poder el mismo poner un rating-review. Por último el extra de decirle al usuario como usar el producto, sin duda ese es un trabajo dedicado a mejorar la experiencia de usuario.

Les compartire algunas herramientas que pueden implementar en sus ecommerce para usar en el Rating de sus productos.

WP-PostRatings con genial y buen manejo de registro valoraciones, opciones de diseño de rating como estrellas, pulgares y barras. Sus plantillas son buenas, muy intuitivo y muy querido por la comunidad. Esta en código PHP pero es muy flexible con la posición.

Rating-Widget: Star Review System. El sistema de rating review de cinco estrellas más popular en la web. Puntuaciones fáciles de usar para: publicaciones, páginas, comentarios, foros de WooCommerce, BuddyPress y bbPress. No requiere código PHP, altamente configurable: diseños, imágenes, fuente para la letra, traducción de textos, multiidioma, posición de la valoración y elección de votantes entre visitantes, usuarios o ambos. Además, cuenta con widgets para mostrar las entradas más valoradas.

  • Post Ratings
    Page Ratings
    Comment Ratings & Reviews
    WooCommerce Product Ratings
    BuddyPress User and Activity Ratings
    bbPress Forum Ratings, Replies and Users (PROFESSIONAL plan)
    Custom Post Type Ratings
    Author Review Ratings

Yet Another Stars Rating. 


Desde CodeCanyon

WordPress WooCommerce Marketplace Table Rate Shipping Plugin

WordPress WooCommerce Marketplace Table Rate Shipping Plugin


Links de geniales plantillas para Ecommerce geniales desde ThemeForest

WoodMart – Responsive WooCommerce WordPress Theme

Voisen – WooCommerce Responsive Fashion Theme


Espero les haya servido de ayuda esta pequeña información, acuérdense de compartir, dar like, suscribirse a mis redes sociales y comentar.