インタラクションデザインパターン(3)
モーダル/モードレスなインタラクション
データ操作方法、自由な手順と不自由な手順の選び方
ソシオメディア 上野 学
2007/5/11
1. モーダルインタラクション |
モードが強く反映されているインタラクションを、ここではモーダルインタラクションと呼びます。ソフトウェアのインタラクションには伝統的にモードがあります。例えば初期のワープロには「入力モード」というものがあり、新しく文字を入力するにはシステムを「入力モード」に切り替える必要がありました。現在のパソコンにもモードの感覚は強く残されています。その代表がアプリケーションで、文章を作成したければワープロソフト、表計算をしたければ表計算ソフト、といった具合に、ユーザーは行いたい作業の性質に合わせて適切なアプリケーションを起動しなければいけません。
そもそも道具というものは、ある用途に特化しているものです。何にでも使える道具というものは意味を成しません。道具がデザインされるうえで、すでにモードの発生が前提となっているのです。用途が明確であるほど、道具は合目的性を高めて利用効率を向上させることができます。つめを切るにはハサミよりもつめ切りの方が効率的です。一方、ある目的に特化し過ぎた道具は汎用性を失ってしまうので、使いにくくなる場合もあります。無人島に行くとき、ハサミとつめ切りのどちらか一方しか持っていけないとしたら、おそらく汎用性の高いハサミを持っていくでしょう。自転車が欲しいとき、ロードレーサーにするかママチャリにするかは、その人が求める合目的性と汎用性とのバランスで決定されるわけです(もちろん価格も大きく関係しますが)。
・順序ベースの定型作業
ユーザーの用途がかなり明確に限定されている場合、システムのインタラクションにはモードが強く反映されます。その方が利用効率が高いからです。モーダルなインタラクションでは、操作の順番や分岐点がはっきりと決められており、寄り道がありません。このようなインタラクションは「ウィザード」と呼ばれることもあります。
ウィザードでは、紙芝居のように画面が順次的に提示されます。例えば、アプリケーションのインストーラーは、そのアプリケーションをインストールするという限定的な目的に特化していますから、かなり強いモードが発生します。インストーラーを利用するとき、ユーザーが行うのは、「インストーラーの起動」と「インストール先の指定」ぐらいです。つまり処理の開始を合図して最低限のパラメータを与えるだけで、後はプログラムが自動的に処理を行い、目的を達成してくれるわけです。
画面2:ウィザードでは操作の順番や分岐点がはっきりしている |
ATMのインタラクションもモーダルです。ただし用途は複数想定されており、ユーザーは初めの画面で「引き出し」「預け入れ」「振り込み」「残高照会」といったメニューの中から1つを選択します。選択するとそれぞれのモードに入り、特定の順序で入力を促され、ガイドに従いながら操作を進めることになります。一連の操作が完了すると、モードはクリアされ、最初の画面に戻ります。あるモードの中にいるとき、ユーザーはほかの作業をすることができません。「引き出し」の操作をしているとき、ユーザーは「振り込み」の操作をすることができません。「振り込み」をしたければ、「引き出し」の操作をキャンセルするか完了するかして、一度「振り込み」モードを抜けなければならないのです。
画面3:ATMではモードを選択することから操作を始める |
ウィザードの利用は定型的な作業であり、ユーザーは指示に従って決められた順序で操作を進めます。操作手順が限定されているため誰にでも使えますが、その半面、融通が利かないので自由な使い方ができません。
・目的への直進
モーダルインタラクションは、「電車式」ということもできます(参考:「電車式」と「自動車式」、使いやすいのはどっち?)。つまりユーザーは適切な電車を選んで乗り込むだけで、後はシステムが自動的に目的地まで連れて行ってくれるのです。電車に乗っている間、ユーザーは「乗客」となります。乗客は、現在電車がどの辺をどれぐらいのスピードで走行しているのか自覚できませんし、その必要もありません。多くの乗客にとってこれは安心につながります。自分が操縦を間違えておかしな方向へ行ってしまう恐れがないからです。
モーダルインタラクションで重要なのは、ユーザーがあらかじめ自分の目的を自覚している必要があるということです。ATMを前にして、自分が「預け入れ」をしたいのか「振り込み」をしたいのか分かっていなければ、立ち往生してしまいます。つまりシステムを設計する側からすれば、ユーザーの用途を正確に理解して、分かりやすい言葉で機能のメニューを提示しなければならないのです。
・タスク指向
ユーザーの用途、つまり業務要件を明確にして、そこから必要な機能を定義し、業務フローに沿ってそれらの機能を提示していくという流れは、一般的にシステム開発で行われる設計手順と合っています。ユーザーが行うこと(タスク)を業務要件として定義できるなら、それに特化したモーダルインタラクションを実現することで、業務の効率を高めることができます。その意味で、モーダルインタラクションはタスク指向といえます。
タスク指向の設計では、画面のレイアウトや画面遷移を、ユーザーのタスクを意識しながら決定していきます。ユーザーのタスクが複雑になれば、単純なウィザードではなく、途中に条件分岐を多く含む構造化された画面遷移になるでしょう。ただしユーザーが何の業務を行っているのかということは常に特定されているので、作業の始まりと終わりは、システムとユーザーの双方にとって明確になっています。
タスク指向の設計は、「そのシステムでユーザーがやること」を手掛かりにしているため、上流工程で行う「ユースケース分析」や「アクティビティ分析」の結果が直接ユーザーインターフェイスの在り方に影響を及ぼします。
・動詞→名詞
ATMの例でも分かるとおり、モーダルインタラクションにおいては、ユーザーはまず自分が行いたいことを指定します。例えば自分の口座からお金を下ろしたければ、「引き出し」のボタンを押します。そして次の画面で(暗証番号を入力してから)下ろしたい金額を指定します。この「アクション指定→パラメータ指定」の順序がモーダルインタラクションの特徴で、このことを「動詞→名詞」の操作手順ともいいます。
ユーザーがアクションを指定した時点で、システムはモード状態になり、パラメータが指定されるのを待ち受ける状態になります。この待ち受け状態の典型がダイアログボックスです。例えばワープロソフトを使っているとき、「ファイル」メニューから「開く...」という項目(アクション)を選択すると、開く対象のファイルを選択(パラメータ指定)するためのダイアログが開きます。ユーザーが対象のファイルを指定するかキャンセルするまで、ダイアログは開いたまま(待機状態)となります。
画面4:動詞→名詞の操作手順 |
フォーム画面もダイアログの一種であり、パラメータ指定の待機状態だといえます。例えばショッピングカートの画面で「レジに進む」というボタンをクリックすると、購入手続きのフローに入り、支払い方法や配送先などを入力するフォームが表示されます。作業を進めるためには、適切な情報でフォームを埋める(パラメータ指定)か、もしくは購入手続きをキャンセルするしかありません。
・オートメーション
これらのことから、モーダルインタラクションには、コンピュータに自分がやりたいことを伝えて実行させるという「オートメーション」の考え方が反映されているといえます。定型的な仕事を自動化することがモーダルなシステムの目的なのです。
2/4 |
INDEX | ||
インタラクションデザインパターン(3) | ||
Page1 操作性についての基本コンセプト/インタラクションのモード |
||
Page2 1. モーダルインタラクション ・順序ベースの定型作業・目的への直進・タスク指向・動詞→名詞・オートメーション |
||
Page3 2. モードレスインタラクション ・空間的な非定形作業・経験の組み立て・オブジェクト指向・名詞→動詞・アクセラレーション |
||
Page4 モーダルかモードレスかの決め手 |
関連記事 |
- 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データの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|