ビジュアライゼーション設計のベスト プラクティス

アプリの整理

1 つのアプリで情報が多すぎると、何が重要か判断しづらくなります。今日の最新のユーザー インターフェイス スタイルは、デザインに不要なものがなく、よりシンプルで、より内容を引き立てるスタイルです。シンプルなデザインはユーザーにとってわかりやすく、集中力を保つことができるようになります。

少ない方が良い

1 つのアプリに、あまりにも多くの情報を詰め込もうとする傾向があります。複数のメジャーがある折れ線グラフは、紛らわしく、解釈しづらい場合があります。より小さいビジュアライゼーションを複数作成して、この情報をページ上に分散するよう心がけてください。それによって、ユーザーはビジュアライゼーションを並べて効率的に比較したり対比したりすることができます。 代替の軸とメジャーを使用すると、ビジュアライゼーションを詰め込みすぎることなく、ユーザーがメジャー間を簡単に切り替えることができるようになります。詳細については、「ビジュアライゼーションのデータの変更」を参照してください。

アプリの美的な外観と機能を改善できる多種多様な方法があります。オーディエンスとどのデータをハイライト表示するかに応じて、ビジュアライゼーションの設計方法が、ユーザーによるデータの解釈に重大な影響を与えることがあります。

制限を認識する

ビジュアライゼーションの消費者は、スペースや解像度が限られた画面で作業している可能性があります。Qlik Sense は、応答型設計を使用してそれらの制限に対処します。ただし、画面のスペースまたは解像度の制限が大きすぎる場合は、何らかの設計上の対応が必要です。たとえば、次のような方法があります。

• 棒グラフや折れ線グラフに表示されているデータのサブセット。軸の値の数がビジュアライゼーションの幅を超えると、スクロール バーの付いたミニ チャートが表示されます。
• データ フィルターを選択する場合の折りたたみメニュー。軸値の数がフィルター パネル用のスペースに収まらない場合は、メニューが折りたたまれます。アプリ消費者は、フィルター パネルのタイトルにある軸名をクリックして新しいペインを開く必要があります。それから、新しいペインで選択操作を行うことができます。また、スペースが制限される場合は、フィルター パネルのタイトルに軸の省略名を表示可能です。アプリ消費者は、省略名をクリックしてフィルター パネルのペイン名を表示する必要があります。
• チャートの凡例において切り捨てられた名前。軸とメジャーに使用できるスペースに対して長すぎる名前は切り捨てられます。切り捨てられた名前の末尾に省略記号が追加されます。アプリの消費者は、切り詰められた名前の上にマウスポインターを置くと、完全な名前を表示できます。
• 凡例、ラベル、タイトルの欠落。

アプリ消費者は、ビジュアライゼーションを展開してこれらの問題に対処できます。ただし、アプリを使用するデバイスでアプリをテストすることをお勧めします。また、Firefox での応答型設計モード (Ctrl + Shift + M) などのさまざまなツールを使用することもできます。必要に応じて、ビジュアライゼーションを新しいシートに移動したり、ビジュアライゼーションに表示されるデータ量を削減したりすることなどもできます。

色のアクセシビリティ

色の範囲は、色ベースの視覚障害がある方にとってはより狭くなります。視覚障害のある方は、ビジュアライゼーションを作成意図とは異なって解釈する可能性もあります。

例えば、人によっては、赤と緑が黄色や茶色に近い色として見えています。このような赤と緑の色覚異常が最も一般的です。これが注目に値するのは、特に財務では、赤がしばしばデータ ビジュアライゼーションの中でマイナスの意味を含むことがあるためです。

赤または緑の KPI ステータスは混乱を招く場合があります。設計をよりわかりやすくするために、業績指標として形状と色を組み合わせて使用できます。例えば、不良を示すために空の赤の円を、良好の場合は緑で塗りつぶされた円を使用したり、KPI ステータスが許容できないレベルの場合のみに表示される警告記号として三角形を使用したりできます。

色が曲解されると、折れ線、棒、円グラフの区画は区別しづらくなります。

詳細については、「ビジュアライゼーションの外観の変更」を参照してください。

フィルターとアイコンの配置

フィルターとアイコンはデータ ビジュアライゼーションの重要な部分ですが、それらをどこに配置するかやどう並べ替えるかは判断しづらい場合があります。通常、ユーザーが読み始める場所は、いくつかの確立済みの設計原則に基づいて予測できます。

左側に配置

一部の一般的な Web サイトは、左側のナビゲーション タイルとフィルターを使用しています。これは、多くの言語が左から右へと読み進めるようになっているためです。その結果、画面の左側は、読み手が最も頻繁に見る場所です。コンテンツに目を通しているユーザーは、画面の左側に引き付けられる傾向があります。右側のオブジェクトに行くほど、それらを見るユーザーは少なくなります。フィルターとアイコンをすべて左側に垂直に積み上げられると、それらは同等に重視されます。

一方、テキストが右から左に書かれる言語では、この逆が当てはまります。このことは、アプリがこれらの言語に翻訳される場合に頭に入れておく必要があります。

上側に配置

アイコンとフィルターのもう 1 つの一般的な配置オプションとして、アプリの上部に沿って並べるというものがあります。フィルターやアイコンを左側に配置しないことで、紛らわしいメニューを伴う、より大きなビジュアライゼーションのために、より多くのスペースを割くことができます。フィルターとアイコンをビジュアライゼーションの上に配置すると、その下のコンテンツとは区別されて表示されます。これによって、フィルターとアイコンを優先付けていることがユーザーに伝わります。すべてのフィルターとアイコンを上部に横方向で並べると、最も左側のものがより重視され、ユーザーによって優先されます。

詳細については、「シートを使用したアプリの構成」を参照してください。

情報階層

特定のビジュアライゼーションを別のビジュアライゼーションよりも優先してユーザーに伝えたい場合があります。情報を階層で表示するには、主要なデザインに関するいくつかのベスト プラクティスを使用します。例えば、異なるサイズを使用して、一部のビジュアライゼーションを強調できます。重要性が高い情報を大きく表示します。フォントやチャートのサイズを大きくすることにより、ユーザーが最初に注目する箇所として表示します。

情報階層では、ページの配置も重要な役割を果たします。ページの上部にある情報は、最初に注目されるため、ページの下部にある情報よりも重要性が高いと判断されます。最初のページにある情報は、最後のページにある情報よりも重要性が高いと判断されます。

KPI へのコンテキストの追加

KPI は、アプリ内のいくつかの重要なアイデアとやり取りする優れた方法です。ただし、KPI 値は、水面下で生じている数値や計算にコンテキストを提供しません。KPI の横の緑のライトからは、目標を辛うじて達成したのか、大幅に上回ったのかは判断できません。

KPI にコンテキストをもたらすことができるように、値の横にサイズの小さいテキストで補足情報を含めます。例えば、現在の KPI の値と前年の数値を比較できます。また、軸や値のない小さな棒グラフを追加して、現在の傾向に関する情報を提供できます。

データ ビジュアライゼーションの危険性の回避

データ ビジュアライゼーションのメリットを享受するには、隠れた危険性を回避しなければなりません。以下は、そうした落とし穴のよくある例です。

色の濫用

色を使いすぎてはいけません。誤った場所で誤った色を使うと、明確さが失われ、まぎらわしくなる可能性があります。また、同じ色が、使われている場所よっては別の事柄を意味する場合があります。

円グラフの誤用

円グラフを並べて比較しないでください。また、情報の詰め込み過ぎにも注意が必要です。

視覚的な混乱

情報が多すぎると、明確さという目的が失われます。使用する KPI は 9 種類までに留め、視覚的な混乱を招く要素は排除してください。

内容を飾るスタイル

美しいビジュアライゼーションが必ずしも効果的だとは限りません。常に設計のベスト プラクティスを活用してください。

不良なデータ

データは、提示する前に問題点を検討し、修正してください。不適切なデータの責任は、ビジュアライゼーションにはありません。