CHAPITRE 2 âș A) SITE WEB (ORIENTĂ UX)
Le site web
orienté UX
Sept schémas tiennent toute la leçon. Une grille, un losange, un funnel, une adresse.
đ Un site web, c'est avant tout un outil
SchĂ©ma-souvenir S7 â il se monte pendant que la voix parle.
đ Les mots exacts du cours
đ§ La phrase d'ouverture de n'importe quelle question : « un site web, c'est avant tout un OUTIL ».
đŠ Les types de site â retiens l'objectif, pas la dĂ©finition CLIQUE-LES TOUS
đŹ Site vitrineson objectif ?
« Délivrer un discours maßtrisé » + « une visibilité sur les moteurs de recherche ».
đŠ Site institutionnelson objectif ?
« Construction de l'image et de son e-réputation ». Informe grand public, employés, actionnaires.
đ Site d'e-commerceson objectif ?
« Expose ses produits afin de les vendre » â canal de vente, au-delĂ de la communication.
đ Blogson objectif ?
« Des articles du plus récent au plus ancien », « structuré par thÚmes (les catégories) ».
?Tu lances une pub Google Ads pour une seule promo. Vers quelle page envoies-tu les gens â et pourquoi ?
đ RĂ©ponds dans ta tĂȘte, puis clique pour vĂ©rifier
?Dans le modĂšle POEM, oĂč se range le site web ?
đ RĂ©ponds dans ta tĂȘte, puis clique pour vĂ©rifier
đŻ 6 critĂšres â et 2 points dĂ©jĂ tombĂ©s
đ Question 4 de l'examen blanc â « DĂ©finissez et illustrez les 2 termes soulignĂ©s »
Les deux termes : l'expérience utilisateur et le responsive design.
Sa correction, mot pour mot. Définir seul ne vaut que la moitié.
đ§ ExpĂ©rience utilisateur = UX
« Il s'agit de la façon dont les utilisateurs perçoivent et interagissent avec un site web. Le but de l'UX est de créer une expérience positive pour les utilisateurs, en leur offrant une navigation fluide, une compréhension facile et une interaction agréable. Une bonne UX peut aider à améliorer la fidélisation des clients et à augmenter le taux de conversion. »
ILLUSTRE â commander une pizza, payer, suivre la livraison sans se demander oĂč cliquer.
đ± Responsive design
« Un site accessible sur tous les devices (un site internet qui s'adapte Ă tous les Ă©crans â tĂ©lĂ©phone, tablette, ordinateur, etc.). »
ILLUSTRE â sur ephec.be, le menu en ligne sur ordinateur se replie derriĂšre trois traits sur tĂ©lĂ©phone.
đ§ La dĂ©finition UX en 3 temps : 2 verbes â 3 promesses (fluide · facile · agrĂ©able) â 2 bĂ©nĂ©fices.
SchĂ©ma-souvenir S1 â la grille de Morville, dans la pyramide 3-2-1 que tu connais dĂ©jĂ .
đ RĂ©cite, puis clique â le critĂšre s'allume dans la pyramide CLIQUE-LES TOUS
1 · Findable
trouvable
2 · Accessible
pour tous
3 · Useful
utile
4 · Desirable
désirable
5 · Credible
crédible
6 · Usable
ergonomique
đ§ FAUDE-CU â et l'histoire : je te trouve, j'entre, ça me sert, ça me plaĂźt, je te crois, je m'en sers.
đ Ton lexique dit 7, ton syllabus dit 6 â dis 6.
Sa 7ᔠqualité, « apporte de la valeur », vient du honeycomb. Le support, lui, développe 6 critÚres.
FINDABLE
ACCESSIBLE
USEFUL
DESIRABLE
CREDIBLE
USABLE
đ Me trouver, puis me laisser entrer
1 · FINDABLE â « le site doit ĂȘtre facile Ă trouver » · 2 Ă©lĂ©ments clĂ©s
đ§ Les 4 caractĂ©ristiques : C · M · P · U â Court, MĂ©morisable, Pertinent, Unique.
2 · ACCESSIBLE â « Ă tous, quel que soit le device » · 2 facteurs TOMBĂ EN Q4
Schéma-souvenir S4 : les 5 verbes, les 6 bonnes pratiques, puis le responsive.
đ§ Les 5 verbes d'un souffle : percevoir · comprendre · naviguer · interagir · contribuer. Le dernier est celui qu'on oublie.
?« Responsive design » : donne la dĂ©finition et l'illustration. (c'Ă©tait la question 4 de l'examen blanc â 1 point)
đ RĂ©ponds Ă voix haute, puis clique pour comparer
âïž Le contenu qui sert, le design qui plaĂźt, le site qui rassure
đ Clique une lettre du modĂšle BEST â elle s'allume dans le schĂ©ma CLIQUE-LES TOUS
đŹ Behavioralle comportement
Le CTA qui favorise la micro ou macro-conversion : partagez, likez, achetez.
đŠ Essentialle fond
Les infos « pertinentes et utiles pour la cible » â cf. personas.
đš Strategicla marque
« Cohérence avec le key message », renforcer l'identité, se démarquer.
đŁïž Targetedla forme
Le vocabulaire de la cible (les verbatims quali) et ses formes de contenu.
?Dans BEST, quelle lettre est le FOND et laquelle est la FORME ?
đ RĂ©ponds dans ta tĂȘte, puis clique pour vĂ©rifier
đ§ L'exemple qui verrouille : une mutuelle qui parle aux Ă©tudiants dit « Erasmus », pas « mobilitĂ© internationale ».
4 · DESIRABLE â « le design visuel du site doit donner envie (UI) »
Ses grandes tendances webdesign 2026 :
đ§ Les 5 tendances : plus gros, plus 3D, plus perso, plus IA, plus inclusif.
SchĂ©ma-souvenir S6 â CREDIBLE, « le site doit ĂȘtre crĂ©dible pour rassurer l'utilisateur ».
đ§ Le pied de page en 3 blocs : qui + contact · 3 pages lĂ©gales · FAQ + rĂ©seaux = 7.
?« CrĂ©dibilitĂ© », « tĂ©moignages », « mentions lĂ©gales », « HTTPS »⊠Tu as vu exactement cette liste ailleurs. OĂč ?
đ RĂ©ponds dans ta tĂȘte, puis clique pour vĂ©rifier
đ§° 4 Ă©lĂ©ments clĂ©s â le plus gros morceau
SchĂ©ma-souvenir S2 â la disposition de la prof : CatĂ©gories · Structure · CohĂ©rence · RapiditĂ©.
đ Clique un Ă©lĂ©ment â il s'allume dans le losange CLIQUE-LES TOUS
đïž CatĂ©gories6 façons â lesquelles ?
alphabétique · chronologique · géographique · thématique · par tùches utilisateur · par cible utilisateur
đ§± Structure5 repĂšres â lesquels ?
logo haut gauche · menu haut centre · icÎnes standardisées · légal en bas de page · CTA en boutons
𧩠Cohérenceque faut-il préserver ?
« Localisation et position des Ă©lĂ©ments prĂ©servĂ©es » · mĂȘmes appellations · mĂȘme charte graphique
⥠Rapiditéle chiffre à citer ?
2,5 secondes maximum · outils : pagespeed.web.dev · webpagetest.org
đ « Comment naviguer rapidement sur le site ? » â les 7 pratiques, dans son ordre
đ§ Le chatbot = « un outil puissant de la relation client » â la porte d'entrĂ©e de l'UX Ă l'Ăšre de l'IA.
?L'affordance â dĂ©finis-la et donne un exemple. (un mot rare = un candidat parfait pour la question 4)
đ RĂ©ponds dans ta tĂȘte, puis clique pour vĂ©rifier
đ§ Le test : s'il faut une notice, l'affordance a Ă©chouĂ©.
đź Devant un constat, ton rĂ©flexe : quel critĂšre de Morville ?
8 cas, deux par critĂšre. đ La voix commente â enchaĂźne.
đ§ Un constat touche parfois deux critĂšres â CTA = Behavioral et Structure. Ă l'oral, dis les deux.
đ THINK · DO · CARE â et pas SEE
?« Le site web permet de rĂ©aliser principalement 3 types d'objectifs » â lesquels ? Et lequel manque ?
đ RĂ©ponds dans ta tĂȘte, puis clique : le schĂ©ma S5 se construit juste aprĂšs
đ Clique un Ă©tage â il s'allume dans le funnel CLIQUE-LES TOUS
đ€ THINKest-ce qu'il s'intĂ©resse ?
Pages vues par visite : plus il en a vu, plus il était intéressé.
Temps par visite : â ïž Â« moins d'une minute » = « non intĂ©ressĂ© ».
đŻ DOest-ce qu'il agit ?
â Taux de conversion : « l'efficacitĂ© d'un site ». Panier moyen et Ă©volution.
Abandon de panier : friction ou manque de rassurance â retargeting.
đ CAREest-ce qu'il revient ?
% de visiteurs connus : déjà venus / premiÚre fois.
Taux de réachat : le pont avec l'emailing ciblé.
đ§ On ne choisit pas la version la plus jolie â on la choisit sur les chiffres. Comme Ă la question 2 de l'examen blanc.
đïž L'exercice : jugez l'expĂ©rience utilisateur
« Les exercices d'application sont Ă REFAIRE car l'examen est souvent semblable » â la prof. Ăcris d'abord, la correction est en dessous.
đ Le site de la Brasserie du Tilleul â clique les 7 Ă©pingles pour lire ce qu'on observe
đ Le cas
La Brasserie du Tilleul, brasserie artisanale à Namur, vient de lancer sa boutique en ligne. AprÚs trois mois, les ventes ne décollent pas. Voici ce qu'on observe :
- L'adresse du site est www.labrasserie-du-tilleul-namur-boutique.be. Au téléphone, les clients n'arrivent jamais à la noter correctement.
- Les 40 biÚres sont présentées dans une seule longue liste, sans aucun classement. Il faut 7 clics depuis l'accueil pour arriver à une fiche produit.
- La page d'accueil affiche 18 photos en pleine résolution et met 6 secondes à s'afficher.
- Le menu ne prĂ©sente pas les mĂȘmes entrĂ©es dans le mĂȘme ordre sur l'accueil et sur les pages produits. Le blog, lui, n'a ni le mĂȘme logo ni les mĂȘmes couleurs.
- Les descriptions des biÚres sont recopiées du catalogue papier. Aucun bouton « ajouter au panier » n'est visible sans faire défiler la page.
- Il n'y a ni mentions légales, ni page « qui sommes-nous », ni avis clients. Le navigateur affiche « site non sécurisé ».
- Sur téléphone, le menu déborde de l'écran et le bouton de paiement est coupé.
- Les publicités Google Ads de la brasserie renvoient toutes vers la page d'accueil.
- Dans Google Analytics : temps moyen par visite 42 secondes · taux d'abandon du panier 82 %.
đ Consigne : « En vous basant sur la grille d'analyse de P. Morville, jugez l'expĂ©rience utilisateur de ce site et proposez un plan d'action. »
1) STRUCTURE â la phrase d'ouverture : « J'analyse ce site avec la grille d'analyse de P. Morville, qui dĂ©finit 6 critĂšres clĂ©s pour Ă©valuer la qualitĂ© de l'UX : Findable, Accessible, Useful, Desirable, Credible, Usable. Je termine par les KPI, qui confirment le diagnostic. »
2) APPLICATION â la grille remplie, une ligne par critĂšre :
3) LE HORS-GRILLE QUI FAIT LA DIFFĂRENCE â les publicitĂ©s Google Ads renvoient toutes vers la page d'accueil. Faute contre la recommandation du cours : « choisir une page prĂ©cise liĂ©e Ă l'action de l'internaute plutĂŽt que la page d'accueil du site ». Action : une landing page par campagne. Ce point n'est dans aucun des 6 critĂšres â le citer prouve que tu maĂźtrises toute la section.
4) LES KPI CONFIRMENT LE DIAGNOSTIC â 42 secondes par visite : « dans le cas de visites de moins d'une minute, les visiteurs peuvent ĂȘtre considĂ©rĂ©s comme non intĂ©ressĂ©s » (KPI THINK). 82 % d'abandon de panier : le cours donne deux causes, et les deux sont lĂ â « ergonomie peu efficace (trop de points de friction) » ou « manque d'Ă©lĂ©ments rassurants » (KPI DO). Le retargeting est un pansement ; ensuite, A/B testing sur les fiches produits.
đĄ La phrase de conclusion : « Ce site n'a pas un problĂšme de design, il a un problĂšme d'expĂ©rience. Une bonne UX augmente le taux de conversion et amĂ©liore la fidĂ©lisation â ici, les deux sont au plus bas, et les KPI le prouvent. »
â 8 questions â les piĂšges de la section A
đ La voix te lit chaque question et donne la correction dĂšs que tu as rĂ©pondu. Une seule tentative.
Combien de critĂšres compte la grille d'analyse de P. Morville, et lesquels ?
Une campagne Google Ads promeut une offre précise. Vers quelle page faut-il envoyer les internautes ?
Dans le modĂšle BEST, quelle lettre correspond Ă la forme du message ?
Selon le cours, le temps de charge d'une page ne doit pas dépasser :
Quels types d'objectifs le site web permet-il principalement de réaliser ?
Un taux d'abandon du panier élevé révÚle, selon le cours :
Que signifie le critÚre « Cohérence » dans les 4 éléments clés de USABLE ?
Le cours dit que certains KPI se mesurent en dehors de Google Analytics. Lesquels ?
đșïž Les 7 schĂ©mas-souvenirs â ce que tu dois pouvoir redessiner de tĂȘte
S7Le site, un outil
outil · 1 page = 1 URL · homepage vs landing · 4 types · CMS
S1La grille de Morville
đ§ FAUDE-CU â 3 · 2 · 1, dans cet ordre
S3Le nom de domaine
đ§ C-M-P-U â court, mĂ©morisable, pertinent, unique
S4Accessible
đ§ 5 verbes + 6 pratiques + responsive
S6Credible
đ§ 7 entrĂ©es de pied de page en 3 blocs
S2Usable
đ§ 2,5 s et 3 clics Ă nuancer
S5Les 3 objectifs
đ§ THINK-DO-CARE, pas de SEE
đLes 7 d'un coup
â Leçon bouclĂ©e â et 2 points de la question 4 sont dĂ©sormais des rĂ©citations.
Refais la Brasserie du Tilleul à voix haute, sans la correction, 15 minutes chrono. Puis récite les 6 critÚres et BEST.