Contrôle à 3 états marche / arrêt / suspendu
Je crée un prototype de système qui permettra à l'utilisateur de contrôler une fonctionnalité spécifique du système en l'activant et le désactivant. Pour contrôler la fonctionnalité, nous avons un contrôle à 3 états:
sur
off
suspendu
Le mode marche/arrêt n'est pas un problème, mais une partie du mode suspendu est activé automatiquement dans certaines situations. Ma question est donc la suivante: quelle est la meilleure façon de définir ce type d'outil? À quoi cela devrait-il ressembler? Boutons?
Pour le moment, il s'agit d'un interrupteur marche/arrêt, mais l'utilisateur doit voir si le système est en mode suspendu.
Vos états d'activation et de désactivation doivent être visibles et dans l'état suspendu, vous devez désactiver la sélection d'activation/désactivation.
Voici un exemple utilisant un bouton coulissant (radio), pas les meilleurs boutons, mais semblait être bon pour le scénario d'état suspendu :)
Vous pouvez faire une implémentation similaire avec des boutons réguliers, comme:
Le contrôle de suspension contrôle l'interrupteur marche/arrêt - ce qui m'amène à cette conception. La maquette 1 affiche l'état activé, la maquette 2 indique l'état désactivé et la maquette 3 indique l'état suspendu: l'activation et la désactivation ne sont pas utilisées, représentées comme désactivées sans sélection de l'une d'entre elles.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
La meilleure façon est de réduire l'opacité et de ne pas laisser l'utilisateur contrôler le commutateur si vous voulez qu'il soit en mode suspendu. Et vous pouvez avoir un bouton bascule normal pour On/Off.
La première chose à considérer est le temps qu'il faudra pour allumer et éteindre quelque chose. Vous n'avez donné aucun détail (peut-être que vous ne pouvez pas), mais supposons que vous montrez à l'utilisateur une table de serveurs dont il est responsable, avec le bouton décrit comme cellule et un serveur sur chaque ligne.
Dans ce cas, le bouton a deux fonctions. Il montre l'état du système et c'est un moyen de changer cet état. Cela signifie que si le changement d'état prend quelques secondes, le bouton devrait le refléter. La meilleure option pour une action comme celle-ci est un bouton (avec le curseur mentionné par @rk. Une seconde proche). Je n'irais pas pour les boutons radio, car ils peuvent suggérer un bouton d'envoi.
Je pense que ma solution idéale serait de séparer les fonctions d'affichage d'état et de changement d'état, mais de les rapprocher. Voici une maquette:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
La barre de progression pourrait être remplacée par un spinner. Et, bien sûr, ce serait mieux avec des icônes, mais celles-ci dépendent de votre domaine.
Lorsqu'un contrôle d'interface utilisateur est désactivé, un modèle d'interface utilisateur commun est de le griser. L'état actif d'origine et la couleur reviennent si les conditions appropriées sont remplies.