Cours & tutos DKTS

PARTIE 2 : UX/DESIGN ET TECHNIQUE

Bloc de compétences RNCP : Superviser l’audit de la solution digitale

Télécharger la présentation en PDF

Objectifs de cette partie

À l’issue de cette deuxième phase d’analyse, vous aurez :

  • Audité le design system et l’identité visuelle du site concurrent
  • Évalué l’expérience utilisateur (UX) et l’interface (UI) selon les standards professionnels
  • Analysé la performance technique et les Core Web Vitals
  • Vérifié la conformité aux normes d’accessibilité RGAA/WCAG
  • Identifié les technologies utilisées et l’architecture technique
  • Évalué l’impact environnemental numérique
Table des matières

ÉTAPE 2.1 : ANALYSE VISUELLE / UI (INTERFACE UTILISATEUR)

Objectif pédagogique

Développer votre expertise en design system et votre capacité à analyser la cohérence visuelle d’une interface selon les principes du design UX/UI moderne.

A. Analyse de la palette de couleurs

Méthodologie d’extraction des couleurs

Outils recommandés :

Procédure :

  1. Prenez 3 captures d’écran : page d’accueil, page produit, page à propos
  2. Uploadez-les sur Coolors Image Picker
  3. Identifiez les 5-8 couleurs principales utilisées
  4. Notez les codes hexadécimaux (#XXXXXX)

Grille d’analyse chromatique :

CouleurCode HEXUsage identifiéContraste suffisantCohérence bio/naturel
Principale 1Header, CTA☐ Oui ☐ Non☐ Oui ☐ Non
Principale 2Backgrounds☐ Oui ☐ Non☐ Oui ☐ Non
Accent 1Boutons, liens☐ Oui ☐ Non☐ Oui ☐ Non
Accent 2Promotions☐ Oui ☐ Non☐ Oui ☐ Non
Neutre 1Textes☐ Oui ☐ Non☐ Oui ☐ Non

Questions d’évaluation :

✓ Cohérence identitaire : La palette reflète-t-elle les codes du marché visé ? (Eco responsabilité / Bio / Naturel…)

✓ Harmonie chromatique : Les couleurs fonctionnent-elles ensemble selon les principes de la roue chromatique (complémentaires, analogues, triadiques) ?

✓ Contraste et accessibilité : Le ratio de contraste texte/fond respecte-t-il les normes WCAG AA (minimum 4.5:1) ? Outil de vérification contraste -> WebAIM Contrast Checker : https://webaim.org/resources/contrastchecker/

✓ Lisibilité : Les couleurs facilitent-elles la lecture et la hiérarchisation de l’information ?

✓ Psychologie des couleurs : Les couleurs choisies évoquent-elles confiance, naturalité, bien-être ?

B. Analyse typographique

Outil recommandé :

Procédure :

  1. Activez l’extension WhatFont
  2. Survolez les différents éléments textuels du site
  3. Identifiez les polices utilisées pour : titres H1, H2, H3, corps de texte, boutons, menus (vous pouvez également vous aider du plugin Google Chrome « HeadingMaps » -> https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi)

Grille d’analyse typographique :

ÉlémentPoliceTailleGraisseEspacementLisibilité /5
Titre H1
Titre H2
Titre H3
Corps texte
Boutons CTA
Menu navigation

Questions d’évaluation :

✓ Nombre de polices : Le site utilise-t-il maximum 2-3 familles de polices différentes ? (bonne pratique UX)

✓ Hiérarchie typographique : La différence de taille entre H1, H2, H3 et corps est-elle suffisamment marquée ?

✓ Lisibilité : Les polices sont-elles faciles à lire sur écran ? Les polices sans-serif sont-elles privilégiées pour le corps de texte ?

✓ Cohérence : La typographie est-elle utilisée de manière cohérente sur toutes les pages ?

✓ Accessibilité : La taille de police minimale est-elle de 16px pour le corps de texte ?

✓ Adaptation mobile : La typographie est-elle responsive et lisible sur mobile ?

Évaluation de l’interlignage :

  • Ratio interlignage/taille de police optimal : 1.5 à 1.75
  • Vérifiez avec l’inspecteur de code (clic droit > Inspecter > propriété line-height)
    • Exemple : si la typo est à 15px et que l’interlignage à 24px, on est dans un ratio 1,6 (24/15) donc c’est tout à fait lisible par tout le monde !

C. Analyse des images et éléments graphiques

Aspects à évaluer :

  1. Qualité visuelle : que pouvez-vous dire des photos utilisées ?
    • Résolution et netteté des images produits
    • Photos professionnelles vs amateur
    • Cohérence du style photographique (studio, lifestyle, macro…)
  2. Optimisation technique
    • Poids des images (recommandé : < 200 Ko par image)
    • Format utilisé (WebP recommandé en 2025, JPEG, PNG)
    • Lazy loading activé ? -> Pour ce faire il suffit d’utiliser l’inspecteur d’élément sur une image et de vérifier la présence de l’attribut « lazy »
  3. Pertinence et contexte
    • Les images illustrent-elles réellement les produits ?
    • Mise en scène valorisante ?
    • Paraissent-elles authentiques ou retouchées ?

Outil d’analyse :

  • Inspecter une image (clic droit > Inspecter)
  • Vérifier le poids de l’image en survolant sa ligne dans le html

Grille d’évaluation images :

CritèreScore /5Observations
Qualité professionnelle
Optimisation poids
Formats modernes (WebP)
Cohérence style
Valorisation produits
Attributs alt renseignés
Score global images/30

(Optionnel) D. Analyse des icônes et éléments UI

Questions d’évaluation :

✓ Intuitivité : Les icônes sont-elles immédiatement compréhensibles (panier, recherche, compte, menu) ?

✓ Cohérence : Le style des icônes est-il uniforme (toutes en ligne, toutes pleines, même épaisseur de trait) ?

✓ Accessibilité : Les icônes importantes sont-elles accompagnées de labels textuels ?

✓ Taille et contraste : Les icônes sont-elles suffisamment grandes (min 24x24px cliquables) ?

✓ Set d’icônes : Identifiez le set utilisé (Font Awesome, Material Icons, custom)

E. Cohérence globale du design

Checklist de cohérence :

☐ Design system identifiable : Existe-t-il une charte graphique visible ?

☐ Cohérence inter-pages : Header, footer, navigation identiques partout ?

☐ Répétabilité des composants : Boutons, cartes produits, formulaires suivent-ils les mêmes règles ?

☐ Responsive design : Le design s’adapte-t-il harmonieusement aux différentes tailles d’écran ?

☐ État des éléments interactifs : Les boutons ont-ils des états hover, active, disabled clairement visibles ?

F. Hiérarchie visuelle et espace blanc

Principes à vérifier :

✓ Loi de proximité : Les éléments liés sont-ils regroupés visuellement ?

✓ Loi de similarité : Les éléments de même nature partagent-ils les mêmes attributs visuels ?

✓ Point focal : L’œil est-il guidé vers les éléments prioritaires (CTA, offres) ?

✓ Espace blanc (whitespace) : Le site respire-t-il ou est-il surchargé ?

ÉTAPE 2.2 : ANALYSE UX (EXPÉRIENCE UTILISATEUR)

Objectif pédagogique

Maîtriser l’audit UX selon les méthodologies professionnelles pour identifier les frictions et opportunités d’amélioration de l’expérience utilisateur.

A. Navigation et architecture de l’information

1. Analyse du menu de navigation

Checklist de navigation :

☐ Visibilité : Le menu est-il immédiatement visible sans scroll ?

☐ Clarté des labels : Les intitulés de menu sont-ils explicites et sans jargon ?

☐ Organisation logique : Les catégories suivent-elles une logique intuitive ?

☐ Nombre d’options : Le menu respecte-t-il la règle de Miller (2-7 éléments maximum) ?

☐ Mega menu : Si présent, améliore-t-il ou complexifie-t-il la navigation ?

☐ Menu mobile : Le menu hamburger fonctionne-t-il bien ? Est-il accessible ?

☐ Recherche : Barre de recherche visible et performante ?

2. Fil d’Ariane (Breadcrumb)

Évaluation :

☐ Présent sur toutes les pages profondes (niveau 3+) ?

☐ Tous les segments sont-ils cliquables ?

☐ Syntaxe correcte : Accueil > Catégorie > Sous-catégorie > Page actuelle

☐ Schema.org markup pour le SEO ?

3. Profondeur de l’architecture et structure des URL

Outil recommandé : Screaming Frog SEO Spider

Procédure :

  1. Lancez Screaming Frog
  2. Entrez l’URL du site à analyser
  3. Lancez le crawl
  4. Rdv dans l’onglet (tout en haut) « visualisation » -> « Graphique de l’arborescence des crawls »

Analyse à produire :

MétriqueValeur constatéeÉvaluation
Profondeur moyenne☐ Bon (≤3) ☐ Moyen (4) ☐ Mauvais (≥5)
Profondeur maximale☐ Bon (≤4) ☐ Moyen (5-6) ☐ Mauvais (≥7)
Pages orphelines
Pages en erreur 404

Règle d’or : Toute page importante doit être accessible en maximum 3 clics depuis l’accueil.

4. Structure des URL

Critères d’évaluation :

✓ Lisibilité humaine : Les URLs sont-elles compréhensibles sans les consulter ?

  • ✅ Bon : /soins-visage/creme-hydratante-bio
  • ❌ Mauvais : /produit.php?id=2847&cat=15

✓ Longueur : Les URL sont-elles concises (< 75 caractères) ?

✓ Mots-clés pertinents : Les URL contiennent-elles des mots-clés descriptifs ?

✓ Hiérarchie claire : La structure URL reflète-t-elle l’arborescence du site ?

✓ Paramètres inutiles : Absence de paramètres de tracking dans l’URL de base ?

✓ HTTPS : Toutes les URL sont-elles en HTTPS ? (obligatoire en 2025)

B. Facilité d’utilisation et parcours utilisateur

1. Test des parcours critiques

Identifiez et testez les 3 parcours utilisateurs prioritaires pour le secteur « ameublement éco-responsable » :

Parcours 1 : Découverte produit

textAccueil → Catégorie soins visage → Fiche produit → Ajout panier

Parcours 2 : Recherche par besoin

textAccueil → Barre de recherche "peau sèche" → Résultats → Filtre "bio" → Fiche produit

Parcours 3 : Tunnel d’achat

textPanier → Identification/Inscription → Livraison → Paiement → Confirmation

Grille d’évaluation par parcours :

ÉtapeNombre de clicsFrictions identifiéesTemps estiméClarté /5
1.
2.
3.
4.
Total

Frictions courantes à identifier :

  • Pop-ups intrusifs (newsletter obligatoire)
  • Formulaires trop longs
  • Obligation de créer un compte
  • Options de livraison peu claires
  • Moyens de paiement limités
  • Absence de réassurance (avis, labels bio, sécurité)

(Optionnel) 2. Évaluation des formulaires

Checklist UX formulaires :

☐ Labels visibles : Chaque champ a un label explicite ?

☐ Placeholders informatifs : Exemples de format fournis ?

☐ Validation en temps réel : Erreurs signalées avant soumission ?

☐ Messages d’erreur clairs : Explications précises des corrections à apporter ?

☐ Auto-complétion : Attributs HTML5 (autocomplete) activés ?

☐ Champs obligatoires : Marqués avec un astérisque (*) ?

☐ Longueur raisonnable : Maximum 5-7 champs pour une première inscription ?

☐ Politique de confidentialité : Lien vers RGPD visible ?

3. Boutons d’appel à l’action (CTA)

Analyse des CTA principaux :

CTATexte utiliséCouleurTailleVisibilitéClarté du bénéfice
Achat principal/5/5
Inscription newsletter/5/5
Demande de devis/5/5
Contact/5/5

Bonnes pratiques CTA :

  • Verbe d’action clair (« Acheter », « Découvrir », « Commander »)
  • Contraste fort avec le background
  • Taille suffisante (min 44x44px sur mobile selon Apple)
  • Espace de respiration autour (whitespace)
  • Micro-copie rassurante (« Livraison gratuite », « Sans engagement »)

C. Qualité et pertinence du contenu

Grille d’analyse éditoriale :

CritèreÉvaluationScore /5Observations
ClartéTextes compréhensibles sans jargon ?
PertinenceContenu adapté à la cible ?
Valeur ajoutéeContenus éducatifs (conseils, tutoriels) ?
Ton éditorialCohérent avec l’image de marque ?
StructureParagraphes courts, listes, sous-titres ?
Appel émotionnelStorytelling et connexion émotionnelle ?
TransparenceComposition produits clairement indiquée ?
Preuve socialeAvis clients, témoignages, études ?

Éléments de réassurance à identifier :

  • Labels et certifications bio affichés
  • Garanties (satisfait ou remboursé, origine France)
  • Politique de retour claire
  • Service client accessible
  • Engagement RSE visible

ÉTAPE 2.3 : ANALYSE TECHNIQUE ET PERFORMANCE

Objectif pédagogique

Maîtriser les outils d’audit technique pour évaluer la performance, la sécurité et la qualité du code selon les standards Web 2025.

A. Identification des technologies et conception

1. CMS et stack technique

Outil recommandé : Wappalyzer

Informations à collecter :

TechnologieNom/VersionObservations
CMSWordPress, Shopify, PrestaShop, custom ?
Serveur webApache, Nginx, LiteSpeed ?
CDNCloudflare, Akamai, Fastly ?
AnalyticsGoogle Analytics, Matomo, autre ?
Tag ManagerGTM, autre ?
FontsGoogle Fonts, Adobe Fonts, local ?

(Optionnel) 2. Analyse spécifique WordPress (si applicable)

Outil : ScanWP

Données à récupérer :

  • Thème utilisé (nom, version, auteur)
  • Liste des plugins actifs
  • Vulnérabilités connues
  • Version de WordPress

Évaluation :

  • Thème premium ou gratuit ?
  • Plugins essentiels ou bloatware ?
  • Mises à jour régulières ?

3. Hébergement et infrastructure

Outil : SiteChecker Hosting Checker

Informations à collecter :

CritèreValeurÉvaluation
HébergeurConnu/fiable ?
Type hébergementMutualisé/VPS/Dédié/Cloud
Localisation serveurFrance/Europe/US ?
IP dédiéeOui/Non
Temps de réponse serveur< 200ms = excellent

4. Agence/Développeur

Recherche :

  • Consultez les mentions légales
  • Inspectez les commentaires HTML (clic droit > Afficher le code source)

Données à documenter :

  • Nom de l’agence/freelance
  • Portfolio visible ?
  • Autres sites réalisés (via recherche Google)
  • Niveau d’expertise estimé

B. Performance et Core Web Vitals

1. Analyse avec GTMetrix (attention, le bot utilisé crawle le site depuis les USA ou le Canada, utilisez plutôt le 2ème outil si cela pose problème)

Outil : GTMetrix

Pages à tester :

  1. Page d’accueil
  2. Page catégorie
  3. Fiche produit
  4. Page blog (si applicable)

Méthodologie :

  1. Entrez l’URL dans GTMetrix
  2. Sélectionnez la localisation : Paris (pour la France)
  3. Lancez le test
  4. Attendez les résultats (30-60 secondes)

Grille de collecte GTMetrix :

Page testéePerformance ScoreStructure ScoreTemps chargementPoids page
Accueil/100/100
Catégorie/100/100
Produit/100/100
Blog/100/100

Interprétation des scores :

  • 90-100 : Excellent ✅
  • 75-89 : Bon ✓
  • 50-74 : Moyen ⚠️
  • < 50 : Mauvais ❌
Core Web Vitals détaillés

Les 3 métriques essentielles Google :

LCP (Largest Contentful Paint) : Vitesse de chargement du plus grand élément visible
-> Pour en savoir + : https://web.dev/articles/lcp?hl=fr

  • ✅ Bon : < 2.5 secondes
  • ⚠️ À améliorer : 2.5 – 4 secondes
  • ❌ Mauvais : > 4 secondes

INP (Interaction to Next Paint) : Réactivité aux interactions utilisateur
-> Pour en savoir + : https://web.dev/articles/inp?hl=fr

  • ✅ Bon : < 200 ms
  • ⚠️ À améliorer : 200 – 500 ms
  • ❌ Mauvais : > 500 ms

CLS (Cumulative Layout Shift) : Stabilité visuelle (éléments qui bougent)
-> Pour en savoir + : https://web.dev/articles/cls?hl=fr

  • ✅ Bon : < 0.1
  • ⚠️ À améliorer : 0.1 – 0.25
  • ❌ Mauvais : > 0.25

Impact business des Core Web Vitals :

  • Amélioration LCP de 20% = +7% conversions
  • CLS < 0.1 = réduction de 15% du taux de rebond

2. Audit Lighthouse (alternative gratuite et sans limites à GTMetrix)

Procédure Chrome DevTools :

  1. Ouvrez le site en navigation privée
  2. Clic droit > Inspecter
  3. Onglet « Lighthouse »
  4. Cochez (ou laissez coché) : Performance, Accessibility, Best Practices, SEO
  5. Sélectionnez « Desktop » ou « Mobile »
  6. Cliquez « Analyze page load »

Scores Lighthouse à collecter :

CatégorieScore /100Problèmes critiques identifiés
Performance
Accessibility
Best Practices
SEO

C. Sécurité et conformité

1. Protocole HTTPS

☐ Certificat SSL actif : L’URL commence par https:// ?

☐ Cadenas vert visible dans la barre d’adresse ?

☐ Certificat valide : Vérifiez la date d’expiration (clic sur le cadenas)

Pourquoi c’est critique :

  • Obligation légale pour les sites e-commerce
  • Facteur de ranking Google
  • Confiance utilisateur

2. Cookies et RGPD

Checklist conformité RGPD :

☐ Bandeau cookies présent au premier chargement ?

☐ Choix granulaire : Possibilité d’accepter/refuser par catégorie ?

☐ Refus facile : Bouton « Tout refuser » aussi visible que « Tout accepter » ?

☐ Pas de cookies avant consentement : Vérifiez avec DevTools > Application > Cookies

☐ Lien vers politique de confidentialité dans le bandeau ?

☐ Mentions légales complètes accessibles (footer) ?

☐ Page RGPD dédiée expliquant le traitement des données ?

☐ Formulaire de contact : Checkbox RGPD obligatoire ?

D. Accessibilité numérique

1. Audit WAVE WebAIM

Outil : WAVE

Procédure :

  1. Entrez l’URL de la page d’accueil
  2. Cliquez « WAVE this page »
  3. Analysez le rapport visuel

Grille de collecte WAVE :

Type d’alerteNombreDescription des problèmes majeurs
Errors (rouge)Erreurs bloquantes
Alerts (jaune)Points d’attention
Features (vert)Bonnes pratiques présentes
Contrast ErrorsProblèmes de contraste

Erreurs critiques courantes :

  • Images sans attribut alt
  • Liens sans texte descriptif
  • Contraste insuffisant texte/fond
  • Formulaires sans labels associés
  • Structure de titres incohérente (H1 > H3 sans H2)

2. Test de compatibilité mobile

Outil : Google Mobile-Friendly Test

Évaluation :

☐ Site mobile-friendly : Test Google validé ?

☐ Responsive design : Testez sur plusieurs tailles d’écran (DevTools > Toggle device toolbar)

E. Conformité RSE et impact carbone

1. Évaluation EcoIndex

Outil : EcoIndex

Procédure :

  1. Testez 5 pages du site
  2. Notez les scores (A à G)
  3. Relevez l’équivalent CO2 et eau

Grille EcoIndex :

PageScoreÉquiv. CO2 (g)Équiv. eau (cl)Niveau
Accueil
Catégorie
Produit
Blog
Contact
Moyenne

Interprétation :

  • A-B : Excellent ✅ (communication RSE valorisable)
  • C-D : Correct ✓
  • E-F-G : Mauvais ❌ (contradictoire pour une marque bio)

2. Website Carbon Calculator

Outil alternatif : Website Carbon

Métrique clé :

  • Grammes de CO2 par visite
  • Comparaison avec les sites testés globalement
  • Badge « cleaner than X% of pages »

Analyse critique pour le secteur bio :
Un site qui prône des valeurs éco-responsables avec un mauvais score carbone numérique crée une dissonance cognitive chez les consommateurs engagés. C’est un point de différenciation majeur pour votre projet.

LIVRABLES DE LA PARTIE 2

À l’issue de cette deuxième partie, vous devez avoir produit :

✅ Grille d’analyse UI complète : couleurs, typographie, images, cohérence
✅ Rapport d’audit UX : navigation, parcours, formulaires, CTA
✅ Fiche technique : technologies identifiées, hébergement, agence
✅ Tableau Core Web Vitals : GTMetrix et/ou Lighthouse
✅ Rapport accessibilité WAVE : erreurs et recommandations
✅ Score EcoIndex : impact environnemental par page
✅ Screenshots annotés : problèmes UX et bons exemples identifiés

CONSEILS PÉDAGOGIQUES

💡 Adoptez la posture d’auditeur professionnel : Vous supervisez l’audit comme l’exige le référentiel RNCP

💡 Contextualisez au secteur : Un site d’ameublement éco-responsable doit incarner ses valeurs dans son design

💡 Pensez mobile-first : 70%+ du trafic e-commerce est mobile en 2025

💡 Documentez visuellement : Les captures d’écran annotées valent mieux que de longs textes

Prochaine étape : Partie 3 – Marketing digital et performance (SEO, SEA, SMO, stratégie de contenu)