CHAPITRE 2 › FICHE › A) LE SITE WEB — ORIENTÉ UX
🌐 A) Le site web — orienté UX
Juger un site avec une grille (celle de P. Morville), dire ce qui cloche critère par critère, et prouver le diagnostic avec les KPI du site.
Les concepts — l'essentiel d'abord
👆 Chaque puce se déplie pour le détail.
🌐Site web= avant tout un OUTIL
« Un ensemble de pages Web accessibles à partir d'un navigateur Internet comme Chrome, Firefox, Edge ou Safari. » Et la phrase d'ouverture à placer sur n'importe quelle question : « Ce que l'on en fait : un site web, c'est avant tout un OUTIL (de communication, de prospection, de vente, etc.) »
Elles contiennent du texte et des images, mais aussi des éléments multimédias (vidéos), des liens hypertextes ou des widgets (ex : chatbox, carte Google Maps). « Chaque page dispose d'une adresse unique (URL). »
Vitrine : « présente l'entreprise ou la marque ainsi que son activité » ➔ délivrer un discours maîtrisé + visibilité sur les moteurs de recherche · Institutionnel : « informe le grand public, les employés ou les actionnaires » ➔ « objectif : vente mais construction de l'image de l'entreprise et de son e-réputation » · E-commerce : « le marchand expose ses produits afin de les vendre » ⇒ canal de VENTE, au-delà du canal de communication (paiement via plateforme bancaire) · Blog : « constitué d'articles qui se suivent du plus récent au plus ancien », « structuré par thèmes (les catégories) ».
En interne, avec un CMS = « système de gestion de contenu », qui fabrique le site « en utilisant des modèles pré-établis faits par des programmeurs » ➔ « simplification de certaines étapes comme la programmation informatique ou l'architecture du site ». Ses 2 exemples : WordPress et PrestaShop (celui-ci orienté e-commerce).
🎯Page d'accueil vs landing page= homepage vs page d'atterrissage
« La page d'accueil (homepage) est souvent la porte d'entrée sur votre site lorsque l'internaute cherche précisément votre entreprise. » « Mais… les landing pages (= pages d'atterrissage) sont primordiales ! »
« Page sur laquelle arrive un internaute après avoir cliqué sur un lien (résultat SEO, lien SEA, lien email, lien display, etc.) »
« Choisir une page précise liée à l'action de l'internaute plutôt que la page d'accueil du site. »
La landing page est le point d'arrivée de tous les canaux du chapitre 2 — SEO, SEA, emailing, display. Dans un cas, « ils renvoient toutes leurs publicités sur la page d'accueil » est une faute qui se repère en une seconde et se corrige en une phrase.
🧭Expérience utilisateur (UX) & responsive design= les 2 termes de la question 4 de l'examen blanc
Sa correction, à réciter : « 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. »
« Un site accessible sur tous les devices (un site internet qui s'adapte à tous les écrans — téléphone, tablette, ordinateur, etc.). » Le mot du syllabus qui fait la différence : « le contenu s'agence différemment » — on réorganise, on ne « réduit » pas.
3 verbes (percevoir · interagir · créer une expérience positive) → 3 promesses (navigation fluide · compréhension facile · interaction agréable) → 2 bénéfices business (conversion + fidélisation).
UX : un site de commande de pizza où l'on choisit, paie et suit la livraison sans jamais se demander où cliquer. Responsive : sur ephec.be, le menu horizontal de l'ordinateur devient un menu burger sur téléphone — même site, agencé autrement.
« Prolongez l'expérience utilisateur et réduisez les taux de rebond, en utilisant aussi le responsive design pour vos landing pages. » Consigne : « Définissez et illustrez les 2 termes soulignés. » — 2 points qui ne demandent aucune réflexion.
🕸️La grille d'analyse de P. MORVILLE= 6 critères clés pour évaluer la qualité de l'UX
« 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). » Findable · Accessible · Useful · Desirable · Credible · Usable — « C'est la grille d'analyse de P. MORVILLE ».
« Le site doit être facile à trouver » — 2 éléments clés : le travail de référencement (« ➔ cf. SEO ») et le choix du nom de domaine.
« Le site doit être accessible à tous, quel que soit le device utilisé » — 2 facteurs : « les personnes handicapées peuvent l'utiliser. Ils peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer » · le responsive design.
« Le contenu du site doit être utile pour l'internaute » — « c'est le principe de la rédaction du contenu web ➔ modèle BEST ».
« Le design visuel du site doit donner envie (UI) » — 2 conseils : s'intéresser aux tendances (« notamment les nouvelles tendances comme les nouvelles initiatives durables ») et surveiller ce que font les grands du web : GAFAM (Google, Apple, Facebook, Amazon, Microsoft) et NATU (Netflix, Airbnb, Tesla, Uber).
« Le site doit être crédible pour rassurer l'utilisateur » — tout se joue dans le pied de page.
« Le site doit être facile à prendre en main (usable), ergonomique » = « l'internaute trouve ce qu'il recherche rapidement et simplement » — 4 éléments clés, le plus détaillé des six.
Devant n'importe quel cas « jugez ce site », ouvre par : « Je vais l'analyser avec la grille de P. Morville, qui compte 6 critères », puis prends-les dans l'ordre. Le fil pour les réciter sans en perdre : « je te trouve, j'entre, ça me sert, ça me plaît, je te crois, je m'en sers ».
🏷️Le nom de domaine2e élément clé de FINDABLE
« Un nom de domaine est l'adresse d'une entreprise sur le Web (= l'URL de sa page d'accueil). Il se compose de deux parties, séparées par un point : un nom et une extension. » Ex : coca-cola.com, ephec.be.
Court : « pour simplifier le travail des visiteurs du site » · Mémorisable : « on peut le prononcer facilement, s'en souvenir et l'écrire facilement (« comme il s'entend ») » · Pertinent : « mise en valeur de l'activité de l'entreprise », « sera aussi utile pour le référencement naturel (SEO) » — ex : croisieres.com · Unique : « pas trop proche de concurrents ou de noms de marques célèbres » — le contre-exemple du cours : >< Gougle.
« Il ne peut pas y avoir 2 noms de domaines identiques ⇒ il est unique » et « une fois choisi, difficile de faire marche arrière » — donc si un nom est à changer, on le change tout de suite.
Sélection de la bonne extension (.com, .be, .brussels…) « en fonction de la zone géographique de l'activité » → vérification de la disponibilité (ex : dns.belgium.be) → enregistrement du nom de domaine.
« Le référencement naturel ou organique (c'est-à-dire non-payant) doit permettre aux utilisateurs de trouver ou retrouver le site facilement depuis les moteurs de recherche (ex : Google) » ➔ le cours écrit lui-même « cf. SEO », donc enchaîne sur la section B.
✍️Le modèle BEST= USEFUL, la rédaction du contenu web
Behavioral · Essential · Strategic · Targeted. Et la clé donnée par le cours lui-même : E = le FOND du message, T = la FORME du message.
« En fonction de l'objectif de communication à atteindre, quel comportement est attendu de la part des prospects ? » ➔ call to action pour favoriser la micro ou macro-conversion (ex : rendez-vous, partagez, likez, achetez, commentez).
« Quelles informations sont pertinentes et/ou utiles pour la cible dans le contexte dans lequel elle se trouve ? » (cf. persona(s))
« Le contenu du message doit être en cohérence avec le key message, renforcer l'identité de la marque et se démarquer de la concurrence (créativité !) » — la seule lettre qui remonte au chapitre 1.
« Les contenus doivent faire l'objet d'un ciblage précis en utilisant le vocabulaire (cf. verbatims quali) et les formes de contenu utilisés par la cible. »
🛡️CREDIBLE — le pied de page
« Le site doit être crédible pour rassurer l'utilisateur. » La première bonne pratique : « Montrez qu'il existe une organisation réelle derrière votre site — et c'est à placer dans un pied de page souvent commun à toutes les pages. » C'est le critère le moins cher à corriger : ce sont les victoires rapides d'un plan d'action.
1. Montrer qu'il existe une organisation réelle derrière le site · 2. « Mettez régulièrement votre site à jour ou montrez au moins qu'il a été révisé récemment » · 3. « Évitez les erreurs en tout genre, si petites soient-elles : fautes d'orthographe, erreurs typographiques et liens brisés » · 4. « Insérez des témoignages de clients pour rassurer l'internaute » · 5. « Mettez en avant les certificats de sécurité : https, cadenas, sceaux de confiance, normes de sécurité. »
Qui sommes-nous ? · Nous contacter · Mentions légales · Politique de confidentialité · Conditions générales · FAQ · Réseaux sociaux.
Ce que Morville appelle CREDIBLE, le SEO l'appelle Trust dans l'E-E-A-T (Expertise · Experience · Authority · Trust) — HTTPS, mentions légales — et les témoignages clients nourrissent l'Authority. Améliorer la crédibilité rassure l'internaute et fait remonter le site.
🧰USABLE — les 4 éléments clésCatégories · Structure · Cohérence · Rapidité
« Le site doit être facile à prendre en main, ergonomique. Cela signifie que l'internaute trouve ce qu'il recherche rapidement et simplement. » C'est le critère le plus détaillé du cours, et le seul qui contient des chiffres.
« Il s'agit de catégoriser le contenu pour rassembler ce qui se ressemble et séparer ce qui est différent. » Les 6 façons avec ses exemples : alphabétique (artistes, sites de musique) · chronologique (saison sportive, club de rugby) · géographique (destination, sites de voyages) · thématique (pièces ou billets, site de collectionneurs) · par tâches utilisateur (acheter, vendre — immobilier) · par cible utilisateur (étudiants, chercheurs, entreprises — une université).
« Structurer le contenu, c'est hiérarchiser le contenu pour mettre en avant les contenus clés » : du général au particulier, avec des titres, des sous-titres, une présentation aérée et une « mise en page agréable alternant textes et photos ». Et la phrase la plus utile : « Les internautes possèdent déjà des repères qu'il faudra respecter » — logo en haut à gauche, menu général en haut au centre, icônes standardisées (l'enveloppe pour le contact), contact et éléments légaux en bas de page, et les CTA sous forme de boutons.
« 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. » Son exemple : « le même ordre des éléments dans le menu ».
« Le temps de charge ne doit pas dépasser 2,5 secondes !!! » et « permettre à l'internaute d'accéder au contenu en 3 CLICS ». Pour diminuer le temps de charge, ses 3 leviers : diminuer la longueur des pages · diminuer la taille des images et vidéos · limiter les pop-ups. Les 2 outils gratuits : pagespeed.web.dev et webpagetest.org.
Proposer un plan du site · faciliter la navigation via des liens internes · proposer un moteur de recherche interne · accéder au contenu en 3 CLICS · utiliser l'affordance = « suggérer des actions intuitives » · intégrer un chatbox, « outil puissant de la relation client » avec « des progrès importants grâce à l'intelligence artificielle ».
📊Les KPI du site webTHINK · DO · CARE
« Le site web permet de réaliser principalement 3 types d'objectifs : THINK – DO – CARE. » Et « afin de mesurer les objectifs et de prendre les mesures nécessaires pour en améliorer l'efficience, l'entreprise utilise des KPI ».
Nombre de pages vues par visite = pages « ouvertes et chargées » — « plus le visiteur aura vu de pages, plus celui-ci aura été intéressé ; si ce n'est pas le cas, il conviendra d'en comprendre la raison » · temps passé par visite — « dans le cas de visites de moins d'une minute, les visiteurs peuvent être considérés comme non intéressés ».
Taux de conversion = « rapport entre les individus ayant effectué une action recherchée (achat) et le nombre total de sessions » — « il traduit donc l'efficacité d'un site » · panier moyen et son évolution (e-commerce) = « le montant moyen des commandes » · taux d'abandon du panier (e-commerce) = « paniers abandonnés / nombre total de commandes ».
Pourcentage de visiteurs connus = rapport entre ceux « déjà venus au moins une fois » et ceux qui viennent « pour la première fois » · taux de réachat (e-commerce) = « la part de clients qui achète une nouvelle fois un produit de votre marque sur une période donnée » — « indicateur intéressant pour vérifier la performance d'une campagne d'emailing ciblée ».
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 (avis positifs VS négatifs, note moyenne, etc.).
« Possibilité de tester différentes versions du site : A/B testing » — et surtout : « Le choix de la version définitive du site sera basé sur une ANALYSE DES KPI. » On ne choisit pas la version « la plus jolie ».
« L'empreinte environnementale des nouvelles technologies représente PLUS de gaz à effet de serre que L'AVIATION CIVILE », et le chiffre est « en constante augmentation ». Alléger un site améliore l'UX (Rapidité) et réduit son empreinte — c'est la tendance n°1 du critère DESIRABLE.
⚠️ Les pièges
🧠 Active recall — la question d'abord
?« En vous basant sur la grille d'analyse de P. Morville, jugez l'expérience utilisateur de ce site. » Par quoi tu ouvres ?
👆 Réponds dans ta tête, puis clique pour vérifier
?« Prolongez l'expérience utilisateur et réduisez les taux de rebond, en utilisant aussi le responsive design. » Définis ET illustre les 2 termes soulignés.
👆 Réponds dans ta tête, puis clique pour vérifier
?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
?Un site met 6 secondes à charger et il faut 7 clics pour atteindre une fiche produit. Quel critère, et quel plan d'action ?
👆 Réponds dans ta tête, puis clique pour vérifier
?Google Analytics affiche 42 secondes par visite et 82 % d'abandon de panier. Qu'est-ce que tu en dis ?
👆 Réponds dans ta tête, puis clique pour vérifier
?Le site n'a ni mentions légales ni page « qui sommes-nous », et le navigateur affiche « site non sécurisé ». Ton diagnostic et ton action ?
👆 Réponds dans ta tête, puis clique pour vérifier