Atomic Design : un concept nouveau pour votre UX

Le Web vient de fêter ses 30 ans. C’est un âge honorable, qu’il convient de célébrer, mais qui commence à générer quelques inconvénients. Certains concepts de bases qui sont quasiment nés avec le Web sont devenus… obsolètes.
En matière d’UX, c’est par exemple le cas de la « page » telle qu’on la concevait jusqu’à présent. Elle est dérivée des contenus papiers, d’où son nom, mais ne s’adapte plus aux usages d’aujourd’hui. Principal problème : la multiplication des terminaux, dotés d’écrans de tailles et de nature parfois radicalement différentes. Songez que l’on peut afficher un même site sur un smartphone, voire une montre connectée, comme sur un écran télé de 88 pouces.
Comment y remédier ? Un nouveau concept est né récemment, théorisé par Brad Frost : l’Atomic Design. Il se propose de révolutionner la conception de sites et d’interfaces, et par extension la façon d’aborder et de mener à bien ce type de projets. Pourquoi et comment ? Voici quelques explications…

Atomic Design : diviser pour mieux régner

La dénomination d’Atomic Design peut prêter à confusion. Elle se réfère à une hiérarchie de taille, telle qu’on peut l’imaginer en physique atomique : atome, molécule, puis cellules ou organismes, le tout permettant au final de concevoir des templates et des pages.
La méthodologie de l’Atomic design est apparue en 2013 sur le blog de Brad Frost, son concepteur. C’est en 2016, après la publication de son livre, que le concept d’Atomic Design est adopté par de nombreux designers et chefs de projets.
L’idée est de réduire un site à ses plus petits composants, lesquels peuvent ensuite être assemblés pour constituer des modules de plus grande taille. Ces modules peuvent eux-mêmes être accolés pour constituer l’ossature d’une page puis d’un site, qui s’affiche plus correctement sur tous types d’écrans.
On peut noter que le principe de base de l’Atomic Design n’est pas en soit révolutionnaire, puisqu’on le trouvait déjà plus ou moins dans l’ossature de nombreux sites créés à partir de CMS (Content Management System). Les principaux CMS, tels que WordPress ou Drupal, proposent aussi des modules que vous pouvez dupliquer et adapter sur différentes pages. Mais la structure qui encapsule ces modules est suffisamment rigide pour poser parfois des problèmes d’affichage sur des terminaux de petite taille, ou de très grande taille …
L’Atomic Design se rapproche aussi du concept de Modular Web Design, apparu quelques années plus tôt.

Un concept lié de près à l’UX

L’Atomic Design apporte sa contribution à l’élaboration d’une UX pertinente et optimisée. Il permet en effet de lancer un projet en prenant en compte dès le départ, au stade de l’ébauche, l’ergonomie future du ou même des sites, et de garder une grande continuité jusqu’à la maquette ou la réalisation finale.
L’Atomic Design consiste donc à s’intéresser d’abord à ce qui compose une interface utilisateur  et, ensuite, à son rendu final.
Brad Frost donne dans son ouvrage quelques conseils pour mettre en place un Atomic Design System pertinent. En particulier :

• Consacrer le temps et le budget nécessaire,
• Communiquer avec les utilisateurs pour modifier le système dès que c’est nécessaire,
• Simplifier au maximum la mise à jour des UI patterns, des applications, etc.,
• Créer des styles guides compréhensibles par le plus grand nombre, pas seulement pour les développeurs,
• Promouvoir le Design System et ses évolutions,
• Nommer les patterns de manière à ce qu’ils soient réutilisables dans différents contextes.

Une série d’avantages qui peuvent être précieux

Ce nouveau concept devrait permettre d’apporter de multiples avantages, à tous les stades de vos projets. En voici quelques uns :

• Création d’un cahier des charges facilitée : les éléments de base (atomes, molécules…) constituent une sorte de charte graphique préexistante,
• Préparation rapide de templates : ils sont conçus à partir des modules eux-mêmes préconçus,
• Codage plus facile : les lignes de code sont plus lisibles,
• Pérennité et continuité des projets : vous réutilisez des éléments existants,
• Adaptation à tous les écrans,
• Possibilité de travailler plus facilement sur un projet en mode collaboratif.

Quand utiliser l’Atomic Design ?

Bien évidemment, ce nouveau concept gagne à être mis en place dès la naissance du projet, car il en facilitera la réussite et l’aboutissement. Toutefois, on peut imaginer remodeler un ou des sites existants en l’utilisant. C’est particulièrement intéressant dans le cas d’une refonte qui va impacter plusieurs sites et/ou plusieurs interfaces, au sein d’une organisation étendue.
Ce concept est bien documenté sur le Web, et nous vous invitons à prendre connaissance des documents publiés par son créateur lui-même, en anglais, mais parfois traduits par de nombreux praticiens.
Pour en savoir plus :
> Pour en savoir plus
 
Vous souhaitez nous soumettre un article pour publication ou avez besoin d’assistance pour en écrire un ou plusieurs ? Contactez nous ci-dessous pour en discuter !