BONO【出張申請ソフト】デザインやってみた！！Vol.2：承認リスト編

2023年2月8日 15:36

承認リスト関連

カイクン（@takumii_kai）さん（※以下敬称略）のデザインコミュニティBONOで未経験からデザインを学んでいるuです！

前回はBONOのロードマップにある出張申請のコンテンツを実施し、フィードバックを受けた結果の申請リスト画面を作成していきました。

前回の記事はこちら

今回は、前回の続きである出張申請ソフトの承認リスト関連の画面を作成していきます。

💡今回の記事を読んでわかること
・デザインコミュニティBONOでどういったことをやっているのか
・カイクンからのフィードバック
・フィードバックを受けた上でのデザインの変化
フィードバックを受けた結果作成した最終的な画面はこちら

【Figmaプロトタイプ】
こちらの画面に至る経緯を紹介していきます。

①承認リスト画面

Ver1で作成した承認リストの画面とフィードバックを紹介します。
承認リスト画面Ver1

この画面のフィードバックはこちら

フィルタとタブの意味合いが重複している。
リストUIに『詳細』は不必要。
確認が必要なものを見に来る画面で、確認が必要な申請というセクションは不必要

これらのフィードバックを参考に画面を作成していきます。
前回作成した申請リストの画面

申請リスト画面と承認リスト画面は、役割が似ているため、大きく印象を損なってしまうとユーザーはわかりにくくなってしまうのではないかと考え、この画面をベースに作っていくことに決めました。

パターン①ホバー時にアクションアイコンを追加したパターン

申請リスト画面にあったボタンは削除して差異をつけた
ホバー時の動きは、申請リスト画面を踏襲し、アクションアイコンをつけた。申請リスト画面にあったコピーアイコンは削除した
ステータスの文字色と背景を変更させることで、変化をつけた。
どの部署の誰の申請なのかをわかりやすくするために、申請の情報をテーブル・リストに配置した。

パターン②ホバー時のアイコンは削除して、『…』ボタンに変更した

ホバー時のアイコンを選択することよりも、リスト選択⇒詳細に行けることをわかりやすくした。やることを迷わない画面にした。
『…』ボタンには、共有リンクをコピー・削除などができるイメージで作成。
こちらのパターンの方が画面が、アイコンがない分ホバー時のリスト全体が見やすい印象がある。

承認リスト画面まとめ

最終的には②のパターンを採用することに決めました。
①のパターンでは、コピーやリンク・ゴミ箱のアイコンをすぐにアクセスできるようにしていましたが、承認する人が、コピーや削除することはほとんど考えられないと思い直しました。
そのため、②のパターンを採用して、ユーザーが迷わない画面にできたように感じます。

②承認詳細画面

Ver1で作成した承認詳細画面とフィードバックを紹介します。

承認詳細画面のVer1

フィードバックはこちら

承認リスト⇒承認詳細画面に移行したときのヘッダーの構造がおかしいという指摘がありました。

ここは申請リスト⇒申請詳細画面にも関わってくるところです。

申請リスト⇒申請詳細画面はこちら

承認リスト画面と同様に、この画面から大きく印象を損なわない画面を作成していきます。

パターン①承認ステータスを上部に表示したパターン

承認状況がすぐにわかるように画面で一番最初に見る部分に配置した。
承認状況の現在の情報がわかるようにテーブルUIで表示。
画面右上のボタンから、承認モードに移行できる。
Ver1と大きく変更した部分はない

パターン②承認ステータス内に、ボタンを配置したパターン

承認する人が、現在のステータスを把握したあとに承認モードに移行できる配置
右上のアクションがなくなったことで、『…』ボタンを配置したままなのは、違和感がある印象
パターン①と比べた場合は、こちらのパターンの方が違和感があるためボツ

パターン③承認ステータスアイコンを申請概要に配置したパターン

アイコンを申請概要に配置して、申請詳細画面と大きく変化しない画面にした。
この画面を採用する場合は、申請詳細もこの画面にした方がいいと感じた。
承認者は、申請概要の部分より、行動予定の部分を見たいと感じるため、こちらのパターンの方が適切なのではないかと感じる。
このパターンにした場合、承認者の情報がわからない・確認するページがなくなってしまうところが良くないと感じる。そのため、別パターンを作成する

ここまでのパターンで、しっくりくるものが作成できなかったため、もう2パターン作りました。

パターン④承認ステータスアイコンに、承認者の情報がわかるようにした

パターン③に、承認者の情報を入れたパターン
承認者の情報があった方が、承認状況がよりわかりやすくなったように思う。
③と比較したときには、こちらのパターンを採用したい

パターン⑤申請概要の下部に承認者情報を配置したパターン

申請概要の部分の情報量が多くなり、どこを見ていいのかわかりにくい画面になってしまった。
『申請情報・出張内容・添付ファイル』は、申請者自身の情報。承認状況は、承認者の情報。意味合いが違う情報を並列で並べたことが、この画面の良くなかった部分と思われる。
③や④を変化させた形だが、このパターンが1番見にくいためボツ。

最終的に、2つのパターンで迷いました。

最終案①承認ステータスを上部に表示したパターン

こちらのパターンを採用する場合は、承認詳細画面として採用したい

最終案②承認ステータスアイコンに、承認者の情報がわかるようにした

こちらのパターンを採用する場合は、申請詳細画面もこの形に合わせていきたい

承認詳細画面まとめ

役割が違うパターンとして考えたため、2つに絞ることができました。
最終的にどちらにするかは、プロトタイプまで作成して考えていきます。

プロトタイプを作成した結果、①の画面にすることにしました。
直感的に、承認のステータスがわかりやすいと感じたためです。
一方で、一番上に承認ステータスのUIを配置しているため、何のページかがわかりにくいかもしれないという反省点に気づくこともできました。

画面上部の【承認の詳細画面】という文言を申請名にすることで解消できるように思います。
再度作り直すときには、この部分を修正していく案が思いつきました。