Les Design Patterns, ou modèles de conception, sont des solutions éprouvées à des problèmes récurrents de design ou de code. Utile au designer et au développeur, le design pattern améliore aussi l’utilisabilité du site ou de l’application. Ces « patrons de conception », réutilisables, rendent l’interface plus intuitive pour l’utilisateur.
Origine du concept de Design Pattern
Le concept de Design Pattern date des années 1970. L’architecte Christopher Alexander constate que la phase de conception, en architecture, s’accompagne de difficultés récurrentes. Afin de résoudre ces problèmes de solidité de la structure ou encore d’étanchéité, il crée un langage de 253 patterns.
« Chaque patron décrit un problème qui se manifeste constamment dans notre environnement et donc décrit le cœur de la solution à ce problème, d’une façon telle que l’on puisse réutiliser cette solution des millions de fois sans jamais le faire deux fois de la même manière. »
Christopher Alexander
Voici une séquence du livre numérique basé sur “Un modèle de langage” du travail de l’architecte Christopher Alexander. Alexander écrit sur sa méthode d’architecture et de design urbain et sur la manière dont elle encourage la vie de la communauté.
Design Patterns : traduction et définition
Les Design Patterns ont été traduits en français par modèles de conception, patrons de conception ou encore motifs de conception. On peut aussi les considérer comme des schémas de conception, c’est-à-dire des modèles de composants fonctionnels d’une interface répondant à des cas typiques d’interaction. Par exemple, comment présenter un calendrier ou un processus par étapes. Les designs patterns sont un excellent point de départ à un travail de conception.
Globalement, le patron de conception permet de partager une bonne pratique, testée et approuvée par des professionnels. À la conception d’un logiciel ou lors du design d’un site web, les concepteurs sont confrontés à des difficultés. Lorsqu’une solution a été utilisée suffisamment souvent pour avoir fait ses preuves, on peut la proposer sous la forme d’un modèle de conception. Cela évite aux designers de réinventer la roue, et aux développeurs de créer quelque chose à partir de rien. Chacun peut accélérer le processus, tout en étant certain de choisir un modèle à l’efficacité établie et aux résultats objectifs.
UI/UX Design Pattern : avantages pour l’utilisateur
Outre le gain de temps et la prise de risque réduite pour l’équipe de conception, le pattern rend également service à l’utilisateur de l’interface. En interagissant avec les produits, les utilisateurs prennent des habitudes. Ils recherchent naturellement un modèle qu’ils connaissent déjà, par exemple un bouton ayant telle apparence. Cet apprentissage cognitif a des conséquences en termes d’utilisabilité.
En effet, si un design ne correspond plus au modèle prévisible, l’utilisateur va avoir davantage de difficulté à trouver une information. À l’heure actuelle, c’est potentiellement suffisant pour quitter le site ou l’application. Au minimum, l’expérience utilisateur peut en être dégradée. Au contraire, les patterns sont susceptibles d’améliorer l’intuitivité de l’interface et donc l’expérience utilisateur. C’est pour cela qu’il faut réfléchir avant de refuser l’utilisation d’un modèle existant.
La conception d’un modèle personnalisé doit réellement apporter beaucoup plus d’avantages que le recours à un modèle établi antérieurement. Dans le cas contraire, la fatigue cognitive risque d’être importante pour l’utilisateur. De plus, il est toujours possible de modifier un peu le code réutilisable.
Les dangers des patterns : Dark Patterns
Les Dark Patterns ont pour objectif de piéger l’utilisateur pour l’inciter à acheter un produit ou encore à souscrire à une assurance, réaliser une action qu’il n’est ni dans son intérêt, ni dans celui de la communauté. Les dark Patterns sont donc à bien distinguer des Nudges. Qu’il s’agisse d’une page web, d’une application mobile ou d’un logiciel, les patterns « obscurs » manipulent les utilisateurs.
À voir : la conférence Dark Patterns : User Interfaces Designed to Trick People (Dark patterns : interfaces utilisateur conçues pour tromper les gens / utilisateurs).
Ressources d’UI/UX Design Patterns
Les design patterns sont des schémas de conception, c’est-à-dire des modèles de composants fonctionnels d’une interface répondant à des cas typiques d’interaction. Par exemple, comment présenter un calendrier ou un processus par étapes. Les designs patterns sont un excellent point de départ à un travail de conception.
Nous avions recensés plusieurs sites consacrés aux design patterns et une petite mise à jour s’imposait.
We are colorblind – wearecolorblind.com
Un génial catalogue de patterns détaillés et surtout compatibles (a priori) avec le daltonisme
Welie – welie.com/patterns
Une bibliothèque détaillée et riche de design patterns. Des recommandations accompagnent chaque modèle ainsi que des exemples d’interfaces (malheureusement inactif depuis 2008).
Designing Interfaces – designinginterfaces.com
Le site est très riche. Il traite à la fois des sites web et des interfaces logicielles. Il reprend en partie l’ouvrage de Jenifer Tidwell (Designing interfaces, une sacrée référence en la matière).
UI Pattern – ui-patterns.com/patterns
Un catalogue de design patterns avec de nombreux exemples variés issus du web. Il s’enrichit en continu par la contribution de tout un chacun !
UI Cloud : De nombreux mobile UI patterns compatibles avec différentes plateformes.
UX Pin : c’est également une ressource intéressante pour le mobile (application, e-commerce, réseau social…). Le site est collaboratif.
Zurb : Plus de 5 000 patterns, UI et comportementaux en particulier, sont mis là par et pour des designers, ou développeurs, du monde entier. Des extraits de code sont fournis.
Autres sources :
10 Great Sites for UI Design Patterns
Creating a Pattern Library
Voir cette vidéo de présentation de Patterns mobile :
Conclusion
Face à un problème récurrent en conception, les design patterns sont des solutions standards, modifiables et adaptables. Ces patrons de conception facilitent également le travail d’équipe entre les concepteurs. Enfin, les patterns correspondent aussi aux habitudes des utilisateurs et leur procurent donc une meilleure expérience. La réutilisation des modèles est facilitée par les multiples bibliothèques d’UX/UI Patterns, conçus pour différents environnements. La créativité du Designer n’est pas vraiment amoindrie puisqu’il est possible de modifier le code source. Cependant, mal utilisés, les patterns, appelés alors Dark patterns, peuvent aussi être nocifs pour l’utilisateur. Le Design Pattern répond toujours à une problématique spécifique et s’emploie dans ce contexte.
Lire aussi dans le blog :
- Qu’est-ce que le Design System ?
- Qu’est-ce que l’Atomic Design ?
- Qu’est-ce que le Design Sprint ?
- Qu’est-ce que l’UI Design ?
- Conception d’interface : Créer une véritable expérience digitale (UX)
- Design graphique : Créer l’identité visuelle de votre interface
- Maquettage d’interface : La maquette interactive “wireframe” est l’outil le plus concret pour construire l’UX
- Refonte d’interface (UI), Rajeunir l’interface
- UI Designer : entre créativité et rigueur
- Panorama des métiers de l’UX/UI Design
- Interface invisible, NoUI, NUI… L’UI menacée ?
- Les clés d’une collaboration UX / UI réussie
Voir aussi :