【UIの​ご紹介】メニューUIの​改善

本日は、SKYPCEのUIについてご紹介いたします。

SKYPCEに新機能が追加されていくことは、開発チームとしても非常に嬉しいことです。
一方で、機能が増えれば増えるほど、UI/UX設計面ではある悩みが訪れます。
それが「増え続けるメニューボタンをどう整理するか」という問題です。

今回は、私たちが「直感的な操作性」を向上させるために行った、メニューUI ofの改善対応と、その裏側についてご紹介します。

アイコンのみですっきり！のは​ずが・・・

初期のSKYPCEでは、画面上のメニューボタンをすっきり見せるために「アイコンのみ」で表示していました。

「追加」や「編集」「削除」といった、誰もが馴染みのあるメニューだけの間は、どのアイコンで何ができるかが想像しやすかったため、アイコンのみのメニューでも十分に伝わっていました。

しかし、SKYPCEが進化するにつれ、以下のようなメニューが追加されていきました。

• 「複製して追加」
• 「所有者変更」
• 「タグ置き換え」

などなど・・・

これらは、単純なアイコンでは表現しづらい機能です。

これらをアイコンだけで表現しようとした結果、ユーザーにとっては「ホバー（マウスを重ねる）して説明を読むまで、何のボタンかわからないアイコン」
が並ぶことになってしまいました。

だからといって、すべてのアイコンに「文字（ラベル）」を追加すると、今度は画面が文字だらけでごちゃごちゃしてしまい、閲覧したいデータの表示エリアが狭まってしまうという課題が出てきました。

操作の​「文脈」で​分ける、​引き算から​生まれた​新しい​UI

私たちは、ユーザーの「操作の文脈」に合わせてメニューボタンを整理・分類して、メニュー構成自体を大きく変更することにしました。

具体的な改善内容は以下の通りです。

①アクションの「分類」
メニューを、常時表示する「選択状態に依存しないボタン（新規追加など）」と、「データを選択して初めて実行できるボタン（編集、削除など）」の2つに分類しました。

②「選択データに対するアクションバー」の新設
データにチェックを入れると、画面にスッと「選択データに対するアクションバー領域」が現れるようにしました。
データを選んでいない時はアクションバー自体が表示されないため、画面がすっきりしました。

③アイコン＋ラベルの最適化
整理されたアクションバー内では、ボタンを「アイコン＋ラベル（文字）」で表示し、マニュアルを読まなくても一目で機能が理解できるようにしました。

④認知度の高いボタンの引き算
「削除」や「ダウンロード」など、誰が見ても一目で意味がわかる一般的な操作はあえて「アイコンのみ」のまま残し、画面全体の情報の引き算を行いました。

これらの改善のビフォーアフターがこちらです。

【Before】

【After】

①データ未選択時

②データ選択時

いかがでしょうか？

「必要な時に、必要なボタンだけが、迷わない言葉で目の前に現れる」という操作感により、画面全体のすっきりした美しさと直感性を両立することができたと思います。

引き続き、便利な機能を搭載してまいります。