2-2. 通知/状態表示

1.ダイアログ / アラート

ダイアログ（dialog/dialogue）は英語で対話を意味し、何かのアクションや処理の結果、ユーザーに確認（対話）する必要がある場合に用いられます。アラートはその中でも特にエラーや重要なアクションの前の警告・確認のためのものを指すことが多いです。

Alerts - Views - iOS - Human Interface Guidelines - Apple Developer — https://developer.apple.com/design/human-interface-guidelines/ios/views/alerts/
Human Interface Guidelinesでは、アラートはUXの混乱の原因にもなり得るため、有効に使うためには重要な状況でのみ使用することが推奨されています。頻度が少ないほどユーザーはちゃんと注意して確認してくれるとも書いています。

Dialogs - Material Design — https://material.io/components/dialogs/#usage
Material Designでも同様に、エラーの通知やユーザーの確認や決定が必要な、特に重要な場合にのみ使うことが推奨されています。優先度の低いものなどは後述の「スナックバー」などの使用を検討してください。

2.モーダルウィンドウ

モーダル（modal）とは「モードの」という意味で、通常のWebサイトやアプリの利用・閲覧モードとは別のモードとして、新しいウィンドウがメインコンテンツの上に表示され、ウィンドウ内での処理が終わるまで下のメインコンテンツを無効にするようなウィンドウのことを指します。一般にはダイアログよりも大きな、画面の多くを占めるものを指して使われることが多いようです。元々は重要な確認（対話）のためにユーザーの目を引き、それを解決するためのものでしたが、本来の目的から離れてあまり重要でないことの確認に使用されたり、ユーザビリティ上の問題も多いことから最近ではユーザーに敬遠されることも多くなってきています。

OSの基本UIでのアラート実装とは別に、自由にデザインをすることも可能ですが、何のために何を確認しているのか、また確認内容の修正手段や「閉じる」手段をわかりやすくすることがユーザビリティの上で重要です。

3.ポップアップウィンドウ

ポップアップウィンドウはダイアログやモーダルウィンドウなども含み、同様に扱われることも多いですが、特に重要な確認ではないものたユーザーにとってはあまり好まれない商品の強引な訴求や広告手段として用いられるものを指す場合があります。
こちらもモードの変換を強制するため、商品やコンバージョン、広告に集中させコンバージョンさせることが期待できますが、ユーザビリティの問題に加え、ブランドイメージを損ねる、離脱の原因にもなることを踏まえ、検討するようにしましょう。

ユーザーの視線が集中させることで訴求力は高まりますが、過度な訴求はユーザーにとってストレスや不信感に繋がりかねないことは意識するようにしましょう。

4.スナックバー / トースト

スナックバーは、Material Designで登場したUIの1つで、画面の下に、スッとさりげなく現れて、1行程度の短いメッセージを表示するUIです。主にユーザーの操作したことに対してのフィードバックとしての内容を表示するために用いられ、簡単なアクションを含めることが出来ます。トーストもほぼ同じ使用方法ですが、こちらはアクションは含められません。

どちらもモーダル、ポップアップウィンドウなどとは異なり、メインコンテンツとユーザーの行動を妨げず、ユーザーが「閉じる」処理を行わなくても短い時間で自動で非表示となります。

iOSにはこれに当たるコンポーネントがありません。

スナックバー（Snackbar）
スナックバーはユーザーのアクションに対しての結果を一時的に表示し、短い時間で自動で閉じられます。オプションとして簡単で必須ではないアクションを持たせることもできます。
Androidではアクションが発生する画面でスナックバーが利用できない場合のために、トースト（Toast）というクラスが用意されています。

5.プログレスバー

処理の進捗を示すために用いられるUIで、ユーザーの待ち時間を可視化することで、ストレスを軽減する効果があります。データをアップロードする際や、TOPページで重い一連のファイルを読み込む際などに、処理完了を100%として、横軸が進捗に合わせて伸長していく表現がよく用いられます。これと別に、進捗状況を表さずに、ただ処理中ということを示すクルクルと円上に回るものや伸長をループで繰り返すバーなどは「プログレスインジケーター」などと呼ばれます。

プログレスバー
プログレスインジケーターとは違い、ループせずに右端まで到達することで処理の完了を示します。

プログレスインジケーター
ローダー（loader）、ローディングアニメーションなどともよく呼ばれています。アニメーションGIFやCSSだけでの実装、SVGで作られたものなどありますが、その性質上あまり重くならないことが求められます。

6.ステップバー

会員登録や商品購入の決済、項目の多いアンケートなど、フローの完了までが複数のページにわたる場合に、現在のページが全体のステップのどこに当たるか、あと何画面で完了に辿り着けるかをわかりやすく示すためのUI。これもユーザーのストレスを軽減し、離脱を防ぐことを期待して用いられます。

ステップバーでは、完了までのステップ数と現在いくつまで完了しているか、今どのステップにいるかをわかりやすく伝えることが求められます。