web-dev-qa-db-ja.com

バーの空のスペースを埋める必要がありますか?

表の棒グラフについてです。

すべての行にはバーがあります。行の値を視覚化します。

テーブル全体の最大値はバーの最大値であり、必ずしも同じテーブルページにあるとは限りません。したがって、ほとんどの行には最大値より短いバーがあります。

その間の空白を最大まで埋めると、全体の印象が重くなりますが、空白を空にすると、ローカルの「ページの最大値」がテーブル全体の最大値のように見えます。

enter image description here

enter image description here

53
K..

まともなヒューリスティックは負のスペースに意味があるかどうかです。バーが速度や生産性の測定基準などを表す場合、グラフの青い部分は重要な意味を持ちません。その場合、バーは通常のバックグラウンドに対して単独で残されるのが最適です。可能であれば、ユーザーが値0と欠落バーを区別できることを確認してください。

それらがプログレスバーである場合、または会社の女性の割合を表す場合、残りのスペースは重要な意味を持ち(残り時間、会社の男性)、おそらくバーの残りの部分にも色を付ける方が良いでしょう。 。

これらのものでいつものように、目は最後の言葉を持っています。それがあなたにとって正しいと思われるなら、それを使ってください。

27
Peter

2番目の色を省略して、代わりに各バーの周りに境界線を付けてみませんか?これにより、最大値が何であるかが明確になりますが、色のないネガティブスペースの明快さも維持されます。

enter image description here

87
Vince Bowdren

視覚化の主な利点は、データのみを表示し、他には何も表示しないことです。 Chartjunkのような天井の音を表示するためだけに負のスペースを追加します。

単に上限を表示したい場合は、細い線を表示し、それが何を表しているかを記述します。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

これは、ユーザーの評判のグラフレイアウトでスタック交換が行うこととよく似ています。毎日の200担当者キャップは、細い水平線でマークされています。

ユーザーの主な焦点はデータ(グラフの値と高さ)である必要があります。ネガティブスペースや不要な境界線などを追加すると、妨害として機能します。 enter image description here

40
rk.

空いたスペースはそのままにした方がいいと思います。 2番目のグラフを見ると、青のグラフが完全に塗りつぶされているのか、緑のグラフが塗りつぶされているのかをユーザーが理解するのは明らかに困難です。

でも、何もないところに色を付けたいなら、透明な赤をオススメします。それはあなたのためによりよく働きます。緑と青は見た目は良いのですが、本来の目的を果たしていません。

8
prince

長いバーが幅全体ではないことを人々が認識できるかどうかが問題になりますか?バーが全幅であるというユーザーによる誤解の可能性は、ユーザーエクスペリエンスをどのように損ないますか?

精度が必要な場合は、そのサイズのバーを作成するのではないようです。それらを大きくするか、まったく異なるメカニズムを使用します。精度が重要ではない場合(そして重要ではないと思われる場合)、他の「肯定的な」回答で言及されている追加要素は、UIを乱雑にしたり、ユーザーを混乱させたりすることによってUXに害を及ぼすと思います。

だからあなたの質問に答えます。いいえ。空きスペースを埋めないでください。

4
Jeff

また、バーには空のスペースが必要です。

この理由は、これらのバーの目的です。チャートの数値の違いをグラフィックで視覚化する必要があります。したがって、空のスペースはこの違いをより簡単に区別します。

たとえば、グラフを見ると、最初の4つの項目には6つの図番号がありますが、それらの違いを一度に確認することはできません。ここで、棒グラフが役立ちます。

(多分)改善点として私が提案することの1つは、チャート(Win31まで)のすべての項目にバーがあることです。バーに集中すると、価値がないように見えます。最後のアイテムを最も薄いバーとして開始し、それに比例してトップに再計算します。

3
valix

これは基本的に、ユーザーグループの観点からより多く尋ねられる視覚化の質問です。私はそれを空のままにしておくことをお勧めしますが、バー要素に深さまたは影があると、これは赤字が何であるかについてより明確になります。

ほとんどの場合、バー(フル+空)でマルチカラーを使用すると、UXのエクスペリエンスはあまり良くありません。トレンディに見えますが、脳は把握するためにより多く機能する必要がありますが、これは一般的なケースでの概念が次のとおりであるためです。ただし、このアプローチを取る場合は、概要を維持してください。

3
neoeahit

これは設計上の問題です。 25%グレーなど、明るい色を使用して最大値を示します。その後、ページは重く見えることなく、データはクリアになります。

2
trisweb