Design d'app de location de voiture : refonte d'un écran d'accueil, avant et après

Un écran d'accueil d'app de location n'a qu'un travail : amener quelqu'un jusqu'à une voiture qui lui plaît. Le premier brouillon ci-dessous contient tout ce dont un conducteur a besoin, mais il s'ouvre sur un formulaire à cinq champs, crie 25 % de réduction dans une bannière qui ne pointe sur rien, et laisse les voitures pour la fin, en 100 par 60 pixels avec leurs specs en texte de 8 px.

La correction garde chaque fonction et met les voitures en premier. Elle suit la mise en page de Turo : un fond blanc, un seul champ de recherche et des cartes de voitures pleine largeur avec le prix sous la photo. Chaque changement ci-dessous est à copier.

L'écran entier, avant et après

Brouillon junior

Corrigé

À gauche, les voitures sont la chose la plus petite de l'écran. Avant d'en voir une, le conducteur passe cinq champs de formulaire, une case à cocher, un bouton, une bannière et trois menus déroulants. Chaque voiture est une vignette de 100 par 60 avec des specs en 8 px et un bouton BOOK.

À droite, l'écran se lit dans l'ordre où un conducteur décide : où, quel type, quelle voiture. La recherche est un seul champ de 48 px, les photos de voitures font 350 par 190, et le texte va de 13 à 18 px contre 8 à 15 px dans le brouillon.

Ce qui a changé, mesuré

Correction 1 : fondre le formulaire en un seul champ

Avant

Après

Find a Rental Car avec un lieu de prise en charge, un lieu de retour, une date de prise en charge, une date de retour, une case à cocher pour l'âge du conducteur avec un lien Change, un bouton orange Search Cars et une ligne de mentions légales. Contre un seul champ arrondi : une loupe, Pick up at SFO, et Nov 8 to 10 sur le bord droit.

Le brouillon demande au conducteur de remplir un formulaire avant de lui montrer une seule voiture. La plupart des réponses sont déjà connues : le retour se fait au même endroit que la prise en charge, l'âge est 25 ans et plus, et les dates sont ce week-end. Le formulaire les demande quand même toutes, avec le même poids, si bien que la seule chose que le conducteur doit décider n'attire pas plus l'attention que les quatre qu'il ne touchera pas.

L'écran corrigé garde les deux réponses qui comptent, où et quand, et les met dans un seul champ. C'est le même schéma qu'Uber utilise pour son champ de destination. Touchez-le et une feuille s'ouvre avec le retour, l'heure de restitution et l'âge du conducteur : rien n'a été supprimé, seulement déplacé à un toucher de distance.

Règle à réutiliser : montrez les valeurs par défaut, ne demandez que ce qui change.

Correction 2 : poser l'offre sur une vraie voiture

Avant

Après

Une bannière orange pleine largeur : UP TO 25% OFF THIS WEEKEND!!! avec *T&C apply à droite. Contre une carte de voiture haute : une étiquette 25 % off sur la photo, Sport Coupe, 2 seats et Auto, $89/day et $119 barré.

Une bannière qui dit « jusqu'à 25 % de réduction » ne dit pas sur quoi. Le conducteur doit faire défiler et deviner à quelle voiture elle s'applique, et les trois points d'exclamation et le « T&C apply » en 10 px ressemblent plus à un avertissement qu'à une offre.

Sur l'écran corrigé, la réduction se trouve sur la voiture concernée. Une petite étiquette sur la photo indique 25 % off, et la ligne de prix affiche 89 $/jour avec l'ancien 119 $ à côté. 119 $ moins 25 %, cela fait 89,25 $, donc le chiffre est honnête, et l'offre a enfin quelque chose à vendre. Turo fait pareil, avec l'offre sur une annonce plutôt qu'au-dessus.

Règle à réutiliser : une offre a besoin d'un objet. Attachez-la à la chose qu'elle réduit.

Correction 3 : remplacer trois menus déroulants par une rangée

Avant

Après

Trois menus déroulants égaux indiquant Type, Price et Seats, chacun avec un chevron. Contre une rangée de puces : All sélectionné en noir, puis Electric, SUV, Coupe et Convertible qui débordent du bord droit.

Un menu déroulant cache ses options tant qu'on ne le touche pas : le conducteur doit ouvrir Type pour apprendre que Electric, SUV et Coupe existent. Trois menus côte à côte donnent aussi à Price et Seats le même poids qu'au seul filtre que les gens utilisent vraiment, le type de voiture.

Les puces montrent les options sans un toucher. La puce sélectionnée est remplie en noir, la rangée se balaie, et la dernière puce est coupée par le bord de l'écran, ce qui indique au conducteur qu'il y en a d'autres. Price et Seats existent toujours, ils s'ouvrent désormais depuis les filtres du champ de recherche.

Règle à réutiliser : si un filtre a cinq valeurs ou moins, montrez-les. Ne les cachez pas derrière un menu.

Correction 4 : donner à chaque voiture une photo pleine largeur

Avant

Après

Quatre lignes sous Popular Cars, chacune avec une photo de 100 par 60, un nom, une ligne de specs en 8 px, un prix et un bouton orange BOOK. Contre deux cartes pleine largeur : une photo de 350 par 190 avec un cœur, puis le nom et le prix sur une ligne et une ligne de détail dessous.

C'est le produit, et le brouillon lui donne le moins de place. À 100 par 60, une voiture est une forme colorée. La ligne de specs entasse places, boîte de vitesses, carburant, temps de 0 à 100, assurance et note en 8 px : rien n'est lisible et tout fait concurrence au prix.

La carte corrigée donne à la voiture une photo de 350 par 190 aux coins arrondis et met le nom et le prix journalier sur une ligne. Dessous, une seule ligne de détail en 13 px, places et boîte de vitesses. Le bouton BOOK a disparu parce que toute la carte est le bouton : touchez-la et la page de la voiture montre les specs, les notes et Book.

Règle à réutiliser : une liste de produits est une liste de photos. Tout ce qui n'est ni la photo, ni le nom, ni le prix va un toucher plus loin.

Les petites corrections

• Une seule couleur de marque. L'orange (#FF5A1F) marque l'étiquette 25 % off et rien d'autre. Le brouillon l'utilise sur la bannière, le bouton de recherche, la case à cocher, le lien Change, quatre boutons BOOK et l'onglet actif.
• Une marge plus grande. 20 px des deux côtés au lieu de 14 à gauche et 12 à droite, avec 14 entre les blocs.
• Un en-tête plus calme. Le cœur et la cloche du brouillon se tiennent à côté du logotype. L'en-tête corrigé garde la cloche, et le cœur est maintenant l'onglet Saved.
• Une barre d'onglets flottante. Quatre onglets (Explore, Trips, Saved, Profile) dans une barre flottante de 62 px, et la troisième voiture passe dessous, ce qui dit que la page continue.
• Un seul style d'icônes. Icônes pleines et contours étaient mélangées dans la barre d'onglets du brouillon, elles sont maintenant toutes en contour.
• Des noms qui correspondent aux tâches. Bookings est devenu Trips, et Search est devenu le champ en haut.
• Du texte coupé. « Car of the Week » et la ligne du 0 à 100 ont disparu, puisque ni l'un ni l'autre n'aidait à choisir une voiture.

Auditez votre propre app de location

Récupérez le fichier Figma

Le fichier gratuit contient le brouillon junior, l'écran corrigé et chaque élément sous forme de composant.

Fichier Figma gratuit

Refonte de l'écran d'accueil d'une app de location de voiture, avant et après

Les deux écrans et chaque élément en composant Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.

Ouvrir dans Figma

FAQ

Comment concevoir l'écran d'accueil d'une app de location de voiture ?

Ouvrez sur un seul champ de recherche avec le lieu de prise en charge et les dates, puis une rangée de types de voitures, puis des cartes de voitures pleine largeur avec le nom et le prix sous chaque photo. Gardez le lieu de retour, l'heure de restitution et l'âge du conducteur à un toucher derrière le champ de recherche.

Combien de champs une recherche de location de voiture doit-elle avoir ?

Autant que le premier écran en a besoin : où et quand. Le retour, l'heure de restitution et l'âge du conducteur gardent en général leurs valeurs par défaut, ils peuvent donc se trouver dans une feuille qui s'ouvre depuis le champ de recherche.

Où placer une réduction sur une location de voiture ?

Sur la voiture concernée. Une étiquette sur la photo et l'ancien prix barré à côté du nouveau, comme 119 $ et 89 $/jour, dit au conducteur ce qui est réduit et de combien. Une bannière qui ne pointe sur rien ne le fait pas.

Les types de voitures doivent-ils être des menus déroulants ou des puces ?

Des puces, quand il y en a cinq environ. Une rangée qui se balaie montre All, Electric, SUV, Coupe et Convertible sans un toucher, et une puce coupée par le bord de l'écran montre qu'il y en a d'autres.

Quelle taille pour les photos de voitures dans une app de location ?

La pleine largeur de la colonne, environ 350 par 190 pixels sur un téléphone. Une vignette de 100 par 60 transforme une voiture en forme colorée, et un conducteur ne peut pas la juger.

Sources

• Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'app, Torque, les prix et les specs sont inventés, et aucune marque ni aucun modèle n'est nommé. La mise en page suit Turo : un fond blanc, un seul champ de recherche et des cartes de voitures pleine largeur avec le prix sous la photo. La recherche en un champ suit le champ de destination d'Uber.
• 119 $ moins 25 % font 89,25 $, affichés 89 $/jour.
• Les icônes viennent de Phosphor (MIT). La barre d'état est dessinée d'après une vraie capture d'écran d'iPhone mesurée.
• Les photos viennent de Pexels : Dextar Studio, Jae Park, miata7 MX-5, Furkan Ceylan et Can AGBULUT.
• D'abord publié sous forme de carrousel sur App Brainy.