Cómo diseñar un ecommerce: categorías, filtros y fichas de producto

En un ecommerce, la calidad del diseño depende en gran medida de cómo está organizado el catálogo.

El usuario debe poder encontrar un producto concreto, comparar alternativas, entender sus variantes y completar la compra con confianza.

Para conseguirlo, la arquitectura tiene que responder a la forma en que los clientes buscan y evalúan los productos, no a la estructura interna del almacén o del equipo.

Por eso, antes de diseñar la interfaz, hay que entender el catálogo, decidir cómo se organizará y definir qué información necesita el usuario en cada momento. Categorías, filtros, resultados de búsqueda, tarjetas y fichas de producto forman parte de un mismo sistema y deben diseñarse de manera coordinada.

Cuando estas piezas funcionan bien, el usuario puede orientarse, quedarse con pocas opciones y decidir con menos esfuerzo. Cuando se diseñan por separado, el catálogo se vuelve confuso aunque cada pantalla resulte visualmente correcta.

En este artículo, vamos a ver cómo organizar el catálogo para que el usuario pueda encontrar, comparar y evaluar productos.

Empieza por comprender el catálogo

Antes de diseñar tarjetas, categorías o fichas, necesitas conocer bien el contenido con el que vas a trabajar.

No basta con saber cuántos productos hay. También hay que entender qué diferencias existen entre ellos, cómo los buscan los clientes, qué atributos utilizan para comparar y qué información puede cambiar con frecuencia.

Un catálogo de veinte productos no necesita la misma estructura que uno de veinte mil. Tampoco se organiza igual una tienda de moda que una de componentes técnicos, alimentación, mobiliario o productos profesionales.

En una tienda pequeña, el usuario puede explorar todo el catálogo con pocas categorías. Cuando el volumen crece, necesita más formas de orientarse: subcategorías, filtros, búsqueda, comparaciones o recomendaciones.

También conviene identificar qué productos tienen variantes y cómo se gestionan. Una camiseta puede cambiar de talla y color. Un ordenador puede tener distintas configuraciones. Un mueble puede ofrecer varios acabados y medidas. Cada tipo de variante modifica la ficha, la disponibilidad y, en algunos casos, el precio o la imagen.

Otro aspecto importante es saber qué información cambia con frecuencia. El stock, los plazos de entrega, las promociones o los precios pueden actualizarse constantemente. Las descripciones, materiales o especificaciones suelen ser más estables.

Esta diferencia afecta a cómo se modela el contenido y a qué datos deben aparecer de forma automática en todas las plantillas.

También hay que conocer las relaciones entre productos. Algunos se compran juntos, otros son alternativas y otros funcionan como accesorios o repuestos. Estas relaciones pueden alimentar recomendaciones, comparativas o bloques de «También te puede interesar».

Por último, conviene anticipar qué categorías crecerán y qué restricciones existen en envío o disponibilidad. Un producto voluminoso, perecedero o fabricado bajo pedido necesita comunicar condiciones distintas a uno que puede enviarse de inmediato.

Comprender el catálogo evita diseñar una estructura que funciona bien con los primeros productos, pero se rompe en cuanto aumenta la oferta.

Categorías y filtros cumplen funciones distintas

Categorías y filtros ayudan a recorrer el catálogo, pero resuelven necesidades diferentes.

Las categorías ofrecen entradas claras y relativamente estables. Los filtros permiten reducir los resultados dentro de esas categorías.

Cuando se confunden, la navegación se vuelve demasiado profunda o el usuario tiene dificultades para saber por dónde empezar.

Las categorías ofrecen una entrada clara al catálogo

Las categorías agrupan productos que comparten una relación reconocible para el cliente.

Suelen aparecer en la navegación principal, en menús desplegables, en la portada o dentro de otras páginas de categoría. Su función consiste en ayudar al usuario a elegir una dirección general.

Una buena categoría utiliza términos que el cliente entiende y representa un conjunto suficientemente amplio como para justificar una página propia.

Por ejemplo, una tienda de material deportivo puede organizarse por tipo de actividad, como running, ciclismo o natación. Dentro de cada categoría puede haber subcategorías por producto: zapatillas, ropa, accesorios o nutrición.

La decisión depende de cómo buscan los clientes y de cuánto contenido hay en cada grupo.

Una categoría no debería existir únicamente porque coincide con una sección interna del inventario. Si el usuario no reconoce el término o no espera encontrar ahí esos productos, la estructura le obliga a aprender la organización del negocio.

También conviene evitar categorías con uno o dos productos, salvo que tengan una función estratégica clara. Cada categoría añade una decisión a la navegación y una página que mantener.

Una buena categoría puede crecer sin perder claridad. Si nace demasiado específica, cualquier ampliación del catálogo puede obligar a crear más niveles o reorganizar toda la estructura.

Los filtros ayudan a reducir las opciones

Los filtros permiten acotar un listado según atributos que intervienen en la decisión.

Pueden ser talla, color, precio, marca, material, uso, compatibilidad, disponibilidad o cualquier otra característica que ayude a descartar productos.

Su utilidad depende del contexto.

En una tienda de ropa, la talla y el color suelen ser decisivos. En un catálogo de repuestos, la compatibilidad con un modelo concreto puede tener más importancia que la marca. En una tienda de alimentación, pueden resultar útiles los alérgenos, el tipo de dieta o el formato.

No todos los datos del producto necesitan convertirse en filtro.

Un atributo tiene sentido cuando el usuario lo conoce, lo utiliza para decidir y permite reducir de forma significativa los resultados. También debe estar definido de manera consistente en todo el catálogo.

Si algunos productos utilizan «negro» y otros «carbón», «antracita» o «grafito» para referirse al mismo color, el filtro dejará de funcionar como espera el usuario.

Qué ocurre cuando se confunden

Cuando se crean demasiadas categorías para representar atributos, la navegación se vuelve profunda y repetitiva.

Imagina una tienda de camisetas que crea categorías independientes para «camisetas negras», «camisetas blancas», «camisetas de manga corta» y «camisetas de algodón». El mismo producto puede aparecer en varias ramas y el usuario tiene que recorrer estructuras distintas para combinar criterios que podrían resolverse con filtros.

El problema contrario aparece cuando todo se deja en manos del filtrado.

Si una tienda con miles de productos muestra un único listado general y espera que el usuario construya su recorrido mediante filtros, el catálogo pierde entradas claras. La persona debe saber desde el principio qué atributos quiere aplicar y puede sentirse desorientada antes de empezar.

Las categorías sitúan. Los filtros afinan.

Cómo organizar las categorías

Las categorías deben responder a la forma en que compra la gente, no reproducir cómo está organizado internamente el negocio.

La estructura del almacén, las familias de producto de un proveedor o los códigos que utiliza el equipo pueden resultar útiles para gestionar el inventario, pero el cliente no tiene por qué conocerlos. Cuando la navegación copia esa organización interna, obliga al usuario a aprender cómo piensa la empresa antes de poder encontrar lo que busca.

Una persona puede empezar su recorrido por el tipo de producto, pero también por el uso que le dará, el problema que quiere resolver, la persona para quien compra o el momento en el que necesita utilizarlo. La clasificación adecuada depende del catálogo y del modelo mental del público.

Utiliza el lenguaje del cliente

La terminología interna del negocio no siempre coincide con las palabras que utiliza el usuario.

Una empresa puede hablar de familias técnicas, gamas o colecciones con nombres propios. El cliente puede buscar por función, material, compatibilidad, estilo o necesidad. Si la navegación utiliza términos que solo entiende el equipo, las categorías dejarán de servir como orientación.

Para descubrir cómo buscan las personas, conviene revisar las consultas que escriben en el buscador interno, las preguntas que recibe atención al cliente y las expresiones que utilizan en formularios, reseñas o conversaciones comerciales. Los datos de ventas también ayudan a reconocer qué grupos de productos tienen más peso y cuáles suelen compararse o comprarse juntos.

La investigación de palabras clave aporta otra perspectiva: muestra cómo se formula la demanda fuera de la tienda. Las entrevistas, el card sorting y las pruebas de árbol permiten comprobar si los usuarios entienden la organización propuesta y saben dónde buscarían cada producto.

No hace falta aplicar todos estos métodos en cada proyecto. Lo importante es contrastar la estructura con el comportamiento y el lenguaje de los clientes, en lugar de decidirla únicamente desde dentro del negocio.

Evita profundidades innecesarias

Cada nivel adicional de navegación obliga al usuario a tomar otra decisión.

Una jerarquía muy profunda puede parecer ordenada sobre el papel, pero hacer que encontrar un producto resulte lento. Si una persona tiene que atravesar varias categorías con nombres parecidos antes de llegar a un listado útil, la estructura está trasladando al usuario una complejidad que debería resolver el sistema.

No todos los grupos de productos necesitan convertirse en una categoría visible. Algunos funcionan mejor como filtros, atributos o accesos destacados dentro de una categoría más amplia.

También conviene revisar cuántos productos contiene cada nivel. Una subcategoría con uno o dos artículos puede fragmentar el catálogo sin aportar una decisión útil. En el extremo contrario, una categoría con cientos de productos muy diferentes puede necesitar una división adicional para que el usuario pueda orientarse antes de aplicar filtros.

La profundidad adecuada depende del volumen, de la variedad del catálogo y de cómo busca el cliente. No existe un número universal de niveles, pero cada uno debería cumplir una función reconocible.

Diseña páginas de categoría útiles

Una categoría no debería limitarse a ser una clasificación administrativa. Su página tiene que ayudar al usuario a entender qué encontrará dentro y empezar a explorar.

Puede incluir una introducción breve, accesos a subcategorías, filtros, opciones de ordenación, número de resultados y el listado de productos. También puede incorporar contenido de ayuda cuando facilite la elección, por ejemplo una explicación de las diferencias entre varias gamas o una guía para identificar el producto adecuado.

La prioridad debe seguir estando en el catálogo. Un texto demasiado largo, una imagen promocional enorme o varios bloques editoriales antes del listado pueden desplazar los productos y retrasar la tarea principal.

Las subcategorías también deben presentarse de acuerdo con su número e importancia. Si son pocas y claramente distintas, pueden mostrarse mediante tarjetas visuales. Cuando hay muchas, quizá resulte más útil utilizar una lista compacta que permita escanearlas con rapidez.

Hay que contemplar además qué ocurre cuando una categoría tiene pocos resultados o se queda vacía. Mantener publicada una página sin productos y sin una alternativa útil genera frustración. Según el caso, puede convenir retirarla de la navegación, redirigirla, explicar la falta de disponibilidad o conducir hacia categorías relacionadas.

La web puede tener planificada una estructura futura, pero el usuario solo debería encontrar categorías que ya cumplen una función. Publicar secciones vacías o mensajes de «Próximamente» le obliga a entrar en páginas que todavía no ofrecen nada.

Cómo diseñar los filtros

Un sistema de filtros útil ayuda a reducir la carga de decisión. Uno mal planteado añade más opciones de las que elimina.

Prioriza los atributos que ayudan a decidir

Añadir muchos filtros no mejora necesariamente la experiencia.

Un filtro tiene sentido cuando cumple varias condiciones:

• El usuario conoce y comprende ese atributo.
• El atributo diferencia de verdad los productos.
• Aplicarlo reduce de forma útil los resultados.
• Los valores están definidos con coherencia en el catálogo.

Si un filtro contiene decenas de opciones poco reconocibles o apenas modifica el listado, probablemente añade ruido.

También conviene ordenar los filtros según su importancia. Los atributos más utilizados o decisivos deberían aparecer antes.

En algunos catálogos, el precio es un criterio principal. En otros, la compatibilidad, el tamaño o la disponibilidad pesan más. El orden no debería copiarse de otra tienda sin revisar cómo compran los usuarios de ese negocio.

Muestra el estado del filtrado

El usuario debe saber qué filtros ha aplicado y cómo afectan a los resultados.

Los filtros activos pueden mostrarse como etiquetas visibles sobre el listado. Esto permite comprender por qué aparecen determinados productos y retirar una condición sin volver a abrir todo el panel.

También conviene indicar cuántos resultados quedan. Si el número cambia después de aplicar un filtro, el usuario puede valorar si necesita afinar más o ampliar la selección.

La opción de «Limpiar filtros» resulta útil cuando hay varias condiciones activas, pero no debería sustituir la posibilidad de eliminar cada una por separado.

El filtrado debe conservarse mientras el usuario consulta un producto y vuelve al listado. Perder todos los filtros después de visitar una ficha obliga a repetir el trabajo y rompe la exploración.

Diseña el estado sin resultados

Una combinación de filtros puede dejar el listado vacío.

La interfaz no debería limitarse a mostrar «No hay resultados».

Conviene explicar qué condiciones están restringiendo la búsqueda y facilitar su retirada. También puede sugerir categorías relacionadas, productos similares o una combinación más amplia.

Cuando tenga sentido para el negocio, puede ofrecerse un aviso de reposición o una forma de contactar para consultar disponibilidad.

El objetivo es ayudar a continuar, no dejar al usuario en un callejón sin salida.

También conviene evitar mensajes que responsabilicen a la persona, como «Tu búsqueda es demasiado específica». La interfaz ha permitido aplicar esa combinación y debe ayudar a resolverla.

Adapta los filtros a móvil

En pantallas pequeñas, los filtros suelen funcionar mejor dentro de un panel que se abre desde un botón visible.

Ese botón puede indicar cuántos filtros están activos. Así, el usuario entiende que el listado está condicionado aunque el panel permanezca cerrado.

Dentro del panel, los grupos deben ser fáciles de recorrer y las opciones deben tener áreas táctiles suficientes. Los desplegables o acordeones pueden reducir la longitud, siempre que permitan distinguir qué secciones contienen filtros activos.

Al aplicar o cerrar el panel, el usuario debe volver al listado manteniendo la selección y la posición.

También conviene valorar si los resultados se actualizan en tiempo real o mediante un botón de «Ver resultados». En móvil, actualizar el listado detrás del panel puede generar cambios que el usuario no ve. Un botón que indique el número de resultados proporciona más control.

La búsqueda forma parte de la arquitectura del catálogo

La búsqueda resulta especialmente importante cuando el catálogo es amplio, contiene referencias técnicas o recibe usuarios que ya saben qué producto necesitan. En esos casos, debe ocupar un lugar visible y reconocible dentro de la interfaz. Un icono de lupa aislado puede pasar desapercibido o no dejar claro que permite buscar entre todos los productos.

Cuando la búsqueda tiene un papel importante en la navegación, conviene mostrar el campo completo, al menos en escritorio. El usuario puede identificarlo de inmediato y empezar a escribir sin realizar una acción previa. En móvil, donde el espacio es más limitado, puede utilizarse un acceso más compacto, siempre que resulte fácil de localizar y abra una experiencia de búsqueda cómoda.

La búsqueda tampoco debería limitarse a encontrar coincidencias exactas. Puede ofrecer sugerencias mientras el usuario escribe, reconocer errores frecuentes, relacionar sinónimos y buscar por nombres, marcas, referencias o atributos relevantes. Así, ayuda incluso cuando la persona no conoce la terminología exacta utilizada en el catálogo.

Esto requiere trabajar con el vocabulario real del cliente. Si la tienda utiliza «zapatillas de aproximación» y muchas personas buscan «calzado para vías ferratas», la búsqueda debería conectar ambas expresiones cuando exista una relación válida.

Los resultados pueden agruparse por tipo de contenido o categoría. En una tienda con productos, marcas y guías de compra, separar cada grupo ayuda a interpretar mejor las coincidencias y evita mezclar resultados con funciones distintas.

También hay que diseñar los resultados parciales. Una búsqueda puede no encontrar una coincidencia exacta, pero sí productos relacionados, una categoría o una expresión similar. En ese caso, conviene explicar qué se está mostrando, en lugar de presentar un listado aparentemente arbitrario.

El estado sin resultados merece una solución específica. Puede sugerir revisar la escritura, utilizar términos más generales, explorar categorías relacionadas o contactar con soporte cuando se trate de productos técnicos.

En cambio, una tienda con un catálogo muy reducido puede no necesitar búsqueda. Si todos los productos se encuentran fácilmente mediante la navegación, añadir un buscador introduce una opción que apenas aporta valor y puede devolver resultados pobres. La decisión debe depender del tamaño y la complejidad del catálogo.

Categorías, filtros y búsqueda no compiten entre sí. Ofrecen formas diferentes de llegar al producto: las categorías ayudan a orientarse, los filtros reducen opciones y la búsqueda permite ir directamente hacia algo concreto.

Las tarjetas de producto deben ayudar a comparar

Una tarjeta de producto debe permitir identificar y comparar opciones dentro de un listado. Su función consiste en dar al usuario la información necesaria para decidir qué productos merece la pena abrir, sin intentar reproducir toda la ficha.

La selección de datos depende del tipo de catálogo. En moda o decoración, la imagen puede tener mucho peso. En productos técnicos, quizá importen más el nombre exacto, la compatibilidad y alguna especificación. En alimentación, el formato, el peso o determinados atributos pueden intervenir desde el primer vistazo.

Por eso, la tarjeta debería mostrar los criterios que los clientes utilizan realmente para elegir. Si la talla, el material, la capacidad o la compatibilidad condicionan la compra, tiene sentido hacerlos visibles. Añadir información que no ayuda a distinguir unos productos de otros solo aumenta el ruido.

Las etiquetas deben ayudar a elegir

Etiquetas como «Nuevo», «Oferta», «Más vendido» o «Últimas unidades» pueden llamar la atención sobre determinados productos y ayudar al usuario a avanzar. Pierden esa capacidad cuando aparecen en gran parte del catálogo.

Si casi todos los productos son «Nuevos» o están «En oferta», la etiqueta deja de establecer una prioridad. También conviene evitar que varias etiquetas compitan dentro de una misma tarjeta y terminen ocupando más espacio que el nombre o el precio.

Cada distintivo debe responder a una regla clara y aportar información útil. «Oferta», por ejemplo, debería estar acompañado por el precio anterior y el precio actual para que el usuario pueda valorar el descuento.

Haz clicable toda la tarjeta

El usuario no debería tener que adivinar qué parte de la tarjeta abre la ficha de producto.

Hacer interactiva toda el área principal facilita la navegación y reduce la precisión necesaria para pulsar, especialmente en pantallas táctiles. Esto no impide incluir dentro acciones independientes, como añadir a favoritos, pero hay que evitar que se solapen o provoquen resultados inesperados.

La tarjeta también debe comunicar visualmente que se puede abrir. El cambio de cursor, el estado al pasar el ratón o una respuesta clara al tocar ayudan a entender la interacción.

No es imprescindible añadir un botón de «Ver producto» si la tarjeta completa ya funciona como enlace y el diseño lo deja claro. Incluirlo puede ser útil cuando el público necesita una indicación más explícita o cuando la tarjeta contiene varias acciones.

Elige entre rejilla y lista según lo que se compara

La rejilla funciona bien cuando la imagen ayuda a distinguir los productos y la información necesaria puede resumirse en poco espacio. Permite ver varias opciones a la vez y facilita una exploración más visual.

Una lista puede funcionar mejor cuando las características tienen más peso que la fotografía. En componentes electrónicos, maquinaria, repuestos o productos profesionales, el usuario puede necesitar comparar referencias, compatibilidades y especificaciones sin abrir cada ficha.

La decisión también afecta al número de productos por fila. Mostrar demasiadas columnas permite enseñar más resultados, pero reduce el tamaño de las imágenes y el espacio disponible para la información. En muchos catálogos visuales, tres o cuatro productos por fila ofrecen un equilibrio más útil que cinco o seis tarjetas comprimidas.

Un selector entre lista y rejilla no tiene mucho sentido porque el usuario se suele quedar con la vista predeterminada. Además, si es mejor lista o rejilla, debemos decidirlo nosotros y no delegar esa decisión en el usuario.

Añadir al carrito desde la tarjeta no siempre ayuda

La compra directa desde el listado puede funcionar con productos sencillos, conocidos y sin decisiones pendientes. Por ejemplo, artículos de reposición, alimentos o productos que el cliente compra con frecuencia.

Cuando hay que elegir talla, color, acabado, licencia, compatibilidad o cualquier otra variante, añadir al carrito desde la tarjeta puede resultar confuso. La persona necesita revisar primero la ficha y confirmar que ha seleccionado la opción correcta.

También puede ocurrir que el producto requiera información adicional para decidir, como medidas, condiciones de envío o detalles técnicos. En estos casos, llevar al usuario directamente a la compra acelera una acción para la que todavía no está preparado.

La decisión debe partir del producto y del comportamiento de compra. No todas las tarjetas necesitan una llamada a la acción. Cuando la ficha es imprescindible, puede bastar con que toda la tarjeta sea interactiva.

Diseña cómo continúa el listado

La forma de cargar más productos también afecta a la comparación y a la sensación de control.

La paginación permite saber en qué parte del catálogo se encuentra el usuario y volver a una página concreta. También facilita llegar al footer y mantener una referencia estable, aunque obliga a cargar una página nueva para continuar.

El scroll infinito reduce interrupciones, especialmente en móvil, pero puede hacer que el catálogo parezca interminable. También dificulta volver a una posición concreta y puede impedir que el usuario llegue al footer, donde suele buscar información sobre envíos, devoluciones o contacto.

El botón de «Cargar más» funciona como una solución intermedia. Permite continuar sin cambiar de página, pero deja que el usuario decida cuándo ampliar el listado y mantiene una percepción más clara del progreso.

No existe una solución universal. Conviene valorar el tamaño del catálogo, el tipo de exploración y la necesidad de volver a productos vistos anteriormente. También hay que comprobar que, al abrir una ficha y regresar, el usuario recupera la misma posición, los filtros y los resultados ya cargados.

Diseña con contenido real

Una tarjeta creada con un nombre corto, una fotografía perfecta y un precio sencillo puede romperse en cuanto entra el catálogo real.

Hay que probarla con títulos largos, precios con diferentes formatos, productos sin descuento, varias etiquetas, imágenes verticales y horizontales, ausencia de valoraciones y numerosas variantes.

También conviene revisar qué ocurre cuando el producto está agotado o no tiene imagen. La ausencia de un dato no debería romper la alineación ni dejar espacios extraños.

Los títulos tampoco deberían recortarse sin analizar qué información queda oculta. En un producto técnico, el final puede contener la referencia, la medida o la característica que lo diferencia de otro modelo casi idéntico.

La tarjeta debe mantener su jerarquía y permitir comparar incluso cuando el contenido se aleja del ejemplo perfecto utilizado durante el diseño.

En el artículo que escribí para el blog de WordPress.com, cómo diseñar en WordPress con contenido real sin que se rompa en producción, explico cómo anticipar textos largos, datos ausentes, imágenes con proporciones distintas y otros casos extremos antes de pasar a desarrollo.

La ficha de producto debe resolver la decisión

La ficha de producto reúne la información que el usuario necesita para decidir si ese artículo es adecuado para él. Debe reducir la incertidumbre, facilitar la evaluación y dejar claras las condiciones de compra antes de añadir el producto al carrito.

Su estructura no debería repetirse de forma idéntica en todo tipo de ecommerce. La jerarquía depende de las preguntas que necesita resolver cada producto. En moda pueden pesar más la talla, el tejido y el ajuste; en muebles, las medidas y los materiales; en tecnología, las especificaciones y la compatibilidad; en alimentación, los ingredientes, los alérgenos y la conservación.

El diseño debe identificar qué información condiciona realmente la decisión y hacerla visible en el momento adecuado.

Las imágenes deben ayudar a evaluar el producto

Las imágenes tienen que mostrar algo más que el aspecto general del producto. Deben ayudar al usuario a comprender cómo es, qué tamaño tiene, cómo se utiliza y qué detalles podrían influir en la compra.

Según el producto, puede ser útil incluir fotografías desde distintos ángulos, primeros planos, imágenes en contexto o referencias de escala. Una lámpara junto a otros muebles permite interpretar mejor sus dimensiones. Una mochila sobre una persona ayuda a valorar su tamaño real. Una fotografía de un tejido de cerca muestra una información que no se aprecia en una imagen general.

Las imágenes de uso también permiten comunicar beneficios sin depender únicamente del texto. Ayudan a imaginar el producto en una situación real y a entender para qué sirve.

La galería debe facilitar esta evaluación. No conviene convertirla en un carrusel decorativo en el que resulte difícil localizar una imagen concreta o volver a la anterior.

El zoom solo tiene sentido cuando revela información

Añadir zoom no mejora automáticamente una ficha de producto.

Resulta útil cuando permite examinar detalles que pueden afectar a la decisión, como la textura de un tejido, el acabado de un mueble, la esfera de un reloj o las conexiones de un dispositivo.

Si la imagen original no contiene suficiente resolución o el producto no tiene detalles relevantes, el zoom no aporta información. Puede incluso dificultar la interacción, especialmente en móvil, si se activa sin intención o impide navegar cómodamente por la galería.

La decisión debería depender de lo que el usuario necesita comprobar, no de que la funcionalidad esté disponible en la plantilla de WooCommerce. Si no aporta, desactívalo.

Las imágenes deben cambiar con las variantes

Cuando el usuario selecciona un color, acabado o configuración, las imágenes deben actualizarse para mostrar esa opción concreta.

Si elige una falda verde y la galería continúa mostrando la versión negra, la interfaz genera dudas sobre qué producto está comprando. El nombre de la variante puede ser correcto, pero la imagen tiene un peso mayor en la interpretación.

Este cambio resulta especialmente importante cuando las variantes presentan diferencias visibles. También conviene mantener una correspondencia clara entre la selección, el precio, la disponibilidad y la imagen.

Si una variante no tiene fotografías propias, la interfaz debería evitar dar a entender que está mostrando exactamente la opción elegida.

Los beneficios deben poder localizarse rápidamente

Una ficha no debería limitarse a enumerar características.

Las características describen cómo es el producto; los beneficios ayudan a entender qué aportan esas características en una situación real. Una batería de 5.000 mAh es un dato técnico. Poder utilizar el dispositivo durante toda la jornada sin recargarlo explica por qué puede importar.

Esto no significa llenar la página de mensajes promocionales. Los beneficios deben ser concretos, demostrables y estar relacionados con necesidades reales.

También deben poder escanearse con facilidad. El usuario puede recorrer primero los títulos, los destacados, las listas y las imágenes antes de decidir qué apartados leer con detalle. Por eso, los encabezados deben resumir la información que contienen en lugar de utilizar fórmulas genéricas como «¿Por qué elegir este producto?».

La ficha debe ofrecer dos niveles de lectura: uno rápido, que permita identificar los argumentos principales, y otro más profundo, con descripciones, especificaciones y condiciones completas.

La información principal debe aparecer cerca de la compra

Nombre, precio, variantes, disponibilidad y acción de compra forman el núcleo de la ficha.

También pueden ser decisivos los gastos de envío, la fecha estimada de entrega, las devoluciones, la garantía o la posibilidad de pago a plazos. No hace falta concentrar toda la información en un único bloque, pero las condiciones que pueden cambiar la decisión deben aparecer cerca del botón de compra.

El usuario no debería descubrir en el carrito que el producto no está disponible, que tarda seis semanas en llegar o que solo se envía a determinadas zonas.

Cuando una variante cambia el precio o el plazo, la interfaz debe actualizar esos datos en cuanto se selecciona. Si requiere una cantidad mínima, una personalización o una condición especial, también debe explicarse antes de añadirla al carrito.

El objetivo es que el usuario sepa qué está comprando, cuánto pagará y qué ocurrirá después.

La disponibilidad debe comunicarse antes de llegar al carrito

Un producto agotado no debería parecer disponible hasta que el usuario intenta comprarlo.

La falta de stock debe mostrarse desde la ficha y, cuando sea posible, también desde el listado. Si solo afecta a una talla, color o configuración, el estado debe quedar asociado a esa variante.

La interfaz puede ofrecer una reserva o un aviso de reposición cuando exista una previsión real. También puede mostrar alternativas similares o compatibles para que el usuario continúe su recorrido.

Los productos descatalogados necesitan un tratamiento específico. Pueden seguir recibiendo visitas desde buscadores, enlaces antiguos, campañas o historiales de compra. En lugar de llevar a una página eliminada, la ficha puede explicar que ya no están disponibles y dirigir hacia el modelo que los sustituye.

También hay que diseñar combinaciones imposibles, promociones vencidas y variantes que requieren un plazo distinto. Estos estados forman parte del catálogo tanto como el producto disponible.

Los gastos de envío deben aparecer antes del checkout

Los gastos de envío influyen directamente en la decisión y no deberían aparecer por sorpresa al final del proceso.

Cuando el coste puede calcularse desde la ficha, conviene mostrarlo. Si depende de la ubicación, el peso o el importe total del pedido, al menos hay que explicar las condiciones y facilitar el acceso a una estimación.

Si el envío es gratuito a partir de una cantidad determinada, esa información puede ayudar al usuario a valorar el pedido. Debe expresarse de forma concreta: «Envío gratuito a partir de 50 €» aporta más información que un mensaje genérico como «Envíos gratis disponibles».

También conviene indicar la fecha o el plazo estimado de entrega. «Envío en 24 horas» puede referirse al tiempo de preparación, no al momento en que el cliente recibirá el pedido. La redacción debe evitar esa ambigüedad.

Las condiciones importantes deben estar a la vista

Las devoluciones, la garantía, el montaje, la personalización o las condiciones de conservación pueden cambiar la decisión de compra.

No basta con incluirlas en el footer o en una página legal. La ficha debe mostrar un resumen cerca de la zona de compra y permitir ampliar la información cuando sea necesario.

El tipo de condiciones depende del producto. Un mueble puede necesitar montaje y tener restricciones de entrega. Una descarga digital puede estar disponible inmediatamente después del pago. Un producto personalizado quizá no admita devolución. Un electrodoméstico puede incluir instalación o retirada del anterior.

Hacer visibles estas condiciones reduce dudas y evita que el usuario avance con una expectativa equivocada.

Las formas de pago deben mostrarse cuando influyen en la decisión

No todas las fichas necesitan mostrar una lista completa de métodos de pago.

Esta información adquiere más importancia cuando el precio es elevado, el público utiliza un método concreto o el negocio ofrece facilidades que pueden hacer viable la compra, como financiación o pago a plazos.

En esos casos, conviene presentar la opción cerca del precio y explicar sus condiciones. «Desde 40 € al mes durante 12 meses» resulta más útil que un icono aislado de una entidad financiera.

Los logotipos de tarjetas, PayPal, Bizum u otros sistemas pueden reforzar el reconocimiento, pero deben corresponderse con métodos realmente disponibles y no sustituir una explicación cuando existen condiciones especiales.

La información para evaluar depende del producto

Además del bloque principal, la ficha puede incluir descripción, características, especificaciones, medidas, compatibilidad, instrucciones, opiniones, preguntas y productos relacionados.

La prioridad de estos contenidos debe responder al tipo de decisión.

Las especificaciones funcionan bien en tablas cuando el usuario necesita localizar y comparar datos concretos. Las medidas pueden necesitar esquemas o ilustraciones. La compatibilidad debe formularse de forma inequívoca, especialmente en repuestos, accesorios o productos técnicos.

Las opiniones aportan información sobre la experiencia real de otros compradores, pero deben integrarse sin ocultar los datos básicos que el negocio ya conoce. Una pregunta recurrente en las reseñas puede indicar que falta información en la propia ficha.

Los productos relacionados también deben responder a una relación útil. Pueden ser alternativas, accesorios compatibles, recambios o artículos que suelen comprarse juntos. Mezclar estas funciones bajo un mismo bloque genérico de recomendaciones puede dificultar su interpretación.

La ficha debe reunir la información suficiente para tomar una decisión sin obligar al usuario a buscar respuestas en otras páginas, abrir varias pestañas o contactar con atención al cliente.

Carrito y checkout: cerrar la compra sin añadir fricción

La estructura del catálogo ayuda al usuario a encontrar y evaluar productos, pero la compra todavía puede romperse durante el carrito, el checkout o los formularios. En cómo mejorar la UX de un ecommerce para reducir fricciones y aumentar la conversión analizo el recorrido completo, desde la página de inicio hasta la confirmación del pedido.

El carrito permite revisar la selección antes de pagar.

Debe mostrar los productos, cantidades, variantes, precios, descuentos, gastos y total. También debe facilitar modificar o eliminar elementos sin obligar al usuario a reiniciar el proceso.

Cuando una modificación afecta al envío, a una promoción o a la disponibilidad, el cambio debe explicarse de inmediato.

El checkout debe pedir solo la información necesaria para procesar el pedido y cumplir las obligaciones del negocio.

Los campos deben utilizar etiquetas claras, formatos adecuados y autocompletado cuando sea posible. Los errores deben aparecer junto al campo correspondiente y explicar cómo corregirlos.

También conviene revisar la compra como invitado.

Obligar a crear una cuenta puede añadir fricción cuando el usuario solo quiere realizar una compra. La cuenta puede ofrecerse después o crearse durante el proceso con el mínimo esfuerzo, siempre que el modelo de negocio lo permita.

Los métodos de pago deben mostrar sus condiciones antes de la confirmación. Lo mismo ocurre con los gastos de envío, impuestos y plazos.

Los cupones también necesitan cuidado. Un campo demasiado visible puede llevar al usuario a abandonar el checkout para buscar descuentos. Si los códigos forman parte habitual de la estrategia, puede mantenerse accesible sin convertirlo en el elemento principal.

Los pagos rechazados requieren mensajes específicos. El usuario necesita saber si puede volver a intentarlo, cambiar de método o contactar con su banco.

La recuperación del carrito puede formar parte de la estrategia, pero no corrige un checkout mal diseñado. Primero hay que revisar dónde y por qué se interrumpe la compra.

La experiencia continúa después de pagar

El pago no termina el recorrido.

La confirmación debe demostrar que el pedido se ha registrado correctamente y resumir la información esencial: número de pedido, productos, importe, dirección, método de pago, estado y próximos pasos.

También debe explicar cómo consultar el seguimiento o contactar si hay un problema.

Los correos transaccionales forman parte de la misma experiencia. Su contenido, terminología y jerarquía deberían mantener coherencia con la web.

El usuario puede recibir una confirmación, una actualización de estado, un aviso de envío, una entrega y comunicaciones relacionadas con devoluciones o incidencias.

Cada mensaje debe explicar qué ha cambiado y si necesita realizar alguna acción.

La cuenta del cliente debe facilitar las tareas habituales del negocio.

En muchos ecommerce, esto incluye consultar pedidos, descargar facturas, actualizar direcciones, gestionar métodos de pago, iniciar devoluciones o repetir una compra.

No hace falta añadir opciones que apenas se utilizan. Una cuenta útil se organiza alrededor de tareas reales.

La devolución merece un recorrido claro. El usuario debe saber qué productos puede devolver, dentro de qué plazo, qué costes existen y cómo seguirá el proceso.

Ocultar o dificultar estas gestiones aumenta las consultas al soporte y deteriora la confianza.

Qué condiciona WooCommerce antes de diseñar

WooCommerce genera plantillas, bloques, estados, correos y comportamientos propios.

Antes de cerrar el diseño, conviene revisar qué partes utilizará el proyecto y hasta dónde pueden personalizarse.

Las categorías, fichas, carrito, checkout y cuenta del cliente no son páginas aisladas. Están conectadas con datos, extensiones y procesos del sistema.

Hay que comprobar cómo se gestionan los productos variables, qué bloques están disponibles, qué extensiones serán necesarias y qué información puede mostrarse de forma nativa.

También conviene revisar qué partes del checkout pueden modificarse sin introducir desarrollos difíciles de mantener.

No olvides diseñar la cuenta del cliente y no solo la tienda pública. Aunque WooCommerce ya define gran parte de su estructura, siempre se puede personalizar para optimizar la experiencia.

Los correos también dependen de WooCommerce y de los plugins. Conviene comprobar qué mensajes se enviarán, qué información contienen y qué personalización permiten.

Cada plugin adicional puede añadir campos, scripts, plantillas y posibles incompatibilidades. Antes de instalarlo, hay que valorar qué problema resuelve, si duplica otra función y qué impacto tendrá en el mantenimiento.

Diseñar sin conocer estas restricciones puede hacer más complicado el mantenimiento de la web.

Conocer WooCommerce nos permite diseñar con criterio, saber qué puede adaptarse y decidir dónde compensa invertir en personalización.

Errores habituales al diseñar un ecommerce

Diseñar primero la portada

La portada recibe mucha atención porque representa la identidad de la tienda y permite presentar campañas o productos destacados.

Sin embargo, muchas personas llegarán directamente a una categoría, una búsqueda o una ficha de producto.

Las páginas que permiten encontrar, evaluar y comprar suelen tener más impacto que la portada.

Diseñar primero el sistema del catálogo ayuda a que la página de inicio se construya después con componentes y relaciones reales, en lugar de convertirse en una composición independiente.

Reproducir la organización interna del negocio

La estructura del almacén, los proveedores o el inventario puede resultar lógica para el equipo y confusa para el cliente.

El usuario necesita categorías y atributos que correspondan con su forma de buscar.

Cuando la web copia sin revisar la clasificación interna, aparecen términos poco reconocibles, niveles innecesarios y productos ubicados en lugares inesperados.

Confundir categorías y filtros

Crear categorías para cada atributo fragmenta el catálogo y complica la navegación.

Resolverlo todo mediante filtros también dificulta la orientación.

Las categorías deben ofrecer entradas claras. Los filtros deben ayudar a reducir las opciones dentro de esas entradas.

Ocultar información decisiva

Los gastos de envío, las devoluciones, la disponibilidad o la compatibilidad afectan directamente a la compra.

Si aparecen tarde, el usuario puede sentir que la tienda ha ocultado condiciones importantes.

La información debe mostrarse cerca del momento en que interviene en la decisión.

Diseñar solo el estado ideal

El producto disponible con una imagen perfecta representa solo una parte del catálogo.

También existen productos agotados, variantes imposibles, descuentos vencidos, errores de pago, devoluciones, pedidos retrasados y artículos descatalogados.

Si estos estados no se diseñan, el sistema improvisará mensajes y comportamientos justo cuando el usuario necesita más claridad.

Descuidar la cuenta del cliente

La relación continúa después del pago.

Una cuenta poco útil obliga a contactar con soporte para consultar facturas, actualizar datos, iniciar una devolución o revisar el pedido.

Diseñar estas tareas reduce trabajo interno y mejora la experiencia de los clientes recurrentes.

La arquitectura del catálogo condiciona toda la experiencia de compra

La arquitectura de un ecommerce debe ayudar a encontrar, comparar, comprar y gestionar el pedido.

Las categorías proporcionan entradas claras al catálogo. Los filtros reducen opciones. La búsqueda permite llegar directamente a un producto o una necesidad. Las tarjetas facilitan la comparación y las fichas reúnen la información necesaria para decidir.

El carrito y el checkout completan la transacción, pero la experiencia continúa en la confirmación, el seguimiento, las devoluciones y la cuenta del cliente.

Todas estas piezas dependen del mismo contenido, de las mismas reglas y de las herramientas con las que se construye la tienda.

Diseñarlas como un sistema coherente tiene más impacto que concentrar casi todo el esfuerzo en la portada.

Te lo ha contado

Ana Cirujano

Soy diseñadora y ayudo a negocios online a fortalecer su marca, mejorar la experiencia de usuario y obtener mejores resultados.

Quién soy Cómo te puedo ayudar