UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供するN’s Creates (エヌズクリエイツ) 株式会社の永富です。

ユーザーへの操作に対して、その操作が完了したかどうかやエラーがあったかどうかをユーザーに適切にフィードバックするコンポーネントが必要なとき、どんなコンポーネントを採用するといいのかを検討しました。

シチュエーションはもちろん、OSやどのガイドラインに従うかによっても違いがあるので、それぞれの特徴をまとめていきます。

トーストとスナックバーの違い

どちらも短い時間だけ表示される通知ですが、使い方に違いがあります。

スナックバーは、Material Design（Googleのデザインルール）で定められたものです。ユーザーが「元に戻す」などの操作ができるのが特徴です。一方、トーストはただの通知で、何もしなくても自動で消えます。

iOSではどうなっている？

iOS（iPhoneやiPad）には、Androidのスナックバーにあたる決まったコンポーネントはありません。
同じようなUIを採用したい場合、アプリごとに独自のデザインで作ることが多いです。

その他の有名なデザインシステムなどでの扱い

用途や利用できるケースに細かい違いはありますが、有名なデザインシステムでトーストに近いコンポーネントを用意しているものがあります。

SmartHRが用意しているSmartHR Design Systemでは、「NotificationBar」というコンポーネントが用意されています。

「操作の結果などをシステムからの通知として表示するためのコンポーネント」と定義されており、操作の結果成功しただけでなくエラー状態の表示なども用意されています。

また、日本のデジタル庁が用意しているデジタル庁デザインシステムでは、「ノティフィケーションバナー」というコンポーネントが用意されています。

大きな違いとしては、アクションボタンの数に制限がないことや、ポップアップのように画面上の定位置に表示するだけでなく、用途によってはコンテンツの中に含める形で表示させることもできる点が挙げられると思います。

まとめ

ユーザーへの適切なフィードバックは、ユーザーの体験をよりよいものにするために重要なポイントになります。

プロジェクトに合わせて、適切な表現を選ぶことでよりよいサービスを作ることができると思います。