モーダル vs ボトムシート:モバイルアプリでの使い分け

モーダルもボトムシートも画面の上にスライドして現れるので、多くのチームは形が違うだけの同じものとして扱っています。違います。片方は答えが出るまで人を止め、もう片方は何かを選んでそのまま進ませます。ここでは両者を分ける唯一の問い、作り直した2つのパターン、そしてどのアプリにも出てくるケースの判断表を紹介します。

唯一の問い:今すぐ答えるべきか?

選ぶまで先に進めないなら、モーダルです。無視しても画面が成り立つなら、シートです。

この1つの問いで、見た目を議論する前にほとんどのケースが決着します。両者の他の違いもすべて説明がつきます。モーダルは答えが出るまで他のことが重要ではないので、中央に置かれ、周囲を暗くします。シートは画面がまだ主役なので、下からせり上がり、画面を見せたままにします。

モーダル:先に進む前に決める

モーダルは、Androidではダイアログ、iOSではアラートと呼ばれ、意図的に割り込みます。次の場合に適しています。

• 先に進む前に決める必要がある。 アプリには答えを推測できません。
• 操作を元に戻せない。 全員の24個のファイルが消えるプロジェクトの削除には、一呼吸置く価値があります。
• 選択肢は最大2つ。 キャンセルと、動詞で名付けたアクションです。OKではなく、削除。

失敗するのは、任意のものすべてです。評価のお願い、新機能の告知、メニューの提示をモーダルでやると、人は本来の目的を妨げられ、読まずに閉じるボタンを押すことを覚えます。

ボトムシート:見て回り、それから選ぶ

ボトムシートは、すでに画面にあるものに属する選択肢を収めます。次の場合に適しています。

• 選択肢がこの画面に属している。 このプロジェクトの共有、複製、移動、アーカイブ。
• スワイプで閉じて引き返せる。 答えは必須ではありません。
• 選択肢が2つより多い。 シートにはリストを置く余裕があり、そのリストは親指が届く位置にあります。

失敗するのは、飛ばしてはいけないものです。シートは不意のスワイプで閉じてしまうので、シートだけに置いた破壊的操作の確認は、見失うか、うっかり実行してしまいやすくなります。

ボタンが多すぎるのは、変装したシート

誤り:モーダル

正解:シート

左の画面は最もよくある取り違えです。中央のボックスに6つのボタンを積むのは、割り込みの中でメニューを読ませているようなものです。どの選択肢も緊急ではないので、画面を止める必要はありません。同じ選択肢をシートにすればリストとして読め、親指の届く範囲に収まり、スワイプで閉じられます。

Material Designのルールは短く、ダイアログのアクションは最大2つです。3つ目が必要なら、それはメニューであり、メニューの居場所はシートです。

両方を組み合わせる:シートから削除し、モーダルで確認する

まずシート

次にモーダル

2つのパターンはライバルではありません。破壊的な選択肢は、他のアクションと一緒にシートに置けます。赤字にして、最後に配置します。タップするとモーダルが開きます。元に戻せない決断が生じるのは、そこで初めてだからです。シートで見て回り、重要になった瞬間に止める。

モーダルかシートか:判断表

うまくやっている例

今日、手元のスマホで確認できます。

• Apple MapsとGoogle Mapsは、検索結果や場所の詳細を地図の上のシートに置くので、現在地を見失いません。
• iOSの共有シートは、見ているものに対するすべてのアプリとアクションを並べ、スワイプで閉じます。
• Instagramの投稿の「その他」メニューは、その投稿向けの選択肢を並べたボトムシートとして開きます。

Appleのガイドラインも逆の側から同じ線を引いています。アラートは、データを破壊しかねない操作への警告も含め、すぐに必要な重要情報のためのもので、シートやアクションシートは、人が今していることに関連する選択肢を収めます。

FAQ

モーダルではなくボトムシートを使うべきなのはいつ?

選択肢が今の画面に属し、2つより多く、続行するために選ぶ必要がないときです。共有、並べ替え、フィルター、リストからの選択はシートの仕事です。

モーダルダイアログを使うべきなのはいつ?

先に進む前に決める必要があるとき、たいていは操作を元に戻せないときです。アクションは2つまで、キャンセルと、動詞で名付けたアクションにします。

モーダルにボタンはいくつ置くべき?

最大2つです。Material Designは、ダイアログのアクションは最大2つとしています。それ以上必要なら、その選択肢はメニューなので、シートに置きます。

ボトムシートはモーダルですか?

モーダルのボトムシートは画面を暗くし、閉じるまで画面を操作できませんが、スワイプで閉じられ、何も問いかけません。ダイアログは質問をして、答えを待ちます。

iOSのアラートとアクションシートの違いは?

アラートは重要な情報と少数のボタンで割り込みます。アクションシートは、人が始めたばかりの操作に関連する選択肢を、写真に対するオプションのように、下からせり上げて見せます。

出典

• Dialogs と Bottom sheets、Material Design 3。
• Alerts、Sheets、Action sheets、Apple Human Interface Guidelines。
• 最初は UX Brainy でカルーセルとして公開。