Design pattern

Concept

Concevoir avec les design patterns en UX/UI

Un design pattern est une solution éprouvée à un problème de conception qui revient d’une interface à l’autre. Le fil d’Ariane pour se repérer dans une arborescence, la fenêtre de confirmation avant une suppression, l’accordéon qui replie une FAQ, autant de réponses que des milliers de produits ont adoptées avant de devenir des réflexes pour les utilisateurs.

Leur force tient précisément à cette familiarité. Un internaute passe l’essentiel de son temps sur d’autres services que celui qu’il utilise, et il arrive avec des attentes déjà formées sur la façon dont une interface doit se comporter. S’appuyer sur un pattern connu, c’est exploiter ce qu’il sait déjà faire, plutôt que de lui imposer un nouvel apprentissage.

Un design pattern se distingue du composant qui l’incarne. Le pattern est le principe de solution, indépendant de toute technologie, quand le composant en est la mise en œuvre concrète dans une interface donnée. C’est cette logique qui relie les patterns aux design systems, où ils sont documentés, outillés et assortis de règles d’usage.

À quoi ça sert ?

  • Réutiliser des solutions d’interface éprouvées plutôt que réinventer ce qui fonctionne déjà
  • Réduire l’effort d’apprentissage demandé à l’utilisateur, qui reconnaît un comportement déjà rencontré ailleurs
  • Partager un vocabulaire commun entre designers et développeurs (« fil d’Ariane », « modal », « accordéon »)
  • Accélérer la conception en s’appuyant sur des briques dont le comportement est prévisible
  • Évaluer une interface existante en la confrontant aux conventions que les utilisateurs connaissent

Ce qu’il faut savoir

  • Un pattern se justifie tant qu’il sert bien le besoin
  • La loi de Jakob, formulée en 2000 par Jakob Nielsen : les utilisateurs arrivent avec des attentes déjà formées ailleurs
  • Innover ne se justifie que là où les patterns existants échouent, sur un problème nouveau ou une friction réelle
  • L’écart doit apporter un bénéfice supérieur au coût d’apprentissage qu’il impose à l’utilisateur
  • La familiarité d’un pattern ne le rend pas neutre : certains, largement répandus, servent des intérêts contraires à ceux de l’utilisateur (les « dark patterns »)

Comment bien choisir un design pattern ?

Un pattern ne s’applique pas mécaniquement. Le bon choix dépend du contexte, du contenu et des habitudes des utilisateurs visés.

01

Partir du problème, pas de la solution

Un pattern répond à un problème d’interaction précis : se repérer, saisir, confirmer, comparer. On formule d’abord ce problème, avant de parcourir les patterns qui y répondent, sous peine de choisir une solution à la mode sur un besoin qu’elle ne sert pas.

02

Comparer les patterns candidats

Plusieurs patterns répondent souvent au même besoin. Un contenu long se prête mieux à un accordéon qu’à des onglets, une action secondaire ou tertiaire n’appelle pas le même traitement qu’une action primaire. On confronte les options à la densité de l’information, à la fréquence d’usage et aux contraintes de l’interface.

03

Tenir compte du terminal et de ses conventions

Les habitudes diffèrent entre le web et le mobile, et entre les systèmes. Un pattern efficace sur un site peut dérouter dans une application, où les utilisateurs attendent les conventions de leur système d’exploitation.

04

Vérifier auprès des utilisateurs en cas de doute

Quand deux patterns se valent sur le papier, un test rapide tranche mieux qu’une discussion. Une demi-journée de tests sur deux options concurrentes révèle souvent laquelle se comprend sans effort.

Questions fréquentes

Design system

Le design system, c'est une bibliothèque de composants et la gouvernance qui va avec. Ce qui le distingue d'un design kit, et quand il devient nécessaire.

En savoir plus sur Design system

Design Kit

Le design kit, ou UI kit, rassemble les composants d'un produit dans un fichier de conception : boutons, formulaires, cartes, navigation, icônes.

En savoir plus sur Design Kit

Affordance

L'affordance est la capacité d'un élément d'interface à suggérer son usage. Donald Norman a popularisé le concept : seule l'affordance perçue compte.

En savoir plus sur Affordance

Dark patterns

Les dark patterns sont des interfaces conçues pour manipuler. Du cookie banner confus à l'abonnement piège, le DSA européen les interdit depuis 2023.

En savoir plus sur Dark patterns

Design d’interface

L'UI design conçoit la couche visuelle d'un produit : mise en page, couleurs, typographie, composants. Il traduit l'expérience en éléments tangibles.

En savoir plus sur Design d’interface

Maquettes graphiques

Les maquettes graphiques donnent leur forme définitive aux futurs écrans, à transmettre aux équipes projet en vue de l'intégration.

En savoir plus sur Maquettes graphiques

Psychologie cognitive

La psychologie cognitive étudie comment le cerveau traite l’information. Mémoire, attention, perception : les bases scientifiques du design UX.

En savoir plus sur Psychologie cognitive

Utilisabilité

L’utilisabilité mesure si un produit permet d’atteindre ses objectifs avec efficacité, efficience et satisfaction, selon la norme ISO 9241-11. Une composante essentielle de l’UX.

En savoir plus sur Utilisabilité

Vous souhaitez en savoir plus sur nous ?

Tout le monde parle experience utilisateur, design de service, ergonomie...
C'est pas très clair, mais vous aimeriez bien découvrir tout ca ou progresser.

Parlons-en