DailyUI #086 進行状況

1.DailyUI#086のお題

86日目のお題は「進行状況」。
進捗状況を伝えるデザインを作るというお題だったので、個人情報などの登録を伴うアプリの新規登録画面を制作しました。

2.ざっくりワイヤー

ざっくりワイヤー

3.制作したデザイン

1つ目の項目を入力する前

1つ目の入力を終えた時

一つの項目の入力が終わるとこの画面（進捗状況画面）が表示されて、次の項目に進む

4.デザインする上で考えたこと

・登録する流れに合わせてプログレスインジケーターを縦に表示
・ユーザーが迷わず登録を進められるよう、一つの項目の入力が終わったら次のステップのボタンが活性化する
・入力が終わった項目はチェックマークに変わる
・一度入力を終えた項目は入力し直すこともできる

5.反省点

参考のデザインの中には途中で入力を辞めた場合の扱いなどを画面上部に記載しているものがあったので、そのような案内文を入れるとより親切な印象になったかなと思いました。

6.おわりに

プログレスインジケーターは横表示のものをよく見かける印象でしたが、今回作った新規登録のような、各項目のタイトルが長いものは縦表示にした方がわかりやすいなと思いました。途中で入力のやり直しができるのも利点ですね。