Matthew Lyons
Wladimir Delenclos
Dec 5, 2017 · 5 min read

Comment concevoir des interfaces numériques en anticipant les problématiques de futurs changements d’échelle du produit, et ce que Invision Studio va changer à tout ça.

La dynamique de digitalisation de nos sociétés entraine l’apparition de clients au champ fonctionnel volatile et varié. Cet effet est dû à l’adaptation des produits digitaux à des besoins utilisateurs en évolution constante et d’une tendance d’industrialisation du design

La diversification des fonctionnalités, l’augmentation des utilisateurs ou la complexifications des fonctionnalités, sont autant de changements d’ordre de grandeur qu’il convient d’anticiper en amont du développement d’une application ou lors des phases de conception d’expérience utilisateur et d’interface utilisateur pour éviter un trop grand nombre d’itérations de conception lors de l’évolution du produit.

Voici quelques conseils pour anticiper ces effets.

Adapter la phase de conception UX

Tout changement d’échelle risque d’impacter négativement sur 3 aspects fondamentaux d’un projet digital :

  • La cohérence de l’image du produit et de l’expérience utilisateur globale.
  • L’organisation du workflow des équipes chargées de la conception du produit.
  • L’optimisation du temps d’itération en design et ainsi des ressources attribuées à l’évolution du produit.

L’aspect majeur pour limiter ces risques consiste en la création d’un Design System pour normaliser la conception avec le reste des équipes.

Hiérarchie, alignements, couleurs, comportements, composants, micro-intereactions, exemples, tout est uniformisé et répertorié pour créer une bibliothèque documentée, en ligne ou partagée.

Exemple du Design System de Salesforce

Pour arriver à cet objectif, nous pouvons aujourd’hui utiliser la méthode de co-création de l’Atomic Design, une méthode orientée composant qui va permettre une déclinaison simple sous tous les écrans, d’effectuer des tests et factoriser les éléments de design et aussi garder une cohérence d’ensemble bénéfique aussi pour les temps de développement. Ils permettent surtout de s’affranchir des contraintes d’une conception calibrée sur un scope spécifique par une conception modulaire.

Mais bien-sûr, rien de remplace l’échange entre les équipes qui reste la meilleure façon d’optimiser la phase de conception.

Adopter des outils adaptés :

Contrairement à ce que l’ont pourrait penser, il n’est pas nécessaire de changer totalement de workflow dans un premier temps.
Pour y arriver il ne faut parfois que quelques réflexes et outils à mettre en place !

Une structure de nommage appliqué à la structure de dossier, aux symboles et artsboards.

Il va falloir dans un premier temps normer les répertoires de travail et les fichiers utilisés. Ceci est valable sur tous les logiciels, à condition bien-sûr qu’ils supportent au moins de renommage de calque…

Pour les dossiers, il n’y a pas la formule pour mettre en forme une dénomination parfaite, vous devez simplement essayer de vous en tenir à une façon et d’appliquer une convention type snakecase pour les fichers.

Pour les composants il faut appliquer une règle de nommage qui ne tienne pas compte du contexte d’usage de l’élément mais de sa valeur intrinsèque, ce que le composant est objectivement.

Par exemple pour le nommage d’un symbole button, on va appliquer une imbrication de styles variés du plus général au particulier :

Buttons > Btn50px > teal > icon-left > hover

Ceci vient très naturellement quand on applique une conception Atomic Design puisque l’on retrouve ici simplement une imbrication de style d’atomes.
Pour les niveaux du dessus il s’agira de grouper les molécules en symboles, de même pour les organismes, pour les templates et pages, nous opterons pour l’artboard.

Adopter des plugins pour s’interfacer à des solutions en ligne

Sketch à l’avantage d’être présent dans le workflow de beaucoup d’entreprises. Il dispose de plugins qui facilitent l’uniformisation et permettent de s’interfacer à des solutions en ligne puissantes.

Ce sont ces dernières qui assureront la cohérence tout au long du projet, l’organisation et l’optimisation dans la collaboration entre les équipes.

Exemple de plugins pour sketch:

  • Craft pour optimiser le workflow avec Invision et générer un styleguide.
  • Marvel Style Guide pour créer des styleguide avec Marvel.

Ces plugins sont simples à prendre en mains et permettent d’apporter déjà une gestion des librairies de composants et des styleguide assez avancé.

Pour aller plus loin, nous pouvons nous tourner vers des solutions plus récente.

Des solutions collaboratives pour centraliser les librairies de composants et regrouper les templates.

Pour une intégration complète d’un processus de conception axé Design System, il convient de centraliser l’ensemble des contenus sur une plateforme partagée et facilement éditable telle que Figma ou Invision Studio.

Elles permettent une collaboration plus facile et d’éviter des pertes de temps inutiles et l’installation fastidieuse de plugins dans des équipes qu’il faudra former spécialement.

- A titre personnel je boude UXPin qui s’est positionné sur la phase itérative de conception UX et qui est mal adapté aux rendus UI avec des bibliothèques de composants

Cette centralisation des outils rend ainsi obsolète les workflow traditionnels Axure / Sketch / prototypr et optimise les temps de production.

Nous pouvons penser qu’avec l’arrivée de Invision studio qui centralise à la fois wireframing, prototypage, UI, bibliothèques de composants avancés partagés, cumulé aux fonctionnalités utiles en gestion de projet et itérations avec le client qui existent déjà, la conception d’interface va se voir propulsée rapidement dans l’ère de l’industrialisation du design d’interface.

Bonne conception d’interface !


Wladimir Delenclos

Written by

Digital Engineer @Thales | Co-Founder @Smapps | PWA Developer, digital thinking

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade