Design d'app de navigation : refonte d'un écran de conduite, avant et après
Un écran de navigation avec dix-sept commandes et une instruction en 11 px, puis le même écran corrigé : une grosse carte de virage, deux boutons sur la carte, un panneau de limitation lisible d'un coup d'œil et une barre de trajet avec un seul Arrêter en rouge. Chaque changement côte à côte, avec le fichier Figma gratuit.
Un écran de conduite obéit à une seule règle : le conducteur dispose d'environ une seconde par coup d'œil, et le prochain virage doit être lisible en cette seconde. Le premier jet ci-dessous met le virage dans une phrase en 11 px sur une barre verte, puis entoure la route de dix-sept commandes, d'une pub et de quatre épingles sur la carte. Il a toutes les fonctions qu'un conducteur pourrait vouloir, et aucune n'est lisible à vitesse réelle.
La correction garde chaque fonction. Elle fait du prochain virage l'élément le plus gros de l'écran et retire de la route tout ce qui ne concerne pas la prochaine minute.
L'écran entier, avant et après
Brouillon junior
Corrigé
À gauche, l'instruction est une phrase. Le conducteur doit lire « Dans 400 ft tournez à droite sur 16th St, puis continuez 0,2 mi et tournez à gauche sur Mission St » en 11 px pendant que la voiture roule. L'itinéraire est une fine ligne de 4 px, la voiture un point de 13 px, et une pub de café et quatre épingles se disputent l'attention avec la route. La barre d'onglets occupe le bas de l'écran alors que personne ne change d'onglet en conduisant.
À droite, l'écran a trois blocs : le virage en haut, la route au milieu et le trajet en bas. L'itinéraire est assez large pour être suivi, la voiture est un palet bien net, et la carte ne montre que la route.
Ce qui a changé, en chiffres
| Brouillon junior | Corrigé | |
|---|---|---|
| Prochain virage | Une phrase en 11 px dans une barre verte | Une carte avec une flèche de 52 pt, une distance de 28 pt et une rue de 17 pt |
| Virage suivant | Dans la même phrase | Une petite pastille « Ensuite » accrochée sous la carte |
| Itinéraire | Ligne de 4 px, point de 13 px pour la voiture | Itinéraire bleu de 9 px sur un contour blanc de 14 px, un palet de 32 pt |
| Boutons de carte | Cinq de 38 px, ronds et carrés mélangés, plus une pile de zoom | Deux cercles blancs de 40 pt : recentrer et volume |
| Vitesse | Une boîte de limitation de 36 px et un cercle de vitesse de 36 px | Un panneau de limitation de 48 par 60 pt à côté d'un « 23 » de 32 pt |
| Barre de trajet | Une ligne de 10 px et cinq boutons de 30 px en capitales de 9 px | « 18 min » en 24 pt vert, la distance et l'arrivée, un seul Arrêter rouge |
| Onglets | Cinq, avec des icônes pleines et filaires mélangées | Aucun pendant la conduite |
| Commandes à l'écran | Dix-sept | Quatre |
Correction 1 : transformer la phrase en une grosse instruction
Avant
Après
Une fine barre verte contenant une ligne de petit texte qui nomme deux virages, face à une carte verte avec une grande flèche de virage, « 400 ft » et « 16th St », et une petite pastille « Ensuite » avec une flèche gauche accrochée sous son bord gauche.
Un conducteur a besoin de trois faits : dans quelle direction, à quelle distance et où. La phrase les contient, mais dans l'ordre où une personne les prononce, donc l'œil doit lire de gauche à droite pour trouver celui qui compte. Le deuxième virage est enfoui à la fin, où il est lu en dernier, ou pas du tout.
La correction donne à chaque fait sa propre taille. La flèche dit dans quel sens, le 400 ft dit à quelle distance, et le nom de la rue se place dessous en plus petit, car c'est ce qu'on vérifie avec le panneau de rue. Le deuxième virage devient une petite pastille fixée à la carte, il se lit donc comme « et ensuite » et non comme une seconde instruction de même poids.
Règle à réutiliser : quand une personne n'a qu'une seconde, transformez une phrase en une forme et un nombre.
Correction 2 : garder deux boutons sur la carte
Avant
Après
Une carte avec cinq boutons le long du bord droit (calques, voiture, boussole, drapeau et volume, certains ronds et d'autres carrés), une pile de zoom à gauche, une pub de café et quatre épingles, face à une carte épurée avec seulement deux boutons blancs ronds en bas à droite : recentrer et volume.
Chaque bouton sur la route est une tentation de toucher pendant qu'on roule. Le brouillon en a cinq à droite, deux de zoom à gauche, et un mélange de cercles et de carrés qui fait croire que chacun est d'une nature différente. La pub et les quatre épingles ajoutent des cibles et de la couleur par-dessus l'itinéraire.
La correction garde les deux qu'un conducteur utilise en route : recentrer, quand la carte a été déplacée, et volume. Le zoom se fait au pincement. Les boutons calques, trafic, boussole et signalement passent derrière un chevron dans la barre de trajet : rien n'a été supprimé, tout a été déplacé là où un passager ou une voiture à l'arrêt peut l'atteindre. La pub et les épingles disparaissent de la route, car l'itinéraire est la seule chose qui doit être colorée.
Règle à réutiliser : moins il y a de choses à toucher quand la voiture roule, moins il y a de touchers.
Correction 3 : dessiner la limitation de vitesse comme le panneau
Avant
Après
Une petite boîte indiquant LIMITE 25 et un cercle sombre indiquant 23 mph empilés sur le bord gauche de la carte, face à une seule pastille blanche contenant un panneau de limitation avec SPEED LIMIT et un grand 25, à côté d'un grand 23 et d'un petit mph.
Les conducteurs savent déjà à quoi ressemble un panneau de limitation : blanc, bordure noire, les mots SPEED LIMIT, un gros nombre. Le brouillon utilise une minuscule boîte et un cercle sombre qui ne ressemblent à rien de connu, et les empile l'un au-dessus de l'autre, il faut donc les comparer.
La correction dessine le vrai panneau en 48 par 60 pt, avec une bordure de 2 px et le nombre en 26 pt, et place la vitesse actuelle juste à côté en 32 pt. Côte à côte, les deux nombres répondent à une seule question : suis-je en excès ? Il suffit d'un coup d'œil, sans lecture.
Règle à réutiliser : quand un objet réel porte déjà le sens, dessinez l'objet réel.
Correction 4 : réduire le trajet à ce qu'on vérifie
Avant
Après
Une ligne de 10 px indiquant 18 min (4,2 mi), Arrivée 9:59 AM, Itinéraire le plus rapide, Trafic fluide, au-dessus de cinq boutons identiques : Quitter, Étapes, Partager, Rechercher et Ajouter un arrêt, face à une feuille blanche avec 18 min en gros caractères verts, 4,2 mi et 9:59 AM en dessous, un bouton Arrêter rouge et un chevron.
Pendant un trajet, un conducteur vérifie trois choses : combien de temps reste-t-il, quelle distance, et quand j'arrive. Le brouillon les met dans une ligne de 10 px avec deux autres infos, puis ajoute cinq boutons identiques en capitales de 9 px, si bien que « Quitter », celui qui met fin au trajet, ressemble à « Partager ».
La correction met le temps restant en 24 pt vert, la distance et l'arrivée dessous, et une seule pilule Arrêter rouge. Rouge parce que mettre fin à un trajet est la seule action qui a un coût. Étapes, Partager, Rechercher et Ajouter un arrêt passent derrière le chevron, à un toucher d'un passager.
Règle à réutiliser : donnez la plus grande place au nombre que les gens vérifient le plus, et la seule couleur d'alerte à la seule action coûteuse.
Les petites corrections
- Une deuxième carte. L'écran corrigé a sa propre carte, cadrée plus large avec la voiture placée bas sur l'écran, de sorte que l'itinéraire part vers le haut et montre la route à venir plutôt que celle déjà parcourue.
- Un contour propre. L'itinéraire a un contour blanc de 14 px sous une ligne bleue de 9 px, il reste donc lisible sur les routes jaunes comme sur les blocs gris.
- Pas de barre d'onglets. Les cinq onglets ont été retirés de la vue de conduite. Conduire, Explorer, Enregistrés, Trajets et Profil servent quand la voiture est à l'arrêt.
- Une seule forme pour les boutons. Des cercles uniquement, 40 pt, pour que les cibles ressemblent à des cibles.
Auditez votre propre écran de conduite
| Question | Pourquoi c'est important |
|---|---|
| Le prochain virage se lit-il en une seconde ? | Une phrase se lit, une forme et un nombre se voient |
| Combien de choses peut-on toucher quand la voiture roule ? | Chacune est une chance de mauvais toucher |
| La limitation est-elle dessinée comme le panneau ? | Les conducteurs la décodent sans lire |
| L'itinéraire se détache-t-il des routes ? | Une fine ligne se perd dans une carte chargée |
| Le seul bouton coûteux est-il le seul rouge ? | La couleur d'alerte ne marche qu'une fois |
| Y a-t-il sur la carte quelque chose qui ne concerne pas la prochaine minute ? | Les pubs et les épingles ont leur place sur l'écran à l'arrêt |
Récupérez le fichier Figma
Le fichier gratuit contient les deux écrans, avec chaque élément corrigé sous forme de composant.
Fichier Figma gratuit
Refonte de la navigation en conduite, avant et après
Les deux écrans et chaque élément en composant Figma. Gratuit, lecture seule, dupliquez-le dans vos brouillons.
FAQ
Que doit montrer un écran d'app de navigation en conduisant ?
Le prochain virage, la distance jusqu'à lui, le nom de la rue, la vitesse actuelle et la limitation, le temps restant et un moyen de mettre fin au trajet. Tout le reste peut se trouver derrière un toucher.
Quelle taille doit avoir l'instruction de virage dans une app de conduite ?
Assez grande pour être lue d'un coup d'œil : dans cette refonte, la flèche fait 52 pt et la distance 28 pt. Une phrase d'une ligne en 11 px doit être lue, et un conducteur n'a pas le temps de lire.
Combien de boutons un écran de carte doit-il avoir en conduisant ?
Deux suffisent : recentrer et volume. Le zoom se fait au pincement, et les calques, le trafic et le signalement peuvent se ranger derrière un chevron pour un passager ou une voiture à l'arrêt.
Comment afficher une limitation de vitesse dans une app ?
Comme le panneau que les conducteurs connaissent déjà, avec une bordure, les mots SPEED LIMIT et un grand nombre, à côté de la vitesse actuelle pour que les deux se comparent d'un coup d'œil.
Pourquoi retirer la barre d'onglets d'un écran de navigation ?
Personne ne change d'onglet en conduisant, et la barre prend de l'espace et de l'attention à la route. Elle revient à la fin du trajet.
De quelle couleur doit être le bouton pour arrêter le trajet ?
Rouge, et ce doit être le seul rouge de l'écran. Mettre fin à un trajet est la seule action qui a un coût, elle reçoit donc la seule couleur d'alerte.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'app, Waymark, est inventée, et 23 mph, une limitation de 25, 18 min, 4,2 mi et 9:59 AM sont illustratifs et identiques des deux côtés.
- L'itinéraire suit de vraies rues du quartier Mission de San Francisco : Valencia St, 16th St et Mission St. Données cartographiques : contributeurs d'OpenStreetMap.
- Icônes : Phosphor Icons (MIT).
- D'abord publié en 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
