テーブルヘッダーのスタイルを設定する方法
Bootstrapなどの一般的なCSSフレームワークのデフォルトのスタイル設定は、ヘッダーをタイトルの大文字と太字のテキストでスタイルします。
質問
- ヘッダーがコンテンツ自体よりも目立つようになるため、この選択を維持する証拠はありますか？
- lowercaseと通常のフォントの太さを使用する方が良いでしょうか？
1.ヘッダーはコンテンツとは異なる目的を果たします
これは明白なステートメントのように見えますが、テーブルヘッダーが強調される理由（タイトルの大文字、太字、色付き、下線など）をアニメーション化します。
ユーザーは最終的にテーブルのcontentを読み取る必要がありますが、ヘッダーはユーザーに次のものを提供します。
- テーブルへの重要なエントリポイント（つまり、テーブルの内容を視覚的に処理するための開始点）。
- ユーザーがセルを読み取る前の、テーブルに含まれているデータの要約。
- Orientationテーブル内の構造化データを見つける場所の周り。ユーザーは常にテーブル内のすべてのアイテムを読み取るとは限りません。一般的なマイクロワークフローはテーブル内のデータを検索するので、ヘッダーはユーザーがそのタスクを実行するための明確な方向を提供します。
2.重要なコンテンツを常に強調表示する必要はありません
多くの場合、テーブルには密なデータが含まれています。そのデータは非常に重要である可能性があります（株価や医療記録など）が、それはそれが強調表示されるべきであるという意味ではありません。
- 密なデータの場合、ユーザーが密な情報を読み取るのを支援するために、データに調和、秩序、および落ち着きを与えることは、多くの場合より良いUXです。
- ポイントを説明するために、太字のヘッダーと明るい内容の表と、フォントを逆にした表を次に示します。ほとんどのユーザーは、最初のテーブルが2番目のテーブルよりもはるかに読みやすいと感じます。
ヘッダーは基本的にメタデータであり、コンテンツから分離しているが、それに関連していることを示す何らかの方法が必要です。
小文字と通常の太さのテキストを使用しないことをお勧めします。これにより、その行は他のコンテンツと視覚的に類似したものになります。
タイトルケースが最も一般的ですが、スモールキャップまたは大文字のヘッダーを使用できる場合があります。ただし、これらは多くの場合、美的満足度が低くなります。
太字のヘッダー以外が必要な場合は、ヘッダー行がコンテンツと何らかの方法で区別されている限り、色、配置、画像、境界線など、さまざまなバリエーションを使用できます。
タイトルの大文字と太字のテキストの一般的な使用方法は、視覚的な混乱や干渉を最小限に抑えてヘッダー行を視覚的に区別する方法です。
テーブルを改善する方法の例はたくさんありますが、 http://uxmovement.com/content/9-design-techniques-for-user-friendly-tables/ のようなページでそれらを見ると=それらはすべて、コンテンツと簡単に混同されない非常に明白なヘッダーを持っています。