画面に小さいサブウインドウを出して、その中の操作(警告表示への了解など)を完了しない限り他の操作を受け付けなくする仕組みをモーダルウインドウ(またはモーダルダイアログ)といいます。ユーザに特定の操作に集中させる効果がありますが、使いどころを間違えると不便極まりないことになるので注意が必要です。

今回は最近見たもので2例ほど紹介してみます。

1つ目は仮想通貨取引サイトのBitFlyerの注文画面です。下はチャートや歩み値、資産状況など売買に必要なあらゆる情報が並んだいわゆるダッシュボード画面です。簡単な売買注文なだその画面から出せますが、複雑な注文は「特殊」というボタンを押してこのウインドウ上で操作します。その間、ダッシュボード画面は薄暗くなり操作できません。またこの注文画面自体、注文を完了するか右上の「×」で閉じるまで動かすことができません。
この特殊取引画面ではある取引が成立(約定)したら、次の注文を発動するなど、複数の注文を組み合わせた複雑な内容を指定します。その際、ダッシュボードの様々な情報を参考にしたいのですが、このウインドウ自体がデデーンと手前に陣取ってロックされている為、それができません。何度も行き来したり、あらかじめ紙にでも内容を書いてから開くしかないのです。Webページでユーザ操作以外で別ウインドウや別タブを開くのはセキュリティ的な観点で制約が多く、最近ではあまり推奨されません。そうした絡みもあってこうした疑似ウインドウ表現を使用するケースが多いのですが、せめてドラッグで位置を動かせたらなぁと毎回思います。

次の例はマクドナルドの出前サイト、マックデリバリーです。先日仕事で遅くなったので晩ご飯にと初注文しました。少しして最新の進捗状況を確認したいとサイトを再訪したところ、まず表示されたのがこちら。

閉店間際で、もうすぐ翌日の配達のみ受付になるから急げよという表示です。あと2分しかないのにむしろ邪魔です(笑)。そして、さっき注文したばかりだとサイト側が把握していることは表示から明らかです。次の注文を促したいというサイト側の気持ちもわかりますが、ここはどうせ出すなら進捗状況でしょう。

そして渋々「OK」を押して閉じ、改めて右側の「注文を始める」ボタンの下にある「ご注文状況の確認」をクリックするとこうです。

注文番号ですって?もちろんメールとかで届いてるんでしょうけど、それをせずとも、左下の「ご注文履歴」に出てるじゃないですか!でもこのウインドウがモーダルなので選択してコピーできない(地団駄!)。だったら最初からこんなウインドウ(入り口)自体なくして、ご注文履歴一覧からリンクをクリックさせた方がマシなんじゃないでしょうか(ユーザは一般に画面を左上から精査していくので、こっちのイケてない「ご注文状況の確認」ボタンの方が先に目についてしまうと考えられます/実際しました)。せめてここプルダウンメニューで注文日付などから選べるようにしてほしいものです。

などなど。最近モーダルダイアログで立て続きに不便な思いをしたのでまとめてみました。