Comment afficher les boutons d'options d'affichage dans une barre d'outils supérieure sur mobile et sur ordinateur?
J'ai une webapp avec une liste d'articles.
Les éléments peuvent être affichés en mode grille (tuiles) ou dans une liste verticale.
En haut, j'ai une barre d'outils qui contient deux icônes que l'utilisateur peut basculer entre la vue de la grille et la liste (seulement des icônes sans étiquette)
En mobile, cela prend trop de place dans la barre supérieure et nous devons réduire l'espace occupé par ces boutons à bascule à 2 états.
Je pensais peut-être avoir un bouton qui bascule entre les deux états, mais j'ai trouvé ceci: n bouton à bascule devrait-il afficher son état actuel ou l'état dans lequel il va changer?
Quelle est la meilleure pratique pour ce scénario s'il y en a un?
Addition:
En outre, est-ce une bonne pratique de masquer ces boutons dans le mobile afin que l'utilisateur doive cliquer sur un bouton de menu pour afficher ces options qui sur le bureau sont toujours visibles?
Quels sont les articles? Réfléchissez très attentivement si les deux vues ajoutent réellement de la valeur et aident l'utilisateur à obtenir une vue d'ensemble, à choisir une action ou à progresser d'une manière quelconque. D'après mon expérience, il y a rarement plus d'un type de vue fournissant la valeur optimale nécessaire à l'utilisateur pour se rendre où qu'il aille.
Je ne connais pas de meilleure pratique dans ce cas. Un bouton peut affiche les deux états: un petit graphique représentant la vue actuelle et une flèche vers un graphique plus grand représentant la vue cible.
Une alternative pourrait être d'utiliser le balayage pour changer la vue, en évitant complètement un bouton.
Personnellement, je préfère un bouton pour communiquer le plus clairement à quoi il mène, pas l'inverse. Les utilisateurs de votre application devraient simplement être capables de comprendre ce que fait le bouton - ce qui change la vue.
Si vous manquez d'espace sur mobile, vous pouvez certainement afficher une seule icône qui reflète l'état actuel des données. Ici, la clé serait la conception de l'icône. L'icône doit être explicite. Sinon, la manière souhaitée consiste à afficher deux icônes dont l'une est affichée à l'état actif.