Design UX 101 : des objectifs utilisateurs aux maquettes

1. La carte : où se situe le design UX

Vous connaissez déjà l’algorithme (Design thinking 101) et la façon dont la recherche l’alimente (Recherche UX 101). Le design UX, c’est la même boucle appliquée à des choses destinées à être utiles; ce cours l’applique aux produits numériques. Son cœur, c’est ce qui se passe entre une idée et une interface que l’on peut tester.

À faire. Situez sur la boucle trois de vos propres réalisations (une page de campagne, un formulaire, une infolettre). Lesquelles ont été conçues sans décision derrière? Nommez ensuite votre cas : à créer ou à faire évoluer?

2. UX ou UI : la scène ou la surface

L’UX, c’est toute la scène : les personnes, l’interface et l’environnement, dans le temps. L’UI, c’est la surface de la boîte sarcelle : ce que l’utilisateur voit et touche. Une UI parfaite ne peut pas sauver une scène où le produit ne répond pas à l’objectif.

Le design de produit, c’est la même boucle appliquée aux produits. Le design UX couvre plus de terrain, parce que certaines choses utiles ne sont pas des produits : un service, un document, un environnement. Dans les titres de poste, les designers de produit prennent habituellement aussi en charge le volet affaires du produit (ce qu’on bâtit, pour qui, et pourquoi c’est viable).

À faire. Choisissez une application que vous utilisez. Nommez un problème qu’aucun changement d’UI ne pourrait régler, et un problème que seul un changement d’UI pourrait régler.

3. De l’objectif à la tâche

Un écran sert une tâche; une tâche sert un objectif. Écrivez l’objectif dans les mots de l’utilisateur, puis les trois à cinq tâches qui permettent de l’atteindre. Pas de tâche, pas d’écran.

À faire. À partir de vos insights de recherche, écrivez un objectif, trois tâches et un critère de réussite par tâche (« c’est terminé quand… »).

4. Le parcours avant l’écran

Un écran est un état dans un chemin. Dessinez d’abord le chemin : l’entrée, les étapes, les décisions, la sortie, et une erreur. C’est la seule architecture de l’information dont un cours 101 a besoin.

Avant de dessiner, faites un choix stratégique : universel ou personnalisé? Soit vous concevez une seule interface qui fonctionne pour le plus grand nombre de personnes possible, soit vous adaptez l’interface à des profils précis. Les deux sont valables. Faites ce choix explicitement, et faites-le maintenant, parce qu’il façonne le parcours, pas seulement la surface.

À faire. Énoncez votre choix (universel ou personnalisé) et pourquoi, en une phrase. Dessinez ensuite, sur papier, le parcours idéal en six états ou moins, plus un parcours d’erreur. Cas à faire évoluer : cartographiez d’abord le parcours actuel, puis marquez où il brise. Avant de continuer, échangez vos parcours avec quelqu’un d’autre pour cinq minutes de rétroaction.

5. Les mots, première interface

Les produits sont faits de mots. Écrivez avant de dessiner. Les titres, les étiquettes, les boutons, les messages d’erreur et les états vides portent l’essentiel de l’expérience utilisateur. Parlez la langue de l’utilisateur (heuristique nº 2 de la liste de Nielsen). C’est ici que les professionnels des communications partent avec une longueur d’avance.

À faire. Écrivez chaque mot de votre écran principal, y compris un message d’erreur et un état vide. Pas de mise en page pour l’instant.

6. La mise en page : hiérarchie et modèles

N’inventez pas; réutilisez les conventions que les utilisateurs connaissent déjà (loi de Jakob). Classez les mots par ordre d’importance, puis utilisez la taille, le contraste, la position et le regroupement pour rendre cet ordre visible.

À faire. Faites trois variantes de maquette filaire en niveaux de gris de votre écran principal, chacune bâtie à partir d’un modèle existant tiré d’un système de design public. Choisissez-en une et défendez-la devant quelqu’un en deux minutes; recevez une critique avant de continuer.

7. Fidélité et outils : papier → maquette filaire → Figma → IA

La fidélité se choisit selon la question à laquelle vous devez répondre, pas selon l’ambition (voir Design thinking 101, section 8). Le minimum dans Figma : des cadres, du texte, des formes, des composants tirés d’une trousse, et des liens entre les cadres.

Figma s’utilise en tandem avec un outil d’IA gratuit, par exemple Google Stitch (gratuit au moment d’écrire ces lignes; vérifiez son offre gratuite actuelle avant de vous y fier). Les outils d’IA génèrent rapidement des écrans plausibles. Ils ne pèsent pas les compromis : ça, c’est votre travail.

À faire. Dans Figma, bâtissez la maquette filaire choisie sous forme de parcours cliquable : des cadres, du texte, des composants de trousse, des liens, rien de plus. Donnez ensuite à l’outil d’IA votre objectif, vos tâches, votre parcours et vos mots comme spécification, importez son résultat dans Figma et comparez-le au vôtre selon les critères de la section 8. Qu’a-t-il bien réussi? Qu’a-t-il inventé sans source?

8. Bonne ou mauvaise UX : trois angles sur une même scène

« Bon » n’est pas une question de goût. La norme ISO 9241-11 définit l’utilisabilité pour des utilisateurs donnés, avec des objectifs donnés, dans un contexte donné (la scène elle-même), mesurée par l’efficacité, l’efficience et la satisfaction. Trois angles s’appliquent.

L’utilisabilité. Inspectez votre conception avec les dix heuristiques de Nielsen, puis confirmez avec des utilisateurs. Cinq par ronde est la référence, et un, c’est mieux qu’aucun (voir Recherche UX 101, « Les tests d’utilisabilité »). Cette même revue heuristique est aussi le diagnostic précoce le plus rapide d’un produit existant : dans un cas à faire évoluer, utilisez-la tôt, pas seulement à la fin.

L’accessibilité. Bon pour qui? Le choix stratégique (universel ou personnalisé) a été fait à la section 4. Voici les normes qui s’appliquent dans les deux cas. Les autres triangles orange de la scène deviennent de vraies personnes : quelqu’un qui a une basse vision, quelqu’un qui n’utilise que le clavier, quelqu’un qui utilise un lecteur d’écran. Le standard public du Québec (SGQRI 008 3.0) vise le niveau AA des WCAG.

La performance. Bon quand? La vitesse perçue et la rétroaction comptent. Nielsen décrit trois limites : 0,1 seconde paraît instantané, 1 seconde préserve le fil de la pensée, 10 secondes marquent la limite de l’attention. Chaque attente a besoin d’un état visible.

À faire. Menez une évaluation heuristique de votre propre parcours et d’un site Web public, en cotant la gravité de chaque problème de 0 à 4. Faites un passage au clavier seulement et rédigez le texte de remplacement de votre écran. Concevez la rétroaction d’un état d’attente.

9. La piste de décision : une synthèse que l’on peut retracer

Le livrable n’est pas un bel écran. C’est un écran dont chaque élément renvoie à un objectif, une tâche, un constat ou une heuristique. Une piste de décision est toujours une synthèse, mais toute synthèse ne contient pas une piste de décision.

C’est cette piste qui sépare le design de la décoration. Les mêmes annotations servent deux publics : les personnes qui vont bâtir l’interface (la passation, où chaque élément est expliqué) et les personnes qui pourraient vous embaucher (une étude de cas qui montre comment vous pensez, pas seulement ce que vous avez dessiné, et une étude honnête plutôt que fabriquée).

À faire. Annotez votre écran final : associez chaque élément à sa source. Présentez-le en trois minutes et demandez de la rétroaction sur la piste, pas sur l’apparence.

10. Continuer à apprendre

Un cours 101 vous apprend à voir et à nommer. Le niveau intermédiaire vous apprend à arbitrer entre des compromis sur de nombreux écrans et de nombreux utilisateurs. Le niveau avancé vous apprend à le faire arriver au milieu des gens. Voici un chemin, avec un point d’entrée par dimension.

À faire. Prenez l’habitude de l’analyse critique : un écran par semaine, trois heuristiques, une réécriture.