インタラクションデザインパターン（3）
モーダル／モードレスなインタラクション

データ操作方法、自由な手順と不自由な手順の選び方

ソシオメディア　上野 学
2007/5/11

2. モードレスインタラクション

　では次に、モードレスインタラクションを考えてみます。前述のとおり、コンピュータからモードを完全になくすことはできません。しかしモードが多くなると使い勝手が悪くなってしまいます。このジレンマを解消するためには、モードを意識しなくても使えるようなインタラクションを実現する必要があります。システムがいまどのようなモードにあるのかを意識しなくてよいなら、ユーザーはモードに応じた使い方をいちいち覚えておく必要がありません。

・空間的な非定形作業

　モードの大きな問題は、「いまから行おうとしている作業に合ったモードを指定する必要がある」ということです。これをどうすれば解決できるでしょうか。

　われわれが現実世界で行っている行動を振り返ってみると、そこでは自然なモードの切り替えが行われていることに気付きます。われわれの注意は一度に1つのことにしか向けられませんから、無意識のうちに次々とモードを切り替えているのです。例えば、テレビを見ているとき、われわれは「テレビを見るモード」にあります。手元の本に注意を移してそれを読み始めれば「本を読むモード」になります。急に電話が鳴れば、「電話応答モード」になるでしょう。

　このようなモードの切り替えがコンピュータ操作時のモード切り替えと違うのは、いちいちモードを切り替えるための合言葉を唱える必要がないということです。興味の対象を意識するだけで、即座にモードが切り替わるのです。手続きとしてモード切り替えの操作を行ってから対象に向かうのではなく、対象に向かうこと自体がモードの切り替えを意味しているのです。

　GUIでは、このような自然なモード切り替えが多く実現されています。例えば、デスクトップに複数のウィンドウが開いているとします。そのとき、操作可能なのは一番手前に表示されているウィンドウのみです。しかしほかのウィンドウにモードを切り替えるための特別な操作は必要ありません。単に、目的のウィンドウにポインタを合わせてクリックするだけです。するとそのウィンドウが一番手前に表示され、操作の対象となります。

　Excelでは、基本的にスプレッドシートの内容が「表示モード」で表示されています。あるセルの内容を変更したいとき、ユーザーは「編集モードに切り替え」といった特別な操作をする必要はなく、単に目的のセルをクリック（またはダブルクリック）するだけでよいのです。その状態で数字や文字をタイプすれば、セルの中に入力されます。

画面5：Excel では変更したいセルをその場で入力モードにできる

　このような仕組みを実現するためには、当然、技術的にクリアしなければならない課題が多くあるでしょう。複数の作業の状態をメモリーにとどめておくことや、複数の作業が1つのリソースを参照しているときの整合性を保つことなどです。

　一方、ユーザーインターフェイス上で重要なことは、興味の対象が「ウィンドウ」や「コントロール」といったものとして視覚的に表現され、それらが同時に画面上に見えていることです。そしてそれらに操作を加えたときに即座にフィードバックが返され、その場で操作結果を確認できることです（参考：操作内容についての可視性とフィードバック）

　画面上に表示されるユーザーインターフェイス要素は、その形や位置によって、それぞれの役割と状態を表現します。ほかの要素に比べて相対的に大きいのか小さいのか、手前にあるのか奥にあるのか、クリックできるのかできないのか、といったことを常に体現し続けます。

　ユーザーは順序にとらわれず、画面上に見えている要素の中から興味のあるものを選びながら操作を進めます。その際、むやみに画面が遷移したり、突然新しい要素が大量に出現したり消えたりすることなく、作業の「場」として安定した空間を保ちます。つまり作業の進行は画面遷移として表現されるのではなく、場の段階的な状態変化として表現されるのです。

・経験の組み立て

　モーダルなインタラクションが電車だとすれば、モードレスインタラクションは自動車に例えることができます。自動車は自分の好きなルートで目的地に向かうことができますし、途中で休憩したり、行き先を変更することも自由です。また、あらかじめ目的地（作業の結果得ようとするもの）がはっきり定まっていなくても、作業の状態を見ながら最終的なゴールを徐々に決めていくことができます。ユーザーは「乗客」ではなく「運転手」になるのです。

　ただし、自動車式の作業では、自分自身で操作手順を組み立てなければなりません。例えばプレゼンテーションソフトで発表用のスライドを作成しているとき、自分が作りたいプレゼンテーションを実現するためには何ページぐらい必要なのか、どういった内容と構成にすべきか、どのようなグラフィックが必要で、それはどうやって作ればよいのか、といったことを随時自分で考えて、そして試行錯誤しなければなりません。つまり現実世界で何か創作作業をするのと同じように、経験を積み上げながら少しずつゴールに向かって進んでいかなければならないのです。もしかしたら、スキルが足りないために納得のいく結果が得られない恐れもあります。

画面6：白紙を前にしたユーザーは自分で操作手順を組み立てる必要がある

・オブジェクト指向

　興味の対象が物として見えており、その物に対して働き掛けながら作業を進めていくという意味で、モードレスインタラクションはオブジェクト指向であるといえます。画面上のオブジェクトは自立しており、外部からのイベントに応じて特定の振る舞いをします。

　パソコンのデスクトップでは、フォルダアイコンをダブルクリックすると「フォルダが開いて中のファイル一覧が表示される」という結果になります。アプリケーションアイコンをダブルクリックすると「そのアプリケーションが起動する」という結果になります。

　 同じ操作が状況によって違う意味になるので、そこにはモードが発生しているといえます。しかしどちらも「開く」という目的で一貫しているので、ユーザーにとっては自然な動きに感じられます。これはオブジェクト指向プログラミングの「ポリモーフィズム」のコンセプトに従っているといえるでしょう。

　オブジェクト指向ユーザーインターフェイスは、オブジェクト指向分析の結果を反映させることができます。基本的なエンティティとして抽出されたオブジェクトをアイコンやウィンドウといった単位で画面上に提示します。例えば、アドレス帳ソフトであれば、代表的なクラスとして「人」があり、リストボックスなどにそのインスタンスが一覧されます。ユーザーはその中から目的の人物を見つけ、アイコンをダブルクリックすると、その人物の属性が詳細情報として表示されます。音楽再生／管理ソフトであれば「曲」オブジェクトが1曲単位で画面上に提示されますし、Eメールクライアントであれば「Eメール」というオブジェクトが1通単位で提示されます。

画面7：曲やアーティストといったオブジェクトをユーザーが直接操作する

　オブジェクト指向ユーザーインターフェイスでは、ユーザーが目的のオブジェクトを直接操作しているように感じさせることが重要です。そのためには、各オブジェクトがユーザーにとって「意味のある」ものである必要があり、またそれらがユーザーの目的に対してどのように役立つのかが分かるようになっていなければなりません。

　こういったことから、オブジェクト指向といっても、プログラム設計上のオブジェクトをすべてそのまま視覚化する必要はありません。逆に、ユーザーがシステムのコンセプトをメンタルモデルとしてシンプルにイメージできるような形で表現することが望まれます。

・名詞→動詞

　モードレスインタラクションでは、「名詞→動詞」の順序で操作を行います。この場合の「名詞」は、アクションに対するパラメータというよりも、操作の対象となる「物（オブジェクト）」という位置付けになります。

　ユーザーは画面上に見えているオブジェクトをマウスで指定し、次にそのオブジェクトに対するアクションをメニューなどから指定します。例えばあるワープロ書類のファイルアイコンがある場合、それを開くためには、まずそのアイコンをクリックして選択し、次にメニューから「開く」を選びます。前述のモーダルインタラクションにおける「開く」の操作順序と比較してください。またモードレスインタラクションでは、このファイルを「ダブルクリック」で開くことも可能です。ダブルクリックの場合は、「オブジェクトの指定」と「アクションの指定」を同時に行っていることになります。

画面8：対象オブジェクトを指定してからアクションを指定する

　アイコンだけでなく、データの編集も「名詞→動詞」の順序で行います。例えばワープロ書類である文字列を太字にしたいとき、対象の文字列をマウスのドラッグで選択し（オブジェクトの指定）、次に書式メニューから「太字」を選びます（アクションの指定）。

　「名詞→動詞」の操作順序のメリットは、「待機状態」が発生しないことです。前述のとおり、モーダルインタラクションにおける「動詞→名詞」の操作では、アクションを選択した後、パラメータを指定するまでほかの操作に移ることができません。しかしモードレスインタラクションの「名詞→動詞」の操作では、対象オブジェクトを指定した状態でもそのままほかの操作（別なオブジェクトの指定）に移ることができます。またパラメータ指定のためのダイアログボックスでは、大抵、パラメータを指定した後に「OK」や「実行」といったボタンを押下する必要がありますが、モードレスインタラクションであれば、アクションを指定した瞬間にその処理を開始することができます。

　ただし「名詞→動詞」の操作では、対象オブジェクトが複数ある場合、これらを同時に選択する必要があるため、選択操作が複雑になる傾向があります。ドラッグで複数アイコンを囲んだり、Shift を押しながらクリックしていくといった操作が必要です。

　Webにおけるリンクのクリックは、「対象リンクの指定」と「リンク先へのジャンプ」という「名詞→動詞」の手順を1つの操作で行うものですが、上記の制約から、例えば画面上に見えている2つのリンクを同時に別ウィンドウに開くといったことができません。リンクに限らず、複数同時に見えているインスタンスが、単数選択のみを受け付けるのか、それとも複数選択が可能なのか、ということを視覚的に表現しづらいという課題もあります。複数選択が可能であることを表現するには、いまのところチェックボックスを使うしかないでしょう。

・アクセラレーション

　これらのことから、モードレスインタラクションには、コンピュータを作業の補助ツールとしてとらえ、バーチャルな世界のデータ操作を加速化するという「アクセラレーション」の考え方が反映されているといえます。非定形的な仕事を円滑化するのがモードレスインタラクションの目的なのです。

3/4

INDEX
インタラクションデザインパターン（3）
	Page1 操作性についての基本コンセプト／インタラクションのモード
	Page2 1. モーダルインタラクション ・順序ベースの定型作業・目的への直進・タスク指向・動詞→名詞・オートメーション
	Page3 2. モードレスインタラクション ・空間的な非定形作業・経験の組み立て・オブジェクト指向・名詞→動詞・アクセラレーション
	Page4 モーダルかモードレスかの決め手

関連記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）