Module 3Créer une maquette pour le développement web
Chapitre 8 sur 12
Les heuristiques de Nielsen, les lois de l'UX, l'accessibilité, les personas et le wireframe papier.
Objectifs
Avec ce chapitre, tu sauras…
:::savoir Un chapitre rédigé à partir du programme Le résumé théorique fourni s'arrête avant la partie 3. Ce chapitre suit les intitulés officiels (« Comprendre les principes de la conception de l'expérience et l'interface utilisateur », « Structurer un wireframe sur papier ») et les pratiques actuelles du métier. :::
Leçon 1
| UX : expérience utilisateur (User eXperience) | UI : interface utilisateur (User Interface) | |
|---|---|---|
| question | l'utilisateur atteint-il facilement son but, et quel ressenti en garde-t-il ? | à quoi ressemble l'interface, et comment se présente chaque élément ? |
| porte sur | les parcours, l'organisation des contenus, la facilité, la rapidité, la satisfaction | les couleurs, les typographies, les icônes, les boutons, les espacements, les animations |
| livrables | recherches utilisateurs, personas, parcours, arborescence, wireframes, prototypes testés | charte graphique, maquettes haute fidélité, bibliothèque de composants (design system) |
| métier | UX designer, ergonome | UI designer, designer graphique |
Vidéo · À regarder
FRUX vs UI : les différences expliquées !
YouTube (FR) · YouTube
Leçon 2
| N° | Heuristique | Exemple sur un site web |
|---|---|---|
| 1 | visibilité de l'état du système | un indicateur de chargement, « Article ajouté au panier (3) » |
| 2 | correspondance avec le monde réel | le vocabulaire de l'utilisateur (« Mon panier », pas « Session cart ») ; une icône de corbeille pour supprimer |
| 3 | contrôle et liberté | un bouton « Annuler », « Retour », pouvoir vider le panier |
| 4 |
Leçon 3
| Étape | Outil | Exemple pour Kitab |
|---|---|---|
| comprendre les utilisateurs | entretiens, questionnaires, observation, analyse des concurrents | 6 entretiens avec des clients des deux magasins |
| synthétiser | personas : des portraits fictifs mais réalistes des utilisateurs types (âge, contexte, objectifs, frustrations, appareils) | « Salma, 34 ans, enseignante à Fès, achète des livres scolaires pour ses deux enfants à la rentrée, sur son téléphone, le soir » |
| définir les parcours | parcours utilisateur (user journey) : les étapes, les points de contact, les émotions et les points de friction d'un persona qui atteint un but |
Leçon 4
| Livrable | Niveau de détail | Outil | But |
|---|---|---|---|
| zoning | de grands blocs nommés (en-tête, menu, contenu, pied de page) | papier, tableau blanc | répartir les zones de la page |
| wireframe (maquette fonctionnelle, basse fidélité) | la structure et le contenu de chaque écran, en noir et blanc, sans graphisme | papier, puis Figma | valider l'organisation, la hiérarchie et les parcours avant le graphisme |
| maquette (mockup, haute fidélité) |
Leçon 5
1Le choix des couleurs et des typographies relève surtout…
2Un indicateur « Envoi en cours… » applique l'heuristique…
3La loi de Fitts concerne…
4La loi de Hick dit que le temps de décision augmente avec…
5Le contraste minimal du texte normal au niveau WCAG AA est…
6Une maquette en noir et blanc qui montre la structure d'un écran est…
7Dans un wireframe, un rectangle barré d'une croix représente…
8Un portrait fictif et réaliste d'un utilisateur type est…
L'essentiel du chapitre
| cohérence et standards |
| le logo en haut à gauche ramène à l'accueil ; un même bouton a toujours la même couleur |
| 5 | prévention des erreurs | désactiver « Payer » tant que le formulaire est incomplet ; demander confirmation avant de supprimer |
| 6 | reconnaître plutôt que se souvenir | les derniers livres consultés sont affichés ; les options sont visibles, pas à mémoriser |
| 7 | flexibilité et efficacité | des raccourcis pour les habitués, la recherche à côté de la navigation par menus |
| 8 | esthétique et design minimaliste | pas d'information inutile qui détourne l'attention de l'essentiel |
| 9 | aider à reconnaître, diagnostiquer et corriger les erreurs | « Le mot de passe doit contenir au moins 12 caractères » plutôt que « Erreur 422 » |
| 10 | aide et documentation | une FAQ, une aide contextuelle à côté des champs difficiles |
| Loi | Énoncé | Conséquence pour l'interface |
|---|---|---|
| loi de Jakob | les utilisateurs passent l'essentiel de leur temps sur d'autres sites : ils s'attendent à ce que le tien fonctionne pareil | respecter les conventions (panier en haut à droite, logo à gauche) |
| loi de Fitts | le temps pour atteindre une cible dépend de sa distance et de sa taille | des boutons importants grands et proches ; cibles tactiles d'au moins 44 à 48 pixels sur mobile |
| loi de Hick | le temps de décision augmente avec le nombre de choix | menus courts, une action principale par écran, regrouper les options |
| charge cognitive (Miller) | la mémoire de travail est limitée (quelques éléments à la fois) | découper un long formulaire en étapes, grouper les informations (numéro de téléphone en blocs) |
| proximité (Gestalt) | les éléments proches sont perçus comme liés | rapprocher une étiquette de son champ ; espacer les groupes différents |
| similarité (Gestalt) | les éléments semblables sont perçus comme ayant la même fonction | tous les liens de la même couleur ; tous les boutons secondaires identiques |
| Salma cherche la liste scolaire, l'ajoute au panier, choisit le retrait en magasin, paie |
| imaginer les écrans | zoning, puis wireframes | les écrans du parcours de Salma, en mobile |
| tester | tests utilisateurs sur papier ou sur prototype | Salma doit trouver un livre et commander : on observe sans aider |
| l'écran final : couleurs, typographies, images, icônes réelles |
| Figma |
| valider l'apparence ; référence pour l'intégrateur |
| prototype | une maquette cliquable qui simule la navigation | Figma (mode Prototype) | tester les parcours avec des utilisateurs et présenter au client |
Vidéo · À regarder
FRCréer des wireframes parfaits en 10 minutes sur Figma
YouTube (FR) · YouTube
Dessine sur papier, en mobile, le wireframe de la page de résultats de recherche de Kitab (barre de recherche, nombre de résultats, filtres, tri, liste de livres avec couverture, titre, auteur, prix et bouton). Annote cinq comportements. Puis dessine la même page en desktop sur une grille de 12 colonnes.
Une porte avec une poignée qu'il faut pousser : c'est un problème d'UX (l'objet suggère de tirer, on se trompe). Une porte magnifique, en bois sculpté, avec une plaque dorée : c'est de l'UI. Une bonne porte est belle et on sait tout de suite comment l'ouvrir. Sur le web, un joli bouton que personne ne remarque est une bonne UI et une mauvaise UX.
Ce que tu vas voir (vidéo courte, entièrement sur ce sujet) : la différence entre l'UX (l'expérience : est-ce simple et agréable d'atteindre son but ?) et l'UI (l'interface : couleurs, typographie, boutons), avec des exemples. C'est la distinction UX / UI de cette section.
Les 10 heuristiques de Jakob Nielsen
Publiées en 1994 et toujours utilisées pour évaluer une interface :
Les conventions
+---------------+ [ Bouton ] ( ) option [x] case cochée
|\ /|
| \ IMAGE / | ____________ Titre en gros caractères
| \ / | champ de saisie ============ (lignes épaisses)
| / \ |
| / \ | Texte courant : ~~~~~~~~~~~~~~~~
|/ \| (lignes ondulées) ~~~~~~~~~~~~
+---------------+
rectangle barré [=] menu « hamburger » (Q) recherche
d'une croix = imageDessiner un wireframe papier
Dessine sur papier les wireframes mobiles du parcours de commande de Kitab (panier, choix du retrait ou de la livraison, adresse, paiement, confirmation) et relie-les par des flèches (wireflow). Fais tester ton parcours par deux camarades : note leurs hésitations et corrige tes dessins. Photographie les versions avant et après pour ton dossier de conception.
Pour chaque défaut, cite l'heuristique de Nielsen non respectée : (1) après l'envoi du formulaire de contact, rien ne s'affiche ; (2) le bouton de suppression d'un compte n'a pas de confirmation ; (3) le message d'erreur dit « ERR_VALIDATION_07 » ; (4) le bouton « Valider » est vert sur une page et rouge sur une autre ; (5) le site parle de « SKU » au lieu de « référence » ; (6) il faut retaper toute l'adresse à chaque commande.
Rédige un deuxième persona pour Kitab (un utilisateur très différent de Salma) et décris son parcours pour un but précis en 5 à 7 étapes, en notant pour chaque étape un point de friction possible et une idée pour le supprimer.
Tableau: Les lois de l'UX
La hiérarchie visuelle et le sens de lecture
Le regard ne lit pas une page ligne par ligne : il la balaie. Sur une page riche en texte, il suit un parcours en F (le haut, puis un peu plus bas, puis la marge gauche) ; sur une page simple (page d'accueil, page de vente), un parcours en Z (logo, menu, diagonale, appel à l'action en bas à droite). On guide ce regard par la taille, le contraste, la couleur, la position et l'espace blanc : l'élément le plus important doit être le plus visible.
L'accessibilité
Un site doit être utilisable par tous, y compris les personnes en situation de handicap (visuel, moteur, auditif, cognitif). La référence internationale est le WCAG (Web Content Accessibility Guidelines, version 2.2) du W3C, avec trois niveaux : A, AA (le niveau visé en général), AAA.
Les bases de l'accessibilité dès la maquette
Mobile d'abord et responsive
Au Maroc comme ailleurs, la majorité des visites se font sur téléphone. On conçoit donc d'abord l'écran mobile (mobile first) : il oblige à garder l'essentiel. On adapte ensuite pour la tablette et l'ordinateur (responsive design), en général avec une grille de 4 colonnes (mobile), 8 (tablette) et 12 colonnes (ordinateur), comme celle de Bootstrap.
Cette démarche s'inscrit dans le design thinking : comprendre (empathie), définir le problème, imaginer, prototyper, tester, et recommencer.
Ce que tu vas voir (vidéo courte, entièrement sur ce sujet) : la construction rapide d'un wireframe dans Figma : des blocs gris pour placer les zones (en-tête, menu, contenu, pied de page) avant tout graphisme. Tu vois le passage du zoning au wireframe, juste avant la maquette.
+-----------------------------+
| [=] KITAB (Q) [P 2] | 1. en-tête : menu, logo, recherche, panier (2 articles)
+-----------------------------+
| < Retour aux résultats | 2. fil d'Ariane simplifié
| +-------------------------+ |
| |\ /| | 3. couverture du livre (balayage pour les autres photos)
| | \ IMAGE / | |
| | / \ | |
| |/ \| |
| +-------------------------+ |
| TITRE DU LIVRE | 4. titre (le plus gros texte)
| Auteur ~~~~~~ |
| ***** (12 avis) |
| 95,00 DH En stock | 5. prix et disponibilité, très visibles
| ( ) Retrait Rabat ( ) Fès |
| [ AJOUTER AU PANIER ] | 6. action principale : pleine largeur, contrastée
| Résumé |
| ~~~~~~~~~~~~~~~~~~~~~~~~~ |
| ~~~~~~~~~~~~~~ Lire plus v |
| Vous aimerez aussi > | 7. suggestions (défilement horizontal)
+-----------------------------+