Comment mettre en surbrillance l'option sélectionnée lorsqu'il n'y a que 2 éléments
Disons qu'il y a deux boutons avec des icônes, par exemple un bouton typique "Grid View" et "List View", et je ne veux pas utiliser de biseaux pour créer un effet "poussé". Disons que je le fais dans un design simple, donc ce ne sont que de simples icônes avec des arrière-plans colorés pour s'adapter au style général:
Existe-t-il un bon moyen de différencier lequel est sélectionné?
Bien sûr, dans cette situation, l'utilisateur pourrait simplement le savoir par le contenu affiché, mais ce n'est qu'un exemple, permet de faire semblant de ne pas savoir lequel est sélectionné par le contenu.
Même si je grise celui qui n'est pas sélectionné, ou si je donne une couleur plus claire/différente qui fonctionnerait dans un groupe de boutons plus grand en identifiant le bouton qui est différent du reste, mais cela ne fonctionnera pas quand il n'y en a que 2.
Selon vous, quelle serait la solution la plus élégante?
Comme vous le signalez correctement, c'est un problème typique que vous rencontrez lorsque vous avez un ensemble de seulement deux éléments: il n'est jamais très clair quel élément est sélectionné. Il semble difficile de mettre en évidence ou de souligner autrement l'élément actuellement sélectionné. D'après mon expérience, découlant principalement de la recherche d'utilisateurs que nous avons effectuée, ce qui fonctionne pour un utilisateur ne fonctionne pas pour les autres. Vous ne pouvez pas imaginer combien de discussions j'ai eues et combien de conseils j'ai reçus sur la façon de clarifier cela. Même l'utilisation d'une couleur de surbrillance (par exemple le bleu) ne fonctionnait pas toujours.
En fin de compte, ce qui a le mieux fonctionné pour nous a été de connecter les boutons avec la vue qu'ils basculent et d'indiquer la vue actuellement sélectionnée avec une flèche. C'est la solution que nous avons trouvée qui a mis fin de manière fiable à toutes les discussions.
S'il y a deux options, vous pouvez également envisager d'utiliser un commutateur/bascule au lieu d'une flèche.
Pris cela de Dribbble:
Vous souhaitez indiquer qu'un bouton est enfoncé, un paramètre est actif. Avec quoi devez-vous travailler? Couleur, placement, éléments visuels supplémentaires. Et la taille.
Je pense personnellement qu'Andreas Weder suggère une bonne solution. Mais si vous pensez qu'un motif en forme d'onglet ne rentrerait pas dans votre conception, j'ai une autre suggestion. En plus d'indiquer avec la couleur, vous pouvez également indiquer avec taille:
Vous pouvez laisser une icône/un bouton avoir un état enfoncé sans le biseauter. Rendez simplement l'état actif légèrement plus grand et dans une couleur plus vibrante, et l'état inactif légèrement plus petit et sombre. Il suivrait essentiellement le même comportement des boutons qui sont indentés sans lumière lorsqu'ils sont inactifs et bombés et s'éclairent lorsqu'ils sont actifs.
La
Faites une marque en dehors des limites des boutons. De cette façon, il est clair que la surbrillance ne fait pas partie du bouton lui-même, mais d'un état de l'interface.
Cet exemple manque de prix, mais je pense qu'il montre très clairement lequel est sélectionné.
Devez-vous montrer celui sélectionné?
Une solution pourrait être de ne pas afficher l'icône de la mise en page actuelle et de simplement montrer l'icône de mise en page alternative. La mise en page elle-même indique à l'utilisateur la mise en page qu'il a sélectionnée et vous auriez moins d'artefacts (encombrement) sur la page.