DailyUI 31日目
ファイルアップロード中のUIを作成しました。
DailyUI #031 ファイルアップロード
Prompt: File Upload
ロード画面とアイコンでしょうか？進行要素？ゴーストバスターズのように画面上を飛んでフォルダーをアップロードするのでしょうか？ 😉
ユーザーはプロセス中に税データなどの追加情報を入力したり、画像 (身分証明書など) を添付したりする必要がありますか?
読み込み中のUIについて
ファイルの読み込みだけでなく、アプリやウェブサイトでコンテンツを表示する際、すべてのデータをすぐに表示できないことがあります。そのときに、ユーザーがただ待たされているように感じない工夫をするのが「読み込み中のUI」です。
「読み込み中のUI」について、要点を５つにまとめました。
1. プレースホルダを使う
プレースホルダとは、コンテンツが表示される前に仮の表示を出しておくことです。たとえば、画像やテキストが読み込まれる前に、ぼんやりした四角や線が表示されます。これにより、ユーザーはどこに何が表示されるのかイメージがしやすく、待っている間もイライラしにくくなります。
例：SNSで画像が表示される前に、灰色の四角が先に表示されていることがあります。それがプレースホルダです。
2. 進行状況を表示する
読み込みがどれくらい進んでいるか、ユーザーに知らせることが重要です。これには、「進行状況インジケータ」というものを使います。進行状況バーや回るアイコン（スピナー）などが一般的です。
- 確定的なインジケータ：たとえば、ファイルをダウンロードするときに表示されるバーで、何%進んでいるかがわかるタイプ。
- 不確定的なインジケータ：どれくらい時間がかかるかわからないとき、バーが進んだりスピナーが回ったりするタイプです。
例：スマホでアプリを開くとき、画面の中央で丸いアイコンが回っていることがあります。これが不確定的なインジケータです。
3. 事前に読み込む
これはシステム的な観点ですが、ユーザーが操作している間に、次に必要なデータをあらかじめ読み込んでおく方法です。これにより、必要なときに素早く表示でき、ユーザーは待たされずにすみます。
例：動画アプリでは、再生中に次の部分をバックグラウンドで読み込んでおくことで、スムーズに再生が続きます。
4. 待ち時間を楽しくする
もし読み込みに時間がかかるなら、その間にユーザーが楽しめる工夫をしましょう。たとえば、ゲームアプリではヒントやコツを表示したり、面白いアニメーションを見せたりします。
例：ゲームを読み込むときに、次のステージのヒントやおもしろ情報が表示されることがあります。
5. アプリに合ったデザインを使う
読み込み中のインジケータやアニメーションは、アプリやゲームの雰囲気に合わせてカスタマイズすると、ユーザーにより良い体験を提供できます。例えば、可愛いキャラクターがアニメーションするなど、アプリのテーマに合ったものが使えます。
例：子供向けアプリでは、可愛いキャラクターが読み込み中に動いたりすることがあります。
反省・学んだこと
データの送受信や、バックエンドでは忙しく動いていても、画面上で動いていないと
「画面が固まった？」
「エラー？」
となりますもんね。
最悪、リロードしてしまって、結局ファイルはアップできたのかどうかわからない。。ということになってしまうかもしれません。
いらいらしちゃいそうですね。
細かいところですが、大切な画面だと思いました。
