利用者モードとUIの関係

タッチデバイスを視野にいれた UI パターンの事例がかなり出そろってきました。使いやすいと定評があるもの、流行なもの、採用例が多いものなど様々ですが、実際のところどの UI パターンを採用すれば良いか迷う場合がでてきます。「○○の場合は、このパターン」と一発で決めることが出来なくても、考慮したいパターンを絞ることができます。絞り込みの際に利用者のモードが役に立ちます。

モードとは、人がアプリケーションやサービスと向き合うときの状態のことを指します。利用者の意図、環境、時間、向き合っているデバイスに応じて、モードがダイナミックに変化することがあります。モードを理解することで、利用者のニーズに近いインターフェイスを提供することができます。同じ系統のアプリケーションでも UI が全く異なる場合がありますが、それは利用者のモードの捉え方の違いからだと考えられます。

モバイルアプリケーションの多くは以下の 5 つのモードに振り分けることができます。

  1. Explore(探索): 全貌を見渡したり、新しいものを見つけ出す
  2. Consume(消費): コンテンツ観覧にフォーカスする
  3. Communicate(対話): 人との繋がりを主軸にする
  4. Enhance(増幅): 様々な情報をレイヤーのように重ねる
  5. Create(創造): 利用者自らコンテンツを作り出す

ニュースアプリをひとつとっても、それぞれのモードによって最適な UI の方向性が随分異なります。ニュースアプリの初見をモードによって以下のように UI を変えることができます(これらがベストな選択ではありませんが、例として分かりやすいパターンを挙げています)。

モードによって異なるUI

  1. Explore : 最新ニュース、ホットなニュースが一望できる
  2. Consume : 記事をひとつひとつ観覧できる
  3. Communicate : 誰が取り上げているニュースか分かる
  4. Enhance : 地図上にニュースを重ねて、現地のニュースを知る

リスト系の UI パターンは幾つかありますが、モードを選定することで、最適なリストが見つかりやすくなります。デザインを決める際、議論の軸として「利用者のモードはどういったものか」を配慮すると話がしやすくなるでしょう。

もちろん、利用者のモードがひとつのアプリの中で全く変化しないということはありません。シンプルなアプリでも複数の小さなタスクが存在しており、それぞれ対象にしている利用者のモードが異なることがあります。例えば、Instapaper のようなニュースリーダーでは、リストビューと記事を読むビューの 2 つを行き来する導線があります。

UX Kanazawa の模様シナリオを基に、簡単なプロトタイプを作る小さなワークショップを昨年 UX Kanazawa で開催しました

利用シーン(シナリオ)を想像しながら設計をはじめると、様々なモードがあることに気付きます。しかし、可能であればひとつ重要なモードを選択し、そこの UI 設計から始めると良いでしょう。Instapaper の場合は「記事を読む」という Consume が最も重要なモードです。基盤となるシーンの利用者モードから設計することで、アプリ全体で必要とされる UI のヒントが見つかることがあります。Consume で最適な UI パターンは何か、Consume で想像している利用者はどのような姿勢をしているか、モードが変わったときの導線をどのように提供するか … 様々な課題があります。

利用者のモードを知れば、UI デザインできると言い切れるほど簡単な話ではありませんが、選択肢が多いデザイン要素を少しでも絞り込むことができるはずです。モードと UI パターンの関係性について調査するのは、ちょっと面白いかなと思っています。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。