Petits biens immobiliers pour une longue liste de choix
Étant donné qu'il s'agit d'un produit institutionnel, il s'agit d'une application Web qui permet aux enseignants de gérer les élèves. La façon dont l'interface utilisateur a été conçue, il y a un pop-up qui permettra à un utilisateur d'ajouter des étudiants à partir d'une liste prédéfinie.
Mon objectif est de rendre aussi simple que possible:
- A. Recherchez facilement l'étudiant
- B. Autoriser une fonctionnalité d'élève à sélection multiple
- C. Voir les étudiants que vous avez sélectionnés
Existe-t-il une meilleure pratique pour avoir une fonctionnalité de sélection multiple dans une petite contrainte immobilière pour une liste éventuellement écrasante? Le flux doit être fluide et facile. Bien qu'il s'agisse d'un énorme composant de l'application Web, ce n'est qu'un moyen de gérer 1 partie du processus afin qu'il ne puisse pas s'agir d'un autre écran. Il s'agit d'une simple fenêtre contextuelle qui s'active lorsqu'un certain domaine du site est cliqué.
J'ai fourni une image ci-dessous qui représente l'interface utilisateur filaire de cette fonctionnalité.
Si vous avez vraiment un espace limité, je pense que vous êtes sur la bonne voie. Personnellement, je ne suis pas fan de l'approche à deux listes qui apparaît dans les réponses d'AndroidHustle et Louise. Je trouve que:
- Cela prend trop de place
- Cela prend trop d'interaction (sélectionnez d'abord les articles, puis cliquez sur un bouton)
- Il faut toujours un effort pour voir quel volet est quoi. Il y a eu récemment une question à ce sujet: dans quel ordre afficher les volets?
Le seul bon cas d'utilisation que je vois pour eux est le cas où vous devez également être en mesure de réorganiser la liste des éléments manuellement, par exemple pour configurer une barre d'outils. Pour une sélection simple où l'ordre n'est pas pertinent ou déjà implicite, ils me semblent exagérés.
Je pense qu'avec un petit ajout, votre solution est déjà assez bonne. Tout ce que vous avez à faire est de fournir des commentaires sur le nombre d'éléments que vous avez déjà sélectionnés et de simplifier le filtrage de la liste uniquement pour les éléments sélectionnés:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Dans cette conception, vous avez un retour constant sur la taille de votre sélection, vous pouvez sélectionner des éléments en un seul clic et vous pouvez revoir votre sélection en un seul clic (et en supprimer des éléments). Tout cela sans prendre beaucoup de place. Taper dans la barre de recherche devrait évidemment filtrer immédiatement la liste.
En prime, vous pouvez faire en sorte que si vous n'avez qu'un seul résultat et que vous appuyez sur Entrée, vous vérifiez ce résultat unique et sélectionnez le filtre créé. Cela permet une sélection rapide des éléments sans retirer vos mains du clavier.
Habituellement, pour sélectionner parmi une liste peut-être écrasante, je chercherais une sorte de liste double (parfois aussi appelée générateur de liste ou accumulateur). C'est un modèle d'interface utilisateur que vous pouvez voir assez souvent (Windows, par exemple, l'utilise pour vous permettre de personnaliser certaines barres d'outils). Il existe plusieurs sites Web pour décrire ce modèle (je ne trouve pas mes anciens liens pour le moment, mais ici est celui que je viens de trouver sur Google). Fondamentalement, cela fonctionne comme ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Il y a beaucoup de détails à ajuster à vos besoins: il peut y avoir ou non des filtres supplémentaires à la fois la source et la liste de sélection. Les listes pourraient être des tableaux ou des icônes ou n'importe quoi, vraiment. L'échange d'éléments peut se produire instantanément en cliquant sur l'entrée (ou comme dans ma maquette un bouton dédié), ou vous pouvez en marquer un ou plusieurs d'abord, puis les échanger (voir la réponse d'AndroidHustle). etc...
Concernant votre cas: Votre image représente à peu près le bit gauche du générateur de liste, donc en ce qui concerne votre tâche, il gère avec succès la sélection des éléments. Cependant, il ne fournit pas encore un moyen pratique de garder une trace de ce que vous avez déjà sélectionné. Si le filtre est effacé, vous ne pouvez analyser que la liste complète des éléments - certains vérifiés et d'autres non - pour savoir qui figure déjà dans la liste.
Le deuxième panneau dans une approche à double liste fait ce travail pour vous: il garde la trace de ce qui est sélectionné et garde ce choix visible et modifiable à tout moment. De plus, il répond très clairement à l'action de l'utilisateur en déplaçant des éléments, de sorte que chaque clic a des commentaires. Dans une approche avec des cases à cocher et des vues changeantes (par filtrage), certains utilisateurs pourraient ne pas savoir si la case à cocher validera leur choix pour qu'il dure après le changement de vue ou s'ils doivent appuyer sur un bouton supplémentaire pour valider. L'étiquette du bouton pour accepter toutes les modifications et quitter la boîte de dialogue ne doit pas être confondue avec quelque chose qui suggère d'enregistrer les modifications dans l'état d'affichage actuel ( tels que "OK" ou "Accepter").
Dans l'ensemble, comme vous avez mentionné une contrainte dans la zone d'écran, vous devez considérer le compromis: Évidemment, le générateur de liste prend plus de place. Dans ce cas, André (la réponse actuellement ci-dessus) a fourni une approche appropriée pour incorporer autant de fonctionnalités du second panneau (par exemple, rendre la sélection existante disponible et modifiable) sans avoir besoin d'espace supplémentaire. Vous pouvez également envisager d'autres façons d'obtenir cet effet: Si la liste sélectionnée ne devrait pas être longue, vous pouvez l'ajouter en dessous/au-dessus ou vous pouvez faire glisser la liste en cliquant sur un bouton Afficher/Développer. Alternativement, vous pouvez opter pour une approche de sélection avec des jetons , similaire à la sélection des destinataires des e-mails.
Rappelez-vous simplement l'ancien mantra: vous devez regarder comment l'utilisateur gère ce processus de sélection. Dans la langue de la plupart des descriptions de design-patter:
Examinez le modèle de liste double lorsque:
- ce que vous avez déjà sélectionné affecte ce que vous voulez sélectionner ensuite, vous devez donc comparer ce que vous avez déjà obtenu à vos options disponibles. (À mon avis, le critère tueur pour opter pour des listes doubles.)
- les utilisateurs doivent ajuster les éléments sélectionnés d'une certaine manière (les commander ou les grouper) à la volée
- les utilisateurs doivent fréquemment réviser leur choix d'articles et donc désélectionner les articles.
Optez pour un seul panneau (avec un mécanisme ajouté pour voir rapidement la liste sélectionnée) lorsque:
- il n'y a pas beaucoup d'espace
- ce qui est déjà sélectionné n'est pas important pour l'étape suivante, par ex. les utilisateurs savent à l'avance ce qu'ils veulent sélectionner
- la sélection n'a pas besoin d'être beaucoup révisée
Au total, vous devriez également envisager de a) ajouter une option d'annulation à votre suggestion pour sortir de la boîte de dialogue sans décocher manuellement toutes les options et b) clarifier ce que fait "revenir à tout voir" (revient-il à l'écran précédent ou efface-t-il le filtre?)
J'espère que cela t'aides. À la vôtre, Louise
Étant donné que vous n'avez pas clairement indiqué le petit espace avec lequel vous devez travailler, ma suggestion est peut-être trop grande. Cependant, en travaillant avec les résultats de la recherche tout en gardant une trace de l'ensemble de sélection, il serait bon de les diviser entre deux listes, ce qui permet à l'utilisateur d'ajouter et de soustraire des étudiants sans perdre le focus de la tâche.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Dans cette suggestion, l'utilisateur peut entrer librement un nouveau filtre pour rechercher après une sélection et également soustraire des étudiants lors d'une nouvelle recherche.