MotionBoardデザインコンテンツ

画面がわかりづらい
と言われる

わかりやすい画面の考え方を学びましょう！
Write your awesome label here.

もくじ

わかりやすい画面の考え方

画面がわかりづらいと言われる理由にはいくつかあります。
『わかりづらい』といわれる理由
  • なんの情報かわからない
  • なにを判断すればいいのかわからない
  • なにをしたらいいのかわからない
  • 知りたいことと違う
これらは画面の構成や情報量に原因があり、改善が必要です。
改善するためには、現状のどこに問題点があるのかを把握しなければなりません。
では実際に『わかりづらい』を再現した例を見てみましょう。
この可視化画面は営業実績を把握し、課題を発見するための画面です。
画面を改善するためには、まずこの画面の目的・用途、利用ストーリーを再度確認します。

確認するときのポイント

利用目的・用途


  • なにをする画面なのか
  • なにを判断させたいのか
利用ストーリー


  • だれがいつ利用するのか
  • どのように使うのか
  • どういった判断をしていくのか
次に見直すのは、情報の見せ方です。
可視化画面では、グラフ、表、文章、ボタン、検索、入力などいろいろな表現や操作を実装できますが、利用者がその表現や操作手法を理解できなければ意味がありません。
利用ストーリーを画面上で認識しやすい、理解しやすい表現がどういったものなのか、そこで判断させるためにはどんな表現がよいのかをしっかり考えましょう。

情報の見せ方を考える時のポイント

わかりやすい表現


  • 説明がなくても理解できる
  • 迷わず操作できる
  • 問題点に気づける
では、先ほどの画面の情報の見せ方を確認し、改善点を洗い出しましょう。

サイズやカラーの違いに理由はある？？

売り上げ数値の色やサイズを変えて表示させていますが、色やサイズの変動などを使った表現をするときには、その違いに対する理由があるかどうかが重要です。
サイズや色に差をつけるときは、以下のような気付きを促すときに有効な表現方法です。
このように、色やサイズの違いをつけると、利用者の視線をその変化した箇所に誘導することができます。しかし、その効果を多用すると、なにが重要なのか、どう判断したらいいのかが伝わりにくくなります。
今回の画面は、それぞれの数値のサイズも色も違います。
これを利用者が見たとき、利用者はどういった思考になるかを予想してみましょう。
現在の画面だと、サイズの違いから『昨日売上』にまず視線が向きますが、その色に対する良し悪しがわかりません。さらに、色に対する情報も読み取れないため、この情報に対してどういった理解をしたらいいのかわからなくなってしまうのです。
では、以下のようなデザインだとどうでしょうか？
上記のように色による状態の変化を表現するなら、その色がどういった状態なのかを【■目標達成】として色をつけて記載するとわかりやすいです。
そして、それ以外の情報は目立たないように表現しておくと、今回の目標達成が際立ちます。
このように、情報に対してどういった状態なのかを瞬時に判断させるためには、サイズや色の変化をつけることでスムーズに理解させることができます。

各情報の内容がわからない

チャートや表を配置するときには
  • その情報が何を示しているのか
  • どういったところに課題があるのか
がわかりやすい表現である必要があります。
そこで利用されるのが情報に対するタイトルや説明文などの情報です。
この画面にはそういった情報が全くないため、利用者はこの画面を理解するのに時間がかかってしまいます。
見えている情報を理解させるためには、その情報が何を示しているのかがわかる状態でなければなりません。利用者がすぐに理解でき、問題発見までスムーズにできるような表現を心掛けましょう。

ボタンの表現とサイズ感に違和感がある

『ボタン』はダッシュボードに表示されている情報のなかで重要度が低いことが多く、ボタンがあまりにも目立っていると利用者はその存在に違和感を覚える可能性があります。
また、全体で見たときの重要度が低いにもかかわらず、現在のサイズで配置すると、そちらに視線と意識が向いてしまいます。
ボタン上の文字・文章などもわかりやすいものを心掛けましょう。

改善した画面の例

これらの問題点を見直し、実際に改善した一例はこちらです。
このように、現状のどこに問題点があるのかを把握し、情報の見せ方を改めて見直し、どういった改善が必要なのかをひとつづつ検討していきましょう。