
インタラクションデザインパターン(2)
アプリケーションロールデザイン、
基礎の10パターン
ソシオメディア 上野 学
2007/3/19
![]() |
6. Processor(データの変換や定型処理を行う) |
アプリケーションの内部では、さまざまなレベルでデータの変換や定型処理(関数の利用)が行われると思いますが、ユーザーが意識するレベルでこれらを明示的に行うのがProcessorパターンです。例えば、文字列の置換、ファイルの圧縮と解凍、データのシンクロ、バッチ処理の実行などです。
これらの情報処理がどういったアルゴリズムで行われているのかは、ユーザーには分からない場合がほとんどですが、定型処理の実行と結果の因果関係がユーザーに理解しやすいものであれば、ユーザーはストレスなくそのアプリケーション(機能)を使うことができます。Processorでは、処理の準備と実行命令を下すことがユーザーにとっての作業の中心となります。
![]() |
画面21:圧縮ソフトでファイルを圧縮する |
![]() |
画面22:Photoshopで定型アクションを実行する |
7. Manipulator(オブジェクトの操作)
Manipulatorパターンは、ファイルやデータオブジェクトなどの新規作成、移動、複製を行うものです。ユーザーにとって操作対象となるオブジェクトが、アイコン、ウィンドウ、行、セル、グラフィック要素などの表現で画面上に見えていて、それを(マウスで)直接操作できるようになっていることが理想です。
例えば、ユーザーがあるファイルをフォルダAからフォルダBに移動させる場合、そのファイルをドラッグ&ドロップで操作できるとGUIとして自然です。そのファイルのプロパティ変更画面を開いて保存先をパスで指定し直すといった操作ができてもよいですが、オブジェクトに対する直接操作感がないので、GUIとしては不自然です。デスクトップに見えているファイルの名称を変更するといった場合も同様に、プロパティ変更画面で属性を変更するという操作(Configurator)を強調するよりも、デスクトップ上でそのファイルのアイコンのそばの名称表示部分で直接変更できる方が自然です。
![]() |
画面23:デスクトップでアイコンをドラッグ&ドロップする |
![]() |
画面24:ファイル転送ソフトでアップロードする |
8. Chatter(リアルタイムに会話する)
Chatterは、ユーザー同士でリアルタイムに会話をするものです。主に、文字チャット、音声チャット、ムービーチャットといったコミュニケーションツールに該当します。電子メールもコミュニケーションですが、非同期であるため、ChatterというよりもRetriever+Viewer+Editorといった方がよいでしょう。
![]() |
画面25(Skypeサイトより):Skypeで音声チャットする |
![]() |
画面26:「Visual Nexus」の利用画面 |
9. Commander(コマンドを発行する)
Commanderは、主にコマンドラインのインタラクションで用いられるものです。操作対象のオブジェクトを頭の中に想像しながら、特定の文法に従ってコマンドを入力しながら操作を進めていきます。
![]() |
画面27:コマンドラインでコンピュータを操作する |
10. Conductor(規定の順次的な手順に沿って操作する)
Conductorパターンは、いわゆるウィザードです。決められたコントロールに決められた順序で入力・選択していくインタラクションで、作業方法をユーザー自身が変更する余地はありません。簡単な手続きを着実に完遂させるためには有用ですが、入力項目が多く、なおかつ手続きの意味(作業と結果の因果関係)が分かりにくい場合には、かえってストレスフルなインタラクションになる恐れがあります。
![]() |
図28:設定アシスタントを使って決められた手続きを行う |
以上、アプリケ―ションの基本的なロールに関するパターンを紹介してきました。いずれも普段コンピュータを利用していてよく目にするものなので、それぞれのコンセプトは一般的に理解されやすいと思います。これらを組み合わせてシステム全体のインタラクションを作っていくことで、多くのユーザーに受け入れられる操作性を実現できるでしょう。
4/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(規定の順次的な手順に沿って操作する) |
関連記事 |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 (2017/7/12)
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET/POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 (2017/7/10)
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文&ループ脱出のbreak/スキップのcontinue【更新】 (2017/6/26)
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート (2017/6/12)
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
![]() |
|
|
|
![]() |