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

スマートホームアプリのホーム画面の仕事はひとつです。今いる部屋を示し、ワンタップで点灯中のものを切り替えられるようにすること。以下の最初のドラフトには全てのコントロールがありますが、小さなステータス行付きの同じ見た目の行が8つ並び、部屋は下線付きテキストの中に隠れ、シーンは最後に小さなボタン6つとして置かれています。設定ページのように見えるので、使っていても暮らしているのではなく、設定している気分になります。

修正版は機能をすべて残し、見せ方だけを変えます。まず部屋、デバイスはオンのとき光るタイル、シーンは親指が届くピルにします。

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

新人のドラフト

修正版

左は、何も主役になっていません。ヘッダー、統計ストリップ、6つのリンク、写真バナー、8つの行、6つのボタンがすべて同じ重さで並んでいます。デバイス行は最大のブロックですが、すべて同じ大きさなので、消えているテレビが、暖房中のサーモスタットと同じくらい重要に見えます。

右は、画面が2つの問いに順に答えます。どこにいる?何がついている?写真はアプリの宣伝バナーではなく、部屋そのものです。状態は色で伝えるので、ユーザーはグリッドをひと目で読み取れます。

何が変わったか、数値で見る

修正1:部屋を言い、次に何がついているかを言う

ビフォー

アフター

メニューアイコン、My Home、プラス、設定、赤いドットが付いたベルのあるヘッダー、「18°C Cloudy、Indoor 22°C、Humidity 44%、Power 3.2 kWh」と書かれた天気ストリップ、下線付きの部屋リンク6つ、「Haven」と書かれた写真バナー。対して、部屋の写真の上に大きな太字の「Living Room」とその下の「22° · 3 lights on」、プラスと三点メニュー。

ドラフトのヘッダーはコントロールパネルになろうとしています。3つのアクション、4項目の天気行、そして家が「順調に稼働中」という挨拶まで載っていますが、これは情報ではありません。何も点滅していないのだから、問題がないことはユーザーも分かっています。

修正版は画面に主題を与えます。「Living Room」がタイトルで、その下の1行に、人がよく確認する2つの事実、気温と点灯している照明の数を置きます。3つの照明は、ドラフトで点灯していたFloor Lamp、Ceiling Light、Shelf Lightなので、何も作り足していません。天気、湿度、電力は三点メニューから開き、ベルと歯車はProfileに移します。

これはApple Homeが使っているパターンです。上部に部屋名とそのライブ状態を置きます。

再利用できるルール:場所を先に置き、その下にライブ状態を1行で。残りはメニューの奥へ。

修正2:スワイプできる装飾なしの部屋タブ

ビフォー

アフター

下線付きのリンクが1列に6つ:Living Room、Bedroom、Kitchen、Bath、Garage、Office。対して、太字の白い「Living Room」と、グレーの「Bedroom」「Kitchen」「Bathroom」が右端からはみ出している。

下線付きテキストは、部屋の選択肢ではなく、文章中のリンクに見えます。しかも6つで幅が埋まるので、どの部屋が開いているのか分かりません。下線はページ上で最も目立つ道具なのに、それを最も控えめな要素に使っているのです。

装飾のないタブなら両方解決します。選択中の部屋は白、ほかはグレーなので、明るいのは現在の部屋だけです。行をわざと右端からはみ出させることで、スワイプできることが伝わり、新しいレイアウトなしで6部屋を超えて増やせます。BathroomとOfficeは1スワイプ先、Garageはドットから開きます。

再利用できるルール:選択は下線ではなく色で示し、選択肢の行は端からはみ出させる。

修正3:行ではなくタイル

ビフォー

アフター

アイコン、名前、「On、80%、Warm White」のようなグレーのステータス行、右側に小さなアンバーまたはグレーのスイッチが付いた同じ見た目の行が8つ。対して、2列の幅広の角丸タイル:Floor LampとThermostatは白地にアンバーのアイコン、TVとSpeakerは暗い地に白いアイコン、Ceiling LightとBlindsは下から始まる。

行はコストが最も高い部分です。1行ごとに、ユーザーは9 pxの行を探して「On | 80% | Warm White」を読み、さらにタップするための30 x 18のスイッチを探さなければなりません。8行は文字の列にすぎず、オンのデバイスとオフのデバイスを区別するものがありません。

タイルはボタンです。タイル全体がタップ対象で、名前は14、状態は12、スイッチの役目は色が果たします。白地にアンバーのアイコンはオン、暗い地に白いアイコンはオフ。ユーザーは8台のデバイスをひと目でスキャンでき、最初の行で2台がオンだと分かります。さらにタイルは浮かぶタブバーの下まで続くので、リストがまだ続くことも伝わります。

何も削っていません。ドラフトのCeiling Light、Shelf Light、Blinds、Air Purifierは、Accessoriesの「All 8」の奥にあるので、すべてのデバイスに今も届きます。

再利用できるルール:すべてのアイテムにオンとオフの状態があるなら、アイテム自身の色で状態を示し、カード全体をターゲットにする。

修正4:本物のシーンピル

ビフォー

アフター

小さな「SCENES」ラベルの下に、大文字の同じグレーのボタンが6つ:Movie、Sleep、Away、Morning、Party、Reading。対して、アイコン付きの角丸ピルの列:Movieは白く点灯、SleepとAwayは暗く、次のピルは端からはみ出している。

シーンはスマートホームアプリの一番の見どころです。ワンタップで部屋全体が変わるのですから。ドラフトでは、8つの行の下に、同じ見た目のグレーのボタン6つとして置かれています。フォームのように見え、どれがアクティブなのかも分かりません。

修正版ではシーンを部屋タブの真下に上げ、それぞれにアイコンを付けます。高さは44なので親指で扱え、アクティブなシーンは白く点灯します。Partyはピルの中でスワイプして見つかり、ReadingはScenesタブにあります。

再利用できるルール:最も価値の高いアクションを親指のある場所に置き、どれがアクティブかを示す。

そのほかの小さな修正

• 機能はすべて残る。 Ceiling Light、Shelf Light、Blinds、Air Purifierは「All 8」の奥に。天気、湿度、電力はヘッダーのドットから開く。ベルと歯車はバッジのドットが付いたProfileへ。
• 均等な余白。 ドラフトは左14 px、右12 px。修正版は両側に同じ余白を使う。
• アクセントは1色。 アンバーはオンのタイルのアイコンとアクティブなタブだけ。ドラフトでは、すべてのスイッチといくつかのアイコンに使われていた。
• フラットな暗転レイヤー。 写真の上に52%の黒を1枚。グラデーションも発光もなし。ランプは読み取れ、本は暗くなる。
• タブを減らす。 塗りとアウトラインのアイコンが混在した5タブを、浮かぶ62 pxのバーの4タブに置き換える。
• タイプスケール。 ドラフトの9〜15 pxに代えて、12から34 ptまで、タブラベルは10 pt。

自分のスマートホーム画面を監査する

Figmaファイルを入手する

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

無料のFigmaファイル

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

両方の画面と、すべてのパーツをFigmaコンポーネントで。無料、閲覧専用。複製して自分のドラフトに入れてください。

Figmaで開く

FAQ

スマートホームアプリのホーム画面はどうデザインすべき?

部屋名と、「22° · 3 lights on」のようなライブ状態の1行で始めます。デバイスは、色がオンを意味する2列のタイルで見せ、シーンは上部近くのピルに置き、天気や設定はメニューの奥に移します。

スマートホームアプリのデバイスは、タイルとリストのどちらを使うべき?

ホーム画面ならタイルです。タイル全体がタップ対象で、色が状態をひと目で伝えます。リストは、長い設定画面や履歴画面なら問題ありません。

スマートホームアプリで、デバイスがオンだとどう示す?

タイルそのもので示します。オンはアンバーのアイコンの白いカード、オフは白いアイコンの暗いカード。ステータス行を読んだり、小さなスイッチを探したりする必要がなくなります。

スマートホームアプリのシーンはどこに置くべき?

上部近く、部屋タブの下に、親指が届くピルとして置き、アクティブなシーンを点灯させます。シーンはワンタップで部屋全体を変えるので、8つの行の下に置くべきではありません。

スマートホームアプリにタブはいくつ必要?

4つで十分です:Home、Scenes、Automations、Profile。部屋はホーム画面のスワイプできるタブの中にあります。

スマートホームアプリで部屋名に下線を引かないのはなぜ?

下線はテキストの中ではリンクに見えます。装飾のないタブなら、選択中の部屋を白、ほかをグレーにして、どの部屋が開いているかを示し、行をスワイプさせられます。

出典

• 両方の画面は自社制作で、Figmaでデザインし計測しました。アプリのHavenとそのデバイスは架空のものです。数値は一貫しています。どちらの画面でも照明は3つ点灯、Floor Lampは80%、サーモスタットは22°に設定されています。
• 調査したパターン:Apple Home。上部に部屋名とその状態、アクセサリはタイル、シーンはピル。テキストサイズはiOSに準拠(12〜34 pt、タブラベルは10 pt)。
• アイコンはPhosphor(MIT)。写真はPexelsから:Yusuf PとJan Vee。
• 最初はApp Brainyでカルーセルとして公開しました。