ダイアログとモーダルの違い

ダイアログとモーダルが同じなのか違うのかが明確に分からないUIデザイナーはいますか？もしそうであれば今ここで違いを確認しておきましょう。

そもそもダイアログとモーダルは並列の関係ではありません。中央に出てくるものはダイアログ、画面下から出てくるものはモーダルと言った見た目や、表示方法、内容の緊急度による違いではないのです。

ダイアログとは

ダイアログという言葉は「対話」という意味の言葉です。

Webサイトやアプリでは殆どの場合はシステムとユーザーとの対話を指し、ユーザーに情報を提示してユーザーに応答してもらうウィンドウ全般の事を指します。

この事から詳細を押して表示するウィンドウ、画面下から画面を覆うように表示するウィンドウ、エラー時の警告ウィンドウなど全てダイアログという事がわかります。

モーダルとは

ではモーダルとはなんなのでしょうか？こちらもその言葉の意味を知れば理解が深まります。

モーダルとは「モードがある」という意味の言葉です。

ユーザーがアクションを行う必要がある特殊なモードにシステム移行し、それまで操作していたコンテンツを操作無効にして強制的にアクションを促す状態を指します。

そのためバックグラウンドにあるコンテンツを操作できないものはダイアログ、ハンバーガーメニュー、ライトボックスなど含め全てがモーダルという事になります。

一般的にイメージするダイアログやモーダルと呼ばれるものは、モーダルなダイアログなのです。

モードレスとは

モーダルが状態を指す言葉なのであればもちろん、そうでない状態も存在します。それがモードレスです。

モードレスなダイアログというと「そんなものある？」と思われる方もいるかもしれませんが、以外にも私たちはモードレスなダイアログを日常で目にしています。

例えばこれはiOSのマップアプリです。スカイツリーを地図上でタップすると下から詳細のダイアログが表示されますが、モード移行が行われず地図の操作も可能です。

Gmailでは新規メッセージをモードレスなダイアログで作成できるため、過去に受信したメールを確認しながらメッセージを書く事ができます。

Googleカレンダーでは予定を新規追加する際にモードレスなダイアログが使われています。これによりダイアログを移動し、すでに登録されている予定を確認しながら新規追加する事ができます。

このようにそれまで操作していたコンテンツを確認しながら作業したい場合などにモードレスなダイアログはとても効果的です。

まとめ

ダイアログとは「対話」であり、ユーザーに情報を提示するウィンドウを指します。そしてモーダルとは「モードのある」状態であり、強制的にアクションを促すために移行し、その他のコンテンツの操作を無効にした状態を指します。

一般的にはダイアログとモーダルという言葉を混同している人が殆どだとは思いますが、UIのプロであるUIデザイナーはその違いを理解しておくべきですね。

言葉の由来を知っておくと記憶の定着が強化されると思います。