Atomic design : pour une expérience utilisateur réussie

PC, smartphone, tablette et même montre connectée : les supports sur lesquels vos clients ou prospects consultent votre site web n'en finissent pas de se multiplier. Un constat qui contraint les webdesigners d'aujourd'hui à redéfinir leur façon de concevoir les interfaces pour conserver une expérience utilisateur à la hauteur. Et c'est là que l'atomic design entre en scène.

Qu'est-ce que l'expérience utilisateur ?

Mais avant de rentrer dans le vif du sujet, revenons rapidement sur l'objectif premier de cette démarche : offrir au visiteur de votre site web une expérience utilisateur de qualité, quel que soit le device par lequel il est entré. Et pour y parvenir, vous allez faire appel à deux supers héros du web : l'UX et l'UI designer.

Il est bien loin le temps où l'on différenciait les deux disciplines de cette façon :

Et pour cause, c'est prendre un vilain raccourci et passer sous silence toute la complexité de ces deux métiers, certes complémentaires et pourtant bien distincts.

En résumé, appliqué au webdesign, retenez ceci :

• L'expérience utilisateur est la façon dont votre site web va répondre aux attentes de vos clients ou prospects en matière d'ergonomie, de navigation ou de contenu tout au long de leur parcours. Bien pensée en amont, la conception de votre site web va leur permettre de vivre une expérience utilisateur de qualité ;
• L'UX designer identifie les besoins réels des utilisateurs afin de leur apporter la meilleure expérience utilisateur possible. Il va par exemple déterminer qu'un bouton "call to action" doit être intégré à votre page d'accueil ;
• L'UI designer va quant à lui concevoir et positionner les éléments graphiques de façon à répondre aux attentes identifiées par l'UX designer. Et par exemple, placer le bouton "call ton action" identifié par l'UX designer en haut de la page d'accueil et le mettre en couleur pour qu'il soit visible pour le visiteur.

En conclusion, les deux disciplines ne peuvent exister l'une sans l'autre et sont toutes deux indispensables pour créer une expérience utilisateur optimale. Si vous voulez aller plus loin dans la définition, prenez 4 minutes pour visionner cette vidéo :

Qu'est-ce que l'atomic design ?

Et l'atomic design dans tout ça ? On vous explique…

L'atomic design a vu le jour grâce à Brad Frost. Ce webdesigner, speaker, écrivain, musicien et artiste (rien que ça) a bouleversé l'univers du design modulaire. Son concept : ne plus construire les pages d'un site web mais plutôt des systèmes de composants évolutifs, des chartes graphiques digitales en somme.

Plus concrètement cette méthode de conception modulaire scinde l'interface en 5 éléments distincts :

• Les atomes sont les éléments de base, ceux qui font ressortir l'identité de la société, comme par exemple un logo, un pictogramme, un champ de saisie, un bouton, etc. ;
• Les molécules correspondent à des groupes d'atomes et forment une unité. Par exemple, un champ de saisie, un label et un bouton mis ensemble peuvent représenter un formulaire de recherche ;
• Les organismes constituent des groupes de molécules ou des groupes de molécules associés à des atomes. Ainsi, un header est un organisme à partir du moment où il contient à la fois un champ de recherche, un logo, une barre de navigation, etc. ;
• Les templates forment les pages. Il s'agit d'un ensemble d'organismes qui, associés les uns aux autres, permettent d'avoir une vision concrète de la mise en page finale. Ils ne contiennent ni textes, ni images et servent essentiellement à tester le comportement "responsive" des composants ;
• Les pages quant à elles représentent la version la plus fidèle du site une fois terminé, l'idée est de compléter les templates avec les textes et les images à diffuser sur chaque page.

Cette méthodologie permet de construire, pas à pas, son site Internet tout en prenant le recul suffisant pour créer des éléments évolutifs sur le long terme.

Quels sont les avantages de l'atomic design ?

Il existe 3 avantages majeurs d'une conception en atomic design.

Une expérience utilisateur cohérente

L'atomic design permet de créer des éléments de manière décomposée. En prenant du recul dès le début de la conception de ces éléments, cette méthodologie propose d'homogénéiser les interfaces afin de conserver une cohérence globale pour les utilisateurs.

Un gain de temps et de productivité

Bien mis en œuvre, le concept développé par Brad Frost représente un réel avantage en matière de productivité. Grâce à lui, designers et développeurs travaillent en parfaite collaboration, favorisant ainsi le travail d'équipe et les effets de synergie. L'atomic design évite également de devoir développer tous les éléments pour chaque écran. Il offre, en outre, la possibilité de réaliser des tests en environnement réel afin d'expérimenter rapidement chaque prototype.

Une vision long terme de la conception web

La bibliothèque d'éléments ainsi construite devient flexible et s'adapte facilement aux besoins des designers, développeurs et des utilisateurs au fil du temps. La liberté de langage que permet l'atomic design est également un atout de taille qui s'intègre naturellement dans le projet.

Quelles sont les limites de l'atomic design ?

La mise en place d'une méthodologie atomic design ne s'improvise pas. Voici quelques conseils à mettre en pratique avant de vous lancer dans la démarche :

• Veillez à établir une conduite du changement au sein de vos équipes afin de garantir une bonne collaboration entre designers et développeurs ;
• Prenez le temps et allouez le budget nécessaire à la bonne mise en œuvre de cette méthodologie, l'atomic design demande un certain investissement de départ, que vous pourrez rentabiliser par la suite ;
• Soyez attentif lors de l'étape de catégorisation des différents éléments (atomes, molécules, templates, etc.), cela demande une vraie discipline ;
• Ne bridez par la créativité de vos designers : même si l'atomic design cadre la conception, les possibilités d'assemblage doivent rester nombreuses pour les stimuler.

En bref, l'atomic design apporte une réelle valeur ajoutée à la mise en œuvre d'une expérience utilisateur optimisée. Pour faciliter la réussite de votre projet, intégrez ce nouveau concept dès la création de votre site web. Cela dit, il est également possible de s'appuyer sur l'atomic design dans le cadre de la refonte d'un site web déjà existant. Alors, prêt à entrer dans le design system ?