À l'honneur : les principes de la conception d'interface utilisateur sombre

Les conceptions d'interface utilisateur sombres sont vues de loin, des écrans mobiles aux téléviseurs massifs. Un thème sombre peut exprimer la puissance, le luxe, la sophistication et l'élégance. Cependant, la conception d'interfaces utilisateur sombres présente de multiples défis et ne répondra pas aux attentes si elle est mal mise en œuvre. Avant de plonger dans le « côté obscur », les concepteurs devraient regarder avant de sauter le pas.

Les physiciens disent que le noir n'est pas vraiment une couleur ; c'est l'absence de lumière . Dans ses expériences faisant briller la lumière du soleil à travers des prismes, Sir Isaac Newton ne l'a même pas incluse dans le spectre des couleurs.

En psychologie des couleurs, la plupart des couleurs représentent différentes choses pour différentes personnes. Dans les cultures occidentales, le noir est souvent associé à la mort, au mystère et au mal. Le vert est souvent associé à la croissance à cause de la nature. Le bleu est presque universellement apaisant car il est associé au ciel et à l'eau. La couleur est émotionnelle.

D'autres effets sont culturels. Le violet, par exemple, est toujours associé au luxe car dans de nombreuses cultures anciennes, la teinture violette était chère et rare - seule la royauté pouvait se le permettre. C'était une partie importante de l'air du temps culturel pendant assez longtemps pour devenir une partie de la psyché humaine .

Les produits numériques avec des interfaces utilisateur sombres - associés à la puissance, à l'élégance et au mystère - sont une tendance formidable. Bien qu'il soit souvent dit que le mode sombre peut réduire la fatigue oculaire, rien ne prouve que cela soit vrai. Dans certaines circonstances, il est également censé économiser la batterie. Pourtant, le plus souvent, les thèmes sombres sont un choix esthétique.

Interface utilisateur sombre contre interface utilisateur claire

Toutes les interfaces ne conviennent pas à un thème sombre. Les concepteurs doivent examiner l'adéquation de la marque, l'adéquation culturelle et la psychologie des couleurs et tenir compte de l' impact émotionnel avant de choisir d'en choisir un. C'est un exercice d'équilibre délicat.

Alors qu'une application financière ciblant la génération Y peut atteindre le facteur cool avec un thème sombre, elle peut être inappropriée pour le site Web d'une grande banque destiné au grand public. Trop riche, trop sombre et trop élégant peut devenir plus frustrant lorsque tout ce que les gens veulent faire, c'est vérifier leur solde et payer une facture.

Les interfaces utilisateur sombres des applications SaaS B2B sont notoirement difficiles à concevoir. Les composants d'interface utilisateur Web standard tels que les tableaux de données, les widgets, les formulaires et les listes déroulantes peuvent sembler étranges sur une interface utilisateur sombre. Étant donné que de nombreux schémas de couleurs ne fonctionnent pas bien avec les interfaces utilisateur sombres, certaines marques et certains produits, selon le type, le contexte et les facteurs environnementaux, ne conviennent pas et peuvent s'avérer un défi insurmontable.

Les concepteurs qui n'ont jamais travaillé avec la conception d'interface utilisateur sombre auparavant et qui décident de se lancer à pieds joints peuvent se retrouver dans des eaux agitées et inexplorées. Dans les océans des interfaces utilisateur sombres, les normes sont pliées, les règles sont modifiées et les pièges sont nombreux.

Cela dit, il existe de nombreuses bonnes raisons d'utiliser des interfaces utilisateur sombres :

• 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 créer un look saisissant et spectaculaire

Et, il y a des scénarios où ce n'est pas recommandé :

• Lorsqu'il y a une grande quantité de texte (la lecture sur un fond sombre est difficile)
• Lorsqu'il y a beaucoup de types de contenu mixtes
• Quand le design demande une large gamme de couleurs

Contraste dans la conception de l'interface utilisateur sombre

Un thème sombre n'est pas un thème noir. Il serait préférable de le considérer comme un thème "faible luminosité". L'une des principales préoccupations des interfaces utilisateur sombres est d'obtenir un contraste suffisant pour que les éléments visuels soient séparés et que le texte soit lisible. La plupart des concepteurs penseraient que l'utilisation du noir serait optimale pour obtenir un fort contraste. Cependant, il est préférable de ne pas utiliser le vrai noir (#000000) pour les arrière-plans ou les couleurs de surface . Le noir est mieux réservé aux autres éléments de l'interface utilisateur et utilisé avec parcimonie. Par exemple, le vrai noir peut être utilisé pour de petits éléments d'interface utilisateur ou un cadre environnant.

Le thème sombre de Google Material Design recommande d'utiliser le gris foncé (#121212) comme couleur de surface de thème sombre "pour exprimer l'élévation et l'espace dans un environnement avec une plage de profondeur plus large". De plus, de nombreux concepteurs recommandent d'ajouter une subtile teinte bleu foncé aux gris foncés lors de la définition du jeu de couleurs. Il a tendance à créer un meilleur ton sombre pour les écrans numériques et une palette de couleurs sombres plus agréable pour l'interface utilisateur.

L'utilisation d'une gamme de gris présente l'avantage de donner une latitude aux concepteurs, car une gamme de couleurs plus large peut être exprimée. Une palette de gris aide également à créer de la profondeur car les ombres portées peuvent être plus facilement vues par rapport au gris par rapport au noir.

Une attention particulière doit être accordée au contraste du texte dans les interfaces utilisateur sombres.

Les directives pour l'accessibilité des contenus Web (WCAG) exigent que "la présentation visuelle du texte ait un rapport de contraste d'au moins 4,5:1 ", sauf pour le texte à grande échelle, qui doit avoir un rapport de contraste d'au moins 3:1 . Par conséquent, les concepteurs doivent s'assurer que le contenu reste confortablement lisible en mode sombre.

C'est également une bonne idée de tester le bon contraste entre les autres éléments de l'interface utilisateur, tels que les cartes, les boutons, les champs et les icônes sur divers écrans et appareils. S'il y a une séparation imperceptible entre les éléments de l'interface utilisateur, le design se mélange trop et risque de devenir terne.

Concentration de l'attention : couleur

La couleur se démarque dans les interfaces utilisateur sombres. Il est préférable d'utiliser des schémas avec des couleurs d'accent plus claires et non saturées. Évitez d'utiliser des couleurs saturées dans les interfaces utilisateur sombres, car elles peuvent visuellement vibrer sur des surfaces sombres. De plus, en tant que meilleure pratique, les couleurs doivent respecter la norme AA des WCAG d'au moins 4,5: 1 lorsqu'elles sont utilisées avec du texte.

Lors de la définition d'un jeu de couleurs pour une interface utilisateur sombre, Google recommande un nombre limité d'accents de couleur pour conserver la majeure partie de l'espace disponible pour les surfaces sombres. L'utilisation de couleurs complémentaires fractionnées peut aider. Le schéma a une couleur dominante et deux couleurs adjacentes au complément de la couleur dominante. Cela fournit le contraste nécessaire sans la tension de la palette de couleurs complémentaires.

Le bon jeu de couleurs peut aider à créer un bon contraste. Colorable est un outil utile pour sélectionner des combinaisons de couleurs de texte et d'arrière-plan conformes à l'accessibilité.

Le texte et les éléments essentiels, tels que les boutons et les icônes, doivent respecter les normes de lisibilité lorsqu'ils apparaissent sur des arrière-plans sombres. Comme indiqué dans l'application Jabra Sound+ ci-dessus, des couleurs autres que le blanc peuvent être utilisées pour le texte et les icônes.

Le site Material Design de Google dispose d'un générateur de palette de couleurs utile (sous "Outils pour choisir les couleurs") avec lequel les concepteurs peuvent créer et appliquer des palettes de couleurs à une interface utilisateur. Le niveau d'accessibilité des combinaisons de couleurs peut également être mesuré avec un outil de couleur compagnon.

« Utilisez des couleurs fortement contrastées pour améliorer la lisibilité. De nombreux facteurs affectent la perception des couleurs, notamment la taille et le poids de la police, la luminosité des couleurs, la résolution de l'écran et les conditions d'éclairage. Directives sur l'interface humaine d'Apple

Moins c'est plus : tirer parti de l'espace négatif

L'utilisation adroite de l'espace négatif est l'un des éléments fondamentaux d'une conception réussie de l'interface utilisateur sombre. Si elles sont mal conçues, les interfaces utilisateur sombres peuvent donner aux produits numériques une apparence lourde et envahissante. Pour contrebalancer, les concepteurs peuvent rendre les interfaces utilisateur sombres plus légères en tirant parti de l'espace négatif dans des conceptions clairsemées et minimalistes. Le design minimaliste concerne autant ce qui n'est pas là que ce qui est. Lorsqu'il est utilisé habilement, l'espace négatif rendra une interface utilisateur sombre plus scannable et permettra aux gens d'absorber les informations plus facilement.

Le compositeur français Claude Debussy a dit un jour : « La musique est l'espace entre les notes ». Le même sentiment est vrai pour la scannabilité - l'espace négatif entre les éléments est ce qui fait qu'une mise en page fonctionne. Une quantité généreuse d'espace négatif autour des éléments de l'interface utilisateur est ce qui leur donne une définition. Il met l'accent sur le contenu important et fournit l'espace de respiration nécessaire pour s'assurer que la conception ne semble pas dense et encombrée. Sans répit, le cerveau humain est moins susceptible de scanner les points d'intérêt et plus susceptible d'errer.

Les interfaces remplies de trop d'éléments et de texte sont le fléau d'une conception d'interface utilisateur sombre de haute qualité. En examinant attentivement la hiérarchie visuelle dans les interfaces utilisateur sombres, les concepteurs peuvent rendre leurs créations plus facilement scannables, améliorant ainsi l'expérience utilisateur.

Mots de style : typographie

Chaque morceau de texte dans les interfaces utilisateur sombres nécessite un examen minutieux. Le souci est double : lisibilité et contraste. Tout d'abord, il s'agit de la taille. Le texte doit être suffisamment grand pour une bonne lisibilité (un petit texte sur fond sombre est plus difficile à lire). Deuxièmement, il doit y avoir suffisamment de contraste entre le texte et l'arrière-plan.

La disponibilité de milliers de polices numériques facilite l'affichage de messages ayant un impact sur les en-têtes et les messages principaux. Les concepteurs peuvent atténuer les problèmes de lisibilité en augmentant le contraste et en ajustant la taille de la police, l'espacement des caractères et la hauteur de ligne pour un texte plus petit.

La recommandation W3C AAA pour le texte de taille normale (moins de 18 points s'il n'est pas en gras) est d'avoir un rapport de contraste d' au moins 7:1 . Cela s'applique également aux autres éléments de l'interface utilisateur : icônes, images de texte et étiquettes de texte, telles que les étiquettes de bouton. Il incombe aux concepteurs de s'assurer que tous les produits numériques sont accessibles à tous. Cela améliore non seulement la convivialité, et donc l'expérience utilisateur, c'est la loi dans la plupart des pays.

Il existe d'innombrables options disponibles pour les concepteurs pour trouver d'excellentes polices de caractères qui fonctionnent bien dans les interfaces utilisateur sombres. Google Fonts, Font Library et Adobe Typekit sont quelques-uns qui offrent une intégration facile d'applications ou de sites et un large éventail de choix.

Communiquer la profondeur : Élévation

Un thème sombre ne signifie pas plat. Avec les thèmes de lumière, l'éclairage, l'ombrage et les ombres créent une impression de profondeur. Avec les interfaces utilisateur sombres, c'est plus difficile car elles contiennent principalement des surfaces sombres avec des accents de couleur clairsemés. Néanmoins, les concepteurs peuvent utiliser trois ou quatre niveaux d'élévation avec des schémas de couleurs correspondants pour que le texte transmette de la profondeur.

Pourquoi la profondeur ? La plupart des systèmes de conception modernes utilisent un système de niveaux d'élévation pour communiquer la profondeur. Une impression de profondeur correspond au monde naturel. Notre vision a une perception en profondeur et nous vivons dans un monde en 3D. La profondeur aide à souligner la hiérarchie visuelle d'une interface. Les éléments au premier plan, par exemple, attirent l'attention sur eux-mêmes, comme une boîte de dialogue d'avertissement.

Les surfaces sont éclairées différemment pour signifier différents niveaux d'élévation. Plus la position d'une surface dans la pile d'altitude est élevée (plus proche d'une source de lumière implicite), plus la surface est claire. Une surface plus claire facilite la distinction de l'élévation entre les composants et aide à voir les ombres, ce qui rend les bords de chaque surface plus apparents.

Concevoir la couleur de la surface de chaque niveau demande du soin. Il est préférable de ne pas avoir plus de quatre ou cinq niveaux. Les concepteurs doivent tenir compte du contraste du texte à mesure que les surfaces montent dans la pile et deviennent plus claires. Si la couleur d'arrière-plan n'est pas assez sombre pour atteindre un niveau de contraste d'au moins 15,8:1 entre le texte blanc et la surface, le texte sur la surface surélevée la plus élevée (et la plus claire) ne passera pas la norme 4,5:1. Dans certains cas, il peut être préférable de spécifier la couleur du texte d'un élément en vrai noir (#000000) dans le système de conception pour obtenir un bon contraste sur un fond gris clair.

Inspiration de conception d'interface utilisateur sombre

En réfléchissant aux principes décrits ci-dessus, voici quelques excellents exemples de conception d'interface utilisateur sombre :

Atom Finance exploite un thème sombre pour un look sophistiqué et limite ses couleurs d'accent à trois. La mise en page utilise un espace négatif et une conception clairsemée et minimaliste pour un site Web financier complexe. Le site utilise bien un ombrage subtil pour indiquer différentes élévations de composants dans l'interface utilisateur.

Ces deux sites Web minimalistes à thème sombre utilisent une typographie audacieuse. Un ombrage soigné avec une seule couleur d'accent est utilisé conformément aux meilleures pratiques de conception d'interface utilisateur sombre.

Malgré les défis de travailler avec des thèmes sombres pour les applications SaaS, ce tableau de bord de visualisation de données pour IBM est exemplaire. Le nombre de couleurs d'accentuation est réduit au minimum et le site utilise des nuances subtiles pour afficher différentes élévations de l'interface utilisateur.

Ces applications mobiles respectent les meilleures pratiques de conception d'interface utilisateur sombre en utilisant uniquement le noir véritable pour les cadres, un ombrage approprié des éléments pour différents niveaux d'élévation et un nombre limité de couleurs d'accentuation.

Sommaire

La décision d'utiliser une conception d'interface utilisateur sombre plutôt qu'une conception traditionnelle doit être abordée avec discrétion. Il ne doit pas être choisi pour de mauvaises raisons : être branché, différent ou imiter le design de quelqu'un d'autre. Les concepteurs doivent avoir une justification solide de leur choix et tenir compte du contenu, du contexte d'utilisation et de l'appareil sur lequel le design apparaîtra.

Les thèmes sombres conviennent à certains produits numériques, mais sont difficiles à mettre en œuvre pour d'autres. La simplicité est la clé. Ils sont parfaits pour présenter du contenu minimaliste, des visualisations de données, des sites multimédias et des plateformes de divertissement. Ils ne conviennent pas aux plates-formes B2B complexes et gourmandes en données, aux pages contenant beaucoup de texte et à de nombreux contenus variés.

Pour les concepteurs courageux prêts à franchir de nouvelles frontières stylistiques et à explorer les interfaces utilisateur sombres à travers une lentille émotionnelle et esthétique, ils offrent un terrain de jeu passionnant aux possibilités infinies, du « côté obscur ».

Dites-nous ce que vous en pensez! S'il vous plaît laissez vos pensées, commentaires et commentaires ci-dessous.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Interfaces utilisateur sombres. Le bien et le mal. À faire et à ne pas faire.
• Les principes de conception et leur importance
• Explorer les principes de conception de la Gestalt
• Convaincant et émouvant - Un guide des principes de motion design
• Boostez votre UX avec ces principes de conception d'interaction réussis