Atomic Design : la conception d'interface modulaire
Découvrez comme l'atomic design peut changer votre manière de concevoir vos produits tout en améliorant la productivité de vos équipes techniques.
tl;dr
L'Atomic Design est une méthode de conception par composants pour créer des interfaces utilisateur plus flexibles et évolutives, en utilisant des atomes, des molécules et des organismes. Cette approche permet une meilleure interconnectivité et une maintenance corrective plus facile, tout en améliorant la lisibilité du code.
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 !
A propos de l'auteur
Olivier est un passionné d’innovation, avec plus de 20 ans d’expérience, il est devenu un véritable ninja de l’optimisation des performances business des entreprises.
Sa créativité débordante lui permet d’aborder chaque projet avec une vision unique et authentique. C’est un magicien avéré de l’efficacité, capable de transformer chaque défi en une opportunité pour les entreprises qui font appel à lui.
A propos de Nimiscient
Nimiscient accompagne les entreprises dans leurs recherches de performance au travers des applications connectées et intelligentes.
Ainsi, nous aoportons les meilleurs leviers de productivité au cœur des entreprises grâce aux nouvelles technologies, à l’innovation et la créativité.