「モーダル」と「モードレス」
ユーザーインターフェース (UI) デザインの専門用語に「モーダル (modal)」と「モードレス (modeless)」という言葉があります。Web サイトの UI を設計するうえで、おさえておきたいキーワードだと思いますので、簡単に触れたいと思います。
「モーダル」「モードレス」とは?
ユーザーインターフェース設計のコンサルティング会社、ソシオメディアさんの用語紹介 (グロッサリー) によると、「モーダル」「モードレス」はそれぞれ下記のように定義されています。
モーダル
モードがある状態。つまり、システムが特定の機能の使用に制限された状態。ユーザーが自由に操作を行えなくなることと、モード別に機能の意味や振る舞いが変化することから、ユーザーインターフェースのデザインでは、できる限りモードを設けないほうがよいとされる。
モードレス
モードがない状態。ユーザーインターフェースをデザインする際に目指すべき状態。状況に依存した機能制限がなく、自由な手順でタスクを進行することができ、かつ特定の操作がシステムによって常に一定に解釈される状態。
平たく言ってしまうと、「モーダル」は、今いる状況から次にどう操作するかをユーザーが選べない状態 (Web サイトやアプリケーションが、ユーザー行動を一方向に制限している状態)、これに対して「モードレス」は、次の操作をユーザーが自由に考えることができる状態、と言えそうです。
Web サイトの UI は基本的にモードレスであるべき
Web は、その実際の利用においてユーザー側が主導権を持つメディアであること、開発側/運営側が想定した動線を必ずしもユーザーが辿るとは言えないこと (むしろ自由な動線をユーザーに解放すべきであること)、を考えると、Web サイトの UI は基本的にモードレスであるべきだと言えます。モーダルな UI は、たとえば認証や申し込み手続きや課金決済など、横道に逸れてコンテキスト (文脈) を見失うとユーザー側に不利益が生じる場合に限定すべきでしょう。
UI 設計のバイブルのひとつとして有名な「ヒューメイン・インタフェース―人に優しいシステムへの新たな指針」という書籍でも、著者の Jef Raskin (ジェフ・ラスキン) 氏は下記のように説いています。
モード (mode) とは、インターフェースにおける間違い、混乱、不必要な制限、複雑さの温床となる重要なものです。
出典 : 「ヒューメイン・インターフェース」 P.41
インターフェース・デザインにモードを導入する場合、そのモードによって制御される状態がユーザの注意の所在となっており、同時にそれがユーザから可視になっているかユーザの短期記憶に存在していることを証明することによってのみ、ユーザをモードに起因する間違いから解放できるのです。...(中略)... モードのあるインターフェース・デザインを避ければ、常に安全なのです。
出典 : 「ヒューメイン・インターフェース」 P.58
UI をモードレスにデザインする
モードレスな UI を作るにあたっては、どんなことに留意すればよいのでしょうか。色々と見聞きしたことを自分なりに咀嚼すると、おおよそ、下記のようになるかなと考えています。
- 操作対象 (オブジェクト) がまず目に入る (手に届く) ようにし、そのうえで、オブジェクトをどう操作する...という流れを意識してデザインする。
- オブジェクトは、その役割を表わすようデザインする。
- オブジェクトは、直接操作が可能で、かつその操作は可逆的であること。ただしこれは「アンドゥ (実行済の操作を取り消して過去に遡ること)」ができることとは限らず、別の方法 (入力パラメーターなど) を試すことによって様々なやり直しができることも含む。
- 使用方法 (操作の流れ) をどう組み立てるかは、ユーザー側に解放する。
- 「決まった手順」「シーケンス」よりも「手順の入り繰り」「広がり」をイメージする。
モードレスな UI は、経験や試行錯誤によってユーザー自身レベルアップできる余地を持っていると言えるので (効率的に作業できるようになったり、うまく使いこなせるようになったり)、「使う楽しさ」につながることも期待できそうです。見慣れない (過去の経験に基づくメンタルモデルに合致しない) UI であったとしてもわずかな学習で克服でき (メンタルモデルを書き換えることができ)、以後、ユーザーが自分なりに使えるようになる...というのもモードレス UI を作る醍醐味と言えるかもしれません。
「モードレス」については、World IA Day 2012 Tokyo での上野学氏 (ソシオメディア) の講演がとても参考になると思いますので、興味のある方は一読されるとよいと思います。