web-dev-qa-db-fra.com

Séparation des actions sur les éléments des actions générales dans une barre d'outils

Réorganisant une de nos barres d'outils existantes, je voudrais séparer les types de boutons d'action.

  1. Actions générales qui s'appliquent au système, par ex. Paramètres ,
  2. Énumérez les actions qui s'appliquent à la liste entière, par ex. Nouveau ou Imprimer ,
  3. Actions d'élément qui s'appliquent aux éléments sélectionnés, par exemple Supprimer et Imprimer encore.

Lorsqu'aucun élément n'est sélectionné, certaines icônes sont activées, d'autres désactivées.

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Lorsqu'une ligne est sélectionnée, les boutons d'action qui s'appliquent aux éléments sélectionnés sont allumés.

mockup

télécharger la source bmml

Notez que le bouton d'impression qui imprimait auparavant la liste imprime maintenant cet élément sélectionné.

Le problème est que les utilisateurs ont du mal à apprendre comment le système fonctionne et ce que les fonctionnalités peuvent faire pour eux. Je crois que c'est parti parce que le flux de travail n'est pas intuitif, avec des actions qui s'appliquent à différentes choses sont mélangées les unes aux autres.

La question: Est-ce une bonne idée de séparer graphiquement ces deux types d'actions, autrement qu'en activant/désactivant les boutons? Et dans ce cas, de quelle manière? Je pense que trois barres d'outils prendraient trop de place. Nous avons déjà un menu de clic droit sur les lignes d'élément pour les actions applicables à l'élément, mais il ne suffit pas de les afficher uniquement, car un menu de clic droit peut être difficile à trouver.

1
JOG

Idéalement, l'idée que le même bouton Imprimer sélectionnera toute la liste puis la sélection ne sera pas écrite. Rien n'indique que le bouton peut effectuer 2 tâches une fois sans sélection et une avec sélection.

J'irais avec un menu contextuel qui est visible en ligne pendant que nous survolons l'élément et il est plus logique que les gens sachent maintenant ce qu'ils impriment. Quant à la fonction Imprimer tout, j'écrirais un texte à côté de l'icône "Imprimer tout" qui aura plus de sens pour les utilisateurs.

Si nous avons besoin d'imprimer plusieurs sélections, je changerai le texte en Imprimer la sélection une fois que nous aurons sélectionné plus d'un élément. (Je ne sais pas si cela est pris en charge dans votre application)

Quant aux autres éléments, j'affiche toujours l'option qui est active et je la masque lorsqu'elle est inactive. Nous avons vu dans certaines de nos études sur les utilisateurs que lorsqu'un utilisateur voit un bouton inactif, il s'emploie à trouver comment activer le bouton et sa concentration est brisée.

Pour le placement des boutons, je ferai tous les boutons qui font partie de la liste à gauche et celui qui est général (à régler dans votre cas) à droite. Avec les boutons à gauche, je pourrais faire une petite différence avec les couleurs si je veux séparer NOUVEAU avec d'autres icônes. Donc pour moi, le nouveau peut être un vert doux tandis que le reste peut être un gris général (cela dépend de votre image de marque).

1
ajayashish

La meilleure solution à votre problème consiste à déplacer les actions d'élément sur les éléments réels. C'est ce que Google et de nombreux autres produits numériques ont commencé à faire. Google' Inbox app on Desktop takes advantage of on-card action items.

C'est certainement une bonne idée de grouper les boutons d'action d'élément avec leur élément. Il y a beaucoup de raisons pour lesquelles cela a commencé à se produire et a le plus de sens, y compris la loi de Fitt et principes de groupement Gestalt.

0
Josiah Tullis