納期遅れを通知する3つの表現


　マテリアルデザインを採用して、控えめながら明確なユーザ体験を実現しました。

左側の画像はマテリアルデザインを導入する前のインタフェースであり、右側の画像はマテリアルデザインを導入した後のインタフェースです。
どちらも、納期遅れをアラーム表示するという目的は一緒ですが、表現方法が異なります。

動きには意味があり、ユーザ体験の連続性を損なわないように表示すべきだと、マテリアルデザインでは考えます。

従来のインタフェース（左側の画像）は「メッセージボックス」と呼ばれるものですが、それに相当するマテリアルデザインのインタフェースは「アラート」と呼ばれるものであり、緊急時にユーザの操作を中断させる場合に使用します。
納期遅れのアラームは、業務上は緊急性を要するものかもしれませんが、ユーザの操作を中断させるほどでは無いため、入力を妨げない「スナックバー」（右下の画像）を適用しました。
スナックバーは、画面の下端から上方に向かって現れて、時間が経つと消えます。

一度表示されたメッセージを再度見たい場合のために、右上の画像のようにボタンを別途用意します。
メッセージの件数をボタンの上に表示する（「バッジ」と呼ばれます）ことによって、どれだけのメッセージが蓄積されているのかを控えめに表現しています。