Cours ergonomie des IHM web - Chapitre 12 - Maquette
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
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