様々なサイトで使われているモーダルウィンドウ。簡単に言うと、今見ているサイトの画面に重なるように小さいウィンドウが表示される機能のことです。
リンクのようにページが移動するのではなく、一時的に画面上に浮き出させることができるため、使い方にもいくつか事例があります。しかし、表示のさせ方によってはユーザーにストレスを与えることになりかねないため、デメリットも。
モーダルウィンドウについて使い方やデメリットをご紹介します。
モーダルウィンドウとポップアップウィンドウの違いとは
画面上に重なって表示されるウィンドウと言えば、「ポップアップウィンドウ」という言葉もあります。違いは何でしょうか。
モーダルウィンドウは、ウィンドウ内の表示に応答しない限り、他の操作をすることができません。選択、閉じる、キャンセルなどをクリックし、アクションを起こすことで立ち上がったモーダルウィンドウを完了させることができます。
一方、ポップアップウィンドウは表示されても他のウィンドウを開き、操作することが可能です。
モーダルウィンドウの使い方
サイトによって様々な使い方がありますが、よく知られているものをいくつか挙げてみます。
警告、エラーメッセージ
操作ミスの防止として、ユーザーに目立たせる警告文を表示させることができます。
ファイルの消去前に「本当によろしいですか？」、何かのアクションを起こす前に「このまま実行してよろしいですか？」と、ワンアクションあることによって大きな損失を防ぐことができます。
ローディング中の表示
ロード中にユーザーが気づかず、他操作をしてしまうことを防ぐことができます。「ロード中です」とクルクルとしたアニメーションや、ゲージで表示させることでユーザーは視覚的に状況がわかります。「キャンセル」ボタンを設置し、応答を中断させる場合もあります。
詳細の表示、選択、入力
ホテルの部屋のランク、飛行機や劇場のシートの種類、洋服や家具のサイズ、カラー選択･･･
様々な業界における用語、お店各自のサービス名称など、一般ユーザーにとってわかりにくい言葉など、より詳細を表示させる時に補足説明として使用することがあります。
ECモールなどでは、洋服や家具を選択後、モーダルウィンドウによってサイズ、カラーなどのより詳細の項目を選択、入力へと進む使い方もあります。
詳細説明のために、リンクで他ページへ移動させるよりも手軽に補足説明を知ることができるというメリットがありますね。
モーダルウィンドウのデメリット
モーダルウィンドウはWeb制作をする際、使い方に注意が必要です。
別ウィンドウは一時的な補足説明として有効ですが、スクロールが必要なほど長文にしてしまうと、ユーザーは操作がしにくく、ストレスになります。
また、モーダルウィンドウが重なって表示されるため、邪魔で元の画面を見ることができないなど、ユーザーにとって操作が中断されたと感じることもあります。
Web制作側の都合だけでなく、ユーザーにとって必要な表示、操作なのかどうかをよく考えてから取り入れましょう。