アプリでユーザーへ何らかの案内や説明をしたいとき、いろんなUIの表現がありますね。どんなときに何を使ったら良いのかわからなかったので、まとめました。

アラート系 UI にはどんなのがある？

アラート系とは、ここでは以下のコンポーネントを指しています。

スナックバー
数秒で自動的に消えるメッセージ。

バナー
ユーザーが操作しない限り表示され続けるメッセージ。
置いたまま他の操作も可能。

アラート/ダイアログ/アクションシート
求められた操作が行われるまで画面に表示されたままになるUI。

どう使い分ける？

どんな情報を扱うときに、どのUIを採用すればいいのか。重要緊急マトリクスを使って分けてみました。

重要かつ緊急
モーダル系が使いやすいです。

なぜか
ダイアログ操作を完了しないと他の操作ができないため、今すぐ知らせる必要のある重要なメッセージが確実に伝わります。

重要だが緊急でない
バナーが使いやすいです。

なぜか
画面の目立つ位置に表示したままにすることができ、ユーザーの意図するタイミングで操作できるため、重要度は高いが緊急度の低い場合に使えます。

重要でも緊急でもない
スナックバーが使いやすいです。

なぜか
ユーザーの操作なしに自動的に消えるため、手軽さはあるが、見逃す可能性がある。そのため、重要度は低いが緊急度の高い場合に使えます。

重要でないが緊急
これは、ぴったりくるのが思いつきませんでした。
誰か良いのを知っていたら教えてください！

具体例

ここまで、使い分け方を考えてきました。
では、どんな風に「重要度 × 緊急度」で情報を分ければ良いのでしょうか？

結論としては、デザインの文脈により変わります。

例：電源が残り20%であることを知らせたい
まず、20％が緊急なのかそうでないのかを考えます。
例えば、電池効率という文脈で考えてみると、

電池効率の良い端末
切れるまで２時間もつ。緊急度は低いと判断しスナックバーにする。

電池効率の悪い端末
切れるまで数分。緊急度は高いと判断しアラートなどを用いる。

このように同じ機能・同じ情報でも、優先的に知らせるべきかの判断は、文脈によって変わります。

まとめ

ユーザーにフィードバックを返す際、いくつかパターンがあります。
これらは、伝えたい情報の重要度と緊急度で使い分けます。
ただし、「そもそもどういう情報を重要とするか」はアプリの特性や文脈によります。

おわりに

今回は抽象的な内容だったので、まとめていて難しいなと思いました。良い具体例が見つかったら今後の記事でまた紹介していきたいと思います。

おわりのおわりに
Zaim を応援してもいいぞ！という方、お気軽に「いいね」「シェア」いただけますと、嬉しいです。

あと、採用もやってますのでよろしくお願いします！

www.wantedly.com UI・UXが最重要！大規模アプリのリニューアルに挑戦したいデザイナー by 株式会社 Zaim

株式会社 Zaim 東京都 UI/UX デザイナー 新卒採用 / 中途採用

募集要項をみる