Design d'appli de réservation d'hôtel : refonte d'un écran d'accueil, avant et après
Un écran d'accueil d'appli de réservation d'hôtel de niveau junior qui s'ouvre sur un formulaire à quatre champs, et le même écran corrigé. Chaque changement côte à côte, la raison de chacun, et le fichier Figma gratuit.
L'écran d'accueil d'une appli de voyage doit donner envie de partir quelque part avant de poser la moindre question. Le premier jet ci-dessous fait l'inverse : il s'ouvre sur un formulaire à quatre champs, liste les destinations en simples mots et étale un seul prix sur six lignes. La correction garde toutes les fonctionnalités et change l'ordre de ce qu'on voit.
L'écran entier, avant et après
Brouillon junior
Corrigé
À gauche, la première chose à l'écran est une corvée : où, arrivée, départ, voyageurs, puis un bouton dégradé. Les lieux n'apparaissent qu'après le formulaire, sous forme de cinq pastilles grises de texte. À droite, la recherche tient dans une seule carte, et plus de la moitié de l'écran est occupée par des photos de lieux et de séjours.
Toutes les fonctionnalités ont survécu. On peut toujours chercher par lieu, dates et voyageurs, parcourir les destinations et voir les prix des hôtels. La correction a rangé la paperasse dans une carte compacte et a rendu la place à la raison pour laquelle on ouvre une appli de voyage.
| Brouillon junior | Corrigé | |
|---|---|---|
| Champs à remplir avant tout contenu | 4 champs et un bouton de 44 px | 1 champ et 2 chips |
| Destinations | 5 pastilles de texte | Tuiles photo avec ville et pays |
| Lignes de prix sur chaque carte d'hôtel | 6 | 1, plus un détail |
| En-tête | Un slogan et deux icônes | Une question et une icône |
| Onglets | 5 | 4 |
Correction 1 : poser la question, jeter le slogan
Avant
Après
« Explorez le monde, trouvez votre séjour idéal avec nous ! » à côté d'un cœur et d'une cloche, contre « Où partir ensuite ? » à côté d'une cloche avec un point.
Un slogan sur un écran d'accueil est écrit pour l'entreprise. Une question est écrite pour la personne qui tient le téléphone, et elle pointe droit vers la carte de recherche en dessous. « Où partir ensuite ? » est aussi ce que demanderait un ami, et c'est le ton qu'une appli de voyage doit avoir.
Le cœur a quitté l'en-tête parce que les lieux enregistrés ont déjà leur propre onglet. La cloche est restée, avec un point quand il y a du nouveau, parce qu'une baisse de prix ou un changement de réservation est la seule chose qui mérite d'interrompre.
Correction 2 : une seule carte de recherche, dates et voyageurs en chips
Avant
Après
Quatre champs empilés (destination, arrivée, départ, voyageurs) et un bouton dégradé orange, contre un seul champ de destination avec « 14 au 16 nov. » et « 2 voyageurs » en chips et un bouton rond avec une flèche.
Le formulaire à quatre champs demande de prendre toutes les décisions avant d'avoir vu un seul lieu. La plupart des gens qui ouvrent l'appli n'y sont pas prêts : ils butinent. Un formulaire qui occupe un tiers de l'écran est un mur pour eux.
Les dates et les voyageurs changent rarement d'une recherche à l'autre, donc la correction les montre en chips avec des valeurs par défaut sensées, modifiables d'un tap. La destination est le seul champ à saisir. La paire arrivée et départ devient une seule chip, « 14 au 16 nov. », parce que personne ne pense un séjour comme deux dates séparées.
Correction 3 : montrer des lieux, pas des noms
Avant
Après
« Lisbonne, Kyoto, Le Cap, Bali, Paris » en pastilles de texte grises, contre des tuiles photo de Lisbonne et Kyoto avec le pays sous chaque nom, la tuile suivante dépassant du bord.
On choisit une destination avec les yeux. Un mot comme « Kyoto » demande au lecteur d'imaginer le lieu ; la photo d'une pagode au crépuscule imagine à sa place. C'est tout le travail de cette section, et les pastilles de texte en sont incapables.
La tuile coupée au bord droit est voulue. Elle indique que la rangée défile, sans flèches ni points, et qu'il y a d'autres lieux à découvrir d'un geste du doigt.
Correction 4 : un seul prix par séjour
Avant
Après
Une petite vignette avec un badge -30 %, cinq étoiles, la ville, un 320 $ barré, 224 $ par nuit, « +38 $ de taxes et frais » et deux avantages en vert, contre une grande photo avec une note de 4,8, le nom, « 224 $ la nuit » et « Lisbonne, annulation gratuite ».
La carte du brouillon montre le prix de quatre façons à la fois : l'ancien prix, le nouveau, l'unité et les frais en plus, sans compter un badge de réduction sur la photo qui le dit une cinquième fois. Le lecteur doit faire le calcul avant de savoir si l'hôtel lui plaît.
La correction montre un chiffre et un détail. La photo est plus grande parce que c'est la photo qui vend le séjour. Le détail est celui qui retire le plus d'inquiétude, l'annulation gratuite, et la note remplace cinq étoiles dessinées par un chiffre comparable.
Les petites corrections
- Quatre onglets, pas cinq. Explorer, Enregistrés, Voyages et Profil. Accueil et Explorer ont fusionné en un seul onglet, Explorer, parce que l'écran d'accueil est l'endroit où l'on explore.
- Les mots que les gens emploient. « Wishlist » est devenu « Enregistrés » et « Réservations » est devenu « Voyages », les mots que les voyageurs disent vraiment.
- Un seul accent. Le brouillon utilisait un dégradé orange pour le bouton, du vert pour les avantages et du rouge pour les réductions. La correction utilise du noir pour les actions et laisse les photos apporter la couleur.
- Des noms plus courts. « Grand Riviera Resort & Spa » est devenu « Grand Riviera Resort » sur la carte, pour que le nom tienne sur une ligne à côté du prix.
Auditez votre propre appli de voyage
| Question | Pourquoi c'est important |
|---|---|
| Peut-on voir un lieu avant de remplir un champ ? | Sur un écran d'accueil, les curieux sont plus nombreux que ceux qui réservent |
| Les dates et les voyageurs sont-ils préremplis et modifiables en chips ? | Ils changent rarement d'une recherche à l'autre |
| Les destinations sont-elles des photos ? | On choisit les lieux avec les yeux |
| Chaque séjour affiche-t-il un seul prix ? | Quatre prix obligent le lecteur à calculer |
| Deux onglets mènent-ils au même endroit ? | Les portes en double rendent les gens hésitants |
Récupérez le fichier Figma
Le fichier gratuit contient les deux écrans en composants, chaque correction en paire avant et après, les variables de couleur et les styles de texte iOS.
Fichier Figma gratuit
Écran d'accueil de réservation d'hôtel, avant et après
Les deux écrans et chaque élément corrigé en composants Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.
FAQ
Que doit montrer en premier l'écran d'accueil d'une appli de réservation d'hôtel ?
Une courte question, un seul champ de recherche et des photos de lieux. Les dates et les voyageurs peuvent se loger dans la carte de recherche sous forme de chips modifiables, pour que la navigation passe avant tout formulaire.
Comment afficher les prix d'hôtel dans une appli ?
Un prix clair par séjour, avec un détail complémentaire comme l'annulation gratuite. Là où des frais obligatoires s'appliquent, incluez-les dans le prix affiché en premier.
Une appli de voyage doit-elle montrer les destinations en photos ou en texte ?
En photos. On choisit les lieux visuellement, et une tuile coupée au bord de l'écran montre que la rangée défile sans commandes supplémentaires.
Combien d'onglets une appli de réservation doit-elle avoir ?
Quatre ou cinq. Fusionnez deux onglets qui mènent au même endroit, et nommez les onglets avec les mots des voyageurs, comme Enregistrés et Voyages.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma.
- Photos via Unsplash par Vali Sachadonig, Zion C, Asher Pardey, Roberto Nickson et Travis Chen.
- Règle de la FTC sur les frais déloyaux ou trompeurs, couvrant l'hébergement de courte durée, en vigueur le 12 mai 2025.
- D'abord publié sous forme de carrousel sur 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
