web-dev-qa-db-ja.com

3列に順序​​付けられていないリストアイテムを表示する別の方法

2列または3列のレイアウトで50の順序付けられていないリストアイテムを表示する別の方法を見つけようとしています。私が使ったパターンはかなり「何となく」見えます。

レイアウト例:

特集トピックで閲覧
[画像、見出し1] [画像、見出し2] [画像、見出し3] [画像、見出し4]

すべてのトピックを参照(アルファベット順)

Link one         |  Link Nineteen     |  Link thirty seven
Link two         |  Link Twenty       |  Link thirty eight
...                     ...                    ...
...                     ...              Link fifty      
Link eighteen    |  Link thirty-six   |  
  • 注目のトピックと対応する関連画像を上部に表示して、リンクの重いページを分割してみました
  • 各アイテムはそれ自体の情報ページにリンクしています(重いページにリンク)
  • 各トピックの見出しは最大2ワードです

Font-size、line-heightを使用して、これらのアイテムを順序付けられていないリストに表示してきました。

上記のデータを表示するための創造的な代替手段はありますか?

3
Dev Sites

グループ化
データを何らかの方法でグループ化できる場合は、グループ化します。

インタラクティブリスト
ユーザーがこれらのいずれかを頻繁に選択する場合:

  • クイック検索(Windows VistaスタートメニューやGoogleインスタント検索など)(リストの閲覧を禁止)

  • 一部のアイテムを「ハイライト」するか、リストの上部に「固定」することができます。 (お気に入りのパーソナライズされたリストを作成します)

アルファベット順
最低でも、アルファベット順に(または、それがより明白な場合は別の順序で)ソートし、文字の区切り文字を提供し、列の周りに文字を折り返さないでください。

次のように、レターセパレーターは多くのスペースを必要としません。

alt text

1
peterchen

順序付けの際に留意すべきことの1つは、人間がデータの順序を概念的な方法で簡単に把握できるという仮定があまりにも頻繁に行われることです。

この例は、地域に基づいてアメリカ合衆国を表示することです。つまり、...東/西/北/南です。この概念をすぐに理解する人もいるかもしれませんが、多くは理解しません。それよりも、UIの問題を考えすぎて、誤った選択や状況を複雑にしてしまう結果になることがよくあります。

入力に応じてアクティブな検索のオプションがアルファベット順に表示され、検索に関連付けられていない値は除外されます。これらは両方とも、データの順序付けの点で事実上のものになり、議論するのが困難です。

1
Aaron McIver