Quand combiner des combobox?
Disons que mon interface graphique a deux champs à configurer: entrée et sortie . Les deux champs sont implémentés avec des combobox qui peuvent avoir les valeurs suivantes:
- Valeurs d'entrée: A, B, C, D, E, F
- Valeurs de sortie: 1, 2, 3, 4
Il arrive que toutes les valeurs d'entrée ne soient pas compatibles avec toutes les valeurs de sortie. Disons qu'il n'est possible d'avoir que les combinaisons suivantes:
- Combinaisons: A1, A2, B1, B2, C3, C4, D4, E4, F4
Ainsi, chaque fois qu'un utilisateur choisit une valeur dans la zone de liste déroulante d'entrée, la zone de liste déroulante de sortie change en affichant uniquement les valeurs de sortie compatibles. Selon Nielsen , cela devrait être évité.
Menus interactifs, dans lesquels les options d'un menu changent lorsque les utilisateurs sélectionnent quelque chose dans un autre menu sur la même page. Les utilisateurs sont très confus lorsque les options vont et viennent, et il est souvent difficile de rendre visible l'option souhaitée lorsqu'elle dépend d'une sélection dans un widget différent.
Ma question est: quelle est la meilleure façon de gérer cela? Est-ce une bonne pratique de combiner ces deux combobox en une seule (comme dans l'image ci-dessous)? Quels sont les aspects à prendre en compte pour décider de combiner des combobox ou de les diviser? Y a-t-il une meilleure approche pour cela?
J'ai également vu qu'Adobe a une solution intéressante pour cela: http://goo.gl/lRqet
Notez qu'il s'agit d'une interface pour une application Web à afficher à la fois sur le bureau et sur les tablettes.
Listes longues ou lorsque les options non disponibles n'ont pas d'importance
Lorsque vous avez de longues listes, ou lorsque les options non disponibles importent peu, vous pouvez simplement les laisser de côté.
La réservation de vols aériens en est un exemple. Si je choisis un point de départ, je me soucie seulement de mes destinations possibles, et c'est donc bien mieux qu'une liste de toutes les destinations possibles avec tout sauf deux options grisées.
Si vous montriez une liste complète, cela ressemblerait à ceci:
Listes restreintes ou lorsque les options non disponibles sont importantes
Dans les situations où les autres options sont importantes (c'est-à-dire où il est important de savoir que vous ne pouvez pas les sélectionner) ou si la liste est très petite, il est préférable de désactiver simplement les options qui ne sont pas disponibles.
Vous pouvez voir des exemples de cela dans les menus d'options de la plupart des applications.
Grisez les options invalides/non disponibles dans le champ de sortie.
Il est similaire aux menus contextuels auxquels nous sommes habitués. Assurez-vous simplement que l'utilisateur est au courant de la relation entre les deux zones de liste déroulante.
Dans la maquette, C est sélectionné pour l'entrée et en conséquence, 1 et 4 sont désactivés en sortie.
Lorsque vous grisez les options, elles sont toujours visibles, mais l'utilisateur est informé que, dans l'état actuel (de la sélection d'entrée), ces options ne sont pas disponibles.
C'est une pratique standard pour les menus contextuels dans tous les logiciels. Voici une capture d'écran d'un menu "Objet" de l'illustrateur avec la plupart des options grisées car il n'y a aucun objet sur lequel les actions peuvent être effectuées.
Il n'y a pas de "solution unique pour tous" dans ce cas (comme il n'y a probablement pas de solution universelle pour de nombreux autres problèmes dans la conception UX). Mon conseil n'est jamais de combiner des combobox - c'est désordonné et trompeur.
Vous devez penser à ce que vous voulez que votre utilisateur réalise. Essayez ensuite de réfléchir à ce que vous essayez de réaliser.
Permet de parler de vrais exemples:
Jetez un œil à Apple Boutique en ligne. Vous avez une possibilité infinie de différentes combinaisons de produits (disque dur, RAM, matériel, logiciel, etc.). Au lieu de choisir parmi un certain nombre de combobox qui sont interdépendantes , l'utilisateur est guidé étape par étape à travers des écrans où il peut créer le produit qu'il souhaite (en combinant des options) et quand cela compte, il reçoit une liste de boutons radio de possibilités de finition telles que la quantité de RAM de Taille du disque dur.
(Ici, j'ai déjà sélectionné mon type de produit (ex. IMac, Macbook Air, Macbook Pro, Pro avec rétine, ..), c'est la configuration de base (type de CPU et taille de base du disque dur) et je termine ma commande)
Comme exemple suivant, parlons de la modification du profil sur un site. Nous souhaitons que notre utilisateur remplisse un formulaire contenant un pays de résidence et un sexe. Vous savez que votre site est uniquement disponible aux États-Unis et au Canada. Ainsi, au lieu de créer deux zones de liste déroulante interdépendantes, vous pouvez tout ranger dans une seule (dans ce cas, il sera plus facile pour l'utilisateur de remplir une zone de liste déroulante combinée à la place si deux zones interdépendantes):
Ce n'est pas une solution miracle non plus - une fois que votre système évoluera et vous permettra d'étendre votre marché à 100 autres pays, cette solution sera inutile (vous vous retrouverez avec une combobox de 200 articles qui est un gâchis).
Regardons maintenant la liste avec une énorme quantité de différentes possibilités bien connues (le fait qu'elles soient bien connues est important). Disons que vous avez une énorme liste de pays, puis vous avez une énorme liste de villes et ensuite vous avez une énorme liste d'options d'hôtels dans chacune dépend de la sélection précédente. Les gars de ostrovok.ru ont résolu ce problème en combinant les trois listes en une seule et même plate:
Vous pouvez commencer par taper la première lettre d'un pays, d'une ville ou d'un hôtel et le système apportera toutes les combinaisons possibles. Cette solution est un peu inutile si vous avez de grandes listes d'articles qui ne sont pas connus de l'utilisateur (par exemple, votre utilisateur sélectionne dans une liste de pièces de rechange du moteur où les pièces sont nommées avec un numéro de série comme AJ-789-HG, AJ- 790-HG, ... - dans ce cas, vous devrez introduire un moyen de distinguer les éléments les uns des autres).
Si vous avez deux listes, la première est énorme et la seconde ne contient que peu d'options, vous pouvez représenter la première comme une zone de liste déroulante et la seconde comme un ensemble de boutons, désactivant ceux qui sont inactifs pour la sélection actuelle. Disons que vous disposez d'un logiciel de transcodage dans lequel vous avez choisi un codec et une résolution; vos listes pourraient ressembler à ceci:
Comme vous pouvez le voir, il existe un nombre illimité de possibilités pour résoudre le problème auquel vous êtes confronté (et comme vous pouvez le voir il n'y a pas besoin d'une solution aussi brutale que la combinaison de combobox); les quelques exemples que j'ai cités ici ne sont même pas la pointe de l'iceberg. Répondre à quelques questions simples comme le problème que vous essayez de résoudre et le problème que votre utilisateur essaie de résoudre vous aidera à trouver le bon chemin.
Vous pouvez désactiver l'une des zones de liste déroulante jusqu'à ce qu'une sélection soit effectuée et vous pouvez remplir la deuxième zone de liste déroulante.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
La combinaison de zones de liste déroulante est niquement une bonne solution s'il existe un ensemble d'éléments statique très limité. Supposons que vous disposiez de trois options: Imprimer -> Vers fichier, Imprimer -> Vers imprimante, Ne pas imprimer. Deux comboboxes (impression/non, fichier/imprimante) sont un peu un gaspillage là-bas. Mais s'il existe un grand nombre d'options possibles, une seule zone de liste déroulante devient en grande partie délicate car vous devez répertorier toutes les combinaisons possibles (N2 au lieu de N), moins toutes les combinaisons invalides. Cela s'additionne rapidement.
J'ai récemment mis au point une version "utilisateur avancé" de ce type d'interface; un peu plus laid mais plus puissant avec un large éventail d'options:
La sélection d'un élément dans la première colonne réduit les options des deuxième et troisième colonnes:
Nous avons opté pour cette solution de liste de contrôle par rapport aux zones de liste déroulante car:
- L'utilisateur peut rapidement sélectionner des éléments individuels dans chaque colonne
- Plusieurs sélections par colonne sont possibles (important dans notre cas d'utilisation, peut-être pas le vôtre)
- Il y a BEAUCOUP d'options sous la colonne Ledge et la liste de contrôle nous permet d'affiner visuellement les options lorsque l'utilisateur choisit des éléments dans les colonnes de gauche. Les éléments non valides sont en fait supprimés de la liste Ledge and Products car il y en a tellement même les grisonner n'était pas suffisant. Les ID de localisation sont grisés car il n'y en a que quelques-uns et ils sont le "niveau supérieur" du processus de sélection.
Le problème avec les zones de liste déroulante est que, à moins que votre utilisateur ne sache déjà exactement quelles combinaisons sont valides, il peut ne pas savoir comment la zone 2 est remplie en fonction de la zone 1. La solution des cases à cocher résout ce problème en grisant ou en supprimant visuellement options invalides, ce qui est plus utile dans les tâches où les utilisateurs ne pas savent quelles combinaisons sont valides, comme une tâche de recherche.
Si possible, la sélection de l'entrée/sortie devrait désactiver les options invalides pour la sortie/entrée. Vous pouvez charger de manière asynchrone les éléments de formulaire de cette façon pour réduire les temps de chargement; pas utile dans l'exemple, mais imaginez si vous deviez charger un deuxième formulaire entier basé sur la première entrée; plus vos options possibles sont grandes, plus une option asynchrone peut avoir un impact.
si c'est une forme, mon avis serait d'afficher des valeurs compatibles dans la liste déroulante 2nd/output .. imaginez s'il y a 20-25 valeurs dans la 1ère liste déroulante et 40-45 valeurs dans la liste déroulante 2nd/sortie ..
vous pouvez voir un bon exemple ici: http://www.Acer.co.in/ac/en/IN/content/drivers , vous pouvez également envisager cette option.