インタラクションデザインパターン(2)

アプリケーションロールデザイン、
基礎の10パターン


ソシオメディア 上野 学

2007/3/19

基礎の10のアプリケーションロールデザイン。実現したいGUIには、どのパターンを選び、どう組み合わせればいいのか、考えてみよう

 画面のデザインが業務要件に影響を与える
- PR -

 前回の「80年代のAppleに学ぶUIの部品化とガイドライン」では、インタラクションデザインの作業にパターンを活用することの有用性について説明しましたが、今回からは、実際にどのようなデザインパターンがあるのかを考えていきたいと思います。

 私はこれまでの連載(ユーザビリティのヒントWebアプリケーションのユーザーインターフェイス)を通して、インタラクションやユーザーインターフェイスのデザインはプログラムが出来上がってしまってから最後に付け加えるというものではなく、システムの基本的な品質を決定する重要な要素として設計の初期段階から考えなければならないものであると主張してきました。なぜなら、そのシステムが提供しようとしている機能を、画面の見た目や操作の流れの中でユーザーが理解できるように表現できないのであれば、その機能を実装する意味がないからです。

 システムの設計では通常、ユーザーの要求を分析してそこから機能要件を定義していきますが、実際にGUIでそれを表現してみたら複雑過ぎてかえって仕事が面倒になってしまったり、開発コストに見合うだけの生産性の向上が見込めないようならば、システムのコンセプトを見直すべきでしょう。つまりユーザーが理解できる、もしくは十分に使える範囲に機能を限定することを検討しなければなりません。

 例えば、紙の書類を使って5種類の作業を行う業務があったとして、それらすべてを画面の中だけで完結できるようにしたいと考えた場合、実際にシステムの設計をして画面をデザインしてみると、思った以上に複雑になってしまって、従来のやり方よりも効率が悪くなるということがあります。その場合は、3種類の作業だけをオンラインのシステムで行うようにして、残りの2種類は従来の紙の書類を使った作業方法のままにする方がよいかもしれないのです。

 これはある意味、「業務要件ありき」の設計手法に対するアンチテーゼであり、デザインの側からもユーザーの業務要件にフィードバックを掛けるべきであるという新しいアプローチを示唆しています。つまり重要なのはシステム全体を適切に秩序立てることであり、その一貫した世界観にユーザーが適応することでより生産性が高まるという考え方です。前回引用した「コンピュータの設計と人間の活動は互いに影響し合いながら発展する」という言葉も同じ意味であり、現実世界を見れば、道具のデザインが仕事のやり方に良い意味で影響を与えていることは少なくないのです。

 そこで、インタラクションデザインの初期段階においては、そもそもGUIを使って行いやすい作業にはどのようなものがあるのかを認識し、システム化したい業務にマッチしたアプリケーションのロール(役割)を選ぶ必要があります。

 アプリケーションロールのパターン
 

 一般的に目にするGUIアプリケーションには、ユーザーに対して次のようなロー ルがあります。 今回紹介するのは次の10の役割です。

 
  1. Retriever
  2. Viewer
  3. Editor
  4. Player
  5. Configurator
  6. Processor
  7. Manipulator
  8. Chatter
  9. Commander
  10. Conductor

 1つのアプリケーションがこのうちの1つのロールだけを持っている場合もありますが、多くの場合は、複数のロールを併せ持っているでしょう。実現したい業務要件をGUIに落とし込むうえで、どのパターンを用いれば(組み合わせれば)よいか、考えてみてください。

1. Retriever(検索する)

 Retrieverパターンは、ユーザーに何かを検索させるものです。蓄えられたたくさんのデータの中から特定の目的に合致したものを検索するという行為はコンピュータの利用価値を決定付ける基本的な作業であり、ほとんどのアプリケーションにはこのロールが含まれるかもしれません。

 検索には、ユーザーが能動的に検索キーワードや条件指定を行うものもありますし、あらかじめ決められた条件に従って(検索が実行されているということをユーザーが意識することなく)自動的に検索結果が表示されるものもあります。

画面1:Gmail での能動的な検索(検索オプション)

画面2:Gmail での自動的な検索(受信箱)

画面3:Google でサイトを探す

画面4:インターネットアドレスのLookup

画面5:ファイルビューアーでファイルを探す

画面6:iTunes で曲を探す

 また、検索行為自体がそのアプリケーションの主な用途である場合もありますし、検索行為はあくまで操作対象とするオブジェクトを抽出するという準備作業であって、抽出したオブジェクトに対して行う編集行為がそのアプリケーションの主な用途である場合もあるでしょう。

1/4

 INDEX
インタラクションデザインパターン(2) 
Page1
10のアプリケーションロールパターン、アプリケーションロールのパターン、1. Retriever(検索する)
  Page2
2. Viewer(閲覧する)、3. Editor(編集する)
  Page3
4. Player(再生する)5. Configurator(設定する)
  Page4
6. Processor(データの変換や定型処理を行う)7. Manipulator(オブジェクトの操作)8. Chatter(リアルタイムに会話する)9. Commander(コマンドを発行する)10. Conductor(規定の順次的な手順に沿って操作する)

 関連記事

インタラクションデザインパターン バックナンバー


ユーザビリティのヒント

Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなヒント集。自動販売機でジュースを買うときの不要な動作から考える

最終更新 2006/10/20


HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間
ソリューションFLASH