シルスプのブログ
50代女性の生き方
UIアウトプット

【UIアウトプット】DailyUI #031_File Upload

【UIアウトプット】DailyUI #031_File Upload
シルスプのブログにようこそ

31日目の課題は、File Upload

補足情報は、

 ローディング画面とアイコンですか?進行状況?
フォルダがゴーストバスターズのように画面を横切って飛んでアップロードされるのか?)

ユーザーはプロセス中に税金データなどの追加情報を入力したり、
画像(身分証明書など)を添付したりする必要がありますか?

Daily UI
https://www.dailyui.co/

1.課題 

私が通常よく使っていのは、ただのファイルアップロードなので、
今回は、身分証とかのアップロードはない通常ファイルのアップロードとしました。

行動心理学の本に、旅行の検索しているときに
検索中でくるくる回っているのよりも、検索画面が変化しているのを
見せるほうが、苦労して検索しているんだなぁと
  興味やありがたみをを持ってくれるそうです。

参考
自分で選んでいるつもり: 行動科学に学ぶ驚異の心理バイアス
リチャード・ショットン (著)
https://a.r10.to/hke2jN

File Uploadというからには、
・アップロード画面
・アップロードするのかフォルダーを作るのか
・アップロード中の画面
を作ることにしました

2.取り組み

アップロード中は、待ち時間があるのでほっこりする画面としました。
書類もってる黄色い鳥が、運んでるイメージです。www

ファイルのどれだけアップロードできているかは、
進捗バーので見える化しました

3.作品

DailyUI #031_File Upload

031.DailyUI-031_File-Upload-

4.感想

最後のボタンの文言をどうするか悩みました。
「送る」「追加」「次へ」どうすれば良いかなぁと。。。

結局、アップデートできるのをっているんだから、「追加」だな!
ということで、追加ボタンとしました。

5.まとめ

普段何気なく使っているドロップボックスが、参考になりました。
ファイルをアップロードしている間も、何をアップロードしようかと悩んでるときも
アップロード画面の鳥さんが癒やしてくれることを願います。www

UIで作業しているときに見つけた、Figmaツール。
簡単にUIを考慮したWebデザインができるようです。
よさそげですが、まだ使えていない。

では、またねぇ~