Atomic Design: qu’est-ce que c’est et pourquoi c’est important dans l’interface utilisateur

Le design system de définition indique un ensemble de spécifications qui permettent la création d’interfaces utilisateur (UI) cohérentes en termes de style, de couleurs, de polices de caractères, de marques de référence et de tout autre composant pouvant garantir une expérience utilisateur (UX) optimisée. Un design system définis directives, modèles et règles de conception d’interface utilisateur que les développeurs front-end peuvent exploiter quel que soit l’appareil choisi pour l’utilisation d’un contenu ou d’un service. Mais combien la subjectivité peut-elle peser dans le choix des éléments qui participent à la composition de l’interface d’un site internet ou d’une application ? Cette question a été posée par le concepteur Web Brad Frost dont la réponse est résumée dans une nouvelle méthodologie appelée Atomic Design et inspirée de la chimie.

Qu’est-ce que la Conception Atomique

Les atomes sont les structures qui permettent l’organisation de la matière et en représentent la plus petite fraction. La matière peut prendre différents états (solide, liquide, gazeux) dans lesquels les atomes s’agrègent en molécules qui sont l’unité de base des éléments chimiques. La combinaison de plusieurs molécules conduit finalement à la formation d’organismes qui peuvent être plus ou moins complexes. Atomic Design suit en partie cette dynamique en identifiant 5 phases (ou niveaux) hiérarchisées qui permettent la création d’un système de conception complet. En fait, on parle d’une méthodologie modulaire dans laquelle les éléments qui composent une UI sont pensés avant tout comme des atomes qui peuvent être agrégés en molécules qui peuvent à leur tour être combinées sous forme d’organismes.

Les cinq phases de la Conception Atomique

Respectant une analogie partielle avec les processus chimiques, Frost a distingué les trois premières phases de la conception atomique dans les atomes, les molécules et les organismes. A ceux-ci s’ajoutent deux autres, modèles et pages. Chacune des phases indiquées précédemment prend un sens spécifique dans le cheminement menant à la formation d’une interface.

Atomes

Dans le cadre d’une UI, les atomes représentent des éléments qui ne peuvent plus être subdivisés et indissociables, ils peuvent être décrits comme des briques qui, utilisées ensemble, permettent de construire une maison. Du point de vue de la conception d’interfaces utilisateur pour Internet, les atomes peuvent être assimilés à des balises HTML, des boutons sur un formulaire ou un champ de texte. L’une des particularités des atomes concerne leur haut niveau d’abstraction, c’est pourquoi les animations ou les polices peuvent également être considérées comme telles.

Molécules

Contrairement à ce qui se passe avec les atomes, qui sont par nature des monades, les molécules apparaissent comme des touts. Une molécule est essentiellement un groupe d’atomes qui peuvent être combinés pour remplir une fonction. L’étiquette d’un formulaire, un champ de saisie et un bouton d’envoi sont des atomes inutilisables s’ils sont pris individuellement, s’ils sont combinés, ils deviennent plutôt un formulaire pour envoyer des commentaires ou pour formuler une requête à un moteur de recherche. Il existe des molécules plus ou moins complexes et, comme dans le cas des atomes, elles peuvent être assemblées pour obtenir des structures articulées.

Organismes

Dans Atomic Design, un organisme est le résultat de la combinaison de plusieurs molécules. Pensez par exemple au cas de l’header d’une page Web qui a été choisi par Frost pour décrire cette phase. Il peut contenir un moteur de recherche interne, un menu, un logo de marque et des icônes de connexion aux réseaux sociaux. Chacune de ces molécules participe donc à la formation d’un organisme qui en est précisément la tête, mais il existe différents types d’organismes et leur nature dépend du type de molécules agrégées en eux. Pour cette raison, les organismes peuvent également être considérés comme des composants d’une UI comme un pied de page ou la section d’une page Web destinée à héberger le contenu.

Template

Avec la phase de template, Atomic Design s’affranchit partiellement du modèle inspiré de la Chimie en commençant à proposer ce que devrait être le résultat final de la conception d’une UI. Un modèle est en fait un ensemble d’organismes qui, lorsqu’ils sont réunis, conduisent à la formation d’un schéma (layout) pour les pages. Grâce aux templates il est possible de proposer un emplacement pour tous les éléments qui composent un layout, ainsi les composants qui participent à la formation d’une interface ont enfin une structure. Voulant proposer une définition des templates, on peut dire qu’ils peuvent être représentés comme des agrégateurs capables d’offrir un contexte aux atomes, molécules et organismes.

Pages

Les pages représentent des modèles, ce qui signifie qu’elles vous permettent de visualiser l’interface utilisateur dans sa forme finale, y compris le contenu qu’elles sont destinées à héberger. Frost définit les pages comme des instances des modèles car elles fournissent une représentation complète de ce qui est affiché par l’utilisateur. En plus d’être la phase culminante de l’Atomic Design, les pages permettent de tester l’efficacité du Design System adopté, si les tests devaient révéler des problèmes critiques il faudra intervenir sur des molécules, organismes et templates pour appliquer les nécessaires modifications apportées à une interface utilisateur plus performante que celle conçue.

Les Avantages de la conception pour les atomes

Frost souligne que Atomic Design ne doit pas être considéré comme une règle mais comme un état d’esprit basé sur le principe « faire une chose et le faire bien« , c’est-à-dire se concentrer sur les éléments individuels d’un projet et les développer au maximum. Sur cette base, il est possible de reprendre le discours initial concernant la pertinence parfois excessive de la subjectivité dans les Design Systems, au risque de privilégier l’esthétique au profit de l’utilisabilité. L’Atomic Design, quant à lui, représente une méthodologie évolutive et fortement orientée vers la résolution de problèmes permettant d’obtenir des interfaces cohérentes qui tiennent compte avant tout de ce que pourrait être le comportement des utilisateurs lors de leur utilisation. Étant une méthodologie modulaire, elle permet de fonctionner à travers des composants réutilisables avec des avantages incontestables également du point de vue de la productivité.

L’UI Design Master de Talent Garden

Toute personne intéressée à s’attaquer à un cours de formation permettant d’approfondir le potentiel de la conception atomique et des systèmes de conception a la possibilité d’assister au prochain UI Design Master of Talent Garden qui aura lieu du 6 mai au 16 juillet 2022 pour atteindre sa dixième édition. Le Master, accessible sur sélection, est réservé aux professionnels tels que Graphiste, développeurs front-end, Web et mobile, Directeur Artistique, Web Designer et Chef de Projet Digital avec au moins 3 ans d’expérience professionnelle qui souhaitent être toujours à jour sur le dernières nouvelles Conception d’Interface Utilisateur. La durée totale du Master est de 120 heures en format mixte réparties entre contenu à la demande, sessions d’apprentissage en ligne en direct et cours en face à face au Campus Calabiana de Talent Garden à Milan. Pour plus d’informations sur l’initiative, vous pouvez consulter la page officielle du Master UI Design sur le site Talent Garden.

Conclusion

Atomic Design est une méthodologie qui révolutionne le concept de système de conception pour la création d’interfaces utilisateur. S’inspirant de la chimie, il subdivise chaque élément d’une UI en ses composants essentiels et agrégés, leur permettant d’être regroupés sous des formes différentes et progressivement de plus en plus articulées, jusqu’à l’obtention d’un résultat optimal en termes de convivialité.

10 mars 2022

Inscrivez-vous à notre newsletter

Restez informé des dernières nouvelles