Daily UI #011「Flash Message」フラッシュメッセージ

制作の流れ

フラッシュメッセージとは？

フラッシュメッセージは、ウェブアプリケーションやウェブサイトなどのユーザーインターフェースで使用される通知メッセージの一種になります。
ユーザーのアクションに関連して表示され、一定時間（通常は数秒間）表示された後に自動的に消えるメッセージです。

使用場面では、フォームの送信が成功したかどうか、エラーが発生したかどうか、または特定の操作が完了したかどうかなどをユーザーに通知するために使用されています。

自分のアクションが正常に処理されたかどうかをすぐに確認できるため、使いやすさが向上します。

お題について

ペルソナを今まで設定してきましたが、今回ペルソナを立てず画像アップロードを想定したUIデザインを作成しました。

UIデザインを作成

今回は写真アプリを想定し、画像アップロード時のフラッシュメッセージを作成しました。

エラー内容の具体的な表示

一括で画像ファイルをアップロードする際に、エラーに当たる画像一枚でもあると、終了時に問題のある画像だけ保存されてエラーの画像だけ弾かれるみたいな場面を見た記憶がありました。

その記憶の参考に、問題ない項目にはサクセス時の緑文字を使用し、エラー項目のある箇所を赤文字と理由を表記することで、具体的な解決策を示せると考えました。

まとめ

フラッシュメッセージのまとめです。

• エラーと成功の文字色やアクションを明確にする
• エラー内容に具体的な解決策を提示することで、ユーザーにとってもアプリ使用時における学びを得ることができる。

作業できなったDailyUIを1日で3個作り上げることになったため、今回はとても簡潔な内容になりましたが、
どの場面でメッセージを表示するかそれによる具体的な内容をすぐに思いついて作業できたので、そこは学びでした！！

最後までご覧いただきありがとうございました！次回もよろしくお願いします。