ナビアプリのデザイン:運転画面のリデザイン、ビフォーアフター

運転画面のルールはひとつ。ドライバーが1回に見られるのは約1秒で、次の曲がり角はその1秒で読めなければなりません。下の最初のドラフトは、緑のバーに11 pxの文章で曲がり角を載せ、そのうえ道路のまわりにコントロール17個、広告1つ、地図ピン4つを並べています。ドライバーが欲しがりそうな機能は全部あるのに、走行中に読めるものは1つもありません。

修正版は機能をすべて残します。そのうえで、次の曲がり角を画面でいちばん大きなものにして、次の1分に関係ないものは道路の上からどけます。

画面全体のビフォーアフター

新人のドラフト

修正後

左の画面では、案内が文章になっています。ドライバーは車が動いている間に「In 400 ft turn right onto 16th St, then continue for 0.2 mi and turn left onto Mission St」を11 pxで読まなければなりません。ルートは細い4 pxの線、自車は13 pxの点で、コーヒーの広告と4つのピンが道路と注意を奪い合っています。走行中にタブを切り替える人はいないのに、タブバーが画面の下部を占めています。

右の画面は3つのブロックでできています。上に曲がり角、中央に道路、下にトリップ。ルートは追えるだけの太さがあり、自車ははっきりしたパックで、地図には道路だけが表示されます。

変更点を数値で見る

修正1:文章を1つの大きな案内に変える

ビフォー

アフター

2つの曲がり角を挙げた小さな1行の文字を載せた細い緑のバーと、大きな曲がり角の矢印、「400 ft」、「16th St」を載せた緑のカード、その左端の下にくっついた左矢印の小さな「Then」チップの比較。

ドライバーに必要な情報は3つ。どちらへ、どれくらい先、どこで。文章にはその3つが入っていますが、人が話す順番に並んでいるので、大事なものを探すのに目を左から右へ動かして読むことになります。2つ目の曲がり角は最後に埋もれていて、最後に読まれるか、まったく読まれません。

修正版では、それぞれの情報に専用のサイズを与えます。矢印がどちらへを示し、400 ftがどれくらい先かを示し、通り名は道路標識と照らし合わせる部分なので、下に小さめに置きます。2つ目の曲がり角はカードにくっついた小さなチップになり、同じ重さの2つ目の指示ではなく「その次に」と読めます。

使い回せるルール:人に1秒しかないなら、文章を形と数字に変えること。

修正2:地図上のボタンは2つにする

ビフォー

アフター

右端にボタンが5つ(レイヤー、車、コンパス、旗、音量。丸と四角が混在)、左にズームのスタック、コーヒーの広告と4つのピンがある地図と、右下に白い丸ボタンが2つ(現在地に戻すと音量)だけのすっきりした地図の比較。

道路の上にあるボタンはどれも、走行中につい押したくなるものです。ドラフトは右に5つ、左にズーム用の2つ、さらに丸と四角が混在していて、それぞれが別の種類のものに見えます。広告と4つのピンはタップ対象と色をルートの上にさらに増やしています。

修正版が残すのは、ドライバーが走行中に使う2つ。地図をドラッグしたときの現在地に戻すと、音量です。ズームはピンチ操作。レイヤー、渋滞、コンパス、通報のボタンはトリップバーのシェブロンの奥に移したので、何も削除していません。同乗者や駐車中の車から届く場所に動かしただけです。広告とピンは道路から消えました。色が付いていていいのはルートだけだからです。

使い回せるルール:車が動いている間にタップできるものが少ないほど、タップされる回数も減る。

修正3:制限速度を標識そのものとして描く

ビフォー

アフター

地図の左端に積み重ねられた「LIMIT 25」の小さなボックスと「23 mph」の暗い円と、SPEED LIMITと大きな25の制限速度標識に大きな23と小さなmphを並べた白いチップ1つの比較。

ドライバーは制限速度標識がどんな見た目かをすでに知っています。白地、黒い枠、SPEED LIMITの文字、大きな数字。ドラフトは小さなボックスと暗い円を使っていて、ドライバーが見たことのないものに見えるうえ、上下に積んであるので見比べないといけません。

修正版は本物の標識を48×60 ptで描き、2 pxの枠と26 ptの数字を付け、そのすぐ隣に現在速度を32 ptで置きます。2つの数字を並べると、「超えているか?」という1つの問いに答えが出ます。読まずにひと目で済みます。

使い回せるルール:本物の物がすでに意味を運んでいるなら、本物の物を描くこと。

修正4:トリップは確認する情報だけに絞る

ビフォー

アフター

10 pxの行「18 min (4.2 mi), Arrive 9:59 AM, Fastest route, Light traffic」の下に同じ大きさのボタン5つ(Exit、Steps、Share、Search、Add Stop)がある表示と、大きな緑の文字の18 min、その下に4.2 miと9:59 AM、赤いEndボタンとシェブロンを載せた白いシートの比較。

運転中にドライバーが確認するのは3つ。残り時間、残り距離、到着時刻。ドラフトはそれを10 pxの行に、さらに2つの情報と一緒に詰め込み、そのうえ9 pxの大文字で同じ大きさのボタンを5つ並べるので、トリップを終了する「Exit」が「Share」と同じに見えます。

修正版は、残り時間を緑の24 ptで置き、その下に距離と到着時刻、そして赤いEndピルを1つだけ置きます。赤なのは、トリップの終了がコストを伴う唯一の操作だからです。Steps、Share、Search、Add Stopはシェブロンの奥に移し、同乗者ならワンタップで届きます。

使い回せるルール:人が最もよく確認する数字にいちばん広い場所を与え、コストのある操作1つにだけ警告色を与えること。

細かな修正

• 別の地図。 修正版には専用の地図があり、より広く切り出して自車を画面の低い位置に置いたので、ルートは自車から上へ伸び、走ってきた道ではなくこれから進む道が見えます。
• きれいな縁取り。 ルートは9 pxの青い線の下に14 pxの白い縁取りがあり、黄色い道路でも灰色の街区でも読みやすいままです。
• タブバーなし。 運転ビューから5つのタブを取り除きました。Drive、Explore、Saved、Trips、Profileは駐車中のためのものです。
• ボタンの形は1種類。 丸だけ、40 ptで、タップ対象がタップ対象に見えるようにしました。

自分の運転画面を監査する

Figmaファイルを入手する

無料ファイルには両方の画面が入っていて、修正した部品はすべてコンポーネントになっています。

無料のFigmaファイル

運転ナビのリデザイン、ビフォーアフター

両方の画面と、すべての部品をFigmaコンポーネントで収録。無料、閲覧専用、下書きに複製して使えます。

Figmaで開く

FAQ

運転中のナビアプリ画面には何を表示すべきですか?

次の曲がり角、そこまでの距離、通り名、現在速度と制限速度、残り時間、そしてトリップを終了する方法を1つ。それ以外はワンタップの奥に置けます。

運転アプリで曲がり角の案内はどれくらいの大きさにすべきですか?

ひと目で読める大きさです。このリデザインでは矢印が52 pt、距離が28 ptです。11 pxの1行の文章は読まなければならず、ドライバーには読む時間がありません。

運転中の地図画面にボタンはいくつ必要ですか?

2つで十分です。現在地に戻すと音量。ズームはピンチ操作で、レイヤー、渋滞、通報は同乗者や駐車中の車のためにシェブロンの奥に置けます。

アプリで制限速度はどう表示すべきですか?

ドライバーがすでに知っている標識の形で、枠、SPEED LIMITの文字、大きな数字を付け、現在速度の隣に置いて、ひと目で比べられるようにします。

なぜナビ画面からタブバーを取り除くのですか?

運転中にタブを切り替える人はいませんし、バーは道路から場所と注意を奪います。トリップが終わったら戻ってきます。

トリップ終了ボタンは何色にすべきですか?

赤で、画面上の唯一の赤にすべきです。トリップの終了はコストを伴う唯一の操作なので、唯一の警告色が与えられます。

出典

• 両方の画面は自作で、Figmaで設計し計測したものです。アプリのWaymarkは架空で、23 mph、制限25、18 min、4.2 mi、9:59 AMは説明用の値で、左右で同じです。
• ルートはサンフランシスコのミッション地区の実在の通り、Valencia St、16th St、Mission Stに沿っています。地図データ:OpenStreetMap contributors。
• アイコン:Phosphor Icons(MIT)。
• 最初にApp Brainyでカルーセルとして公開しました。