web-dev-qa-db-fra.com

Paramètres de plusieurs éléments

Existe-t-il des directives de conception connues permettant aux utilisateurs d'appliquer les mêmes paramètres à plusieurs éléments en même temps?

De plus, comment puis-je préciser quels éléments ont les mêmes paramètres?

Comme exemple rapide; J'ai une liste d'éléments où chaque élément peut avoir un ensemble de paramètres indépendamment défini pour tous les autres éléments. Mais les utilisateurs veulent généralement configurer plusieurs éléments pour avoir les mêmes paramètres, puis revenir en arrière et choisir un seul des éléments et configurer avec une légère variation.

J'ai deux conceptions en tête:

  1. En affichant la liste des éléments et lorsque l'utilisateur sélectionne l'élément, un panneau à droite de la liste affiche les paramètres de cet élément. Mais cela ne fonctionne pas tout à fait pour le scénario à éléments multiples. Je pourrais autoriser une case à cocher dans la liste pour permettre la sélection de plusieurs éléments, puis le panneau des paramètres combine tous les paramètres des éléments à la fois. Je ne pense pas que ce soit clair quels éléments ont les mêmes paramètres et quand 2 éléments sélectionnés ont des paramètres différents, que devrait afficher le panneau.

  2. Utilisez un contrôle accordéon pour permettre le regroupement logique des éléments et des paramètres. Mais cela semble également un peu maladroit car cela signifie que l'utilisateur devrait d'abord grouper les éléments avant de leur permettre de définir les paramètres. Cela rend également le flux de travail compliqué si l'utilisateur souhaite dévier l'un des paramètres des éléments (il doit supprimer l'élément du groupe et l'ajouter à son propre groupe). Je pense que cela devient également un peu lourd si chaque élément a son propre cadre unique.

Tout conseil sur cette conception serait très apprécié.

PS. cela sera mis en œuvre sur une application Web en ligne.

7
Chris Moutray

Il serait bon d'avoir une meilleure idée des types d'éléments et de paramètres que vous devez appliquer, mais une stratégie/modèle qui vient à l'esprit est la grille de données classique qui est souvent utilisée pour les paramètres d'autorisation. Donc, ce que vous auriez, c'est la liste des utilisateurs sur le côté droit, et une liste des autorisations en haut, avec chaque cellule de la colonne implémentée comme une case à cocher. Ce que vous pouvez ensuite faire est de créer une colonne ALL pour les autorisations afin que le fait de cocher cet en-tête de colonne entraîne la vérification de toutes les autorisations pour un utilisateur ou une autorisation particulier, puis si vous souhaitez décocher les autorisations individuelles, vous pouvez également le faire. C'est un peu délicat, mais néanmoins une méthode éprouvée.

3
Michael Lai

Trouver de bons modèles d'interface utilisateur pour des contrôles d'interface complexes est probablement l'un de mes trois principaux problèmes pour un travail UX. La réponse que vous n'aimerez pas est que vous devriez probablement trouver 3 conceptions distinctes, puis essayer de faire des tests d'utilisabilité du couloir pour voir lequel est le meilleur/le plus facile. Vous pouvez le faire assez rapidement avec le prototypage papier ou avec un simple outil de filaire. Au-delà de cela, je recommande de regarder Web Form Design by Luke Wroblewski . Il couvre le remplissage d'informations sur des formulaires, qui sont liés, mais pas tout à fait ce que vous recherchez. Les meilleures pratiques sont couvertes et je reviens encore et encore à ce livre.

2
Laurian Vega

Vous pouvez essayer le modèle de générateur de liste, comme vu sur cette page (recherchez List Builder). Affichez les paramètres de la liste adjacente à l'interface utilisateur du générateur de liste (ou utilisez un style assistant "suivant"). Il est vrai que ce modèle est un peu moins courant dans les applications Web que dans les applications de bureau (si ce n'est pour aucune autre raison que c'est une opération complexe moins couramment effectuée sur le Web), mais la bibliothèque jQuery UI fournit une [variante intéressante] ( http://wiki.jqueryui.com/w/page/12137993/ListBuilder ) que vous voudrez peut-être essayer ou que vous pourriez lancer le vôtre.

1
Benjamin Malley

J'aime votre première approche et suggérerais d'aller plus loin. Vous pouvez essayer d'inclure la case à cocher comme vous l'avez dit pour permettre de sélectionner plusieurs éléments à la fois, à quel point il s'agit de la façon dont vous affichez un panneau de paramètres pour plusieurs éléments. Les champs de texte, par exemple, qui ont des réponses différentes pour les différents éléments peuvent être supprimés ou remplacés par [plusieurs réponses] , en attendant d'être tapés. Les cases à cocher ont également un état ' indéterminé ' que vous pouvez incorporer, etc.

Mais vous devez donner à l'utilisateur la possibilité de modifier facilement les paramètres de plusieurs éléments comme ils le feraient pour un seul, le point important ici est de s'assurer qu'ils savent ce qu'ils font. Il est facile de voir les conséquences de votre action lorsque vous modifiez simplement un seul élément, mais avec plusieurs éléments sélectionnés, certaines étapes supplémentaires incluent:

  1. Avoir un message d'avertissement au-dessus des paramètres tels que " [~ # ~] x [~ # ~] éléments sélectionnés"
  2. Avoir une boîte de confirmation lors de l'application des paramètres, indiquant à l'utilisateur que les paramètres individuels des éléments [~ # ~] x [~ # ~] seront remplacés .
  3. De plus, pour faire comprendre que la modification d'une seule action à la fois est la façon préférée et supposée de faire les choses (si tel est le cas), faites en sorte que cliquer n'importe où sur l'élément, par défaut, ne soit appliqué qu'à cet élément. choisi. Pour que les utilisateurs sélectionnent plusieurs éléments, ils devront spécifiquement cliquer sur la case à cocher (car lorsque vous y réfléchissez, l'utilisateur suppose qu'il ne souhaite modifier qu'un seul élément afin de continuer à cliquer directement dessus et s'il souhaite le modifier). plusieurs éléments, ils iront directement à la case à cocher parce que c'est pour ça.

Toutes les choses assez mineures à première vue, mais ce sont les petits éléments qui ajoutent à l'intuition de la fonctionnalité, et imo cela donne à tout le monde ce qu'il veut facilement.

1
Jason Tavarez