Durante la temporada navideña, los dueños de las tiendas se apresuran a hacer que su Magento 2 sea más atractivo. Sin embargo, algunas de estas soluciones rápidas solo pueden empeorar las cosas.
He estado diseñando sitios y aplicaciones para varios clientes durante 10 años. Se trataba tanto de pequeñas tiendas electrónicas que vendían solo un par de productos como de grandes tiendas con vuelcos multimillonarios y listas interminables de categorías y artículos. Si hubiera cobrado un centavo por cualquier error de diseño que arreglé en esos proyectos, me haría millonario. No, un multimillonario.
Ahora soy el Jefe del Equipo de Diseño. Ayudamos al equipo de Amasty a atraer nuevos usuarios y compradores potenciales a través del diseño basado en datos.
En este artículo, comparto consejos de UX para ayudarte a evitar errores no obvios en el diseño de una tienda electrónica, concretamente en los siguientes elementos:
- Pagina principal;
- Página de catálogo/producto;
- Carro de la compra y caja.
Resumen del artículo [ ocultar ]
- Pagina principal
- Error n.° 1 El menú de navegación superior no cabe en el área de la primera pantalla
- Error #2 Las listas desplegables de categorías no caben en una pantalla
- Error #3 Espacio negativo no deseado alrededor del sitio web
- Error #4 Uso ineficiente del espacio en el sitio adaptable
- Módulos útiles de Magento 2
- ¿Cómo diseñar la página del producto en Magento 2?
- Error #5 Uso incorrecto de las etiquetas en la imagen del producto
- Módulos útiles de Magento 2
- Error #6 Pobres acentos en el área de la primera pantalla
- Módulos útiles de Magento 2
- Error n.° 7 Información excesiva del producto en el área de la primera pantalla
- Módulos útiles de Magento 2
- Error #8 Interfaz poco clara
- Error #9 Productos agotados no anunciados
- Módulos útiles de Magento 2
- Error #10 Opciones de pago y entrega limitadas
- Módulos útiles de Magento 2
- Error #5 Uso incorrecto de las etiquetas en la imagen del producto
- Carrito y caja
- Error #11 Campos de información largos y poco prácticos en formularios
- Módulos útiles de Magento 2
- Error #12 Carrito de compras inconveniente
- Módulos útiles de Magento 2
- Error #11 Campos de información largos y poco prácticos en formularios
- Recomendaciones de Magento 2 UX: resumen
Pagina principal
Hay 4 problemas clave aquí.
Esto suele ocurrir debido al tamaño del banner. Para evitar estas situaciones, debe adaptar el tamaño de su banner a diferentes resoluciones de pantalla. De esta forma el banner no ocupará más de la mitad de la pantalla:
Error #2
Las listas desplegables de categorías no caben en una pantalla
Esto sucede si tiene un menú horizontal y varias subcategorías:
Aquí tienes varias opciones a seguir:
- La navegación no es un mapa del sitio, por lo que hacer que parezca una uva no es una buena opción no solo para el diseño de Magento 2 UX sino también para el SEO de su sitio. En cambio, le ofrezco que eche un vistazo al mapa del sitio y clasifique los elementos por importancia. He aquí un consejo útil:
Si tiene que ser una página de destino, es una categoría; de lo contrario, es un atributo.
- Cuando trabaje en la navegación del sitio, no se concentre en la cantidad de clics . La regla de los tres clics ya no se considera óptima . Lo que importa son vías de navegación claras para que los usuarios siempre sepan dónde están y cómo llegar a su punto de interés .
- Puede ocultar algunos elementos de la página que no están relacionados con la navegación en el pie de página o moverlos a la navegación adicional. Estos elementos incluyen configuraciones que rara vez se aplican, información de contacto y más.
- Aunque muchas tiendas todavía tienen las mejores ventas en computadoras de escritorio, Google de hoy en día prioriza los dispositivos móviles , y es la versión móvil de su tienda lo que explica su clasificación. Para asegurarse de que el móvil esté bien cubierto, vaya a su cuenta de Google Analytics para detectar los dispositivos y resoluciones de pantalla más populares . Siga la ruta: Informes ->Audiencias ->Móvil ->Dispositivos
En esta sección, encontrará la lista de dispositivos móviles utilizados para acceder a su sitio .
También puede consultar con las resoluciones de pantalla : Informes ->Audiencias ->Tecnología ->Navegador y sistema operativo.
Cuando diseñe el sitio o introduzca nuevas características, cubra estas resoluciones primero .
Error #3
Espacio negativo no deseado alrededor del sitio web
Este espacio se denomina espacio en blanco y, en algunos casos, sirve como un elemento de diseño en sí mismo. 
Si no es lo que desea, puede seguir algunos pasos para llenarlo. Puede llenar el espacio en blanco con el bloque de inicio de sesión, el carrito de compras, sus campañas promocionales, productos vistos recientemente o información adicional sobre los beneficios de su tienda.
Error #4
Uso ineficiente del espacio en el sitio adaptable
Este problema se reduce a los siguientes problemas:
- Mostrar información de contacto en el encabezado de la página móvil;
- Enlaces e información sobre secciones del sitio que no son de productos en el encabezado.
Para evitar estos problemas, puede probar las siguientes recomendaciones:
- Para usar el espacio de manera eficiente, puede minimizar el logotipo y colapsar la búsqueda al tamaño del ícono . Además, es mejor organizar promociones, números de teléfono y menús desplegables en el menú de hamburguesas.
- En la versión de escritorio, puede colocar información adicional en el menú. En cuanto al sitio adaptable, es mejor ocultar esta información y solo colocar enlaces a las categorías de tu tienda .
Módulos útiles de Magento 2
Y aquí viene el consejo de extensión prometido:
- Mega Menú, un módulo especial centrado en el menú :
¿Cómo diseñar la página del producto en Magento 2?
Esta página es como un escaparate en el comercio minorista tradicional: muestra productos para motivar la compra. Por lo tanto, es importante ofrecer la experiencia de usuario más atractiva.
Las buenas intenciones aquí a menudo conducen a diferentes errores de diseño.
Error #5
Uso incorrecto de las etiquetas en la imagen del producto
Para evitar este problema, tenga en cuenta los tres consejos a continuación:
- Use etiquetas que no se superpongan con la foto del producto;
- Coloque las etiquetas fuera del área de la imagen;
- Cuando se trata de elementos grandes (contadores, imágenes de etiquetas largas, etc.), se pueden colocar de forma horizontal debajo de la imagen.
Módulos útiles de Magento 2
Hay módulos de Magento 2 que pueden facilitar el etiquetado:
- Etiquetas de artículos :
- Módulo de reloj de tictac :
Error #6
Pobres acentos en el área de la primera pantalla
En la mayoría de los casos, debe seguir esta jerarquía de acentos:
- foto del producto;
- Precio;
- Llamada a la acción (por ejemplo, Compre ahora).
Tenga en cuenta que el elemento del precio debe ser más llamativo que los elementos que alejan a los clientes del botón de compra. Los favoritos, el botón de comparación de productos y otras funcionalidades deberían notarse menos que los tres puntos anteriores.
Módulos útiles de Magento 2
- Etiquetas de artículos ;
- Módulo Magento 2 para elegir el color del artículo .
Error n.° 7
Información excesiva del producto en el área de la primera pantalla
Nos enfrentamos a este problema cuando trabajábamos en el diseño de nuestro sitio web. Esta situación suele ser el resultado de demandas conflictivas de diferentes equipos/partes interesadas.
ejemplo _ Un equipo desea enfatizar la nueva funcionalidad, otro equipo enfatiza la compatibilidad perfecta con otros productos, y las partes interesadas creen que las revisiones positivas deben enfatizarse en primer lugar.
Debe enfatizar la información del producto que es útil para los visitantes, es decir, cómo el producto puede ayudarlos a ellos y no a sus colegas o socios. Mueva otros datos fuera de la primera pantalla u ocúltelos usando las herramientas de la interfaz de usuario (marcadores, spoilers, etc.)
Módulos útiles de Magento 2
- Pestañas para las páginas de productos :
- Revisiones avanzadas :
Error #8
Interfaz poco clara
Hay 3 puntos clave para recordar aquí:
- Sea siempre honesto con los usuarios . En los botones, escriba claramente lo que sucede al hacer clic en ellos (Enviar → Confirmar pago). Esto es válido no solo para botones;
- Notificar oportunamente a los usuarios sobre costos adicionales. De esta forma fomentarás la confianza en tu tienda y disminuirás la posibilidad de abandono del carrito;
- Evite patrones oscuros , técnicas de diseño específicas que tienen como objetivo engañar al cliente de alguna manera. Por ejemplo, es posible que se vea presionado a hacer clic en un botón de colores brillantes y accidentalmente compre un bien que no necesita. A corto plazo, las técnicas oscuras pueden aumentar las ventas. Pero esto tiene un reverso que muchas veces se silencia: los patrones oscuros provocan un aumento de los retornos, la sobrecarga de soporte y la pérdida de la fidelidad de los clientes.
Error #9 Productos
agotados no anunciados
Enfrenté este problema cuando trabajaba en la tienda que se expandió más rápido de lo que esperaban los propietarios. La facturación creció, y también lo hizo la base de clientes. Y en un momento, el crecimiento se detuvo porque los propietarios tenían contratos con un solo proveedor y un solo servicio de entrega.
Para evitar este problema, debe:
- Conéctese con varios proveedores de bienes y servicios de transporte;
- Si el bien está agotado en este momento, el stock se repondrá pronto, debe ofrecer notificar a los compradores sobre la disponibilidad del bien.
Módulos útiles de Magento 2
- Orden preliminar :
- Nota fuera de stock :
- Estado de stock personalizado :
Error #10
Opciones de pago y entrega limitadas
Debe permitir que sus clientes elijan un método de pago siempre que el transportista y la fecha y hora de entrega. A veces, los productos se necesitan con urgencia y el cliente está listo por una tarifa adicional y, a veces, no les importa esperar el tiempo de entrega estándar. Le insto a que no exagere: los clientes le agradecerán que no les haga pensar en estos patrones simples de interacción con la interfaz durante demasiado tiempo.
Módulos útiles de Magento 2
- Pagos repetidos :
- Pago de la raya :
- Pago Contra Entrega :
- Calcula , una práctica solución de envío.
Carrito y caja
Hay 2 errores comunes aquí.
Error #11
Campos de información largos y poco prácticos en formularios
En este caso, recomiendo los siguientes pasos:
- Agrupar campos por sentido ;
- Divida los formularios extensos en pasos y pantallas . A pocas personas les gusta llenar “fichas” de información;
- Hacer uso de los poderes de los componentes de la interfaz de usuario para reducir la cantidad de campos e interacciones con ellos;
- Cree valores predeterminados basados en entradas de datos de uso frecuente o datos preparados (IP, datos de la cuenta de usuario, etc.)
- Resalte el campo que un usuario está llenando en este momento.
Los títulos de los campos de formulario siempre deben estar visibles. No se limite a resaltar los campos que faltan o que se llenaron por error. Intenta explicar los errores:
Módulos útiles de Magento 2
- Redirigir por IP :
- Pago en un solo paso :
Error #12
Carrito de compras inconveniente
Parece que nada puede salir mal cuando el cliente ha elegido el bien y ya lo ha añadido al carrito. Sin embargo, una página de carrito de compras compleja y poco práctica puede poner fin a su sesión en su sitio.
En promedio, el 70% de los compradores abandonan los carritos sin pasar por caja. Y en algunas industrias, la tasa de abandono del carrito supera el 80% . Inquietante, ¿no? Para resolver este problema, puede simplificar el carrito de compras :). Pruebe las siguientes medidas:
- Salve a los usuarios de la aritmética mental . No los obligues a hacer operaciones matemáticas en tus interfaces;
- Simplifique los pedidos y hágalo sin registro;
- Permita que los clientes se registren a través de las redes sociales . De esta manera obtendrás el mínimo de datos requerido sin molestarlos;
- Según las estadísticas, el 56 % de los usuarios no están preparados para realizar compras inmediatas. Reúnen los artículos en el carrito para proceder con el pago más tarde. Es probable que estos usuarios se distraigan. Por eso es vital mantener las mercancías en el carro hasta que regresen;
- Si los usuarios han dejado sus correos electrónicos durante el pago, puedes enviarles un recordatorio sobre la compra incompleta . Dichas notificaciones por correo electrónico son más efectivas en las primeras 12 horas después de abandonar el sitio.
Módulos útiles de Magento 2
- Pago en un solo paso ;
- Inicio de sesión sin formulario :
Recomendaciones de Magento 2 UX: resumen
Por regla general, las interfaces solo cubren las necesidades que se encuentran en la superficie.
Amplíe su enfoque. Considere por qué exactamente los usuarios necesitan esta o aquella función o información. Entonces ofrezca la solución que realmente necesitan.
En la mayoría de las interfaces, los errores son inevitables. Y si surgen, ayuda a tus usuarios a superarlos de forma rápida y sencilla.
Asegúrese de evitar estos errores comunes y tampoco deje de aprender porque UX está cambiando muy rápido a lo largo de los años. Lea esta guía de diseño de UX de Maze o cualquier otra guía de una marca reconocida y confiable para mantenerse al día con las tendencias de UX.