列に番号付きリストを実装する際のベストプラクティスは?


7

印刷プロジェクトとWebプロジェクトの両方に番号付きリストを実装することがよくあります。リストを2つ、3つ、または4つの列に分割する方が効率的な場合もあります。

アイテムの注文はどのように処理されますか?

番号は左上の1から始まり、列を下に移動してから、次の列にジャンプして番号を続ける必要がありますか?(オプションA)

または、番号は左上の1から始まり、横に移動して#2、#3などに移動し、各番号の列をジャンプする必要がありますか?(オプションB)

ここに画像の説明を入力してください

Webの応答性の観点から、オプションBはより良いブレークポイントを提供します(時には3列または4列で)。

これは、印刷物とWebの両方で同じように処理する必要がありますか?


個人的には、オプションAの方が読みやすいと思います。私たち(西洋文化)は左から右に列を読む傾向があると思うので、次の列に行く前に左の列全体を読みました
binky

1
@スコット私が質問がここで話題から外れているとは思わないが、UXサイトは間違いなく印刷物に関連した質問も扱っている。とりわけ。
Chris Hayes

回答:


12

私はあなたの最初のオプションははるかに良い実践だと思います。番号付きリストは、アルファベット順のリストをデザインするのと同じように扱います。本の索引を交互列スタイルで設定しますか?

読者の目を複数の列にわたって前後にスキャンしても、順序付けられたリストが提供すべき連続性は販売されません。

Webの複数の列のテキストはまだ扱いにくいですが、CSSのサポートは増えています(そして、ほとんどの最新のブラウザーで)


6

オプションA、犬を愛するためにお願いします。オプションBを読むために目を前後に振るのは大変です。(これは、Stack Exchangeがタグをアルファベット順に並べる方法あり、私はそれが嫌いです。)1つの列から次の列に移動するとき、すばやく下に流すのではなく、左から右に大量の情報を運ばなければならないようなものです。

印刷またはWebのオプションBにはほとんど利点がないと思います。


Bはレスポンシブウェブデザインについての詳細です...そうです...
Scott

4

オプションAは素晴らしいです、それは直感的に感じます。列を上から下に読むのは西洋の読者にとって自然なことです。

オプションBは、列ではなく行により適しています。エントリ間のスペースが少なく、行間のスペースが広くなります。レスポンシブ対応のポイントは正当ですが、現状では、このレイアウトはコンテンツの可読性、および摩擦なしに情報をすばやくスキャンして解析する機能を妨げると思います。これが優先事項1です。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.