Navigations-App-Design: Redesign eines Fahrscreens, vorher und nachher

Ein Fahrscreen hat eine Regel: Der Fahrer hat pro Blick etwa eine Sekunde, und in dieser Sekunde muss die nächste Abbiegung lesbar sein. Der erste Entwurf unten packt die Abbiegung in einen 11-px-Satz in einer grünen Leiste und umgibt die Straße dann mit siebzehn Bedienelementen, einer Anzeige und vier Karten-Pins. Er hat jede Funktion, die ein Fahrer sich wünschen könnte, und keine davon lässt sich bei Tempo lesen.

Die Korrektur behält jede Funktion. Sie macht die nächste Abbiegung zum größten Element auf dem Screen und schafft alles von der Straße, was nicht die nächste Minute betrifft.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links ist die Anweisung ein Satz. Der Fahrer muss "In 400 ft turn right onto 16th St, then continue for 0.2 mi and turn left onto Mission St" mit 11 px lesen, während das Auto fährt. Die Route ist eine dünne 4-px-Linie, das Auto ein 13-px-Punkt, und eine Kaffeeanzeige und vier Pins konkurrieren mit der Straße um Aufmerksamkeit. Die Tab-Leiste nimmt den unteren Screenbereich ein, obwohl beim Fahren niemand Tabs wechselt.

Rechts hat der Screen drei Blöcke: die Abbiegung oben, die Straße in der Mitte und die Fahrt unten. Die Route ist breit genug, um ihr zu folgen, das Auto ist ein klarer Puck, und die Karte zeigt nur die Straße.

Was sich geändert hat, gemessen

Fix 1: aus dem Satz eine große Anweisung machen

Vorher

Nachher

Eine dünne grüne Leiste mit einer Zeile kleinem Text, der zwei Abbiegungen nennt, gegenüber einer grünen Karte mit großem Abbiegepfeil, "400 ft" und "16th St" und einem kleinen "Then"-Chip mit Linkspfeil, der an der linken Kante darunter hängt.

Ein Fahrer braucht drei Fakten: in welche Richtung, wie weit und wohin. Der Satz enthält sie, aber in der Reihenfolge, in der ein Mensch sie spricht, also muss das Auge von links nach rechts lesen, um das Wichtige zu finden. Die zweite Abbiegung ist am Ende vergraben, wo sie zuletzt oder gar nicht gelesen wird.

Die Korrektur gibt jedem Fakt seine eigene Größe. Der Pfeil sagt, in welche Richtung, die 400 ft sagen, wie weit, und der Straßenname steht darunter in kleinerer Größe, weil man ihn mit dem Straßenschild abgleicht. Die zweite Abbiegung wird zu einem kleinen Chip an der Karte, sodass sie als "und dann" gelesen wird und nicht als zweite, gleich gewichtete Anweisung.

Regel zum Wiederverwenden: Wenn ein Mensch eine Sekunde hat, mach aus einem Satz eine Form und eine Zahl.

Fix 2: zwei Buttons auf der Karte behalten

Vorher

Nachher

Eine Karte mit fünf Buttons am rechten Rand (Ebenen, Auto, Kompass, Flagge und Lautstärke, teils rund, teils eckig), einem Zoom-Stapel links, einer Kaffeeanzeige und vier Pins, gegenüber einer aufgeräumten Karte mit nur zwei runden weißen Buttons unten rechts: Zentrieren und Lautstärke.

Jeder Button auf der Straße ist etwas, das der Fahrer während der Fahrt anzutippen versucht sein kann. Der Entwurf hat fünf rechts, zwei für Zoom links und eine Mischung aus Kreisen und Quadraten, durch die jeder wie eine andere Art von Ding aussieht. Die Anzeige und die vier Pins fügen weitere Ziele und mehr Farbe über der Route hinzu.

Die Korrektur behält die zwei, die ein Fahrer unterwegs nutzt: Zentrieren, wenn die Karte verschoben wurde, und Lautstärke. Zoom ist eine Pinch-Geste. Die Buttons für Ebenen, Verkehr, Kompass und Melden wandern hinter einen Chevron in der Fahrtleiste, nichts wurde also gelöscht, sondern dorthin verschoben, wo ein Beifahrer oder ein stehendes Auto rankommt. Anzeige und Pins sind von der Straße verschwunden, denn die Route ist das Einzige, was farbig sein sollte.

Regel zum Wiederverwenden: Je weniger sich antippen lässt, während das Auto fährt, desto weniger Tipper passieren.

Fix 3: das Tempolimit als Schild zeichnen

Vorher

Nachher

Eine kleine Box mit LIMIT 25 und ein dunkler Kreis mit 23 mph, übereinander am linken Kartenrand, gegenüber einem weißen Chip mit einem Tempolimit-Schild mit SPEED LIMIT und einer großen 25, neben einer großen 23 und einem kleinen mph.

Fahrer wissen bereits, wie ein Tempolimit-Schild aussieht: weiß, schwarzer Rand, die Worte SPEED LIMIT, eine große Zahl. Der Entwurf nutzt eine winzige Box und einen dunklen Kreis, die nach nichts aussehen, was der Fahrer je gesehen hat, und stapelt sie übereinander, sodass man sie vergleichen muss.

Die Korrektur zeichnet das echte Schild mit 48 mal 60 pt, mit 2 px Rand und der Zahl in 26 pt, und setzt die aktuelle Geschwindigkeit mit 32 pt direkt daneben. Nebeneinander beantworten die beiden Zahlen eine Frage: Bin ich zu schnell? Das dauert einen Blick, ganz ohne Lesen.

Regel zum Wiederverwenden: Wenn ein echtes Objekt die Bedeutung schon trägt, zeichne das echte Objekt.

Fix 4: die Fahrt auf das reduzieren, was man prüft

Vorher

Nachher

Eine 10-px-Zeile mit 18 min (4.2 mi), Arrive 9:59 AM, Fastest route, Light traffic, über fünf gleichen Buttons: Exit, Steps, Share, Search und Add Stop, gegenüber einem weißen Sheet mit 18 min in großer grüner Schrift, darunter 4.2 mi und 9:59 AM, einem roten End-Button und einem Chevron.

Während einer Fahrt prüft ein Fahrer drei Dinge: wie lange noch, wie weit und wann komme ich an. Der Entwurf packt sie mit zwei weiteren Fakten in eine 10-px-Zeile und fügt dann fünf gleiche Buttons in 9-px-Versalien hinzu, sodass "Exit", der Button, der die Fahrt beendet, genauso aussieht wie "Share".

Die Korrektur setzt die Restzeit mit 24 pt in Grün, darunter Entfernung und Ankunft, und eine rote End-Pille. Rot, weil das Beenden einer Fahrt die eine Aktion mit Kosten ist. Steps, Share, Search und Add Stop wandern hinter den Chevron, einen Tipp entfernt für einen Beifahrer.

Regel zum Wiederverwenden: Gib der Zahl, die Leute am häufigsten prüfen, den meisten Platz, und gib der einen kostspieligen Aktion die eine Warnfarbe.

Die kleineren Korrekturen

• Eine zweite Karte. Der reparierte Screen hat seine eigene Karte, breiter beschnitten und mit dem Auto tief im Screen, sodass die Route vom Auto aus nach oben und weg läuft und die Straße vor einem zeigt statt der gerade gefahrenen.
• Eine saubere Umrandung. Die Route hat eine 14-px-weiße Umrandung unter einer 9-px-blauen Linie, damit sie über gelben Straßen und grauen Blöcken gleichermaßen lesbar bleibt.
• Keine Tab-Leiste. Die fünf Tabs wurden aus der Fahransicht entfernt. Drive, Explore, Saved, Trips und Profile sind für den Moment, in dem das Auto steht.
• Eine Form für Buttons. Nur Kreise, 40 pt, damit die Ziele wie Ziele aussehen.

Prüfe deinen eigenen Fahrscreen

Hol dir die Figma-Datei

Die kostenlose Datei enthält beide Screens, mit jedem reparierten Teil als Komponente.

Kostenlose Figma-Datei

Redesign der Fahrnavigation, vorher und nachher

Beide Screens und jedes Teil als Figma-Komponente. Kostenlos, nur Ansicht, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Was sollte ein Navigations-App-Screen beim Fahren zeigen?

Die nächste Abbiegung, die Entfernung dorthin, den Straßennamen, die aktuelle Geschwindigkeit und das Tempolimit, die Restzeit und eine Möglichkeit, die Fahrt zu beenden. Alles andere kann hinter einem Tipp liegen.

Wie groß sollte die Abbiegeanweisung in einer Fahr-App sein?

Groß genug, um sie auf einen Blick zu lesen: In diesem Redesign ist der Pfeil 52 pt und die Entfernung 28 pt groß. Ein einzeiliger Satz mit 11 px muss gelesen werden, und ein Fahrer hat keine Zeit zum Lesen.

Wie viele Buttons sollte ein Kartenscreen beim Fahren haben?

Zwei reichen: Zentrieren und Lautstärke. Zoom ist eine Pinch-Geste, und Ebenen, Verkehr und Melden können für einen Beifahrer oder ein stehendes Auto hinter einem Chevron liegen.

Wie sollte ein Tempolimit in einer App gezeigt werden?

Als das Schild, das Fahrer schon kennen, mit Rand, den Worten SPEED LIMIT und einer großen Zahl, neben der aktuellen Geschwindigkeit, damit sich beide auf einen Blick vergleichen lassen.

Warum die Tab-Leiste aus einem Navigationsscreen entfernen?

Beim Fahren wechselt niemand Tabs, und die Leiste nimmt der Straße Platz und Aufmerksamkeit. Sie kommt zurück, wenn die Fahrt endet.

Welche Farbe sollte der Button zum Beenden der Fahrt haben?

Rot, und es sollte das einzige Rot auf dem Screen sein. Das Beenden einer Fahrt ist die eine Aktion mit Kosten, also bekommt sie die eine Warnfarbe.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und gemessen. Die App Waymark ist erfunden, und 23 mph, ein 25er-Limit, 18 min, 4.2 mi und 9:59 AM sind illustrativ und auf beiden Seiten gleich.
• Die Route folgt echten Straßen im Mission District von San Francisco: Valencia St, 16th St und Mission St. Kartendaten: OpenStreetMap contributors.
• Icons: Phosphor Icons (MIT).
• Zuerst als Karussell auf App Brainy veröffentlicht.