Diseño de apps de café: rediseño de la pantalla de inicio para pedir, antes y después
Una pantalla de inicio para pedir café con una línea de tienda de 54 caracteres, un banner de puntos a gritos, ocho pestañas que se salen del borde y un botón AÑADIR bajo cada foto, y la misma pantalla corregida. Cada cambio lado a lado, la razón de cada uno y el archivo gratis de Figma.
Una persona abre una app de café para hacer una sola cosa: pedir una bebida y recogerla. El primer borrador de abajo tiene las cosas correctas, pero las dice todas a la vez: una línea de tienda larguísima, un banner que grita sobre puntos, ocho pestañas y un botón AÑADIR bajo cada foto. La corrección mantiene la tienda, los puntos y el menú, y le da a cada uno un único lugar tranquilo.
La pantalla completa, antes y después
Borrador junior
Corregida
A la izquierda, la persona se encuentra un saludo, una línea de tienda, un banner de puntos, una tira de pestañas y una cuadrícula de botones, todo con el mismo volumen. A la derecha, hay una sola cosa que leer por bloque y una sola acción por fila.
| Borrador junior | Corregida | |
|---|---|---|
| Tienda | Una línea de 54 caracteres en una caja con borde | Una tarjeta de recogida con enlace Cambiar |
| Puntos | Un banner con tres signos de exclamación | Una tarjeta de progreso: 250 puntos para una bebida gratis |
| Pestañas de categoría | 8, saliéndose del borde | 4 chips, uno seleccionado |
| Productos | Una cuadrícula de 2 por 3 tarjetas | Filas con foto de 60 px |
| Botones de añadir | Un AÑADIR mantequilla ancho bajo cada foto | Un botón redondo por fila |
| Pestañas en la barra | 5 | 4 |
| Margen lateral | 14 px izquierda, 12 px derecha | 20 px, con 16 px entre bloques |
| Tamaños de texto | 9 a 18 px | 11 a 28 pt |
Corrección 1: di dónde, una sola vez
Antes
Después
Una línea de tienda embutida en una caja, frente a una tarjeta de recogida.
El borrador mete la tienda en una sola línea: "Downtown Store - 123 Main St (0.3 mi) - Open until 9PM", 54 caracteres en letra pequeña dentro de una caja con borde y un chevron al final. El nombre, la calle, la distancia y el horario pesan lo mismo, así que el ojo lee toda la línea para encontrar el único dato que necesita.
La corrección convierte la línea en una tarjeta de recogida. "Recoger en Downtown" es el título, "0,3 mi · Abierto hasta las 9 pm" es una línea gris debajo, y "Cambiar" va a la derecha en el azul de la marca como una acción de verdad. La dirección de la calle no está en la pantalla de inicio. El saludo creció a un gran "Buenos días, Leo" y los signos de exclamación desaparecieron.
La regla para reutilizar: divide una línea larga en un título, un detalle y una acción. Una caja con chevron dice "tócame" con menos claridad que una palabra que dice "Cambiar".
Corrección 2: puntos como progreso
Antes
Después
Un banner a gritos, frente a una barra de progreso.
El banner del borrador se degrada de azul a amarillo mantequilla, y su texto blanco queda sobre el extremo amarillo, donde es más difícil de leer. Dice "¡Tienes 1.250 puntos! ¡Canjea ya bebidas GRATIS!!!" y la píldora Canjear ahora de abajo es blanca con texto amarillo pálido. Dice que tienen puntos, pero no cuán cerca están de algo.
La corrección es una tarjeta azul profundo. "Recompensas" y "1.250 puntos" van arriba, y la línea grande es "250 puntos para una bebida gratis". Una barra de progreso mantequilla debajo se llena al 83%, que son 1.250 de 1.500, y la línea pequeña dice dónde está la bebida gratis. La persona ve la distancia, que es el número interesante.
La regla para reutilizar: un saldo de puntos es un número, y el progreso es una historia. Muestra la historia y deja el número a un lado.
Corrección 3: cuatro chips, uno seleccionado
Antes
Después
Ocho pestañas saliéndose del borde, frente a cuatro chips.
El borrador tiene ocho categorías: Café, Té, Bebidas frías, Temporada, Panadería, Desayuno, Merch y Tarjetas regalo. Se salen por el borde derecho, así que "Merch" queda cortado en "Mer", y la persona tiene que deslizar de lado para enterarse de que hay más. La seleccionada se marca con un subrayado fino.
La corrección muestra cuatro chips: Todo, Café, Bebidas frías y Panadería. Todo va relleno del azul de la cafetería y los demás son blancos, así que la seleccionada se ve de un vistazo. Las otras categorías no están en esta pantalla; una app real las guardaría en la pestaña Menú, a un toque de distancia.
La regla para reutilizar: una fila de filtros debe caber en la pantalla. Si necesita deslizar de lado para mostrar su propia lista, muestra menos.
Corrección 4: una fila por producto
Antes
Después
Una cuadrícula de tarjetas con un botón mantequilla bajo cada una, frente a tres filas.
El borrador muestra los productos como una cuadrícula de tarjetas: una foto grande, un nombre, un precio y un botón mantequilla "AÑADIR +" en mayúsculas. Dos filas y media de tarjetas llenan la pantalla bajo las pestañas, el mantequilla de los botones se repite bajo cada foto, y el enlace "Ver menú" es amarillo pálido sobre blanco.
La corrección convierte cada producto en una fila con foto de 60 px, el nombre, una línea gris y el precio, y un "+" azul redondo a la derecha. Caben tres filas en una tarjeta donde la cuadrícula mostraba dos tarjetas y media, y el único botón de cada fila es el de añadir. "Menú completo" va en el azul de la marca.
La regla para reutilizar: cuando todos los productos tienen la misma acción, la acción debe ser pequeña y estar alineada, para que el ojo lea nombres y precios por un solo borde.
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 a ambos lados y 16 px entre bloques.
- Una escala tipográfica de verdad. El texto pasó de 9 a 18 px a los tamaños de iOS de 11 a 28 pt.
- Cuatro pestañas, no cinco. Inicio, Menú, Pedido, Recompensas y Cuenta pasaron a ser Inicio, Menú, Recompensas y Cuenta. La pestaña Pedido salió de la barra.
- Una paleta de cuatro. Cobalto café #2342A8, azul profundo #15276B, mantequilla #F3C77A y crema #F5EFE4 reemplazan un degradado y un fondo gris.
Audita tu propia pantalla de pedidos
| Pregunta | Por qué importa |
|---|---|
| ¿Puede la persona leer la tienda de recogida de un vistazo? | Decide si puede pedir siquiera |
| ¿Las recompensas muestran progreso o solo un saldo? | La distancia es el número interesante |
| ¿La fila de categorías cabe sin deslizar de lado? | Una pestaña cortada oculta qué más existe |
| ¿Cada producto repite un botón ancho? | Un botón pequeño de añadir por fila basta |
FAQ
¿Qué debe mostrar primero la pantalla de inicio de una app para pedir café?
La tienda de recogida en una tarjeta con un enlace Cambiar, luego el progreso de recompensas, luego las categorías y los productos populares. La persona debe ver dónde pide antes que qué pide.
¿Cómo se diseña una sección de puntos de fidelidad?
Muestra la distancia a la próxima recompensa como una barra de progreso y una línea clara, como "250 puntos para una bebida gratis", y deja el saldo a un lado.
¿Cuántas pestañas de categoría debe tener un menú?
Todas las que quepan en la pantalla sin deslizar de lado, normalmente cuatro. Pon el resto en la pestaña Menú, a un toque de distancia.
¿Un menú debe usar cuadrícula o lista?
Una lista de filas funciona mejor para pedir, porque los nombres y precios se alinean en un borde y cada fila necesita un solo botón pequeño de añadir. Una cuadrícula va bien para explorar fotos.
¿De qué tamaño debe ser un botón de añadir?
Al menos 44 por 44 puntos para tocarlo, aunque el círculo visible sea más pequeño. La pantalla corregida usa un botón azul redondo por fila.
Fuentes
- Ambas pantallas son nuestras, diseñadas y medidas en Figma. La tienda, su dirección, los precios y los puntos son inventados.
- Fotos del menú vía Pexels de Duc Nguyen, Melissa Jansen van Rensburg, Marcelo Verfe, Juan Pablo Serrano, Skyler Ewing y Vinícius Vieira ft.
- 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.
- Kivetz, Urminsky y Zheng, The Goal-Gradient Hypothesis Resurrected, Journal of Marketing Research, 2006, sobre clientes que compran con más frecuencia a medida que se llena una tarjeta de fidelidad.
- Publicado por primera vez como carrusel en App Brainy.
Want this for your own app? Our team redesigns ordering apps like this one, from the first audit to the finished components.
Get Started
