Atomic design : la conception d’interface modulaire

De quoi parle-t-on ?

L’Atomic design est une méthode de conception par composants dont Brad Frost est le créateur.

Le concept est simple : la page web provient de l’idée d’une page de livre, mais aujourd’hui on ne peut plus penser en terme de pages puisque les éléments que nous créons doivent pouvoir se déployer tout aussi bien dans des environnements minuscules que dans des environnements immenses (projeté sur un mur, ou sur l’écran d’une montre connectée).

C’est pourquoi nous devons penser davantage en terme de système de composants multiples.

Concrètement, ça veut dire quoi ?

De manière simplifiée, l’interface utilisateur est découpée en différents composants :

• Les atomes, éléments qui ne peuvent pas être divisés mais qui composent la base de tous les éléments graphiques et ergonomiques de l’interface (des icônes par exemple) ;
• Les molécules, des collections d’atomes (un item dans une liste par exemple) ;
• Et les organismes, combinaison d’atomes et molécules qui forment l’interface finale.

Pourquoi ça nous intéresse ? Parce que l’Atomic design permet un assemblage beaucoup plus rapide et une meilleure interconnectivité et interaction entre les composants.

Une conception proche des besoins utilisateur

Avant tout, il est important de définir les profils des utilisateurs de manière très précise. Il s’agit de créer des personnages fictifs (représentant vos futurs utilisateurs) avec le plus de détails possibles pour en déduire leurs modes de raisonnement, leur niveau de compréhension et leurs comportements. C’est à partir de là que vous pourrez identifier les fonctionnalités, comportements des composants et les informations qu’ils contiennent.

Il faut également identifier les contraintes des utilisateurs en fonction du support de consultation. C’est là que le Responsive Web Design (RWD) apporte un bénéfice majeur en permettant d’assembler les composants dans une interface plus facilement, puisqu’ils sont traités de manière modulaire.

Des bénéfices immédiats

Plusieurs avantages découlent directement de cette façon de faire :

• Une maintenance corrective simplifiée : il est plus facile de corriger les bugs.
• Une maîtrise de la montée en charge, qui, à l’inverse, peut provoquer des interruptions de service ou des surcoûts.
• Une amélioration de la lisibilité du code et et des corrections/évolutions plus aisées : et oui, l’’Atomic design va aussi de paire avec la factorisation du code.

Conclusion

Il s’agit donc d’une méthode de travail qui permet de s’adapter à un environnement changeant, à ses utilisateurs, tout en bénéficiant d’avantages majeurs et en simplifiant la conception des interfaces.

Designers ou développeurs : en créant ainsi un système de composants qui améliorent la productivité des équipes, tout le monde y gagne !