先日、社内向け管理画面の部分改善業務をご依頼いただきましたので、事例としてどんな改善作業を行なったかご紹介致します。
もちろん【社内向け管理画面】ということで、守秘義務の関係から管理画面の内容までは公開できませんので、あくまで差し障りのない範囲・イメージ図で書かせていただきます。
目次
ご依頼概要
今回ご依頼いただいたのは、とあるシステム会社様が制作した管理画面のデザイン改善案件でした。
システムで自動生成される使いづらい管理画面のUI(デザイン)を改善して欲しい
CakePHPを使って最低限のHTMLとCSSは自動生成されるものの、ただ自動生成される表（テーブル）はそのままでは情報量が多くて見づらく、ボタン等もただ並べただけの状態で、適切なUI設計は行われていませんでした。
ご依頼元の会社様には社内デザイナーがいなかったため、「納品先のお客さまが見やすく・使いやすい管理画面に整えてほしい」ということで今回ご依頼いただきました。
一言で管理画面と言っても
- 商品情報や顧客情報といった、扱うデータの内容
- 使用する人は誰か（社内のみか、一般ユーザーか）
など、条件はまちまちです。
それによってデザインする際の情報整理の仕方や、グラフィックをどこまで整えるべきかどうかも変わります。
しかしどんな管理画面でも共通して言えるのは、見づらくて使いづらい管理画面は利用者の作業効率が落ちるだけでなく、重大な誤操作の原因にも繋がるということです。
重大な誤操作と言うのは、例えば”削除してはいけない情報を削除してしまう”などです。
そのような重大な誤操作を招かないために、デザイン面でのアプローチ方法としては以下のような方法があります。
ユーザーの誤操作を防ぐためのデザイン
リンクやボタンの色・サイズを工夫する
あくまで一例ではありますが、基本的にボタンのインタフェースにおいては、それぞれの色には以下のような印象をユーザーに与える効果があります。
- 青・グリーン系…肯定的・問題なし・許可・承認などのポジティブなアクション
- 赤・黄色系…注意喚起・拒否・エラーなどのネガティブなアクション
今回ご依頼いただいた管理画面の当初のデザインは、ボタンが全て灰色・同じサイズでメインカラムに並んでいました。（下記イメージ図）
視覚的に同じような見た目のボタンが並んでいる当初のデザインでは、何がどんな内容のボタンなのかを都度ユーザーがテキストを読んで判断しないといけません。
それはユーザーにとって”考える”作業が増え負担になりますし、見間違いによる誤操作の誘発にも繋がります。
そこで、まずは以下の改善を行いました。
- ボタンの役割に合わせて色を変える
- 使用率の高いボタン（今回の場合は新規作成ボタン）のサイズを大きめにして、存在感で他ボタンと差をつける。
- ボタンの役割に合わせてボタンの位置を変更する。
ユーザーが最初に意識を向ける画面左側に主要ボタンを、「ログアウト」やサイト全体に関わる「設定ボタン」などはどのページからもアクセスしやすいよう、ヘッダーに固定しています。
これにより、ボタンの役割分担がぱっと見である程度ユーザーが判断できるようになるかと思います。
もちろん「データ削除」のボタンはうっかりクリックしてデータを消してしまわないように、視覚的に注意を伝えるだけでなく、万が一クリックしてしまっても確認画面やアラートが表示される仕様にしておくのは必須です。
またボタンの利用頻度によってはページ下など、あえて視覚に入りづらい位置に移動させることも検討します。
ボタンにアイコンをつける
前述でボタンの色・サイズ・配置について改善を行いましたが、更に視覚的に分かりやすさを強化する手段として「アイコンをつける」方法があります。
ただし、アイコンをすべてのボタンにつけるとかえって画面が煩雑になり見づらくなる場合もありますので、「ログアウト」のようにボタン色だけで判別しやすいもの・あまりユーザーの認知度を高める必要のないものには、あえてアイコンを設定しないようにしました。
テーブル（表）を見やすくする
テーブル（表）の項目が多くなりがちな管理画面では、膨大なスクロールが必要になり、テーブルのレイアウトも 崩れて見づらいものになりがちです。
通常のWebサイトではCSSとブラウザの進化にともない、テーブルを使う機会はかなり減りましたが、【管理画面】のようなエクセル的表示が必要な場面では、テーブルタグを扱うシーンもまだまだ多いです。
テーブルタグは便利ではありますが、デフォルトのままでは見づらいことも多く、ほとんどの場合において以下にご紹介するような工夫が必要になります。
変更後のイメージ
セルを工夫する
内容に合わせたセルの幅にする
テーブルのセルはデフォルトのままだと横幅が不揃いになります。
そのため内容量に合わせたセル幅をそれぞれ指定し、内容量に見合った横幅が確保されるだけでも見やすくなります。
【例】
商品名・商品説明が入るセルは横幅を広めの幅を設定する。
在庫数など少ない桁数が想定されるセルは、小さめの幅にする。
数字を扱うセルは右寄せにする
小さな改善ではありますが、顧客数・商品数・価格などのいろいろな数字を扱う管理画面では、数字の表示方法を変更するだけでも見やすさはグッと変わります。
また工数的に可能であれば、javaScriptやPHPで価格等の数字の場合は3桁ごとにカンマを入れる等すると、より分かりやすい表になります。
偶数行・奇数行の背景色を変える
テーブルの行数や列が多くなる場合、視線を左右へ移動させる際に視線が迷ってしまい”どこを見ているか分からなくなる”ことがよくあります。
そのため行の色が交互になるように改善すると、一行ごとにメリハリがつくのでユーザーが視線を移動させる際に見やすくなります。
これはCSSで簡単に実装できるので、私はこのようなテーブルを扱う際は必ず導入するようにしています。
テーブルのヘッダー（見出し項目）を固定する
テーブルの項目数が増え複雑になると、テーブル自体の行や横幅のサイズが大きくなり、それに伴ってユーザーが表を閲覧する際に必要なスクロールも多くなります。
またスクロールしている内に、項目が表示されている範囲外に出てしまい、どの列が何について記載されているかが非常に分かりづらくなります。
そのため、テーブルのヘッダー（見出し項目）がスクロールして画面の範囲外に移動しないよう固定することで、ユーザーが項目内容を識別しやすくなります。
現在は多くのブラウザがサポートしたため、CSSの【position: sticky;】で容易に実装することができますが、Internet Explorerをはじめとする古いブラウザに対応させたい場合は別途javaScriptを使う等が必要です。
今回は社内向け管理画面ということで、古いブラウザを想定する必要はありませんでしたので、CSSのみで対応させました。
変更後のイメージ
まとめ
基本的なユーザビリティの考え方は、管理画面であっても通常のWebサイトであっても大きく変わりません。
ですが通常のWebサイトに比べて、管理画面ではユーザーが積極的に画面を操作する部分が多いので、見た目のかっこよさよりも視覚的に整理整頓された分かりやすい画面を強く意識してデザイン設計することになります。
今回ご紹介した改善方法以外にも、内容に応じてグラフをご提案したり、新たにjavaScriptを組み込む、追加ページをご提案するといったこともあります。
このように、利用者やページの目的に応じて柔軟かつ最適にデザインしていきたいと思います。