8 claves de UI para catálogos que convierten

Por qué la UI de catálogo define ventas

Un catálogo mal diseñado no es solo un problema estético. Es dinero que se va. Cuando alguien entra a una tienda online y no encuentra lo que busca en los primeros segundos, cierra la pestaña y busca otra opción. Así de simple, así de brutal.

La UI de catálogo es el espacio donde se toman las decisiones de compra: grillas que muestran los productos, filtros que reducen el universo de opciones y fichas que dan el último empujón antes del carrito. Si alguna de esas tres piezas falla, la cadena se rompe.

Lo que sigue no es teoría general. Es un conjunto de criterios que aplicamos con clientes de e-commerce para que sus catálogos dejen de ser vitrinas confusas y empiecen a funcionar como verdaderos vendedores digitales.

Grillas: columnas, densidad y jerarquía visual

La grilla es la vista panorámica del catálogo. El usuario la usa para explorar, comparar y decidir qué ítem merece más atención. Por eso, cada decisión de diseño en este nivel tiene consecuencias directas en la navegación.

• Cantidad de columnas: En desktop, tres o cuatro columnas suelen ser el punto de equilibrio. Con dos, la grilla parece vacía; con cinco o más, las imágenes quedan demasiado pequeñas para apreciar el producto. En mobile, una o dos columnas según la complejidad visual del ítem.
• Espacio entre tarjetas: El gap entre cards no es decorativo. Es el respiro que le da al ojo la capacidad de separar un producto de otro. Un gap inconsistente genera sensación de desorden.
• Jerarquía dentro de cada card: Imagen primero, nombre del producto, precio y —si aplica— el CTA secundario. Ese orden no es caprichoso: sigue el recorrido visual natural de arriba hacia abajo.
• Hover states: En desktop, un hover con información adicional (color alternativo, botón de agregar, galería rápida) puede acelerar la decisión sin obligar al usuario a entrar a la ficha.
• Altura de las cards: Si las imágenes tienen proporciones distintas, la grilla se rompe visualmente. Establecé un ratio fijo para las fotos de producto y cumplilo en todas las SKUs.

Filtros que funcionan de verdad

Los filtros son el motor de búsqueda contextual del catálogo. Un sistema bien diseñado reduce la carga cognitiva: en lugar de scrollear cincuenta productos, el usuario aplica dos criterios y llega a diez. Ahí la conversión mejora notablemente.

El primer error clásico es mostrar demasiados filtros al mismo tiempo. Si el panel lateral tiene veinte opciones colapsadas, la mayoría de los usuarios lo ignora. La solución es priorizar: ¿cuáles son los tres o cuatro atributos que más influyen en la decisión de compra en tu categoría? Esos van primero, visibles y activos por defecto.

El segundo error es no indicar cuántos resultados va a devolver cada filtro antes de aplicarlo. Un filtro que muestra cero resultados al hacer clic genera frustración innecesaria. Lo ideal es que los valores sin stock o sin coincidencias se deshabiliten visualmente, no que desaparezcan.

Otros criterios que marcan diferencia:

• Permitir selección múltiple dentro de un mismo atributo (varios colores, varios talles).
• Mostrar los filtros activos como tags removibles en la parte superior del listado.
• Incluir un botón de limpiar filtros visible y accesible en todo momento.
• En mobile, usar un drawer o modal para los filtros, no un panel lateral que ocupa espacio de pantalla.

Fichas de producto: lo que no puede faltar

La ficha es el momento de la verdad. El usuario ya eligió ese ítem sobre todos los demás y ahora necesita confirmación: que tomó la decisión correcta, que el producto es lo que parece, que el proceso de compra no va a ser un dolor de cabeza.

Una ficha bien construida tiene estos elementos en orden de prioridad:

• Galería de imágenes: Múltiples ángulos, zoom funcional y —cuando aplica— video o vista 360. La imagen reemplaza al tacto en e-commerce.
• Nombre y subtítulo claro: Sin ambigüedades. El usuario tiene que entender exactamente qué está comprando antes de leer una sola línea de descripción.
• Precio y condiciones: Precio final visible, sin asteriscos que lleven a una nota al pie. Si hay cuotas sin interés, ese dato va junto al precio, no escondido.
• Selector de variantes: Colores, talles, capacidades. Con indicación clara de stock disponible por variante. Un talle agotado se tacha o se marca, nunca desaparece.
• CTA principal: Un botón de agregar al carrito que no compita visualmente con nada más en esa sección.
• Descripción del producto: Breve y escaneable, con bullets para los atributos técnicos. Los párrafos largos en fichas tienen una tasa de lectura muy baja.
• Información de envío y devolución: Cerca del CTA, no al final de la página. La incertidumbre sobre el envío es una de las razones más frecuentes de abandono antes del checkout.

Mobile first: la realidad del mercado argentino

En Argentina, la mayor parte del tráfico de e-commerce llega desde dispositivos móviles. No es una tendencia emergente: es la normalidad desde hace varios años. Diseñar el catálogo pensando primero en desktop es diseñar para una minoría.

Mobile first no significa hacer una versión reducida de la pantalla grande. Significa tomar decisiones desde la restricción: ¿qué información es imprescindible en una pantalla de seis pulgadas? ¿Qué interacciones funcionan con el pulgar? ¿Qué puede diferirse para una interacción secundaria? En Xulum nos pasó que proyectos que se veían impecables en desktop perdían conversiones en mobile por detalles que parecían menores: un botón demasiado chico, un filtro que requería dos swipes para aparecer.

Algunos puntos críticos para catálogos mobile en el mercado local:

• Los filtros deben ser accesibles con un toque, no con varios swipes hacia arriba.
• Los botones de acción tienen que tener un área de toque suficiente. Dedos grandes cometen errores en botones chicos.
• Las imágenes de producto deben cargar rápido incluso en conexiones variables. Compresión inteligente y lazy loading son obligatorios, no opcionales.
• El precio y el CTA tienen que ser visibles sin scroll en la ficha. En mobile, lo que no aparece en el primer pantallazo muchas veces no se ve nunca.

Estados vacíos y errores: oportunidad, no problema

Cuando un usuario aplica filtros y no hay resultados, la mayoría de los e-commerce muestran un mensaje genérico y se quedan ahí. Eso es una oportunidad desperdiciada.

Un estado vacío bien diseñado mantiene al usuario dentro del proceso de compra. En lugar de un 'sin resultados' frío, puede incluir:

• Una explicación breve de por qué no hay resultados.
• Un botón para limpiar los filtros activos y volver a una vista amplia.
• Sugerencias de categorías relacionadas o productos populares que podrían interesarle.
• Un buscador visible si el catálogo es grande.

Lo mismo aplica para los errores de carga. Una pantalla rota sin explicación genera desconfianza. Un mensaje claro con una acción sugerida —recargar la página o volver al inicio— le devuelve el control al usuario y reduce el abandono.

Consistencia visual y sistema de diseño

Un catálogo que cambia de estilo entre categorías genera ruido cognitivo. El usuario tiene que aprender a leer la interfaz de nuevo cada vez que navega a una sección diferente, y eso tiene un costo real en atención y en confianza.

La consistencia no es uniformidad aburrida. Es que los mismos patrones de interacción, los mismos colores para los estados activos y los mismos iconos para las acciones aparezcan en toda la experiencia. Eso se logra con un sistema de diseño, incluso uno liviano. Lo que vemos seguido en proyectos de clientes es que cuando el catálogo crece sin esa base, cada nueva categoría o campaña introduce variaciones que terminan fragmentando la experiencia.

Para e-commerce en Argentina, donde muchos proyectos nacen pequeños y escalan rápido, tener una base de componentes documentados desde el principio ahorra tiempo y errores. Un sistema de diseño liviano con colores, botones y tipografía definidos puede ser el punto de partida para que el catálogo crezca sin perder coherencia. También podés revisar nuestra guía general sobre diseño de interfaces UI para productos digitales si querés un marco más amplio para tomar estas decisiones.

Cómo medir y mejorar la UI de tu catálogo

Diseñar bien es la mitad del trabajo. La otra mitad es entender qué está pasando con usuarios reales una vez que el catálogo está en producción. Sin datos cualitativos y cuantitativos, las mejoras son intuición, no decisiones.

Algunas métricas y herramientas que aplican directamente a la UI de catálogo:

• Tasa de rebote por categoría: Si una categoría específica tiene un rebote muy alto, puede ser un problema de relevancia del contenido, de carga lenta o de una grilla que desoriente.
• Profundidad de scroll: Si la mayoría de los usuarios no llega al segundo pantallazo del listado, algo no está funcionando: o la grilla no atrae, o los filtros no ayudan a encontrar lo que se busca.
• Click en filtros: ¿Qué filtros usa realmente la gente? Si hay filtros que nadie toca, sobran y agregan ruido a la interfaz.
• Mapas de calor en fichas: Herramientas como Hotjar o Microsoft Clarity muestran dónde hace clic el usuario y hasta dónde scrollea. Con eso sabés si el CTA está en la zona correcta.
• Tests A/B: Para decisiones como el layout de grilla o la posición del precio, un test con tráfico real da respuestas que ningún benchmark externo puede dar.

En Xulum trabajamos con equipos de e-commerce de distintas industrias en Argentina para identificar estos puntos de fricción y proponer mejoras que tengan impacto real, no solo visual.