モバイルアプリを設計する上で、モーダルウィンドウ機能についてiOSの推奨を理解しましょう。
「Human Interface Guidelines」のModalityの章について紹介します。
モバイルアプリは、ユーザーの実現したい目的のために画面が遷移していくことが基本です。
（AppStoreでは特定のアプリ詳細ページに遷移して、アプリをインストールする目的のためなど）
しかしユーザーにメッセージを伝えるために、一時的にユーザーストーリー（想定する画面遷移）から離脱したい場合があります。
その際に、ユーザーに不快感を与えることなく、実装することが求められます。
前提
モーダルウィンドウ機能は、ユーザーの現在開いているコンテンツとは独立しており、一時的に表示するためのデザイン手法です。
そのため、モーダルウィンドウを閉じるための明示的なアクションが必要となります。
コンテンツをモーダル表示することにより、以下が実現します。
- ユーザーがモーダル画面で完結するタスクや関連した設定項目に集中することが可能
- ユーザーが重要な情報を確実に受け取り、必要に応じて次の行動を促すことが可能
iOSは利用用途別に「Alerts」、「Activity Views (Share Sheets)」、「Action Sheets」を提供しています。
アプリで独自のモーダルコンテンツを表示するために、iOS13以降では以下の表示スタイルをサポートしています。
Sheet
シート表示形式は、カードのように前のコンテンツを部分的に覆うように表示されます。
そのため、覆われていない部分は暗くすることで、操作を無効化することを明確にします。
カードで覆われていない部分は、前のコンテンツを表示しておくことで、中断しているタスクを思い出せるようにします。
シートの閉じ方は以下の方法があります。
- 画面の上部から下にスワイプする
- シートのコンテンツが一番上にスクロールされた状態で、任意の箇所から下にスワイプする
- 閉じるボタンを押す
単純なタスクのみを一時的に行わせるために、前の操作内容を想起させるための非没入型コンテンツ表示に適しています。
Full Screen
全画面表示形式は画面全体を覆います。
前のコンテンツが完全に覆われてしまっているため、意識を散漫させずたり、資格的な混乱を最小限に抑えます。
ユーザーはボタンをタップすることでモーダル画面を閉じることができます。
ビデオ、写真やカメラなどの没入型コンテンツや、資料や写真の編集などの複雑な操作が必要な場合に適しています。
1. モーダル機能を適切に使用する
現在実行しているタスクとは異なるタスクを、ユーザーに意識を集中させるためにモーダル機能を使用します。
モーダル機能はユーザーの現在のタスクを無理やり離脱させて、表示する必要があるため、適切な使用用途で用いることが不可欠です。
2. 必須情報を提供するためのアラート機能
通常、何かが間違っているためにアラートが表示されます。
アラートはユーザーのタスクを中断するため、閉じるための手段を明確にして、モーダル表示が正当だとユーザーに感じさせることが重要です。
3. モーダル機能は、単純、早く、少なく
アプリは一つの目標を達成するために設計されます。
モーダル画面上に別のアプリを作成しないでください。
モーダル機能が複雑であると、前の中断しているタスクが何であったか見失う可能性があります。
ビューが階層的に複数重なりあっている場合は特に注意が必要です。
モーダル画面上にサブビューがある場合は、タスクを完了するまでの手順を明確化してください。
タスクを完了する以外の目的で「完了」ボタンを使用してはいけません。
4. モーダル画面には必ず「閉じる」ボタンを用意する
「完了」や「キャンセル」ボタンも同義です。
ボタンを表示することで、ユーザーの操作性が向上されたり、スワイプなどの画面を閉じる操作の代替として提供ができます。
5. 必要に応じて、モーダル画面を閉じる前に確認を表示する
モーダル画面上のデータの損失を回避することができます。
スワイプ操作や閉じるボタンのタップ操作に関わらず、操作によってユーザーの生成したコンテンツが失われる可能性がある場合は、状況の説明と解決方法を提示するためのシートを提示することを推奨します。
（写真編集後保存されていないまま、画面を閉じようとした場合など）
6. FullScreenモーダル画面の上にSheetモーダル画面を表示しない
ポップオーバー（FullScreen）画面内にカード（Sheet）画面を表示することは可能ですが、上に重ねて表示はしてはいけません。（アラートの場合を除く）
ポップオーバー画面で操作中に、カード画面の表示が必要な場合は、一度ポップオーバー画面を閉じるようにしてください。
7. モーダル画面の内容が分かるタイトルを表示する
モーダル画面が表示されると、前のコンテンツから切り替わるため、新しいコンテンツを明確にすることを推奨します。
タスク内容をしっかり説明するか、案内を画面内に提供するなどで対応します。
8. モーダル画面の外観をアプリと調整する
例えば、モーダル画面にナビゲーションバーが含まれる場合は、アプリのナビゲーションバーと同じデザインを使用する必要があります。
9. 表示形式を適切に選択する
アプリ全体の遷移方式を考慮し、適切な画面切り替え方式を使用します。
デフォルトの切り替え方式は、モーダル画面が下部から上下にスライドし、閉じた時に元に戻ります。
アプリ全体と一貫した遷移方式を採用するようにしましょう。
まとめ
画面遷移はユーザーの予期しない場合に、かなりストレスに感じてしまいます。
モーダル画面上でPush遷移をさせたり、モーダル画面上に更にモーダル画面が表示されるなど、不適切な利用は避けて、UXを向上させるために適切に利用することを心がけてみてください。