it-swarm-eu.dev

Jak optimalizovat prostor používaný značkami v pravém sloupci stránek StackExchange?

V tato meta otázka o tom, jak by měl vypadat web uživatelského rozhraní StackExchange , pracuji na (přečtení: chatování) s návrhem webu. Používám webový nástroj k úpravám CSS stránky, což mi dává velkou svobodu měnit věci a omezuje mě na dostupné HTML vykreslené serverem.

Při změně a reorganizaci věcí (hlavně prvků jako typografie a vizuální váha) jsem si uvědomil, že sloupec na pravé straně, jak je vidět na téměř každém webu StackExchange, je docela neefektivní. Jak to vypadá na webu meta:

How the tags look on beta sites

Značky (a níže, odznaky) jsou malé objekty větší délky vodorovně než svisle. Každý z nich má několik atributů:

  • Název objektu
  • Počet udělení značky nebo člena, ke kterému byl odznak přiřazen
  • Vizuální prvek, který posiluje představu o objektu
  • Zřetelná vodorovná šířka v závislosti na délce názvu

Způsob, jakým jsou věci organizovány, je nyní velmi neefektivní:

  • Každá značka/odznak zabírá jeden řádek prostoru, přestože nepotřebuje celou vodorovnou šířku.
  • Vizuální reprezentace značky a odznaku na této stránce je nedostatečná. Zatímco značky a odznaky jsou navrženy tak, aby se zobrazovaly samostatně, například značka na dotazu nebo odznak na profilu člena, v těchto případech jsou doprovázeny metadaty: kolikrát byla značka použita nebo člen odznak je udělen. Vizuální reprezentace však stále předpokládá obecnou aplikaci.
  • Na většině webů StackExchange mají tyto prvky silné hranice, které mezi jednotlivými prvky vytvářejí spoustu nepříjemných negativních mezer, protože jsou umístěny na řádku.

V můj redesign Postaral jsem se o to, abych snížil sílu značek (zatím se neodstranil odznaky), abych snížil vizuální šum, ale nepřišel jsem s dobrým způsobem, jak reprezentovat značky. v kombinaci s počtem dosud použitých. Měl jsem nějaké nápady, ale žádný z nich se necítí dobře:

  • Vykreslete je ve shluku značek. To by vyžadovalo více horizontálního a méně vertikálního prostoru. Značkové mraky jsou však většinou skenovatelné a ne čitelné. Nejste si jisti, jestli je to problém.
  • Zvažte novou vizuální reprezentaci kombinace značky s počtem aplikací. Snad zahrnutím čísla do tagu: <diskuze] x14 se stane <diskuze | 14]. Nebo zvýšením výšky prvku značky a umístěním znaku „14“ pod název. To by zabralo celkově více svislého prostoru, ale v každém řádku by bylo umožněno několik značek.
  • Odstraňte odkaz na konkrétní počet aplikací a místo toho použijte vizuální metaforu k označení počtu použitých aplikací. Možná použitím palety teploměrů: „horké“ štítky mohou být červenější a studené modré. Novým uživatelům by to však nebylo okamžitě zřejmé.
  • Odstraňte odkaz na konkrétní počet aplikací a místo toho použijte šířku k označení teploty. Čím širší je značka (ve sloupci na pravé straně), tím populárnější je. Jak je však výše uvedeno, bylo by to zpočátku matoucí.

Doba vyhrazená pro otázky: Jaký by byl účinný způsob, jak přepracovat způsob, jakým se značky a odznaky zobrazují v pravém sloupci, protože mohu upravit pouze CSS a nemůžu s ním manipulovat HTML?

8
Rahul

Kudos za úsilí - velmi pěkné!

Na konci mám několik poznámek k seznamu:

  • Osobně cítím, že tag cloud není moc užitečný.
    Pořadí mezi prvky není jasné, není vždy snadné zjistit, který je větší, a nevíte, jaké značky jsou tříděny.
  • Pokud jde o váš druhý návrh, možná budu mít malé vylepšení, ale ani to necítí dobře - použijte šířku, ale ne jen rozšiřujte značku - stohujte je!
    Tj. pouze u každé instance zobrazte „stín“ napravo od každé značky.
    alt text
    Přirozeně nastavíte hranici a cokoli nad 10 let bude mít Ellipsis (...)
    Pokud chcete, můžete do zásobníku zahrnout počet vystoupení, ale mohlo by to způsobit nepořádek.
7
Dan Barak

Možná použít vážený přístup velikosti písma nebo barvu písma?


(zdroj: ljplus.r )

4
Kostya

Myslím, že skličující seznam značek na tomto webu mě nutí vyhnout se, protože mě tak podvědomě děsí tím, že jsem tak dlouhý. Myslím, že omezením na první desítku s možností vidět všechny z nich by uživatel skenovat rychle a vidět, co se děje během několika sekund.

Také jsem nikdy nemohl pochopit, jak byly značky tříděny. Zdá se mi, že jsou řazena podle čísel spíše než podle aktuálnosti. Proto si myslím, že posunutí čísel doleva a jejich zarovnání (čísla) doprava by zajistilo jistotu, že jsou seřazeny podle nich. Odstranění opakujícího se znaku „x“ a grafiky kolem každé značky by odstranilo přehled v seznamu a zlepšilo skenovatelnost.

Navíc, když značky vypadají jako odkazy, znamená to, že na ně lze kliknout a že vás přesune na jinou stránku.

enter image description here

4
Denzo

Několik nápadů, více k spark dalších nápadů, které nejsou v krabici, než cokoli jiného):

  • Posuvník (panely značek postupně mizí a vystupují)
  • Zásobník značek
  • Statický graf značek
  • Interaktivní graf značek
  • Něco podobného vizualizaci na Digg Labs .
0
Virtuosi Media