配車アプリのデザイン:配車アプリのホーム画面ビフォーアフター

配車アプリを開く人は、たいていどこかに立っていて、どこか別の場所へ行きたいと思っています。下の初稿は機能はしますが、最初のタップの前に多くを求めすぎです。6個のコントロールと黄色いバナーをまとった地図、住所欄が2つあるシート、6色で並ぶ6つのサービス、そしてチップの列。修正版は大事な機能をすべて残したうえで、聞くのはたった1つだけです。

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

新人の初稿

修正版

左は、地図がコントロールで覆われ、シートはフォームになっています。右は、地図はちゃんと地図で、シートには欄が1つ、行が4つ、サービスが4つあります。地図の高さも380 pxから270 pxに縮めたので、肝心のシートがより上から始まります。

修正1:地図の上のボタンは2つ

ビフォー

アフター

4種類の形の6個のコントロールとバナーに対して、メニューと現在地ボタンだけ。

初稿は、メニューの四角、検索の丸、レイヤーの四角、Trafficのピル、ズームのボタン群、緑の現在地の丸を道路の上に載せ、さらに上部いっぱいに大文字のプロモバナーまで置いています。どれも乗客が欲しがるかもしれないものです。でも、乗客がここでやりたいことそのものではなく、全部合わせると、読み取りたい地図を覆い隠してしまいます。

修正版は44 pxのボタンを2つだけ残します。メニューと現在地です。検索の丸は、シートにすでにある検索への2つ目の入口でした。バナーは1行になってシートの中へ移しました。

レイヤー、Traffic、ズームのボタン群はこの画面にはなく、このリデザインではその置き場所も描いていないので、実際のアプリでは別に居場所が必要です。地図のピンチズームに、ボタンが2つも要るわけではありません。

使い回せるルール:地図の上には、今見えているものを変えるコントロールだけを置き、残りには別の居場所を与えること。

修正2:2つの欄ではなく1つの質問

ビフォー

アフター

住所欄2つと入れ替えボタンに対して、「どこへ?」と尋ねる欄が1つ。

初稿が開くのはフォームです。緑の点がついた乗車地欄、黒い点がついた目的地欄、入れ替えの矢印。上の地図にはすでに乗客の現在地を示す青い点があるので、最初の欄は画面がすでに語っていることをわざわざ尋ねています。

修正版は、52 pxの欄で「どこへ?」と聞きます。右には「今すぐ」チップがあり、時間はここにあります。後で乗りたい人は変更し、それ以外の人は読みもしません。乗車地欄がなくなったので、入れ替えボタンも消えました。

使い回せるルール:知らないことを1つだけ尋ね、推測できることは変更可能なチップにすること。

修正3:1つのスタイルで4つのサービス

ビフォー

アフター

6色に6サービスに対して、1つのグレーと1つの緑で4サービス。

サービスごとに色が違うと、色は何も意味しなくなります。初稿の6つのタイルは緑、オレンジ、青、紫、ピンク、シアンで、各アイコンもタイルと同じ色を繰り返し、文字は9〜12 pxです。乗客がたいていどれを選ぶのか、この列からは何も分かりません。

修正版は、Ride、Package、Reserve、Rentalの4つのサービスを、1つの柔らかなグレーの大きなタイルにし、アイコンはブランドの緑 #16A34A にしました。タップしやすく、同時に読める幅があります。MotoとXLはこのホーム画面にはありません。これはこのリデザインが隠さないトレードオフで、行き先を描いていないからです。

使い回せるルール:ブランドカラー1色に「これがこのアプリ」を意味させ、選択肢の違いは形とアイコンで伝えること。

修正4:保存場所は住所つきの行に

ビフォー

アフター

住所のないチップと長い最近の2行に対して、名前と住所とタップ領域がある行。

「自宅」と書かれたチップは、乗客がそれを信頼しているときだけ行き先を伝えます。初稿のチップには住所が出ておらず、その下の最近の場所は「Ferry Building, The Embarcadero, San Francisco, CA 94111」のように、郵便番号まで12 pxで書かれた長い1行です。

修正版は、どれも行にします。アイコン、太字の名前、その下に短い住所、「自宅、24 Hayes St」。Ferry Buildingは最近の場所で、その下に「The Embarcadero」があります。乗客はすでにその市にいるので、市名と郵便番号は消えました。30%オフは4つ目の行になり、緑のタグと、その下に「コード NEWRIDE」がつき、サイズは場所の行と同じです。

特典はちゃんとあります。ただ、地図の上で叫ばなくなっただけです。

使い回せるルール:ショートカットは行き先を見せるべきで、プロモは行にできる。

細かな修正

• 左端を1本に。 初稿のシートは左14 px、右12 pxでした。修正版は両側20 pxです。
• アクセントは1色。 初稿はバナーが黄色、現在地ボタンが緑、サービスは6色でした。修正版は、アクティブなタブ、サービスのアイコン、特典のタグにブランドの緑を使い、残りはグレーにしています。
• きちんとした文字スケール。 文字は9〜12 pxから、iOSの13〜17 ptのサイズになりました。
• タブは5つではなく4つ。 ホーム、乗車、ウォレット、特典、アカウントは、ホーム、アクティビティ、ウォレット、アカウントになりました。特典は、ホームの行になったのでなくなりました。
• 短くなった地図。 地図の高さは380 pxから270 pxになり、質問がより上に来ます。

自分の配車アプリを点検しよう

Figmaファイルを入手

無料ファイルには、両方の画面がコンポーネントとして入っていて、すべての修正がビフォーアフターのペアになっており、カラー変数とiOSのテキストスタイルも含まれます。

無料のFigmaファイル

配車アプリのホーム画面 ビフォーアフター

両方の画面と、修正したすべてのパーツをFigmaコンポーネントで。無料、閲覧専用、複製して下書きに入れてください。

Figmaで開く

FAQ

配車アプリのホーム画面には何を表示すべき?

ボタンが2つの地図、「どこへ?」の欄1つ、その下にいくつかのショートカット。サービス、保存場所、特典はシートに置き、地図の上には置きません。

地図画面にはコントロールをいくつ置くべき?

ホーム画面ならメニューと現在地の2つで十分です。レイヤー、交通情報、ズームは別の場所に置けます。地図はピンチでズームできるからです。

「どこへ」検索欄はどうデザインする?

中に質問を入れた大きな欄を1つにして、右側に時間用の「今すぐ」チップを置きます。地図がすでに本人の位置を見せているなら、先に乗車地を尋ねてはいけません。

Ride、XL、Packageのようなサービスはどう見せる?

1つのスタイルで、大きなタイルにして、アイコンはブランドカラーにします。ホーム画面には4つ入ります。残りには専用の場所が必要です。

配車アプリのプロモコードはどう見せる?

場所の行と同じスタイルの1行にして、短いタイトルとその下にコードを置きます。地図の上のバナーは、乗客が読みに来たものを覆ってしまいます。

配車アプリの文字サイズはどうする?

プラットフォームの文字スケールに従います。修正版の画面ではiOSの13〜17 ptのサイズと、44 pxの地図ボタンを使っています。

出典

• 両方の画面は自作で、Figmaでデザインして計測したものです。地図も、道路、公園、小川を自分でベクターで描いたものです。Ferry BuildingとOracle Parkはサンフランシスコの公共のランドマークで、自宅と職場の住所は架空です。写真は使っていません。
• Apple Human Interface Guidelines: Typography。修正版の画面で使ったiOSの文字サイズの出典。
• Apple Human Interface Guidelines: Accessibility。44 ptのタッチターゲットサイズの出典。
• 最初は App Brainy でカルーセルとして公開しました。