Diseño de apps de zapatillas: rediseño de una página de producto, antes y después
Una página de producto de zapatillas con cuatro iconos y tres insignias sobre la foto, un precio perdido entre cinco números y tallas que no muestran cuál está elegida, y la misma página corregida. Cada cambio lado a lado, la razón detrás de cada uno y el archivo gratis de Figma.
Un comprador abre la página de unas zapatillas para responder tres preguntas: cómo se ven, cuánto cuestan y si hay en su talla. El primer borrador de abajo tiene las tres respuestas y obliga al comprador a cazarlas. La corrección mantiene el mismo producto y el mismo precio, y pone las respuestas en el orden en que el comprador las pregunta.
La pantalla completa, antes y después
Borrador junior
Corregido
A la izquierda, el comprador se topa con siete marcas pequeñas sobre la foto antes del nombre del producto. A la derecha, primero va la foto, luego el nombre y el precio, y el único botón oscuro es el que compra.
| Borrador junior | Corregido | |
|---|---|---|
| Iconos sobre la foto | 4 | 2 |
| Insignias sobre la foto | 3 | 0 |
| Precio | Uno de 5 números en una fila | Su propia línea, precio anterior tachado, 19% de descuento al lado |
| Cajas de talla | 41 por 32 px, una fila de 8 | Chips de 44 px, cuadrícula de 2 filas |
| Talla elegida | Un borde de 1 px | Relleno #111111 |
| Talla agotada | Igual que las demás | Tachada sobre gris |
| Botones de compra | 2 botones en mayúsculas y un enlace | 1 botón en una barra fija |
| Pestañas | 5 | Ninguna |
| Margen lateral | 14 px izquierda, 12 px derecha | 20 px en ambos lados |
| Tamaños de texto | 9 a 14 px | 12 a 22 pt |
Corrección 1: una foto sin nada encima
Antes
Después
Cuatro iconos y tres insignias sobre la foto, frente a un botón de volver y uno de guardar.
El borrador pone toda la tienda encima del producto. Volver, compartir, guardar y un carrito con un "3" rojo recorren la parte superior. "Novedad", "-19%" y "Envío gratis" se apilan abajo a la izquierda, sobre la punta del zapato.
La corrección deja dos botones redondos de 40 px sobre la foto: volver y guardar. Lo demás se mudó adonde corresponde. El descuento va junto al precio, la línea de envío va bajo el total en la barra inferior, y los puntos que cuentan las fotos van debajo de la foto.
La regla para reutilizar: una foto de producto es el producto. Todo lo que no ayude al comprador a juzgar el zapato va en otro sitio.
Corrección 2: primero el nombre, luego el precio
Antes
Después
Un precio en una fila de números, frente a un precio en su propia línea.
El borrador pone la marca en mayúsculas grises de 9 px, un nombre de producto que se parte en dos líneas y luego una fila: "$129.00 | 4.8 (2,341 reseñas) | 1.2k vendidos". Cinco números comparten línea con el mismo tamaño, y el precio hay que encontrarlo entre ellos.
La corrección da al nombre su propia línea en tipografía grande. El precio también tiene línea propia: "$129" en grande, el antiguo "$159" tachado a su lado y un pequeño chip de "19% de descuento". La valoración, las reseñas y las ventas van debajo en una línea más discreta, porque apoyan la decisión y el precio la toma. Ambas pantallas llevan los mismos números: 129 entre 159 es 0,81, así que el 19% de descuento es cierto.
La regla para reutilizar: cuando varios números comparten línea, uno es el que el comprador necesita. Dale su propia línea y tamaño.
Una regla de precios que conviene revisar
Un precio tachado tiene un lado legal en algunos lugares.
Corrección 3: tallas que muestran cuál está elegida
Antes
Después
Ocho cajas pequeñas, frente a una cuadrícula de chips con estados que se ven.
Las cajas de talla del borrador miden 41 por 32 px en una sola fila. La talla elegida, la 8,5, tiene un borde 1 px más oscuro, y la 9,5 agotada se ve igual que las tallas disponibles. Los tres puntos de color no tienen nombre.
La corrección convierte cada talla en un chip de 44 px en dos filas de cuatro. La elegida va rellena de #111111 con texto blanco. La agotada va tachada sobre gris, así que se lee como no disponible antes de que nadie la toque. Los colores reciben nombre bajo las muestras: Carmesí, Negro y Lima, con la elegida rodeada por un anillo.
Los 44 px de alto importan. La guía de Apple pide un área táctil de al menos 44 por 44 puntos, y una caja de 32 px en una fila de ocho es fácil de fallar.
La regla para reutilizar: cada opción necesita tres estados visibles, disponible, elegida y no disponible. Exprésalos con relleno, no con una línea finísima.
Corrección 4: una barra que compra
Antes
Después
Dos botones en mayúsculas y un enlace, frente al precio y un solo botón.
El borrador cierra con un selector de cantidad, un "AÑADIR AL CARRITO" con borde, un "COMPRAR AHORA" negro y un pequeño enlace "Añadir a favoritos". Dos botones de casi el mismo peso obligan al comprador a elegir cómo comprar, y además se van con el scroll de la página.
La corrección cierra con una barra que se queda abajo: "$129", "Envío gratis" debajo y un solo botón negro "Añadir a la bolsa". Favoritos es el botón de guardar sobre la foto. La barra de pestañas también se fue, porque cinco pestañas bajo una barra de compra compiten con ella.
La regla para reutilizar: da a la acción principal un solo botón y mantén el precio a su lado.
Las correcciones menores
- Un solo borde izquierdo. Los márgenes del borrador eran de 14 px a la izquierda y 12 px a la derecha. La corrección usa 20 px en ambos lados.
- Una escala tipográfica real. El texto pasó de 9 a 14 px a tamaños de iOS de 12 a 22 pt.
- Mayúscula solo inicial. "AÑADIR AL CARRITO" y "COMPRAR AHORA" en mayúsculas pasaron a "Añadir a la bolsa".
- Un enlace más discreto. "Guía de tallas" en azul pasó a gris, ya que apoya la elección y no es la elección.
Audita tu propia página de producto
| Pregunta | Por qué importa |
|---|---|
| ¿Está la foto libre de todo salvo volver y guardar? | El comprador vino a mirar el producto |
| ¿Está el precio en su propia línea? | Es el número que todo comprador busca |
| ¿Distingues la talla elegida desde el otro lado de la habitación? | Un borde finísimo no es un estado |
| ¿Se ve distinta una talla agotada antes de tocarla? | Ahorra un toque fallido |
| ¿Se queda el precio en pantalla mientras la página se desplaza? | El precio y la acción van juntos |
FAQ
¿Qué debe mostrar primero una página de producto de zapatillas?
La foto, sin nada encima salvo volver y guardar. Luego el nombre, y después el precio en su propia línea.
¿Cómo se diseña un selector de tallas para zapatos?
Haz de cada talla un chip de al menos 44 px, rellena la elegida con un color oscuro y tacha las tallas agotadas. Un borde finísimo alrededor de la talla elegida es demasiado débil para leerse.
¿Cómo debe mostrarse un precio rebajado en una página de producto?
Muestra el precio actual grande, el precio anterior tachado a su lado y el porcentaje de descuento en un chip pequeño. Las dos pantallas de aquí usan $129, $159 y 19% de descuento. Consulta las normas locales sobre qué precio anterior puedes mostrar.
¿Debe una página de producto tener Añadir al carrito y Comprar ahora?
Un solo botón principal es más claro. Dos botones del mismo peso hacen que el comprador elija cómo comprar antes de haber decidido comprar.
¿Debe una página de producto tener barra de pestañas?
No en esta pantalla. La página tiene un solo trabajo, y una barra de pestañas bajo la barra de compra compite con él.
Fuentes
- Ambas pantallas son nuestras, diseñadas y medidas en Figma. El nombre del producto, la marca, los precios y las reseñas son inventados.
- Foto del producto vía Pexels por Ahimsa - OM.
- Apple Human Interface Guidelines: Typography, para los tamaños de texto de iOS usados en la pantalla corregida.
- Apple Human Interface Guidelines: Accessibility, para el tamaño del área táctil de 44 pt.
- Comunicación de la Comisión Europea sobre la interpretación del artículo 6 bis de la Directiva 98/6/CE, para la regla del precio anterior.
- Publicado por primera vez como carrusel en App Brainy.
Want this for your own app? Our team redesigns product pages and shop apps like this one, from the first audit to the finished components.
Get Started
