こんにちは！現在、エキサイト株式会社 SaaS・DX事業部でデザイナーとして内定者アルバイトをしているやのふきです。
この記事では、KUROTENのUI改善業務で取り組んだ内容について紹介します。
業務内容
Menu with filterのコンポーネント修正
今回修正を行なったMenu with filterは組織・部門や科目を選択するためのコンポーネントです。組織などの階層構造を持つ情報をファイルツリーのように表示します。
既存のデザインではMenu with filter内にトグルによる折りたたみ機能が実装されていたものの、折り畳まれる仕組みが気づいてもらいにくかったため修正・改善を行いました。
ステップ
- 既存UIの構造整理
- 似ているUIの調査
- KUROTENでのUIパターン作成
1. 既存UIの構造整理
まずは実際に現在リリースされているデザインを触ってみて自分なりに感じたことを整理していきました。左が組織・部門、右側が科目を選択するためのコンポーネントです。
今回難しいと感じた点は、Menu with filterの機能として親要素も選択できる要素であることでした。トグル機能を実装するにあたって、トグルとしての機能と要素選択の機能が干渉しないように工夫する必要がありました。
2. 似ているUIの調査
上記で整理したことを踏まえて、KUROTENと同じような使い方をする他のサービスのUIを集めました。自分がよく使うサービスで同じような機能がなかったか思い出したり、インターネット上で階層構造を持つUIを検索したりして参考事例を探しました。
各サービスのUIの共通点・相違点から、KUROTENのUIを改善するにあたって取り入れられそうな要素をまとめました。
親要素のフォントをBoldに変更する
子要素の先頭に・を追加する
親要素の内包範囲にラインを追加する
親要素についても子要素と同じようにホバー時にハイライトを付けることで選択できる要素であることをわかりやすくする
アイコンをホバーした時にトグルアイコンに変更することでトグル機能があることを強調する
3. KUROTENでのUIパターン作成
ステップ2までを通して、改善案を洗い出すことができたので実際にKUROTENのデザインに落とし込んでいきます。取り入れられそうな要素を組み合わせ、5パターンを作成しました。
作成したものを事業部の先輩デザイナーやエンジニアの方にレビューいただき検討を進めました。使用するアイコンなど、どのような人がサービスを利用しているのかを考えながら取捨選択していきました。今回はWindowsを使っているユーザーが多いことを考慮し、フォルダの開閉アイコンがデフォルト状態で、ホバーした時にトグルアイコンに変わるUIを採用することになりました。
まとめ
今回のコンポーネントの改善・修正は、以下の3ステップで進めました。
- 既存UIの構造整理
- 似ているUIの調査
- KUROTENでのUIパターン作成
いきなりUIの調査を始めるのではなく既存UIの構造整理をしたことで、KUROTENで参考になるUIを調査段階で選びながら進めることができました。また、似ているUIの調査を行うことで改善案のパターン出しをスムーズに行うことができました。
〜学び〜 より良いアウトプットをするためには整理（理解）・調査を怠らないこと！
最後まで読んでいただきありがとうございました。
