L'ergonomie d'une application web
Rendre une application web facile à utiliser : la navigation, les formulaires, les états d'écran (chargement, vide, erreur, succès) et la conception mobile d'abord avec des cibles tactiles de 44 px.
- 26 cartes
- 5 thèmes
- Gratuit
Le programme, thème par thème
Le poids de chaque thème suit celui que lui donne l'examen.
- Notions
- Questions
- Ranger et relier
- Mises en situation
- Comprendre
Quelques cartes du deck
Ergonomie web : de quoi s'agit-il ?
Voir la réponse
Facilité avec laquelle une personne atteint son but dans l'interface, sans erreur ni effort inutile.
Elle se juge à l'usage : un écran peut être beau et rester pénible si l'on s'y perd ou si l'on n'ose pas valider.
Ce champ n'a que son texte indicatif. Quel défaut d'ergonomie pose-t-il ?
```html
<input type="email" placeholder="Adresse e-mail">`- Il disparaît dès la saisie : on oublie ce qu'on remplit
- Le type
emailinterdit les majuscules dans la saisie de l'adresse - Le clavier du téléphone n'affiche pas le signe
@pour ce type - Le champ ne reçoit pas le focus au clavier tant qu'il n'a pas de
tabindex
Voir la réponse
Il disparaît dès la saisie : on oublie ce qu'on remplit
Un texte indicatif n'est pas un libellé : il s'efface à la saisie et son contraste est souvent faible. Il faut un
<label>visible, relié au champ. Le typeemailfait au contraire afficher le@au clavier et le champ est focalisable par défaut.Un écran qui affiche une liste a au moins quatre états à concevoir : …, vide, … et succès.
Voir la réponse
Un écran qui affiche une liste a au moins quatre états à concevoir : chargement, vide, erreur et succès.
Les concevoir tous évite l'écran blanc, le message technique brut ou le silence après un envoi : chaque moment dit à la personne où elle en est.
Mobile d'abord : de quoi s'agit-il ?
Voir la réponse
Démarche qui conçoit l'interface pour le plus petit écran (autour de 360 px de large), puis l'enrichit pour les écrans plus grands.
Le petit écran force à garder l'essentiel ; en CSS, les règles de base visent le téléphone et les
@media (min-width: …)ajoutent ce qui vient avec la place.Dans un catalogue à quatre niveaux de catégories, les utilisateurs disent ne plus savoir où ils sont et repassent par l'accueil. Quelle correction apporter ?
- Ajouter un fil d'Ariane et marquer l'entrée active du menu
- Cacher le menu derrière un bouton pour alléger les pages
- Ouvrir chaque catégorie dans un nouvel onglet
- Supprimer les niveaux intermédiaires du catalogue
Voir la réponse
Ajouter un fil d'Ariane et marquer l'entrée active du menu
Le problème est le manque de repère de position. Le fil d'Ariane montre le chemin, et l'entrée active (
aria-current="page") dit où l'on est dans le menu.