Les éléments constitutifs du design – Smashing Magazine


A propos de l’auteur

Gleb a plus de 15 ans d’expérience dans la conception de produits, d’interfaces utilisateur et d’UX dans les écosystèmes Web, mobiles et TV. Gleb a légitimement acquis une suite mondiale…
Plus à propos
Gleb

Un langage de conception visuelle robuste est la pierre angulaire d’une bonne conception. Voici comment l’équipe de Fantasy a conçu un système d’exploitation mobile pour Huawei.

«Le design n’est pas seulement à quoi il ressemble et se sent. Le design, c’est comme ça qu’il fonctionne.

– Steve Jobs

Comme les mots écrits sont à la langue, les polices, les couleurs, les formes et les icônes sont à la conception visuelle. Un langage de conception visuelle efficace agit non seulement comme un cadre de communication pour toutes les parties prenantes d’une équipe de développement de produits, mais il unit une marque et ses clients pour garantir que l’identité de marque d’une entreprise correspond à la perception de la marque d’un client.

Nous utilisons le langage comme outil de communication avec les autres. Les écrivains utilisent des mots pour communiquer avec leurs lecteurs, tandis que les concepteurs utilisent un langage visuel pour communiquer avec leurs utilisateurs. Polices, couleurs, formes, éléments visuels tels que les icônes – ce sont des éléments du langage de conception. Un langage de conception efficace rationalise la communication.

Pendant que je travaillais chez Fantasy en 2016, mon équipe a été chargée de concevoir l’interface pour le système d’exploitation mobile de Huawei (interface EMUI 5). J’étais personnellement responsable du langage de conception visuelle de cet OS. Étonnamment, la société ne disposait pas de sa propre langue au début; au lieu de cela, ils s’appuyaient sur une version personnalisée d’Android qui était en proie à des incohérences et manquait d’une vision cohérente. Cela était en grande partie dû à l’existence de plusieurs équipes et de multiples rôles fonctionnels avec des compétences et des perspectives différentes, tous saisissant les pailles pour inventer un moyen de communiquer. Les concepteurs UX, les concepteurs d’interaction, les concepteurs visuels et les graphistes avaient tous travaillé sur le système d’exploitation dans le passé, utilisant tous leurs meilleurs efforts pour communiquer.

Sans un système de communication uniforme, non seulement l’expérience utilisateur était confuse et déroutante, mais il était extrêmement difficile d’intégrer les modifications dans une conception finale. C’était une véritable tour de Babel.

Les écrivains utilisent des mots pour communiquer avec leurs lecteurs, tandis que les concepteurs utilisent un langage visuel pour communiquer avec leurs utilisateurs.

Que propose le langage de conception?

En unifiant les équipes de projet sous un même langage, un projet peut avancer avec clarté, cohésion et rapidité.

Cohérence

Le design numérique présente peu de contraintes physiques par rapport aux disciplines industrielles. Cela donne aux concepteurs beaucoup de pouvoir pour expérimenter et proposer une variété de solutions à n’importe quel défi donné. Cependant, cela peut facilement conduire à des expériences utilisateur décousues.

Pour assurer la cohérence de la conception, il est essentiel de définir des composants réutilisables et multiplateformes et des options de style. Une conception cohérente facilite l’expédition de produits sur une multitude de plates-formes et d’appareils, ce qui est particulièrement crucial pour des entreprises comme Huawei.

Rappel de marque

Lorsqu’ils interagissent avec un produit doté d’un langage visuel fort, les utilisateurs ont tendance à mieux s’en souvenir. Malheureusement, la majorité des produits disponibles sur le marché ont des conceptions génériques. Il est trop facile de confondre un produit avec un autre lorsqu’ils partagent les mêmes styles visuels.

La création d’une identité visuelle forte est un objectif que les équipes de conception doivent énoncer lorsqu’elles travaillent sur la conception visuelle. C’est la personnalité d’un produit numérique! Les couleurs, les polices de caractères, les photos, les illustrations, les animations font partie d’une marque et doivent être conçues de manière à aider les gens à se souvenir du produit. Lorsqu’un langage de conception authentique est suivi de manière cohérente, il crée une visibilité pour la marque.

Clarté

Nous avons mis un fort accent sur la clarté – nous voulions rendre notre interface graphique propre, pas encombrée. En suivant une approche minimaliste, nous avons minimisé le nombre d’éléments que les utilisateurs ont sur chaque écran et créé une expérience très ciblée.

Concept de design de l'interface EMUI 5
La conception minimaliste aide à concentrer l’attention des utilisateurs sur les éléments importants de votre conception. Concept EMUI 5.0 par Fantasy (concept de conception de l’interface EMUI 5) (Grand aperçu)

Une façon d’innover

Avec tant de concurrence sur le marché du téléphone, les entreprises investissent des ressources importantes pour inciter les gens à essayer leurs produits. Les entreprises investissent dans l’innovation et tentent de percer de nouveaux horizons pour attirer les utilisateurs et susciter leur intérêt. La conception visuelle est souvent le moyen le plus rapide et le moins cher pour un produit d’innover.

Comment créons-nous un langage de conception?

Pour moi et mes équipes, le processus de création d’un langage de conception, nous suivons la même rubrique que nous créerions tout produit de consommation complet: research-ideate-design-validate-implement. C’est ainsi que nous nous assurons que la langue fonctionnera pour notre public cible.

Recherche

Souvent, le VDL est le produit clé le plus important que nous créons. Et comme pour chaque produit que vous concevez, la recherche doit toujours être la première. Lorsque nous avons commencé ce projet Huawei, il était important de comprendre les opportunités de notre conception. Jeshua Nanthakumar, un concepteur UX principal sur ce projet, et son équipe de recherche UX ont analysé tous les OS mobiles disponibles sur le marché et identifié la gamme complète des défis généralement rencontrés par les utilisateurs.

La vérification de l’interface utilisateur

Comme je l’ai mentionné ci-dessus, la cohérence était l’un des objectifs de la création d’un langage de conception partagé. Il est essentiel de standardiser la conception visuelle. C’est pourquoi avant même de commencer à travailler sur un langage visuel, nous avons décidé de réaliser un audit de l’interface utilisateur. Notre objectif était de comprendre l’anatomie du système d’exploitation Android.

Nous avons décomposé l’ensemble du système d’exploitation mobile en éléments atomiques – couleurs, formes, ombres, lignes, transitions. En décomposant le design, notre équipe a pu voir comment les pièces individuelles fonctionnent ensemble et forment un plus grand ensemble. À la fin de l’audit de l’interface utilisateur, nous avions regroupé tous les éléments qui composent le produit numérique (boutons, barres de navigation, icônes, etc.) en catégories distinctes.

Comprendre comment les utilisateurs perçoivent la marque

Lorsque vous travaillez sur le langage visuel, il est essentiel de bien comprendre pour qui vous concevez et comment ils perçoivent votre marque. Idéalement, l’identité de la marque (la façon dont la marque veut être perçue par les utilisateurs) doit correspondre à l’image de marque (la façon dont les utilisateurs réellement percevoir la marque). Les designers ont un impact direct sur l’identité de la marque. Styles esthétiques, langage et ton, iconographie et illustrations – tous ces éléments sont des éléments d’identité de marque.

Notre objectif était de créer un langage de conception innovant et personnalisé pour son public. Pour comprendre comment vos utilisateurs perçoivent la marque Huawei, notre équipe a investi dans la recherche d’utilisateurs. Nous savions que le langage de conception devait répondre avec succès aux besoins des sensibilités de conception tant orientales qu’occidentales, nous avons donc catégorisé de grands groupes d’utilisateurs et créé des résumés sur la base des informations disponibles sur nos groupes cibles. Chaque résumé sur notre public contenait les blocs d’informations suivants – données démographiques, ce qui les intéressait et leurs attentes. Voici un exemple du résumé du groupe de clients nord-américains:

  • Le public principal de Huawei vit à la fois dans des environnements urbains et suburbains;
  • Ils sont motivés par les affaires, le statut social et l’organisation personnelle;
  • Tranche d’âge 30-64 ans;
  • Revenu moyen: 75 000 USD par an
  • Ils se soucient de:
    • Être organisé et ordonné
    • Efficacité et productivité pour leur permettre de profiter de leur propre temps
  • Leurs attentes
    • Contribuer à quelque chose de plus grand qu’eux
    • Maximiser la vie et vivre pour le bonheur

Avec l’idée que le design doit correspondre au style de vie du public et être extrêmement raffiné, nous avons évalué chaque décision de conception en fonction des besoins de nos segments cibles. Cette compréhension vous donnera une raison pour votre direction visuelle.

Analyser les principaux concurrents

Pour identifier les opportunités de conception stratégique, notre équipe a effectué l’analyse des concurrents. Nous avons identifié quatre concurrents majeurs qui avaient des langages de conception solides et nous nous sommes concentrés sur l’identification de leurs forces et faiblesses. Par exemple, lorsque nous avons évalué Apple iOS, nous avons mentionné les points forts suivants du langage – évolutif sur tous les appareils, l’accent mis sur la normalisation, l’identité unique – et la faiblesse suivante – l’incohérence avec l’iconographie, la surutilisation des effets de flou.

Icônes des quatre principaux concurrents de Huawei.
Quatre concurrents majeurs de Huawei au moment de notre analyse. Chaque marque représentait une grande partie du marché et avait son propre langage visuel robuste. (Grand aperçu)

Cette analyse nous a permis d’identifier quatre grandes directions que les marques ont suivies lors de la création de produits:

  1. Empathique pour moi (conception adaptée aux besoins du public cible; conception qui démontre une réelle empathie pour l’humain et reflète vraiment le public)
  2. Conception nouvelle (conception qui utilise des styles visuels et des modèles d’interaction innovants)
  3. Conception courante (conception qui utilise des éléments de style conservateurs)
  4. Standardisé pour tous (conception standardisée lourde)

Nous mettons toutes les marques sur l’intrigue avec ces quatre directions.

Diagramme en quadrant du langage visuel de Huawei
Identifier les opportunités pour le langage visuel de Huawei (Grand aperçu)

Ce processus nous a aidés à identifier les opportunités pour la langue Huawei:

  • Langage de conception évolutif
    La langue devrait également être adaptée à tous les appareils et aux applications de développement tierces.
  • ADN de conception unique
    La langue doit être unique et distincte des principaux concurrents.
  • Soyez audacieux mais intemporel
    La langue doit être durable.
Définir les exigences pour la hiérarchie visuelle

Lorsque les chercheurs UX ont analysé les plaintes des utilisateurs typiques, ils ont constaté que l’emplacement des éléments interactifs clés était l’un des problèmes les plus courants mentionnés par de nombreux utilisateurs mobiles. En 2016, les écrans mobiles deviennent de plus en plus grands, mais l’emplacement des éléments fonctionnels clés dans Android est resté le même – la zone supérieure de l’écran. En conséquence, les utilisateurs ont dû étirer leurs doigts ou changer leur prise pour interagir avec les éléments.

Diagramme des zones accessibles sur les appareils mobiles
Zone de pouce: à quel point il est facile pour nos pouces de toucher des zones sur l’écran d’un téléphone. (Crédit d’image: Luke W) (Grand aperçu)

Aujourd’hui, la navigation de fond est une norme de l’industrie, mais en 2016, la situation était un peu différente. Nous avons contacté l’équipe d’ingénierie de Huawei avec ces informations et posé des questions sur la faisabilité technique du déplacement des commandes vers la zone inférieure de l’écran – cette zone est plus confortable pour l’interaction avec l’utilisateur. L’équipe d’ingénierie a confirmé qu’il était possible de déplacer les éléments et nous avons aidé à définir le nouvel emplacement par défaut pour les éléments fonctionnels.

Concept de design de l'interface EMUI 5
Les commandes fonctionnelles sont situées en bas de l’écran – dans la zone facilement accessible. (Concept de design de l’interface EMUI 5 par Fantasy) (Grand aperçu)

Idéation: définir une vision de conception

Créer une philosophie du design

Imaginez que vous ayez besoin de concevoir un langage qui sera intégré dans des produits qui seront utilisés par des personnes partout dans le monde. Le langage naturel que nous utilisons dans les communications interpersonnelles ne peut pas être séparé d’une culture parce qu’il a une relation étroite avec l’attitude ou le comportement des locuteurs des langues. Le langage numérique est absolument le même – il devrait sembler naturel pour les clients des Amériques, d’Europe, d’Asie, d’Afrique et d’Océanie.

Le succès de tout design visuel dépend fortement de la façon dont les gens le perçoivent. De nombreux facteurs influencent la perception humaine, et la partie importante va à la psychologie. Pour créer un design sophistiqué, vous devez considérer la signification des formes et l’impact qu’elles ont sur l’esprit des utilisateurs.

Créer une philosophie du design est extrêmement difficile, et vous ne pouvez pas le faire seul. C’est pourquoi j’ai travaillé avec Abigail Brody, un ancien directeur créatif d’Apple qui a rejoint Huawei en septembre 2015 en tant que chef de la conception UX et vice-président des appareils Huawei. Chez Apple, Abigail était responsable de la conception iOS. C’est elle qui m’a décrit la méthodologie du langage visuel.

Ensemble, nous passons beaucoup de temps à essayer de trouver la direction du design visuel, et nous avons décidé d’utiliser la philosophie du design organique comme fondement de notre langage de conception. Le design organique est centré sur l’utilisation de la nature comme la plus grande source d’inspiration.

Chaise Frank Lloyd Wright
La conception organique a été lancée par Frank Lloyd Wright qui croyait en la création d’une harmonie entre les gens et la nature. (Crédit d’image: museiitaliani) (Grand aperçu)

Selon cette philosophie, le design devrait aider à réaliser l’harmonie entre l’homme et la nature. Lorsque nous avons travaillé sur notre langage visuel, nous nous sommes concentrés sur l’incorporation de formes naturelles (courbes lisses et formes organiques) dans notre conception visuelle. En conséquence, tous les éléments visuels, tels que les boutons, les icônes et les formes, avaient une esthétique de conception organique.

Concept de design de l'interface EMUI 5
Les formes rondes sont l’une des choses qui différencient les objets organiques des objets non organiques. (Grand aperçu)
Utilisation de Motion Design pour créer une identité visuelle distincte

Il n’y a aucun doute sur l’importance du rôle que joue le mouvement dans la conception mobile. Pour de nombreux produits, le mouvement joue un rôle purement fonctionnel: il fournit des informations en retour sur l’action de l’utilisateur et connecte différents états de l’application mobile. Le mouvement bien conçu rend également les choses plus attrayantes et, comme nous le savons, les choses attrayantes fonctionnent mieux (le effet d’utilité esthétique dit que les gens sont plus tolérants aux problèmes mineurs d’utilisation lorsqu’ils trouvent une interface visuellement attrayante).

Notre équipe a mis des enjeux élevés sur la motion. Notre objectif ultime était d’utiliser le mouvement pour insuffler de la vie à nos produits – faire en sorte que l’interface soit vivante et dynamique. Nous avons écrit un manifeste de motion design avec des principes de conception solides. Chaque effet animé et transition que nous voulions introduire dans notre conception a été mesuré en fonction des avantages fonctionnels et émotionnels qu’il offre aux utilisateurs finaux.

Nous savons que les premières impressions d’une conception de produit sont particulièrement importantes. Et pour cette raison, notre objectif principal était de créer des moments magiques – surprendre et ravir les utilisateurs lorsqu’ils interagissent avec le système d’exploitation.

Cette vidéo montre les effets visuels que nous avons utilisés dans EMUI.

Conception et test: construction, test, itération

Faire cuire le sens dans chaque élément de conception / décision de conception

Tout comme nous avons des règles pour utiliser des mots dans des phrases dans un langage naturel, nous devrions avoir des règles pour utiliser des éléments visuels dans un langage visuel. Une sémantique forte est ce qui rend la communication visuelle efficace.

Lorsqu’une équipe travaille sur un langage visuel, elle doit prendre en compte deux règles:

  • Il n’y a pas d’éléments visuels aléatoires dans un langage visuel. Chaque élément sert un but.
  • Il ne devrait pas y avoir d’unités isolées dans le langage visuel. Chaque unité dans un langage visuel devrait faire partie d’un plus grand ensemble.
Concept de design de l'interface EMUI 5
L’effet animé derrière l’avatar de l’utilisateur est utilisé pour transmettre un sentiment d’appel actif. L’animation est à la fois significative et agréable. (Concept de conception de l’interface EMUI 5) (Grand aperçu)
Expérimentation et revue de conception

Il est impossible de créer un superbe design dès la première tentative. Le design est un processus itératif, et chaque fois que notre équipe a créé une nouvelle solution visuelle, ils l’ont évaluée en la comparant avec les solutions précédentes. La comparaison était visuelle – les écrans étaient placés côte à côte sur une planche, de sorte que tout le monde pouvait voir les pièces nécessitant un polissage supplémentaire. Les membres de l’équipe se réunissent lors d’examens de conception informels où ils discutent des avantages et des inconvénients des solutions individuelles.

Équipe examinant les conceptions sur écran d'ordinateur
Revue de conception en cours chez Fantasy Interactive (Grand aperçu)
Bibliothèques de modèles, guides de style et principes de conception

Les bibliothèques de modèles (blocs de construction réutilisables tels que les barres d’interface utilisateur), les guides de style et les principes de conception (principes qui permettent aux développeurs de propager le langage de conception dans leurs propres applications) sont des éléments essentiels du langage de conception. Ils constituent la base du système de conception – une ressource partagée que les équipes utilisent lorsqu’elles créent des interfaces. Le fait que nous ayons effectué un audit de l’interface utilisateur pendant la phase de recherche nous a aidés à classer les éléments de conception visuelle. Nous avons créé une boîte à outils pour tous ceux qui ont travaillé sur le projet. Ainsi, lorsqu’un nouveau membre rejoint une équipe, il n’a besoin que de la boîte à outils et il est configuré pour maintenir la cohérence.

Il n’y a pas d’éléments visuels aléatoires dans un langage visuel. Chaque élément sert un but.

Testez tôt, testez souvent

Le projet Huawei EMUI était un projet extrêmement important pour Huawei Corporation. Il était essentiel de s’assurer que la langue que nous avons définie fonctionne pour les utilisateurs. Et la seule façon d’obtenir cette compréhension est de tester notre conception dès que possible.

Nous avons suivi une technique simple mais efficace – construire, mesurer, apprendre. En suivant cette approche, l’équipe de conception n’a pas reporté la conception des tests jusqu’à la sortie. Nous avons intégré le langage visuel dans des prototypes fonctionnels et les avons testés tous les deux au sein de notre groupe (dogfooding) et à l’extérieur (avec de vrais utilisateurs). Les commentaires recueillis lors des tests nous ont permis de comprendre ce qui fonctionnait / ne fonctionnait pas pour les utilisateurs.

Réunion de l'équipe produit chez Fantasy Interactive
Partager les résultats des tests avec les équipes produits de Fantasy Interactive (Grand aperçu)

la mise en oeuvre

Si vous avez eu la possibilité d’utiliser l’interface Huawei EMUI 5, vous vous demandez probablement: “Hum, cela ne ressemble pas exactement à ce que Gleb a dit!” Et c’est vrai.

Capture d'écran de Huawei OS
Version de production de l’interface Huawei EMUI 5. (Crédit d’image: androidauthority) (Grand aperçu)

C’est une triste réalité que presque aucune équipe de conception n’est responsable de la mise en œuvre de cette solution. Malheureusement, de nombreuses solutions que nous avons proposées à l’équipe d’ingénieurs n’ont pas été mises en œuvre correctement, voire pas du tout. En conséquence, le langage de conception que nous avons créé et le langage de conception que l’utilisateur final a vu dans les produits Huawei se retrouvent comme deux animaux différents. Mais c’est purement mon avis. En 2018, Huawei a dépassé Apple dans les ventes de smartphones. L’interface utilisateur était un élément essentiel à la confiance des utilisateurs.

D’après mon expérience, le défi de la mise en œuvre est courant pour les grandes entreprises. Lorsque les concepteurs qui ont créé la langue ne sont pas invités à implémenter cette langue dans le produit, les résultats finaux seront toujours compromis. Ce qui se passe généralement, c’est que l’équipe d’ingénierie suit un chemin de moindre résistance – elle ajuste les solutions de conception aux contraintes techniques auxquelles elle est confrontée au démarrage.

Chaque entreprise a besoin d’un cadre supérieur soucieux du design et prêt à se battre pour cela. C’est un fait bien connu que lorsque l’original minimiser l’animation dans macOS qui a été proposé par l’équipe Apple motion design, l’équipe d’ingénierie a dit qu’il était impossible de mettre en œuvre cela. À cette époque, Steve Jobs a insisté sur le fait que cette animation est un must-have pour MacOS. En conséquence, cette animation est devenue non seulement la transition la plus mémorable pour les nouveaux utilisateurs, mais aussi l’une des choses qui contribuent à une bonne UX dans MacOS.

Une capture d'écran de Mac OS
L’animation de fenêtre instantanément mémorable de Mac OS (Grand aperçu)

Un langage de conception visuelle robuste est le cœur d’une bonne UX

Le langage visuel peut avoir un impact spectaculaire sur l’expérience utilisateur. Il est non seulement capable de réduire la friction en rendant l’interface utilisateur plus prévisible, mais aussi de créer du plaisir. En associant une grande forme avec une excellente fonction, nous aurons une excellente expérience utilisateur.

Le langage visuel est un sous-produit de la conception du produit et nécessite un processus de conception similaire. Il est itératif et nécessite une validation à chaque étape du processus. Lorsque vous créez un langage visuel, vous établissez un nouvel écosystème pour les concepteurs, et cet écosystème crée l’harmonie entre les différentes équipes impliquées dans le développement de produits.

Smashing Editorial
(cc, ra, il)



Close Menu