モーダルダイアログをそこで使うべきか？

一方で、UI/UXの中でモーダルを使うべきかを再考する機会にもしていただけたらと思います。例えば37signalsの看板製品であるBasecampやHeyではモーダルは使われていません。またNext.jsを作ったVercelのダッシュボードなどもモーダルはありません。加えてアクセシビリティに十分に配慮したモーダルダイアログは決して容易ではありません。私もアドミ画面をリニューアルするときは、積極的にモーダルダイアログを無くします。モーダルを実装する前に、「ここで本当にモーダルを使うべきなのか？むしろ別のページに遷移した方が良いUI/UXにならないか？」を今一度検討することをお勧めします。 https://medium.com/@mdctleo/accessibility-and-modals-b8222ffc03 https://zenn.dev/yend724/articles/20220511-pc51v32llyzu8kws

「モード」でなければいけないのか？

モーダルダイアログの「モード」は、UIにモードがあることを指しています。モーダルを開いた時のモードと、閉じた時のモードです。「モード」が異なるということは、一方でできたことが、他方ではできないという意味です。例えば「通常であればできる操作が、モーダルを開いた時はできない」ことを指しています。画面全体を黒い幕で覆い、操作できないようにするアレのことを指します。

ここで考えていただきたいのは、本当に「モード」が必要か？ということです。むしろ優れたUI/UXはなるべくモードがなく、合理的な範囲内において、いつでも目的の操作ができるものです。

また「モード」を切り替えるのならば、なぜ画面を黒い幕で覆い、小さいダイアログボックスの中だけで操作させるのでしょうか？もしフォームに入力等をするのであれば、全画面を使ったウィンドウを開いた方が広々として良いのではないでしょうか？中途半端に黒い幕で覆うよりは、その方が良いのではないでしょうか？

• モーダルを使う前に、「モードレス」なUI/UXにできないかを先に考えるべきです
• 「モード」が必要だとなっても、ウェブではページを切り替えることが一般的です。ページを変えられない理由はなんでしょうか？

この辺りはUI/UXが優れた他のウェブサイトや、パソコンで使用しているアプリケーションなどを見て参考にすべきです。ウェブサイトではモーダルを好んで使っているサイトも多いのですが、パソコンのアプリケーションだと「モード」を要求するものは多くはないです。ダイアログを表示していても、裏にあるUIは操作できるままのものが多いです。

絶対にモーダルダイアログが悪いというわけではありません。ただ、ちゃんと作るとなるとそれなりに実装コストが高く、UI/UXが優れているとも限らないことを理解した方が良いと思います。コスパが良いUIではないと私は思います。

ウェブでも意外と使われていない

例えば37signalsの看板製品であるBasecampやHeyではモーダルは使われていません。またNext.jsを作ったVercelのダッシュボードなどもモーダルはありません。GMailなどを見てもモーダルはありません。

よく使われるのはプルダウンメニューなどです。プルダウンメニューは主に何かを簡単に選択するために使われるものです。またプルダウンメニューが表示されても画面全体を黒い幕で覆うことはなく、他の操作も可能です。

入力するのであればちゃんと画面を作る

モーダルを表示して、その中でフォームを作成させるというUI/UXをよく見かけます。フィールドが１つ程度しかないのであれば問題はありませんが、入力項目が多い場合はこれは避けた方が良いです。領域は狭いですし、中に浮いたようなモーダルダイアログだと落ち着きません。しっかり新しいページを表示してあげるほうが良いでしょう。

新しい内容を入力するにしても、古い情報を確認しながら入力したいというケースもあるでしょう。その場合はエクセルなどを参考にすると良いと思います。同じ画面の中に、データ入力フィールドを埋め込めば良いのです。全体を黒い幕で覆う必要はありません。

モーダルでも良いケース

• 作業の順番の関係で、ここは操作をブロックしなければならないケース
  • 例えばデータ保存操作をしていて、すでに同じ名前のファイルがある場合。上書き保存するかどうかを確認するにはモーダルダイアログが必要です。他の操作をされてしまうとデータ保存操作がされていない中途半端な状態が続いてしまいます。もしその間にファイルを修正されてしまうと、いざ保存するときに、どのバージョンを保存するべきかが不明瞭となってしまいます。プリントも同様です
• 長い名簿などで修正作業をしているので、スクロール位置が維持されることがクリティカルなケース。この場合モーダルだとスクロール位置を変更せずに修正することが可能になります。一方で別のページに移動すると、スクロール位置がトップに戻ったりします。この場合はモーダルが良いと考えるかもしれません。ただしスクロール位置を別途保存することも難しくありませんので、この場合絵も無理してモーダルにする必要はありません。スクロール位置を記憶してページ遷移しまった方が良いUIになる可能性は十分にあります。あるいはエクセルなどを参考に、インラインで編集できるようにした方が良いかもしれません。