ゼブラストライプより良い方法はありますか
現在、多くのデータテーブルを含むプロジェクトに取り組んでいます。データテーブルを管理しやすくするためにゼブラストライプを使用することを決定する前に、それよりも優れたソリューションをアドバイスできるかどうかを尋ねました。
それは「より良い」の定義に依存しますが、ユーザーパフォーマンスまたはユーザー設定をメトリックとして定義するかどうかにかかわらず、ゼブラストライピングを客観的に測定する研究があります（複数の方法で実行できます）。
A 2008年に調査が行われた は、テーブルでのゼブラストライプの効果を調べ、興味深い結論を導き出しました。
この調査では、次のテーブルデザインをテストし、ユーザーパフォーマンスとユーザー設定の両方を測定しました。
ユーザーパフォーマンス
この研究では、ゼブラストライプはユーザーパフォーマンスに悪影響を与えず、場合によっては改善することがわかっています。
この表は、8つの質問のうち3つについて、ストライプバージョンの方がプレーンバージョンとラインバージョンよりも正確な応答を示したことを示しています。 4番目の質問は、統計的に有意であることに非常に近くなります。残りの4つの質問では、3つのスタイルすべての精度の差が非常に小さいため、ランダムノイズから統計的に分離することはできません。これらの場合、ゼブラストライプを使用したパフォーマンスは、プレーンバージョンまたはラインバージョンと同じくらい優れていますが、それよりも劣ることはありません。
これは、少なくともこの研究では、ゼブラストライプはパフォーマンスに悪影響を与えないことを意味します。多くの場合、実際には改善につながります。
ユーザー設定
ストライプ化によってパフォーマンスが向上しただけでなく、ユーザーはそれらを優先することを明確に示しました（プレーンテーブルへの強い嫌悪）。
一般的なゼブラストライプアプローチ（単色、単一行）が最も推奨されます。参加者の31％が最も役立つテーブルと評価し、わずか4％が最も役に立たないテーブルと評価しました。 （これらの推定値の最大誤差は2.8％であることに注意してください。）
取り除く
あなたの質問に関して私がこの研究から取り上げるのは、いくつかの選択肢があることです。
- プレーンテーブル
- ダブルストライプ
- 裏地
- トリプルストライプ
- シングルストライプ
- 二色ストライプ
ユーザーがこれらのデザインに反応して使用する方法には測定可能な違いがあり、調査の結果は、単一のストライプテーブルが最良のアプローチであることを示唆しています。
場合によります
Web開発者として、特定のテーブルが保持するデータに従って決定します。なぜ要素が保持するデータに従って決定するのですか？
たとえば、表形式でレンダリングされたメッセージのリストがあるとします。unreadであるメッセージの行を強調表示する傾向がある、またはタスクのある別のテーブルがあると言いますリストされているので、優先順位に従ってタスクを強調表示します。したがって、ここでは、明らかにゼブラパターンを使用する方法ではありません。
私が何を意味するかを示すために、私がビジネス用にプログラミングしているシステムからの画像を添付します。ここで、ユーザーの問い合わせはログに記録され、管理者はその問い合わせを未読としてマークするオプションを持っています...強調表示されています。淡い黄色。
それとは別に、ユーザーがテーブルの行にカーソルを合わせるときにハイライトをよく使用します。したがって、同様のハイライト色でゼブラパターンを使用すると、ユーザーを混乱させます。
したがって、これに対する私のアプローチは、ヘッダー行が強調表示され、フッター行が強調表示されたプレーンテーブルを使用することです（テーブルにフッターがある場合）、オプションでいくつかの特別な行またはセルを強調表示できます。下の例でやったように。
最近チェスパターンも使用しましたが、どのセルも互いに関連していないことをユーザーに示したい場合に便利です...たとえば
上記のパターンは、ユーザーが単一のセルに集中するのに役立ちます。
だからあなたへの私の提案は、単純なテーブルを使用し、行にホバーを使用することです。
ゼブラストライピングは、ユーザーがテーブルを読みやすくする方法として発展したことに注意してください紙上。コンピューターにデータがある場合は、動的な強調表示、フィルタリング、またはその他のメカニズムを使用して、ユーザーが行/列がどのように関連付けられているかを確認できます。
（または、もちろん、データをテーブルから完全に引き出して、より便利な形式で表示します。）
また、印刷においても、ストライプ化は厳密に行ごとに交互に行われる必要はありません。 2と2、3と3、またはその他の組み合わせは、完全に機能し、場合によってはより適切に機能します。重要なことは、ユーザーがページ全体を追跡するために使用できる明確な視覚的参照を近くに持つことです。 （私は通常、3と3よりも父親になることはせず、各3行グループのトップ/ミドル/ボトムを与えます。）
私はしばしば動的なストライピングを使用します。つまり、白と薄緑を交互に使用しますが、カーソルが置かれているライン全体は薄黄色です。
私のテーブルはかなり広くなる傾向があります:-)