箇条書きのアイテムの「重さ」（重要性）を邪魔にならない（創造的な）方法で示すにはどのようにしたらよいでしょうか？
重要度のレベルなど、それぞれに関連する重みが付いた項目の箇条書きのリストを含むWebページがあります。弾丸は同じ幅ですが、必ずしも同じ高さではありません。これはアイデアを示す図解です：
- 1つの方法は、アイテムの重量に応じてスケーリングされたアイテムの左/右に小さなバーを表示することです。その場合、上から下に向かって棒グラフのようになり、各項目には「棒」が付加（または付加）されます。これは、煩わしく煩わしいものとして認識されていたため、缶詰にされました。
- 別の方法は、重量に比例した量で（水平方向に）「ボックスを埋める」ことです。しかし、そのような背景を持つことは、ユーザーにとってあまりに不愉快であることがわかりました。さらに、各アイテムの高さが異なるため、認識は均一ではありませんでした。バケツに詰めるように垂直にこれを行ったとしても、それはそれほど素晴らしいことではありませんでした。
- より微妙なバージョン：重量に比例して上部（または下部）の境界線に色を付ける。しかし、ユーザーが境界線がどのアイテムに属しているかを簡単に理解できず、境界線をその上（または下）の要素と誤解する傾向があるため、これは混乱を招きました。
質問：リストが表示されている間に、各アイテムの重量を所定の位置に視覚的に表現するための、最も邪魔にならないがクリエイティブな方法は何ですか？ （数字が表示されていても問題ありませんが、数字だけは受け入れられません）
いくつかのアイデアを得るために私が見ることができる/見るべき視覚化はありますか？ポインタ、提案、スクリーンショットをいただければ幸いです。値がある場合、これはJavascript/Jquery + CSSの重いフロントエンドです。
[〜＃〜] update [〜＃〜]：箇条書きのリストの上部の境界線全体で温度計（例：進行状況バーのようなもの）を組み合わせて使用します（それぞれアイテムには上部の境界しかありません。上の図には、サイズの違いを示すすべての境界があります。きちんと見えると思いますし、完成したら完成したバージョンを投稿できるはずです。したがって、私は@Jayと@Beatが彼らの投稿にリストしたものの混合/組み合わせになります。完全を期すために回答の1つを受け入れますが、両方を併用することで私の質問への回答が改善されます。
あなたのアイデアはうまくいくかもしれませんが、それを設計するときは注意する必要があります。可変サイズは混乱を招く可能性があります。心地よいデザインの特徴であるバランスと対称性を壊す。
しかし、それは不可能ではありません。 弾性リストと呼ばれるこの実験は、いくつかのアイデアを持つ優れた例を提供します。
コードを取得します：エラスティックリストのGithubリンク
これは鐘と笛のバージョンです。高さは変数の重みを表します（例：結果の数）。網掛けは、全体的な分布と比較した比率を表します（選択した州での予想よりも高い）。実際に見やすいです。スパークラインは時間の経過とともに変化します。
より単純な効果のために、これを行の高さのみで表示できることを覚えておいてください。どれだけ複雑かは、状況によって異なります。行の高さの差異のみの例については、この NY Timesの記事を検索するためのデモ を参照してください。
リスト内のアイテムの強さを示すもう1つの（そしておそらくもっと簡単な）方法は、温度計スタイルです。あなたはこれが不快すぎるかもしれないと述べました。ただし、以下の例は、微妙なグラフィックが依然としてバランス感覚を示していることを示しています。それがあなたのデザインに合うかどうかはすべて相対的ですが、私は過去にこれをうまく使用しました。
これに数値を追加して絶対値を与えることができます。
この例 は、強調のために色が追加されたアプローチのようなグラフを持っています。
最後に、リスト自体をきれいに保ちたい場合、この例は、温度計を一種の弾丸として配置するアプローチを示しています。
編集：私はForbesで複数行の例を見つけました。
ページの一般的なスタイル/コンテキストがどのように見えるかを知らなければ、答えることは難しいです。ただし、
簡単な提案
このように、水平パディングと不透明度の組み合わせをお勧めします（ラフスケッチ）。
説明のために数字を残しました。これはそれらなしで動作します。ユーザーがホバーするアイテムが常に最も重要であることは明らかであるため、ホバーされた要素にマウスオーバー効果を追加して不透明度を高めることができます。
また、両方が多すぎると思われる場合は、水平パディングまたは不透明度のいずれかを選択できます。
その他のスタイル
次のようにして、要素の同じ重み付けを行うことができます。
- 彩度
- 下線の太さ：例の編集
- （フィルター）エフェクトの強さ：EDITの例
- 活版印刷要素（より重要なポイントに大きな数字を表示するなど）
- 等.
他の要素と組み合わせて使用しますか？
おそらく、ページに他の要素があり、ソリューションを組み合わせて乱雑さと侵入を減らすことができます。ユーザーの煩わしさの認識は、ページ上の視覚的な重みの不均衡、または存在するスタイルの数が多すぎることに起因すると思います。要素を減らして重みをバランスさせることができれば、すでに破棄したものも含め、ほとんどすべてのソリューションを実行できます。
ユーザーがそれらを確実に比較することができないため（行の高さを使用すると、積み重ねられた行の長さを簡単に比較できるように）、IMOには問題があります。
2番目と5番目のラインのウェイトが3と4である場合、ライン間の距離が原因でユーザーが識別しにくくなります（高さが大幅に異なる場合を除く）。
色とシェーディングにはアクセシビリティの問題があり、画面によっても異なる場合があり、それらが混ざり合う可能性があります。
私は、各行の右側（左側）にある要素を使用します。この要素は、よく知られていて、人々が簡単に認識できるため、すぐに「フィルター」することができます。そのような例の1つは、サイコロです（範囲が大きい場合は2を使用できますが、人々はカウントで「仕事」を開始する必要があるため、それ以上は使用しません）。当然、自分のサブジェクトドメインで機能するものを選択する必要があります。
注文した情報を単に表示することを検討したと思います。ジェイの例のように行の高さも均等に使用できます。これは、2つが近接しているため、それらを比較できるためです。しかし、それはおそらくオプションではありません。
タグクラウドを使ってみませんか？
リスト形式を維持しながら、アイテムの重要度に応じてフォントサイズ（または太さ/太字の値）を増やします。
インデントの使用を提案する人を見たことはありません...
重要度の低いものほど（重さが小さいほど）、インデントが大きくなります。
これにより、左右の平面に沿って直接比較できます。