Création d'un guide de style d'interface utilisateur pour une meilleure UX

Écoutez la version audio de cet article

Garantir une conception de produit et une expérience utilisateur cohérentes

En 1976, Johnny Cash sort One Piece at a Time , une chanson qui raconte l'histoire d'un travailleur de l'automobile de Detroit qui passe vingt ans à récupérer des pièces de Cadillac volées sur la chaîne de montage.

Malheureusement, lorsque le travailleur commence à construire sa Cadillac bootleg, il constate que de nombreuses pièces sont incompatibles car les principales caractéristiques de conception ont changé au fil des ans. Avec un peu d'ingéniosité, la voiture personnalisée se rassemble, mais c'est un méli-mélo disgracieux qui inspire le ridicule partout où il va.

L'arrière avait l'air un peu drôle aussi
Mais nous l'avons mis ensemble et quand nous avons traversé
Eh bien, c'est à ce moment-là que nous avons remarqué que nous n'avions qu'une seule nageoire caudale.

Les concepteurs et les développeurs d'expériences numériques d'aujourd'hui sont confrontés à un défi similaire. Le temps qui passe est un ennemi redoutable capable de bouleverser la continuité des produits numériques. Avec le temps, les membres de l'équipe vont et viennent, les tendances évoluent et les fonctionnalités changent. De plus, le rythme rapide de notre paysage numérique moderne signifie que l'innovation produit se produit en trimestres, et non en années.

Si une entreprise ou une équipe de conception ne dispose pas d'un enregistrement partagé qui documente l'aspect et la convivialité souhaités d'un produit, des incohérences visuelles et expérientielles surgiront, les utilisateurs deviendront frustrés et la réputation de la marque en souffrira.

Les guides de style d'interface utilisateur sont un outil de conception et de développement qui apporte de la cohésion à l'interface utilisateur et à l'expérience d'un produit numérique. À la base, ils :

• Enregistrez tous les éléments de conception et les interactions qui se produisent dans un produit
• Répertoriez les composants essentiels de l'interface utilisateur tels que les boutons, la typographie, la couleur, les menus de navigation, etc.
• Documentez les composants UX importants tels que les états de survol, les remplissages déroulants, les animations, etc.
• Contient des éléments en direct et des extraits de code que les développeurs peuvent référencer et utiliser

Avant d'examiner de plus près comment assembler un guide de style d'interface utilisateur de niveau expert, il est important de comprendre qu'il n'existe pas d'approche unique. La valeur des guides de style s'étend au-delà des grandes marques avec de grandes équipes de produits. Les moyennes et petites entreprises à la recherche d'une expérience numérique cohérente bénéficient également lorsque les guides de style d'interface utilisateur sont personnalisés en fonction de leurs besoins spécifiques.

Inclure ces composants de conception cruciaux dans les guides de style de l'interface utilisateur

Les concepteurs familiarisés avec les directives d'identité de marque ne devraient pas avoir de problème pour passer aux guides de style d'interface utilisateur, car il existe un chevauchement important avec de nombreux composants de conception cruciaux qui doivent être inclus.

Conseil de pro : ne documentez que les composants de conception pertinents. Les informations superflues rendent les guides de style d'interface utilisateur gonflés et difficiles à utiliser.

Schéma de typographie

La typographie est l'un des éléments de conception d'interface les plus courants, il ne suffit donc pas de simplement répertorier les noms des polices de caractères utilisées dans un produit. Des instructions claires doivent être données pour les titres, les sous-titres, les en-têtes (H1, H2, H3), le corps du texte et les légendes.

De plus, les tailles de police doivent être fournies, les poids indiqués et les styles définis. La hauteur de ligne et le crénage sont également nécessaires, et c'est une bonne idée de choisir une police de référence à utiliser lorsque des circonstances particulières surviennent.

Mises en page réactives

Lorsque les produits numériques sont conçus autour de systèmes de grille réactifs, les guides de style d'interface utilisateur doivent traiter les dispositions d'interface sur toutes les tailles d'écran. Cela signifie inclure des notes et des exemples d'espacement, de remplissage et de placement. Il est également utile d'afficher les superpositions du système de grille du produit par rapport aux différentes tailles d'écran.

Le grand objectif ici est de fournir suffisamment de contexte pour éviter le besoin de conceptions d'écran uniques. Au fil du temps, ceux-ci s'additionnent et minent la cohésion d'un produit numérique.

Palette de couleurs

L'utilisation incohérente des couleurs est l'un des moyens les plus rapides de détruire une interface. Les combinaisons de couleurs doivent donc être clairement définies. Lister les couleurs et leurs valeurs (HEX, UIColor) est un bon début, mais des appariements spécifiques et des exemples d'utilisation doivent également être donnés.

Si le guide de style de l'interface utilisateur fait référence à un ensemble de directives d'identité de marque, vérifiez si un schéma secondaire de couleurs d'accentuation plus claires est disponible. Sinon, créez le vôtre et documentez-le. Une sélection de niveaux de gris est également utile.

Boutons

Presque toutes les interfaces incluent des boutons, alors prenez le temps de documenter leurs tailles, styles, couleurs, emplacements, espacements et éléments typographiques. Si plusieurs boutons sont utilisés dans différents contextes, précisez-le également.

Composants d'interface utilisateur supplémentaires pouvant être nécessaires

• Iconographie
• Info-bulles et popovers
• Modaux
• Éléments de formulaire
• Tableaux de données
• Menus de navigation
• Graphiques et visualisations de données
• Onglets
• Interrupteurs marche-arrêt
• Dialogues
• Listes de la grille de contenu
• Listes verticales
• Barres d'outils
• Sélecteurs de date et d'heure
• Indicateurs de chargement
• Cases à cocher
• Alertes
• Menus déroulants
• Curseurs
• Steppers
• Pagination

Organiser et contextualiser les instructions de conception

En plus des composants d'interface utilisateur indispensables, il existe un certain nombre de fonctionnalités pratiques qui facilitent la référence, la navigation et la mise en œuvre des guides de style d'interface utilisateur pour les entreprises et les équipes de conception.

Table des matières

Une table des matières bien organisée et clairement marquée est un moyen simple d'aider tout le monde à trouver rapidement ce qu'il y a à l'intérieur du document.

Notes de contexte

Il est impossible de prédire chaque décision de conception problématique qui peut survenir au cours de la durée de vie d'un produit. Par conséquent, articuler la logique de conception derrière les composants d'interface utilisateur souvent utilisés peut faciliter la résolution de scénarios imprévus.

Par exemple:

« À la base, notre produit consiste à présenter les meilleures images d'architecture du monde entier. Pour cette raison, la mise en page de notre interface donne la priorité aux images volumineuses et éclatantes au texte. Dans la mesure du possible, faites des images le point central de notre produit.

Instructions d'espacement et de positionnement

L'espacement et le positionnement sont souvent traités dans la section "Mises en page réactives". Selon la complexité du produit numérique, les instructions peuvent consister en des « règles empiriques » générales ou être assez granulaires.

À faire et à ne pas faire

Souvent, il peut être utile de définir clairement les choses à faire et à ne pas faire en matière de conception. Par exemple:

• " Utilisez la version en mot-symbole blanc du logo de notre société dans le pied de page de l'interface."
• « N'utilisez pas d'autres versions de couleurs du mot-symbole de notre société sur des fonds noirs. »

Les choses à faire et à ne pas faire évitent les débats et font gagner du temps à la conception et au développement, mais il est toujours préférable de fournir une note de contexte comme celle-ci :

« Cette liste de choses à faire et à ne pas faire couvre un large éventail de décisions de conception importantes, mais elle ne prend pas en compte toutes les utilisations abusives possibles des éléments de conception de notre produit. Dans cet esprit, faites preuve de discernement en cas d'incertitude et faites des choix qui reflètent avec précision l'aspect général de notre produit.

Éléments en direct et extraits de code

Les directives d'identité de marque sont généralement des documents statiques, mais les guides de style d'interface utilisateur incluent des éléments dynamiques qui fonctionnent comme ils le feraient dans le produit final, ce qui signifie que les boutons se comportent comme des boutons, que les menus déroulants se déroulent réellement et que les animations sont animées.

Les extraits de code permettent aux développeurs de copier et coller rapidement le code des éléments en direct dans le back-end d'un produit.

Rendre les guides de style d'interface utilisateur facilement accessibles pour les équipes de conception

Maintenant que nous comprenons comment créer un guide de style et les composants et fonctionnalités inclus dans un guide de style d'interface utilisateur, nous portons notre attention sur le partage et la communication. Plus précisément, quelles sont les options pour héberger les guides de style d'interface utilisateur ?

Traditionnellement, les guides de style d'interface utilisateur existaient sous forme de pages Web. Cela offre aux concepteurs et aux développeurs un accès facile et permet aux éléments de conception de fonctionner comme ils le feraient dans le produit.

Plus récemment, une poignée de plates-formes basées sur le cloud ont vu le jour, permettant aux équipes de concevoir, de prototyper et de tester des produits en collaboration. Ces mêmes plates-formes sont également capables d'héberger des guides de style d'interface utilisateur et de permettre aux membres de l'équipe d'échanger des commentaires et des idées en continu.

Voyons comment quelques-unes de ces plates-formes décrivent leur approche des guides de style d'interface utilisateur.

Figma

"Créez des systèmes de conception avec des composants d'interface utilisateur liés que toute l'équipe peut utiliser. Recevez des mises à jour lorsque des modifications sont apportées aux composants partagés »

Phase

"Les bibliothèques telles qu'elles auraient toujours dû être : couleurs, propriétés et éléments… même le moment de la transition - tout dans un composant maintenant. Modifier en place-tout est un maître. Remplacez tout ce dont vous n'avez pas besoin, par instance.

InVision

"Tous les composants de la marque et de l'expérience utilisateur, y compris la documentation d'utilisation, sont gérés en un seul endroit. Les modifications sont synchronisées avec toute l'équipe et les concepteurs peuvent passer à la dernière version ou annuler les mises à jour à tout moment. »

Matériel.io

"Créez votre propre thème Material et créez une bibliothèque de symboles de marque en appliquant des changements de style à la couleur, à la forme et à la typographie. Partagez, téléchargez et présentez des itérations de conception dans Gallery. Utilisez ensuite le mode Inspect pour accéder à la documentation du développeur.

Les guides de style d'interface utilisateur doivent être faciles à utiliser

Lors de l'assemblage des guides de style d'interface utilisateur, la communication ne peut pas être tenue pour acquise. Les équipes produit sont composées de personnes issues de disciplines, d'horizons culturels et d'expériences professionnelles différents. Utilisez ces principes pour assurer la clarté et la facilité d'utilisation.

Dispositions simples

Les guides de style d'interface utilisateur nécessitent des dispositions d'écran propres et épurées. Chaque écran doit être bien organisé, clairement étiqueté et très lisible. Il n'y a aucun avantage à surcharger les écrans avec des informations visuelles, alors visez des arrangements à la fois minimes et spacieux.

Instructions concises

Gardez les instructions courtes et douces. Évitez les longs paragraphes et utilisez des puces. Dans la mesure du possible, démontrez avec des visuels plutôt que des mots.

Scénarios d'utilisation informatifs

Vous vous demandez quand utiliser ce style de curseur plutôt que celui-là ? Les « scénarios d'utilisation » résolvent ce genre de confusion. Encore une fois, les visuels sont plus forts que les mots ici, alors fournissez des exemples qui démontrent clairement à la fois le scénario et la bonne voie à suivre.

Historiques des versions pertinentes

Les produits numériques sont mis à jour fréquemment. Alors que les équipes de produits cherchent à affiner chaque détail de l'interface, il est important de conserver un enregistrement continu de l'évolution des composants de conception. Faites preuve de discrétion ici : pour les petites entreprises et les équipes de produits, la gestion d'une bibliothèque complète d'historiques de versions peut s'avérer peu pratique.

Les guides de style d'interface utilisateur sont une ressource précieuse et un outil de conception puissant

Les équipes de conception et de développement contemporaines apprécient l'efficacité et la collaboration multidisciplinaire, comme en témoignent les systèmes de langage de conception vantés par de grandes marques comme MailChimp, Google et Salesforce.

Les systèmes de langage de conception permettent à diverses équipes travaillant sur des produits numériques sophistiqués de communiquer à l'aide d'un langage visuel standardisé. Les guides de style d'interface utilisateur sont tissés dans le tissu des systèmes de langage de conception et servent d'outil sur lequel on peut compter pour une itération rapide et des expériences numériques cohérentes.

En même temps, le design n'est pas une activité réservée aux seules grandes entreprises. Un large éventail d'équipes de produits et de projets numériques bénéficieront de guides de style d'interface utilisateur bien conçus, mais les ressources (financières, temporelles et talentueuses) varient d'une entreprise à l'autre.

Pour cette raison, les guides de style d'interface utilisateur sont plus utiles lorsqu'ils sont adaptés aux besoins des entreprises individuelles et des équipes de conception. L'objectif le plus élevé de chaque guide de style d'interface utilisateur est un équilibre entre clarté et fonctionnalité qui conduit à des expériences utilisateur toujours agréables.

Pour en savoir plus sur le blog Toptal Design :

• Styles de caractères pour la conception Web et imprimée
• Conception réactive - Meilleures pratiques et considérations
• Pourquoi les startups ont besoin d'un guide de style
• Convivialité des icônes et meilleures pratiques de conception
• Utilisez votre inspiration - Un guide des planches d'humeur