Greyed-Out vs Invisible
Quel est un bon critère ou règle générale pour déterminer quand un contrôle doit être grisé et quand doit-il être complètement invisible?
Cela dépend énormément de la façon dont vous vous attendez à ce que l'application soit utilisée.
Si tous vos utilisateurs sont des utilisateurs avancés (comme Photoshop dans la réponse de @ edgarator), vous voulez généralement griser plutôt que masquer - vous voulez que vos utilisateurs sachent que la fonctionnalité est là et qu'ils utiliseront votre application pour quelque temps.
Cependant, si vos utilisateurs sont moins techniques ou (plus probablement) seulement occasionnels, vous ne voulez pas encombrer l'interface avec des contrôles qu'ils jamais vont utiliser. Ils ne vont pas traîner pour savoir pourquoi une action ou un contrôle particulier est désactivé.
Dans ces cas, je passe à quelques règles:
Si l'action est jamais va être disponible pour l'utilisateur (par exemple s'il n'a pas de droits ou s'il n'a pas acheté la fonctionnalité), cachez-le toujours. Je déteste les boutons vierges sur le tableau de bord d'une nouvelle voiture.
Si l'action peut être activée par une action de l'utilisateur sur la même page/écran (par exemple, un bouton suivant qui a besoin d'une zone de saisie obligatoire remplie en premier), désactivez la plupart du temps.
Si l'action peut être activée par l'utilisateur en faisant quelque chose sur une page/écran différent, il s'agit de savoir si vous voulez qu'il aille trouver comment activer les options grisées. Habituellement, je trouve que cela signifie que vous feriez mieux de repenser la façon dont les pages/écrans traversent ce que l'utilisateur essaie de faire.
S'il y a beaucoup de fonctionnalités désactivées, par exemple un bloc supplémentaire entier d'entrées de formulaire, c'est un appel au jugement. J'ai tendance à le cacher, puis à le mettre en évidence si l'utilisateur en a besoin.
Fondamentalement, l'objectif est toujours que l'utilisateur puisse l'utiliser avec le minimum de manuel, donc grisez quelque chose lorsque vous voulez qu'il sache qu'il peut faire quelque chose pour l'activer. Cachez une action pour éviter de les distraire.
Grisez-le lorsque vous voulez que la personne sachez que le contrôle existe, mais qu'il est désactivé.
Cachez-le (rendez-le complètement invisible) quand peu importe qu'ils sachent qu'il est là ou non.
En général, j'opterais pour griser les contrôles plutôt que de les masquer, car quelqu'un pourrait se souvenir d'avoir vu un contrôle quelque part qui ne pourrait alors plus le retrouver s'il est maintenant masqué. Et il n'y aurait aucune indication pourquoi ils ne peuvent pas le retrouver. Lorsque vous grisez un contrôle, vous pouvez avoir un peu 
icône ou quelque chose de similaire pour permettre à une personne de voir pourquoi elle est désactivée.
Microsoft a rencontré ce problème il y a plusieurs années dans MS Office, où ils cacheraient des éléments de menu que vous n'aviez pas utilisés depuis longtemps. Cela a causé tellement de problèmes de support qu'ils l'ont finalement abandonné.
Notez cependant qu'il existe une importante exception à cette règle: si le logiciel attribue différents rôles à différents groupes d'utilisateurs, les utilisateurs ordinaires ne doivent pas être conscients des avancées fonctionnalité disponible pour les utilisateurs plus privilégiés. Par exemple, un modérateur de forum pourrait être autorisé à interdire des utilisateurs, supprimer des sujets entiers, etc. Dans un tel cas, les boutons avancés (entrées de menu) devraient être complètement absents de l'interface graphique des utilisateurs ordinaires (et pas seulement grisés).
Cela me rappelle Woocommerce, où ils cachent le bouton Ajouter à la carte, à moins que toutes les options n'aient été choisies.
Regarde ça:
vs l'écran suivant qui montre le bouton ajouter au panier et le nombre d'articles que vous souhaitez acheter. Et si vous vouliez acheter deux chemises mais de tailles différentes?
Masquer les parties les plus importantes de votre navigation ou des boutons CTA n'est pas une bonne idée dans ce cas. Dans la plupart des cas, vous pouvez utiliser le gris comme indicateur subtil de la fonctionnalité facultative:
Cette question est très générale. Sans contexte, il est difficile de donner une réponse qui aiderait. Cette réponse sera donc également très générale.
Il y a généralement deux raisons pour lesquelles un élément peut être actif ou non:
- L'action que le contrôle provoquerait ne peut pas être invoquée (par exemple, un bouton "enregistrer" désactivé car toutes les données requises n'ont pas été spécifiées)
- L'application est dans un mode qui ne prend pas en charge le contrôle (par exemple, la liste déroulante des polices désactivées lorsqu'une image est sélectionnée)
Dans la plupart des cas, les contrôles désactivés ou masqués sont le résultat des modes : L'affichage d'un élément désactivé suggère que cet élément peut, d'une manière ou d'une autre, être activé - généralement en changeant le mode dans lequel se trouve votre application. Pensez à changer de personnage dans un jeu: différents personnages autoriseront différentes actions, donc le joueur est dans la même application (le jeu), mais ce qu'il peut ou ne peut pas faire est déterminé par le mode dans lequel il se trouve. dans (le personnage qu'ils contrôlent actuellement).
Les modes sont une chose très gênante pour les utilisateurs, car la même interface utilisateur peut autoriser ou non des actions différentes selon le mode. Le gros problème est de savoir comment faire savoir à l'utilisateur dans quel mode il se trouve et de rendre évident comment il peut le changer. C'est là que la plupart des applications échouent: les utilisateurs se retrouvent désespérés parce qu'un contrôle ne peut pas être cliqué, et le seul indice que l'application donne est par exemple une petite icône dans la barre d'état.
Soyez assurés: les utilisateurs vont chercher un moyen d'activer les éléments désactivés.
Des contrôles invisibles peuvent entraîner confusion et désorientation.
Les contrôles désactivés peuvent conduire à un comportement d'enquête (ce qui peut être une bonne chose).
Un conseil général: Gardez la quantité de contrôles cachés/visibles et inactifs/actifs au minimum. Habituellement, il existe une meilleure solution.
Voici ce que Apple dit à propos du masquage des fonctionnalités de l'application en fonction de son emplacement:
Certains éléments d'interface utilisateur désactivés peuvent indiquer aux utilisateurs le comportement de l'application. Lorsque vous les cachez, cet indice disparaît.
Prenez par exemple Photoshop, lorsque vous êtes en mode indexé (comme travailler avec un GIF), vous obtenez cet écran.
Comme vous pouvez le voir, les boutons en bas à droite sont désactivés. Et c'est généralement ce qui m'indique que je dois aller changer le mode d'image (entre parenthèses à côté de Untitled-1 @ 100%).
Maintenant, ils sont activés!
Comme vous pouvez le voir, le changement de mode est généralement subtil, mais l'application parvient à communiquer le mode de plusieurs manières. Si vous masquez simplement les boutons, vous penseriez simplement que la boîte à outils a été fermée à ce moment-là ou commencez à vous demander si l'application fonctionne correctement.
Dans les scénarios d'erreur, nous pouvons également nous cacher. Supposons que je doive afficher une case à cocher lors du chargement de la page, s'il n'y a pas d'obtention de l'état de basculement actuel, la désactivation pourrait dérouter l'utilisateur, car il n'a fait aucune erreur ou ses actions ne l'ont pas provoquée, c'est un échec de la récupération des informations. Je suppose donc que dans ce cas, nous pouvons également nous cacher.
Vous ne devez rendre quelque chose d'invisible que s'il n'a aucun rapport avec ce que l'utilisateur fait actuellement et ne fournit aucune valeur à l'utilisateur.
Les formulaires en sont un bon exemple. Il ne sert à rien de demander à un utilisateur de remplir le formulaire d'historique d'emploi s'il n'a jamais été employé ou de lui demander de remplir un formulaire de carte de crédit s'il paie avec une carte-cadeau.
Les contrôles grisés suggèrent que l'élément n'est pas actif ou désactivé, mais l'utilisateur doit savoir qu'il existe.