Design d'app VTC : l'écran d'accueil d'une app de course, avant et après
Un écran d'accueil VTC de débutant avec six contrôles sur la carte, une bannière promo et deux champs d'adresse, puis le même écran corrigé. Chaque changement côte à côte, la raison de chacun, et le fichier Figma gratuit.
Quand quelqu'un ouvre une app de VTC, il se trouve généralement quelque part et veut être ailleurs. Le premier jet ci-dessous fonctionne, mais il demande beaucoup avant le premier tap : une carte qui porte six contrôles flottants et une bannière jaune, une feuille avec deux champs d'adresse, six services en six couleurs et une rangée de puces. La correction garde chaque fonction qui compte et ne pose qu'une seule question.
L'écran entier, avant et après
Brouillon de débutant
Corrigé
À gauche, la carte est couverte de contrôles et la feuille est un formulaire. À droite, la carte est une carte, et la feuille contient un champ, quatre lignes et quatre services. La carte a aussi rétréci, de 380 px de haut à 270 px, si bien que la feuille qui compte commence plus haut.
| Brouillon de débutant | Corrigé | |
|---|---|---|
| Contrôles sur la carte | 6, en quatre formes | 2 |
| Champs d'adresse | 2 et un bouton d'échange | 1, « Où aller ? » |
| Services | 6, sur six fonds teintés | 4, dans un seul style |
| Promo | Bannière jaune en capitales | Une ligne, « Code NEWRIDE » |
| Lieux récents | 2, adresses complètes sur une ligne | Lignes avec un nom et une adresse courte |
| Onglets | 5 | 4 |
| Marge latérale | 14 px à gauche, 12 px à droite | 20 px des deux côtés |
| Tailles de texte | 9 à 12 px | 13 à 17 pt |
Correction 1 : deux boutons sur la carte
Avant
Après
Six contrôles en quatre formes et une bannière, contre un menu et un bouton de localisation.
Le brouillon pose un carré menu, un cercle de recherche, un carré calques, une pastille Trafic, une pile de zoom et un cercle de localisation vert par-dessus les rues, et une bannière promo en capitales en haut. Ce sont tous des choses qu'un passager pourrait vouloir. Aucune n'est ce qu'il est venu faire, et ensemble elles recouvrent la carte qu'il essaie de lire.
La correction garde deux boutons de 44 px : le menu et votre position. Le cercle de recherche était une deuxième porte vers la recherche que la feuille offre déjà. La bannière est descendue dans la feuille sous forme d'une ligne.
Calques, Trafic et la pile de zoom ne sont pas sur cet écran, et cette refonte ne dessine pas où ils vivent, donc une vraie app doit leur trouver une place. Le zoom par pincement sur une carte n'a pas besoin de deux boutons.
La règle à réutiliser : mettez sur la carte uniquement les contrôles qui changent ce que vous voyez maintenant, et donnez aux autres une autre maison.
Correction 2 : une question au lieu de deux champs
Avant
Après
Deux champs d'adresse et un bouton d'échange, contre un champ qui demande Où aller.
Le brouillon ouvre un formulaire : un champ de départ avec un point vert, un champ de destination avec un point noir et une flèche d'échange. La carte au-dessus porte déjà un point bleu qui montre où se trouve le passager, donc le premier champ demande quelque chose que l'écran dit déjà.
La correction demande « Où aller ? » dans un champ de 52 px. À droite se trouve une puce Maintenant, où vit l'heure : quelqu'un qui veut une course plus tard la change, et tous les autres ne la lisent jamais. Le bouton d'échange a disparu avec le champ de départ.
La règle à réutiliser : demandez la seule chose que vous ignorez, et faites de ce que vous pouvez deviner une puce modifiable.
Correction 3 : quatre services dans un seul style
Avant
Après
Six services sur six couleurs, contre quatre sur un seul gris avec un seul vert.
Quand chaque service a sa propre couleur, la couleur ne veut plus rien dire. Les six tuiles du brouillon sont vertes, orange, bleues, violettes, roses et cyan, et chaque icône reprend la couleur de sa tuile, avec du texte de 9 à 12 px. Rien dans la rangée ne dit lequel le passager veut d'habitude.
La correction dessine quatre services, Course, Colis, Réservation et Location, en grandes tuiles sur un seul gris doux avec des icônes dans le vert de la marque, #16A34A. Elles sont assez larges pour être touchées et lues d'un coup. Moto et XL ne sont pas sur cet écran d'accueil, un compromis que cette refonte ne cache pas, puisqu'elle ne dessine pas où ils vont.
La règle à réutiliser : laissez une couleur de marque signifier « c'est l'app », et laissez la forme et l'icône distinguer les choix.
Correction 4 : les lieux enregistrés en lignes, avec l'adresse
Avant
Après
Des puces sans adresse et deux longues lignes récentes, contre des lignes avec un nom, une adresse et une zone de tap.
Une puce « Domicile » n'indique au passager où il va que s'il lui fait confiance. Les puces du brouillon n'affichent pas d'adresse, et les récents en dessous sont de longues lignes comme « Ferry Building, The Embarcadero, San Francisco, CA 94111 », écrites jusqu'au code postal en 12 px.
La correction fait de chacun une ligne : une icône, le nom en gras et une adresse courte en dessous, « Domicile, 24 Hayes St ». Ferry Building est un lieu récent, avec « The Embarcadero » dessous, et la ville et le code postal ont disparu car le passager est déjà dans cette ville. Les 30 % de réduction sont devenus la quatrième ligne, avec une étiquette verte et « Code NEWRIDE » dessous, à la même taille que les lieux.
L'offre est toujours là. Elle ne crie plus par-dessus la carte.
La règle à réutiliser : un raccourci doit montrer où il mène, et une promo peut être une ligne.
Les petites corrections
- Un seul bord gauche. La feuille du brouillon utilisait 14 px à gauche et 12 px à droite. La correction utilise 20 px des deux côtés.
- Un seul accent. Le brouillon utilisait le jaune pour la bannière, le vert pour le bouton de localisation et six teintes pour les services. La correction utilise le vert de la marque pour l'onglet actif, les icônes de services et l'étiquette d'offre, et du gris pour le reste.
- Une vraie échelle typographique. Le texte est passé de 9 à 12 px aux tailles iOS de 13 à 17 pt.
- Quatre onglets, pas cinq. Accueil, Courses, Portefeuille, Offres et Compte sont devenus Accueil, Activité, Portefeuille et Compte. Offres a disparu, car l'offre est maintenant une ligne sur l'accueil.
- Une carte plus courte. La carte est passée de 380 px à 270 px de haut, donc la question se place plus haut.
Auditez votre propre app VTC
| Question | Pourquoi c'est important |
|---|---|
| Combien de contrôles se trouvent sur la carte ? | Chacun recouvre une rue |
| Demandez-vous au passager quelque chose que l'écran sait déjà ? | Un champ de départ répète le point bleu |
| La couleur de chaque service veut-elle dire quelque chose ? | Sinon, utilisez une seule couleur |
| Chaque raccourci montre-t-il son adresse ? | Une puce qui cache sa destination est un pari |
| La promo est-elle une ligne ou une bannière ? | Une bannière recouvre la carte |
| L'heure est-elle une puce ? | La plupart des courses sont pour maintenant |
Obtenir 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 d'app VTC, 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 l'écran d'accueil d'une app VTC ?
Une carte avec deux boutons, un seul champ « Où aller ? » et quelques raccourcis en dessous. Les services, les lieux enregistrés et les offres appartiennent à la feuille, pas à la carte.
Combien de contrôles un écran de carte doit-il avoir ?
Deux suffisent sur l'écran d'accueil : le menu et votre position. Calques, trafic et zoom peuvent vivre ailleurs, puisque les cartes se zooment d'un pincement.
Comment concevoir le champ de recherche « Où aller » ?
Faites-en un grand champ avec la question à l'intérieur et une puce Maintenant à droite pour l'heure. Ne demandez pas le départ d'abord quand la carte montre déjà où se trouve la personne.
Comment une app VTC doit-elle présenter des services comme Course, XL et Colis ?
Dans un seul style, en grandes tuiles, avec des icônes dans la couleur de la marque. Quatre tiennent sur l'écran d'accueil ; les autres ont besoin d'une place à eux.
Comment afficher les codes promo dans une app VTC ?
En une ligne dans le même style que les lieux, avec un titre court et le code dessous. Une bannière sur la carte recouvre ce que les passagers sont venus lire.
Quelle taille de police une app VTC doit-elle utiliser ?
L'échelle de texte de la plateforme. L'écran corrigé utilise les tailles iOS de 13 à 17 pt, avec des boutons de carte de 44 px.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. La carte est notre propre dessin vectoriel de rues, d'un parc et d'un ruisseau. Ferry Building et Oracle Park sont des monuments publics de San Francisco ; les adresses du domicile et du travail sont inventées. Aucune photo.
- Apple Human Interface Guidelines: Typography, pour les tailles de texte iOS utilisées dans l'écran corrigé.
- Apple Human Interface Guidelines: Accessibility, pour la taille de zone tactile de 44 pt.
- 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
