Pourquoi les startups ont besoin d'un guide de style

Même pour un designer chevronné, créer un nouveau guide de style pour un produit donné est difficile - il existe de nombreuses directions de conception possibles et le processus peut rapidement devenir écrasant. La vie de démarrage est trépidante, rapide et remplie de clichés tels que "la perfection est l'ennemi du fait", "avancez vite et cassez les choses" ou "lancez-le maintenant, réparez-le plus tard".

Créer un guide de style sous de tels slogans et priorités fluctuantes est un défi, mais un must si la conception d'un produit doit réussir à long terme.

Ces dernières années, nous avons beaucoup entendu parler des systèmes de conception, des guides de style, des bibliothèques de modèles et de la conception atomique. Bien que ces outils soient très utiles, leur utilisation peut sembler exagérée lorsque vous ne souhaitez créer que quelques écrans pour un MVP ou pour faire la démonstration d'une application. Cependant, avoir un guide de style améliorera non seulement votre processus de conception en général, mais rendra votre application plus solide et cohérente.

Parlons d'abord des principaux avantages d'un guide de style, puis abordons l'environnement de démarrage difficile. Enfin, nous discuterons de la façon dont un guide de style évolue constamment en tant que document vivant.

Les cinq principales raisons pour lesquelles un guide de style est une bonne idée

1. Un guide de style rend les conceptions concrètes et l'image de marque claire

En tant que concepteur solitaire dans une startup, ce qui est souvent le cas, il n'y a pas beaucoup d'occasions de revoir et de contester les décisions de conception prises par d'autres membres de l'équipe. Bien que tout le monde puisse travailler en collaboration, les conceptions ne sont pas nécessairement partagées avec d'autres. Cela signifie qu'il n'y a qu'une seule personne qui valide les conceptions finales.

Un guide de style fournira à une startup des conseils et de la documentation à titre de référence. Cela remettra en question certains choix de conception faits par le concepteur ou l'équipe car ils devront être validés dans le contexte global de l'application. Concevoir un composant d'interface utilisateur parce qu'il fonctionne bien sur un seul écran ne suffira pas. Une conception bien pensée devrait résoudre un seul problème de conception dans une situation, ainsi qu'un problème omniprésent qui se retrouve sur d'autres écrans de votre application.

Un guide de style rend le style de conception global, les directives de la marque, les spécifications et les règles accessibles à tous dans votre entreprise. Ce n'est qu'à un clic. Ils peuvent accéder à une URL pour accéder facilement à un guide de style en ligne ou télécharger un PDF. La conception devient l'affaire de tous, elle n'est plus la seule responsabilité de l'équipe de conception. C'est une approche prudente qui améliorera l'interface utilisateur de votre produit.

2. Un guide de style rend votre conception plus cohérente

Il fournit une sorte de dictionnaire pour votre langage de conception d'interface utilisateur. Vous pouvez utiliser la même terminologie lorsque vous souhaitez communiquer quelque chose que vous avez déjà exprimé. Imaginez si nous avions des mots légèrement différents pour exprimer la même chose :

1. "Il pleut; J'ai besoin de mon parapluie.
2. "Il pleut, j'ai besoin de mon parapluie"
3. "Il pleut, j'ai besoin de mon parapluie"

Cela peut rendre une langue poétique, mais difficile à comprendre. Fondamentalement, c'est la même idée avec l'interface utilisateur d'un site ou d'une application. Pour faciliter l'utilisation, vous ne devez inventer un nouveau « mot » que lorsque vous créez réellement quelque chose de nouveau. De cette façon, vous êtes lié par une règle stricte qui dit : "Seuls les composants qui résolvent un problème de conception de manière répétée dans tout le produit sont autorisés dans le produit et par la suite dans le guide de style."

La cohérence rend votre produit plus convivial ; un produit hautement utilisable peut se traduire par plus d'engagement et de ventes.

3. La réutilisation des mêmes composants système rend votre application plus facile à utiliser

Comme dans l'exemple du langage, la cohérence est essentielle. Une fois que chaque composant est compris par l'utilisateur, lorsqu'il sera réutilisé dans un contexte différent, les gens seront déjà familiarisés avec son comportement. En ce qui concerne les interactions avec les utilisateurs, cette cohérence améliore la convivialité globale du produit.

Travailler avec un système de conception basé sur des composants permet d'économiser de l'argent et facilite également la mise à jour d'un produit. S'il y a un problème d'utilisabilité avec un composant dans une certaine situation, il peut être résolu une fois et tous les autres problèmes potentiels avec ce composant seront également mis à jour.

4. Un guide de style rend votre application plus rapide à développer à long terme

Lorsque votre équipe développe un composant commun pour un écran, elle développe une solution qu'elle utilisera également ailleurs. Cela permet d'économiser du temps de développement - beaucoup de temps. Lorsque votre entreprise évolue, cela peut signifier d'économiser jusqu'à 10 fois les heures de travail nécessaires pour construire un nouvel écran.

5. Un guide de style facilite l'efficacité de la production et l'innovation

La création d'un guide de style rend les conceptions plus accessibles et facilement disponibles pour le reste de l'entreprise. Les développeurs et les concepteurs peuvent prototyper une idée plus rapidement et plus facilement. Bootstrap est souvent félicité pour avoir facilité la création d'un prototype fonctionnel par les développeurs - votre guide de style sert le même objectif. Il fournit une base de référence pour une nouvelle interface utilisateur qui sera construite par les développeurs, sans que l'équipe de conception n'ait à créer l'écran au préalable (même si l'équipe de conception doit contrôler les écrans finaux).

Les enjeux d'une startup, une charte graphique en flux

La création d'un système de conception dans un environnement de démarrage n'est pas aussi linéaire qu'elle pourrait l'être dans une entreprise plus mature où ils sont habitués à un processus plus rationalisé. Dans une entreprise plus traditionnelle, l'équipe de conception effectue des recherches, des idées et des expérimentations UX, puis propose le guide de style final de la marque. Ce procédé ne convient pas à toutes les entreprises. Les startups travaillent dans un environnement où leur vision et les exigences du produit sont en constante évolution. Ils travaillent avec des MVP (minimum viable products), des versions incomplètes de leurs applications qui sont utilisées pour tester leur idée et montrer son potentiel aux utilisateurs.

Lorsqu'il s'agit de créer un guide de style, cela peut devenir un problème.

Dans un environnement en constante évolution, un designer a généralement du mal à créer un guide de style censé être quelque peu "fixe". Un concepteur peut ne pas avoir le temps de bien réfléchir à tous les composants en cours de création, même s'ils peuvent encore se retrouver dans la prochaine version de l'application. Facebook a troqué son menu hamburger contre une navigation par onglets lorsqu'il a un peu mûri. Pensez-vous que celui qui a mis le menu hamburger là-bas en premier lieu l'a également ajouté au guide de style Facebook ?

Vous pourriez même considérer qu'il n'est pas encore temps de créer un styleguide. Vous réalisez peut-être qu'à long terme, vous en aurez besoin, mais pour le moment, il est plus important de créer des écrans pour les tests d'utilisabilité de l'application. De plus, vous aurez également besoin de pages marketing pour promouvoir votre application. Soudain, votre conception doit s'accélérer et, au fur et à mesure que vous créez des écrans, vous commencez à voir l'intérêt d'avoir un guide de style qui peut maintenir la cohérence de vos conceptions et de la marque de l'entreprise.

Le problème est que vous ne savez pas exactement quand c'est le bon moment pour troquer la flexibilité contre la stabilité. Vous devez décider quand vous devez démarrer le guide de style et quand vous devez vous concentrer uniquement sur la création d'écrans. Une approche optimale peut être de produire un guide de style en même temps que vous distribuez des écrans, de cette façon vous pourrez peut-être avoir le meilleur des deux mondes.

Commencez par quelques inspirations d'interface utilisateur

Une bonne façon de commencer, surtout si vous n'êtes pas un designer, est de collecter des exemples de styles de design que vous aimez ou, plus important encore, auxquels vous pensez que les utilisateurs réagiront. Rassemblez autant d'exemples que possible et placez-les dans un dossier/tableau InVision/tableau Niice/etc. Ils peuvent être utilisés comme référence et inspiration avec votre sensibilité de conception. Vous pouvez les utiliser ultérieurement pour créer une bibliothèque de modèles.

Par exemple, lorsque je travaillais sur un guide de style pour une entreprise faisant la promotion d'artistes dans l'industrie du divertissement, nous nous sommes demandé si les arrière-plans clairs ou sombres auraient un plus grand impact sur nos utilisateurs. J'ai regardé des centaines de sites Web différents dans les jeux/films/production visuelle pour voir comment ils utilisaient des arrière-plans sombres et clairs.

J'ai fait une fiche de référence où j'ai mis en évidence les motifs les plus courants. Un modèle que j'ai identifié était que les entreprises de ce secteur avaient tendance à utiliser des arrière-plans plus sombres lors de la présentation de leurs produits, mais utilisaient des arrière-plans blancs dans leurs efforts de marketing, leur commerce électronique et leurs magasins.

Vous n'avez pas besoin d'aller aussi loin que cela, mais j'ai trouvé que le fait d'avoir des références visuelles aide, non seulement à créer un guide de style, mais aussi à se souvenir de certains des cas d'utilisation pour lesquels vous pourriez avoir besoin de concevoir. Une fois que vous vous sentez bien avec les références que vous avez collectées, vous pouvez commencer à travailler sur la conception visuelle.

Concevoir des composants d'interface utilisateur solides

Lorsque vous travaillez dans des startups, il est plus difficile de créer des composants que de créer des pages, du moins au début. Lorsque vous concevez une page, vous avez souvent une idée de la façon dont elle va être utilisée. Ce n'est pas nécessairement le cas lorsque vous concevez un composant. Vous essayez de concevoir pour un cas d'utilisation spécifique, mais vous voulez qu'il fasse partie d'un système de conception universel, et vous devez l'aborder de cette façon. Par exemple, vous pouvez créer un composant de sous-navigation avec trois boutons. Vous pouvez également en avoir besoin pour fonctionner avec quatre, cinq ou dix boutons, et il devra fonctionner sur mobile, tablette et ordinateur de bureau. Vous devez penser à l'avance.

Vous voulez un certain niveau de persistance ou d' endurance dans un composant. Les composants communs ne doivent pas changer souvent et ils doivent être réutilisables à de nombreux endroits dans votre produit. Par exemple, si vous n'êtes intéressé que par une application iOS, vous souhaitez tester votre composant en fonction du nombre d'options ou de la longueur du contenu, pas nécessairement de la taille de l'écran. L'idée est que si c'est viable dans l'interface utilisateur à de nombreux endroits de votre application, alors vous savez que c'est un composant qui a le potentiel de faire partie de votre guide de style.

Une startup doit partir de pratiquement rien, puis avancer rapidement. Votre patron voudra peut-être un écran conçu d'ici la fin de la journée. Cela signifie que vous ne pouvez pas vraiment développer un guide de style complet, puis proposer l'écran. Pire encore, vous pourriez être en train de concevoir un guide de style avec des composants qui ne verront jamais le jour car la vision de l'entreprise a changé. Comme on dit, il vaut mieux expédier maintenant.

Créer un excellent guide de style prend du temps, et parce qu'il deviendra la base de votre système de conception, vous voulez le faire correctement. Dans un environnement de démarrage, vous devez travailler sur votre guide de style avec tout en tandem.

La charte graphique comme document vivant

Vous devriez considérer votre guide de style comme un travail en cours. Comme une startup qui élabore sa stratégie, vous allez élaborer votre guide de style au fur et à mesure. Vous le modifierez et l'ajusterez au fil du temps jusqu'à ce qu'il devienne la base de votre interface utilisateur. Une approche utile consiste à démarrer la première maquette en même temps que vous démarrez votre guide de style. Ouvrez deux fichiers avec votre logiciel préféré (dans mon cas, Sketch); l'un appelé page name et l'autre styleguide . Pendant que vous travaillez sur la conception de votre écran, vous pouvez commencer à ensemencer votre guide de style avec les éléments qui composent votre conception.

Au fur et à mesure que vous commencerez à en faire plus, vous remarquerez très tôt que certains composants sont des candidats de choix pour être inclus dans le guide de style. Par exemple, si vous avez opté pour un style d'icône, toutes vos icônes peuvent entrer dans le guide de style dès le début.

Je crée généralement une section intitulée "icônes réalisées jusqu'à présent". Si, à un moment donné, quelqu'un a besoin d'une icône, il doit d'abord consulter cette section avant d'en créer une nouvelle.

D'autres éléments évidents à prendre en compte sont les couleurs, les boutons, les sélecteurs, les titres, les en-têtes, le corps du texte, etc. Si vous utilisez un style spécialement pour le marketing, vous pouvez envisager de le mettre dans votre guide de style et de l'étiqueter de manière appropriée. Ce n'est pas grave si vous n'êtes pas complètement réglé sur un élément particulier. Vous pouvez affiner les éléments de l'interface utilisateur dans votre système de conception ultérieurement, lorsque l'occasion se présente, et mettre à jour le guide de manière appropriée. N'oubliez pas, le styleguide est un document vivant , surtout dans une startup.

Finalement, lorsque je commence à mettre des mises en page dans le guide, je sais que je commence à atteindre un point où tous les composants devraient être proches de leur état final. Cette partie marque le point de basculement dans le processus de création du guide de style - maintenant vous pouvez célébrer ! Une bonne façon de célébrer une telle étape est de créer un logo ou une icône (envisagez de le nommer) pour la version 1.0 du guide de style.

Certaines personnes vont jusqu'à imprimer le logo/l'icône sous forme d'autocollant pour que l'équipe ait une sorte de trophée. C'est aussi le point où je reviens généralement à la manière plus traditionnelle de travailler avec le guide en ouvrant d'abord ce guide de style, puis en créant un nouveau fichier pour l'interface à créer.

Conclusion

En tant que designer, en créant un guide de style le plus tôt possible, vous vous assurez que votre startup adhère à un standard de qualité plus élevé. Cela peut être difficile, mais cela en vaut la peine. Un guide de style solide et complet ne vous aidera pas seulement à avoir un meilleur produit, il vous aidera également à réduire les coûts de développement.

Il existe un moyen d'y parvenir même dans un environnement en évolution rapide où des décisions rapides sont prises et où les conceptions doivent parfois changer rapidement. Espérons que le processus décrit ci-dessus aidera les concepteurs de toute startup à faire face aux défis de la complexité et de la rapidité tout en créant un guide de style solide au profit du produit.

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques