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

ホームサービスアプリのホーム画面の仕事は1つです。「何かが壊れた」状態の人を、できるだけ少ないタップで予約済みのプロにつなぐこと。下の初稿には、家の持ち主に必要なものがすべて揃っています。ただし、探し回らせます。検索欄には「services, categories, professionals」と入力を促し、赤いバナーで30% OFFを叫び、8pxのラベルのカテゴリを12個並べ、プロ全員を8pxの情報の行に埋もれさせています。

修正版は機能をすべて残し、順番だけを変えます。最初にシンプルな問い1つ。オファーは1行に縮め、画面を支えるのは3つのカテゴリ。各プロには、人が選ぶ決め手だけを見せます。

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

新人の初稿

修正版

左は、十数個の要素が同じ重さで注目を求めています。いちばん目立つのは赤いバナー、いちばん大きな塊は12個のタイル。実際に仕事をしてくれる人たちは画面の下の方で、目を凝らさないと読めない小さな文字に追いやられています。

右は、家の持ち主が考える順に読めます。何が壊れたのか、お得な話はあるか、どんな種類の作業か、誰が来られるか。文字は初稿の8〜15pxに対して12〜18px、余白は左右とも20で、カードに入っているものは1つもありません。

変更点を数値で見る

修正1:シンプルな問いを1つ投げる

Before

After

「Search for services, categories, professionals」とマイクのある細い枠線の検索欄と、その上の人気検索の1行(Leak Repair、AC Service、Deep Clean、Ceiling Fan)。対するのは、虫眼鏡、「What needs fixing」の文字、マイクのある背の高いグレーの入力欄。

「Search for services, categories, professionals」はデータベースのラベルです。1文字打つ前に、サービスを探すのか、カテゴリか、人かを決めさせてしまいます。配管のアプリを開く人は、そんな分類で考えていません。「シンクが水漏れしてる」と考えているのです。

「What needs fixing?」はアプリが答えるために存在する問いそのもの。ユーザーは問題を自分の言葉でそのまま入力できます。入力欄は32pxから48pxになってちゃんとしたタップ領域になり、手が濡れているときのためにマイクも残しました。人気検索のLeak Repair、AC Service、Deep Clean、Ceiling Fanは、欄をタップすると開くので何も失われず、画面からは9pxの文字の1行が消えます。

使い回せるルール:プレースホルダーは、自社の情報設計ではなく、ユーザーの困りごととして書く。

修正2:バナーを1行にする

Before

After

タグのアイコン、感嘆符3つ付きの大文字「FLAT 30% OFF FIRST BOOKING」、「Use code FIX30 at checkout, New users only, T and C apply」の注意書き、黄色のBOOK NOWボタンがある赤いバナー。対するのは、「30% off your first fix, FIX30」とシェブロンのある細い黄色の1行。

赤いバナーには3つの役目がありますが、どれもうまくこなせていません。赤はエラーや警告に見え、感嘆符はスパムに見え、コードが載っているのは細かい注意書きだけ。しかもBOOK NOWボタンが、下にいるプロのBOOKボタンと張り合っています。

修正版の1行は、同じことを一息で言います。割引、対象者、コード。色はアプリで唯一のアクションカラーである黄色で、行全体がボタンなので、BOOK NOWはシェブロンに置き換わりました。写真も叫びもありません。初めての人にはお得な話がちゃんと見え、リピーターはアプリを開くたびに怒鳴られずに済みます。

使い回せるルール:オファーは看板ではなく1行。コードはユーザーに渡し、行そのものをタップ可能にする。

修正3:12個のカテゴリを3つとMoreに削る

Before

After

「All Categories」の見出しとSee Allリンクの下に、4つ×3行で並ぶ12個の小さな枠線タイル。それぞれ色違いのアイコンと8pxのラベル付き(Plumbing、Electrical、Cleaning、Painting、Carpentry、AC Repair、Appliances、Pest Control、Moving、Gardening、Locksmith、Smart Home)。対するのは、墨色のシンプルなアイコンの大きめの枠線タイル4つ(Plumbing、Electrical、Cleaning、More)。

色付きアイコン12個のグリッドは整理されて見えますが、自分のカテゴリを見つけるには12個のラベルを読まなければなりません。さらに悪いことに、水漏れに困っている人は、それがどのカテゴリなのかわからないことがよくあります。天井からの水滴は配管、塗装、大工のどれでしょう?幅広いメニューはその人の助けにならず、推測をむしろ難しくします。

修正は2つの層で効いています。検索欄が問題を普通の言葉で受け取るので、カテゴリを知らない人が推測する必要はありません。3つのタイルはよくある作業をカバーし、Moreを開けば残りの9つ(Painting、Carpentry、AC Repair、Appliances、Pest Control、Moving、Gardening、Locksmith、Smart Home)が出てきます。タイルは76×72、アイコンは26px、ラベルは12px。アイコンは墨色に統一しました。12色のアイコンは情報ではなくノイズだったからです。

何も削っていません。12カテゴリすべてが、今もあと1タップの場所にあります。Thumbtackも同じ手法で、まず作業の検索があり、その下に短いカテゴリ一覧があります。

使い回せるルール:大半の人が必要とする少数だけを見せ、残りはMoreの奥に置く。カテゴリを知らない人は検索に任せる。

修正4:人が選ぶ見せ方でプロを表示する

Before

After

プロ3人。それぞれ40pxの写真、名前、スキルのグレーの行(Plumbing, Leak Repair, Water Heaters, Drain Cleaning)、「4.9 (312), 1,240 jobs done, 1.2 mi, 45 dollars an hour」の行、「Available Mon to Sat, 8 AM to 6 PM」の行、大文字のBOOKボタン。対するのは、48pxの写真、名前、星と4.9、1,240 jobs、45 dollars an hour、緑色の次の空き時間(例:Next opening today, 3 PM)、Bookボタンのプロ3人。

初稿は、各プロについて知っていることを全部並べています。スキル、評価、レビュー数、件数、距離、料金、週の稼働時間。8pxの文字で7つの事実があり、3人は同じに見えるので、比べようがありません。稼働時間の行は3人とも同じなので、情報になっていません。

人がプロを選ぶ決め手は3つ。誰なのか、他の人に信頼されているか、いつ来られるか。そこで修正版は、名前、「4.9 · 1,240 jobs · $45/hr」の1行、緑色の「Next opening today, 3 PM」のような次の空き時間を見せます。時間は新しい情報で、一般的な週の稼働時間を、予約に必要な1つの情報に置き換えます。

スキル、距離、全稼働時間は、プロ本人のページに移しました。写真は40pxから48pxに、Bookボタンは高さ21pxから34pxに大きくなり、ちゃんとしたタップ領域になっています。

数字は両方の画面で同じです。Minh Tranはどちらでも4.9、1,240 jobs、$45/hrです。

使い回せるルール:人が選ぶ決め手になる事実を見せ、残りは詳細ページに移す。

細かな修正

• 機能はすべて残す。 長い住所は「24 Hayes St」とそのシェブロンから開きます。マイクは検索欄に残りました。Offersタブはオファーの1行に統合され、カートはBookingsタブになりました。
• 余白は1種類。 初稿は左14px、右12px。修正版は左右とも20です。
• アクセントは1色。 黄色がアクションカラーで、オファーとすべてのBookボタンに使います。初稿では、赤、黄、12色のアイコンがすべて競い合っていました。
• タブは4つ、アイコンのスタイルは1種類。 塗りとアウトラインが混在した5タブを、1スタイルの4タブにし、ヘアライン付きの78pxのフラットなバーに載せました。
• ロゴは大きく、住所は短く。 ロゴは24pxになり、住所は番地の行と市を落としました。自分の住んでいる場所は、ユーザーが知っているからです。
• 文字サイズ。 8〜15pxだった文字を12〜18pxにしました。
• See allは残す。 残りのプロはSee allの奥にあり、3人目のプロはタブバーの下まで続いて、リストがもっと長く見えるようにしています。

自分のホームサービス画面を監査する

Figmaファイルを入手する

無料ファイルには、新人の初稿、修正版の画面、そしてすべてのパーツがコンポーネントとして入っています。

無料のFigmaファイル

ホームサービス画面のリデザイン、ビフォーアフター

2つの画面と、すべてのパーツをFigmaコンポーネントとして収録。無料、閲覧専用、複製して下書きに入れてください。

Figmaで開く

FAQ

ホームサービスアプリのホーム画面はどうデザインすべきですか?

「What needs fixing?」のようなシンプルな問い1つから始め、次に細いオファー1行、Moreつきのカテゴリタイル3〜4個、短いプロのリストを置きます。各プロは名前、評価、次の空き時間で見せ、Bookボタンは1つにします。

ホームサービスアプリは、いくつカテゴリを見せるべきですか?

ホーム画面には3〜4個で、残りはMoreに。タイルが12個あると全員が全部のラベルを読むことになり、困りごとを抱えた人はそれがどのカテゴリなのかわからないことがよくあります。

サービスアプリは検索バーとカテゴリのどちらを使うべきですか?

両方、この順番で。困りごとを尋ねる検索欄がカテゴリを知らない人を受け止め、少数のタイルが、知っている人のためによくある作業をカバーします。

サービスのマーケットプレイスで、プロのカードには何を載せるべきですか?

名前、件数と料金つきの評価、次に空いている時間。スキル、距離、全稼働時間はプロ本人のページに置きます。3人の中から選ぶ助けにはならないからです。

ホームサービスアプリでは割引をどう見せるべきですか?

オファーとコードを載せた細い1行にして、行全体をタップ可能にします。感嘆符だらけの赤いバナーはスパムに見え、そのボタンはBookボタンと張り合います。

出典

• 2つの画面はどちらも自作で、Figmaでデザインし、寸法を測っています。アプリのFixly、登場する人物、住所、価格は架空のものです。オファー(コードFIX30で30% OFF)と、Minh Tranの4.9、1,240 jobs、$45/hrは、両方の画面で同じです。
• 参考にしたパターン:Thumbtack。まず作業の検索があり、その下に短いカテゴリ一覧があります。
• アイコンはPhosphor(MIT)、写真はPexelsから:Ivan S、Kindel Media、Son Hoa Nguyen、Mahmoud Yahyaoui。
• 初出はApp Brainyのカルーセル投稿です。