web-dev-qa-db-fra.com

Mots clés! Des quantités massives de tags et une interface saine pour les utiliser

Je travaille sur une application Web pour la musique qui utilise le balisage à plusieurs niveaux. Les artistes, les albums et les pistes ont un ensemble distinct de balises à partir d'une liste prédéfinie qui peut être appliquée, et chaque utilisateur peut ajouter ses propres balises à l'un de ces éléments (les balises "personnelles" ne sont visibles que par l'utilisateur qui a créé/les a ajoutés).

La liste des tags pour les albums et les artistes est relativement petite, ce qui m'amène à utiliser cette interface:

drop-down style multiselect

Si l'utilisateur clique dans le conteneur de balises, une liste déroulante s'affiche avec toutes les balises disponibles. Si l'utilisateur tape, la liste est filtrée et le texte correspondant mis en surbrillance:

filtering list on user input

C'est déjà un peu compliqué, surtout si beaucoup de balises sont appliquées:

tag overload!

... mais pour les artistes et les albums, cet exemple dépasse de loin ce qui est typique. Avec les pistes, cependant, la liste est plus longue (environ 7 000 balises), chaque balise est plus longue, et donc le tout prend plus de place. Nous nous retrouvons avec tellement d'espace occupé par les balises existantes que la liste déroulante déjà trop longue pend de l'écran, la rendant inutilisable. Si nous le redimensionnons pour ne pas l'afficher si haut, il est également inutilisable en raison de la longueur de la liste.

Maintenant, considérez également qu'en dessous de cette interface, une répétition distincte de cette interface est une autre dédiée aux balises personnelles. Je ne suis pas fan de cette division pointue, mais il était opportun d'avoir une liste qui n'est pas modifiable et une qui l'est. Des réflexions à ce sujet seraient également appréciées.

Je cherche des exemples de balisage bien fait, surtout quand il est peu encombrant . Ou, toute entrée sur les éléments d'interface actuels que j'ai publiés ici. Bien sûr, je vois les balises StackExchange, mais il me semble que le cas d'utilisation ici est différent - l'utilisateur commence par savoir ce qu'il demande. Pour ce cas d'utilisation, il y aura une grande variété de balises disponibles et un besoin d'exploration de ces balises par un utilisateur qui ne connaît pas les balises disponibles.

Nos exigences sont:

  • Gérer une grande liste de balises dans un petit espace (ish)
  • Permet une définition claire entre les balises globales établies et les balises personnelles modifiables
  • Encourager l'exploration ou la navigation dans les balises pour que les utilisateurs puissent les ajouter à un utilisateur ne connaissant pas les balises disponibles

MODIFIER

Voici une capture d'écran d'une zone où les balises sont utilisées par l'utilisateur final: example

Aussi, s'il peut être pertinent d'ajouter: cette application sera utilisée par le personnel en ondes d'une station de radio. L'interface présentée est destinée à être utilisée par certains membres du personnel en ondes ("utilisateurs expérimentés") et le personnel de bureau pour ajouter les balises pour commencer. Nous en avons en place, mais l'ensemble du système a besoin de beaucoup de saisie de données pour être effectué.

8
Chris

Je pense que l'interface a l'air bien.

Je pense que vous êtes trop lâche dans ce que vous offrez à vos utilisateurs avec la possibilité de marquer. Tout n'est pas une balise. Beaucoup de ces options semblent s'exclure mutuellement. L'ère d'une chanson est essentiellement dans et autour de sa date de sortie - les chansons créées dans les années 1920 seront toujours des chansons des années 1920 et cela ne changera jamais. Une chanson a une date de sortie exacte, vous ne devriez donc pas avoir 1920's comme tag. Vous devriez simplement avoir année pour la chanson, et les résultats du filtre de recherche par époque devraient reprendre.

Donc, en bref, vous devez diviser la chose "tout est une balise" en un ensemble de boîtes standard avec des options mutuellement exclusives dans la mesure du possible.

6
bobobobo

Ma première question serait quelle valeur un utilisateur obtiendrait-il d'une interface qui lui présente 700 balises? La première modification que je ferais serait de couper les balises affichées. Montrez, disons, dix balises ou quelque chose, puis ajoutez du texte après la dernière balise qui dit "Et 690 de plus". Si l'utilisateur veut vraiment voir ces balises, il peut cliquer dessus et avoir une interface plus grande où les balises pourraient être gérées.

De cette façon, vous pouvez conserver vos balises pour la recherche et le tri ou ce que vous avez, mais vous ne surchargez pas l'utilisateur avec plus qu'il ne souhaite probablement voir.

Je pense aussi que disposer d'un espace séparé pour les balises personnelles est bien, mais j'appellerais cette zone "Mes balises" au lieu de personnelle. Cela semble être une formulation plus compréhensible et acceptée.

2
Matt Lavoie