Android Wearのデザイン原則

目次

Android Wear は時計型のAndroidデバイスです。コンセプト自体、携帯電話型やタブレット型(以下、ハンドヘルドとまとめて呼びます)のAndroidデバイスとかかなり異なったものになっており、アプリ開発にあたっては、Android Wearの独自の概念を理解しておく必要があります。

Android Wearのクリエイティブビジョンやデザイン原則といったものについては、 公式の開発者向けページ にドキュメントがありますが、この記事では、それらを読むのがめんどうなデザイナー、企画の方向けの要約を提供します。

前提と概要

まず大前提ですが、Android Wearアプリ単体では動作させることはできません。1。ウェアラブルアプリと組になるハンドヘルドデバイス用のアプリを、かならず制作しなければなりません。

また、必ずしもAndroid Wear対応をするために専用アプリを制作する必要はありません。通知や簡単なインタラクションのみであれば、ハンドヘルドアプリを拡張するだけで対応できます。

Android Wearには、 提案(Suggest)要求(Demand) という、2つの軸になる機能があります。 提案は、 コンテキストストリーム によって表現されます。

The Context Stream

コンテキストストリームとは、上図アニメーションのように縦に連なるカードの流れのことです。 個々のカードは、対応するアプリケーションからの通知を表しています。 それぞれのアプリケーションが、適切なタイミングを判断して、カードを通じてユーザーに情報を提供します。 カードには、追加情報を表す ページアクション を付加することができ、それらはそのカードの右側に配置され、右から左へのスワイプで表示できます。 ウェアラブル、ハンドヘルドどちらのタイプのアプリケーションからもカードを流し込むことができます。

(ユーザーからの)要求は、 キューカード によって実現されます。

The Cue Card

ユーザーが画面背景をタップするか、時計に向かって"OK Google"と発音すると、上図のキューカードがあらわれます。キューカードには、ボイスアクションと呼ばれる一連のコマンドが表示されており、タッチ操作か音声操作によってコマンドを実行できます。 ボイスアクションの種類自体を拡張することはできませんが、それらに、自分の制作したアプリを関連付けることが可能です。 タクシーを呼ぶ、メモを取る、アラームをセットする などのアクションがあります。

また、独自のウェアラブルアプリを一時的に全画面に表示することもできます。ハンドヘルドデバイスのようにマルチタスクという概念はありません。一定時間経過してデバイスがスリープすると、アプリは自動的に終了します。

クリエイティブビジョン

デザイン原則

ユーザーの動きを止めないように気をつける

  • 料理中、食事中、ジョギング中にアプリを使っても支障のないようにします。
  • 典型的なユースケースの時間を計測して5秒以上かかるようなら、デザインを再考します。
  • 会話しながらアプリを使ってみて、邪魔にならないか確認します。

おおざっぱなジェスチャで使えるようにする

Use few and large touch targets.
  • Android Wearデバイスの画面は小さいので、個々の要素を大きくして、操作し易くします。
  • 操作に集中するために、歩行や会話が阻害されるようではいけません。

ストリームカードファースト

  • ウェアラブルアプリのベストエクスペリエンスは、ユーザーが必要なときに、まさしく必要なものがそこにあることです。
  • ユーザーがあなたのアプリを必要とするシチュエーションをリストアップしましょう(特定の場所、時間、運動など)。
  • 例) 4Squareのようなアプリでは、ユーザーがチェックインできる場所に来たときに、カードでチェックインを促しましょう。

ひとつのことをすばやくやる

  • ユーザーは、ひとつのカードを数秒しか見ない一方で、一日に何度もカードを目にするのがふつうです。
  • ひとつのカードに多くのことを詰め込みすぎず、小さい単位に分割しましょう。

パッと見ただけでわかるようにデザインする

  • 一瞬で視認できるデザインを備えることで、ユーザーの実生活を邪魔せずにすみ、結果的にアプリの価値は増大します。
  • 腕時計をした状態で拳を見積めるなど、周辺視でアプリを見てみましょう。その状態でもなにかしら意味のある情報を受けとれるのが望ましいです。
  • 背景画像などを活用して、他のアプリと区別がつくようにしましょう。

頻繁に割り込まない

  • 頻繁にバイブや音声で通知しないようにしましょう。携帯アプリのような感覚でバイブや音声を使ってはいけません。

アプリの構造とUIパターン

Bridged Notifications

ハンドヘルドの通知エリアへの通知は、自動的にウェアラブルのコンテキストストリームにも通知されます。 また、ページや音声返信といった拡張機能を使用することも可能です。

Contextual Notifications

ウェアラブルアプリは、ユーザーのコンテキストに応じた通知を行います。 ウェアラブルからの通知では、デフォルトの通知スタイル以外にも、独自に通知スタイルを定義することも可能です。

フルスクリーンアプリ

デバイスの全面を占有するアプリを実装することもできます。

  • なるべく単一の操作に集中して、目的が完了したらすぐ終了しましょう。
  • メイン画面と似たような見ためにするとユーザーが混乱するので、独自アプリだとハッキリわかるようにしましょう。
  • ウェアラブルデバイスにはバックボタンやホームボタンはありません。必ず終了操作を実装する必要があります。
  • 画面長押しは、必ずフルスクリーン終了に割り当てるべきです。

カード

カードには、テキスト情報を載せる他、ボタンをつけたり、スタックしたりできます。

アプリアイコン

app icon

カードの右上にはアプリアイコンを表示することができます。

ページ

カードの右側には、補足情報を示すページ(詳細カード)を加えることができます。 たとえば、一番左のカードには本日の天気を表示し、その右側に、数日分の天気を表示するといった使いかたができます。

カードの消去

カード上で左から右にスワイプするとカードを消去できます。 ウェアラブル上で消去されたカードは、ペアリングされたハンドヘルド上でも消去されます。

アクションボタン

action button

詳細カードの右側には、アクションボタンを置くことができます。 アクションボタンは、青い円に白いアイコンという見た目で表示されます。 アクションボタンを押すと、なにかを実行したり、ハンドヘルドに操作を引き継いだり、 アプリ画面をフルスクリーンで表示したりできます。

アクションカウントダウンと確認

アクションボタンを押した後は、次の4つのうちどれかが起きます。

  1. ただちにアクションが完了し、確認アニメーション(confirmation animation)が表示される。
  2. 時間がかかるアクションの場合はカウントダウンが表示され、完了すると確認アニメーションが表示される。
  3. ユーザー確認が必要な場合は、ユーザーの意思を確認してから、アクションを実行する。その後、確認アニメーションが表示される。
  4. キューカードに遷移する。キューカードに表示されるアクションは、アプリから指定できる。

ハンドヘルドでアクティビティを継続

アプリ開発に際しては、できる限りウェアラブルのみでアクションが完結するようにすべきですが、それが無理な場合は、ハンドヘルド側で操作を継続することもできる。その場合には専用のアニメーションが用意されているます。

カード上でのアクション

カード上に直接ボタンを配置することもできます(On-cardボタン)。 On-cardボタンには、テキストラベルを使うことはできないので、見ただけで押すとなにが起きるのか明白な場面でだけ使うべきです。 ひとつのカードに置くボタンはひとつまでにし、原則としてアクションはウェアラブル上で起きるようにしましょう(ただしウェブリンクは例外)。

カードスタック

card stacks

カードは複数枚をまとめてスタックさせることができます。

2Dピッカー

1D picker

複数のアイテムから、ひとつのものを選択させたいときには1Dピッカーが使用できます。 アイテムをカテゴリ分けしたい場合には、2Dピッカーを使用します。ピッカーで使用できるカテゴリは最大5つ程度までです。

ボイスコマンド

キューカードから実行されるボイスコマンドに応じてアクションを実行することも可能です。

選択リスト

selection list

選択リストを使って、複数アイテムを選択させることが可能です。

スタイル

Android Wear特有のデザイン上の注意点がいくつかあります。

peek card

Android Wear Materials

Android Wear Materials から、デザイン要素のサイズ仕様や、ユーザーフローパターン、デザインモックといったデザイン用のアセットを入手できます。

  1. 厳密には開発中はデバイスに直接インストールも可能ですが、リリース版では必ずハンドヘルド版といっしょにパッケージ化する必要があります。

コメント