Approche moderne des boutons radio
Je travaille sur la mise à jour de l'interface utilisateur/UX d'une application vieille de 20 ans et je semble être bloqué dans ce cas d'utilisation particulier.
En cliquant sur le bouton Nouveau , le système demande à l'utilisateur de choisir l'une des deux options
- Créer un nouvel ordre de travail
- Créer une nouvelle tâche/sous-tâche pour un ordre de travail préexistant
N'oubliez pas que le système demande plus d'informations. Ce n'est pas seulement cela et en fonction de l'architecture de l'application, il doit connaître ces informations (et d'autres) avant de poursuivre.
Ma question est, quelle serait une façon moderne de montrer les deux choix à l'utilisateur? Serait-ce l'une des options mentionnées dans la capture d'écran ci-dessous?
L'ancien écran d'application
Mes options suggérées:
Réponse courte: Option 1
Je ne vois aucune raison de rendre cela plus complexe que deux boutons radio normaux. Nous avons ces éléments d'interface utilisateur depuis si longtemps pour une raison.
Les autres options présentées par vous sont conçues/mieux adaptées à d'autres cas.
La règle de base est:
Utilisez les boutons radio pour une poignée (max. 5-7) de choix mutuellement exclusifs et lorsque vous voulez que tous les choix soient visibles.
Utilisez les listes déroulantes pour une liste de plus de 5-7 options, où les présenter toutes serait une surcharge visuelle.
L'option 4 avec un interrupteur ne convient pas du tout, car elle est utilisée pour les métaphores marche/arrêt, pas pour les choix entre deux options égales.
Je suppose que l'option 3 serait également possible, mais cela n'ajoute pas vraiment de valeur par rapport aux boutons radio normaux, cela pourrait même dérouter certains utilisateurs.
Voir cette réponse ici expliquant les différences:
https://ux.stackexchange.com/a/88135/67657
Ou cet article du groupe NN:
cases à cocher vs boutons radio
Ou ca:
7 règles d'utilisation des boutons radio vs menus déroulants
Je créerais des écrans et des boutons entièrement nouveaux pour les deux tâches. Étiquetez-les "Modifier l'ordre de travail" et "Créer l'ordre de travail". Modifier sert à modifier un ordre de travail existant ou à ajouter des sous-tâches. Créer sert à créer un nouvel ordre de travail. Le bouton Modifier sera à côté de l'ordre de travail dans une liste d'ordres de travail ouverts. Le bouton Créer sera en haut de la page.
https://www.bootply.com/Ur1q177i95
Cela s'applique à votre situation spécifique. Pour les boutons radio réguliers faisant des choses de bouton radio (sélection dans une courte liste d'options), je ne les changerais pas.
Ça dépend du contexte.
- Les boutons radio sont excellents pour montrer à l'utilisateur toutes les options possibles et mettent clairement en évidence ce qui est sélectionné
- Une liste déroulante est utile si vous n'avez pas/ne souhaitez pas utiliser trop d'espace
- l'option 3 (onglets?) est une approche très intéressante si le contenu est dynamique, de sorte que l'utilisateur voit instantanément ce qui change à chaque choix. Bien que comme mentionné dans les commentaires, cela puisse sembler déroutant pour les utilisateurs. Les onglets séparent les catégories de contenu; que se passe-t-il avec le contenu de l'onglet non sélectionné?
- Les boutons de type commutateur sont plus familiers pour les choix d'activation/désactivation et sont la seule option qui ne s'adaptera pas bien si vous décidez d'ajouter plus d'options à votre formulaire à l'avenir.
Une chose que je n'ai pas encore vue soulevée est que les boutons radio devraient toujours avoir une option par défaut sélectionnée, ce qui suggère que le workflow ici est principalement pour ajouter un nouvel ordre de travail et secondairement pour ajouter une tâche - c'est-à-dire, si l'utilisateur ne le fait pas '' t toucher ce contrôle, et remplit le reste du formulaire, ils obtiennent un WO, pas une tâche.
Si cette hypothèse est correcte, vous pouvez simplement leur demander de choisir un adjudant parent si nécessaire avec une sélection. Cela peut être délicat, selon que vous pouvez rechercher une liste de tâches candidates à ce stade et combien il pourrait y en avoir.
Si vous ne pouvez pas obtenir ces informations, ou si ce n'est pas pratique de choisir parmi les candidats ici, vous pouvez utiliser une simple case à cocher "Joindre comme sous-tâche?".
Vous pouvez utiliser des boutons à bascule.
Le concept est donc de boutons poussoirs qui offrent des choix mutuellement exclusifs: lorsqu'un bouton est enfoncé, l'autre monte.
Si vous utilisez un ancien modèle de "bouton-poussoir", assurez-vous qu'il est évident quel bouton est enfoncé et lequel est en place. L'image ci-dessous n'est pas si bonne à cet égard, mais uniquement pour illustrer le concept.
Vous pouvez également utiliser un design plus contemporain où le choix sélectionné est "mis en évidence" avec une couleur différente.
Si votre objectif principal est de rendre l'ancienne interface compatible avec les appareils tactiles comme les smartphones, une alternative simple consiste à étendre la zone sensible de vos boutons radio pour inclure les étiquettes. Cependant, il n'est pas évident que les étiquettes soient cliquables, sauf si vous dessinez un cadre qui entoure le bouton radio et son étiquette.
Pour les interfaces de bureau, les boutons radio sont toujours un bon choix si le nombre d'options est limité.
Vous pouvez remplacer le bouton "Nouveau" d'origine par deux boutons, un pour "Nouvel ordre de travail" et un pour "Nouvelle tâche".
Considérez la capture d'écran d'une application Microsoft ci-dessous. L'élément de menu Fichier -> Nouveau est en fait un menu qui répertorie les différents types de nouvelles "choses" que l'utilisateur peut vouloir créer.
Dans votre cas, il ne serait pas nécessaire de placer les boutons dans un menu séparé, il suffit de remplacer le bouton "Nouveau" d'origine par les deux options.