Post

Are Modals Still Good UI?

Posted
By your_full_name
6 min read
Are Modals Still Good UI?

モバイルUIにおいて、Modalは今でもよい設計なのか？

最近あらためて modal / alert / sheet の設計指針を見直してみると、結論はかなりシンプルです。

Modal は使ってはいけないものではありません。
ただし、向いているのは「短い内容」「すぐに判断できる操作」「即時の確認」が必要な場面です。
一方で、内容がすでに1ページに近い量になっていたり、じっくり読んだり、前の一覧に戻ったりする必要がある場合は、独立した画面として設計した方が分かりやすく、モバイルでも破綻しにくいです。

なぜ Modal に慎重になるのか？

1. Modal はユーザーの作業を中断する

Apple の HIG では、次のように書かれています。

“Use alerts sparingly.”

つまり、alert や modal 系UIは多用すべきではない、ということです。
なぜなら、ユーザーが今進めている作業を強く中断してしまうからです。

出典：Apple HIG, Alerts
https://developer.apple.com/design/human-interface-guidelines/alerts

2. 単なる情報表示のために alert を使うべきではない

Apple はさらに、次のようにも述べています。

“Avoid using an alert merely to provide information.”

補足情報を見せたいだけなら、alert を第一選択にすべきではない、という意味です。
確認や意思決定を求めない内容まで modal に入れると、必要以上に重いUIになります。

出典：Apple HIG, Alerts
https://developer.apple.com/design/human-interface-guidelines/alerts

3. 長い内容や本編に近い内容には向かない

WWDC のセッションでも、次のような説明があります。

“Do not use them for non-essential or lengthy content.”

つまり、長文や読み込みが必要な内容、あるいは本質的に1画面分に近い内容は、alert に載せるべきではないということです。

出典：Apple WWDC17, Writing Great Alerts
https://developer.apple.com/videos/play/wwdc2017/813/

4. モバイルでは、大きい Modal が「画面遷移」に見えてしまう

UX Stack Exchange でも、実務的な指摘があります。

“Showing a full page modal window on mobile devices means users may confusedly think they’ve been taken to a new page.”

モバイルでは、modal が大きくなりすぎると、それが浮いているダイアログなのか、もう別ページに移ったのか分かりにくくなります。

出典：UX Stack Exchange
https://ux.stackexchange.com/questions/111233/ux-alternative-to-modal-windows-on-a-mobile-device

モバイルで Modal が起こしやすい問題

モバイルで modal を使うと、次のような問題が起こりやすくなります。

  • 内容が長いと、modal 内スクロールが発生して読みにくい
  • ソフトキーボード表示時にレイアウトが崩れやすい
  • iPhone と Android で見え方や挙動が変わりやすい
  • 「これは一時的な浮層なのか、別画面なのか」が曖昧になりやすい
  • 戻る、次を見る、詳細を見る、などの導線が増えると、modal が事実上「擬似ページ」になってしまう

Modal が比較的適しているのは、次のようなケースです。

  • 削除確認
  • 送信確認
  • 警告表示
  • すぐ終わる小さな操作
  • 短い説明
  • Yes / No のような即決型の判断

独立ページの方が向いている場面

以下の条件があるなら、独立したページとして設計した方が自然です。

  • ある程度の情報量がある
  • 内容をしっかり読ませたい
  • 一覧に戻る前提がある
  • 参照元によって表示や操作が変わる
  • 今後さらに情報や操作が増える可能性がある
  • モバイルで安定した体験を優先したい

結論

Modal 自体が古いわけではありません。
ただし、モバイルでは用途をかなり絞って使うべきUIです。

短く、すぐ閉じられ、すぐ判断できるものには向いています。
反対に、内容がすでに「1つの画面」として成立しているなら、独立ページにした方が、理解しやすく、実装や運用の面でも扱いやすいことが多いです。

参考リンク

  • Apple HIG, Alerts
    https://developer.apple.com/design/human-interface-guidelines/alerts

  • Apple WWDC17, Writing Great Alerts
    https://developer.apple.com/videos/play/wwdc2017/813/

  • UX Stack Exchange, UX alternative to Modal Windows on a mobile device
    https://ux.stackexchange.com/questions/111233/ux-alternative-to-modal-windows-on-a-mobile-device

UI
UI
This post is licensed under CC BY 4.0 by the author.