Come ottimizzare lo spazio utilizzato dai tag nella colonna di destra dei siti StackExchange?
In questa meta domanda su come dovrebbe apparire il sito dell'interfaccia utente di StackExchange , sto lavorando a (leggi: scherzare con) un progetto per il sito. Sto usando uno strumento basato sul web per modificare il CSS della pagina, il che mi dà molta libertà di cambiare le cose limitandomi al codice HTML disponibile reso dal server.
Mentre cambiavo e riorganizzavo le cose (principalmente elementi come la tipografia e il peso visivo) mi sono reso conto che la colonna di destra, come mostrato su quasi tutti i siti Web StackExchange, è piuttosto inefficiente. Ecco come appare sul meta sito:
I tag (e in basso, badge) sono piccoli oggetti di lunghezza maggiore in senso orizzontale che verticale. Ognuno ha diversi attributi:
- Nome dell'oggetto
- Numero di volte in cui il tag è stato assegnato o membro a cui è stato assegnato il badge
- Un elemento visivo per rafforzare la nozione di oggetto
- Una larghezza orizzontale distinta a seconda della lunghezza del nome
Il modo in cui le cose sono organizzate ora sembra molto inefficiente:
- Ogni tag/badge occupa una linea di spazio, nonostante non necessiti dell'intera larghezza orizzontale.
- La rappresentazione visiva di tag e badge in questa pagina sembra inadeguata. Mentre tag e badge sono progettati per essere visualizzati da soli, ad esempio un tag su una domanda o un badge sul profilo di un membro, in questi casi sono accompagnati da metadati: il numero di volte in cui il tag è stato applicato o il membro il badge viene assegnato a. Ma la rappresentazione visiva presuppone ancora un'applicazione generica.
- Sulla maggior parte dei siti StackExchange, questi elementi hanno bordi forti, il che crea un sacco di spazio negativo tra i vari elementi mentre si trova su una linea.
In la mia riprogettazione Mi sono preso cura di ridurre la forza dei tag (non ho ancora affrontato i badge) per ridurre quel rumore visivo, ma non ho trovato un buon modo per rappresentare i tag in combinazione con il numero di volte ancora applicato. Ho avuto alcune idee, ma nessuna di loro ha ragione:
- Renderli in una nuvola di tag. Ciò richiederebbe più spazio orizzontale e meno verticale. Tuttavia, le nuvole di tag sono per lo più analizzabili e non leggibili. Non sono sicuro se questo sia un problema.
- Prendi in considerazione una nuova rappresentazione visiva per la combinazione di tag con numero di applicazioni. Forse includendo il numero nel tag: <discussione] x14 diventerebbe <discussione | 14]. O aumentando l'altezza dell'elemento tag e posizionando il "14" sotto il nome. Ciò occuperebbe più spazio verticale complessivo, ma consentirebbe diversi tag su ogni riga.
- Rimuovere il riferimento a un numero specifico di applicazioni e utilizzare invece una metafora visiva per indicare il numero di volte applicate. Forse usando una tavolozza termometro: i tag "caldi" potrebbero essere più rossi e quelli freddi più blu. Questo non sarebbe immediatamente evidente ai nuovi utenti, però.
- Rimuovere il riferimento a un numero specifico di applicazioni e utilizzare invece la larghezza per indicare il calore. Più un tag è largo (nella colonna di destra), più è popolare. Come sopra, tuttavia, questo inizialmente sarebbe alquanto confuso.
Tempo delle domande: Quale sarebbe un modo efficace per ridisegnare il modo in cui i tag e i badge vengono visualizzati nella colonna di destra, dato che sono in grado di modificare solo il CSS e non posso manomettere l'HTML?
Complimenti per lo sforzo - molto bello!
Alla fine ho alcuni commenti sull'elenco:
- Personalmente ritengo che le nuvole di tag non siano molto utili.
L'ordine tra gli elementi non è chiaro, non è sempre facile vedere quale è più grande e non sai quali sono i tag ordinati per. - Per quanto riguarda il tuo secondo suggerimento, potrei avere un piccolo miglioramento, ma non mi sembra nemmeno giusto - Usa la larghezza, ma non semplicemente allargare il tag - impilali!
Vale a dire. mostra solo una "ombra" a destra di ogni tag per ogni istanza.![alt text]()
Naturalmente imposterai un limite e qualsiasi cosa al di sopra di circa 10 avrà Ellissi (...)
Se lo desideri, puoi incorporare il numero di aspetti sulla pila, ma ciò potrebbe creare disordine.
Forse usi un approccio basato sulla dimensione del carattere o sul colore del carattere?
(fonte: ljplus.r )
Penso che l'elenco scoraggiante di tag su questo sito mi faccia evitare come inconsciamente mi spaventa di essere così a lungo. Penso che limitarlo alla top ten con un'opzione per vederli tutti renderebbe l'utente scansionarlo rapidamente e vedere cosa succede in pochi secondi.
Inoltre, non sono mai riuscito a capire come sono stati ordinati i tag. Mi sembra che siano ordinati in base ai numeri a destra anziché alla recency. Pertanto, penso che spostare i numeri a sinistra e allinearli (i numeri) a destra creerebbe la certezza che sono ordinati da esso. La rimozione del segno "x" ripetitivo e della grafica attorno a ciascun tag disordinano l'elenco e migliorano la scansionabilità.
Inoltre, far apparire i tag come collegamenti significherebbe che è cliccabile e che ti porterà in un'altra pagina.
Alcune idee, più per spark altre idee pronte all'uso che altro:
- Un dispositivo di scorrimento (i pannelli di tag si dissolvono dentro e fuori consecutivamente)
- Stock ticker dei tag
- Tabella dei tag statici
- Grafico interattivo dei tag
- Qualcosa di simile alle visualizzazioni su Digg Labs .