Avec l’approche Atomic Design, créons des Interfaces, pas des pages

En tant qu’a­gence digi­tale dédiée à la concep­tion UX et UI, il est essen­tiel de remettre régu­liè­re­ment en ques­tion nos métho­do­lo­gies et tech­niques de concep­tion afin d’être toujours­plus effi­caces, sans perdre de vue la qualité et la cohé­rence de nos projets.

Avec le nombre crois­sant de sites web respon­sives et les nouveaux prin­cipes d’ap­pli­ca­tions univer­selles, la façon dont nous conce­vons nos inter­faces évolue à vitesse grand V. Aujourd’­hui nous devons prendre en compte un panel de plus en plus impor­tant de tailles d’écrans et de réso­lu­tions, voir même depuis peu des inter­faces qui sortent du cadre habi­tuel des écrans : iOT, TV Conec­tée, Réalité virtuelle (Oculus Rift), Smart­watches et pleins d’autres enco­res…

Pour répondre à cette problé­ma­tique, une nouvelle approche commence à avoir de plus en plus d’adeptes : L’Ato­mic Design. Cette nouvelle métho­do­lo­gie concep­tua­li­sée par Brad Frost, et expli­ci­tée sur son site, semble être une approche ration­nelle et rela­ti­ve­ment adap­tée au contexte actuel (et surtout à celui de demain !).

Pour présen­ter rapi­de­ment Brad Frost, il s’agit d’un jeune desi­gner améri­can installé à Pitts­burgh en Penn­syl­va­nie. Jeune créa­tif forte­ment engagé dans le partage de la connai­sance et de la concep­tion web, il aime avant tout créer de « belles expé­riences ». Cette passion l’amène à réfle­chir et remettre en ques­tion ses métho­do­lo­gie de travail habi­tuelles. C’est de cette perpé­tuelle remise en ques­tion qu’est né l’Ato­mic Design. Pour résumé rapi­de­ment cette métho­do­lo­gie de concep­tion, il s’agit d’une approche adop­tée et appliquée depuis long­temps par les déve­lop­peurs, et que Brad Frost a retrans­crit dans l’uni­vers de l’UX et du Design.

Cette approche a pour avan­tage de créer une métho­do­lo­gie commune entre les UI desi­gners et les deve­lop­peurs front-end dont les métiers sont devenu vrai­ment indi­so­ciables. C’est une petite révo­lu­tion qui permet­tra aux UI desi­gners et deve­lop­peurs d’avan­cer main dans la main.

Brad FROST / @brad_frost

Qu’est-ce que l’Ato­mic Design ?

C’est une approche qui a pour but d’of­frir une métho­do­lo­gie qui permet de conce­voir des inter­faces en se basant sur 5 éléments hiéar­chi­sés :

1. Les Atomes
2. Les Molé­cules
3. Les Orga­nismes
4. Les Templates
5. Les Pages

L’Ato­mic Design : des Atomes, des Molé­cules, desOr­ga­nismes, des Templates et des Pages qui s’as­so­cient­pour créer des inter­faces effi­caces.

L’Atome

L’atome est la plus petite unité fonc­tion­nelle et ne peut être divisé sans perdre sa signi­fi­ca­tion. C’est un élément qui, seul, n’a pas de but fonc­tion­nel. Il est indi­vi­sible et il compose la base de tout élément graphique de l’in­ter­face. Par exemple nous trou­vons sur nos inter­faces les atomes suivants : un logo, une couleur, un style typo­gra­phique, un bloc image, une icône, un champ de saisie… Ce sont des éléments que tout bon UI desi­gner fait appa­raître dans son style­guide.

La Molé­cule

La molé­cule est créée à partir de plusieurs atomes, c’est une collec­tion d’atomes . Elle a ses propres proprié­tés, notam­ment elles doivent être pensées « respon­sive ». Il faut défi­nir si elles sont fixes ou fluides, et sur quelles tailles de device elles appa­rai­tront ou non. Par exemple : un label + un champ de saisie + un picto loupe = un champ de recherche. Le champ de recherche est donc ici une molé­cule.

L’Or­ga­nisme

L’or­ga­nisme est la combi­nai­son de plusieurs molé­cules diffé­rentes pouvant créer des struc­tures complexes. Par exemple : un champ de recherche + la navi­ga­tion + le logo = le header. Le header est donc un orga­nisme.

Le Template

Le Template est le premier élément de ce système que tous les UI Desi­gner et Déve­lop­peurs connaissent. Il s’agit de la struc­ture établie pour une inter­face. Les orga­nismes sont utili­sés dans un contexte. L’uti­lité prin­ci­pale étant de véri­fier et vali­der l’or­ga­ni­sa­tion mais égale­ment vali­der la hiéar­chie des divers « orga­nismes » créés tout en testant tester le compor­te­ment « respon­sive ».

La Page

Enfin La Page est l’uti­li­sa­tion du Template avec des infor­ma­tions réelles. Par exemple dans le Template le texte sera du Lorem Ipsum, tandis que dans la page le texte est le texte défi­ni­tif.

Grâce à ces 5 éléments il est possible de créer des inter­faces de tous types. La méthode est d’ailleurs appli­cable à d’autres domaines que le web.

Pour illus­trer sa démarche, Brad Frost a décor­tiqué l’in­ter­face de l’ap­pli­ca­tion Insta­gram et cela est assez parlant :

Alors quels sont les avan­tages de l’Ato­mic Design ?

On gagne du temps !

Au mieux les métho­do­lo­gies sont assez complexe et ont tendances à créer de l’iner­tie autour d’un projet. Au pire même, il n’existe aucune métho­do­lo­gique parti­cu­lière avec le risque de se perdre dans la jungle des termes tech­niques (compo­nents, elements, layout, templates, modu­les…).

Dans le concret l’Ato­mic Design permet de ne pas décli­ner tous les écrans (avec tous les points de ruptures pour du respon­sive), et de faire plus rapi­de­ment des tests en envi­ron­ne­ment réel et ainsi de pouvoir facto­ri­ser et refac­to­ri­ser rapi­de­ment certains éléments entre le design et le déve­lop­pe­ment.

On mutua­lise la connais­sance et on conserve une cohé­rence globale sur les éléments d’in­ter­faces créés !

Avec l’Ato­mic Design, vous avez 5 éléments que tout le monde peut comprendre, du commer­cial au déve­lop­peur en passant par le chef de projet et l’UI Desi­gner. Ce qui élimine déjà une bonne part des incom­pré­hen­sions que l’on peut vivre au sein d’une équipe projet. Le fait de créer rapi­de­ment un StyleGuide et de fonc­tion­ner par atomes oblige à garder une vraie cohé­rence et à ne pas dupliquer les éléments graphiques du projet. Cela a l’avan­tage d’évi­ter un glis­se­ment projet avec des templates ad hoc, qui vien­draient alour­dir le temps de créa­tion et le temps d’in­té­gra­tion.

On détends la rela­tion avec les déve­lop­peurs !

Avoir la même logique pour la concep­tion d’une inter­face que pour son déve­lop­pe­ment (par exemple avec un langage commun entre leurs atomes et les nôtres) faci­lite la commu­ni­ca­tion entre les UI desi­gners, les UX desi­gners, les chefs de projet et les front-end deve­lop­peurs. Bien sûre les allers/retours entre le style­guide et les compo­sants du desi­gner (atomes/molé­cules/orga­nismes) seront nombreux avant d’ar­ri­ver au résul­tat final (en mode test&learn). C’est pour cela que les équipes de concep­tion et de réali­sa­tion devront être très proches et travailler ensemble, ce qui pour­raît appa­raître comme une contrainte, mais appor­tera une vali­da­tion tech­nique à chaque étape du projet, et donc un gain de temps sur l’en­semble du projet. De plus la compré­hen­sion de chaque éléments qui comosent une inter­face devient alors beau­coup plus évidente et permet par la suite de gagner du temps lors de mises à jour ou refontes graphiques.

Ce qui est impor­tant de souli­gner avec l’Ato­mic Design, c’est la hiérar­chie dans la méthode. Il s’agit d’une hiérar­chie beau­coup plus proche de ce que nous trou­vons dans la nature. Après tout quoi de mieux que des choses de la nature pour créer des inter­faces plus humaines ? Si vous n’êtes pas réel­le­ment convaincu vous pouvez faire des essais en prenant des inter­faces exis­tantes (comme l’exemple avec Insta­gram) pour comprendre le fonc­tion­ne­ment de la méthode et pouvoir l’ap­pliquer sur de futurs projets.

Pas mal en effet, mais la créa­ti­vité dans tout ça ?

Je vous rassure tout de suite : être orga­nisé n’a jamais tué la créa­ti­vité !

La créa­ti­vité n’a pas à craindre ce genre d’or­ga­ni­sa­tion/méthode, bien au contrai­re… Si nous repre­nons l’ana­lo­gie avec la nature et le corps humain, nous sommes tous fait du même sque­lette et de la même matière orga­nique ; et pour­tant les combi­nai­sons sont infi­nies et chacun est unique ! Le travail de l’UI Desi­gner est de défi­nir la bonne typo­gra­phie, les bonnes couleurs, les bons rapports de hiérar­chies, les bons compo­sants graphiques et de faire marcher ces éléments ensemble, leur donner du sens. Le desi­gner pourra égale­ment prendre plus de temps pour réflé­chir aux compor­te­ments animés de ces atomes/molé­cu­les… En clair de peau­fi­ner les détails qui feront la diffé­rence tout en suivant les déve­lop­pe­ments afin que le résul­tat final corres­ponde à la vision parta­gée par l’équipe.

Pour être encore plus concret,  nous vous lais­sons tirer vos conclu­sions avec les 3 photos d’illus­tra­tion ci-dessous 🙂

© « Multis­creen UX Design » by Wolfram Nagel.

© « Multis­creen UX Design » by Wolfram Nagel.

© « Multis­creen UX Design » de Wolfram Nagel.

Pour mieux comprendre la démarche de Brad Frost, il a aussi créé un outil nommé Pattern Lab qui permet de créer vos inter­faces en utili­sant les prin­cipes de l’Ato­mic Design. Vous pouvez même avoir accès à la démo en vous rendant ici.

Une chose est sûre, pour notre prochain projet, nous allons tester cette nouvelle métho­do­lo­gie, et ne manque­rons pas de vous faire part de notre retour d’ex­pé­rience à la fin du projet. À suivre donc.