Diseño de apps de comida a domicilio: rediseño de la pantalla de inicio, antes y después
Una pantalla de inicio de comida a domicilio hecha por un junior donde cada parte grita, y la misma pantalla corregida. Cuatro cambios principales, cinco menores, la razón de cada uno y el archivo de Figma gratis.
La pantalla de inicio de una app de comida a domicilio tiene un solo trabajo: llevar a una persona con hambre a un restaurante en pocos segundos. El primer borrador de abajo fracasa en ese trabajo, no porque alguna parte sea fea, sino porque todas piden atención a la vez. La solución no fueron funciones nuevas ni un estilo nuevo. Fue quitar cosas hasta que cada parte dijera una sola cosa.
La pantalla completa, antes y después
Borrador junior
Corregida
Cuenta lo que el ojo tiene que procesar antes de llegar al primer restaurante. A la izquierda: una dirección completa, dos iconos en el encabezado, una barra de búsqueda con dos iconos más, un banner con degradado, tres líneas de texto y un botón, puntos de carrusel, cinco anillos en cinco colores, un título de sección con un icono de llama y tres insignias en una sola foto. A la derecha: el nombre de un lugar, un carrito, una barra de búsqueda, cinco mosaicos, una oferta y una tarjeta.
A la derecha no falta ninguna función que tuviera la izquierda. La dirección, la búsqueda, las categorías, la oferta y los restaurantes siguen ahí. Cada uno simplemente dejó de competir con los demás.
| Borrador junior | Corregida | |
|---|---|---|
| Márgenes laterales | 12 px a la izquierda, 16 px a la derecha | 20 px en ambos lados |
| Tamaños de texto | De 9 a 30 px, sin sistema | Estilos de texto de iOS, de 11 a 22 pt |
| Colores de anillo de categoría | 5 | 1, solo en el mosaico seleccionado |
| Insignias en la primera tarjeta | 3 | 1 |
| Datos bajo el nombre del restaurante | 6 | 2 |
| Pestañas | 5 | 4 |
Arreglo 1: di dónde, en una palabra
Antes
Después
El borrador muestra la dirección completa, 221B Baker Street, cortada a media palabra con letra pequeña junto a un pin. La solución muestra el nombre que la persona le dio a esa dirección, "Casa", en grande, con una flecha que indica que se puede cambiar.
Nadie abre una app de comida a domicilio para leer su propia dirección. Solo necesita confirmar una cosa: ¿esto va al lugar correcto? Una etiqueta que eligió uno mismo, Casa, Trabajo, Casa de mamá, responde eso más rápido que el nombre de una calle, y se lee bien con cualquier longitud porque es una sola palabra. La dirección completa queda a un toque, en la pantalla donde se edita.
La solución también quita el icono de perfil del encabezado. El borrador lo tenía dos veces, una arriba y otra como pestaña de Cuenta. Dos puertas a la misma habitación hacen que la gente se pregunte si llevan a habitaciones distintas.
Arreglo 2: una forma, un estado seleccionado
Antes
Después
Antes, cada una de las 5 categorías está en un círculo con su propio anillo de color: amarillo, verde, azul, rosa, morado. Después, los mosaicos comparten una forma y un marco neutro, y solo el seleccionado, Pizza, recibe el rojo de marca en el borde y en la etiqueta.
El color en una interfaz es una señal, y cinco colores envían cinco señales. Quien escanea la fila tiene que preguntarse qué significa el verde y por qué el sushi es azul. La respuesta es nada, que es justo el problema: decoración que parece información.
Cuando el color se gasta en una sola cosa, significa algo. Un único mosaico rojo dice "estás aquí" sin una palabra. Las fotos hacen el resto, porque las fotos de comida ya son lo más colorido de la pantalla y no necesitan ayuda.
Arreglo 3: una oferta, un mensaje
Antes
Después
El banner del borrador apila "¡MEGA REBAJA!", la oferta, el código, el pedido mínimo y "Aplican T&C" en letra diminuta, y luego un botón. La solución mantiene el 50% DE DESCUENTO y dice tres cosas: cuándo (Solo hoy), para quién es (tu primer pedido de más de $20) y el código, como un botón que se puede copiar.
La oferta nunca fue el problema. 50% de descuento es una buena razón para pedir, y la solución la mantiene del mismo tamaño.
Lo que cambió es todo lo que la rodea. "¡MEGA REBAJA!" y "50% DE DESCUENTO" decían lo mismo dos veces. La letra pequeña metía cuatro datos en una línea a 9 px, separados por barras. El botón "Pedir ahora" no tenía adónde ir, porque todavía no hay un restaurante concreto donde pedir.
Ahora el código es la acción. Al tocarlo se copia YUMMY50, que es lo único que una persona necesita llevarse de este banner al pago. Las condiciones también se mueven al pago, donde sí aplican.
La imagen también cambió. El borrador recorta la hamburguesa en un círculo que flota sobre un degradado naranja. La solución la fotografía sobre el rojo de marca, así que la comida está en la tarjeta misma y no en una calcomanía pegada encima.
Arreglo 4: una insignia, dos datos
Antes
Después
Antes, la foto lleva tres insignias (Envío gratis, 20% DE DESCUENTO, Promocionado) y el texto de abajo enumera cocinas, tiempo de entrega, costo de envío, nivel de precio, pedido mínimo y horario. Después, una insignia, el nombre, la calificación y dos datos: cuánto tarda y cuánto cuesta.
Una tarjeta de restaurante en una lista se lee en cerca de un segundo, y en ese segundo la persona decide dos cosas: ¿quiero esta comida? y ¿vale la espera y el envío? La tarjeta corregida responde justo eso. La foto responde lo primero. "25 a 35 min, envío $2.99" responde lo segundo.
Todo lo demás en la tarjeta vieja es información real, pero no de primera mirada. La lista de cocinas ya se ve en la foto. El pedido mínimo de $15 y el cierre a las 11 PM importan solo cuando ya elegiste, así que van en la página del propio restaurante.
"Promocionado" es para el negocio, no para el cliente, y tres insignias lado a lado se anulan entre sí. Una insignia, elegida por prioridad, sí se lee.
Cinco arreglos menores
Las cuatro partes de arriba son las grandes. Estos cinco cambios son igual de deliberados:
- Un solo margen. El borrador usaba 12 px a la izquierda y 16 px a la derecha, así que nada se alineaba con nada. La solución usa 20 px en ambos lados, y cada borde de la pantalla queda sobre esa línea.
- Un sistema tipográfico. El borrador tenía texto de 9 a 30 px sin escalones entre ellos. La solución usa los estilos de texto de iOS, de 11 a 22 pt, así que cada tamaño tiene un papel y nada es demasiado pequeño para leerse.
- Una barra de búsqueda más callada. La búsqueda del borrador tenía un micrófono y un icono de filtro dentro, y un texto de ayuda tan largo que se cortaba. La solución mantiene un icono y una indicación más corta: "Platos, restaurantes o cocinas".
- Sin puntos de carrusel. Los puntos bajo un banner prometen más banners. La mayoría nunca desliza, y los puntos añaden una cosa más que mirar. Una oferta no necesita puntos.
- Cuatro pestañas, no cinco. Favoritos salió de la barra de pestañas. Guardar sigue ocurriendo en el corazón de cada tarjeta, y cuatro pestañas dan a cada una más espacio y un objetivo más fácil de tocar.
Audita tu propia pantalla de inicio
Pon la pantalla de inicio de tu app junto a esta lista. Cada "no" es una parte que está gritando.
| Pregunta | Por qué importa |
|---|---|
| ¿Alguien puede saber adónde entrega de un vistazo? | Lo revisa cada vez; hazlo una sola palabra |
| ¿El color significa algo en todos los lugares donde se usa? | El color decorativo se lee como señal |
| ¿Cada promoción dice una oferta, una vez? | Las afirmaciones repetidas y la letra pequeña se saltan |
| ¿Se puede juzgar una tarjeta en un segundo? | Elige los dos datos que deciden un pedido |
| ¿Todos los bordes se alinean en un solo margen? | El desalineo parece inacabado |
| ¿Cada tamaño de texto sale de una sola escala? | Los tamaños aleatorios hacen imposible la jerarquía |
Consigue el archivo de Figma
El archivo gratis tiene ambas pantallas como componentes, cada arreglo como par de antes y después, las variables de color y los estilos de texto de iOS.
Archivo de Figma gratis
Pantalla de inicio de comida a domicilio, antes y después
Ambas pantallas y cada parte corregida como componentes de Figma. Gratis, solo lectura, duplícalo en tus borradores.
FAQ
¿Qué debería mostrar primero la pantalla de inicio de una app de comida a domicilio?
Adónde va el pedido, una barra de búsqueda, las categorías y una oferta, y después los restaurantes. Cada tarjeta de restaurante necesita una foto, el nombre, la calificación, el tiempo de entrega y el costo de envío.
¿Cuántas insignias debería tener una tarjeta de restaurante?
Una. Tres insignias lado a lado se anulan entre sí; elige la que más le importe al cliente, como el envío gratis.
¿Una app de comida debería usar un color distinto para cada categoría?
No. Da a todas las categorías la misma forma y un marco neutro, y gasta el color de marca solo en la seleccionada, para que el color signifique "estás aquí".
¿Cómo se diseña un banner de promoción que convierta?
Di una oferta una sola vez: el descuento, para quién es y el código. Haz que el código sea la acción, con un toque para copiarlo, y mueve las condiciones al pago.
¿Cuántas pestañas debería tener una app de comida a domicilio?
Cuatro o cinco como máximo. Aquí cuatro (Inicio, Búsqueda, Pedidos, Cuenta) dieron a cada pestaña más espacio, con el guardado resuelto por el corazón de cada tarjeta.
Fuentes
- Ambas pantallas son propias, diseñadas y medidas en Figma. Las medidas de la tabla salen de los archivos de Figma.
- Fotos de comida vía Unsplash de Fernando Andrade, sina piryae, Mahmoud Fawzy, Anna Pelzer, Alana Harris, Thimotius Timmy y Poul Hoang. Hamburguesa de la promoción de Elements Interactive en Pexels, con el fondo de estudio reemplazado por el rojo de marca mediante color, sin IA.
- Tamaños de texto de iOS de las Human Interface Guidelines, Typography de Apple.
- Publicado por primera vez como carrusel en App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
