Comment résoudre l'ambiguïté de l'état sélectionné dans un contrôle segmenté avec seulement deux segments?
Je travaille sur une application Web qui a deux grilles de données similaires dans une page. L'utilisateur doit pouvoir basculer entre ces deux grilles de données sur la même page.
J'ai utilisé des boutons segmentés pour naviguer entre ces deux grilles. Mais je sens que cette composante devient visuellement une bascule, et l'état actuel de la bascule devient ambigu.
Pour l'instant, je compte uniquement sur la couleur/la teinte pour afficher l'état sélectionné, mais je pense que l'on ne sait pas quel état est sélectionné.
Existe-t-il une meilleure approche pour résoudre ce problème?
Boutons segmentés entourés de rouge
Il semble que vous puissiez avoir deux problèmes: quel segment est sélectionné et sur quoi l'utilisateur peut-il effectuer une recherche, en particulier si l'utilisateur vient avec une intention immédiate de rechercher.
Dans votre maquette, vous avez deux ensembles de données différents, mais vous utilisez un moyen de placement de contrôle à droite des données, donc pour voir d'un coup d'œil qui est sélectionné, mes yeux doivent regarder à droite.
Le champ de recherche à gauche est bien placé pour rechercher la grille, mais il y a vraiment deux champs de recherche différents dans ce cas.
Un compromis: espace vertical pour la clarté, tabulations pour la délimitation.
Les contrôles segmentés sont souvent utilisés au-dessus d'une table comme filtre, pour ne pas délimiter entre deux ensembles de données distincts. Une option consiste à utiliser des onglets.
Avec l'un ou l'autre contrôle, vous pouvez les déplacer vers la gauche, afin qu'ils soient plus visibles si vous numérisez la page verticalement, et l'état sélectionné plus évident.
En plaçant la recherche directement en dessous, vous pouvez avoir une communication plus directe sur le jeu de données sélectionné et les capacités de recherche.
Même si vous vous en tenez à un contrôle segmenté, vous voudrez peut-être envisager le placement afin qu'il soit facile à trouver sans regarder complètement à droite.
Vous pouvez essayer de supprimer la couleur d'arrière-plan du bouton pour indiquer l'état inactif. Avoir de la couleur sur les deux états est source de confusion car ils se distinguent tous les deux également. Pour améliorer davantage, utilisez une police de caractères en gras pour l'état actif.
C'est vraiment un défi avec les boutons à bascule. Nous avons dû les utiliser dans l'un de nos projets et nous avons supposé qu'indiquer l'état actif en changeant l'arrière-plan en couleur primaire serait suffisant.
Cependant, les entretiens avec les utilisateurs nous ont montré que nous avions tort. Chaque fois que nous avions une collection de trois boutons à bascule, l'utilisateur ne semblait pas confus. Lorsqu'il s'agit de deux options seulement, les utilisateurs se demandent laquelle est la plus active.
Nous avons amélioré le composant en ajoutant des indices visuels supplémentaires pour mettre l'accent sur l'état actif.
- changé le poids de la police en gras
- ajouté une bordure contrastante
- changé la couleur de la bordure du bouton non actif en plus clair
- changé la couleur de l'étiquette du bouton non actif en plus clair
