管理画面のデザインで注意すること

業務システムやCMSなどの管理画面を操作する中で「なんだか使いづらいな」「やりたい操作が見つけづらいな」と思った経験はないでしょうか。管理画面デザインの良し悪しは、このようなユーザーのストレスをどれだけ軽減できるかで決まってきます。
使いやすい管理画面は、業務効率を上げ社内教育のコストも軽減できるため、業務時間の短縮や従業員の満足度向上にもつながってきます。

今回は、業務システムに関わらず、マイページ機能を持ったWebサイトなどのデザインでも参考になる、優れた管理画面デザインを制作するための具体的なポイントをいくつか解説していきます。

【ポイント1】できるだけ見慣れたものを

先述した「やりたい操作が見つけづらい」などユーザーに操作方法を考えさせすぎてしまうことを「認知負荷」といいます。認知負荷について、初めて聞いたという方は、次の記事をご参照ください。

認知負荷を軽減するための5つのポイント
https://www.weblab.co.jp/blog/staff/design/10378.html

管理画面のUIデザインとして、押さえておきたいポイントは、次のようなものです。

• フォントはWebフォントよりもOSデフォルトのものを使う
• 一般的なレイアウトにする

認知負荷をいかに下げるかを重視した場合、華美なデザインよりもできる限り見慣れたデザインを意識するべきです。フォントを例に挙げると、ユーザーが最も目に馴染み深いのはOSデフォルトのフォントです。あまり目にする機会のないWebフォントなどを組み込んでしまうと「初めて見たもの」というだけで無意識に脳はストレスを感じます。

レイアウトについても同様で、ナビゲーション・ページタイトル・コンテンツといった要素が直感的に分かる、多くの管理画面で採用されているオーソドックスなデザインが良いでしょう。似たものを見たことがある、あるいは見慣れているデザインであればあるほど認知負荷を軽減でき、ユーザーが快適に使用することができます。

【ポイント2】デザインに一貫性をもたせる

ボタンなどのUIパーツのバリエーションが多すぎる場合、ユーザーを惑わせる原因となってしまいます。たとえば、次のような意識をもっておくことで管理画面のUIデザインに一貫性をもたせることができます。

• ボタンやチェックボックスなどUIパーツのスタイルを統一する
• むやみに色数を増やさない
• デザインガイドラインを共有する

たとえば、画面によってボタンの色や形が異なっていると、統一感がなくなってしまいます。また、色数も同様でむやみに増やすべきではありません。
管理画面のUIデザインを考える場合は、同じ「キャンセル」の機能を持たせたボタンでもページによって緑だったり黒だったりしてしまうことを避けるために、複数人でデザイン制作を行う場合はデザインガイドラインの作成も検討すべきでしょう。

たとえば、背景のカラー・主要となるテーマカラー・注意を促す箇所に使用するアクセントカラー、リンクテキストのカラーなどをガイドラインとして定めておくことによって、デザインの統一感が損なわれるリスクを軽減できます。

【ポイント3】選択肢は必要最小限に

管理画面上で、たくさんのことができるといって、全てのメニューを表示してしまうと、ユーザーはいったい何ができるのかについて把握しきれなくなってしまいます。たとえば、100個のことができるからといって、100機能を一画面に表示されてもそこから目当ての機能を見つけることは困難でしょう。
このような問題を防ぐには、正しく機能をグルーピングし、視覚的な負担を減らす必要があります。たとえば、HTML変更機能、コンテンツ作成機能、アクセス解析機能といったように、ジャンルごとに機能がまとまっていたらわかりやすいかと思います。

グルーピングの単位については、「マジックナンバー」という心理学の情報を軸に考えていくことが基本です。「マジックナンバー」とは、人間の短期記憶において、記憶できる情報の数のことです。時代と研究者によって諸説ありますが、4～7個がひとつの目安となります。
ナビゲーションなどに表示する項目、は「マジックナンバー」を考慮し必要最小限に抑えていきましょう。なかなか、最小限にできないという場合は、よく使う機能、あまり使わない機能をしっかり吟味し選択肢を厳選することをおすすめします。

【ポイント4】リキッドレイアウトにする

管理画面を閲覧するデバイスは、多様化しています。そのため、さまざまなディスプレイサイズやマルチウィンドウでの表示も考慮してリキッドレイアウトにすることをおすすめします。リキッドレイアウトとは、コンテンツサイズをWebブラウザの幅に合わせて、表示することです。

作業環境によっては、複数のアプリを同時に使用していて、ブラウザの幅をディスプレイ幅よりも狭く表示するシーンもあるかと思います。逆に、表組みなどの情報量が多い画面ではブラウザの幅を広げた方が閲覧・操作がしやすいですよね。
このような様々な利用シーンを想定すると、リキッドレイアウトが最適であるといえるでしょう。

まとめ

以上のポイントは管理画面のUIデザインに関わらず、通常のWebサイト制作においても考慮すると、より伝わりやすく使いやすいWebサイトにできます。
Webサイトによって情報量や目的が異なるため、変更すべきポイントも変わってきますが、基本的なところをしっかりと押さえるだけでグッと使いやすいデザインにできるので、常にユーザーの視点で考えることを忘れないようにしましょう。