管理画面のデザインで気をつけるべき点
はじめに
今回は株式会社ベイジ様のKnowledge / baigieの「管理画面のUIデザインにおける20の改善ポイント」の記事を読ませていただきました。管理画面のUIデザインで気をつけている点やユーザビリティ・アクセシビリティを考慮した考え方などとても参考になりました。自身のUIデザインの制作で参考になる部分を抽出し、実務で活かしていけるようまとめました。
参考記事
キリッドレイアウト
管理画面のUIデザインでは横並びのデザインに適したキリッドレイアウトで組み立てることが多いです。キリッドレイアウトとはブラウザの横幅に合わせて、コンテンツ幅を変更するレイアウトです。管理画面はコンテンツ量が多くなりがちです。リキッドレイアウトであれば横幅が大きなディスプレイではコンテンツを広げて表示されることができ、見やすくなります。反対に横幅が狭くてもレイアウトを崩すことなく表示させることがメリットです。横幅が狭くなる場合はヘッダーやサイドメニューを畳んで主要コンテンツが表示できるように工夫します。
システムフォント
管理画面で使用するフォントはWindowsではメイリオ、Macの場合はヒラギノ角ゴシックを使用します。( UDフォントも検討する)WebサイトではGoogleフォントなどのWebフォントを使用することが多いですが管理画面のフォントは読みやすさがとても重要です。デザインをする時は可読性や視認性を意識しながら作成するためデバイスフォントを選びます。
アイコン
アイコンの役割はラベルやメニューの意味を補助する役割として使用します。アイコンを使うメリットは、場所をとらずに機能やメニューの意味を直感的に伝えられることです。注意点として選択したアイコンの意味が伝わらなければユーザーは意味を誤解してしまい逆効果となってしまいます。また、アイコンを単体で使用する場合は必ずアイコンの意味がわかるデザインにする必要があり、補助の役割としてツールチップを活用し補足説明をつけておくと安全です。
CTA
CTAは行動換気を促すためアクセントカラーを使用して目立たせるようにするのが一般的です。強調させたい要素が複数ある場合やCTAとして他のボタンと差別化したい場合は下線や、枠線、サイズなど色以外の方法で差別化するようにします。理由は色覚障害を持つユーザーでも違いを認識できるようにするためです。色の違いのみによる区別する方法はそういったユーザーにとってわかりにくくなってしまう可能性があるからです。
ボタンは優先度をはっきりわかるようにデザインします。多くの機能を表示させる管理画面では、ボタンが複数になる場合があり、どのボタンが重要なのかユーザーは認識してくれません。ボタンの見た目を変えること以外にレイアウトに従って配置位置を統一するとサービス全体でボタンの操作が覚えやすくなります。
コンテンツエリアの確保
管理画面ではコンテンツエリアの情報量が多く、ヘッダーやサイドバーメニューが分厚いとコンテンツエリアが狭くなり操作しづらくなります。そのため表示エリアを薄くするか、開閉式にしてコンテンツエリアの広さを確保する工夫が必要になります。
通知機能
多くの情報が表示される管理画面ではどこを見れば良いか気づきにくくなります。通知機能を活用することでユーザーは確認する必要がある情報をすぐに知ることができ、業務効率の向上に繋がります。例えば、未読エントリーの件数とその概要や情報の変更箇所を知らせる際に便利です。ユーザーに気づいてもらう手段としてアイコンに通知件数を表示させたりやユーザーが管理画面にアクセスした際に通知情報をポップアップで知らせる方法があります。
テーブルレイアウト
管理画面のテーブルは項目が多くなり、各項目を横並びにするため端の項目が見えにくくなる傾向にあります。ヘッダーメニューでは並び替えができるソート機能を取り入れたり、主要項目は固定し横スクロールの対象外にしたり、検索機能やフィルター機能で絞り込みができるようになっているとより見やすいテーブルレイアウトになります。
ユーザーを、複数選択した時にどのような処理ができるのかわかりやすく表示しておく必要があります。チェックした後の操作ボタンがテーブルから離れすぎているとユーザーはグループとして認識してくれません。また、チェックしたデータは選択していることを、伝えるために色を変えるやチェックボックスを用意してわかりやすくします。
管理画面デザインの注意点
管理画面のデザインでは一貫性を保てているか注意します。画面遷移の方法や操作フローがバラバラだとユーザーは操作を覚えてくれません。サービス全体で操作・フローを統一し、ユーザーの学習コストを減らせるようにします。同様にボタンやその他の機能についても操作やアニメーションはどの画面でも統一することが大切です。
.png)
.png)
.png)