UI情報設計のトレースとアイディア出し
こんにちは、今年度中にUIUXデザイナーになりたいなっちです。
今回は私が所属している、UIUXデザインが学べるコミュニティ「BONO」の課題より、情報設計について学んだことを投稿したいと思います。
1.今回取り組んだ課題
出張申請ソフトの申請後の詳細画面をコミュニティ内の解説動画を見ながらUIトレースし、それに対してコメント（改善点）を挙げ、少しずつ自分なりの考えを元に手を加えていきました。その過程を公開していきたいと思います。
取り組み期間としては約１週間です。
2.解説動画を見ながら行った事
まず解説動画の中で、出張申請アプリの申請後の詳細画面をどのように進めてしていったかを書きたいと思います。
①行動フローやユースケースを確認し、ページの位置関係を把握
今回のお題では、『出張が決まり、その費用を経費で精算するために、事前にどれくらいの費用がかかるかを申請しなくてはいけない』という状況を想定しています。そして、あらかじめ作成された申請一覧から、案件をクリックすると開かれる詳細ページを作成するという取り組みになっています。
②要件定義書を作成
【いきなりUIを作成しない】
詳細ページに載せなくてはいけない内容や、出来なくてはいけない動作などドキュメントに書き起こすことで確認していきます。
これは動画内で実際にやってくれているので、それを見た後にまっさらな状態から自分でも書き出してみました。
詳細は割愛しますが方針を決めておくことで
・UI作成時に優先度がブレにくくなる
・参考UIを見たときに善し悪しの判断がしやすくなる
・アイディアが出しやすくなる
などの利点があるので今後も忘れずに行っていきたいと思います。
③参考UIを集める＆構造をUIに落とし込む
参考UIをいくつか見つけUIに落とし込んでいく過程を、動画を見ながら作成しました。
④出来たUIへのダメ出し
たたき台で出来たUIにダメ出しのコメントを入れ、より理想に近い形にしていきます。
さて前置きが長くなりましたが、ここから自分なりの考えも入れて試行錯誤しながら手を加えたのでその過程を紹介したいと思います。
3.UIの変化の過程
パターン0（UIに要件定義書の内容を落とし込んだ状態）
これは動画で紹介されたままのデザインです。動画の中ではこれをベースに改善を加え完成形に近づけていく過程が紹介されていきます。
その内容も含め自分でも気になる点をコメントしていきます。
まずユースケースを考えたときに、「経費が適切か判断するためにこのアプリを使う」というのが大前提としてあると思うので金額についてはっきり提示するべきだと思いました。
そこで以下のようにコメントを入れてみました。
①宿泊交通費（ある程度相場が決まっているもの）と接待費（出張者の裁量によって決まるもの）に分けたい
②日にち毎の合計金額と、全日程を通しての合計金額を表示する
③メインの行動予定＆予定金額を目立たせる
また正解か分からないけど、
・承認情報は申請の１番最後でよくないか？？
（ちなみにコロナ関係の資料は今はもう必要ありませんが、その時期に公開された課題なのでご了承下さい。今だと研修資料とイベント案内の根拠資料を載せるスペースになるのだと思います。）
これらの気づきを元にパターン１を作成します。
パターン1
以下つっこみです。
①Excelじゃん！
②全体的にごちゃごちゃしてしまったのでスッキリさせる必要がある
→ 終了時間を追加してみたけど不要
→ 接待費と移動宿泊費を分けたいけれどコレじゃない感
→合計金額の表記も違う
③行動予定
④編集ボタンをヘッダーにまとめる
⑤タイトルと概要をコンパクトにする
⑥接待費と移動宿泊費の時間の前にアイコンを入れたのは分かりやすいと思う
②については改善にあたりZaim等の家計簿アプリのUIを参考に見てみることにしました。
ちなみに③の参考UIのデザインは私が愛用している旅のしおりアプリ『nicody』を参考にしました。
パターン2
BONOの解説動画の中でも、スモールステップで少しずつ改善をしていく過程を公開されています。動画の中で、行動予定の部分はテーブルを用いて目立つようにしていたので自分でもdribbbleやpinterestで参考になりそうなUIも集めつつテーブル方式に変更しました。
テーブルの余白部分のサイズなどはGoogleのマテリアルデザインを参考にして決めました。
そして費用の内訳の部分はZaim等を見ると、日々の金額は区別なく表示して合計金額の部分で項目ごとの金額を入れていたので参考にしました。
…がちょっとこのデザインではない感があるので手を加えます。
変更を加えたい点
①真ん中列を「タイトル・概要・行動予定」の出張内容だけでまとめ
右列に「申請者情報・合計金額・承認情報」を寄せたらどんな感じになる？
②シェアと編集だとシェアの方が優先度が高そう。色々な参考UIを見ると優先度が高いボタンが右にある気がする
パターン3
そして最終的に大幅に変更したパターン３が出来上がりました。
構造変更にあたり下記のUIを参考にしました。
パターン最終
トップに張り付けたものの再掲ですが色を付けたりアイコンを少し修正して完成としました。（↓ 再掲）
４．まとめ
実際はパターン1とパターン2の間に、「パターン1.2」とか「パターン1.3」とかが存在していますが、大まかな流れを紹介してみました。
正解かどうかは分かりませんが自分なりに、「経費が適切か判断するためにこのサービスを使う」というユースケースに基づいて検討出来たと思います。
今回はすでに要件定義書やたたき台のUI（パターン0）があったのでかなりやりやすかったです。自分で０からデザインする時もこの手順を忘れずに取り組んでいきたいと思います。
ではまた次回。
この記事が気に入ったらサポートをしてみませんか？