読者です 読者をやめる 読者になる 読者になる

LIFULL Creators Blog

「株式会社LIFULL(ライフル)」の社員によるブログです。

Apple WatchのUI/UXデザインでデザイナーが考えるべきことまとめ

f:id:homes_designers:20151006124046p:plain

こんにちは、HOME'Sアプリのデザインをしている、こいずみです。

HOME'Sはこの度、watchOS2発表に伴いWatchアプリをリニューアルいたしました!
Apple WatchのUI/UXデザインの経験を通して、学んだことや感じたことなどをご紹介しようと思います。

 

f:id:homes_designers:20150930184450p:plain

「IOS版 HOME'Sアプリ」DLはこちら

 

Apple Watchだからこその機能

 

f:id:homes_designers:20151006124048p:plain

 

watchOS2対応アプリでできることは主に3つです。

・新着物件の通知を受け取る
・物件を確認する
・気になる物件をお気に入りに追加する

iPhoneで希望の条件を保存しておけば、その条件に合った新着物件通知を受け取ることができ、物件の概要を確認できます。

気になる物件をお気に入りに追加すると、iPhone側にその情報が引き継がれます。

さらにHandoff機能(※)によって、iPhoneアプリ側で物件一覧やお気に入り一覧に自動的に遷移して、Watchで見た物件の詳細情報を見ることが出来ます。

(※)Handoff-ハンドオフとは、Apple製のデバイス間で途中までやっていた作業を簡単に引き継げる機能です。

f:id:homes_designers:20151001145511p:plain

 

ちなみにリニューアル前のwatchOS1対応アプリは、iPhoneアプリの機能である「家賃相場」をキーワードに、引越しを考えている人がふと「この街いいな」と思った時、家賃相場を手元でパッと見てもらい、「住めそう!」と思うキッカケになればという想いで作りました。

お楽しみコンテンツとして家賃相場クイズがあり、クイズに正解するとホームズくんから素敵な称号がもらえます。まだOS1だよって方は、ぜひ遊んでからアップデートしてみてくださいね♪

 

f:id:homes_designers:20151006124047p:plain

 

Apple WatchはミニマムiPhoneではない

デザインをするにあたってWWDCの配信映像をはじめとした色々なドキュメントを見ていくうちに分かったことは「WatchはミニマムiPhoneではない」ということです。

WatchはiPhoneアプリのサブという立ち位置が理想であり、画面はとっても小さいので「操作が簡単」で「ひと目見れば分かる」のが望ましいようです。

大量の文書や画像を見たり複雑な操作をするのは、やっぱりiPhoneが向いていると思います。

 

Apple Watchを使うユーザーメリットってなに?

watchOS1では、どちらかと言えばお楽しみコンテンツとしての役割を主に考えていましたが、watchOS2ではアプリ本来の目的である「住まい探し」にフォーカスをした形になりました。

賃貸・売買に関わらず住まい探しをする人が欲しい情報は「希望条件に合う物件情報」だと思います。

忙しい日常の中で、日々変化する物件情報を毎日チェックするのはとても大変だけど、良い物件を逃したくはない!そんなとき、HOME'SのiPhoneアプリにある「条件保存」の機能を使えば、あらかじめ保存しておいた希望条件に合う物件の新着お知らせを受け取ることができます。

これがWatchに向いていると思いました。Watchでタイムリーに新着物件の情報を受け取ることができれば、良い物件をより逃しづらくなります。

f:id:homes_designers:20151006124049p:plain

iPhoneとApple Watch、それぞれの役割をはっきりさせる

通知を受け取れるだけでは結局iPhoneを取り出さなければならず、ユーザーメリットはあまり向上しません。そこで、通知を受け取ったらそのまま物件を確認して、気になる物件をお気に入りに追加するところまでWatchで出来るようにしました。

物件に関する情報は、とても細かくて量があるので、Watchの小さい画面でその全てを確認するのはかなりツライです。とはいえ詳細を見ずに問合せはできないので、そこはiPhoneにお願いすることにしました。

あとは、この一連の流れを如何に簡単に完了できるかを考える必要がありました。

 

情報をApple Watchに最適化する

繰り返しになりますが、Watchの画面はとても小さいです。Watchで受け取る新着物件は保存した条件を元に配信しているため、ユーザー自身が予め決めておける条件は極力表示せず、画面をシンプルにすることに努めました。

では、ユーザーは何を見ればお気に入りに追加するかどうか判断できるのでしょうか?

iPhoneの物件詳細画面をパーツごとに分けて、Watchに表示するか否かを選別していきました。

f:id:homes_designers:20150930150922p:plain

 

それぞれについて考えたことは以下です。

A お気に入りボタン
Watch Appの大事な機能

Bの物件種別
ユーザーが条件を保存する段階で、賃貸か売買かは決まっていることが多い

C 物件名
物件名で住み替えを左右されることはあまり無い

D 物件写真
大事な判断材料ではあるが、大量の画像は読み込みが遅くなる問題もある

E 問合せボタン
Watch Appから問合せはしないのでカット

F 詳細情報
全ては細かすぎるが、価格など最低限はないと判断できない

G 所在地図
駅徒歩分数で条件を絞っているユーザーも、駅のどちら側なのかなど、大まかな所在地が分かるとより判断しやすい
住所や路線情報などを文字で載せるより、小さい画面では地図のほうが直感的でわかりやすい

H こだわりの設備・条件
ユーザーが条件を保存する段階で、ある程度絞っているはず

 

結果、Watchに実装・表示するのは

・画像1枚
・価格(家賃)
・所在地図
・フォースタッチでお気に入り追加

の4つとなりました。

 

複雑な操作はホントに向いてない

画面はやっぱり小さく感じます。女性の指でもミスタップしそうです。
WWDCのセッションビデオでも以下のことが繰り返し言われていました。

タップエリアは分かりやすく大きく、というのがWatchでは大事なポイントになっています。

 

腕をあげっぱなしは結構疲れる

小さい画面で長いこと操作をするのはとっても疲れますし、操作を完了するまでが長いと腕が痛くなってきます。そのようなコンテンツでは、結果的にユーザーは離れていってしまうので、作り手側がWatchというデバイスの特性をしっかりと理解して、見せるものと見せないものを的確に判断することが大事だと感じました。

 

通知はiPhoneよりも割りと気づく

iPhoneの通知は気づいたら溜まっていることがよくあるのですが(私だけでしょうか?)Watchは手首にピッタリくっついているため、通知はiPhoneより圧倒的に気づきやすいのではないかと思います。

 

まとめ

Watch Appの開発はエンジニアさん泣かせの様々な制約があります。
デザイナーとしても、iPhoneでできるから大丈夫と思っていたことができなかったり、小さな画面のなかの情報設計など、なかなか苦労するポイントが多いと思います。

でも、新しいことにどんどん取り組めるのがこの世界の楽しみです。
今はまだ持ってる人の方がめずらしいAppleWatchも、あっという間にみんなが当たり前に持っているものになるかもしれません。
そんな発展の過程に参加できるのはとてもワクワクしますよね。

大事なのは、デバイスを理解することと、ユーザーを理解すること。
これを繰り返し繰り返し続けていくことで、プロダクトをどんどん良い方向に育てて行きたいですね。