Diseño de tienda online página por página: de la página de inicio al pago

El diseño de tienda online sigue el recorrido del comprador por la tienda

El diseño de tienda online se juzga mejor página por página, en el orden en que las encuentra el comprador: página de inicio o resultado de búsqueda, listado de categoría, producto, carrito, pago y confirmación. Cada página tiene una tarea, y una tienda bonita puede fallar en cualquier paso. Baymard Institute, un grupo de investigación que prueba tiendas online con usuarios reales, califica como deficientes la página de inicio y la navegación por categorías del sitio medio de mayor facturación en Estados Unidos y Europa. En su estudio comparativo, el 76% de los sitios rinde de forma mediocre o peor.

La página de inicio tiene una tarea más estrecha de lo que suelen esperar los dueños. Muestra de un vistazo qué vende la tienda, abre las categorías principales, ofrece búsqueda y declara las condiciones de envío y devolución. Muchos compradores nunca la ven: la búsqueda y los anuncios los llevan directo a una categoría o a un producto.

Navegación, árbol de categorías y buscador interno de una tienda

Los nombres de las categorías deben ser las palabras que usan los clientes, y el comprador siempre tiene que ver dónde está. El estudio móvil de Baymard de 2026 encontró que el 94% de los sitios móviles no resalta el ámbito actual en la navegación principal. También encontró que el 42% no ofrece la opción «Ver todo» en cada nivel del catálogo. Una ruta de migas de pan y un enlace «Ver todo» al inicio de cada categoría cierran ambas brechas.

La búsqueda es la segunda puerta de entrada. En las pruebas de Baymard, el 34% de los usuarios buscó cosas que no son productos, como la política de devoluciones, y aun así el 15% de los sitios analizados no admite esas consultas básicas. En móvil, el 27% de los sitios no tiene botón de envío junto al campo de búsqueda y el 28% no da ninguna sugerencia útil ante un término mal escrito por poco.

Páginas de categoría y listados: filtros, orden y miniaturas

El listado de productos es donde las tiendas pierden gente sin hacer ruido. El estudio de listados de Baymard registró un abandono del 67–90% en sitios con una usabilidad mediocre del listado, frente al 17–33% en sitios con un conjunto de herramientas algo mejor. Su estudio de 2025 sitúa al 58% de los sitios de escritorio y al 78% de los móviles en un nivel mediocre o peor.

Agrupa las variantes de color y talla de un mismo producto en un único elemento del listado, algo que el 42% de los sitios no hace, y muestra tres o más miniaturas por elemento, cosa que el 80% no hace. Deja elegir dos valores de un mismo filtro a la vez y muestra los filtros aplicados sobre el listado. Ofrece los cuatro tipos de orden que los usuarios buscaron en las pruebas, precio, valoración de usuarios, más vendidos y novedades; al 69% de los sitios le falta alguno.

Google Search Central cubre el lado técnico. Su guía de paginación dice que los rastreadores de Google no pulsan botones, así que el «cargar más» o el desplazamiento infinito necesitan enlaces reales a páginas numeradas, cada una con su propia URL, como ?page=2. Recomienda mantener fuera del índice las listas filtradas y reordenadas con noindex o con reglas de robots.txt.

Diseño de la ficha de producto: imágenes, variantes, precio y devoluciones

La ficha de producto responde a lo que el comprador preguntaría a un dependiente en una tienda física. El último estudio de Baymard sobre fichas de producto concluye que solo el 48% de los principales sitios de escritorio y el 38% de los móviles alcanzan un nivel aceptable o bueno. En las pruebas, el 42% de los usuarios intentó juzgar el tamaño de un producto por las fotos, algo difícil sin una imagen a escala. Y al 23% de los sitios le falta una foto con modelo.

Las variantes deben elegirse con botones, y sin embargo el 57% de los sitios no los usa para elegir la talla. El precio, la disponibilidad y el botón de compra van en un mismo bloque, con una estimación del coste total con envío, que el 67% de los sitios no da. Las opciones, el coste y el plazo de entrega dependen del destino y de la dirección exacta, así que pide un código postal o un país y muestra una fecha. La investigación de Baymard sobre el pago cuenta un 48% de sitios que muestran una velocidad en vez de una fecha de entrega.

La información de devoluciones pertenece a la propia ficha de producto. En un estudio de Baymard con 1.032 encuestados, el 60% dijo que busca allí la política de devoluciones, pero el 44% de los sitios ni la muestra ni la enlaza. La guía de URL de Google pide que cada variante tenga su propia dirección, como /t-shirt/green o /t-shirt?color=green.

Diseño del pago: compra como invitado, campos del formulario y coste total

El pago es la parte más estudiada del diseño de tienda online, porque sus pérdidas son fáciles de contar. La lista de 50 estudios de Baymard fija la tasa media documentada de abandono del carrito en el 70,22%. Dejando aparte a quienes solo estaban mirando, los motivos principales son los costes adicionales (40%), la entrega lenta (20%), la desconfianza en el sitio al dar los datos de la tarjeta (19%), la obligación de crear una cuenta (18%) y un pago demasiado largo (17%). Otro 12% no pudo ver el coste total desde el principio.

Las pruebas de Baymard muestran que un pago ideal puede tener 12–14 elementos de formulario, mientras que el pago medio en Estados Unidos muestra 23,48 por defecto. La compra como invitado debe ser la opción más visible, y el 62% de los sitios no lo consigue. Marca tanto los campos obligatorios como los opcionales, porque el 32% de los participantes pasó por alto un campo obligatorio cuando solo se etiquetaban los opcionales. Si pides un teléfono, explica por qué, ya que más del 70% de los compradores encuestados se resiste a darlo.

Muchos pagos fallan en los mensajes de error. Baymard cuenta un 94% de sitios sin mensajes adaptativos, los que nombran el problema real, como un teléfono demasiado corto. Un buscador de direcciones detecta los errores antes de que un paquete se pierda, y el 54% de los sitios móviles no lo tiene. Baymard calcula que la gran tienda media podría ganar un 35,26% de aumento en la tasa de conversión solo con un mejor diseño del pago.

Carrito, cuentas, páginas de confianza y mensajes tras el pedido

El carrito muestra cada artículo con su variante y su foto, un control de cantidad, la estimación de entrega y el total. Baymard comprueba que el 97% de los sitios no usa botones para actualizar la cantidad, lo que provoca errores como que el comprador escriba 2 junto al 1 por defecto y acabe con 21. En las pruebas, las reglas estrictas de contraseña causaron hasta un 19% de abandono en el pago entre quienes ya tenían cuenta.

La confianza viene de páginas sencillas y fáciles de encontrar: envíos, devoluciones, pago, contacto y la identidad del vendedor. En la encuesta de Baymard, el 13% de los compradores se marchó por una política de devoluciones insatisfactoria. Lo que una tienda debe divulgar lo fija la ley de consumo, que cambia según el país, así que revisa esas páginas con un abogado en cada mercado. La confirmación y los correos repiten después el número de pedido, los artículos, el total, la dirección y la fecha prevista, con enlaces a seguimiento y devoluciones.

Diseño móvil, Core Web Vitals y normas de accesibilidad para tiendas

Diseña primero para el móvil. Baymard señala que el móvil suele suponer el 50% del tráfico en muchos sitios de comercio electrónico, y su estudio de 2026 califica como solo mediocre al 75% de los sitios móviles. La guía web.dev de Google fija como buenos unos Core Web Vitals con un Largest Contentful Paint de hasta 2,5 segundos, un Interaction to Next Paint de 200 milisegundos o menos y un Cumulative Layout Shift de 0,1 o menos. Se miden en el percentil 75 de las cargas de página, por separado para móvil y escritorio.

El W3C publicó WCAG 2.2 como Recomendación el 5 de octubre de 2023, y varios criterios nuevos encajan directamente en las tiendas. Target Size (Minimum) pide objetivos de puntero de al menos 24 por 24 píxeles CSS, con excepciones. Redundant Entry dice que los datos ya introducidos en el mismo proceso deben rellenarse o ofrecerse para elegir, como la dirección de facturación. Accessible Authentication descarta un inicio de sesión que dependa de una prueba de función cognitiva, como recordar una contraseña, salvo que exista una alternativa o un mecanismo de ayuda.

En la UE, la Comisión Europea incluye el comercio electrónico entre los servicios que cubre la Ley Europea de Accesibilidad. La Comisión de Competencia y Protección del Consumidor de Irlanda, la autoridad de cumplimiento del comercio electrónico allí, afirma que la ley entró en vigor el 28 de junio de 2025. El resumen de Wikipedia describe una exención para las microempresas que prestan servicios: menos de 10 personas y un volumen de negocio o un balance de no más de 2 millones de euros. Las normas del Reino Unido, Estados Unidos o los países del Golfo son distintas, así que consulta tu caso con un especialista para cada mercado.

Plantilla o diseño a medida, y qué preparar para el encargo

Una plantilla ya hecha sirve para un catálogo pequeño de productos corrientes y un presupuesto ajustado, porque el carrito y el pago ya funcionan. Un diseño a medida compensa cuando el catálogo necesita filtros propios, ayuda con las tallas o configuración, o cuando la marca debe distinguirse. Prepara el catálogo con variantes y atributos para filtros, varias fotos por producto, una de ellas a escala, y las políticas, con el envío escrito por destino.

VITON13 Studio plantea esto como un proyecto de alcance fijo que abarca recorridos de catálogo, un sistema de ficha de producto y flujos de pago. La página del servicio lo ofrece desde $113 con ayuda de IA o desde $173 con trabajo humano, en 6–10 días laborables y con 2 rondas de revisión. El alcance se confirma por escrito antes de empezar. Con el catálogo, las fotos y las políticas listos, un buen diseño de tienda online parte de páginas reales y no de preguntas abiertas.