ユーザーに最適な形で情報を伝えよう - アラート系 UI をまとめてみた #Zaiam

otoyan

2019/07/12 10:35

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

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

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

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

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

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

どう使い分ける？

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

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

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

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

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

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

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

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

具体例

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

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

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

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

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

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