Pourquoi les boîtes de dialogue ont-elles un arrière-plan gris?
La plupart des boîtes de dialogue Windows/Mac/Linux que j'ai vues ont un arrière-plan gris. Dialogues à propos, pages de paramètres, assistants, dialogues de confirmation et d'erreur, etc.
Y a-t-il une raison du point de vue de l'utilisabilité ou est-ce juste un vestige des temps anciens? La lisibilité des contrôles de texte et de formulaire sur fond gris peut ne pas être optimale, en particulier lorsque le texte et les champs de saisie désactivés deviennent également gris.
J'utilise régulièrement des boîtes de dialogue modales pour une divulgation progressive (pages de détails, ajout, modification, etc.) lors de la conception de mes programmes Windows. Il y a donc beaucoup de contrôles de formulaire et de texte dans ces boîtes de dialogue.
Et si je les mettais tous en blanc?
Exemple: une des pages de paramètres d'Internet Explorer - Original:
Même boîte de dialogue - modifiée pour avoir un fond blanc:
Il n'y a pas vraiment de raison "UX" à cela - ou s'il y en a, elle est très limitée. La raison réelle pour laquelle les arrière-plans de dialogue sont (par défaut) une nuance de gris est parce que certains concepteurs pensaient que cela avait l'air mieux.
Dans de nombreux premiers systèmes d'exploitation, les arrière-plans des dialogues et des fenêtres étaient d'un blanc éclatant. De toute évidence, ils étaient blancs sur le Mac OS d'origine, car il n'avait qu'un écran noir et blanc d'un bit. Mais cela a continué longtemps après que le Mac II a ajouté la prise en charge d'un écran couleur:
Sous Windows, les paramètres par défaut avaient un fond blanc pour les fenêtres et les boîtes de dialogue tout au long de Windows 3.1:
À partir de Mac OS 8 et Windows 95 (d'autres systèmes d'exploitation ont emboîté le pas, naturellement, et le précédent avait déjà été bien établi par les systèmes de fenêtrage moins populaires précédents tels que NeXTSTEP , DESQview/X , et Amiga Workbench ), il est devenu très populaire parmi les concepteurs de donner aux contrôles une apparence 3D. Vous pouvez déjà voir les débuts de cela dans la capture d'écran ci-dessus de Windows 3.1 - les commandes des boutons ont déjà un aspect faux-3D. Pour compléter l'effet 3D, les boîtes de dialogue ont été traitées avec un fond gris.
L'interface utilisateur a été conçue comme si elle était affectée par une source de lumière globale et directionnelle, de sorte que les commandes avaient des bords ombrés et mis en évidence. Des sections de fenêtres et de boîtes de dialogue ont été biseautées pour leur donner un aspect "incrusté" ou "initial". Pratiquement, la réalisation de cet effet nécessitait que l'arrière-plan sur lequel les contrôles étaient assis (la fenêtre ou la boîte de dialogue) ait une couleur autre que le blanc . Vous ne pouvez pas avoir de surbrillance sur un fond blanc, car le blanc est déjà la couleur la plus claire possible. Ils devaient diminuer le contraste de l'arrière-plan pour que l'effet 3D fonctionne.
Maintenant, sans doute, c'est là que l'UX entre en jeu. On croyait généralement que rendre les interfaces en 3D les rendrait plus "conviviales". Même à ce stade précoce, lorsque la conception de l'interface utilisateur en était encore à ses balbutiements, vous pouviez voir l'émergence du principe du skeuomorphisme - si nous faisons en sorte que les objets à l'écran ressemblent à leurs homologues physiques, alors les utilisateurs soyez plus à l'aise lorsque vous interagissez avec eux. Par exemple, les boutons 3D étaient plus flexibles - ils ressemblent à des boutons parce que ils semblaient pouvoir être réellement poussés (un concept connu sous le nom d '"accessibilité", articulé de la manière la plus cohérente par Donald Norman). Et, merveille des merveilles, lorsque l'utilisateur a cliqué dessus, il y avait en fait un effet d'animation qui a changé le jeu de couleurs pour faire apparaître le bouton en retrait ("appuyer") sur l'écran!
On peut se demander si cette 3D a réellement eu pour effet de rendre l'interface plus facile à utiliser et à comprendre. Certes, il a été largement accepté dans l'industrie, et presque tous les systèmes d'exploitation informatiques ont emboîté le pas. Les commandes de chacun semblaient légèrement différentes - certains boutons d'option étaient ronds, certains carrés, d'autres même en forme de losange - mais ils avaient tous le même effet 3D, ce qui, pour des raisons pratiques, nécessitait un fond blanc.
Certes, tout le monde n'a pas choisi la même nuance de gris. Certains arrière-plans étaient d'un gris plus clair, d'autres d'un gris plus foncé. Mais mieux encore, l'utilisateur n'était pas du tout coincé avec le gris. Les gestionnaires de fenêtres ont fourni un crochet de personnalisation où les utilisateurs avancés (ou ceux ayant une déficience visuelle) pouvaient reconfigurer l'apparence de leur système, en choisissant différentes couleurs. Des variations claires et sombres sur l'arrière-plan ont été utilisées pour créer l'effet 3D.
Donc, sans doute, les dialogues n'ont jamais vraiment eu d'arrière-plan gris - ils avaient juste des arrière-plans non blancs . La raison pour laquelle les dialogues ont un arrière-plan gris est que les thèmes par défaut fournis avec le système d'exploitation utilisent généralement un gris clair comme couleur de base. Encore une fois, les concepteurs l'ont fait pour des raisons relativement pratiques: le gris est une couleur sur laquelle pratiquement tout le monde peut s'entendre. Même si personne n'aime le gris, personne ne déteste cela - quelque chose qui vous ne pouvez pas garantir si vous avez expédié un gestionnaire de fenêtres avec des boîtes de dialogue rose-rose ou bleu-turquoise.
Maintenant que le domaine de la conception d'interfaces utilisateur a évolué, c'est quelque chose qui occasionne parfois des problèmes aux concepteurs. Ils passent par beaucoup de travail pour créer une interface qu'ils trouvent absolument magnifique, avec une utilisation efficace de la couleur. Ensuite, ils le libèrent sur leurs utilisateurs sans méfiance… qui, il s'avère, absolument détestent le bleu. Ils ne le détesteraient probablement pas autant s'ils n'avaient pas à le regarder toute la journée, mais votre programme les y oblige. Tout cela parce qu'un designer quelque part (ou une équipe de designers) avait l'opinion subjective qu'une nuance de bleu particulière faisait vraiment ressortir l'interface utilisateur .
Bien que cela soit controversé, je suis convaincu que les choix de couleurs fondamentaux comme celui-ci ne devraient pas incomber aux concepteurs d'applications individuelles. L'utilisateur doit absolument posséder la possibilité de personnaliser le jeu de couleurs s'il le souhaite (préférence personnelle) ou le doit (pour des raisons d'accessibilité), et il est beaucoup trop difficile à utiliser pour chaque programme d'offrir une interface unique pour personnaliser sa propre apparence. Une bien meilleure idée est que tout le monde se superpose à la fonction intégrée du système d'exploitation pour ce faire. Et en bonus supplémentaire, vous obtenez la cohérence . C'est un anathème pour certains concepteurs, qui ne peuvent absolument pas accepter l'idée de renoncer au contrôle de chaque détail, mais la cohérence est beaucoup plus importante pour les utilisateurs. Si votre application ressemble et fonctionne comme les autres applications qu’elles utilisent et ont pris le temps d’apprendre, il leur faudra beaucoup moins de temps pour se familiariser avec l’utilisation de votre application, même si certains aspects de la conception on pourrait dire qu'ils sont "sous-optimaux". La cohérence l'emporte sur l'innovation, sauf si vous avez une sacrément bonne raison . Aimer la couleur bleue ne se qualifie pas.
Quoi qu'il en soit, revenons à notre histoire: à mesure que les modes changent et évoluent, l'ancien redevient nouveau. Windows Vista a introduit le thème Aero, qui a éclairci la nuance de gris utilisée par les fenêtres et les boîtes de dialogue, comme vous pouvez le voir dans la première capture d'écran de la question. Windows 8 nous a fait boucler la boucle, aplatissant (ou presque) tous les contrôles et revenant à des dialogues d'un blanc éclatant qui remontaient à l'époque de Windows 3.1:
Pire encore, la capacité de personnalisation (limitée) qui a longtemps été la marque d'un gestionnaire de fenêtres bien conçu s'estompe. L'utilisateur avait été mis hors de contrôle, cette fois non par des fournisseurs d'applications indépendants, mais par le développeur du gestionnaire de fenêtres. Quelqu'un qui devrait mieux connaître. Pourquoi Windows est-il revenu à un thème "plat"? Parce que tout le monde le faisait sur le web, et une équipe de designers pensait que ça avait l'air "frais" et "moderne". Les applications Web, pour leur part, avaient commencé à le faire principalement en raison de limitations techniques: parce qu'elles s'exécutaient dans un navigateur plutôt qu'une fenêtre à part entière sur le bureau, elles n'avaient pas accès au gestionnaire de fenêtres et elles étaient laissées à implémenter leurs propres fenêtres et dialogues:
Évidemment, ceux-ci sont inspirés par les dialogues du gestionnaire de fenêtres, mais ils ne sont pas les mêmes. Vous ne pouvez pas être cohérent avec le système d'exploitation si vous exécutez sur tous les systèmes d'exploitation. Où placez-vous le bouton de fermeture? Sur un Mac, tout le monde sait que ça va en haut à gauche. Sous Windows, il se trouve en haut à droite depuis Windows 95. Sur le Web, on peut deviner où il se trouve. Même chose pour la commande et l'alignement des boutons. La cohérence qui commençait tout juste à rendre les ordinateurs conviviaux a commencé à s'évaporer en raison de ces limitations techniques idiotes, puis à mesure que les applications Web devenaient de plus en plus populaires, leur conception commençait également à faire son chemin, de sorte qu'elles semblaient plus "modernes" et "frais" que les "anciennes" applications de bureau. Il est temps de relancer les anciennes photocopieuses!
Malheureusement, nous n'avons toujours pas de cohérence. Certaines boîtes de dialogue dans Windows 10 ont un arrière-plan blanc éclatant, tandis que autres utilisent toujours le gris clair. Il n'y a aucune raison évidente pour laquelle. Et l'utilisateur ne peut pas le personnaliser.
Il existe sans aucun doute des arguments en faveur de l'utilisabilité à ce sujet. De nombreuses recherches empiriques suggèrent que le contraste est essentiel, mais trop de contraste peut entraîner de la fatigue. Le noir sur blanc et le blanc sur noir sont tous deux des choix relativement mauvais. Mais rien ne prouve que quiconque ait pris en compte ces arguments lors de la conception des boîtes de dialogue.
Trop de blanc peut provoquer une fatigue oculaire, donc des teintes de gris réduisent cela.
Il y a un autre sujet ux.se qui traite des arrière-plans blancs vs gris:
Fond gris par rapport à blanc pour la facilité d'utilisation et la lisibilité/lisibilité
Parce que la différence entre la couleur de police et la couleur de fond peut provoquer une fatigue oculaire et n'est pas optimale.
Un texte noir ou gris foncé sur un fond gris plus clair est le plus facile à lire pour l'œil humain. Voir ce lien pour une réponse plus détaillée.
Il vous indique quand utiliser des polices plus lumineuses avec un fond sombre, et aussi quand ne pas le faire. Fondamentalement, cela dépend si la personne numérise un texte, comme les en-têtes des images, ou lit le texte attentivement, comme vous le feriez dans le type de fenêtres que vous avez montrées.
Une chose non mentionnée jusqu'à présent est que toute couleur d'arrière-plan non blanche facilite la mise en évidence des zones de texte et d'autres éléments d'interface utilisateur interactifs (cases à cocher, zones de liste déroulante, zones de dépôt, etc.), en utilisant du blanc.
Ce comportement remplit deux fonctions principales: premièrement, il attire l'attention sur votre boîte de dialogue/boîte de dialogue et deuxièmement, signalons à l'utilisateur que la page derrière elle (pour les navigateurs) est inactive dans cet état.
Et ces ombres ou superpositions font du très bon travail.
De plus, la couleur n'a pas d'importance, vous pouvez utiliser du blanc, du rouge, du bleu, etc. tant que l'interface utilisateur le permet.