# TP 2 : L'experience utilisateur (UX) --- ## Objectifs - Comprendre ce qu'est l'experience utilisateur (UX) - Savoir evaluer la qualite d'un site web - Identifier les bonnes et mauvaises pratiques de conception web - Developper un regard critique sur les interfaces numeriques --- ## Partie 1 : Qu'est-ce que l'UX ? (10 min) ### Definition **L'experience utilisateur** (en anglais *User eXperience*, abregee **UX**) designe la qualite de l'experience vecue par une personne lorsqu'elle utilise un site web, une application ou un produit numerique. Une bonne UX, c'est quand : - On trouve facilement ce qu'on cherche - Le site est agreable a utiliser - On n'est pas perdu dans la navigation - Le site fonctionne bien sur tous les appareils ### Les 4 criteres essentiels | Critere | Question a se poser | Exemple | |---------|---------------------|---------| | **Lisibilite** | Le texte est-il facile a lire ? | Taille de police suffisante, contraste texte/fond | | **Navigation** | Trouve-t-on facilement ce qu'on cherche ? | Menu clair, fil d'Ariane, liens visibles | | **Rapidite** | Le site charge-t-il vite ? | Pas d'attente excessive, images optimisees | | **Adaptabilite** | Le site s'affiche-t-il bien sur mobile ? | Design responsive, boutons assez grands | ### Exercice 1.1 Repondez aux questions suivantes : 1. Citez un site web que vous trouvez agreable a utiliser. Pourquoi ? 2. Citez un site web que vous trouvez penible a utiliser. Pourquoi ? 3. Parmi les 4 criteres ci-dessus, lequel vous semble le plus important ? Justifiez. --- ## Partie 2 : Analyse de sites web (25 min) ### Consigne Vous allez evaluer **3 sites web** en utilisant la grille d'evaluation ci-dessous. Pour chaque site, attribuez une note de 1 a 5 pour chaque critere. **Echelle de notation :** - 1 = Tres mauvais - 2 = Mauvais - 3 = Moyen - 4 = Bon - 5 = Tres bon ### Sites a evaluer | N. | Site | Adresse | |----|------|---------| | 1 | Wikipedia | https://fr.wikipedia.org | | 2 | Site du lycee | https://charlotteperriand.etab.ac-lille.fr | | 3 | Un site de votre choix | (jeu video, sport, musique...) | ### Grille d'evaluation Recopiez et completez ce tableau pour **chacun des 3 sites** : **Site 1 : Wikipedia** | Critere | Note /5 | Justification | |---------|---------|---------------| | Lisibilite | | | | Navigation | | | | Rapidite | | | | Adaptabilite (testez en redimensionnant la fenetre) | | | | **Total** | **/20** | | **Site 2 : Site du lycee** | Critere | Note /5 | Justification | |---------|---------|---------------| | Lisibilite | | | | Navigation | | | | Rapidite | | | | Adaptabilite | | | | **Total** | **/20** | | **Site 3 : ..................** | Critere | Note /5 | Justification | |---------|---------|---------------| | Lisibilite | | | | Navigation | | | | Rapidite | | | | Adaptabilite | | | | **Total** | **/20** | | ### Questions de synthese 4. Quel site a obtenu la meilleure note ? Pourquoi selon vous ? 5. Pour le site le moins bien note, proposez **2 ameliorations concretes**. 6. Pour tester l'adaptabilite mobile, vous avez redimensionne la fenetre. Connaissez-vous une autre methode ? (Indice : outils de developpement du navigateur, touche F12) --- ## Partie 3 : Bonnes et mauvaises pratiques (15 min) ### Comparaison avant/apres Voici des exemples de **mauvaises pratiques** courantes et comment les corriger : #### Exemple 1 : La lisibilite **Mauvais** : ``` Texte jaune sur fond blanc, police taille 10px, pas d'espacement. Tout est colle, illisible, fatigant pour les yeux. ``` **Bon** : ``` Texte sombre sur fond clair, police taille 16px, interlignes aeres. Le texte respire, on a envie de lire. ``` **Regle** : Toujours avoir un bon **contraste** entre le texte et le fond. La taille minimale recommandee est **16px**. #### Exemple 2 : La navigation **Mauvais** : - Pas de menu visible - Liens caches ou non cliquables - On ne sait pas ou on est dans le site **Bon** : - Menu toujours visible en haut de page - Liens soulignes ou en couleur - Fil d'Ariane ("Accueil > Rubrique > Page") **Regle** : L'utilisateur doit toujours savoir **ou il est** et **comment revenir en arriere**. #### Exemple 3 : L'adaptabilite mobile **Mauvais** : - Le site deborde de l'ecran sur telephone - Il faut zoomer pour lire le texte - Les boutons sont trop petits pour etre cliques au doigt **Bon** : - Le contenu s'adapte a la taille de l'ecran - Le texte reste lisible sans zoom - Les boutons sont assez grands (minimum 44x44 pixels) **Regle** : Plus de la moitie du trafic web se fait sur mobile. Un site **doit** s'adapter a toutes les tailles d'ecran. ### Exercice 3.1 Pour chaque situation, indiquez s'il s'agit d'une **bonne** ou **mauvaise** pratique : | Situation | Bonne / Mauvaise ? | |-----------|---------------------| | Un menu de navigation avec 25 liens | | | Un bouton "Retour en haut" sur une longue page | | | Du texte gris clair sur fond blanc | | | Des images qui mettent 10 secondes a charger | | | Un formulaire qui indique clairement les erreurs en rouge | | | Un site qui fonctionne uniquement sur ordinateur | | | Un lien qui change de couleur quand on l'a deja visite | | | Une page d'accueil avec 3 pop-ups publicitaires | | --- ## Partie 4 : Quiz recapitulatif (10 min) Repondez aux questions suivantes : **Question 1** : Que signifie UX ? - a) Universal eXchange - b) User eXperience - c) Ultra eXpress - d) Unified eXtension **Question 2** : Quelle taille de police minimale est recommandee pour le texte d'un site web ? - a) 8px - b) 12px - c) 16px - d) 24px **Question 3** : Pourquoi est-il important qu'un site s'adapte aux mobiles ? - a) Parce que c'est plus joli - b) Parce que plus de la moitie du trafic web est sur mobile - c) Parce que Google l'exige - d) Ce n'est pas important **Question 4** : Lequel de ces elements ameliore la navigation ? - a) Supprimer le menu - b) Ajouter un fil d'Ariane - c) Mettre tous les liens en noir sans soulignement - d) Cacher le bouton retour **Question 5** : Un bon contraste signifie : - a) Texte et fond de la meme couleur - b) Texte clair sur fond clair - c) Texte sombre sur fond clair (ou inversement) - d) Utiliser uniquement du noir et blanc **Question 6** : Quel outil du navigateur permet de simuler un affichage mobile ? - a) Le gestionnaire de telechargements - b) Les outils de developpement (F12) - c) Le mode navigation privee - d) Le gestionnaire de favoris --- ## Correction
Correction Exercice 3.1 | Situation | Reponse | |-----------|---------| | Un menu de navigation avec 25 liens | **Mauvaise** - Trop de choix, le menu doit etre simplifie | | Un bouton "Retour en haut" sur une longue page | **Bonne** - Facilite la navigation | | Du texte gris clair sur fond blanc | **Mauvaise** - Contraste insuffisant, illisible | | Des images qui mettent 10 secondes a charger | **Mauvaise** - Trop lent, les images doivent etre optimisees | | Un formulaire qui indique clairement les erreurs en rouge | **Bonne** - L'utilisateur comprend ce qu'il doit corriger | | Un site qui fonctionne uniquement sur ordinateur | **Mauvaise** - Doit etre adaptatif (responsive) | | Un lien qui change de couleur quand on l'a deja visite | **Bonne** - L'utilisateur sait ou il est deja alle | | Une page d'accueil avec 3 pop-ups publicitaires | **Mauvaise** - Intrusif et desagreable |
Correction Quiz 1. **b) User eXperience** 2. **c) 16px** 3. **b) Parce que plus de la moitie du trafic web est sur mobile** 4. **b) Ajouter un fil d'Ariane** 5. **c) Texte sombre sur fond clair (ou inversement)** 6. **b) Les outils de developpement (F12)**
--- Licence Creative Commons
Ces cours sont mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.