8.3 KiB
8.3 KiB
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 |
!!! question "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)
!!! question "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...) |
!!! question "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** | |
!!! question "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.
!!! question "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 | |
!!! question "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
- b) User eXperience
- c) 16px
- b) Parce que plus de la moitie du trafic web est sur mobile
- b) Ajouter un fil d'Ariane
- c) Texte sombre sur fond clair (ou inversement)
- b) Les outils de developpement (F12)
Ces cours sont mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International.