Comment concevoir une boîte de dialogue de type Win 7 pour choisir l'une des N options sans bouton de confirmation?
La boîte de dialogue Copier le fichier de Win 7 constitue une approche pour présenter Une des N options choix aux utilisateurs. Cette boîte de dialogue, cependant, a été accusée d'être trop difficile à analyser et de ne pas avoir les moyens de cliquer.
Une autre approche est celle de Apple OSX . L'avantage ici est l'amélioration de la numérisation et de l'abondance des clics. Cependant, il ne fournit pas de place pour les descriptions/métadonnées et il ne s'adapte pas bien.
Je suis conscient que les contrôles d'interface utilisateur typiques pour présenter l'une des N options sont les boutons radio , cependant, ils me semblent être un peu archaïques dans ce contexte. De plus, ils ne fournissent pas l'option à présélectionner (à moins qu'un bouton de confirmation de dialogue ne soit disponible, ce qui en fait un processus en deux étapes si l'utilisateur a besoin d'une autre option que celle qui est sélectionnée par défaut). Voici une maquette de ce problème:
J'imagine que cliquer sur un bouton radio, un en-tête d'option ou une description d'option sélectionne l'option pertinente et ferme la boîte de dialogue.
Le problème avec la boîte de dialogue gauche est le manque de moyens quand aucun bouton radio n'est sélectionné et l'opportunité manquée qui en résulte de présenter une option par défaut.
Le problème avec la boîte de dialogue de droite oblige l'utilisateur (au cas où il serait satisfait de l'option Dolor) à cliquer sur l'option Dolor (qui va à l'encontre de la comportement standard des boutons radio).
Ma question est donc:
- Comment dois-je concevoir une telle boîte de dialogue Choisir l'une des N options lorsque je veux éviter les boutons de confirmation?
Le problème majeur avec l'exemple Win7 est, comme vous l'avez dit vous-même, le manque de moyens puisque les "boutons" sont rendus plats (c'est-à-dire sans contour/début) jusqu'à ce qu'ils survolent.
En fait, Office 2000 est venu près de ce que je trouve être une bonne solution:
(Vous pouvez ignorer les quatre boutons en bas car ils ne sont pas pertinents ici.)
Pour optimiser, je préférerais que les trois boutons principaux contiennent toutes les options, pas seulement les icônes.
Avantages
- Les options sont faciles à identifier et à discerner
- Une option est sélectionnée par défaut
- Les boutons radio sont évités (je trouve que les boutons radio n'ont de sens que lorsqu'un choix peut être fait et changé, c'est-à-dire lorsqu'il prend effet après confirmation de . Cela se fait généralement via un bouton de confirmation ou similaire.)
Ci-dessous, j'ai modifié l'image pour refléter mes pensées:
Pour répondre à ma propre question, je suis juste tombé sur une boîte de dialogue similaire à Copier un fichier alors que mon développeur MS Visual Web s'est écrasé:
Dans cette boîte de dialogue, l'option par défaut est entourée d'une bordure subtile, offrant une possibilité de clic tout en faisant allusion à l'existence des trois options. Dans cette boîte de dialogue, si vous appuyez sur Entrée sur le clavier, l'option bordée est sélectionnée et la boîte de dialogue fermée.
Bien sûr, cette boîte de dialogue n'a pas de métadonnées/descriptions, il est donc plus facile d'obtenir un aperçu de la boîte de dialogue Copier le fichier. La vue d'ensemble améliorée est en outre due au fait qu'il n'y a pas de bouton Annuler dans le coin inférieur droit où réside généralement le bouton Confirmer - comme ici:
Compte tenu de ce qui précède, une maquette d'une approche (probablement) meilleure pourrait ressembler à ceci:
Dans la maquette, j'ai:
- Fourni des crochets visuels en soulignant les options (en s'inspirant de la "sensation de vide" lorsque Google supprime le soulignement sur les SERP )
- Surligné l'option par défaut et offrant ainsi une accessibilité aux clics
- Suppression du bouton Ignorer redondant (en réalité, il est égal à "Ne pas copier")
- Suppression du bouton Annuler, car le bouton rouge dans le coin supérieur droit fournit déjà cette fonctionnalité
Si l'action va être entreprise immédiatement sans étape de confirmation comme un bouton de confirmation qui prend des mesures, ignorez la métaphore du bouton radio qui a été conçue pour être utilisée dans les formulaires.
Voici quelques idées:
Si les options sont vraiment la longueur comme dans vos exemples et si l'espace n'est pas un problème particulier, envisagez de passer à une disposition horizontale. Trois options côte à côte transmettent quelque chose de différent de trois verticales et suggèrent visuellement qu'il s'agit d'une fourche sur la route nécessitant une action dans toutes les directions.
Utilisez un indice visuel différent pour chaque élément, comme une icône représentant ce choix.
Sans l'étape d'un bouton "confirmer", le concept de "défaut" n'a presque aucun sens. N'essayez pas de truquer. Vous pouvez offrir une sorte de suggestions visuellement ou avec une aide textuelle. Une action peut avoir le focus d'entrée, mais n'essayez pas de prétendre qu'il existe une action par défaut lorsqu'il n'y a pas d'étape de confirmation. Toute action entreprise prend cette action. Vous n'avez pas la possibilité de ne pas choisir une action.
En fait, l'équipe Windows met actuellement à jour la "boîte de dialogue Résolution des conflits", comme ils l'appellent:
Que diriez-vous de quelque chose de visuellement similaire au tableau des prix du camp de base
L'option présélectionnée sera plus grande et pourrait être visuellement plus forte. Les boutons peuvent aider les utilisateurs à se permettre de cliquer.
Cette approche ne fonctionnera que si vous avez l'espace horizontal pour afficher toutes les options.