StackExchangeサイトの右側の列のタグで使用されるスペースを最適化するにはどうすればよいですか？

Question

StackExchange UIサイトの外観についてのこのメタ質問 では、サイトの設計に取り組んでいます（読み：いじりながら）。私はWebベースのツールを使用してページのCSSを編集しています。これにより、サーバーによってレンダリングされる利用可能なHTMLに制限しながら、自由に変更できるようになりました。

物事（主にタイポグラフィや視覚的な重みなどの要素）を変更および再編成しているときに、ほぼすべてのStackExchange Webサイトに表示されている右側の列はかなり非効率的であることに気付きました。メタサイトでの表示は次のとおりです。

タグ（およびその下のバッジ）は、垂直方向よりも水平方向に長い小さなオブジェクトです。それぞれにいくつかの属性があります。

• オブジェクトの名前
• タグが付与された回数、またはバッジが割り当てられたメンバー
• オブジェクトの概念を強化する視覚要素
• 名前の長さに応じた明確な横幅

物事を整理する方法は、今では非常に非効率に感じられます。

• 水平方向の幅全体を必要としないにもかかわらず、各タグ/バッジは1行分のスペースを占めます。
• このページのタグとバッジの視覚的表現は不適切だと感じています。タグとバッジは、質問のタグやメンバーのプロフィールのバッジなど、それ自体で表示されるように設計されていますが、これらの場合、メタデータが付いています：タグが適用された回数、またはメンバーバッジが授与されます。しかし、視覚的表現はまだ一般的なアプリケーションを想定しています。
• ほとんどのStackExchangeサイトでは、これらの要素に強い境界線があり、各要素が線上にあると、要素間に不快な否定的なスペースがたくさん作成されます。

私の再設計 では、視覚的なノイズを減らすためにタグの強度を減らすように注意しました（まだバッジに取り組んでいません）が、タグを表現するための良い方法を思い付きませんまだ適用された回数と組み合わせて。私はいくつかのアイデアを持っていますが、どれも正しくないと感じています：

• それらをタグクラウドでレンダリングします。これにより、水平方向のスペースが増え、垂直方向のスペースが減ります。ただし、タグクラウドはほとんどスキャン可能であり、判読できません。それが問題かどうかはわかりません。
• タグと多くのアプリケーションの組み合わせの新しい視覚的表現を検討してください。おそらくタグに番号を含めることによって：<ディスカッション] x14は<ディスカッション| 14]になります。または、タグ要素の高さを増やして、名前の下に「14」を配置します。全体的に垂直方向のスペースが大きくなりますが、各行にいくつかのタグを付けることができます。
• 特定の数のアプリケーションへの参照を削除し、代わりに視覚的なメタファーを使用して、適用された回数を示します。おそらく温度計パレットを使用することにより、「ホット」タグをより赤く、コールドタグをより青くすることができます。ただし、これは新しいユーザーにはすぐにはわかりません。
• 特定の数のアプリケーションへの参照を削除し、代わりに幅を使用して熱さを示します。タグの幅が広いほど（右側の列）、人気が高くなります。ただし、上記のように、これは最初はやや混乱します。

質問時間：CSSのみを変更でき、改ざんできない場合、右側の列にタグとバッジを表示する方法を再設計するための効果的な方法は何ですか？ HTML？

Answer 1

努力に対する称賛-とてもいいです！

最後にリストについていくつかコメントがあります。

• 個人的にはタグクラウドはあまり役に立たないと感じています。
  要素間の順序は明確ではありません。どちらが大きいかを確認するのは必ずしも簡単ではなく、タグが何でソートされているのかわかりません。
• あなたの2番目の提案については、私は小さな改善を持っているかもしれませんが、それも正しくないと感じています-幅を使用してください、しかし単にタグをより広くしないでくださいそれらを積み上げてください！
  つまり各インスタンスの各タグの右側に「影」を表示するだけです。
  
  当然、境界を設定し、10を超えるものは省略記号（...）
  必要に応じて、スタック全体に出現回数を組み込むことができますが、乱雑になる可能性があります。

Answer 2

多分font-size-weightedまたはfont-colorアプローチを使用しますか？

_{（ソース： ljplus.r ）}

Answer 3

このサイトのタグの手ごわいリストは私が無意識のうちに長いので私を怖がらせるので私を避けさせてくれると思います。それらをすべて表示するオプションでトップ10に制限すると、ユーザーはそれをすばやくスキャンし、数秒以内に何が起こっているかを確認できます。

また、タグがどのようにソートされているのか理解できませんでした。最近ではなく、右側の数字でソートされているようです。したがって、数字を左に移動してそれらを右に揃えると、確実に並べ替えられると思います。反復する「x」記号と各タグの周囲のグラフィックを削除すると、リストが見やすくなり、スキャン性が向上します。

さらに、タグをリンクのように見せることは、タグがクリック可能であり、別のページに移動することを意味します。

Answer 4

いくつかのアイデア、sparkに他の何よりもすぐに使える他のアイデア：

• スライダー（タグのパネルが連続してフェードインおよびフェードアウト）
• タグのストックティッカー
• 静的タグチャート
• インタラクティブタグチャート
• Digg Labs での視覚化に似たもの。