De bonnes alternatives pour remplacer plusieurs boîtes de dialogue modales imbriquées?
Ayant une application de bureau Windows mature et à succès, nous nous concentrons sur l'amélioration de l'expérience utilisateur pour la prochaine version.
Une chose que j'essaie est de se débarrasser de plusieurs dialogues modaux imbriqués comme par exemple:
La raison d'avoir ces multiples niveaux de dialogues est de montrer à l'utilisateur le moins d'options possible pour rendre l'application aussi simple que possible à utiliser.
Comme inconvénient, pour les utilisateurs expérimentés, c'est généralement beaucoup trop de "clics" jusqu'à ce qu'ils soient en mesure d'obtenir un résultat.
Donc ma question est:
Existe-t-il une alternative de conception possible à ces boîtes de dialogue modales imbriquées afin que:
- Les utilisateurs novices ont toujours une interface utilisateur facile à utiliser?
- Les utilisateurs avancés peuvent effectuer des tâches sans cliquer sur les différentes boîtes de dialogue imbriquées?
(L'application est une application Windows Forms .NET développée avec Visual Studio .NET 2010 et DevExpress, si cela est important)
Une solution possible consiste à afficher progressivement plus de détails à mesure que les utilisateurs sélectionnent des éléments et des sous-éléments. L'avantage est que l'interface utilisateur initiale est toujours propre, tout en éliminant les panneaux et boutons supplémentaires.
Vous pouvez toujours conserver votre page initiale avec le bouton "configurer", même si j'essayerais de l'éliminer, si possible.
Vue initiale
L'utilisateur sélectionne un élément
L'utilisateur sélectionne un sous-élément
J'ai utilisé avec succès la stratégie ci-dessus sur une application Windows très utilisée.
Dans ce cas, afficher le moins d'options possible déroute l'utilisateur. Essentiellement, vous avez créé une poupée russe d'emboîtement parce que l'utilisateur ne sait pas combien de couches supplémentaires de "modification" seront là.
Si je comprends bien de vos wireframes, le bouton Edit au niveau 1 ne fait rien de plus que de permettre de renommer les éléments de ce niveau et de voir les éléments du niveau 2 qui leur sont associés. Cependant, au niveau 2, le bouton Edit permet de renommer des éléments à ce niveau et de vérifier certaines options. Ainsi, vous avez 1 bouton qui fait appel à différentes interactions.
Si vous souhaitez simplement réduire le nombre de niveaux de boîtes de dialogue modales et que vous n'avez vraiment qu'une seule case à cocher pour les sous-éléments, une disposition similaire à celle ci-dessous pourrait fonctionner.
Cependant, je n'ai pas trop chaud à ce sujet car il semble encombré alors j'ai fait un autre croquis.
Cette boîte de dialogue crée un processus légèrement différent de ce que vous avez montré car elle permet de modifier le nombre d'articles et de sous-éléments. En outre, il permet plusieurs options pour les sous-éléments, car cette étape aura lieu dans une autre boîte de dialogue modale. De toute évidence, si les boutons Ajouter/Supprimer ne sont pas nécessaires, ils peuvent être facilement omis.
Je me rends compte que vous essayez de réduire le nombre de boîtes de dialogue, mais la seule façon d'avoir un seul niveau est de regrouper toutes les options dans une boîte de dialogue et d'encombrer la vue.
Application Windows? Faites ce que Bill G. a fait et regardez ce que Apple fait.;)
Blague à part, n'ayez pas peur d'avoir un modal (ou calque) supplémentaire s'il est rarement utilisé. Il est difficile de faire des hypothèses avec l'exemple que vous avez fourni, mais vous pourriez bénéficier d'une mise en page à deux volets comme cette interface des Préférences Système OS X .
Avec l'écran à gauche, vous pouvez modifier les détails des 1er et 2e niveaux. Cliquer sur le bouton "Changer le mot de passe" donne un calque qui vous permet d'éditer le 3ème niveau.
Faites attention à ne pas diagnostiquer mal "trop de clics" pour "trop de changement de contexte". Votre exemple est probablement plus frustrant pour vos utilisateurs à cause de ce dernier.
Dans la première fenêtre de dialogue (niveau 1), remplacez la zone où se trouve le bouton "Modifier" par une boîte/volet d'informations.
Lorsque vous sélectionnez un élément dans la liste de gauche, les données de l'élément (y compris ses sous-éléments) s'affichent à l'intérieur dudit volet d'informations.
Maintenant, la possibilité de modifier le nom d'un sous-élément est offerte en autorisant la modification sur place/en ligne - double-cliquer sur le nom convertit cette zone en un champ de texte; la suppression du focus du champ enregistre le nom. Cela vous laisse avec 1 boîte de dialogue qui a accompli les fonctions combinées des boîtes de dialogue 1 et 2.
À ce stade, vous pouvez modifier les sous-éléments avec une boîte de dialogue supplémentaire, ce qui n'est pas si mal, ou vous pouvez faire quelque chose de plus intelligent comme révéler un ... Je ne sais pas s'il y a un nom officiel pour cela, mais c'est comme un croisement entre une boîte de dialogue et une info-bulle: elle flotte et a généralement une flèche s'étendant d'elle pointant vers le champ que vous essayez de modifier. Une boîte de dialogue en ligne, je suppose.
Je ne peux pas me rapporter à cet exemple spécifique, car je n'ai pas suffisamment d'informations sur l'objectif de l'utilisateur dans ce flux. Cependant - quelques conseils:
- Si l'utilisateur essaie habituellement de sélectionner (bouton OK) et non d'EDIT (bouton Modifier) - alors restez aussi simple que possible pour la sélection. Vous préférez une édition complexe plutôt que de compliquer le processus de sélection. Encore une fois - seulement si je devine correctement le flux.
- Utiliser l'édition en ligne pour renommer (similaire à renommer un titre de document sur Google Docs)