15 lineamientos de diseño UX para tu eCommerce según Baymard Institute

El User Experience (UX), en español Experiencia de Usuario, es fundamental en el comercio electrónico, ya que puede marcar la diferencia entre que un cliente complete una compra o abandone un sitio web.

¿Qué es diseño UX?

El diseño UX se refiere al proceso de diseñar productos, sistemas o interfaces digitales con el objetivo de ofrecer a los usuarios una experiencia positiva y significativa al interactuar con ellos.

El enfoque principal del diseño UX es comprender las necesidades, expectativas y deseos de los usuarios para crear productos que sean útiles, accesibles y agradables de usar.

¿Por qué incluir diseño UX en tu eCommerce?

Para empezar, el UX impacta directamente en las conversiones de visitantes a clientes. Una navegación intuitiva, un diseño atractivo y una experiencia fluida de compra aumentan significativamente la probabilidad de que los usuarios finalicen sus transacciones, lo que se traduce en un aumento de los ingresos.

La retención de clientes también está estrechamente ligada al UX. Una experiencia positiva no solo atrae a nuevos clientes, sino que también fideliza a los existentes. Los clientes satisfechos son más propensos a regresar y realizar compras adicionales, contribuyendo así al crecimiento sostenible del eCommerce a lo largo del tiempo.

El abandono del carrito de compra es un problema común en el comercio electrónico, pero un buen UX puede ayudar a reducir esta tasa. Cuando los usuarios encuentran obstáculos o complicaciones en el proceso de compra, es más probable que abandonen sus carritos antes de finalizar la transacción.

Por lo tanto, una experiencia de usuario optimizada puede tener un impacto directo positivo en las tasas de conversión y ventas.

La confianza es otro factor crítico. Los usuarios necesitan sentirse seguros al proporcionar información personal y financiera en línea. Un diseño que transmita seguridad, junto con políticas de privacidad y opciones de pago seguras, contribuye a generar confianza en los visitantes, lo que puede traducirse en una mayor conversión de visitantes en clientes.

En un mercado competitivo, el UX es clave.

Un eCommerce que se destaca por su facilidad de uso y comodidad puede ganar la preferencia de los consumidores sobre la competencia. Además, la reputación de la marca está estrechamente relacionada con la calidad de la experiencia que ofrece a los usuarios. Un UX positivo mejora la percepción de la marca y promueve el boca en boca positivo, lo que puede aumentar la visibilidad y la lealtad de los clientes.

La accesibilidad es también un aspecto importante del UX. Garantizar que el sitio sea accesible para todas las personas, incluidas aquellas con discapacidades, amplía la base de clientes y cumple con las regulaciones legales, reflejando un compromiso genuino con la inclusión.

Baymard Institute

Baymard Institute es una organización de investigación y consultoría especializada en mejorar la experiencia de usuario en línea, especialmente en el ámbito del comercio electrónico. Fundado en 2009, Baymard Institute se dedica a investigar y analizar las mejores prácticas de diseño de sitios web de eCommerce, así como a evaluar la usabilidad y la eficacia de diversas interfaces de usuario en línea.

Sus principales actividades y servicios ofrecidos incluyen:

1. Investigación y pruebas de usuario: Realizan extensas pruebas de usuarios en las tiendas en línea líderes para identificar problemas comunes, obstáculos en la experiencia de usuario y oportunidades de mejora. Esto se hace a través de evaluaciones detalladas y análisis exhaustivos.

2. Informes y estudios: Publican informes y estudios basados en datos que ofrecen análisis y recomendaciones concretas sobre cómo mejorar la experiencia de usuario en sitios web de comercio electrónico. Estos informes son ampliamente respetados en la industria y se utilizan como recursos de referencia.

3. Benchmarks y comparativas: Baymard Institute compara y clasifica a las principales tiendas en línea en función de su rendimiento en áreas clave de la experiencia de usuario. Esto proporciona a las empresas una referencia para evaluar su propio desempeño y competir en el mercado.

4. Conferencias y seminarios web: Organizan conferencias y seminarios web para compartir sus hallazgos y conocimientos con profesionales de comercio electrónico, diseñadores web y otros interesados en la mejora de su UX.

5. Consultoría y asesoramiento: Ofrecen servicios de consultoría personalizada para ayudar a las empresas a implementar las mejores prácticas de UX en sus sitios web de comercio electrónico, utilizando los datos y la investigación recopilados.

Baymard Institute ha creado una serie de lineamientos centrados en la optimización de la experiencia de usuario, actualmente suman 680. Entre ellos se dividen por tipos de industrias, plataformas, temas y objetivos.

Estos son algunos de los lineamientos más relevantes para tu eCommerce.

15 lineamientos de Baymard Institute

Lineamiento #300

Destaca en el navbar la selección en la que se encuentra el usuario

Para los clientes es importante conocer en qué sección de tu eCommerce se encuentran, especialmente si llegaron directamente a una página de producto desde un enlace externo.

Cuando los usuarios no saben dónde se encuentran dentro de tu sitio, tienen menos información para decidir a dónde avanzar a continuación. Esto los hace sentir perdidos y disminuye su confianza para navegar.

Utilizar elementos gráficos como bloques de color, líneas de resaltado o cambios en la tipografía en el menú principal ayudarán a que tus clientes se puedan ubicar rápidamente en tu eCommerce.

Lineamiento #309

Utiliza thumbnails para representar los contenidos de las subcategorías

Los apoyos visuales mejoran la experiencia de búsqueda de tus usuarios. Las personas tienden a confundirse con las subcategorías que solo tienen texto, ya que al verlas rápidamente ven solo texto amontonado.

Las miniaturas en las subcategorías ayudan a identificar el contenido más rápido y pueden ser útiles para los clientes que no están familiarizados con el catálogo de productos.

Lineamiento #356

Distingue de forma clara las sugerencias de búsqueda de las sugerencias de productos

Las sugerencias de búsqueda son recomendaciones de palabras para completar la búsqueda de un usuario. Por ejemplo, si el usuario escribe “tenis”, se le puede sugerir buscar “tenis para correr”.

Por otro lado, las sugerencias de producto son recomendaciones de artículos en inventario que van acorde a lo que está escribiendo el usuario. Si el usuario está buscando “tenis”, se le pueden mostrar distintas opciones de este tipo de producto.

Estudios de UX Research han demostrado que cuando los usuarios usan el buscador de un sitio web, esperan recibir solo sugerencias de búsqueda, y no sugerencias de productos. Aun así, es válido mostrar ambos tipos de sugerencias. Solo hay que separarlas claramente a través del uso de columnas, secciones, espaciados, encabezados y miniaturas.

Lineamiento #394

Considera las temporalidades en los resultados de búsquedas de productos

Tu motor de búsqueda debe tener una comprensión básica de qué productos están "en temporada" para que los productos relevantes para la temporada puedan clasificarse más alto.

Tiene sentido que los regalos con chocolates aparezcan al inicio de los resultados en las fechas previas a San Valentín. Sin embargo, si al buscar chamarras en invierno aparecen solo opciones frescas, el usuario no sabrá identificar si alguno de los resultados es relevante para él.

Lineamiento #402

Proporciona sugerencias de filtros relevantes de acuerdo con la búsqueda inicial del usuario

Ofrece filtros de producto relevantes para que los usuarios puedan refinar sus resultados de búsqueda y enfocarse en lo que les interesa. Es importante que la lógica para determinar los filtros a mostrar considere la relevancia para la búsqueda del usuario, en lugar de basarse solo en la cantidad de resultados en categorías específicas.

Por ejemplo, al buscar una mesa, los filtros de conectividad y tipo de foco no son relevantes. En cambio, al buscar botas, las características y el tipo de cierre son puntos clave para el usuario.

Lineamiento #409

Implementa siempre filtros específicos a las categorías de productos

Los filtros de productos son clave para entregar resultados relevantes a tus clientes. Muchos eCommerce tienen numerosos tipos de productos con atributos que son específicos solo para ese tipo, como "RAM" para laptop, o "Tamaño de rueda" para bicicletas, o “Pulgadas” para televisores.

Sin filtros específicos de categoría basados en estos atributos, los usuarios no podrán restringir las listas de productos para que solo contengan artículos con especificaciones que sean adecuadas, y tendrán que navegar a través de listas que contienen potencialmente muchos artículos irrelevantes.

Lineamiento #510

Muestra toda la variedad de tus productos en los resultados de la búsqueda

La forma en la que aparecen los resultados de búsqueda de tu sitio afecta la percepción que los usuarios tienen sobre tu inventario.

Las clasificaciones de productos predeterminadas, si bien son útiles, a menudo no representan la diversidad disponible de tu catálogo de productos.

Para mostrar toda la variedad de productos y evitar que tus clientes se vayan puedes:

1. Señalar el número de productos encontrados (ej. "Sillas de escritorio (147)").

2. Mostrar distintos estilos, tamaños y colores del producto buscado.

3. Mostrar categorías del producto buscado (ej. "sillas gamer", "sillas home office", "sillas oficina", "sillas para juntas").

4. Organizar los productos por relevancia.

Lineamiento #558

Crea un formulario más sencillo y cómodo de llenar con un solo campo para el número de teléfono

Si durante el proceso de registro a tu eCommerce solicitas un número de teléfono y un teléfono móvil puedes causar confusión. Ingresar dos números hace que los usuarios se pregunten: ¿cuál es la diferencia?, ¿para qué son necesarios dos números?, ¿este proceso vale la pena?, ¿y si no tengo teléfono de casa?

Contar con formularios sencillos con un solo número de teléfono evitará abandonos en el proceso y aumentará la posibilidad de que los usuarios completen su registro.

Lineamiento #787

Muestra reseñas y preguntas frecuentes respondidas por la marca y otros usuarios

El 49% de las tiendas en línea no incluyen ningún tipo de preguntas y respuestas, lo que deja a los usuarios con una fuente menos de información.

Los clientes entran al contenido de preguntas y respuestas por una de dos razones: para obtener una respuesta a una pregunta específica o para obtener más información sobre el producto.

Por ello, los usuarios tienden a buscar información del producto relacionada a experiencias previas con productos similares. Si bien las reseñas son el recurso más popular, las secciones de preguntas y respuestas también sirven como una herramienta valiosa para responder las dudas del cliente.

Lineamiento #852

Respeta los filtros de búsqueda del usuario en los resultados de búsqueda y página de producto

Cuando los usuarios aplican filtros, de color o tamaño, esperan que la lista cambie para mostrar solo los productos que coinciden con la variación seleccionada. Respetar los filtros seleccionados por el usuario en el resultado de búsquedas y las páginas de productos mejorará la experiencia de compra. 

Un comprador que ve una lista de suéteres y hace clic en el filtro "rosa" esperará que todos los elementos de la lista se actualicen para mostrar solo suéteres rosa. Preseleccionar de qué color quieres un producto en la búsqueda y encontrarte con resultados diferentes puede resultar frustrante.

Lineamiento #889

Avisa al usuario si tiene una cuenta existente en el proceso de recuperación de contraseña

Los problemas al restablecer la contraseña de la cuenta de un usuario provocan una tasa de abandono promedio del 18.75%. En algunos casos, la causa es que la dirección de correo está mal escrita o que se utiliza un correo que no está registrado para ese sitio. Para evitar este problema, cuando los usuarios ingresen un correo para restablecer la contraseña de una cuenta que no existe, diseña tu eCommerce para que aparezca un mensaje que indique que no hay una cuenta asociada con esa dirección de correo electrónico.

Lineamiento #907

Muestra el rastreo, estatus e información completa del envío.

52% de los eCommerce obligan a sus usuarios a dar seguimiento al envío de sus pedidos en el sitio web de un tercero.

Después de una compra, los clientes quieren conocer de forma sencilla el estado de su pedido y la fecha de entrega. Estos datos les brindan certeza de cuándo y dónde van a recibir su pedido.

Lineamiento #996:

Marca una diferencia entre las categorías principales y secundarias a través del diseño en el menú para dispositivos móviles

Un error común en el diseño móvil es darle el mismo peso visual a todas las categorías en el menú como se podría hacer en el sitio para escritorio.

Los usuarios entienden este listado como un montón de texto, en lugar de categorías definidas.

Implementa cambios en el diseño como líneas de separación, íconos, uso de negritas y distintos tamaños en la letra para darle mayor peso a las categorías que son más importantes para tu usuario.

Lineamiento #1001

Ofrece sugerencias de autocompletado para términos de búsqueda y consultas con errores ortográficos

En casos de errores o typos, el buscador de un eCommerce debe mostrar resultados en consultas con errores ortográficos. El autocompletado juega un papel clave en las búsquedas.

Las sugerencias inesperadas debido a errores menores pueden hacer que los usuarios cambien sus estrategias de búsqueda de productos o en el peor de los casos, que abandonen el sitio pensando que no tiene lo que están buscando.

De acuerdo con el motor de búsqueda y la implementación de la herramienta de autocompletado, lo más recomendable es hacer supervisiones de los registros de búsqueda. Esto ayuda a conocer las consultas mal escritas de los usuarios y priorizar los esfuerzos de mejora para sugerencias de autocompletado.

Lineamiento #2151

Usa botones o campos de texto abiertos para agregar o quitar productos.

Modificar la cantidad de artículos en el carrito debe ser una tarea simple y directa. Los campos de texto y los selectores de cantidad desplegables son propensos a errores y pueden ralentizar el proceso de actualización del carrito de los usuarios.

Por esta razón se recomienda usar botones o un híbrido entre campo de texto y botones para actualizar las cantidades del carrito. El carrito y el resumen del pedido deben actualizarse inmediatamente después de que el usuario cambia la cantidad para que pueda ver los productos y el costo total de su pedido.

En resumen, el diseño UX es esencial para una eCommerce porque afecta directamente a la conversión, la retención de clientes, la reputación de la marca y la competitividad en el mercado. Proporcionar a los usuarios una experiencia fluida y agradable es clave para el éxito a largo plazo de cualquier tienda en línea. ¿Estás listo para implementarlo?