Comment optimiser l'espace utilisé par les balises dans la colonne de droite des sites StackExchange?
Dans cette méta-question sur ce à quoi le site de l'interface utilisateur StackExchange devrait ressembler , je travaille sur (lire: déconner) une conception pour le site. J'utilise un outil Web pour modifier le CSS de la page, ce qui me donne beaucoup de liberté pour changer les choses tout en me limitant au HTML disponible rendu par le serveur.
En changeant et en réorganisant des choses (principalement des éléments comme la typographie et le poids visuel), j'ai réalisé que la colonne de droite, comme indiqué sur presque tous les sites Web StackExchange, est assez inefficace. Voici à quoi cela ressemble sur le méta site:
Les étiquettes (et ci-dessous, les badges) sont de petits objets plus longs horizontalement que verticalement. Chacun a plusieurs attributs:
- Nom de l'objet
- Nombre de fois où le tag a été attribué ou membre auquel le badge a été attribué
- Un élément visuel pour renforcer la notion d'objet
- Une largeur horizontale distincte en fonction de la longueur du nom
La façon dont les choses sont organisées semble désormais très inefficace:
- Chaque étiquette/badge occupe une ligne d'espace, même s'il n'a pas besoin de toute la largeur horizontale.
- La représentation visuelle de l'étiquette et du badge sur cette page semble insuffisante. Alors que les balises et les badges sont conçus pour être affichés par eux-mêmes, par exemple une balise sur une question ou un badge sur le profil d'un membre, dans ces cas, ils sont accompagnés de métadonnées: le nombre de fois que la balise a été appliquée ou le membre le badge est décerné à. Mais la représentation visuelle suppose toujours une application générique.
- Sur la plupart des sites StackExchange, ces éléments ont de fortes frontières, ce qui crée beaucoup d'espace négatif gênant entre chaque élément lorsqu'il se trouve sur une ligne.
Dans ma refonte J'ai pris soin de réduire la force des tags (je n'ai pas encore abordé les badges) pour réduire ce bruit visuel, mais je n'ai pas trouvé un bon moyen de représenter les tags en combinaison avec le nombre de fois appliqué. J'ai eu quelques idées, mais aucune ne me semble juste:
- Rendez-les dans un nuage de tags. Cela utiliserait plus d'espace horizontal et moins vertical. Cependant, les nuages de tags sont pour la plupart scannables et non lisibles. Je ne sais pas si c'est un problème.
- Envisagez une nouvelle représentation visuelle pour la combinaison de la balise avec le nombre d'applications. Peut-être qu'en incluant le nombre dans la balise: <discussion] x14 deviendrait <discussion | 14]. Ou en augmentant la hauteur de l'élément tag et en plaçant le "14" sous le nom. Cela prendrait plus d'espace vertical dans l'ensemble, mais permettrait plusieurs balises sur chaque ligne.
- Supprimez la référence à un nombre spécifique d'applications et utilisez plutôt une métaphore visuelle pour indiquer le nombre de fois appliquées. Peut-être en utilisant une palette de thermomètres: les étiquettes "chaudes" pourraient être plus rouges et les froides plus bleues. Cependant, cela ne serait pas immédiatement apparent pour les nouveaux utilisateurs.
- Supprimez la référence au nombre spécifique d'applications et utilisez plutôt la largeur pour indiquer la chaleur. Plus une étiquette est large (dans la colonne de droite), plus elle est populaire. Comme ci-dessus, cependant, cela serait quelque peu déroutant au départ.
Heure des questions: Quel serait un moyen efficace de repenser la façon dont les balises et les badges sont affichés dans la colonne de droite, étant donné que je ne peux que modifier le CSS et que je ne peux pas falsifier le HTML?
Bravo pour l'effort - très agréable!
J'ai quelques commentaires sur la liste à la fin:
- Personnellement, je pense que les nuages de tags ne sont pas très utiles.
L'ordre entre les éléments n'est pas clair, il n'est pas toujours facile de voir lequel est le plus gros et vous ne savez pas par quoi les balises sont triées. - Quant à votre deuxième suggestion, j'aurais peut-être une petite amélioration, mais elle ne semble pas non plus correcte - Utilisez la largeur, mais ne faites pas simplement une balise plus large - empilez-les!
C'est à dire. affichez simplement une "ombre" à droite de chaque balise pour chaque instance.![alt text]()
Naturellement, vous définissez une limite et tout ce qui dépasse 10 ou plus aura des points de suspension (...)
Si vous le souhaitez, vous pouvez incorporer le nombre d'apparences sur la pile, mais cela pourrait créer de l'encombrement.
Peut-être utiliser une approche pondérée par la taille de la police ou une couleur de police?
(source: ljplus.r )
Je pense que la liste intimidante de balises sur ce site me fait éviter car inconsciemment elle me fait peur en étant si longue. Je pense que le limiter au top 10 avec une option pour les voir tous permettrait à l'utilisateur de le scanner rapidement et de voir ce qui se passe en quelques secondes.
De plus, je n'ai jamais pu comprendre comment les balises étaient triées. Il me semble qu'ils sont triés par les chiffres à droite plutôt que par récence. Par conséquent, je pense que déplacer les nombres vers la gauche et les aligner (les nombres) vers la droite créerait la certitude qu'ils sont triés par elle. La suppression du signe "x" répétitif et du graphique autour de chaque balise désencombrerait la liste et améliorerait la numérisation.
De plus, faire ressembler les balises à des liens signifierait qu'il est cliquable et qu'il vous mènera à une autre page.
Quelques idées, plus pour spark d'autres idées prêtes à l'emploi qu'autre chose:
- Un curseur (des panneaux de balises apparaissent et disparaissent consécutivement)
- Stock-ticker de balises
- Tableau des balises statiques
- Graphique d'étiquette interactif
- Quelque chose de similaire aux visualisations de Digg Labs .