iOS13の半モーダル/モーダルUIの特徴
モーダルUIの特徴

iOS13の半モーダル/モーダルUIの特徴

iOS13になって、リマインダー・ヘルスケア等のUIがかなり変わりました。あわせて、半モーダル/モーダルの使い方のパターンが増えています。


半モーダルの良さを説明しながら、iOS13での半モーダルの特徴やiOS純正アプリでの利用例を紹介します。


半モーダルとモーダルの違い

AppleのiOSのHuman Interface Guidelineを読むと、半モーダルとモーダルは同じModalityとして定義されています。

そして、iOS13以降ではSheetFullscreenの2つの表現方法があると書かれています。

Sheet
The sheet presentation style appears as a card that partially covers the underlying content and dims all uncovered areas to prevent interaction with them. The top edge of the parent view or a previous card is visible behind the current card to help people remember the task they suspended when they opened the card. People dismiss a card by:
- Swiping down from the top of the screen
- Swiping down from anywhere on the screen when card content is scrolled to the top
- Tapping a button
Use a sheet for nonimmersive modal content that doesn’t enable a complex task.
Human Interface Guideline > App Architecture > Modality
Fullscreen
The fullscreen presentation style covers the entire screen. The previous view is completely covered, minimizing visual distraction. People dismiss a full-screen modal view by tapping a button.
Use a full-screen modal view for immersive content—such as videos, photos, or camera views—or a complex task that benefits from a full-screen presentation, such as marking up a document or editing a photo.
Human Interface Guideline > App Architecture > Modality

Sheetは画面の下部を一部だけ覆うパターン、つまり半モーダルです。Fullscreenは画面の全てを覆うパターンで、通常のモーダルです。

以下ではSheetを半モーダルFullscreenをモーダルと定義します。



【半モーダル】モードレスかつ連続性の表現

iOS13では共有マークをクリックしたときに表示されるアクティビティービューが半モーダルになりました。

例えば、Safariの画面でToolbars(一番下のバー)の真ん中のボタンをクリックすると、共有メニューが開きます。

半モーダルは右上にある✗ボタンを押すと閉じますが、下スワイプするだけでも閉じることができます。

画像3


画面サイズが巨大化する中、画面上部を操作することは困難になってきています。半モーダルは画面下部の操作のみで完結するため、画面サイズの大きいスマホでも操作しやすいです。


また、半モーダルの"閉じやすさ"は、モーダルをよりモードレスに近づけると考えています。

モーダルダイアログは通常、「OK」や「キャンセル」といった特定のボタンを押すまでユーザーは他の操作に移ることができません。そのような状況をモードと呼びます。モーダルダイアログはユーザーの仕事を強制的にストップし、コンピュータの都合によって加えられた手続きを強要します。
(中略)
モードが無いということは、ユーザーが好きな時に好きな順序でシステムを操作できるということです。
『OOUI – オブジェクトベースのUIモデリング』
UIにおけるモードの問題は、それを完了したり中断したりするために、余計な手続き(OKやキャンセルといったボタンを押す等)が必要になることです。別の言い方をすれば、たとえモードがあっても、そこから抜けるための余計な手続きが無くて済むならモードは問題にはなりません。
『モードレス・ユーザーインターフェース』

半モーダルを上手く活用できれば、OKやキャンセルなどのボタンを押さなくとも、スワイプ操作やオブジェクトに対するアクションだけでユーザーは自然にシステムを操作できます。



【モーダル】奥行きと重なりの表現

上記で取り上げたアクティビティービューの半モーダルを上にスワイプすると、半モーダルが画面上部まで広がって全画面表示のモーダル(上記のFullscreen)になります。

画像6


この際、元の画面が奥に引き込まれるような挙動を見せます。全画面表示される一般的なモーダルよりも、モーダル状態になったことが分かりやすいです。

特に2つ以上連続でモーダルが開くケースでは、この奥行きが効果を発揮します。モーダルが重なって開いていることを認識しやすいからです。

画像2


この奥行きの表現は、Safariのタブで使われている表現に近いと捉えています。

画像1

モーダルからモーダルへと遷移するパターンが多くなる中、いまどこにいるのかをユーザーにとって分かりやすくするため、このような表現方法がとられているのではないかと考えています。


さて、iOS13ではこのFullscreenのモーダルに様々なパターンが出現しています。ここからiOS公式アプリをあげながら、新しく出てきたモーダルのパターンをご紹介します。



[リマインダー]下スワイプで閉じようとするとアラート

iOS13から新しくなったリマインダーアプリでは、タスクの編集時にモーダルがつかわれています。

このモーダルを下スワイプで閉じようとすると、変更内容を破棄してよいか、つまり破壊的アクションを実施してよいかを確認するアラートが表示されます。

画像6

Fullscreenのモーダルなのに半モーダルのような下スワイプの動作にも対応しており、なおかつ破壊的アクションの確認をとるというのが新鮮でした。



[メール]モーダルを閉じると画面下部に編集状態を維持

これはiOS13からではないですが、メールアプリにも特徴的なモーダルの挙動があります。

モーダルを下スワイプで閉じると、画面最下部にモーダルが残ります。

iOS のファイル

「メール作成途中に以前やりとりしたメールを確認し、確認が終わったら直ぐにメール作成に戻りたい」というニーズへの対応ではないかと想定されます。



[Apple Pay]途中でも下スワイプで閉じられる

Apple Payにカードを新しく追加する際にも、モーダルが使われています。

このモーダルは下スワイプで直ぐに閉じることができます。カードの追加の作業を途中まで進めていたとしても、下スワイプをすればモーダルを閉じることができます。

画像9

"カード情報の追加"のような一連の連続した動作が続くようなタスクでも、半モーダルと同様に下スワイプでいつでもモーダルを閉じれるというのは驚きでした。



[メールアカウント追加]キャンセルを押すと閉じる

メールアカウントを追加する際にもモーダルが使われています。

このモーダルは上記で取り上げた3つの例と異なり、下スワイプをしても閉じません。

モーダル左上にある"キャンセル"ボタンを押すと閉じます。

画像9


冒頭のFullscreenのモーダルの定義に立ち戻ってみると、

The fullscreen presentation style covers the entire screen. The previous view is completely covered, minimizing visual distraction. People dismiss a full-screen modal view by tapping a button.
フルスクリーンのモーダルは画面の全体を覆います。以前の画面は完全に覆われ、視覚的に気が散ることを最小限にします。ボタンをタップすることでフルスクリーンのモーダルを閉じることができます。
※日本語訳は意訳ですので、ご注意ください
Human Interface Guideline > App Architecture > Modality

と記載がありますので、むしろ"キャンセル"ボタンを押すことによってしか閉じられないモーダルの方が本来の使い方ということになります。



【番外編】[Apple Store]モーダルの中で更新?!

Apple Storeのアカウントを開く際にも、モーダルが現れます。

このモーダルの中で下にスワイプすると、更新が行われます。(モーダルの最上部をつかみながら下スワイプすると、モーダルが閉じます。)

画像7

モーダルにおける下スワイプの動作が

1. モーダルを閉じる
2. モーダル内部を更新する

の2パターン存在してしまっているのは、ユーザーの混乱を招きそうだなと感じました。


Appleもモーダルの使い方は模索中?!?!

iOS13の純正の新しいアプリを一通り触ってみて、モーダルの挙動に多くのパターンがあることに驚きました。

良く言うとアプリごとにモーダルの最適な使い方を見出している(模索している?)ということですし、悪く言うとデザイン原則がブレているということかもしれません。


あくまで私自身の考察ですので、、もし異なる解釈をお持ちの方がいらっしゃいましたら、ぜひ私のTwitter宛にご連絡ください!


また、私の経営する株式会社hokanでは、デザイナーを募集中です。

ご興味ある方はこちら↓からご連絡ください!!

Masashige Obana - Twitter Facebook



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
ありがとうございます!励みになります!
株式会社hokan代表取締役社長。保険業界特化型のSaaSサービス hokan を開発中です。日本唯一のInsurTech(Insurance × Technology)の情報サイトInsurTechJapanも運営しています。 エンジニア・デザイナー・CS絶賛採用中!!