web-dev-qa-db-ja.com

キーと値のペアを表示する最も読みやすい方法

特定の画面に多くのデータが含まれるアプリを設計しています。GoogleとUXスタック交換を検索しましたが、何も見つからないようです（おそらく、検索キーワードの表現を間違えている可能性があります）。

キーと値のペアのリストを表示するためのベストプラクティスに関する調査はありますか？

アプローチA-右揃えキー、左揃え値

        Key: Value
 Longer Key: Value
  Short Key: Value that could be long

アプローチB-左揃えキー、右揃え値

Key:                              Value
Longer Key:                       Value
Short Key:     Value that could be long

アプローチC-両方を左揃え

Key: Value
Longer Key: Value
Short Key: Value that could be long

アプローチD-他に何か？

ここで、逸話的なベストプラクティスとは何か、およびベストアプローチの実際の調査/テストのボーナスポイントを知りたいです。

tableslistsdatadata-tablesreadability
5
Jon Kyte

オプションA（右揃えのキーと左揃えの値）は、ほとんどの状況で最も理にかなっています（調整が必要なRTL言語などのケースが常にある場合があるため）。

データによっては、常に重要な部分を知っている可能性が高く、比較的短い...非常に長くなる可能性のある値の部分、またはデータ構造の場合は独自の値のツリー。必要に応じて長い値を簡単にラップできます（テキストの段落など）。ただし、キーと値がそれぞれの行に上揃えされるようにして、本当に長い値になっても関連付けが明確になるようにします。

例：

enter image description here

ノート：

  1. 右揃えのキー/ラベルは左揃えよりもうまく機能することがわかりました。 （key：value）アイテムを互いに近くに配置することで、どのキーがどの値に対応するかが非常に明確になります。キーが長くなると、キーと値の間の空白が大きくなり、ユーザーは関連付けを行うためにさらにスキャンする必要があります。
  2. 必須ではありませんが、「セル」の間に微妙な境界を設けることにより、どの値のコンテンツがどのキーと一致するか、および行が開始/停止する場所が明確になります。
  3. 必須ではありませんが、キーと値の間に微妙なスタイルの違いを提供すると、どちらが
  4. 私はSteve Krugと彼の著書「 Do n't Make Me Think "」の大ファンです。そのため、私が作成するために提供できるすべての微妙なUI/UXヒントを確認する傾向があります。明白で発見可能なものが提供されます
7
scunliffe

私は常に値の上または下の左揃えのラベルを使用します。以下の私のプロジェクトのスクリーンショットをご覧ください。

これは、Matteo Penzoによるフォームの読み取り中のアイトラッキングの研究に基づいています。この研究はあなたの状況にも当てはまります。

キーと値を水平方向に揃えることの主な欠点は、幅が異なる可能性があることです。このため、ユーザーはキーと値を別々に読み取る必要があります。

ユーザーがラベルと入力フィールドを個別に確認する必要がないため、ほとんどの場合、入力フィールドの上にラベルを配置するとうまくいきます。注意してください次の入力フィールドのラベルを前の入力フィールドから視覚的に分離します。

上から下に読む場合、ユーザーは1つの瞬間に両方の要素を読み取ることができます。

入力フィールドのすぐ上にラベルを配置すると、ユーザーは1つの目の動きで両方の要素をキャプチャできました。また、ラベルがユーザー（たとえば、名または姓）は、ラベルを個別に読んで読むことをしませんでした。彼らは同じ中心窩領域でラベルと入力フィールドの両方を見ることができました。したがって、追加の固定とサッカードの必要性を排除します。

出典： フォーム内のラベル配置-UX事項

enter image description here

2
Nick Groeneveld