L’Atomic Design est venu se poser comme solution de conception d’interfaces, en adéquation avec l’évolution technologique rapide qui s’est opérée en design digital.
La manière de penser une interface, un site web et de toute plateforme technologique a pris un tournant majeur depuis la multiplication des supports utilisés.
Ordinateurs, tablettes, smartphones, montres connectées, et bien d’autres terminaux, se déclinent en une multitude de tailles d’écrans et de résolution ont largement impacté le design d’interface. Sous l’influence de cette problématique, il n’est plus possible aujourd’hui pour les designers et développeurs de concevoir un site web de façon statique, page par page.
Grâce à l’Atomic Design, les interfaces sont créées à partir d’éléments primaires (qu’on appelle atomes) assemblés avec cohérence, afin de former des molécules, et des organismes qui évoluent en templates puis en pages.
Comment cette approche du design, qui cherche à optimiser le temps, la manière et l’évolution de la conception d’une interface sert-elle, au final, à garantir une meilleure expérience utilisateur ?
Introduction à l’Atomic Design :
Définition de l’Atomic Design
L’Atomic Design a été conceptualisé en 2013 par le webdesigner américain Brad Frost. Il s’agit d’une méthode de design par composants. En Atomic Design, la conception s’opère en imbriquant les divers éléments graphiques afin de les rendre fonctionnels, et de les faire évoluer en interfaces adaptables, en adéquation avec les formats et contenus nécessaires.
L’idée est d’entamer la conception d’un site par les plus petits de ses composants, qui sont ensuite assemblés en modules graduellement plus complexes. Ces modules constituent eux-mêmes l’ossature d’une page puis de tout le site, qui sera à même de s’afficher de manière optimale sur n’importe quel écran.
Initialement, les designers concevaient les pages web une à une, écran par écran; à la manière d’écrire un livre. Cette méthode permet de penser l’expérience en fonction de là où l’utilisateur se trouve, et de proposer des parcours cohérents. Cependant, en débutant la phase de développement front-end, cette méthode de conception a montré ses limites et les notions de base s’y attachant ne correspondent plus au web d’aujourd’hui. Ceci s’explique par le fait qu’il existe désormais un écosystème englobant une infinité de tailles d’écrans, mais aussi une multitude de supports d’affichage (téléviseur, smartphone, montre, écrans tactiques…).
Face à cette réalité, les designers doivent penser des interfaces fluides, adaptées et évolutives. C’est là que l’Atomic Design entre en jeu et prend tout son sens. De la même manière que les scientifiques ont découpé la matière, l’Atomic Design part de l’idée de découper les éléments constitutifs du design. La conception d’une interface ne se fait plus écran par écran, page par page, mais par composants. Il s’agit d’assembler les divers constituants d’une interface pour qu’ils soient parfaitement fonctionnels, seuls ou en interagissant ensemble.
Grâce à cette démarche apparentée au design modulaire, l’imbrication des divers composants de l’interface permet aux designers de gagner un temps fou pour former leurs écrans, et garantit aussi une cohérence graphique et fonctionnelle tout au long du site web.
Le design atomique garantit l’adaptabilité de l’interface dans le but d’améliorer son ergonomie quel que soit le support d’affichage utilisé.
En pratique, quel est le fonctionnement de l’Atomic Design ?
L’Atomic Design, dissèque l’interface en 5 niveaux, allant de l’élément clé le plus simple et petit et aboutit sur les assemblages complexes:
- Les atomes (atoms) : Tout d’abord, nous retrouvons l’atome, qui est l’élément du design le plus basique. Insécable, l’atome ne possède pas, à lui seul, de but fonctionnel à part entière. Les atomes traduisent en général l’identité visuelle de l’interface et en sont les marqueurs de style. Par atome on entend dire à titre d’exemple : les couleurs, les polices, les icônes, les espaces texte, les illustrations, le logo, etc.
- Les molécules (molecules) : Comme en chimie, une molécule en Atomic Design est un ensemble d’atomes assemblés à petite échelle, possédant une certaine fonctionnalité, à l’instar des boutons ou des cellules.
- Les organismes (organisms) : Un organisme se forme à travers l’association d’un ensemble de molécules et/ou d’atomes. Ce bloc constitue un élément d’interface cohérent et fonctionnel. C’est à travers les organismes qu’on va apercevoir la mise en place des prémices de l’interface. Un organisme peut par exemple désigner une liste, un header, etc.
- Les templates : L’association des éléments constitutifs d’une interface (atomes, molécules et organismes) nous permet d’obtenir un squelette pour notre page web. C’est ce qu’on appelle template.
Dépourvu de textes, d’images ou d’animations, les templates offrent plutôt une structure à la page web. C’est à ce stade que les designers commencent à adapter leurs éléments (atomes, molécules, organismes) à la taille donnée d’un écran. - Les pages : Une page est la composition finie d’un template. Le contenu visuel et textuel final est inséré. A ce stade, la visualisation complète de l’interface et de ces différents éléments est possible.
La validation des atomes, des molécules puis des organismes pour enfin constituer templates et pages permet d’avoir des constituants d’interface modulables, facilement interchangeables mais aussi évolutifs.
En effet, l’assemblage des éléments clés de l’interface suivant la démarche de l’Atomic Design offre la possibilité de proposer une infinité de déclinaisons d’écrans, en opérant des assemblages multiples et variés en un temps record.
L’utilité de l’Atomic Design pour L’UX design :
L’Atomic Design optimise l’expérience de l’interface
L’Atomic design compile les composants clés d’une interface afin de constituer des bibliothèques d’éléments réutilisables. Il sera ainsi possible aux designers et développeurs de concevoir des design systems complets, englobant tous les éléments visuels, de principes d’interactions et de codes itératifs de l’interface. Ces design systems (systèmes de composants) se présentent comme un référentiel à destination des UX/UI designers. Ils constituent des chartes digitales complètes et rationalisées.
Le design de l’expérience utilisateur (UX design) se définit comme la conception d’un processus centré humain, garantissant une meilleure expérience client. L’optimisation de l’expérience passe par une maximisation de l’utilisabilité, de l’ergonomie et du plaisir procurés à l’utilisateur en contact avec l’interface.
L’UX design prend forcément en compte le design de l’interface qui lui est intrinsèque. L’expérience de l’interface par l’utilisateur doit être intuitive, agréable et utile.
En cela, la création d’une charte graphique est une étape importante dans l’UX/UI design. C’est la mise en place d’Atomic Design Systems, c’est-à-dire de bibliothèques des éléments visuels clés, qui est la base de l’élaboration de la charte graphique complète de l’interface.
Non aux incohérences graphiques, bête noire de l’UX
L’atomic design contribue à l’élaboration d’une UX (expérience utilisateur) plus optimale. Il permet de poser un socle pour l’ergonomie générale et finale de l’interface. En effet, l’Atomic Design permet d’empiler les divers constituants de l’interface, de les hiérarchiser, et surtout de conserver une continuité graphique garantissant ergonomie et cohérence graphique. Les design systems créés selon la méthode Atomic Design évitent toute dissonance cognitive possible lors de la création de l’interface, surtout si le site est constitué d’un grand nombre de pages. Ainsi, les utilisateurs s’apercevront pas, par exemple, deux boutons graphiquement différents ayant la même action.
Les dissonances visuelles prêtent à confusion, en résulte des utilisateurs troublés par ce manque d’utilisabilité et d’ergonomie. Par ailleurs, la satisfaction utilisateur ne peut nullement résulter d’une interface présentant des incohérences graphiques, et c’est là un pilier de l’UX design. Ainsi, tout bon UX designer va chercher à inclure les designs systems dans ses UX patterns.
Car, une bonne expérience utilisateur passe forcément par une interface aux composants graphiques continuellement cohérents, tout au long de la plateforme digitale.
L’Atomic Design en consolidation de l’UX design
L’Atomic Design s’avère être un outil incontournable de l’UX design, puisqu’il facilite l’adaptation des résultats des UX research à l’interface plus facilement.
En effet, et selon les contraintes relevées par les UX designers, l’Atomic Design offre une grande flexibilité de mise en page. Il permet de modifier la disposition des différents organismes, molécules et atomes facilement et rapidement. Si le client émet le souhait de modifier la mise en page de l’interface, ou si les résultats de l’UX research ou des tests utilisateurs préconisent des changements, cela ne posera aucune contrainte aux développeurs et designers, en plus de garder le graphisme de l’interface intact.
Sur un autre plan, l’UX design est un processus itératif. Le consultant UX est en recherche constante, il conceptualise, teste, analyse les retours et les incohérences, modifie, corrige et teste à nouveau. Ce schéma peut se répéter plusieurs fois et implique une modification de l’interface tout au long du projet. L’Atomic design présente alors un avantage dans le traitement et implémentation de ces retours. La modification d’un seul atome se répercute sur la globalité de l’interface et permet d’éviter les oublis et les incohérences graphiques. Les modifications sont immédiates et évolutives, permettant un gain d’énergie, de temps et d’argent.
Mot de la fin
Les modes et méthodes de design d’interface ont beaucoup évolué ces dernières années.
La création d’interface est un projet à part entière, où les différents designers et développeurs co-créent et collaborent, chacun dans son domaine de spécialisation, afin de se rapprocher au mieux du rêve de tout UX designer : l’interface parfaite.
Les designers UX d’interfaces disposent de méthodes et d’outils divers afin de garantir une ergonomie et une utilisabilité optimisées. L’Atomic Design vient prêter main forte à l’UX Design en alimentant les UX/UI patterns des bibliothèques de composants clés qui vont assurer la pérennité de l’identité visuelle et de la charte graphique de la marque.
N’hésitez pas à nous contacter pour en savoir plus.
