Qu'est-ce que l'Atomic design ?

Le digital a beaucoup évolué ces 15 dernières années. De nombreux appareils électroniques avec des écrans aux tailles et formes différentes sont apparus.
Lorsque seuls les ordinateurs existaient, on dessinait une maquette pour chaque page d’un site web, comme un dessinateur le fait pour les pages d’une bande dessinée. On répartissait des éléments graphiques dans un espace rectangulaire de taille standard.
Aujourd’hui, on ne conçoit plus de pages figées, mais des interfaces qui doivent s’adapter à différentes tailles et résolutions d’écran. Il est donc nécessaire que les designers pensent en termes de systèmes de composants et non de pages, afin que leurs designs s’adaptent aux très nombreux supports existants. C’est ce que l’on appelle la méthode Atomic Design.

1.     L’Atomic Design, une logique de construction par itération des composants

L’Atomic Design (ou design par composant) a été conçu en 2013 par le webdesigner américain Brad Frost. C’est une méthode de création d’un design system qui peut s’appliquer à tous projets et supports digitaux, comme un site E-Commerce ou une application mobile.

1.1. De l’atome à la page

La méthode Atomic Design vise à découper les éléments d’une page de la même façon que les scientifiques ont découpé la matière :

Les atomes représentent les plus petits éléments UI basiques et indivisibles, comme les couleurs, les styles, les typographies, les boutons, les champs texte etc. Les atomes mettent en avant la charte graphique de l’entreprise ou de la marque.

Une molécule est un groupe d’atomes formant un composant graphique. Par exemple, un champ de recherche est une molécule comprenant les atomes label, champ texte et icône.

Un organisme est un groupe de molécules et/ou d’atomes faisant naître un élément fonctionnel, comme un moteur de recherche ou un formulaire.

Un template est la structuration des groupes de molécules. Les templates déterminent l’aperçu du rendu visuel.

La page représente l’interface utilisateur finale avec le contenu réel.

Le site d’Usabilis décrit de façon méthodique ce qu’est l’Atomic Design.

En partant du plus petit élément pour arriver au plus grand, on obtient une interface évolutive et créative.

1.2. Application de l’Atomic Design à Pinterest

Le site d’inspiration Pinterest est un bon exemple d’interface modulable construite par itération. Sur la page d’accueil de Pinterest, on trouve une série d’images. Chaque image est la miniature d’un post sur un sujet comme la cuisine, le sport, la décoration etc. En passant la souris sur la miniature d’un post, plusieurs boutons d’action apparaissent : enregistrer le post, le consulter, le partager ou le modifier. Ces boutons d’action sont des atomes, les miniatures des posts sont des molécules et l’ensemble des posts est un organisme. Cet organisme est évolutif en fonction du support qui l’affiche.

En fonction du zoom du navigateur, l’organisme s’adapte à la taille de l’écran. Les posts sont agencés de façon à afficher une interface cohérente et lisible.

Ainsi, l’Atomic Design permet d’obtenir une interface évolutive en fonction du support, de la taille de l’écran ou du zoom.

1.3. Construire un design system comme un jeu de LEGO

Finalement, l’Atomic Design est comparable à un univers de Lego. Le jeu permet de créer une infinité de formes et d’histoires en imbriquant des pièces. Ces pièces ont été conçues par Lego pour être compatibles entre elles, tout en respectant un univers de marque via des couleurs simples et identitaires.

2.     Les intérêts de l’Atomic Design

A l’image du jeu Lego, la méthode Atomic Design permet de construire un système créatif et évolutif. Mais concrètement, quels en sont les avantages pour une équipe qui souhaite l’adopter ?

2.1. La cohérence

Un des gros avantages de l’Atomic Design est de permettre aux designers de concevoir des interfaces utilisateurs cohérentes et au graphisme homogène.

L’identité visuelle de l’entreprise est renforcée grâce à l’application de la charte graphique sur tous les projets numériques, et pas uniquement sur un applicatif. Il est particulièrement intéressant pour un groupe ou une entreprise de partager un même kit de design quand ses différents canaux offrent le même service (si la différence de technologie entre les canaux n’est pas un élément bloquant). Par exemple, pour une entreprise vendant des habits en ligne, afficher les mêmes composants sur son application mobile et son site web permet au webdesigner d’assurer la cohérence entre les deux canaux et d’affirmer l’image de marque du vendeur.

2.2. L’ergonomie

Comme évoqué ci-dessus, il peut être bénéfique pour une entreprise proposant un même service sur différents canaux d’homogénéiser le design, pour mettre en avant son image de marque. Cela comporte aussi un avantage pour l’utilisateur du service. Effet, ce dernier s’habituant à interagir avec les mêmes composants sur différents canaux, il aborde ainsi l’interface de façon plus intuitive.

Le géant américain du streaming Netflix opte pour les mêmes atomes/molécules/organismes sur son site et son application mobile. En parcourant l’un des deux canaux, l’utilisateur se voit proposer une série (Friends sur l’exemple ci-dessous), puis il retrouve sa liste de films et séries préférés (Suits, Riverdale etc.).

Le fonctionnement des atomes et molécules est le même sur le site et l’application mobile :

• En cliquant sur le carré bleu en haut à droite, le détail du compte utilisateur s’affiche.
• En cliquant sur le bouton blanc « Lecture », la série Friends se lance.
• En swipant vers la gauche les miniatures des films, les films et séries préférés de l’utilisateur défilent.
• En cliquant sur une carte film, le visionnage du film se lance.
  

Ainsi, l’utilisateur devient familier avec les différents canaux, ce qui améliore son expérience utilisateur.

De plus, on observe que Netflix utilise toujours les mêmes molécules/atomes pour afficher une bibliothèque de films à ses clients :

• Organisme « bibliothèque de films », composé des molécules.
• Molécules « liste de films » elles-mêmes composés d’atomes.
• Atomes “texte catégorie », « miniature de film » et atome « flèche de navigation ».

Quelle que soit sa catégorie (ici « Série US », « Tendances actuelles », « Séries internationales »), la molécule fonctionne de la même manière. Le comportement de l’utilisateur est le même pour faire défiler les films ou en visionner un. Cette réutilisation des composants rend l’interface ergonomique et permet à l’utilisateur de naviguer de façon fluide et rapide.  Il peut se concentrer sur les catégories et films qui lui sont proposés plutôt que sur la manière de naviguer sur l’interface.

L’expérience utilisateur se trouve également améliorée par l’aspect assurément responsive des interfaces créées via l’Atomic Design. Les molécules sont conçues en imaginant la manière dont leur forme va évoluer en fonction du support sur lequel elles apparaissent. Dans l’exemple de Netflix, les miniatures des films ne sont pas les mêmes entre l’application mobile et la vue sur ordinateur.

Les templates adoptent aussi un rôle de « contrôle du responsive » puisqu’ils définissent l’organisation et la hiérarchie des composants de la librairie Atomic.

2.3 Un gain de temps pour l’équipe projet de développement :

Bien que la méthode d’Atomic Design puisse être difficile à adopter au cours d’un projet, elle offre un réel retour sur investissement pour l’équipe qui la met en place. L’article du site Wivoo en témoigne parfaitement.

En termes d’organisation, elle permet aux équipes d’économiser du temps en réutilisant des composants et de centraliser les designs grâce à un environnement partagé.

Pour le webdesigner, l’Atomic Design constitue un véritable gain de temps sur la production de ses maquettes. L’utilisation répétée des composants de la librairie permet d’accélérer la phase de conception d’une page, car les éléments sont déjà réfléchis et conçus pour être responsives.

Ce recyclage de l’existant profite également au Product Owner, qui gagne du temps sur la rédaction des user-stories.  Cela lui permet de ne plus avoir à spécifier le comportement et les règles de gestion des composants, qui sont déjà connus par les développeurs et testeurs.

Les développeurs sont plus rapides et efficaces. En effet, l’intégration des styles et du design est facilitée puisqu’ils n’ont pas besoin de répéter le code. Cela permet également une meilleure maintenabilité du code, car la modification d’un élément est répercutée sur l’ensemble des pages. Les développeurs acquièrent une meilleure connaissance des composants de leur librairie Atomic, ce qui réduit le nombre de bugs lors des développements et optimise les phases de test.

En résumé, l’Atomic Design permet d’optimiser les temps de conception et de développement, car il facilite la communication entre les membres de l’équipe projet autour d’une même logique de conception de l’interface.

3.     Zeplin, un outil adapté à l’Atomic Design

Certains outils comme Zeplin sont particulièrement adaptés à l’Atomic Design puisqu’il permettent de partager les composants et maquettes dans une librairie commune.

Zeplin permet de ranger les éléments graphiques de la manière suivante :

3.1. Le tableau de bord

Il affiche les composants selon leurs types : atomes, molécules, organismes, templates et maquettes finalisées. L’outil permet de retrouver rapidement un élément grâce à un système de filtres.

3.1. Le guide de styles

Il permet d’accéder à la palette de couleurs, au catalogue de styles de textes et aux caractéristiques d’espacement des composants.

L’outil Zeplin permet au webdesigner de piocher un atome ou un composant déjà existant dans sa librairie afin de créer une maquette.

Si le principe de l’Atomic Design est de réutiliser les mêmes composants d’une librairie, il est naturel de se demander comment le webdesigner peut rester créatif. De la même façon qu’un bon musicien sait rester créatif avec seulement 12 notes de musique, le webdesigner doit savoir manier les atomes/molécules pour créer des interfaces de site web et d’applications mobiles innovantes et ergonomiques. Ainsi, une infinité de possibilités de design s’offre à lui.

Finalement, la méthode Atomic Design permet au webdesigner de construire un écosystème évolutif et créatif avec des composants graphiques réutilisables. Pour l’entreprise qui l’adopte, elle fait gagner du temps à l’équipe projet et assure une image de marque forte sur ses différents applicatifs digitaux.

Il est toutefois important de noter que cette méthode est difficile à mettre en place sur un projet déjà commencé. En effet, pour être respectée, elle demande de revoir les outils utilisés et le mode de travail des équipes. Il est plus facile de l’adopter en début de projet, pour que le webdesigner crée la librairie et ses composants en partant d’une « page blanche ». De ce fait, les projets de refonte ou de re-branding sont une bonne occasion pour une entreprise d’adopter l’Atomic Design.

Article rédigé par Roxane Wallez, consultante chez HeadMind Partners.

Sources de l’article

« ATOMIC DESIGN, UNE NOUVELLE MÉTAPHORE ? ». Usabilis. 2018. [consulté le 17/10/2021]. Disponible à l’URL : Qu’est-ce que l’Atomic design ? Définition Atomic Design (usabilis.com)

« C’est quoi l’Atomic ? ». Youtube/Basti UI. 2018. [consulté le 17/10/2021]. Disponible sur youtube : LE DESIGN ATOMIQUE ⚛️ C’est quoi l’Atomic ? – Bing vide

« La différence entre le design system et l’Atomic Design ». La grande ourse. 2020. [consulté le 17/10/2021]. Disponible à l’URL : La différence entre le Design System et l’Atomic Design – La grande Ours

« How to make web and UI design easier». Youtube/The futur. 2018. [consulté le 17/10/2021]. Disponible sur youtube : Atomic Design – How To Make Web and UI Design Easier – YouTube

« Atomic Design : Retour d’expérience de wivers ». Wivoo/Capucine Labaye. 2020. [consulté le 17/10/2021]. Disponible à l’URL : Atomic Design : Retour d’expérience de Wivers – Wivoo