単純なラベル付き情報を表として、または小見出し付きのテキストとして表す方が良いですか？
次のような表として表示されるいくつかの簡単な情報を持つWebサイトを再設計しています：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
フォーム記事のラベル配置 をもう一度読みました。この記事は、アイトラッキングの研究に関するレポートであり、フォームラベルを左（左揃えまたは右揃え）ではなくフィールドの上に配置すると、フォームが読みやすくなると基本的に述べています。その記事のデータは、同様の情報表示に適用されるのでしょうか。したがって、上記の表に対するより良い解決策は、次のような見出しを持つ単純な線形リストです：
私は関連する記事へのポインタに感謝します。
リンクされた記事は、ラベルと入力フィールドの関係について話しています。ユースケースはread、think、typeにあります。入力、処理、出力。そして、出力（タイピング）中に、ユーザーは読みを再訪したいと思うかもしれません。
あなたが提示している情報のユースケースはread、readです。または、単にreadのようになります。非常に異なります。あなたのイラスト＃2は読みを容易にしません。テーブルに2項目の行が多すぎる 不必要なインク があり、読み取りも遅くなります。 （ただし、情報を表形式で考える場合は、テーブルを使用するのが適切ですが、グリッドを表示しないか、グリッドを非常に暗くします。）
私は JohnBGによるフォーマットの提案 が良いと思います。
ほとんどの場合、それは設計上の問題です。しかし、一般的には、情報が多い場合はテーブルを使用し、情報が少ない場合は単純なテキストを使用します。
ただし、テキストで表示する場合は、フォーマットに注意を払うを使用して、すばやく簡単にラベルをデータと区別して伝えるにする必要があります。一般に、ラベルをデータの上ではなく左側に配置します。
大まかな例：
場合によっては、ラベルを完全に省略したほうがよい場合があることに注意してください。例では、次のようになります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
デザインで使用する文言を少なくすると、常にスキャンがより明確で簡単になります。反復する表現を表す画像（適切な量）は、テキストを読むときに目を無視するため、常にページを読みやすくします。
これにより、製品名や価格などの重要な情報を強化できます。
また、さまざまなフォントサイズを使用して、さまざまなデータに目を引く必要があります。
この記事から、人々は必要なものだけに集中することがわかります。テキストボックスは、ページ内の目的に役立つ何かのためのものであることがわかっています。
私の個人的な意見では、ラベルがそれを表す情報から遠すぎて読みにくいかどうか。だから私はそう思う：
（...）見出しのある単純な線形リストになります
Jakob Nielsen's 記事（このサイトは100％推奨）、 Horizontal Attention Leans Left によると、左揃えのthouseラベルも推奨し、彼らは関連しているように見えます。 @JohnGBが言ったように、ラベルにコンテンツとは異なるものを与えます。
最後に、これはより一般的な方法で役立ちます（コンテンツに画像がある場合）。トンネルビジョンと選択的注意（nngroup.com/articles/tunnel-vision-and-selective-attention/）申し訳ありませんが、2つ以上のリンクを用意することはできません。
宜しくお願いします。
「質問A」と「回答B」を混同しないでください。フォームのラベル付けは、データの出力の構造化とはまったく異なります。私の質問が正解なら、出力インターフェイスを設計し、入力インターフェイスから結論を導き出してください。
したがって、まず出力関連の質問に答えてみます。出力を構造化する場合、ユーザーはテキストをそのように読むのに慣れているため、水平方向が「自然な」方向になります。さらに太字、赤、下線などで出力のいずれかの部分を強調したい場合は問題ありませんが、「：」の片側にラベルを配置して出力をすでに構成しているため、基本的には必要ありません。もう一方のデータ。多くの場合、これらのタイプの出力はテーブルに配置されていません。ほんの簡単な例：
Name: John Miller
Job: Designer
そうですね-フォームと入力フィールドがあります-フォームデザインを掘り下げたくありませんが、「フィールドの上のラベル」というシナリオのスクリーンショットがこの時点で役立つかもしれません。
私は記事へのリンクはありませんが、たとえば、Amazonをご覧になると思います。
上のスクリーンショットは、1つの非常に重要なことを示しています。
情報はそれ自体を説明します。色、通貨記号、フォントスタイルなどで商品名を強調します。
ラベルを完全に回避できれば、実際にラベルをどのようにレイアウトするかは重要ではありません。
私は非常に似た問題に直面しています。 5つのチャネル/カテゴリ（画像、テキスト、ビデオなど）に該当する記事のリストがあります。彼らはすべてラベルと見出しがあります。さらに、各チャネルには、タイムスタンプ、日付の切り抜き、ビデオの長さ、単語数、画像サイズ、KBサイズなどの特定の情報リストがあります。さまざまなカテゴリのすべての記事を表示できるすべてのページを表示しています。私が直面した問題は、テーブルの列がカテゴリ間で非常に一貫していないことでした。調査の結果、ユーザーが見出しとラベルに最も関心があることがわかったので、それらを積み上げました。これにより、レイアウトがすっきりし、すばやくスキャンできます。
例：
LABEL
かなり途方もなく長い見出しがここに入ります
タイムスタンプ|日付スタンプ|画像サイズ| KBサイズ
さらに、情報の階層を強調するために色と線の高さを使用しています。
調査を目にしたのはこれが初めてですが、Lyndaのユーザビリティビデオで言及された（または同様の）調査を覚えています。私が正しく思い出すと、フィールドが順次入力されない場合（基本的にはユーザーが行くたびに、垂直方向の配置によりフォームのスキャン可能性が低下します）しばらく待って、しばらく間違えてしまいましたそれらは終了しますフォーム内を移動するのに多くの時間を費やします。おそらく、元の読み取り速度の増加を相殺または逆転するのに十分です）。
それはあなたの質問にどのように当てはまりますか？ allあなたの情報がユーザーとの関連性が高いと期待しない限り、表形式のレイアウトが望ましいかもしれません。これを考慮してください。たとえあなたがより速く読むことが分かっていても、栄養ラベルを垂直レイアウトに貼り付けますか？ いいえ、それらはスキャンすることが不可能であり、ユーザーはあなたを憎むでしょう：
（ソース： fda.gov ）
間違った要素に正しいルールを適用しようとしていると思います。私たちがしなければならない最初のことは、目標を心に留めておくことです。
GOAL：完全なフォーム
「入力フィールド」ではなく「ラベル」が使用されているのは、ユーザーがフォームにすばやく入力して、目標を達成し、製品を購入し、購読または登録できるようにするためです。また、ユーザーはフォームに記入しないと目標を達成できないため、できるだけ早くこれを完了するようにしてください。
GOAL：製品に関する情報を取得
これはまったく別の目標です。ここで、ユーザーが時間を費やして、提供された情報を分析するようにします。彼らが興味がない場合、それを読む必要はありませんが、彼らの進歩を妨げることはありません。
titleとitemが何であるかを理解しやすい限り、この情報を表示する正しい方法または間違った方法はないと思います。