Conception de systèmes linguistiques: pourquoi votre équipe en a besoin et comment le construire

Système de langage de conception

Pendant le développement, les équipes produit, conception et ingénierie utilisent diverses méthodes de gestion de projet. À mesure que les projets et les équipes se développent, la gestion devient de plus en plus difficile. Examinons comment les systèmes de langage de conception facilitent la vie dans de telles situations.

Actuellement, de nombreuses entreprises détenant des parts de marché importantes se développent exclusivement en produisant des logiciels. Pour d'autres, les logiciels sont une partie essentielle de leurs revenus. De plus, les grandes entreprises (Atlassian, Dropbox, LinkedIn, etc.) ont augmenté leurs équipes de conception de 65% en moyenne au cours des 12 derniers mois. (Design in Tech Report 2017)

Six grandes entreprises technologiques ont doublé leurs objectifs d'embauche de concepteurs au cours de la dernière moitié de la décennie. (TechCrunch)
La cohérence est l'un des sujets essentiels de l'expérience utilisateur. Le maintien de la cohérence dans le grand projet est souvent un problème en soi.

Alors que la portée d'un projet commence à croître, la productivité et la vitesse peuvent rencontrer des problèmes qui l'affectent négativement. Certains d'entre eux comprennent:

  • Mauvaise communication entre les équipes produit, conception et ingénierie.
  • Différences entre les sorties de conception.
  • Manque de cohésion et de structure dans le code conduisant à des problèmes de performances des produits.

Généralement, les équipes d'ingénierie ont des méthodes spécifiques pour mesurer la productivité et les normes. Par exemple, Agile, révision de code, couverture de code, test unitaire / d'intégration, etc.

Le design fonctionne différemment. Les méthodes de gestion sont plus abstraites et il n'y a pas beaucoup de contrôle ou de restriction sur le processus de développement. La bibliothèque de modèles ou le guide de style sont utilisés pour définir certaines normes.

Ainsi, chaque nouveau concepteur et chaque nouvelle partie du projet augmente le chaos dans le processus et ralentit la vitesse.

Pourtant, les équipes d'ingénierie codent dans le sens de la conception venant de l'équipe de conception. Cela se répétera et se présentera à l'utilisateur sous forme d'animation, de composant, d'interaction avec diverses fonctionnalités.

Côté utilisateur:

  • Mauvaise expérience utilisateur Une incohérence dans le produit affectera le sentiment de confiance et de familiarité avec le produit.
  • Performances Comme mentionné précédemment, des morceaux de code répétitifs qui provoquent des problèmes de structure et de performances.

Système de langage de conception

Le langage de conception est une collection d'éléments fonctionnels réutilisables (bouton, formulaire, en-tête, etc.). Les parties les plus descriptives sont l'icône, la couleur, la typographie, l'animation, etc. Ces éléments de l'interface sont définis selon certaines normes. Il peut également être décrit comme une forme d'expression du produit lui-même.

Le design crée l'harmonie sur toutes les plateformes lorsqu'un bon système de langage de conception est utilisé. Le maintien de normes de conception strictes peut aider à accroître la confiance et la familiarité avec les utilisateurs.

Fondamentaux

Nous pouvons supposer que le langage de conception est un vrai langage. Il ne peut pas se construire soudainement; il se développe pas à pas avec la marque au fil du temps.

Dans le processus de développement, il est nécessaire de voir des parties incohérentes. Développer ensuite des réglementations rétrospectives ou des éléments nouvellement appliqués. Ceux-ci doivent être cohérents avec la structure actuelle. En suivant quelques principes de base et des moyens pratiques, les équipes peuvent être convaincues que le système a évolué en permanence.

Terminologie

Divers concepts sont utilisés par les équipes pour créer leurs normes de conception préférées.

  • Modèle fonctionnel, composant: éléments tangibles réutilisables. Boutons, champs de formulaire, navigation, etc.
  • Motif perceptuel, styles: c'est plus abstrait que le motif fonctionnel. Cela améliorera émotionnellement la perception du message. Couleur, typographie, animation, etc.
  • Bibliothèque de modèles: documentation des modèles fonctionnels et perceptuels.
  • Guide de style: documentation des normes d'utilisation de la bibliothèque de modèles. Cela inclut l'utilisation du logo et les ajustements d'espace. Il comprend également des exemples de meilleures pratiques et des informations sur le processus de développement.

Langue partagée

Le langage de conception doit être compris par toutes les équipes impliquées afin que le projet puisse progresser de manière globale et cohérente. Une autre façon de voir les choses est de penser à ceux qui parlent la même langue. Il est beaucoup plus facile de communiquer ce qui est nécessaire à une personne qui utilise la même langue qu'à une personne qui ne l'utilise pas.

Le langage de conception répondra aux questions suivantes. Celles-ci sont fréquemment posées par les équipes de conception et d'ingénierie au cours du projet:

  • Quelle nuance de bleu utilisons-nous?
  • Pouvez-vous redline ceci pour moi?
  • Où est notre logo?
  • Ce modèle a-t-il été utilisé ailleurs?
  • Pouvez-vous reconstruire cela, il ne correspond pas à la conception?
  • Quelle est la dernière documentation?
  • Comment construisons-nous ce modèle?
  • Où sont nos composants?

Pour qu'un grand système de langage de conception réussisse, un guide de style holistique doit être utilisé. Ce guide comprend des composants de produit, de conception et d'ingénierie et des directives doivent être utilisées. Pour cela, les critères suivants doivent être respectés:

  • Efficacité Les définitions des composants, des couleurs et des éléments doivent être faciles à comprendre. Cela peut être fait en nommant avec une intensité visuelle ou des métaphores.
  • Meilleures pratiques Les meilleures pratiques pour l'utilisation des outils doivent être déterminées par des exemples de code.
  • Sensation de la marque Sentiment que la marque souhaite refléter du côté des utilisateurs. Cela pourrait être vif et énergique, ludique et amical, décisif et certain, équilibré et stable, calme et doux, etc. Cela devrait être fait en conséquence avec des animations et des utilisations de couleurs qui rendront les choses un peu plus faciles.
  • Couleur et iconographie et typographie Il est important d'utiliser la couleur, la typographie et les icônes pour soutenir visuellement le message. Concevoir des icônes adaptées au sens de la marque renforcera le sens du message.
  • Bibliothèque de modèles Une bibliothèque de modèles est une collection d'éléments de conception d'interface utilisateur.
  • Animation L'un des sujets fondamentaux pour offrir la sensation de marque à l'utilisateur.
  • Accessibilité pour les parties prenantes Le guide de style doit être accessible à tous. Si possible, il peut être affiché dans un endroit facilement visible pour tout le monde dans l'environnement de bureau. Cela peut les aider à voir les parties manquantes et renforcer la familiarité avec les membres de l'équipe.
  • Accessibilité pour l'utilisateur Une fois la couleur et la définition des composants en place, créez-les selon les normes a11y, ce qui vous permet d'atteindre un public plus large.
  • Guide La manière dont l'équipe contribuera aux processus doit être explicite.

Comment commencer?

Tout sonne bien jusqu'à présent, mais si vous ne planifiez pas vos processus, vous devrez peut-être rapidement résoudre une tâche compliquée.

Lors de la création de votre système de langage de conception, il est avantageux d'agir selon la culture de votre équipe. Vous devez définir des critères que tout le monde est prêt et disposé à suivre.

Règles (strictes - lâches)

Règles strictes: il existe des règles et des processus précis en place qui sont rigoureusement suivis.

Règles souples: la convivialité de la marque et l'utilité de la page ont priorité sur la cohérence visuelle parfaite.

Par exemple depuis Airbnb:

  • Spécifications standardisées.
  • La conception est entièrement synchronisée avec l'équipe d'ingénierie.
  • Processus strict pour introduire de nouveaux modèles.
  • Documentation complète et détaillée.

De TED:

  • Croquis simple sur des spécifications détaillées.
  • Documentation simple.
  • Gérer les inconvénients et choisir une direction.

Organisation (centralisée - distribuée)

Modèle centralisé: les règles et les modèles sont gérés principalement par un groupe de personnes.

Modèle distribué: où chaque personne qui utilise le système est également responsable de sa maintenance et de son évolution.

Pièces (Modulaire - Intégré)

Une structure modulaire offre la possibilité de travailler avec des équipes d'ingénieurs entières. Ainsi, il pourrait rapidement produire des produits adaptés à toutes les plateformes. Si vous créez des conceptions conceptuelles à partir d'un message, la méthode d'intégration sera plus utile.

Les styles vont et viennent Le bon design est une langue, pas un style - Massimo Vignelli

Conclusion

Le système de langage de conception fournit un standard pour la communication de marque entre les équipes. Il vous permet également de spécifier et de mettre à disposition les sentiments ou messages que vous souhaitez transmettre à l'utilisateur.

Merci à Turgay Mutlay pour les illustrations;)

-

Vous pouvez me suivre sur Medium, LinkedIn, Twitter, Dribbble, GitHub!

Ressources

Design Language - Wikipedia How to Monetize Happiness - Harvard Business School Using Visual Loudness for Better Wayfinding - Tom Osborne Animation in Design Systems - Sarah Drasner Integrating Animation into a Design System - Alla Kholmatova Building a Visual Language - Airbnb Contrast Checker - Webaim.org w3 .org - Initiative d'accessibilité Web Accessibility Developer Tools - Extension Chrome par Google