マルチサービスのUI/UXデザイン

この記事ではHigLaboでマルチサービスのUI/UXのデザインをどのように設計したか解説します。

サービスの階層設計

HigLaboではサービスとしてプロジェクト管理、チャット、カレンダー、翻訳など様々なサービスを提供しています。

全体のメニュー設計としては以下のような階層構造です。

複数のサービスを迷わずに使えるようにするために、サービスの選択→各サービスのメニュー→使い方/ダッシュボードという階層とPCとモバイルである程度統一感のあるUXデザインにしました。

PCのメニュー

左端のサービスのアイコンのリスト

サービスのアイコンをクリックすると各サービスのメニューがレフトパネルに出ます。

アイコンをクリックすると使い方のページへ移動します。

中央のメインパネルにはタスクの一覧などが表示され、その詳細はライトパネルで確認できるようにしています。よくある一般的なデザインです。

モバイルメニュー

モバイルメニューです。

左上のアイコンをクリックするとサービスの一覧が表示されます。

フッターメニューの左端をクリックするとレフトパネルが表示されます。

中央のメインパネルのタスクの一覧をクリックするとPCと同様にライトパネルで表示されます。

フッターのメニューに今はサービスのアイコンを表示していますが、ここを各サービスのメニューに改良したほうが良さそうです。レフトパネルのメニューのうち、特に使うものをフッターに表示するのが良さそうだと今は考えています。

まとめ

このUI/UXデザインならサービスが増えても認知コストが上がらないかなと感じています。今回記事を書いて気づきがあったのはモバイルのフッターは各サービスのメニューの方が良さそうということです。

また使い方のページは最近追加しました。

引き続き実際に作っていきながら改良していきたいと考えています。