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. Généralités
Utilité globale
Micro-utilités
Enumérer les contenus
Hiérarchiser les contenus
Définition des contenus

3. 3
@elodescharmes
Généralités
 Contenu = information + fonctionnalités
 Le contenu d’un site représente ce que les internautes vont venir chercher en le consultant :
c’est ça principale raison d’être
 Première étape indispensable : chercher le qui représente le cœur du site, ce que vous allez
offrir aux internautes
 Le site web n’est qu’un support, et pour qu’il soit efficace il faut avoir travaillé sur sa réelle
valeur ajoutée, ce qui le différencie des autres
Quelle est l’utilité principale de mon site ?
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

4. 4
@elodescharmes
Généralités
Un utilisateur Un site web
BESOIN CONTENUcorrespond
« Pour définir le contenu d’un site
je dois connaître l’utilisateur et son besoin »
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

5. 5
@elodescharmes
Généralités
 « Capter » un internaute = réussir à l’attirer sur votre site grâce à ce que vous lui proposez
– Soit en répondant à un besoin préexistant (situation la plus courante)
 il faut répondre au besoin de l’utilisateur
– Soit en réussissant à créer un besoin au fil de sa navigation
 il faut lui proposer des choses qui pourraient lui plaire
 Deux dimensions pour un site web
– Utilité globale
– Micro-utilités
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

6. 6
@elodescharmes
Utilité globale
 Exemples : vendre des produits, faire la promotion d’un évènement, montrer mes photos de
vacances à mes amis…
 Au départ il y a une idée. C’est l’utilité globale de votre site.
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

7. 7
@elodescharmes
Utilité globale
Bonne
application
Actions liées à
l’utilité globale du
site :
Consulter la carte
Réserver une table
Commander
http://www.blueelephant.com/paris/ (17/03/2012)
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

8. 8
@elodescharmes
Utilité globale
Actions liées à
l’utilité globale du
site :
Acheter des
produits culturels
http://www.fnac.com/ (17/03/2012)
Bonne
application
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

9. 9
@elodescharmes
Utilité globale
Actions liées à
l’utilité globale
du site :
Trouver un
revendeur
Consulter le
catalogue
http://www.asics.fr/ (17/03/2012)
Bonne
application
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

10. 10
@elodescharmes
Utilité globale
Actions liées à
l’utilité globale
du site :
Proposer des
contenus
éditoriaux
http://www.lemonde.fr/ t/ (17/03/2012)
Bonne
application
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

11. 11
@elodescharmes
Utilité globale
http://www.orange.fr/portail (27/03/2013)
Mauvaise
application
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

12. 12
@elodescharmes
Micro-utilités
 Déterminer l’utilité globale ne pose en général pas de problème
 La différence se fait sur les micro-utilités
– Les sites les plus inventifs en terme de micro-utilités sont en général ceux qui évoluent dans un
domaine très concurrentiel : ils doivent faire la différence
 Comment imaginer et choisir des micro-utilités
– « micro » ne veut pas dire « mineures » !
– Accompagnent l’utilité globale pour la servir
– Les micro-utilités les plus réussies sont créées en se mettant à la place des internautes et en
intégrant la notion de tâche  utilisez les persona !
Cas des sites de e-commerce : une étude récente nous apprend qu’il se passe 34
heures et 19 minutes entre le moment où un internaute clique pour la première fois sur
un site de e-commerce et le moment où il achète quelque-chose sur ce même site.
D’où l’importance de convaincre efficacement !
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

13. 13
@elodescharmes
Micro-utilités
 Comment imaginer et choisir des micro-utilités
– Deux types de micro-utilités
– Une information
– Une fonctionnalité
– Attention, ce n’est pas une course à la fonctionnalité !
– Une micro-utilité doit rester UTILE
– Attention à la charge informationnelle à l’écran
– Penser à comparer ce que la fonctionnalité apporte à l’internaute au regard des efforts requis
pour la leur fournir (coût de développement, intégration, validation, SAV…)
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

14. 14
@elodescharmes
Exemples de micro-utilités
Possibilité de
voir les
vêtements de
dos
http://www.laredoute.fr (17/03/2012)
Bonne
application
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

15. 15
@elodescharmes
Exemples de micro-utilités
On peut voir
les vêtements
de très prêt
Bonne
application
http://www.esprit.fr (17/03/2012)
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

16. 16
@elodescharmes
Exemples de micro-utilités
les photos
permettent de
visualiser un
produit dans
tous les coloris
disponibles
Bonne
application
www.camif.fr (12/03/2011)
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

17. 17
@elodescharmes
Exemples de micro-utilités
Sur le site
d’Amazon,
certains livres
peuvent être en
partie feuilletés
Cette micro
fonctionnalité
prend en compte
le comportement
classique d’un
client dans une
librairie
Bonne
application
www.amazon.fr (12/03/2011)
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

18. 18
@elodescharmes
Des exemples de micro-utilités
 Offrir la vue la plus complète possible d’un produit
 Prendre en compte les comportements liés à l’achat
 Précéder les interrogations des internautes
 (Pour les sites de eCommerce essentiellement), prendre en compte les potentialisateurs
d’action
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

19. 19
@elodescharmes
Des exemples de micro-utilités
www.airfrance.fr (12/03/2011)
Comportement utilisateur : lors
de l’achat d’un billet d’avion
pour deux personnes, l’acheteur
peut avoir besoin de proposer
les horaires à la deuxième
personne
Sur le site d’AirFrance, rien
n’est prévu pour envoyer les
informations d’un parcours par
mail
Mauvaise
application
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

20. 20
@elodescharmes
Les micro-fonctionnalité
orientées achat physique
sont d’autant plus
importantes sur un site qui
ne vent pas en ligne
Nuxe donne par exemple
sur son site la référence
produit permettant de
promouvoir l’achat en
pharmacie
Des exemples de micro-utilités
www.nuxe.com (12/03/2011)
Bonne
application
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

21. 21
@elodescharmes
Pour les sites proposant des
services originaux, les
micro-fonctionnalités
permettant de rassurer
l’internaute en devançant
ses interrogations
MonRoman propose des
livres personnalisés. De
nombreuses micro-
fonctionnalités présente un
aperçu du rendu final
Des exemples de micro-utilités
www.monroman.com (12/03/2011)
Bonne
application
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

22. 22
@elodescharmes
Le site ergolab propose de
télécharger les articles au
format pdf (pour chaque
article) mais également la
possibilité de télécharger
l’ensemble des articles en
une seule fois
Des exemples de micro-utilités
Bonne
application
www.ergolab.net (12/03/2011)
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

23. 23
@elodescharmes
Allocine affiche
l’heure de fin de
séance, précédant
ainsi le besoin
d’information
que les
internautes
peuvent avoir à
ce sujet
Des exemples de micro-utilités
Bonne
application
www.allocine.fr (27/03/2013)
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

24. 24
@elodescharmes
Surcouf permet
de paiement par
chèque cadeau
Kadeo, mais il
faut adresser les
chèques
cadeaux à une
adresse postale
Des exemples de micro-utilités
www.surcouf.com (12/03/2011)
Mauvaise
application
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

25. 25
@elodescharmes
Laredoute
propose
également ce
moyen de
paiement, mais
cette fois-ci
avec la
possibilité de le
faire en ligne
Des exemples de micro-utilités
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus
www.laredoute.fr (12/03/2011)
Bonne
application

26. 26
@elodescharmes
Enumérer les contenus
 Contenus = informations + fonctionnalités
 Il faut construire le site sur mesure pour le contenu qu’il est sensé accueillir
 Sans forcément avoir tous les contenus réels, il faut imaginer ou se procurer un ou plusieurs
exemples de type de contenus
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus
« on s’occupera du contenu quand le site sera en ligne »
 erreur !
(et il y a fort à parier que le contenu ne viendra jamais…)

27. 27
@elodescharmes
Enumérer les contenus
 Explorer toutes les sources d’information disponibles
– Le site existant (dans le cas d’un projet de refonte)
– Les acteurs du projet (brainstorming)
– Vos concurrents (analyse concurrentielle)
– Les besoins supposés de vos internautes (persona)
– Les besoins exprimés de vos internautes ou clients (retours utilisateurs)
 L’utilité d’un site tient essentiellement à la richesse (qualité, quantité, évolutivité) de son
contenu : cherchez toujours à en donner le plus possible
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus

28. 28
@elodescharmes
Hiérarchiser les contenus
 Les contenus ont une importance relative
 Il faut les hiérarchiser (sans encore présager de leur architecture ou de leur présentation sur
le site)
 Chapitre suivant…
Généralités
Utilité globale
Micro-utilités
Enumérer les contenus