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.

S7 · LE SITE WEB, AVANT TOUT UN OUTIL brasserie-du-tilleul.be/nos-bieres Chrome · Firefox Edge · Safari Ce que c'est un ensemble de pages Web accessibles depuis un navigateur 🔧 avant tout un OUTIL de communication · de prospection de vente, etc. texte + images multimĂ©dias liens hypertextes widgets : chatbox, carte Google Maps 1 page = 1 URL unique 🏠 La page d'accueil (homepage) « souvent la porte d'entrĂ©e sur votre site lorsque l'internaute cherche prĂ©cisĂ©ment votre entreprise » 🎯 Les landing pages sont primordiales ! = la page oĂč l'on arrive aprĂšs avoir cliquĂ© rĂ©sultat SEO · lien SEA · lien email · lien display ➔ une page prĂ©cise liĂ©e Ă  l'action, pas l'accueil Les types de site web — retiens l'OBJECTIF de chacun 🏬 Vitrine discours maĂźtrisĂ© + visibilitĂ© SEO 🏩 Institutionnel image de l'entreprise + e-rĂ©putation 🛒 E-commerce canal de VENTE, au-delĂ  de la com' 📝 Blog du plus rĂ©cent au plus ancien · catĂ©gories 
 la prof laisse ouvert đŸ§© CMS = systĂšme de gestion de contenu WordPress · PrestaShop des modĂšles prĂ©-Ă©tablis faits par des programmeurs ➔ simplifie la programmation et l'architecture du site

📖 Les mots exacts du cours

🌐Un site web = des pages lues dans un navigateur« un ensemble de pages Web accessibles Ă  partir d'un navigateur Internet »
🔧Ce qu'on en fait : avant tout un outil« de communication, de prospection, de vente, etc. »
🔗La page est l'Ă©lĂ©ment de base — 1 page = 1 URL« chaque page dispose d'une adresse unique (URL) »
đŸ§©On le fabrique avec un CMS : modĂšles prĂ©-Ă©tablis
đŸ–„ Chrome · Firefox · Edge · Safari 💬 widgets : chatbox, carte Google Maps đŸ§© WordPress · PrestaShop

🧠 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) ».

🎉 Les objectifs sont la vraie rĂ©ponse : discours + visibilitĂ© · image + e-rĂ©putation · vente · contenu datĂ©.

?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

🎯Vers une landing page, surtout pas l'accueil« choisir une page prĂ©cise liĂ©e Ă  l'action de l'internaute plutĂŽt que la page d'accueil du site »
🏠L'accueil, c'est quand on cherche prĂ©cisĂ©ment l'entreprise
🔀Elle est le point d'arrivĂ©e de tous les canaux du chapitre 2

?Dans le modĂšle POEM, oĂč se range le site web ?

👆 RĂ©ponds dans ta tĂȘte, puis clique pour vĂ©rifier

🏠Dans l'OWNED — « les outils contrĂŽlĂ©s et gĂ©rĂ©s par la marque »
📕Ta synthĂšse Ă©crit « Site web : E » — c'est une note de classe
đŸ—ŁïžĂ€ l'oral : dis Owned — on le possĂšde et on le contrĂŽle
Emailing P/OMédias sociaux O SEO OSEA PBlogs O / E

🎯 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

DÉFINIS

« 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

DÉFINIS

« 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Ă .

S1 · LA GRILLE DE P. MORVILLE TON PLAN DE RÉPONSE « 6 Ă©tapes pour l'utilisateur » : les critĂšres clĂ©s de l'UX 🔍 Findable je te trouve F · FINDABLE rĂ©fĂ©rencement + nom de domaine ♿ Accessible j'entre A · ACCESSIBLE handicap + responsive design 🔧 Useful ça me sert U · USEFUL le contenu ➔ modĂšle BEST 💎 Desirable ça me plaĂźt D · DESIRABLE le design visuel = l'UI 🔒 Credible je te crois C · CREDIBLE rassurer ➔ le pied de page 👆 Usable je m'en sers U · USABLE ergonomique ➔ 4 Ă©lĂ©ments clĂ©s 🧠 FAUDE-CU — le sigle de la prof pour les 6, dans cet ordre je te trouve · j'entre · ça me sert · ça me plaĂźt · je te crois · je m'en sers

👆 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

🎉 Ces 6 lignes sont ton plan de rĂ©ponse. Tu ouvres par « la grille d'analyse de P. Morville », puis tu dĂ©roules.

🧠 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

🔍Le travail de rĂ©fĂ©rencement — naturel, non payant« trouver ou retrouver le site facilement » ➔ cf. SEO
🌐Le choix du nom de domaine — schĂ©ma S3
S3 · LE NOM DE DOMAINE FINDABLE · 2ᔉ ÉLÉMENT CLÉ « l'adresse d'une entreprise sur le Web » = l'URL de sa page d'accueil 🌐 ephec . be un nom une extension deux parties, sĂ©parĂ©es par un point 🔑 impossible d'en avoir 2 identiques 🚹 difficile de faire marche arriĂšre Les 4 caractĂ©ristiques d'un bon nom de domaine Court simplifier le travail des visiteurs MĂ©morisable on peut l'Ă©crire « comme il s'entend » Pertinent met en valeur l'activitĂ© ➔ utile au SEO Unique pas trop proche des concurrents >< Gougle Les 2 exemples notĂ©s par la prof — aucun des deux n'a les 4 RĂ©publique dominicaine www.godominicanrepublic.com/fr Court MĂ©morisable Pertinent Unique Location voiture et utilitaire : ADA www.ada.fr Court MĂ©morisable Pertinent Unique extension .com .be .brussels disponibilitĂ© — dns.belgium.be enregistrement

🧠 Les 4 caractĂ©ristiques : C · M · P · U — Court, MĂ©morisable, Pertinent, Unique.

🚹 irrĂ©versible : « difficile de faire marche arriĂšre » 🔎 disponibilitĂ© : dns.belgium.be ❌ Gougle = le contre-exemple d'« 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.

S4 · ACCESSIBLE — LES 2 FACTEURS TOMBÉ EN Q4 1 · le site est Ă  destination de TOUS = les personnes handicapĂ©es peuvent l'utiliser ♿ 🧠 đŸ€Ÿ 🩼 percevoir comprendre naviguer interagir et y contribuer Quelques bonnes pratiques : 🔡 pas de texte en italiques ou en majuscules 💬 des mots simples et courts ⭐ des accents sur les lettres capitales 🌗 des contrastes suffisants 🔗 des liens diffĂ©renciĂ©s visuellement 🎬 une transcription et sous-titres pour les vidĂ©os 2 · le site est accessible sur TOUS LES DEVICES = le responsive design đŸ’» ordinateur : 3 colonnes đŸ“± empilĂ© le contenu s'agence diffĂ©remment ce n'est pas « rĂ©duire », c'est rĂ©organiser 🔎 l'outil du cours : wave.webaim.org

🧠 Les 5 verbes d'un souffle : percevoir · comprendre · naviguer · interagir · contribuer. Le dernier est celui qu'on oublie.

đŸ“± responsive : « le contenu s'agence diffĂ©remment » 🔎 tester : wave.webaim.org

?« 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

đŸ“±Â« Un site accessible sur tous les devices »« un site internet qui s'adapte Ă  tous les Ă©crans — tĂ©lĂ©phone, tablette, ordinateur, etc. »
🔀Le mot qui fait la diffĂ©rence : « le contenu s'agence diffĂ©remment »
🍔Ton illustration : le menu devient un menu burger sur tĂ©lĂ©phone

✍ Le contenu qui sert, le design qui plaĂźt, le site qui rassure

3 · USEFUL — LE MODÈLE BEST LE PONT AVEC LE CH.1 « les principes de la rĂ©daction du contenu web » B Behavioral comportemental quel comportement est attendu ? ➔ le call to action E Essential essentiel quelles informations sont utiles Ă  la cible ? ➔ LE FOND du message S Strategic stratĂ©gique cohĂ©rence avec le key message ➔ identitĂ© + crĂ©ativitĂ© T Targeted ciblĂ© le vocabulaire de la cible, ses formats ➔ LA FORME 🧠 E = le FOND · T = la FORME c'est la seule paire que la prof Ă©crit noir sur blanc Targeted = « le vocabulaire (cf. verbatims quali) et les formes de contenu utilisĂ©s par la cible »

👆 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

📩E · Essential = LE FOND — quelles infos je donne
đŸ—ŁïžT · Targeted = LA FORME — avec quels mots, quels formats

🧠 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) »

💎Le seul critĂšre oĂč le cours Ă©crit UI et pas UX
đŸŒ±Suivre les tendances, dont les initiatives durablescommtozero.be, une initiative de l'ACC
👀 surveiller les grands du web : GAFAM · NATU

Ses grandes tendances webdesign 2026 :

🔠 Oversize 🧊 ÉlĂ©ments 3D immersifs et interactifs 🙋 PersonnalisĂ© pour chaque utilisateur đŸ€– IA au service du webdesign ♿ Inclusif et accessible

🧠 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 ».

S6 · CREDIBLE — RASSURER LE CRITÈRE QU'ON SAUTE 🔒 CREDIBLE « crĂ©dible pour rassurer l'utilisateur » 5 bonnes pratiques 🏱 Montrez qu'il existe une organisation rĂ©elle derriĂšre votre site 🔄 Mettez rĂ©guliĂšrement votre site Ă  jour ou montrez au moins qu'il a Ă©tĂ© rĂ©visĂ© rĂ©cemment đŸš« Évitez les erreurs en tout genre, si petites soient-elles fautes d'orthographe, erreurs typographiques et liens brisĂ©s 💬 InsĂ©rez des tĂ©moignages de clients pour rassurer l'internaute 🔐 Mettez en avant les certificats de sĂ©curitĂ© https, cadenas, sceaux de confiance, normes de sĂ©curité  PIED DE PAGE (FOOTER) — 7 ENTRÉES Qui sommes-nous ? · Nous contacter · Mentions lĂ©gales · Politique de confidentialitĂ© Conditions gĂ©nĂ©rales · FAQ · RĂ©seaux sociaux souvent commun Ă  toutes les pages

🧠 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

🔐Dans la section B, sous le nom d'E-E-A-T
đŸ€Le T (Trust) = mot pour mot le critĂšre CREDIBLE de Morville
đŸŽ€La phrase : Google en fait un critĂšre de classement

→ Revoir le E-E-A-T dans la leçon B

🧰 4 Ă©lĂ©ments clĂ©s — le plus gros morceau

SchĂ©ma-souvenir S2 — la disposition de la prof : CatĂ©gories · Structure · CohĂ©rence · RapiditĂ©.

S2 · USABLE — LES 4 ÉLÉMENTS CLÉS LE PLUS GROS MORCEAU « un site oĂč l'internaute trouve ce qu'il recherche rapidement et simplement » ➔ ergonomique CatĂ©gories rassembler ce qui se ressemble, sĂ©parer ce qui est diffĂ©rent 6 façons de catĂ©goriser Structure hiĂ©rarchiser pour mettre en avant les contenus clĂ©s dans le menu · dans les pages 5 repĂšres Ă  respecter CohĂ©rence localisation et position des Ă©lĂ©ments prĂ©servĂ©es mĂȘmes appellations mĂȘme charte graphique RapiditĂ© il veut accomplir sa tĂąche
 et le faire rapidement temps de charge · navigation 7 pratiques du cours ⏳ 2,5 secondes !!! le temps de charge maximum 👆 3 clics — RĂšgle Ă  nuancer !!!

👆 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

🎉 C'est le seul critùre qui contient des chiffres — et ils tombent : 2,5 s et 3 clics.

🏃 « Comment naviguer rapidement sur le site ? » — les 7 pratiques, dans son ordre

1 · diminuer le temps de charge ⏳ 2,5 s 2 · un plan du site 3 · des liens internes 4 · un moteur de recherche interne 5 · 3 clics — RĂšgle Ă  nuancer !!! 6 · l'affordance 7 · un chatbot
📉Charger vite : pages courtes, images allĂ©gĂ©es, pop-ups limitĂ©es
đŸššÂ« Le mythe de la rĂšgle des 3 clics »« concrĂštement, Ă©viter la surmultiplication des clics, afin de ne pas crĂ©er de frustration »
👋Affordance = « suggĂ©rer des actions intuitives »

🧠 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

👋Mot pour mot : « utiliser l'affordance = suggĂ©rer des actions intuitives »
🔘Un bouton en relief appelle le clic ; une poignĂ©e dit « tire »
📞Son exemple : un seul champ libre pour le numĂ©ro de tĂ©lĂ©phone

🧠 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.

Le nom de domaine est court et se retient sans le noter. Le logo est en haut à gauche sur toutes les pages. Trois témoignages clients s'affichent sur la page d'accueil. Les textes emploient le vocabulaire exact de la cible (les verbatims). On atteint n'importe quel produit en 3 clics depuis l'accueil. Les mentions légales et la politique de confidentialité sont en pied de page. Les balises title et H1 ont été optimisées pour remonter dans Google. Un call to action « Prenez rendez-vous » est présent sur chaque page.

🧠 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

đŸŽŻÂ« 3 types d'objectifs : THINK – DO – CARE »
📡Le SEE n'est pas là — on n'arrive pas sur un site par hasard
🔀Ce sont le display, les mĂ©dias sociaux et le SEA qui font le SEE
S5 · LES 3 OBJECTIFS DU SITE ET LEURS INDICATEURS 📡 SEE đŸ’» THINK 🛒 DO 🏠 CARE « le site web permet de rĂ©aliser principalement 3 types d'objectifs » hors du cercle on n'y arrive pas par hasard II. THINK ‱ Nb de pages vues par visite ‱ Temps passĂ© par visite III. DO ‱ Taux de conversion ‱ Panier moyen et Ă©volution ‱ Taux d'abandon du panier IV. CARE ‱ Pourcentage de visiteurs connus ‱ Taux de rĂ©achat 📋 et 3 indicateurs se mesurent EN DEHORS de Google Analytics ‱ le nombre de comptes clients et son Ă©volution ‱ le nombre d'avis laissĂ©s sur le site aprĂšs achat ‱ la performance au niveau des avis clients positifs VS nĂ©gatifs, note moyenne


👆 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é.

🎉 Le dĂ©tail qui rapporte : « comment mesurez-vous la fidĂ©lisation ? » — rĂ©pondre « dans GA4 » seul, c'est perdre la moitiĂ©. Les avis et les comptes créés se comptent ailleurs.
đŸ§ȘTrancher entre 2 versions : l'A/B testing« le choix de la version dĂ©finitive du site sera basĂ© sur une analyse des KPI's »
đŸŒ±Mesurer son impact environnemental : l'Eco-indexecoindex.fr · ecograder.com

🧠 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

👆 Clique une Ă©pingle rouge : ce qu'on observe s'Ă©crit ici. Aucun critĂšre n'est donnĂ© — c'est Ă  toi de les nommer.
đŸ–Šïž Tu as vu les 7 problĂšmes. Maintenant, Ă©cris — sans regarder la correction. 15 minutes chrono, comme Ă  l'examen : d'abord la structure (quels critĂšres du cours ?), ensuite l'application (quel constat, quelle action ?).

📋 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 :

CritĂšreConstatAction
FINDABLE2 / 6 Le nom de domaine Ă©choue sur 2 des 4 caractĂ©ristiques : ni court, ni mĂ©morisable — les clients n'y arrivent pas au tĂ©lĂ©phone. Rien n'indique un travail de rĂ©fĂ©rencement. RĂ©server brasserieduTilleul.be et rediriger l'ancien — « difficile de faire marche arriĂšre », donc maintenant. Traiter le ON PAGE (title, H1, alt des 18 photos) et l'OFF PAGE (fiche Google Business Profile, avis).
ACCESSIBLE1 / 6 Le menu dĂ©borde et le bouton de paiement est coupĂ© sur tĂ©lĂ©phone : le site n'est pas « accessible sur tous les devices ». Le volet handicap n'est pas Ă©voquĂ©. PrioritĂ© absolue — un bouton de paiement coupĂ©, c'est une vente impossible. Passer en responsive design : « le contenu doit s'agencer diffĂ©remment ». Puis auditer l'accessibilitĂ©.
USEFUL2 / 6 Les textes sont « recopiés du catalogue papier » : ni Targeted (pas le vocabulaire de la cible web), ni Behavioral (aucun CTA visible = aucune macro-conversion). Réécrire les fiches selon BEST : un CTA visible sans défiler, des descriptions utiles à la décision d'achat (goût, degré, accord mets-biÚre).
DESIRABLE3 / 6 Rien d'accablant sur l'UI elle-mĂȘme, mais le blog n'a « ni le mĂȘme logo ni les mĂȘmes couleurs » : l'identitĂ© visuelle se dĂ©lite. Une charte graphique unique, et s'aligner sur les tendances durables — un site allĂ©gĂ© est aussi un site plus dĂ©sirable.
CREDIBLE1 / 6 Le plus grave. Pas de mentions lĂ©gales, pas de « qui sommes-nous », pas d'avis clients, et le navigateur affiche « non sĂ©curisĂ© » sur un site oĂč l'on paie par carte. Jour 1 : certificat HTTPS, pied de page avec les 7 entrĂ©es, tĂ©moignages clients activĂ©s. CoĂ»t quasi nul, effet immĂ©diat.
USABLE1 / 6 Les 4 Ă©lĂ©ments sont touchĂ©s : 40 biĂšres non catĂ©gorisĂ©es, repĂšres absents, ordre du menu qui change, et deux rĂšgles chiffrĂ©es violĂ©es — 6 s contre 2,5 s, 7 clics contre 3 clics. CatĂ©goriser (thĂ©matique ou par tĂąches utilisateur), un menu identique partout, compresser les images, ajouter plan du site, liens internes et moteur de recherche interne.

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.

TON TABLEAU DE BORD 1 2 3 4 5 6 7 8

Combien de critĂšres compte la grille d'analyse de P. Morville, et lesquels ?

« L'expĂ©rience utilisateur se rĂ©sume en 6 Ă©tapes pour l'utilisateur (critĂšres clĂ©s pour Ă©valuer la qualitĂ© de l'UX pour les sites web) » — et le cours conclut : « C'est la grille d'analyse de P. MORVILLE ». La liste qui s'arrĂȘte Ă  cinq oublie DESIRABLE : c'est le piĂšge classique, parce que c'est le seul critĂšre qui parle du design visuel (l'UI). Les listes qui remplacent USEFUL par Valuable viennent du lexique : « apporte de la valeur » est la 7ᔉ qualitĂ© du FAUDE-CU (le User Experience Honeycomb), pas un des 6 critĂšres du support — ton lexique dit 7, ton syllabus dit 6 : dis 6. Et Strategic n'est pas un critĂšre de la grille : c'est le S du modĂšle BEST (la rĂ©daction du contenu web), qui vit Ă  l'intĂ©rieur du critĂšre USEFUL. L'ordre Ă  rĂ©citer : Findable · Accessible · Useful · Desirable · Credible · Usable.

Une campagne Google Ads promeut une offre précise. Vers quelle page faut-il envoyer les internautes ?

La recommandation du cours est explicite : « choisir une page prĂ©cise liĂ©e Ă  l'action de l'internaute PLUTÔT QUE la page d'accueil du site ». La rĂ©ponse qui envoie vers la page d'accueil cite un vrai extrait du cours, mais elle dĂ©crit un autre cas : l'accueil est « la porte d'entrĂ©e sur votre site » lorsque l'internaute cherche prĂ©cisĂ©ment votre entreprise — pas quand il clique sur une pub pour une offre. Le blog et le plan du site sont eux aussi de vraies notions du cours (le blog est un type de site, le plan du site une bonne pratique de RapiditĂ©), mais aucun des deux n'est « liĂ© Ă  l'action de l'internaute ». Landing page = « page sur laquelle arrive un internaute aprĂšs avoir cliquĂ© sur un lien (rĂ©sultat SEO, lien SEA, lien email, lien display) ».

Dans le modĂšle BEST, quelle lettre correspond Ă  la forme du message ?

Le cours l'Ă©crit noir sur blanc : E · Essential ➔ « le FOND du message » · T · Targeted ➔ « la FORME du message ». Targeted, c'est utiliser « le vocabulaire (cf. verbatims quali) et les formes de contenu utilisĂ©s par la cible ». B = le comportement attendu (call to action, micro/macro-conversion) et S = la cohĂ©rence avec le key message et l'identitĂ© de marque.

Selon le cours, le temps de charge d'une page ne doit pas dépasser :

« Le temps de charge ne doit pas dĂ©passer 2,5 secondes !!! » — avec trois points d'exclamation dans le syllabus, ce qui trahit un chiffre que la prof veut voir tomber. Aucun autre seuil en secondes n'existe dans la section A : c'est un des deux seuls chiffres de toute la section, avec la rĂšgle des 3 CLICS. Les 2 outils gratuits pour le vĂ©rifier : pagespeed.web.dev et webpagetest.org. Et les trois leviers, dans l'ordre du cours : diminuer la longueur des pages, diminuer la taille des images et vidĂ©os, limiter les pop-ups.

Quels types d'objectifs le site web permet-il principalement de réaliser ?

« Le site web permet de rĂ©aliser principalement 3 types d'objectifs : THINK – DO – CARE. » Pas de SEE — et c'est logique : on n'arrive pas sur un site par hasard, il faut dĂ©jĂ  avoir cliquĂ© quelque part. Ce sont le display, les mĂ©dias sociaux et le SEA qui font le SEE et qui alimentent le site. Les listes qui commencent par SEE sont le modĂšle See-Think-Do-Care du chapitre 1 : il couvre toute la stratĂ©gie de communication, pas le seul site web. Et TOFU – MOFU – BOFU est un vrai modĂšle du cours (« TOFU ➔ See · MOFU ➔ Think · BOFU ➔ Do »), mais c'est l'entonnoir de conversion, pas les objectifs du site web.

Un taux d'abandon du panier élevé révÚle, selon le cours :

Mot pour mot : « Un taux d'abandon Ă©levĂ© peut ĂȘtre rĂ©vĂ©lateur d'une ergonomie peu efficace du site web (trop de points de « friction ») ou d'un manque d'Ă©lĂ©ments rassurants pour le client. » Retiens les deux causes et le mot friction — elles renvoient Ă  deux critĂšres de Morville diffĂ©rents : USABLE pour l'ergonomie, CREDIBLE pour les Ă©lĂ©ments rassurants. Les trois autres rĂ©ponses sont de vrais indicateurs du cours, mais d'un autre objectif : les pages vues par visite et le temps passĂ© par visite (« moins d'une minute » = visiteur « non intĂ©ressĂ© ») sont des KPI THINK, le pourcentage de visiteurs connus et le taux de rĂ©achat sont des KPI CARE. L'abandon de panier, lui, est un KPI DO — et le remĂšde immĂ©diat proposĂ© par le cours : « crĂ©er des campagnes de retargeting ciblĂ©es pour les clients n'ayant pas finalisĂ© leur commande ».

Que signifie le critÚre « Cohérence » dans les 4 éléments clés de USABLE ?

DĂ©finition exacte du cours : « La localisation et la position des Ă©lĂ©ments doivent ĂȘtre prĂ©servĂ©es pour ne pas perturber l'utilisateur. Le site doit conserver la mĂȘme charte graphique sur toutes les pages. » — illustrĂ©e par « le mĂȘme ordre des Ă©lĂ©ments dans le menu ». Les trois autres rĂ©ponses sont de vraies notions du cours placĂ©es au mauvais endroit : la cohĂ©rence avec le key message et l'identitĂ© de marque, c'est le S · Strategic du modĂšle BEST · les mises Ă  jour et la chasse aux fautes et liens brisĂ©s sont deux bonnes pratiques de CREDIBLE · « rassembler ce qui se ressemble et sĂ©parer ce qui est diffĂ©rent » est la dĂ©finition de CatĂ©gories, le premier des 4 Ă©lĂ©ments clĂ©s de USABLE. Distinguer 4 notions voisines, c'est exactement ce que teste une question d'application.

Le cours dit que certains KPI se mesurent en dehors de Google Analytics. Lesquels ?

« On peut également mesurer certains KPI en dehors de Google Analytics : le nombre de comptes clients et l'évolution de ce nombre · le nombre d'avis laissés sur le site aprÚs achat · la performance au niveau des avis clients (nombre d'avis positifs VS négatifs, note moyenne, etc.). » Les trois autres listes sont de vrais KPI du cours, mais qui se lisent dans Analytics : conversion, panier moyen et abandon de panier sont les KPI DO · pages vues et temps par visite les KPI THINK · visiteurs connus et taux de réachat les KPI CARE. La nuance vaut des points : si on te demande « comment mesurez-vous la fidélisation ? », répondre uniquement « dans GA4 » te fait perdre la moitié de la réponse.

đŸ—ș 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

→ ouvrir la fiche du chapitre

✓ 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.