Cours d'ergonomie des interfaces web pour la filière IMR à l'Enssat (Lannion). Année 2012-2013.

1. Elodie Descharmes (ingénieur Orange Labs)
Filière IMR, deuxième année
2012-2013
Ergonomie
Parce qu’il ne sert à rien de réinventer ce qui est déjà très bien fait, ce cours est très largement
basé que le livre suivant :
Ergonomie web, pour des sites web efficaces
Amélie Boucher, Éditions Eyrolles

2. Le maquette conceptuelle

3. 3
@elodescharmes
La maquette conceptuelle
 Objectif : remplir les zones du zoning
 Respecter les 12 règles ergonomiques détaillées dans le chapitre précédent du cours
 Utilité de la maquette
– Pour le concepteur : trouver la solution d’interface qui représentera le meilleur compromis en
fonction de l’ensemble de vos contraintes
– Pour le client : valider la conception avant de passer au design graphique
– Pour l’équipe projet : document de travail
– faisant le lien entre de concepteur et le graphiste
– Utile pour les intégrateurs

4. 4
@elodescharmes
Qu’est-ce que je mets dans ma maquette ?
 Textes et vocabulaire
– Textes éditorial : NON
… mais préciser les principes de mise en forme
Utiliser du faux contenu, mais qui doit rester le plus réaliste possible
A défaut : Lorem Ipsum…
– Textes de navigation : OUI
Définis dans la phase précédente
– Vocabulaire des éléments de page : OUI
Titres, libellés de boutons, liens, légendes, champs de formulaire…

5. 5
@elodescharmes
Qu’est-ce que je mets dans ma maquette ?
 Apparence et comportement des objets : OUI
– La maquette doit être accompagnée de toutes les notes et représentations visuelles nécessaires
concernant l’apparence et le comportement des objets
– Ne pas oublier que ce sera sûrement le base de travail principale pour les personnes en charge de
la réalisation du site
 Deux types d’objets à spécifier
– Classes d’objets
– Eléments individuels

6. 6
@elodescharmes
Qu’est-ce que je mets dans ma maquette ?
 Deux types d’objets à spécifier
– Classes d’objets
– Eléments individuels

7. 7
@elodescharmes
Apparence et comportement de classes d’objets
 Spécifier comment se présentent et se comportent tous les types d’objets que l’on trouve que
votre site
– Titre de page,
– Niveaux de texte
– Lien hypertexte
– Titre cliquable
– Bouton d’action
– Image
– Champ de formulaire
– Etc.
 Exemple pour des champs de formulaire : « les libellés de champs sont à alignés à droite, ils
ne sont pas suivis de ":" »
 Ces recommandations peuvent être transmises implicitement par la maquette, mais c’est
toujours mieux de les formuler explicitement

8. 8
@elodescharmes
Apparence et comportement d’éléments individuels
 Pour les éléments qui n’apparaissent qu’un fois ou qui sont une instanciation particulière d’une
classe d’objets
 Exemple : augmenter la surface cliquable autour du logo sans appliquer ce principe à toutes les
images du site
 Exemple : si des objets du site changent d’apparence et/ou de comportement en fonction des
actions passées de l’internaute