UIを変更したときに考えたこと
弊社のCRMプロダクトSynergy!のデザインを担当しています若松です。
Synergy!の検索機能のUIデザインを改修したことについてお話しさせてください。
Synergy!に関してはこちら↓
はじめに
初めて私がSynergy!を操作していた際、検索の設定を保存できるようだが「どこから保存するのだろう？」と感じたことがありました。すぐ下に設定箇所があったのですが、目に入っていなかったためです。この問題点を解消するため、より分かりやすく、使いやすくなるように「データ検索」エリアのデザインを変更しました。
またSynergy!を使ってくださる多くの方が使用する画面なので、デザインが変わっても迷いなく、いつも通り業務ができるよう検索機能の操作感は大きく変えないように検討を重ねました。
変更前のデザインを見ながら考えたこと
まずは気になった点や、問題点を洗い出しました。
改善したいと考えた点
「保存した検索条件の設定」のドロップダウンが「検索条件の保存」ボタンなどと一緒に囲われているため、その下にある「対象データベース」「絞り込み条件」「表示項目の設定」と連動しているとわかりづらい。
一番上にタイトルとして「検索条件の設定」と記載があるにもかかわらず、設定箇所が離れている。
タイトルやアイコンが多く目線が定まらない。
次に検索画面の情報収集をして、どのような検索画面が見やすいかを考えていきました。
試行錯誤
主に4つのことを対応しました。
1.デザイン案作成
先輩と相談しながら何案もぼつ案を作成しました。
説明がややこしいので割愛しますが、システムの仕様をUIでどのように表現するかという点に関してかなり検討しました。
2.プロトタイプ作成
作った案の中で、3つをピックアップしFigmaのプロトタイプ機能で動かし検討したりと試行錯誤しました。
3.簡易テスト
またプロトタイプは、社内の別部署のSynergy!を使い慣れている方、あまり触ったことがない方など、数名にも実際に動かしてもらいフィードバックをもらいました。実際に動かしてもらっているところ見ると 個人個人で傾向があり気づきも多いと感じます。例えばしっかり説明を読む方や、とりあえず操作してみようという方など。
話は少し逸れますが、その他UIを検討する際も社内の営業やサポート業務、代行業務やその他部署の方々など、いつも快く協力いただき色々な視点の意見をいただくことでブラッシュアップできています。忙しい合間にお時間をいただけてありがたいなと感じています。
4.チームでのディスカッション
さらにチームに意見を聞きながらどのようなUIが適切か検討し、ブラッシュアップを重ねて最終的にはこのような画面になりました。
変更結果
事前に懸念していた点を解決できたのではと考えています。
検索を「設定」する箇所であることを明確化できた。
目線が彷徨うことがなくなり、小さな迷いを解消できた。
今まで頻繁に操作していた人にとっても、すぐに問題なく操作できる画面にできた。
さいごに
私個人的なことですが、初めて一から問題点の洗い出しや、
どのような表記が適切かなどを検討する経験をしました。ここには書ききれない検討事項も多くありましたが、色々な方の意見を取り入れながら形にすることができほっとしました。
リリース後に大きな混乱はないので、問題なく使用いただいているのではと考えています。ただし、このUIが大正解ではないと思うので、今後も進化し続けていけるよう努力していけたらと思います。