web-dev-qa-db-ja.com

アラート、通知バナー、トーストメッセージの違いは何ですか?

アラート、通知バナー、トーストメッセージに違いはありますか?いつどのような状況で使用する必要がありますか?下の画像はどのコンポーネントに適していますか?

enter image description here

14
Pradeep

通知の選択は、多くの場合、構築するシステムによって異なります。

既存のプラットフォーム用に構築している場合。 iOSアプリまたはAndroidアプリの場合、ほとんどのプラットフォームには、これらすべてのプラットフォームアプリケーション全体でこれらの一貫性を維持するためのガイドラインがあります。

これらのリソースの一部を以下に示します:

あなたがウェブのために構築している場合、それはあなたのウェブアプリケーションのルールを定義するのはあなた次第であり、これはおそらくあなたがスクリーンショットを提供した例とより一致しているので、異なる球技です-私はあなたが構築していると推測していますWebアプリ?

これが私が読んだ記事の結論です。

ユーザーは、Webまたはモバイルアプリケーションの使用中に最新情報を入手したいと考えています。常に機会を利用して、ユーザーに正しい形式の明確な通知を表示してください。必要に応じて(エラーメッセージ通知など)、問題の特定の性質と解決方法に関する追加情報を追加します。通知はシンプルかつ簡潔にまとめてください。ユーザーは、何が起こっているのかを正確に把握し、狭い場所から脱出できることを気に入っています。

https://infinum.co/the-capsized-eight/articles/ux-quick-tip-the-proper-way-of-handling-notifications から取得

アラート、通知バナー、トースト通知に違いはありますか?

アラート

これらは、通知が確認されるまでユーザーの続行を停止します。それらは今やJavaScriptポップアップから長い道のりを歩んでおり、多くの場合Webデザイナーはいくつかの異なる方法でそれらをカスタマイズしています。

enter image description here

enter image description here

通知バー

このタイプは、多くの場合、メッセージをユーザーに警告する一貫した領域の予約スペースです。多くの場合、エラー、警告、成功の3つのタイプがあり、多くの場合、アイコンと、ウェブサイトのデザインと衝突しない特定の色を持っています。目立つようにする。アラートと通知バーの違いは、ユーザーが通知を確認する必要がないことです。

enter image description here

enter image description here

トースト通知

通知バーに似ていますが、コンテンツの上にポップインします。通常、ユーザーの注意を引くための素晴らしいアニメーションがあります。

enter image description here

OPのイメージはどのコンポーネントに適していますか?

あなたの例はトースト通知タイプのようになります

追加の読み:

UXクイックヒント:通知を処理する適切な方法- https://infinum.co/the-capsized-eight/articles/ux-quick-tip-the-proper-way-of-handling-notifications =

Google-アラートと通知について https://support.google.com/adwords/answer/1704338?hl=ja-GB

16
stradled

そこにはたくさんの質問があります。

上記のすべては、システムがユーザーに情報を提供する方法です。決定要因には、ユーザーの期待、メッセージの重要性、メッセージの頻度が含まれます。一つずつ見ていきましょう。

アラートメッセージ

古いスタイルのalert()メッセージは、現在ほとんど機能していません。少なくともプロ並みのエンタープライズアプリケーションでは、めったに見られません。主な理由は、これらは開発者にとってほとんど制御できず、ユーザーにとって非常に邪魔になるためです。

通知バナー

私は通知バナーを使用していますが、Gmailと同じように、画面上部の1行はユーザーがシステムからのフィードバックを期待している場合です。ほとんどの場合、ユーザーが何らかのアクションを実行したときです。ユーザーの削除、メールの送信など。システムはユーザーに対してそのアクションを実行し、そのアクションの成功または失敗についてユーザーに事前に通知します。これは、前向きであることが不可欠であり、簡単に見つけることができますが、アラートほど目立ちません。ほとんどの場合、残りの画面コンテンツとのコントラストを作成する明るい色調を使用します。最小限のデータ隠蔽で、それらを上部中央に維持することを選択します。

トースト通知

これは使用されますシステムがユーザーにいくつかの情報を提供するとき、それはそれ自身です。これは必ずしもユーザーアクションのフィードバックではありません。たとえば、Outlookの新着メール通知、Winampの曲変更通知は、すべてこのタイプのメッセージの一部です。これらのメッセージに示されているコンテンツはユーザーにとって有用ですが、ユーザーの現在のワークフローを中断してそのメッセージに完全に注意をそらすことはそれほど重要ではありません。それらは非モーダルであり、簡単に消えます。

当然のことながら、これらのトースト通知は通知トレイの近くにあります(デフォルトでは、Macの場合は右上、Windowsの場合は右下にあります)。


あなたが示した例は、トースト通知(高さ、サイズ、閉じるボタンを考慮したもの)である可能性が高いですが、エラーメッセージにそれを使用するのはうんざりです。

お役に立てば幸いです。

2
Sol

通知:それらには2つのタイプがあります

  1. 画面上部に幅広でスリムなバナーの形式で通常表示されるシステム通知で、システム状態の長期的な変化(システムのダウン、計画的なメンテナンス、新機能など)をユーザーに知らせるために使用されます。

enter image description here

  1. ソーシャルコンポーネントがあり、ユーザー間に何らかの相互作用がある場合、またはシステムがユーザーにコンテンツの状態を通知する必要がある場合に使用されるアプリ内メッセージング。

enter image description here

どちらのタイプも静的であり、ユーザーがクリックするまで、または最初の訪問期間中、表示されたままになります。

トースト

トーストは動的で、短時間表示され、通常、ユーザーのマイクロインタラクションに対するシステムのフィードバックが含まれます。

enter image description here

アラート

アラートは比較的複雑な機能で、[設定]または[アラート]領域に配置できます。ユーザーは特定のイベントに対してアラートを設定します。具体的には、ユーザーはこれらのイベントとアラートの内容を設定します。たとえば、ユーザーは特定のシステム状態または特定のデータのアラートをセットアップして、電子メール、SMS、ウェアラブルコールなどで通知することができます。場合によっては、ユーザーが非常にアラートをセットアップするときに複雑なレイヤーが追加されることがあります。特定の状況。たとえば、上限または下限のしきい値のいずれかで特定の制限を通過するデータの場合、ユーザーはそのことをすぐに通知する必要があります。アラートは常に状況に応じて発生し、特定のイベントに添付され、情報はシステムの外に出ます。

enter image description here

2
Zoe K

トーストとダイアログの主な違いは、ダイアログは即時の応答を要求するのに対し、トーストは控えめにフィードバックを提供することです。

トースト

トーストは、小さなポップアップで操作に関する簡単なフィードバックを提供します。それはメッセージに必要なスペースの量を埋めるだけであり、現在のアクティビティは表示され、インタラクティブなままです。たとえば、メールを送信する前にそのメールから離れると、「下書き保存」トーストがトリガーされ、後で編集を続けることができることが通知されます。トーストはタイムアウト後に自動的に消えます。

通知

トーストは短時間だけ表示され、取り消すことができないため、ユーザーが応答することが期待される場合は適切ではありません。この場合、Androidドキュメントでは通知の使用を推奨しています。ステータスメッセージへのユーザーの応答が必要な場合は、代わりに通知の使用を検討してください。

モーダルダイアログ

モーダルダイアログのアラートは、ユーザーからの明示的な応答が必要な場合は常に使用する必要があり、その応答は他に何かが起こる前に必要です。ダイアログは画面いっぱいに表示されず、通常、ユーザーが続行する前にアクションを実行する必要があるモーダルイベントに使用されます。

送信した例では、トーストメッセージの特性を満たしています。

参照:

素材デザイン

ノーマンニルソンの記事

1
Eran Bar