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 :

ui-vs-ux-tendances-webdesign-cas-ketchup

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 :

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 :

atomic-design-atoms-molecules-organims
Les 5 éléments distinctifs
atomic-design-templates-pages
de l'atomic design

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 :

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 ?