テキストと数値が混在するテーブルでは、コンテンツを左揃えにするか、右揃えにするか？

Question

サイト内に、すべてのタイプの数値（通貨、整数など）とテキストを含む列の両方が混在するテーブルがたくさんあります。

整合のガイドラインまたは基準は何ですか？列のラベルと列の内容を右揃え、左揃え、またはその両方にする必要がありますか？

Answer 1

1つのテーブル内のデータの種類の組み合わせに関係なく、個々の列のデータ型が配置を決定するはずです。

典型的なアラインメント（そしてもちろん、常に異なる理由と方法がある）

• テキストおよびテキストのように扱われるアイテム：左揃え（警告：rt揃えで常に最も読みやすい数字を見つける）
• 数字と数字のように扱われる項目：右揃え（小数がある場合は、1つの数値が23.00で別の数値が1.23であっても常に表示するのが最適です）

Bloombergサイトの混合データを含むグリッドをざっと見てみると、良い例がわかります。このグリッドは、値の混合を示しています。テキストは左揃え、数値は右揃えになっています。これにより、目や脳で情報を消化しやすくなります。

Answer 2

1.ラベルは列に揃える必要があります

ラベルは、その下の列とまったく同じように配置する必要があります。ラベルごとに異なる配置を使用すると、ラベルが配置されるはずのデータを特定するのが難しくなるおそれがあります。

2.列はタイプではなく、役割に応じて配置する必要があります

列は、dimension検索対象のもの、またはmetricsのいずれかです。 ）あなたが探しているもの

これは、使用可能なテーブルの設計における重要な違いなので、少し掘り下げる価値があります。

通常のテーブルでは、テーブルの左側にデータを行に分類する1〜2つの列があります。これらはあなたの次元であり、ユーザーは通常、特定の行を見つけるためにそれらをスキャンダウンします。

彼らの主なユースケースは単一のアイテムを見つけるためにスキャンすることなので、それらは整列させたままにし、理想的には賢明な順序にソートする必要があります。これはdimensionsが強調表示された表です

Dimension   number     cost
-item1-        567    $8954
-item2-         12      $56
-item3-       4444   $38372

他のタイプの列はmetricsです。これらは、各行に属する図またはカテゴリです。これらは表の右側にあり、主な使用例は、ユーザーが他の行の同じmetricと比較することです。 metricsが強調表示されたテーブルは次のとおりです。

Dimension   number       cost
item1         -567-    -$8954-
item2          -12-      -$56-
item3        -4444-   -$38372-

比較が容易になるため、指標は右揃えにする必要があります。そうしないと、次のような問題が発生します。

Dimension number cost
item1     567    $8954
item2     12     $56
item3     4444   $38372

この場合、数値列では、行1の最初の数字は500を表し、item2の最初の数字は10を表し、行3の最初の数字は4000を表します。しかし、それらはすべてあたかも同じように並んでいます直接比較できます。

代わりに、それらが右揃えの行である場合、次のようになります。

Dimension number     cost
item1        567    $8954
item2         12      $56
item3       4444   $38372

567の7、12の2、4444の4はすべて1桁を表します。ここでそれらを右に揃えることで、列内の数値を比較するために必要な認知負荷が軽減されます。

3.しかし、私のメトリックの一部が数値でない場合はどうなりますか？

ここで重要な点は、メトリックは通常はスキャンされず、通常は比較され、人間の目は視覚的な不一致を見つける傾向があるということです。

したがって、いくつかの列を左揃えにし、いくつかの列を右揃えにしている場合、目はすべての左揃えのものとすべての右揃えのものを精神的にグループ化しようとします。

最終結果は次のようになります。

company    status  value   code   units
google     red        59   googl   2394
Apple      green     504   aapl     359
Microsoft  orange    300   msft      45

ステータスが比較対象となるものなのか、それともスキャンダウンされるものなのかを判断するのは困難です。会社と同じように配置されているため、暗黙的にディメンションのように見えます。

この表は、次のようにはるかに使いやすくなっています。

company    status   value     code  units
google        red      59    googl   2394
Apple       green     504     aapl    359
Microsoft  orange     300     msft     45

これについて私が知っている最高のリソースは、Stephen Fewの Show Me The Numbers であり、この回答はすべて、その本を言い換えたものです。