モバイルWebのUIデザインことはじめ : 第8回 どんなときに使うのがモバイル? その2:ユーザー行為で知るデザイン原則

by 矢野 りん

Posted on 03-19-2014

モバイル WEB の UI デザインことはじめ

前回は、モバイル端末はわたしたちの行動、行為を情報化する機器である。というお話をしました。

今回はわたしたちがモバイル端末(主にスマートフォン)を使ってどのように情報を確認しているのかについてお話しします。

PCと違い、スマートフォンは移動中の利用率が非常に高い端末です。電車の待ち時間、乗車中、レジに並んでいる間などなど…移動のスキマ時間に使います。

 位置情報をもとに物事を検索するひとの多くが、移動中ではPCよりもスマートフォンから検索を実行していることがわかるデータです(2014年、Google発表)。移動中やお店の中で地域情報を調べる人が多いようです。

Understanding Consumers’ Local Search Behavior

スマートフォン使用中、人は1つのタスクに集中しません。常時差し込まれる「通知」によって作業や興味は寸断されます。

例えばこんなユースケースの人を想像してみましょう。ある映画を観に行こうと電車で目的地に移動中、目的の映画の主演俳優が出演した、別の作品を話のタネにネットで調べています。俳優の名前でネット検索をしていたら、友人がSNSに書き込みをしたという通知が飛んできます。検索の手を止めてSNSアプリを起動し、その書き込みを確認します。その間、たまたまタイムラインで別の映画の話題を目にします。するとその人はその映画のことが急に気になりだします。そして現在地から最も近い映画館のその映画の上映時間を調べ始めるのです。

このようにスマートフォンのユースケースを具体的に見てみますと、どんなに有益で興味深いコンテンツであっても5分10分じっくり目を通してもらえることは稀だと考えたほうがよさそうです。

よってモバイルむけコンテンツは基本的に以下のような要件を満たすことが望ましいでしょう。

モバイルコンテンツデザインの要件

こうしたデザイン要件を満たしやすい体裁が「カード(小さい範囲に完結した情報が収まっているUIのこと)」です。

カードは「拡張したリスト」とも呼ばれ、情報を選びやすく並べるのに適しています。また、原理的に短時間で把握できるボリュームに情報量を抑えられます。インタラクション効果を使って自然に表示サイズを拡張させる使い方もできます。ユーザーが必要なときに、概要表示スペースが拡張してよりくわしい情報が確認できる、といった操作の流れがつくれます。

 Google Now(左)とMashable(右)のカードUI。タップするとカードが拡張して詳細情報を表示します。

このように状況に応じて表示する情報のボリューム感が変更できるデザインを「アダプティブ(順応性のある)デザイン」と言います。「アダプティブ」な状態は、モバイルコンテンツデザインの前提条件です。

ところでスマートフォンがカード程度なら、スマートウォッチのようなマッチ箱程度の表示領域ではどんなデザインが許容されるのだろう?と、興味がわいてきませんか?

実は、こうしたいわゆる「ウェエアラブルデバイス」のデザイン原則もすでに存在します。Android Wareのデザイン原則はここで確認できます。

ウェエアラブルデバイスのデザイン原則

例えばユーザーがある時間、ある場所に訪れたとき、センサーがそれを感知してユーザーに必要な情報を自動的に提供し、自動的に消える情報。起動するというアクションさえ設計に入れないアプリ(サービス)がウェエアラブルデバイス向けのコンテンツです。情報はコンテンツと通知機能の中間のような位置付けになります。

こうした要件にかなうコンテンツは「コンテクストアウェア(ユーザーの行動や心理的な欲求に沿うこと)な情報」と呼ばれます。

コンテクストアウェアネスという状態を反映するためにデザインされているのがAndroid WearやApple Watchのようなウェエアラブルデバイス、というわけです。

 Android Wearがコンテクストアウェアをどのように実現するのかを説明するために事例を集めたコンテンツです。空港のゲート内で取得済みマイルを表示したり、出発時刻から計算してホテルのレイトチェックアウトサービスを自動的にお勧めする通知を紹介しています。

Context Awareness on Android Wear

次々新しい概念が出ては消えるテクノロジー業界ですが、何ごともユーザーの行為を中心に捉えると、適切な原理原則が見えてきます。いつの時代もデザインとは人間の行為を観ることが仕事なのですね。

Topics: クリエイティブ, UI / Web デザイン

Products: