5 étapes pour concevoir une interface
Qu’est-ce que l’atomic design ?
La méthodologie design system de Brad Frost
L’atomic design est une méthodologie de conception d’interfaces théorisée par Brad Frost dans son livre éponyme. Son idée est d’adresser la multiplication des écrans et contextes d’usage par la construction de design systems organisés qui rendent les interfaces plus cohérentes.
Inspirée de l’étude de la matière, l’atomic design se découpe en 5 niveaux hiérarchisés, où chaque interface est un univers composé par des atomes, des molécules, des organismes, des templates et des pages.
Les 5 étapes de l’atomic design
1. Les atomes d’une interface sont ses plus petits éléments de construction, comme un bouton, un champ de recherche ou encore une balise d’indication.
2. Comme en chimie, une molécule est un groupement d’atomes qui forment un ensemble. Par exemple, les atomes cités plus hauts (bouton, champ de recherche, balise) s’agrègent pour former un formulaire de recherche.
3. Une section complexe d’une page est un organisme formé de plusieurs molécules. Ici cette section de haut de page est composée, entre autres, d’un formulaire (molécule elle-même composée des atomes « bouton », « champ de recherche” et “balise”) mais aussi d’un logo-bouton et d’un menu complexe (où chaque élément est également une molécule). Les organismes font prendre forme aux sections de page et ébauchent la structure, la composition finale de l’interface.
4. L’analogie chimique s’arrête aux templates. Composés de plusieurs sections (ou organismes), ce sont des structures sans contenu (texte, image) qui remplacent les wireframes.
5. Enfin, les pages sont des variations de templates augmentées de contenus représentatifs de l’interface finale. Cette étape permet aux commanditaires de se projeter sur une représentation complète et tangible. Les designers peuvent également mesurer l’efficacité de leur produit et repérer les points d’amélioration. C’est aussi le moment de tester des variantes de mise en page (comme l’effet d’un titre d’une ligne par rapport à un titre long par exemple, ou encore l’aspect d’un panier e-commerce d’un item par rapport à un panier rempli de 15 items).
