不動産アプリのデザイン:ホーム画面のリデザイン、ビフォー・アフター

不動産アプリのホーム画面の仕事は一つだけ。「探している」という人を、開きたい物件まで連れていくことです。下の最初のドラフトは何も壊れていません。機能はすべて動きます。ただ、読む人にすべてを一度に受け止めさせようとしています。検索欄、5つの丸いカテゴリ、4種類のボタン、バナー、そして9つの小さな情報が詰まったカードです。

直した版は、機能をすべて残したまま、順番と大きさとスタイルの数を変えています。

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

新人のドラフト

改善後

左では、目が検索欄、5つのカテゴリの丸、3種類のスタイルが混ざった4つの操作部品、画面幅いっぱいの青いバナー、星、矢印、すべての写真に重なる2つのボタン、そして物件詳細の上に居座る浮遊Mapボタンに出会います。一つひとつは間違っていません。ただ、全部合わさると最初に読むものがありません。

右では、画面が上から下へ読めます。あなたは誰か、何を検索するか、借りるか買うか、どんな家か、そして大きな物件が1つ。バナーはまだありますが、下に小さく控えていて、検索と張り合いません。

修正1:検索は1行、Rent・Buyは1つのコントロール

Before

After

マイク付きの枠線の検索欄、5つの丸いカテゴリアイコン、続いて塗りのRentボタン、ただの文字のBuy、枠線のSortボタン、Filterリンク。対して、青いフィルターボタンが1つだけのグレーの検索欄と、1つのセグメントコントロールの両半分になったRentとBuy。

ドラフトは1行に4つの操作部品を置き、それぞれ違う見た目にしています。Rentは塗りのボタン、Buyはただの文字、Sortは枠線、Filterはアイコン付きのプレーンなリンクです。読む人は、どれがボタンで、どれがタブで、どれがトグルなのかを、使う前に見分けなければなりません。

改善版は、役割ごとに形を1つ与えています。検索とフィルターは同じ行に置きます。絞り込みは検索の一部だからです。RentかBuyかは、ちょうど2つの選択肢の中からの選択で、それこそセグメントコントロールの出番です。両方の選択肢が見えたままで、選ばれた方がはっきり光ります。Sortは結果が出てから意味を持つので、脇に退いてもらいました。

使い回せるルール:2つの操作部品が同じ種類の仕事をするなら、同じ見た目にする。違う仕事をするなら、違う見た目にする。

修正2:選択中のものが分かるカテゴリ

Before

After

それぞれの下に小さなラベルが付いた細い枠線の丸が5つ。Apartmentが選択中だと分かるのは青いラベルだけ。対して、アイコンと言葉が1行に並んだ塗りのチップ。Apartmentsは濃い青で、次のチップは端からはみ出して続いている。

ドラフトでは、何が選ばれているかを示すのは、丸の下にある小さな青い文字だけです。丸そのものはどれも同じに見えるので、目はラベルを1つずつ読んでアクティブなものを探すことになります。

べた塗りのチップは、聞かれる前に答えてくれます。選択状態は、文字のわずかな違いではなく、色と太さの違いです。チップは縦より横が長いので、アイコンと言葉が1行に収まり、行全体の高さも小さくなります。右端で切れているチップは、行がスクロールすることを示します。矢印は要りません。

修正3:順番どおりに読めるリスティングカード

Before

After

星と矢印が付いたFeatured Listings、「1 Year Old」バッジとプラスボタンとハートボタンがある写真、青い$2,400 per month、SaleとRentのピル、住所、そして浮遊Mapボタンで途切れた寝室とバスの情報。対して、ハートが1つだけの大きな角丸の写真、続いて$2,400 per month、2-bed apartment、Alfama, Lisbon、2 bd, 2 ba, 980 sq ft。

家を見ている人は、同じ順番で4つの質問をします。いくらか、どんな家か、どこにあるか、どれくらいの広さか。改善版はカードをその順番に並べ、1行に1つの答えを置いています。価格が最も大きい文字で、次に物件タイプ、その下に場所と詳細の軽い行が続きます。

ドラフトは答えをごちゃ混ぜにしています。価格は、賃貸専用の物件なのにSaleとRentと書かれた2つのピルと同じ行にあります。住所は詳細の上にありますが、価格の下で色も違います。詳細は9ポイントの小さな文字で、最後の1つはMapボタンの下に隠れてしまい、多くの人が比べる数字である面積が読めません。

写真からは「1 Year Old」バッジとプラスボタンも外しました。すべての画像に浮かぶ2つのボタンは、読む人がまだ下していない判断を迫ります。ハートは1つで十分で、写真は大きくしました。家を売るのは写真だからです。

使い回せるルール:カードは一つの文です。語順を決めてから、それぞれの語に1つのスタイルを与えましょう。

修正4:1種類のアイコンスタイルで4つのタブ

Before

After

Home、My Properties、Messages、Favorites、Moreで、塗りと線のアイコンが混在。対して、Home、Saved、Messages、Profileで、すべて線のアイコン、青いのはHomeだけ。

ドラフトにはタブが5つあり、そのうち3つは似ています。My Properties、Favorites、Moreはどれも、保存した家や所有する家がありそうな場所に聞こえます。アイコンも、塗りの形(家、メッセージ)と線(建物、ハート)が混ざっているので、アクティブなタブが、ただ太く描かれたタブと見分けにくくなっています。

改善版は、1種類のアイコンスタイルで4つのタブにしたので、タブ同士の違いはどれがアクティブかだけです。「Favorites」は、カードのハートに合う短い言葉「Saved」になりました。「More」は、中身が分かる名前「Profile」になりました。Appleのガイドラインはタブバーをトップレベルのセクション間のナビゲーションと説明しています。つまり、実際には残り物のメニューになっている行き先は、そこに置くべきではありません。

細かな修正

• 人がいるヘッダー。 改善版では、あいさつ、青い円に入ったイニシャルのアバター、赤い点付きのベルを追加しました。ドラフトにはヘッダーがなく、誰のアプリなのかが伝わりませんでした。
• 余白は1つ。 ドラフトは左12、右16なので、画面の端にそろうものがありません。改善版はすべての行で両側20です。
• スペーシングスケールは1つ。 間隔は4、8、12、16のどれか。すべての間隔が同じ短いリストから来ていると、区切り線がなくても行同士が関係して見えます。
• プラットフォーム由来のテキストランプ。 ドラフトの文字は9〜15 pxでルールがありません。改善版は11〜22 ptのiOSサイズを使い、人が読めるサイズにしています。
• 落ち着いたバナー。 「List your home for Free」から、イタリックの強調語、家の線画、中の2つ目のボタンがなくなりました。今は矢印1つの1行です。

自分の不動産アプリを点検する

Figmaファイルを入手

無料ファイルには、両方の画面、改善後の画面のすべての部品をコンポーネントにしたもの、カラー変数、iOSのテキストスタイル、写真のクレジット入りの説明書きが入っています。

無料のFigmaファイル

不動産ホーム画面、ビフォー・アフター

両方の画面と、改善した全パーツをFigmaコンポーネントで。無料、閲覧専用。ドラフトに複製して使ってください。

Figmaで開く

FAQ

不動産アプリのホーム画面では、最初に何を見せるべきですか?

フィルターボタンが1つだけの検索欄、次にRentかBuyと物件タイプです。リスティングはそのすぐ下に置き、バナーやその他のオファーはその後ろにします。

不動産アプリでRentとBuyはどう見せるべきですか?

2つの半分に分かれたセグメントコントロールで見せます。そうすれば両方の選択肢が常に見え、選ばれた方がはっきり強調されます。1行に4種類のボタンスタイルが並ぶと、人は迷います。

物件のリスティングカードには何を入れるべきですか?

最初に価格、次に物件タイプ、場所、そして寝室、バスルーム、面積などの主要な詳細です。写真のお気に入りボタンは1つで十分です。

不動産アプリのタブはいくつがいいですか?

4つが良い数です。Home、Saved、Messages、Profile。FavoritesとMy Propertiesのように、同じ場所に聞こえる2つのタブは避けましょう。

どのカテゴリが選択されているかをどう見せますか?

選択されたチップをブランドカラーで塗り、他は控えめな色のままにします。丸の下の文字色のわずかな変化は見落とされやすいです。

出典

• 両方の画面は私たち自身のもので、Figmaで設計・計測しました。
• 写真はUnsplash経由でLuke van Zyl、A. L. Brown、Annie Spratt、Unsplash Licenseのもとで使用。
• Apple Human Interface Guidelines: Tab bars。
• Apple Human Interface Guidelines: Typography、iOSのテキストサイズ。
• 最初に App Brainy でカルーセルとして公開。