「モーダル」と「モードレス」
ユーザーインターフェース(UI)設計の専門用語にモーダルとモードレスという言葉があります。WebサイトのUIを検討をする上で、理解しておきたいキーワードのひとつだと思いますので、簡単に触れたいと思います。
詳しい解説は、たとえば下記のサイトをご参照いただければと思いますが:
- ソシオメディアさんの定義:モーダル/モードレス
- IT用語辞典 e-Wirds の解説:モーダルダイアログ/モードレスダイアログ
もう少し平易に表現すると、Webにおける「モーダル」「モードレス」とは、下記のように言うことができます。
- 「モーダル」はユーザーが自由に操作できない状態(WebサイトやWebアプリケーションが、ユーザー行動を一方向に制限している状態)
- 「モードレス」はユーザーが自由に操作できる状態(WebサイトやWebアプリケーションが、ユーザー行動を基本的に制限していない状態)
Webサイトは(実際の利用シーンにおいて)ユーザー側が主導権を持つメディアであること、開発側が想定した動線(スタートページからゴールページまでの遷移)を必ずしもユーザーが辿るとは言えないこと、ユーザーにはあるサイト/ページを閲覧中に別のサイト/ページを併せて参照する権利があること(確認のために両者間を自由に行き来することも可)、といった事情から、WebサイトのUI設計は基本的にはモードレスであるべきだと言えます。モーダルなUIは、たとえば認証や申し込み手続きや課金決済など、横道に逸れてコンテキスト(文脈)を見失うとユーザー側に不利益が生じる場合に限定すべきでしょう。
また、ブラウザという「仲介物」を通じて閲覧される以上、Webページ(コンテンツ)の中身をどんなにモーダルに作っていても、ブラウザの操作子が使える限りは完璧なモーダル状態になり得ない、という制約も認識しておく必要があると思います。当サイトのコラム記事「Ajaxによる画像の拡大」では、モーダルに設計されたコンテンツにおいて、サイト開発側が想定しなかった行動をユーザーがとる例(ブラウザの[戻る]ボタンをクリックしてしまう)に触れています。ユーザー側に不利益が出ないように配慮して敢えてモーダルにUIを設計する場合であっても、ユーザーが「モードレスな行動」をしてしまう可能性を想定し、エラーにならないように、ユーザーが混乱しないように、ユーザーが目的達成のために簡単に復帰できる(本来のコンテキストに戻れる)ように、できるだけ配慮したいところです。
なお、サイトによっては、モーダルな状態をブラウザウィンドウごと作り出そうとして、別ウィンドウを開き、ブラウザのツールバーやメニューバー、アドレスバーを隠してしまうようなケースが見られます。そもそも別ウィンドウを開くこと自体、問題を孕んでいるのでおすすめできませんが(参照:コラム記事「別ウィンドウを開くことの是非」)、それはさておき、この場合、別ウィンドウを開くという時点で(元の親ウィンドウが併存する以上)完璧なモーダル状態たり得ないと言えますし、本来ブラウザに備わっているべき操作子を隠してしまうことは、ユーザーがコンテンツの意味を正しく理解する上での阻害要因になったり、余計な不安をユーザーに与えることになったり、モーダルな手続きが完了した後の動線設計で破綻をきたすことになったりしますので、このようなUI設計は避けるべきでしょう。

コメントを投稿する
(投稿いただいたコメントは、当サイト管理者による承認後、公開させていただきます。なお、コメントの記入は、日本語でお願い致します。)