# Diez decisiones de diseño de ecommerce que mejoran la conversión de forma medible > No es 'usa más espacio en blanco', ni 'prueba el color de tu botón'. Las decisiones concretas de jerarquía visual, fotografía, tipografía y móvil que de verdad mueven la conversión en tiendas reales. Ryan Badger - 3 de noviembre de 2024 - 7 min de lectura ## Decisiones de diseño que de verdad mueven la conversión Los artículos de diseño suelen caer en dos bandos. "¡Usa mucho espacio en blanco!" (demasiado vago) o "Haz pruebas A/B con 47 colores de botón" (demasiado granular). Ninguno ayuda a quien mira su tienda y se pregunta por qué convierte al 1,3%. Este artículo trata de las decisiones concretas de diseño visual que cambian de forma medible la conversión en tiendas de ecommerce. No el gusto. No la estética de marca. Las decisiones de maquetación, jerarquía, color y tipografía que ayudan a la gente a comprar o se interponen. ## 1. Jerarquía visual: lo más importante debe parecer lo más importante La mayoría de las tiendas dan el mismo peso visual a todo en la página de producto: texto de 16px, precio de 18px, encabezados de 18px. Todos los elementos compiten; ninguno gana. El ojo no tiene por dónde entrar. Solución: lo que quieres que se pulse debe ser lo más grande y de mayor contraste de la página. - Título del producto: 28-36px - Precio: 20-24px, en negrita, claramente delimitado - Botón de Añadir al carrito: ancho completo en móvil, el elemento visualmente más pesado de la página - Descripciones, listas de especificaciones, info de envío: 14-16px, más discretos Cuando miras tu página de producto desde 2,5 metros (sí, literalmente échate hacia atrás), ¿sabes cuál es la acción principal? Si toda la página parece una sopa gris, tu jerarquía está rota. ## 2. Espacio en blanco alrededor del CTA, no en todas partes "Usa más espacio en blanco" se saca como consejo universal de diseño. Lo que importa de verdad es el espacio alrededor de los botones y los elementos clave, no el espacio en blanco porque sí. - Al menos 40-60px de relleno alrededor de la zona de Añadir al carrito - El precio en su propio espacio limpio, sin texto que lo agobie - Las imágenes de producto con aire (no de borde a borde sin margen) Aprieta más todo lo demás (reseñas, info de envío, productos relacionados). Es secundario. La zona del CTA gana por ser lo único que respira. ## 3. La fotografía de producto consistente supera a la "mejor" fotografía de producto Un catálogo de 50 productos donde las fotos son todas ligeramente distintas (fondos distintos, iluminación distinta, niveles de zoom distintos) parece amateur. Un catálogo donde todas las fotos tienen el mismo ángulo, la misma luz, el mismo recorte y el mismo fondo parece profesional. Es un problema de volumen, no de calidad. Tus 5 productos más vendidos pueden tener fotos de portada cuidadas. Todo lo demás debería fotografiarse igual, aunque sea algo menos vistoso. La inconsistencia transmite "tienda pequeña y poco fiable" más que la baja calidad. Regla práctica: - Foto principal: fondo blanco o liso, centrada, mismo recorte en todo el catálogo - Fotos secundarias: de estilo de vida / en uso, tono coherente - Todas las fotos con la misma proporción y resolución ## 4. El contraste del CTA, no el color del CTA "¡Los botones naranjas convierten un X% más que los verdes!" Este tipo de afirmación probada se ve mucho. Aislada, es una tontería. Lo que importa es el **contraste con la página que lo rodea**. Un botón naranja en una web de tema naranja es invisible. Un botón azul en esa misma web es un faro. Elige el color de mayor contraste con la paleta dominante de tu web. Si tu página es blanco + negro + beige, tu CTA debería ser el único color que no aparece en ningún otro sitio. Punto secundario: evita los botones fantasma (solo contorno, sin relleno) para los CTA principales. Parecen elegantes, pero rinden mal en conversión porque al ojo le dicen "secundario". Usa relleno sólido para Añadir al carrito, Realizar pedido, Comprar ahora. ## 5. Tamaño de letra y longitud de línea en móvil La mayoría de las tiendas móviles tienen un texto demasiado pequeño y demasiado ancho. Los teléfonos muestran el texto con mayor densidad de píxeles; lo que son 16px en escritorio se siente pequeño en móvil. Mínimos de tipografía móvil: - Texto: 16-18px como mínimo - Longitud de línea: 40-60 caracteres por línea - Interlineado: 1,4-1,6 veces el tamaño de la fuente - Botones / zonas táctiles: 44px de alto como mínimo (pauta de accesibilidad de Apple) Si los visitantes hacen zoom con los dedos en tus descripciones de producto, tu letra es demasiado pequeña. Pruébalo en un teléfono real a la distancia del brazo, no en el emulador móvil del navegador. ## 6. Añadir al carrito fijo en móvil Baja por una página de producto larga en móvil: cuando has leído la descripción, el botón de Añadir al carrito está 3 pantallas más arriba. Los clientes que ya han decidido comprar tienen que volver a subir, y eso baja la tasa de conversión. Solución: un botón de Añadir al carrito fijo que flota en la parte inferior de la pantalla móvil cuando el botón original sale de la vista. Un toque, se abre el carrito, sin buscar con el scroll. Escritorio: el carrito fijo pasa a ser opcional (la pantalla es mayor). Móvil: innegociable. ## 7. Imágenes de portada que muestran el resultado, no el producto La mayoría de las secciones de portada muestran el producto, aislado, sobre blanco. Bien para una foto de referencia; mal para una portada. La portada tiene que comunicar "cómo es la vida con esto" en 2 segundos. Mejor: el producto en uso, en contexto, con una persona o un entorno que encaje con tu comprador objetivo. - Cuidado de la piel: alguien usándolo, luz de mañana, baño - Muebles: la pieza en una habitación real, con vida - Ropa: sobre un cuerpo, en movimiento, no en maniquí - Comida/café: preparándose o disfrutándose, no una foto de producto La portada con el producto en uso convierte mejor que la del producto aislado porque hace más del trabajo imaginativo por el comprador. Puede verse usándolo sin tener que imaginarlo. ## 8. Componentes consistentes en toda la tienda Un fallo habitual: las páginas de producto usan un estilo de tarjeta, las páginas de categoría otro y la home un tercero. Los clientes perciben esta inconsistencia aunque no sepan nombrarla. Las tiendas parecen fiables cuando los mismos componentes aparecen de forma coherente. Un pequeño sistema de diseño de ecommerce es: - Un único componente de tarjeta de producto (usado en destacados de la home, cuadrículas de categoría, productos relacionados y resultados de búsqueda) - Un único sistema de botones (primario, secundario, terciario; solo estos tres) - Un único sistema de estilos de encabezado (H1, H2, H3; aplicados de forma coherente) - Una única paleta de colores (3 colores de marca como máximo, más una escala de grises) - Una única escala tipográfica (3-4 tamaños como máximo) La mayoría de las tiendas hace 15 variaciones de cada cosa cuando una bastaría. Menos variaciones = aspecto más profesional. ## 9. La primera pantalla es el anuncio para hacer scroll El área visible en la primera carga (sobre el pliegue) tiene una sola misión: que el visitante quiera seguir bajando. Eso es todo. No intentes cerrar la venta en la primera pantalla. Lo que hace falta sobre el pliegue: - Para quién es esto (en una línea) - Qué es el producto (visualmente, una buena imagen) - Un CTA claro (Añadir al carrito o Comprar) - Una señal de confianza tranquilizadora (valoración + número de reseñas, o una cita de prensa, o un cliente destacado) Lo que NO hace falta sobre el pliegue: - Varios CTA compitiendo por la atención - Un carrusel de portada que avanza solo cada 3 segundos (mata la conversión; los clientes se quedan paralizados cuando el contenido se mueve) - Todos los beneficios del producto - Galerías de testimonios ## 10. Quita el carrusel de tu página de inicio Relacionado con lo anterior, pero merece su propio punto: los carruseles de portada en la home están muertos. Los estudios muestran de forma consistente que las diapositivas rotativas reciben clics del 1-3% y que solo la primera recibe atención significativa. Elige el único mensaje que pondrías en la diapositiva 1; ponlo como portada estática. Olvídate del resto. ## Lo que gestiona Shoprocket El escaparate con temas incluye plantillas que ya siguen los patrones de jerarquía visual, contraste y móvil de arriba. Si usas el widget incrustado en tu propia web, controlas el diseño de la página que lo rodea, pero: - **El panel de carrito** (no un carrito a página completa) es el predeterminado - **Carrito fijo en móvil** compatible - **Imágenes de producto adaptables** con entrega automática en WebP y proporciones correctas - **Creador de sitios + más de 40 temas** para que no tengas que construir el sistema de diseño desde cero - **Ganchos de CSS personalizado** te permiten adaptar el estilo de la integración a tu web ```
``` Lo que Shoprocket no controla: tus imágenes de portada, la consistencia de tu fotografía, tus textos, tu sistema de color. Eso depende de ti, para bien o para mal. > **Consejo:** abre ahora mismo tu tienda en el móvil. Toma una página de producto. ¿Ves el Añadir al carrito sin hacer scroll? ¿El precio es claramente lo segundo más grande? ¿Puedes leer la descripción sin entornar los ojos? Si la respuesta a cualquiera de estas es no, esa es la primera corrección de diseño que hacer. ## Resumen - **Jerarquía:** el elemento más importante debe parecer el más importante. Compruébalo con la prueba de los 2,5 metros - **Espacio en blanco alrededor del CTA**, no por todas partes porque sí - **La consistencia fotográfica** supera a la calidad fotográfica. Un solo estilo en todo el catálogo - **Contraste del CTA, no color.** Gana el color de mayor contraste frente a la paleta de tu página - **Tipografía móvil: texto de 16px+, zonas táctiles de 44px+** - **Añadir al carrito fijo en móvil** es innegociable - **Las imágenes de portada muestran resultados** (producto en uso), no producto sobre blanco - **Un sistema de diseño pequeño (3 colores, 4 tamaños, 3 variantes de botón)** se ve más profesional que 15 variantes - **La primera pantalla vende el scroll**, no el producto. Un mensaje claro, un CTA - **Mata el carrusel de la home**. Gana la portada estática [Empieza una prueba gratuita](https://app-v3.shoprocket.io/signup) si quieres un escaparate con temas que incorpore estos patrones. 14 días, sin tarjeta. --- - HTML version: https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion - Language: Español (es) - Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)