UX Guidelines para diseñar un e-commerce

¿Cómo acompañar y guiar la compra del usuario?

Optimiza el camino de los usuarios hacia los productos al proporcionar información clara y diferenciada del producto en todos los niveles, desde la página de inicio hasta las páginas de la lista de productos.

El año pasado, el 74% de los internautas declaramos comprar semanal o mensualmente por Internet pero para ello necesitamos comprender lo que nos vende la tienda online y encontrar el artículo que nos interese.

A veces sabemos lo que queremos y vamos directamente a buscarlo, pero otras veces, solo conocemos la necesidad que tenemos y esperamos encontrar el producto que buscamos navegando por la tienda online. Para ello es especialmente importante que las páginas de inicio, las páginas de categorías y las páginas de listado de productos estén bien definidas y nos ofrezcan información relevante o inspiración para encontrar lo que buscamos. Es decir, que nos aporten un valor añadido y una mejor experiencia de navegación.

Las páginas principales o homes son la primera presentación del comercio y la gama de productos o servicios vendidos. Las páginas de categorías y las páginas de listados de productos son páginas de nivel medio dentro de la tienda online; introducen agrupaciones de productos y elementos dentro de esas agrupaciones, respectivamente.

El camino a los productos debe diseñarse cuidadosamente para transmitir las diferencias entre las diversas categorías de productos y entre los productos individuales. Y así ayudarnos a encontrar el artículo que mejor se adapte a lo que buscamos. Por otro lado, también tenemos que diseñar para los usuarios que acceden a nuestra tienda online desde un motor de búsqueda externo y que, seguramente entrarán directamente a una página de categoría o a un producto específico.

Estas páginas de nivel intermedio pueden tener un excelente rendimiento de SEO, que es una razón más para preocuparnos por la experiencia de usuario. Además de su importancia para la navegación dentro del sitio web. Una buena práctica es hacer que la url sea legible y que, como usuarios, podamos leerla cómodamente; así como incluir la palabra clave. Lo ideal es que el enlace y el título del producto vayan en armonía.

Home: una página informativa que nos ayude a reconocer y recordar la marca

La página de inicio, o home, es nuestra presentación online, y sería el equivalente al escaparate físico de nuestro negocio.

Aunque parezca obvio, a veces olvidamos que el logotipo es nuestro aliado para ubicar y atraer a nuestros compradores. Para ello debemos colocarlo en un lugar visible: ya sea en la esquina superior izquierda, como en la mayoría de las tiendas de comercio electrónico, o en el centro del menú superior. Además, podemos combinarlo con un baseline que refuerce la identidad de marca y ayude al usuario a sumergirse en el “universo de nuestra tienda”.

Una vez presentada nuestra identidad, debemos estar seguros que comunicamos quién somos, en qué nos diferenciamos y qué vendemos, destacando las principales ofertas que tenemos y permitiendo que los usuarios comiencen a comprar. La clave es conseguir presentarnos de manera clara y concisa, pero sin saturar al usuario. Generalmente, cuantos más productos mostremos en la home menos valor tendrán. Hay que encontrar el equilibrio de querer mostrar mucho y conseguir enseñar lo principal sin llegar a una sobreexposición.

El buscador principal es otro de nuestros grandes aliados ya que nos permitirá acceder directamente a productos que ya conocemos. Debemos colocarlo en el encabezado o header de toda la tienda, con un estilo claro y destacado junto con un botón de “buscar”, en lugar de solo un pequeño icono, especialmente en la página principal. Los buscadores livesearch y autocompletables son cada día más necesarios en todo ecommerce para facilitar la experiencia de usuario.

Otro elemento esencial que estará presente en todo el proceso es el carrito de la compra.

Su función es dar una visión general del proceso de compra en curso, especificar cuántos artículos hay actualmente en el carrito y cuánto cuestan. La mayoría de las tiendas de comercio electrónico colocan el icono de carrito en la parte superior derecha de la página.

Las categorías, nuestros referentes de organización de producto

La estructuración de las categorías, así como las otras opciones de navegación que deben ser claras, con etiquetas que tengan sentido para los usuarios por sí mismas para que los usuarios podamos ser capaces de comprender rápidamente dónde está lo que buscamos y decidir dónde hacer clic.

Si tenemos espacio debemos aprovechar la barra de navegación principal para mostrar a los usuarios qué categorías de productos tenemos, en lugar de simplemente agrupar todo bajo un único enlace de tienda fácil de pasar por alto. Cuanto más desglosada/organizada sea la búsqueda más fácil será encontrar lo que buscamos y mejor experiencia de usuario ofreceremos.

A veces es difícil adivinar la lógica de agrupación que tenemos los usuarios por lo que para admitir las múltiples formas en que las personas navegan por los productos, una polijerararquía puede mejorar la capacidad de búsqueda al permitir que ciertos artículos existan en más de una categoría.

Ayuda al usuario a encontrar el producto usando subcategorías y filtros

Desde hace años, los diseñadores hemos estado muy pendientes de facilitar las compras y, para ello, de intentar que los usuarios no tengamos que hacer más de tres clicks para llegar al producto deseado. Quizás por ello hay una tendencia a evitar las páginas tradicionales de categorías de producto antes de presentar productos individuales y a aumentar las páginas con listados de productos (a los que además, aplicamos filtros para afinar la búsqueda).

Esta tendencia de diseño tiende a destacar las subcategorías disponibles en un espacio separado de otros filtros más comunes como tallas, es decir, en bloques visualmente diferentes. Esta práctica aumenta la capacidad de detección de las subcategorías, es decir, dirige nuestra mirada y nos ayuda a seguir navegando hacia el producto que nos interesa, evitando así la sobrecarga de opciones.

Por supuesto, la organización y la toma de decisiones que hagamos será en base al inventario que tengamos. Algunos sitios como Target muestran una página de categorías más tradicional con links a las subcategorías disponibles y, en la parte inferior, los filtros y los productos individualmente con acceso directo, minimizando así el número de clicks.

Por otro lado, otros sitios como Zalando prefieren una presentación más rápida del producto final, con navegación de subcategoría en el lateral y filtros en la parte superior del listado de productos.

Diferenciar la información del producto desde el listado.

Otro cambio importante a la hora de diseñar las páginas de listado de productos es la cantidad de información que vamos a mostrar. Cada vez los usuarios somos más exigentes y estamos más cómodos navegando por la web. Antes de realizar la compra nos gusta comparar el producto por lo que esperamos tener una mayor cantidad de información.

La información debe estar bien organizada, ya que nos permite tomar decisiones informadas sobre los productos que nos interesan sin visitar cada página detalle. Esto es especialmente importante en navegadores móviles, donde cada clic cuenta, sobre todo si estamos sin wifi o si la conexión a Internet es débil.

Entendemos como información útil básica:

Nombres concisos que muestren las características importantes y significativas del producto.
Fotos lo suficientemente grandes como para identificar y comparar un producto con otros.
Indicación de variedades básicas como otros colores, tallas disponibles, etc.
Precio. Muchas veces es el factor decisivo.

Algunos sitios van más allá y aportan más información extra, como por ejemplo:

Identificadores de novedades, ofertas, etc.
Información de disponibilidad (stock)
Enlace a una herramienta de vista rápida para ver una breve descripción del producto y otros detalles sin cargar una página nueva.
Imágenes alternativas del producto tipo carrusel

Conclusión

Es importante ponernos en la piel del usuario y pensar en cómo nos gustaría que se nos mostrara la información, no sólo gráficamente sino también estructuralmente.

La navegación de nuestra tienda debe ser fácil, intuitiva y muy bien organizada para que los usuarios puedan entender claramente las opciones disponibles, con un gasto mínimo de tiempo y esfuerzo y así contribuir en gran medida a una buena usabilidad online. Algunas de las nuevas tendencias focalizan la atención en reducir el número de clicks, mostrando más información del producto fuera de la ficha y desarrollando un completo sistema de filtros que nos facilite encontrar lo que buscamos y realizar la compra final de la manera más sencilla.