Diseño de apps de reserva de hoteles: rediseño de la pantalla de inicio, antes y después
La pantalla de inicio de una app de reservas de hotel hecha por un junior, que abre con un formulario de cuatro campos, y la misma pantalla corregida. Cada cambio lado a lado, el porqué de cada uno y el archivo gratis de Figma.
La pantalla de inicio de una app de viajes tiene que hacer que alguien quiera irse a algún sitio antes de preguntarle nada. El primer borrador de abajo hace justo lo contrario: abre con un formulario de cuatro campos, lista los destinos como palabras sueltas y reparte un solo precio en seis líneas. La corrección mantiene todas las funciones y cambia el orden de lo que ves.
La pantalla completa, antes y después
Borrador junior
Corregida
A la izquierda, lo primero que aparece en pantalla es una tarea: dónde, entrada, salida, huéspedes y luego un botón con degradado. Los lugares aparecen solo después del formulario, como cinco píldoras grises de texto. A la derecha, la búsqueda es una sola tarjeta y más de la mitad de la pantalla son fotografías de lugares y alojamientos.
Todas las funciones sobrevivieron. Sigues pudiendo buscar por lugar, fechas y huéspedes, explorar destinos y ver precios de hoteles. La corrección metió el papeleo en una tarjeta compacta y devolvió el espacio a la razón por la que la gente abre una app de viajes.
| Borrador junior | Corregida | |
|---|---|---|
| Campos antes de cualquier contenido | 4 campos y un botón de 44 px | 1 campo y 2 chips |
| Destinos | 5 píldoras de texto | Mosaicos con foto, ciudad y país |
| Líneas de precio en cada tarjeta de hotel | 6 | 1, más un detalle |
| Encabezado | Un eslogan y dos iconos | Una pregunta y un icono |
| Pestañas | 5 | 4 |
Corrección 1: haz la pregunta, olvida el eslogan
Antes
Después
"¡Explora el mundo, encuentra tu alojamiento perfecto con nosotros!" junto a un corazón y una campana, frente a "¿Adónde vamos ahora?" junto a una campana con un punto.
Un eslogan en una pantalla de inicio se escribe para la empresa. Una pregunta se escribe para la persona que sostiene el móvil, y apunta directo a la tarjeta de búsqueda de debajo. "¿Adónde vamos ahora?" es además lo que preguntaría un amigo, que es el tono que quiere una app de viajes.
El corazón salió del encabezado porque los lugares guardados ya tienen su propia pestaña. La campana se quedó, con un punto cuando hay algo nuevo, porque una bajada de precio o un cambio en una reserva es lo único por lo que vale la pena interrumpir.
Corrección 2: una tarjeta de búsqueda, fechas y huéspedes como chips
Antes
Después
Cuatro campos apilados (destino, entrada, salida, huéspedes) y un botón naranja con degradado, frente a un campo de destino con "14 al 16 nov" y "2 huéspedes" como chips y un botón redondo con flecha.
El formulario de cuatro campos le pide a la persona que tome todas las decisiones antes de haber visto un solo lugar. La mayoría de quienes abren la app no está lista para eso: está curioseando. Un formulario que ocupa un tercio de la pantalla es un muro para ellos.
Las fechas y los huéspedes rara vez cambian entre búsquedas, así que la corrección los muestra como chips con valores razonables por defecto, que se tocan cuando hay que cambiarlos. El destino es el único campo en el que hay que escribir. El par de entrada y salida se convierte en un solo chip, "14 al 16 nov", porque nadie piensa en una estancia como dos fechas separadas.
Corrección 3: muestra lugares, no nombres
Antes
Después
"Lisboa, Kioto, Ciudad del Cabo, Bali, París" como píldoras grises de texto, frente a mosaicos con fotos de Lisboa y Kioto con el país bajo cada nombre y el siguiente mosaico asomando por el borde.
La gente elige un destino con los ojos. Una palabra como "Kioto" le pide al lector que imagine el lugar; una foto de una pagoda al atardecer imagina por él. Ese es todo el trabajo de esta sección, y las píldoras de texto no pueden hacerlo.
El mosaico cortado en el borde derecho es deliberado. Le dice al lector que la fila se desplaza sin necesitar flechas ni puntos, así que hay más lugares por descubrir con un deslizamiento.
Corrección 4: un precio por alojamiento
Antes
Después
Una miniatura pequeña con una insignia de -30%, cinco estrellas, la ciudad, un $320 tachado, $224 por noche, "+$38 de impuestos y tasas" y dos ventajas en verde, frente a una foto grande con una valoración de 4,8, el nombre, "$224 noche" y "Lisboa, Cancelación gratis".
La tarjeta del borrador muestra el precio de cuatro maneras a la vez: el precio antiguo, el nuevo, la unidad y las tasas extra, además de una insignia de descuento sobre la foto que lo dice por quinta vez. El lector tiene que hacer cuentas antes de poder decidir si le gusta el hotel.
La corrección muestra un número y un detalle. La foto es más grande porque la foto es lo que vende la estancia. El detalle es el que más preocupaciones quita, la cancelación gratis, y la valoración sustituye cinco estrellas dibujadas por un número que se puede comparar.
Las correcciones pequeñas
- Cuatro pestañas, no cinco. Explorar, Guardados, Viajes y Perfil. Inicio y Explorar se fusionaron en una sola pestaña, Explorar, porque la pantalla de inicio es donde ocurre la exploración.
- Palabras que la gente usa. "Lista de deseos" pasó a ser "Guardados" y "Reservas" pasó a ser "Viajes", las palabras que los viajeros dicen de verdad.
- Un solo acento. El borrador usaba un degradado naranja para el botón, verde para las ventajas y rojo para los descuentos. La corrección usa negro para las acciones y deja que las fotos aporten el color.
- Nombres más cortos. "Grand Riviera Resort & Spa" pasó a ser "Grand Riviera Resort" en la tarjeta, para que el nombre quepa en una línea junto al precio.
Audita tu propia app de viajes
| Pregunta | Por qué importa |
|---|---|
| ¿Se puede ver un lugar antes de rellenar un campo? | En una pantalla de inicio, los curiosos superan a los que reservan |
| ¿Las fechas y los huéspedes vienen rellenados y son editables como chips? | Rara vez cambian entre búsquedas |
| ¿Los destinos son fotos? | La gente elige lugares con los ojos |
| ¿Cada alojamiento muestra un solo precio? | Cuatro precios obligan al lector a hacer cuentas |
| ¿Hay dos pestañas que llevan al mismo sitio? | Las puertas duplicadas generan dudas |
Consigue el archivo de Figma
El archivo gratis incluye ambas pantallas como componentes, cada corrección como par de antes y después, las variables de color y los estilos de texto de iOS.
Archivo gratis de Figma
Pantalla de inicio de reservas de hotel, antes y después
Ambas pantallas y cada parte corregida como componentes de Figma. Gratis, solo lectura, duplícalo en tus borradores.
FAQ
¿Qué debe mostrar primero la pantalla de inicio de una app de reservas de hotel?
Una pregunta corta, un campo de búsqueda y fotos de lugares. Las fechas y los huéspedes pueden ir en la tarjeta de búsqueda como chips editables, de modo que explorar vaya antes que cualquier formulario.
¿Cómo deben mostrarse los precios de hotel en una app?
Un precio claro por alojamiento, con un detalle de apoyo como la cancelación gratis. Donde se apliquen tasas obligatorias, inclúyelas en el precio principal.
¿Una app de viajes debe mostrar los destinos como fotos o como texto?
Fotos. La gente elige lugares de forma visual, y un mosaico cortado en el borde de la pantalla indica que la fila se desplaza sin controles extra.
¿Cuántas pestañas debe tener una app de reservas?
Cuatro o cinco. Fusiona dos pestañas que lleven al mismo sitio y nombra las pestañas con las palabras que usan los viajeros, como Guardados y Viajes.
Fuentes
- Ambas pantallas son nuestras, diseñadas y medidas en Figma.
- Fotos de Unsplash por Vali Sachadonig, Zion C, Asher Pardey, Roberto Nickson y Travis Chen.
- Norma de la FTC sobre tasas desleales o engañosas, que cubre el alojamiento de corta estancia, en vigor desde el 12 de mayo de 2025.
- 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
