多数のリストを効果的に表示するUI（たたき上げVer）

サイト内で多数の項目をリスト表示したい時に使えそうなUIを考えた。
このUIは実際に使う予定。
今回は考え方だけメモっということで。

０、事前事項
まず、リストの項目は20個程度あって、それぞれ4つのカテゴリに分けられてます。
それをいかに効果的に見栄えを損なわず表示できるかが、今回のUIの課題です。


１、通常時
1.jpg

まず、上の画像は通常時のもの。
通常の状態ではoverflow:hidden;がかけられ、スクロールバーは表示されていません。
カテゴリでソートされていないので、全ての項目が表示されています。

ソートはphpなどで処理するのではなく、事前に全て読み込み、クラス名でカテゴリごとに名前をつけておきます。
そのクラス名をもとにjavascriptで表示／非表示を切り替えると言うわけです。


２、マウスオーバーでスクロールバーの表示
2.jpg
１のままじゃ隠れた項目が見えないので、リストボックスにマウスオーバーすることでスクロールバーを表示させます。
これはCSSでもできそうですが全てのブラウザに対応していない点と、本来CSSで表現するべきところなのかというところを考慮してjavascriptで対応します。



３、一覧性への対処
3.jpg
１、２のままじゃ一覧性がないよね。
ということで、リストボックスの下部に領域拡大のボタンをつけます。
もちろんこれもjavascriptでheightの値を操作して領域を調節します。

これで操作してないときはすっきりみせられ、操作時の使いやすさ・見やすさを考慮したUIができるんじゃないかな～と考えてみました。
もっとこうしたらよくなるんじゃない？とかあったらコメントください！


Categorys:
Tips,
UI
Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Trackback(0)

Trackback URL:

Please Comments





Page Top