Quel est le meilleur modèle de conception Web pour les options à bascule dans un menu parent à bascule
Je travaille sur un menu qui peut être activé ou désactivé, avec des sous-options dans le menu qui peuvent elles-mêmes être activées ou désactivées. Bien que, logiquement, je pense que le menu parent et les options enfant aient un bouton à bascule, visuellement, cela semble un peu déroutant. J'ai essayé une alternative qui utilise des cases à cocher pour les éléments enfants à la place, ce qui me semble un peu plus clair. Existe-t-il un modèle de conception alternatif qui fonctionnerait mieux/se sentirait plus intuitif que ces deux options?
Les priorités de conception peuvent aider ici.
Je pense qu'une priorité ici est, tilisons le meilleur contrôle pour le travail.
Les cases à cocher (sans étiquettes) sont bonnes pour les états marche/arrêt où il est clair ce que signifient les états cocher/décocher. Les interrupteurs à bascule étiquetés vous permettent de montrer ce que signifie chaque état ("activé" et "désactivé").
Je suppose que le meilleur contrôle pour votre situation est l'interrupteur à bascule, car les étiquettes "on" et "off" sont utiles à l'utilisateur. Alors utilisons ça.
Maintenant, vous avez une préoccupation secondaire qui est de savoir si une colonne de bascules sera maladroite. Puisqu'il s'agit d'une préoccupation secondaire, nous devons essayer de la résoudre sans abandonner complètement le contrôle. Le design peut beaucoup aider:
- L'un des problèmes avec la structure filaire est que les bascules arrondies créent un flux visuel gênant de haut en bas sur le côté droit. Nous allons donc les mettre en carré pour fournir une disposition de grille plus fluide.
- Un autre problème consiste à distinguer les bascules de menu des bascules d'en-tête. Utilisons donc le design pour rendre la différence beaucoup plus claire.
- Enfin, je déteste les petites bascules car elles ne sont pas conviviales pour toucher les interfaces. Alors, super-dimensionnons-les tous pour les rendre plus tactiles.
Voici un résultat qui pourrait être plus efficace:
Premièrement, les boutons à bascule sont quelque peu problématiques. Bien qu'il s'agisse d'un modèle de conception assez courant sur les appareils à écran tactile modernes, il n'est pas immédiatement évident que l'on peut les activer simplement en cliquant. Un utilisateur peu familier avec cet élément à l'écran mais familier avec son homologue de la vie réelle va essayer de le faire glisser car nous ne cliquons pas sur de tels commutateurs dans le monde réel.
https://ux.stackexchange.com/a/43889/332
https://ux.stackexchange.com/a/63886/332
De plus, si vous regardez des sites comme GMail ou Amazon, qui investissent énormément en UX, vous verrez des cases à cocher, et non des commutateurs.
Les cases à cocher signifient activer/désactiver (oui ou non; ou si vous êtes geek, 1 ou 0) et ont été utilisées sur le Web des milliards de fois pour représenter oui ou non, les choix de type d'activation ou de désactivation pour les utilisateurs.
Vous rencontrez également un problème si vous utilisez le même élément pour le parent et l'enfant (en particulier une case à cocher) lorsque vous imitez un autre modèle de conception Web très courant qui est le modèle de case à cocher parent tout ou aucun. Cela va au-delà du problème esthétique que vous soulevez dans votre question. Il existe des milliers d'exemples de ce modèle sur le Web.
Ce que je recommanderais, c'est la conception suivante:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Où les sélections d'activation et de désactivation sont clairement cliquables et où les cases à cocher elles-mêmes resteront définies lorsque l'utilisateur les aura laissées. L'état actuel serait clairement défini par le bouton sélectionné
En outre, le panneau entier serait soit grisé, effondré ou les deux lorsqu'il était à l'état désactivé. Ces deux actions et le commutateur à l'état d'interface selon le choix contribueraient à renforcer l'action.
PS ... Je suppose que vous voulez que l'état de la case à cocher soit conservé quel que soit l'état du parent, sinon et que le parent est une fonction `` tout basculer '', puis utilisez des cases à cocher partout car c'est une solution très bien établie, commune et utilisable .