Les éléments constitutifs du design

«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 pour le langage, les polices, les couleurs, les formes et les icônes sont pour le design visuel. 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 pour la communication avec d'autres personnes. 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 était 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, 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 fournit le langage de conception?

En réunissant les équipes de projet sous une seule langage partagé, un projet peut avancer avec clarté, cohésion et rapidité.

Cohérence

Le design numérique a 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 à souviens-toi mieux. 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 indiquer 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 mettons fortement l'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.

Un moyen d'innover

Avec une concurrence aussi intense 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éer 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éer n'importe quel produit de consommation complet: research-ideate-design-validate-implement. C'est ainsi que nous nous assurons que le langage fonctionnera pour notre public cible.

Recherche

Souvent, le VDL est le produit 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.

L'audit UI

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.).

Comprendre comment les utilisateurs perçoivent la marque

Lorsque vous travaillez sur le visuel langue, 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 la marque (la façon dont les utilisateurs perçoivent réellement 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;
• Revenu moyen: 75 000 USD par an
• Ils se soucient de:
  • Être organisé et commandé
  • Efficacité et productivité pour leur permettre de profiter de leur propre temps
• Leurs attentes
  • Contribuer à quelque chose de plus grand qu'eux-mêmes
  • 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 design en fonction des besoins de notre 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, grande concentration sur la normalisation, identité unique – et la faiblesse suivante – incohérence avec l'iconographie, surutilisation des effets de flou.

Cette analyse nous a aidés à identifier quatre grandes directions que les marques ont suivies lors de la création de leurs produits:

1. Empathique pour moi (conception adaptée aux besoins du public cible; conception qui démontre une véritable empathie pour l'humain et qui reflète vraiment le public)
2. Design nouveau (design utilisant des styles visuels et des modèles d'interaction innovants)
3. Design banal (design utilisant des éléments de style conservateurs)
4. Standardisé pour tous (design standardisé lourd

Nous plaçons chaque marque sur l'intrigue avec ces quatre directions.

Ce processus a aidé nous pour identifier les opportunités pour le langage Huawei:

• Langage de conception évolutif
  Le langage devrait également évoluer sur tous les appareils et sur les applications de développeurs tiers.
• ADN de conception unique
  Le langage doit être unique et distinct des principaux concurrents.
• Soyez audacieux mais intemporel
  Le langage doit être durable.

Définir les exigences pour la hiérarchie visuelle [19659029] 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.

Aujourd'hui, une navigation en zone inférieure 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.

Idéation: définition d'une vision de conception

Création d'une philosophie de conception

Imaginez que vous devez concevoir un langage qui être 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 toute conception visuelle 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.

Selon cette philosophie, le design devrait aider à réaliser l'harmonie entre les gens 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.

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 (l'effet d'ergonomie 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.

Conception et test: construction, test, Itérer

Créer une signification dans chaque élément de conception / décision de conception

Tout comme nous avons des règles d'utilisation des mots dans les phrases dans un langage naturel, nous devrions avoir des règles d'utilisation des éléments visuels dans le 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.
• Il ne devrait pas y avoir d'unités isolées dans le langage visuel.

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.

] 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, tout ce dont ils ont besoin est la boîte à outils et ils sont configurés pour maintenir la cohérence.

Il n'y a pas d'éléments visuels aléatoires dans un langage visuel.

Tester tôt, tester 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 de comprendre cela 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 incorporé le langage visuel dans des prototypes fonctionnels et les avons testés à l'intérieur 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.

Implémentation

Si vous avez eu la chance 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.

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 de 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 lorsqu'elle démarre.

Chaque entreprise a besoin d'un cadre supérieur soucieux de la conception 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.

Un langage de conception visuelle robuste est le cœur d'une bonne expérience utilisateur

Le langage visuel peut avoir un impact considérable 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 il 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.

(cc, ra, il)