Interfaces utilisateur sombres. Le bien et le mal. À faire et à ne pas faire.

Les interfaces utilisateur sombres sont dramatiques, élégantes et élégantes. Néanmoins, les concepteurs doivent faire preuve de prudence s'ils choisissent de marcher du « côté obscur ».

Créer l'apparence d'un produit est l'une des principales responsabilités d'un designer. La décision de conception initiale doit être adaptée à l'objectif du produit, à la situation particulière et à son public. La palette de couleurs aura un impact durable et doit être choisie avec soin - et tout commence par la sélection d'un arrière-plan sur lequel les éléments de conception seront placés - la «toile». Le choix habituel, presque par défaut, est un fond blanc.

Il y a de bonnes raisons de choisir un fond clair. Le contraste, le texte, la lisibilité et la possibilité de travailler avec une large gamme de couleurs subtiles en font partie. Selon de nombreuses études scientifiques, une lisibilité optimale nécessite un texte noir sur fond blanc. L'image de marque peut également influencer la décision, car les logos et les couleurs de l'entreprise ne fonctionneront pas avec une palette de couleurs sombres.

La plupart des études ont montré que le texte sombre sur fond clair est supérieur au texte clair sur fond sombre, c'est-à-dire qu'il est plus facile à lire. Dans une étude célèbre, la « fatigue visuelle » était significativement plus élevée lorsque les sujets lisaient des caractères clairs sur un fond sombre par rapport à des caractères sombres sur un fond clair (Bauer, D., Bonacker, M. et Cavonius, CR 1983).

Il y a aussi une attente : les gens sont habitués à voir une variété de contenus rendus à l'encre noire sur fond blanc présentés avec des images. Pensez aux journaux et aux magazines, qui existent depuis plus de 350 ans. En remontant encore plus loin - trente-cinq mille ans à l'ère paléolithique (l'époque des hommes des cavernes), nous trouvons des dessins rupestres de lions et de mammouths généralement placés sur un fond clair avec du charbon de bois ou des os brûlés utilisés pour dessiner les représentations.

Néanmoins, lorsqu'un projet le justifie, les concepteurs de produits numériques d'aujourd'hui peuvent choisir de travailler avec une palette de couleurs sombres pour diverses raisons. Comme suggéré ci-dessus, il s'agit souvent d'un choix esthétique destiné à transmettre un drame et à susciter une émotion - quelque chose d'inattendu - ou peut-être qu'un designer souhaite fusionner le design avec l'image de marque ou s'assurer que le contenu visuel se démarque.

Cependant, si un designer choisit de passer du « côté obscur », il sera confronté à un certain nombre de défis. Toutes sortes de problèmes d'utilisabilité entrent en jeu, principalement liés à la scannabilité, à la lisibilité et au contraste. Le principal aspect à prendre en compte est un contraste suffisant entre le texte et l'arrière-plan. Le contexte (cas d'utilisation) et l'environnement doivent également être pris en compte, ainsi que l'appareil sur lequel l'UI est susceptible d'être visualisée.

Certaines interfaces utilisateur sombres sont conçues pour minimiser la « fatigue oculaire numérique ». Avec une augmentation de la technologie numérique, nous regardons les écrans la majeure partie de la journée. La fatigue oculaire numérique est une affection courante qui touche quotidiennement des millions de personnes. Causé par tout, de l'utilisation excessive de l'ordinateur à l'exposition régulière à la lumière vive, il peut provoquer des maux de tête, des douleurs au cou, une vision floue et des yeux brûlants/piquants.

Il y a même des choses telles que le syndrome de vision par ordinateur (CVS) et «l'inconfort oculaire». Selon une étude, plus de 83 % des Américains utilisent des appareils numériques plus de deux heures par jour, 60,5 % déclarant ressentir des symptômes de fatigue oculaire numérique. (Yeux surexposés : dilemme des appareils numériques.)

Les produits SaaS interentreprises et les applications d'édition multimédia sont utilisés pendant de nombreuses heures d'affilée. Beaucoup ont été conçus dans une interface utilisateur à thème sombre pour réduire la fatigue oculaire tout en favorisant la clarté visuelle. Cependant, une telle approche nécessite une évaluation minutieuse et préalable de l'orientation de la conception.

La plupart des développeurs utilisent un écran noir avec une syntaxe à code couleur pour réduire la fatigue oculaire. Comme l'explique Kevin Bloch, développeur de Toptal : "Un fond noir réduit la fatigue oculaire et facilite la lecture du codage couleur automatique, ce qui rend le code beaucoup plus rapide à comprendre en un coup d'œil."

Le développeur de Toptal, Amin Shah Gilani, ajoute : « J'utilise personnellement le thème sombre solarisé pour mon éditeur de code. Je préfère un thème sombre parce qu'un arrière-plan plus sombre est plus agréable pour les yeux, d'autant plus que j'aime garder les lumières tamisées ou travailler la nuit.

Les interfaces utilisateur des applications de jeu tendent également vers des thèmes plus sombres. Le contexte de jeu et l'environnement dans lequel les joueurs jouent s'adaptent mieux à une palette de couleurs noires. Une conception de fond noir renforce les visuels saisissants, introduit un sentiment de mystère, offre un meilleur contraste et prend en charge la hiérarchie visuelle.

Quand les interfaces utilisateur sombres fonctionnent bien

La majorité des interfaces utilisateur liées au divertissement (téléviseurs intelligents, consoles de jeu et applications TV et films) ont tendance à avoir des conceptions d'interface utilisateur à thème sombre, pour une bonne raison. La plupart des activités liées au divertissement ont lieu le soir, sont vues à une distance de 6 à 10 pieds et sont regardées dans des pièces faiblement éclairées, en d'autres termes, l'écran correspond à l'environnement. De plus, le contenu coloré (par exemple, les pochettes et les promotions) se démarque de manière spectaculaire sur les interfaces utilisateur à thème sombre.

L'objectif est de coller au contexte de l'activité : « Il commence à faire noir, je me détends et j'ai envie de regarder la télé. Semblables à des milliers de minuscules ampoules, les écrans numériques émettent de la lumière partout où un pixel lumineux est présent ; par conséquent, une interface utilisateur lumineuse éclairerait la pièce, un effet indésirable compte tenu de l'activité. Dans ce scénario, la conception de l'interface utilisateur tente de correspondre au contexte : l'appareil, le contenu, l'activité et l'environnement.

Dans le bon contexte, environnement, application et utilisation, les interfaces utilisateur à fond noir ont du sens. Tenez toujours compte du contexte dans lequel l'interface est susceptible d'être utilisée. Mais cela va plus loin : le choix de l'utiliser doit dépendre du contenu et du contexte : quoi , quand , où et sur quel appareil .

• Pour obtenir un look fort et dramatique pour des visuels saisissants
• Pour projeter un sentiment de style et d'élégance, de luxe et de prestige
• Pour créer un sentiment d'intrigue et de mystère
• Pour aider à concentrer et guider l'attention de l'utilisateur avec un minimum de distractions
• Pour prendre en charge la hiérarchie visuelle et l'architecture de l'information

Les interfaces utilisateur sombres ne doivent être utilisées qu'avec du texte clairsemé et minimal et des informations « fragmentées » en mettant fortement l'accent sur les visuels, la lumière sur le texte. Si du texte est utilisé, il doit présenter un contraste élevé avec le fond sombre, de préférence un blanc pur ou une autre couleur forte (pas de gris foncé) sur un fond noir.

Lorsque les interfaces utilisateur sombres ne fonctionnent pas bien

Comme indiqué précédemment dans l'article, les interfaces utilisateur à thème sombre sont un mauvais choix pour les contenus riches en texte et en données, ou lors de l'utilisation de divers types de contenu (texte, images, vidéo, tableaux de données, listes déroulantes, champs, etc. ). Le consensus général dans la communauté des concepteurs est que les interfaces utilisateur sombres sont un énorme défi à concevoir, à moins que vous ne traitiez avec un contenu simple et juste une pincée de texte ici et là.

Le défi est d'essayer de maintenir un contraste suffisant, ce qui impacte le défi primordial : la lisibilité, qui est liée à l'utilisabilité, qui impacte l'UX. Généralement, toutes les couleurs fonctionnent sur un fond blanc, alors que sur un fond sombre, la gamme utile de couleurs est considérablement réduite.

Voici un exemple concret de quand ne pas utiliser une interface utilisateur sur le thème sombre : j'ai participé à un projet SaaS B2B où le PDG était catégorique sur le fait que, pour "être différent", il voulait opter pour une interface utilisateur sur le thème sombre. L'interface utilisateur, qui correspondait à l'image de marque de l'entreprise… pour l'ensemble de la plate-forme. Pour tout. Après plusieurs réunions, et en ralliant l'équipe de conception et les chefs de produit derrière la cause, nous avons pu le dissuader d'une décision aussi potentiellement désastreuse.

La plate-forme utilisait un ensemble standard de composants d'interface utilisateur d'application SaaS et, par conséquent, regorgeait de formulaires, de widgets, de listes déroulantes, de pictogrammes et d'icônes, ainsi que de texte et de données numériques dans des tableaux. La navigation, la mise en page et les fonctionnalités seraient devenues incroyablement difficiles à gérer tout en obtenant un contraste suffisant et une palette de couleurs cohérente. En résumé, il aurait été presque impossible de tout faire fonctionner avec une interface utilisateur à thème sombre.

Selon la pertinence de l'application, le bon choix aurait peut-être été de suggérer un mélange d'interfaces utilisateur claires et sombres. Par exemple, les pages de paramètres avec des widgets, des formulaires et des tableaux de données auraient pu être conçues sur un fond clair, et les pages d'analyse avec des graphiques auraient pu être conçues avec un jeu de couleurs plus foncé.

Les choses à faire et à ne pas faire avec les interfaces utilisateur sombres

En conclusion, la décision d'opter pour une interface utilisateur sombre doit être abordée avec prudence. Les designers ne devraient pas le faire pour de mauvaises raisons : être branchés, différents ou copier le design de quelqu'un d'autre. Il est crucial qu'un concepteur considère le contexte, le contenu (contraste et lisibilité), l'appareil et le cas d'utilisation, et ait une bonne raison pour son choix. C'est un exercice d'équilibre délicat car il y a potentiellement de nombreux avantages mais aussi de nombreux pièges.

Lorsqu'il est possible d'utiliser des interfaces utilisateur sombres :

• Quand une palette de couleurs de marque le justifie
• Lorsque le design est clairsemé et minimaliste avec seulement quelques types de contenu
• Lorsque cela est approprié pour le contexte et l'utilisation, comme les applications de divertissement nocturne
• Pour réduire la fatigue oculaire, comme les pages d'analyse qui sont utilisées pendant de longues périodes
• Pour susciter une émotion, par exemple, un sentiment d'intrigue et de mystère
• Pour créer un look saisissant et spectaculaire
• Pour créer un sentiment de luxe et de prestige
• Pour prendre en charge la hiérarchie visuelle

Quand est-il préférable de rester à l'écart des interfaces utilisateur sombres :

• Lorsqu'il y a beaucoup de texte (la lecture sur un fond sombre est difficile)
• Lorsqu'il y a beaucoup de contenu mixte à l'écran
• Dans le cas d'applications B2B avec de nombreux formulaires, composants et widgets
• Quand le design demande une large gamme de couleurs

Le passage du « côté obscur » doit être abordé avec prudence. Des recherches et des analyses plus approfondies et plus approfondies sont recommandées avant de prendre une décision aussi potentiellement précaire et semée d'embûches. Une fois qu'un designer s'engage dans cette voie, il est très difficile de revenir en arrière. Les concepteurs seraient bien avisés de considérer tous les aspects - les bons et les mauvais, les choses à faire et à ne pas faire, avant de se lancer à pieds joints.

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques