support de cours Web design, approche ergonomique (2012) Master Création Numérique - Département Arts UVHC Université de Valenciennes et du Hainaut Cambrésis D'après ouvrage "Ergonomie web" d'Amélie Boucher, 3ème ed.Eyrolles, 2011

1. Comprendre l’internaute :
d'abord un être humain
Spécificités et capacités dans les domaines
perceptif, sensori-moteur, du raisonnement, de la
mémoire ou du langage
1 - Découvrez et appliquez les théories
de la Gestalt :
La loi de proximité
La loi de similarité
Et les autres ...

2. 1.1 - Loi de proximité
Notre cerveau tend à regrouper les choses qui
sont proches physiquement
Proximité visuelle = indice de proximité conceptuelle
Cela implique que des
éléments proches
visuellement ont un
rapport commun. Si un
élément cliquable, un
texte et une image sont
proches, cela démontre
que ces mêmes éléments
ont un rapport et un
objectif commun pour
répondre à une action.

3. bonne mise en application : l’information est claire et les éléments ayant une
fonction similaire sont regroupés. La navigation est donc facilitée.

4. La proximité doit respecter la logique des contenus
Niveau macro : un bloc différent sémantiquement
sépare la « recette » de la zone « commentaire »
Niveau micro : lien « ajouter au panier »
plus proche de la rangée 2

5. La proximité (défaillante) peut causer des soucis d'interaction
Imprécision du feed-back : « le livre a
bien été ajouté au panier » ne permet pas
de rectifier éventuelle erreur
La fonction Supprimer trop éloignée
Aide saisie dissociée du champ date :
« attention vous devez saisir votre date
de la manière suivante : jj/mm/aaaa »

8. 1.2 - Loi de similarité
Notre cerveau regroupe les éléments qui se
ressemblent
propriétés (forme, taille, couleur…) ou comportement
une ressemblance ou
une différence de
forme est le signe que
les objets sont
comparables ou
opposables d'un point
de vue conceptuel

9. les pictos sont de même taille et de même couleur; cela paraît logique mais avec une
telle quantité de pictos, il était essentiel d’appliquer cette règle pour garder une harmonie
visuelle. Par ailleurs, les 2 blocs traitant du même sujet (l’écologie) ont une mise en page
similaire, les couleurs et les formes utilisées sont les mêmes.

10. Le format et la couleur de « Etre client, c'est
comment ? » semble être cliquable car il ressemble
beaucoup aux onglets de la barre de navigation
Donne une indication erronée sur sa fonction car
n'indique que la rubrique en cours
Regroupement par similarité : on perçoit deux types d'objets

11. Les boutons « sélectionner » et les vignettes produit sont appariés par couleur
Dans version précédente se faisait au survol.

12. Disposition dans le damier : impression de vide et de désordre
du fait de son emplacement et de ses dimensions, la navigation Outils
devient plus importante que la navigation principale en pied de page.

13. 1.3 - Loi de clôture
Si plusieurs organisations sont équiprobables
sur la base des lois précédentes, l'organisation
en figure fermée a plus de chance d'être
observée
Une forme fermée est plus
facilement identifiée comme une
figure (ou comme une forme) qu’une
forme ouverte.
La continuité peut être « créée » par
le système visuel dans le
phénomène de la figure de Kanisza.

14. La loi de clôture permet au cerveau d’avoir un cadre visuel (comme l’encadrement
d’une peinture) permettant de concentrer l’attention sur le contenu au centre du cadre.

16. 1.4 - Figure/Fond
Une ségrégation figure/fond doit s'opérer
précocement dans l'acte perceptif pour que le
cerveau soit capable d'organiser les patterns de
stimulation en une structure
Le fond est perçu comme ayant
une certaine homogénéité, il n'a
pas de contour et se continue
sous la figure.
L'organisation en figure/fond peut
s'opérer de plusieurs façons à
partir d'un même champ visuel
comme dans les figures
réversibles (vase de Rubin)

17. Ségrégation Figure/Fond

19. Un pattern de stimulation est vu de telle sorte
que la structure résultante est toujours la forme
la plus simple la plus équilibrée, la plus stable
1.5 - Loi de la « bonne forme »
ou loi de prégance, loi de la simplicité

20. Un pattern de stimulation est vu de telle sorte
que la structure résultante est toujours la forme
la plus simple la plus équilibrée, la plus stable
1.5 - Loi de la « bonne forme »
ou loi de prégance, loi de la simplicité
Les stimuli qui forment une
« bonne forme » auront une
tendance à être regroupés
- continuité
- destin commun
- symétrie
- fermeture

23. 2 - Fittsizing & affordance

24. 2.1 - Découvrez et appliquez la loi de Fitts
Le temps mis pour atteindre une cible est
proportionnel à la distance à laquelle elle se
trouve et à sa taille
Loi formulée par Paul Fitts en 1954 sur la
base d'expérimentation dans le domaine
psychomoteur, avec l'objectif d'améliorer les
cockpits d'avion.

25. « une cible est d'autant plus rapide (facile) à
atteindre qu'elle est proche et grande »
● Les éléments cliquables doivent être gros :
augmenter
- la taille réelle des éléments cliquables
- la taille virtuelle des éléments cliquables : surface cliquable
(iceberg)

26. PLUS Fréquent qu'on ne le croit : exemmple whisky.fr
Seul le libellé textuel est cliquable et non l'ensemble de ce qui ressemble à un bouton
Augmenter la surface virtuelle
permet de
rendre l'interface moins sensible
aux « clics à coté »

27. ● Les éléments cliquables doivent être proches
distance entre les éléments cliquables : tenir compte de la logique
d'utilisation par les internautes
« une cible est d'autant plus rapide (facile) à
atteindre qu'elle est proche et grande »
naturabrazil .fr
gmail.com : barre de boutons principaux fixe

28. ● Éviter au maximum à l' utilisateur de couvrir l’écran
avec leur main.
● Créer des cibles de tailles raisonnable : pas plus
petites qu’un cm² (la taille du bout des des doigts).
● Les éléments qui suivent deviennent difficile à faire
voir avec les interfaces tactiles : curseur (vous savez
où sont vos mains), MouseOver action, double-clic,
clic droit.
Conférence Dan Shaffer
● Attention aux interfaces élastiques
● aux interfaces tactiles

29. 2,2 - Appliquez le concept d'affordance
Les affordances sont les possibilités d 'action
suggérées par les caractéristiques d'un objet
Notion inventée par James Gibson (1977)
Concerne toutes les possibilités d'action sur
un objet, même celles qui sont latentes ou
invisibles.
Repris en 1988, par Donald Norman « The
Psychology of everyday things » et entre dans
le champ de l'interaction HM.
Définition plus restrictive : uniquement les
possibilités d'action que renvoie
immédiatement un objet lorsqu'on le perçoit.
J'aurais dû utiliser le terme «affordance perçue». Dans
la conception, nous nous soucions beaucoup plus de
ce que l'utilisateur perçoit que de ce qui est vrai. Ce
dont le concepteur se soucie est de savoir si
l'utilisateur s'aperçoit que certaines actions sont
possible (ou dans le cas de la perception de non-
affordances, impossible).

30. Les onglets contenant les intitulés cliquables "Une formation" et "un établissement"
devraient également être cliquables pour élargir le champ d'action de l'utilisateur et faciliter
l'accès aux contenus.
Un changement d'état au survol conforterait l'utilisateur qu'il s'agit bien de liens.

31. Optimiser l'affordance
● « vous pouvez me
cliquer »
● « vous pouvez
interagir avec moi »
● attention aux
affordances erronées
L'affordance vous « rend intuitif »

32. Seul le lien « Aller à la liste » est cliquable pour mener vers la catégorie Laine.
On ne peut pas cliquez sur l'image qui est naturellement affordante au clic.

33. Pocket.fr : seul le bouton « En savoir plus » est cliquable.
Photo et Nom de l'auteur non cliquables quoique très affordants au clic

34. Degré d'affordance :
Hiérarchisez les actions
« Finalisez votre commande »
devrait être plus visible et affordant
au clic que les autres fonctions
vin-malin.fr
education.gouv.fr
Direction
Erronnée :
Les onglets
« zones » ne
sont pas les
en-têtes des
colonnes, se
fondent dans
le tableau

35. 3 - Le nombre magique de Miller et la loi de Hick
Miller est un psychologue qui recense dans les années 50 un
ensemble d'expériences et de preuves scientifiques tendant à
montrer qu'au delà de 7 objets dans notre tête tout s'embrouille.
Il définit l'empan de 5 à 9 éléments (7+/- 2) qui représente le
seuil maximal de ce que l'on appelle notre mémoire de travail.
Un élément ? Taille variable notion de « chunks » (blocs)
Référence théorique parfois mal interprétée
La loi de Hick, ou loi de Hick-Hyman, est un modèle de
l'interaction homme-machine qui décrit le temps qu'il faut à
un utilisateur pour prendre une décision en fonction du
nombre de choix à sa disposition. Étant donnés n choix
équiprobables, le temps moyen de réaction T requis pour
choisir parmi eux est approximativement
Modèle plus approprié à la conception de menus pour le
Web

36. ● limites des menus
déroulants classiques : site
Douce France
Les internautes supposent
souvent que la distance la
plus courte entre deux points
est la ligne droite. Avec des
menus à plusieurs niveaux,
ils ont tendance à faire
glisser la souris en diagonale
pour accéder aux sous-
menus, ce qui a pour
conséquence de faire
disparaître le menu. Frustrés
ils doivent recommencer.
Jakob Nielsen, Site Web :
priorité à la simplicité.
Campus Press, 2003
● Super footer : L'étudiant
● Super menu : Sony

37. Audacieux... fournit une complète cartographie du site

38. Figure de Ponzo : illusion de taille et de surface – voir vidéo