Préciser quels éléments d'une longue liste sont sélectionnés
J'essaie de concevoir une partie d'une interface Web qui permet aux utilisateurs de marquer des éléments et d'afficher tous les éléments avec une balise ou un ensemble de balises dessus - pensez à gmail, si gmail vous a permis de sélectionner facilement plusieurs balises pour afficher tous les messages avec tous de ces balises. Quelle est la meilleure façon de montrer à l'utilisateur quel ensemble de balises il consulte actuellement?
La mise en surbrillance simple fonctionne pour une balise, mais si la liste des balises est plus longue que l'écran, ils ne pourront pas tous les voir en même temps, ce qui ne permettra pas de savoir clairement quelles balises l'utilisateur a sélectionnées. Ajoutant à ce problème, j'ai un peu d'espace pour travailler - l'ensemble de l'interface de balise et d'élément est d'environ 300 x 500 pixels, donc afficher les balises sélectionnées dans une longue liste horizontale n'est pas une option.
Je pensais créer une liste secondaire au-dessus de la liste des balises avec les balises sélectionnées (un peu comme celles-ci listes déroulantes sur lesquelles les États-Unis et d'autres pays ont mis l'accent ), mais je me demande si il y a une meilleure alternative.
Utilisez le modèle de navigation à facettes . Amazon.com fait un excellent travail avec elle:
(capture d'écran de ces résultats de recherche pour Nintendo DS - notez que vous pouvez garder le vôtre plus court si vous avez une contrainte verticale)
Quelques points importants:
- Communication très claire sur ce que l'élément actuellement sélectionné dans chaque facette est (dans ce cas, noir gras vs bleu pour les liens)
- Grande lisibilité en ne faisant pas de chaque élément un lien hypertexte, même s'ils sont tous des liens hypertexte - dans ce cas, il est plus utile de prioriser la lisibilité sur le motif de soulignement du lien hypertexte
- Chaque facette affiche le nombre de résultats disponibles si vous deviez cliquer dessus. Un peu compliqué à mettre en œuvre parfois, en fonction de votre moteur de recherche.
- Les bons contrôles en fonction du type de facette avec lequel vous traitez, ainsi qu'une excellente rédaction et la bonne formulation ("30 derniers jours" pour les dates, car vous ne vous souciez pas de dates spécifiques dans ce cas, etc.)
- La possibilité de monter d'un niveau avec chaque facette, "annulant" essentiellement votre sélection dans cette facette. Notez l'utilisation du
<par opposition à une croix rouge(x)comme beaucoup d'autres sites. - Combinez cela avec le modèle de navigation du fil d'Ariane comme Amazon l'a fait pour une dimension supplémentaire d'utilité au cas où les gens numériseraient de haut en bas et ne regarderaient pas dans la colonne de gauche/droite
Ne vous inquiétez pas trop de ne pas pouvoir voir chaque chose sélectionnée si beaucoup sont sélectionnés - c'est un piège de navigation à facettes commun à tomber. Les utilisateurs verront qu'il y a plus d'options sélectionnées plus bas sur la page s'ils ont effectué de nombreuses sélections (imaginez sélectionner une de chaque facette dans l'exemple Amazon). Pour compenser un peu les choses, vous pouvez regrouper les facettes sélectionnées en haut comme le suggère @onnodb, bien que je ne les masque pas derrière un clic (comme dans un contrôle select).
Je dirais qu'il est parfaitement logique de créer cette `` liste secondaire '' de balises sélectionnées en haut de la liste, comme ceci: (excellente idée, btw)
Selected tag 1 (X)
Selected tag 2 (X)
Selected tag 3 (X)
-------------------
Tag 4
Tag 5
Tag 6
Donnez aux tags sélectionnés une couleur d'arrière-plan différente, ajoutez un bouton "(X)" pour les supprimer, et je dirais que vous avez une interface utilisateur très utilisable pour cela.
Étant donné que vous disposez d'un nombre limité de biens immobiliers avec lesquels travailler, vous pouvez mettre en œuvre les éléments suivants. Placez la liste de balises dans une liste déroulante et disposez d'un bouton plus qui ajoute une autre ligne avec une liste déroulante de balises. De cette façon, les seules balises affichées sont celles que l'utilisateur a sélectionnées.
Je sais que c'est une question assez ancienne, mais elle reste toujours valable pour une application actuelle à mon avis.
Pour la réponse, je me suis inspiré de la barre de défilement verticale de Visual Studio:
- la hauteur du curseur correspond à la taille de la zone à l'écran par rapport à la longueur totale du contenu
- une fine ligne bleue horizontale indique où le curseur est actuellement placé
- des barres jaunes foncées marquent les lignes où le terme de recherche a été trouvé
Pour la question OP - si vous avez une liste d'éléments qui dépasse la capacité de l'écran, vous devez utiliser le curseur. Vous pouvez utiliser le curseur pour montrer où se trouvent les éléments sélectionnés dans la liste.
Juste au sommet de ma tête ...
Option 1: modifiez l'attribut 'title' pour afficher les éléments sélectionnés en survol. Option 2: utilisez jquery pour ajouter un événement de survol pour la liste qui traverse l'élément et répertorie les éléments sélectionnés.
Eh bien, il existe plusieurs façons de le faire:
1) Comme vous l'avez mentionné, vous pouvez mettre en surbrillance les balises sélectionnées, tout en conservant leur ordre dans la liste. Pour surmonter le problème des utilisateurs qui ne savent pas que certaines balises sélectionnées ne s'affichent pas sur la page, vous pouvez faire quelque chose pour les porter à leur attention - quelque chose comme des flèches clignotantes au bas de la section des balises de la page pour les informer qu'il y a quelque chose important s'ils défilent vers le bas
=Tag1= Tag2 Tag3 vvvv -----------------------Screen End Tag4 =Tag5=
Les balises en surbrillance == mark et le vv sont les flèches clignotantes
2) Vous pouvez également créer cette liste supplémentaire en haut, mais supprimez les balises de l'original, de sorte que vous ayez toujours une hauteur cohérente pour la section des balises
3) Vous pouvez faire apparaître les balises sélectionnées sous forme de liste verticale sous l'en-tête des résultats de la recherche.
Tag Section | Search Results: | xTags1 xTag2 xTag3 | | [Search Results Go Here]
Notez les petits x à côté de chaque nom de tag; cela permettra à l'utilisateur de supprimer rapidement les balises et les résultats devraient changer en conséquence.
Je préférerais les options 2 ou 3. 3 Cela pourrait être mieux, car les utilisateurs pourraient être un peu surpris que la liste des balises change d'ordre alors qu'ils continuent de sélectionner des balises.