SNT/sequences/web/tp/tp2_experience_utilisateur.md

# 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

<details>
<summary><strong>Correction Exercice 3.1</strong></summary>

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

</details>

<details>
<summary><strong>Correction Quiz</strong></summary>

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)**

</details>

---

 <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ces cours sont mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.