web-dev-qa-db-ja.com

「ゼブラストライプ」を使用するかどうか、またはテーブルの交互の行の色

テーブルの行の色を交互に変えると、情報の解析にかかる時間が増えるかどうかを示す調査はありますか?例は次の場所にあります。

enter image description here

テーブルが正しくフォーマットされている限り、通常、入力フィールドを行名に関連付けるのは簡単です。そのため、実際に色を交互に変更することでユーザーエクスペリエンスが向上するかどうかはわかりませんが、これが文体的に魅力的である理由を理解できると思います。

90
sklein

ジェシカエンダースは、「ゼブラストライプ」が役立つかどうかを判断するために彼女が行った3つの研究について、 A List Apart に関する記事を書きました。

以前の記事 で説明されている最初の研究では、ユーザーが単純なテーブルのデータを読み取って解釈する能力をテストしました。 2番目の研究は最初の研究と同様であり、方法論が改善されています。 3番目の研究では、ユーザーがストライプテーブルを主観的に好む傾向があるかどうかを判断しようとしました。

オススメ

これまでに実施された3つの調査の結果は、最も安全なオプションは、テーブルの交互の個々の行を単一の色でシェーディングすることであることを示唆しています。このアプローチを取ることで、次のことが確実になります。

  • タスクのパフォーマンスが他のテーブルスタイルよりも優れている、または少なくとも劣っていない。
  • 大多数のユーザーの美的感性と主観的な好みが求められます。

このタイプのゼブラストライプを簡単に実行できない場合は、各行の間に線を引くことが次善の策になる可能性があります。

更新:お見逃しなく フィリッペホッファの答え 以下。

73

画面上のテーブルについては、非交互のテーブルを用意するのが最善であると思いますが、マウスの下の行全体を強調表示します。また、マウスが指している列ヘッダーも強調表示されます。

27
Lie Ryan

しないでください。ゼブラストライプを使用しないでください。

引用させてください Edward Tufte

繰り返しますが、これは解決済みの問題であり、情報の視覚化、第3章の例を参照してください。ストリップは、官僚的またはデザイナーのチャートジャンクです。優れたタイポグラフィは常にテーブルを整理でき、ストライプは必要ありません。

-エドワードタフテ https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001IV

色を使用する場合は、意味のある色にしてください。なぜこの列が暗いのですか?この行が他の行よりも軽いのはなぜですか? 「この行がたまたまこの行の後に起こった」以外の理由があるはずです。

https://i.imgur.com/ZY8dKpA.gif

ストライプを使わない人

誰がストライプを使うか

最終結果

  • どうやら数十億ユーザーのプロジェクトはストライプを選択しません。それらのように:)
12
Felipe Hoffa

大きなデータセットの場合、私はeach行のわずかな勾配のファンです。数年前に私が見た滑らかな年次報告書は、#333から#666のような行の境界線の下の色を交互にすることによって効果を作りました。

ホバー効果の+1ライアン。私たちのタイムトラッカーはホバーで行を強調表示します。命の恩人。さらに、ツールヒントポップアップに追加のデータが表示されます。徐々にエンゲージメントが勝ちます。

5
Benxamin

目標は、データの読み取りとスキャンを簡単にすることです。ゼブラストライプは、それを支援するために活用できる要素の1つにすぎません。

多くの場合、それらは乱用され、チャートのジャンクになります。

私はそれらが最後の選択肢のツールであるべきだと提案します。データのレイアウトがスキャンしやすい行で一緒に保持できない場合は、ストライプを投げます。しかし、最初はそれらを非常に微妙に扱います。

4
DA01

私はこのフィールドに関する研究を知りませんが、Microsoft Excelで行と列をたくさん取り、背景を交互に比較して比較すると、特にどの列がどの行に接続されているかを知るのははるかに簡単です。右端の列のデータが必要で、最初(左端)の列を参照として使用する場合。

3
Henrik Ekblom

人間は物事を3〜7の束に(人間にもよりますが)簡単にグループ化できるため、ゼブラストライプが束単位ではなく行単位である理由を常に疑問に思っていました。

私はまた、マウスオーバー(またはスマートフォンのようなタッチスクリーンをサポートする場合はクリック)のハイライトを見つけました。これは、現時点で関心のある特定の行を視覚的にグループ化するためにのみ表示されるゼブラストライプのようなものです。

これらの視覚的グループ化の背景のいずれかを使用する場合、例として投稿した画像で行ったようにそれらを分離することは厳格な禁止事項です。テーブルセルのパディングによる視覚的な分割は不快です。

3
Chris Moschini

行の背景色を交互にすることで、視覚に問題のあるユーザーがアクセスしやすくなります。 1つの例は、適切な色または交互の行がないと、他の問題の中で同じ行を何度も読むことになる、scotopicユーザーです。暗所視の症状の一部を以下に示します。

  • 忙しいパターン、特に縞模様の不快感(「視覚的ストレス」と「パターンのまぶしさ」)
  • 明るい/暗いコントラストの極端な条件での不快感(つまり、逆光)
  • 読書の不快感または難しさ(読書は忙しいパターン、特に縞模様を伴います。症候群の強い症状のある人々は、特に紙がわずかに光沢がある場合、白い紙の黒いテキストを読むのが非常に難しいと感じます。)
  • 動いているように見えるテキスト(上昇、落下、渦巻、揺れなど)テキストコンテンツが失われ、テキスト全体に白い川が表示される一緒に移動する単語が1つの認識できない単語になる

このリストは、主題のために縞模様と言っていると誤解を招きますが、テキスト自体は「縞模様」であり、表の縞模様は実際にはそれを壊して読みやすくしています。

2
Brad Hutchison