Design de app de reserva de hotel: redesign da tela inicial, antes e depois
Uma tela inicial júnior de app de reserva de hotel que abre com um formulário de quatro campos, e a mesma tela corrigida. Cada mudança lado a lado, o motivo de cada uma e o arquivo grátis do Figma.
A tela inicial de um app de viagem precisa fazer a pessoa querer ir a algum lugar antes de pedir qualquer coisa. O primeiro rascunho abaixo faz o contrário: abre com um formulário de quatro campos, lista os destinos como palavras soltas e espalha um único preço por seis linhas. A correção mantém todas as funcionalidades e muda a ordem do que você vê.
A tela inteira, antes e depois
Rascunho júnior
Corrigido
À esquerda, a primeira coisa na tela é uma tarefa: onde, check-in, check-out, hóspedes e então um botão com gradiente. Os lugares só aparecem depois do formulário, como cinco pílulas cinza de texto. À direita, a busca é um único card, e mais da metade da tela são fotos de lugares e hospedagens.
Todas as funcionalidades sobreviveram. Você ainda busca por lugar, datas e hóspedes, navega por destinos e vê os preços dos hotéis. A correção levou a burocracia para um card compacto e devolveu o espaço ao motivo pelo qual as pessoas abrem um app de viagem.
| Rascunho júnior | Corrigido | |
|---|---|---|
| Campos antes de qualquer conteúdo | 4 campos e um botão de 44 px | 1 campo e 2 chips |
| Destinos | 5 pílulas de texto | Cards com foto, cidade e país |
| Linhas de preço em cada card de hotel | 6 | 1, mais um detalhe |
| Cabeçalho | Um slogan e dois ícones | Uma pergunta e um ícone |
| Abas | 5 | 4 |
Correção 1: faça a pergunta, largue o slogan
Antes
Depois
"Explore o mundo, encontre a hospedagem perfeita com a gente!" ao lado de um coração e um sino, contra "Para onde agora?" ao lado de um sino com um ponto.
Um slogan na tela inicial é escrito para a empresa. Uma pergunta é escrita para quem está segurando o celular, e aponta direto para o card de busca logo abaixo. "Para onde agora?" também é o que um amigo perguntaria, que é o tom que um app de viagem quer ter.
O coração saiu do cabeçalho porque os lugares salvos já têm sua própria aba. O sino ficou, com um ponto quando há novidade, porque uma queda de preço ou uma mudança na reserva é a única coisa que vale uma interrupção.
Correção 2: um card de busca, datas e hóspedes como chips
Antes
Depois
Quatro campos empilhados (destino, check-in, check-out, hóspedes) e um botão laranja com gradiente, contra um campo de destino com "14 a 16 de nov" e "2 hóspedes" como chips e um botão redondo com seta.
O formulário de quatro campos pede que a pessoa tome todas as decisões antes de ver um único lugar. A maioria de quem abre o app não está pronta para isso: está navegando. Um formulário que ocupa um terço da tela é um muro para essa pessoa.
Datas e hóspedes raramente mudam entre uma busca e outra, então a correção os mostra como chips com valores padrão sensatos, tocáveis quando precisam mudar. O destino é o único campo que exige digitação. O par check-in e check-out vira um só chip, "14 a 16 de nov", porque ninguém pensa em uma estadia como duas datas separadas.
Correção 3: mostre lugares, não nomes
Antes
Depois
"Lisboa, Kyoto, Cidade do Cabo, Bali, Paris" como pílulas de texto cinza, contra cards com fotos de Lisboa e Kyoto com o país embaixo de cada nome, e o próximo card aparecendo na borda.
As pessoas escolhem um destino com os olhos. Uma palavra como "Kyoto" pede que o leitor imagine o lugar; a foto de um pagode ao entardecer imagina por ele. Esse é o trabalho inteiro dessa seção, e pílulas de texto não dão conta.
O card cortado na borda direita é proposital. Ele avisa que a fileira rola sem precisar de setas ou pontinhos, e que há mais lugares para descobrir com um deslize.
Correção 4: um preço por hospedagem
Antes
Depois
Uma miniatura pequena com selo de -30%, cinco estrelas, a cidade, um $320 riscado, $224 por noite, "+$38 de impostos e taxas" e duas vantagens em verde, contra uma foto grande com nota 4,8, o nome, "$224 a noite" e "Lisboa, Cancelamento grátis".
O card do rascunho mostra o preço de quatro formas ao mesmo tempo: o preço antigo, o novo, a unidade e as taxas extras, além de um selo de desconto na foto repetindo pela quinta vez. O leitor precisa fazer conta antes de decidir se gosta do hotel.
A correção mostra um número e um detalhe. A foto é maior porque é a foto que vende a hospedagem. O detalhe é o que tira mais preocupação, cancelamento grátis, e a nota substitui cinco estrelas desenhadas por um número que dá para comparar.
As correções menores
- Quatro abas, não cinco. Explorar, Salvos, Viagens e Perfil. Início e Explorar viraram uma aba só, Explorar, porque a tela inicial é onde a exploração acontece.
- Palavras que as pessoas usam. "Wishlist" virou "Salvos" e "Reservas" virou "Viagens", as palavras que viajantes realmente dizem.
- Um único destaque. O rascunho usava gradiente laranja no botão, verde nas vantagens e vermelho nos descontos. A correção usa preto para ações e deixa as fotos trazerem a cor.
- Nomes mais curtos. "Grand Riviera Resort & Spa" virou "Grand Riviera Resort" no card, para o nome caber em uma linha ao lado do preço.
Faça a auditoria do seu próprio app de viagem
| Pergunta | Por que importa |
|---|---|
| Dá para ver um lugar antes de preencher um campo? | Quem só navega é mais numeroso que quem reserva na tela inicial |
| Datas e hóspedes vêm preenchidos e editáveis como chips? | Raramente mudam entre buscas |
| Os destinos são fotos? | As pessoas escolhem lugares com os olhos |
| Cada hospedagem mostra um só preço? | Quatro preços obrigam o leitor a fazer conta |
| Duas abas levam ao mesmo lugar? | Portas duplicadas deixam as pessoas inseguras |
Pegue o arquivo do Figma
O arquivo grátis traz as duas telas como componentes, cada correção em um par antes e depois, as variáveis de cor e os estilos de texto do iOS.
Arquivo grátis do Figma
Tela inicial de reserva de hotel, antes e depois
As duas telas e cada parte corrigida como componentes do Figma. Grátis, somente visualização, duplique para os seus rascunhos.
FAQ
O que a tela inicial de um app de reserva de hotel deve mostrar primeiro?
Uma pergunta curta, um campo de busca e fotos de lugares. Datas e hóspedes podem ficar no card de busca como chips editáveis, assim a navegação vem antes de qualquer formulário.
Como os preços de hotel devem ser mostrados em um app?
Um preço claro por hospedagem, com um detalhe de apoio como cancelamento grátis. Onde houver taxas obrigatórias, inclua-as no preço principal.
Um app de viagem deve mostrar destinos como fotos ou texto?
Fotos. As pessoas escolhem lugares visualmente, e um card cortado na borda da tela mostra que a fileira rola sem controles extras.
Quantas abas um app de reserva deve ter?
Quatro ou cinco. Una duas abas que levam ao mesmo lugar e nomeie as abas com as palavras que viajantes usam, como Salvos e Viagens.
Fontes
- As duas telas são nossas, desenhadas e medidas no Figma.
- Fotos via Unsplash por Vali Sachadonig, Zion C, Asher Pardey, Roberto Nickson e Travis Chen.
- Regra da FTC sobre taxas injustas ou enganosas, que abrange hospedagem de curta duração, em vigor desde 12 de maio de 2025.
- Publicado originalmente como carrossel no 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
