Découvrez nos offres pour faire du digital le levier de votre croissance !
Téléchargez le Guide Ultime de gestion de projet digitale pour vous aider à piloter vos transformations et faire les bons choix !
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...
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.
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 ...
Le concept d'Atomic Design se rapproche aussi de celui de Modular Web Design, apparu quelques années plus tôt.
Nous avons abordé plusieurs fois l'expérience utilisateur ou UX lors de précédents articles. 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. Coupler par ailleurs les logiques d'Atomic Design à des UX patterns garantit ainsi l'absence de dissonance cognitive (quand un internaute pourrait rencontrer un composant identique mais ne produisant pas la même action ou inversement).
Brad Frost donne dans son ouvrage quelques conseils pour mettre en place un Atomic Design System pertinent. En particulier :
Ce nouveau concept d'Atomic Design devrait permettre d'apporter de multiples avantages, à tous les stades de vos projets. En voici quelques-uns :
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 prend par ailleurs toute sa valeur quand il s'agit de mettre en oeuvre des design systems. L'Atomic Design System utilise le principe de composants pour construire une bibliothèque d'éléments, visuels et principes d'interaction au code réutilisable. C'est un référentiel UX/UI destiné à tous les designers / développeurs d'une organisation et rationalise l'application d'une "charte digitale".
Nous restons à votre disposition pour vous aider à déployer de telles stratégies UX/UI.