Comprendre l’internaute :
d'abord un être humain
Spécificités et capacités dans les domaines
perceptif, sensori-moteur, du...
1.1 - Loi de proximité
Notre cerveau tend à regrouper les choses qui
sont proches physiquement
Proximité visuelle = indice...
bonne mise en application : l’information est claire et les éléments ayant une
fonction similaire sont regroupés. La navig...
La proximité doit respecter la logique des contenus
Niveau macro : un bloc différent sémantiquement
sépare la « recette » ...
La proximité (défaillante) peut causer des soucis d'interaction
Imprécision du feed-back : « le livre a
bien été ajouté au...
1.2 - Loi de similarité
Notre cerveau regroupe les éléments qui se
ressemblent
propriétés (forme, taille, couleur…) ou com...
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 es...
Le format et la couleur de « Etre client, c'est
comment ? » semble être cliquable car il ressemble
beaucoup aux onglets de...
Les boutons « sélectionner » et les vignettes produit sont appariés par couleur
Dans version précédente se faisait au surv...
Disposition dans le damier : impression de vide et de désordre
du fait de son emplacement et de ses dimensions, la navigat...
1.3 - Loi de clôture
Si plusieurs organisations sont équiprobables
sur la base des lois précédentes, l'organisation
en fig...
La loi de clôture permet au cerveau d’avoir un cadre visuel (comme l’encadrement
d’une peinture) permettant de concentrer ...
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 cap...
Ségrégation Figure/Fond
Un pattern de stimulation est vu de telle sorte
que la structure résultante est toujours la forme
la plus simple la plus é...
Un pattern de stimulation est vu de telle sorte
que la structure résultante est toujours la forme
la plus simple la plus é...
2 - Fittsizing & affordance
2.1 - Découvrez et appliquez la loi de Fitts
Le temps mis pour atteindre une cible est
proportionnel à la distance à laque...
« une cible est d'autant plus rapide (facile) à
atteindre qu'elle est proche et grande »
● Les éléments cliquables doivent...
PLUS Fréquent qu'on ne le croit : exemmple whisky.fr
Seul le libellé textuel est cliquable et non l'ensemble de ce qui res...
● Les éléments cliquables doivent être proches
distance entre les éléments cliquables : tenir compte de la logique
d'utili...
● Éviter au maximum à l' utilisateur de couvrir l’écran
avec leur main.
● Créer des cibles de tailles raisonnable : pas pl...
2,2 - Appliquez le concept d'affordance
Les affordances sont les possibilités d 'action
suggérées par les caractéristiques...
Les onglets contenant les intitulés cliquables "Une formation" et "un établissement"
devraient également être cliquables p...
Optimiser l'affordance
● « vous pouvez me
cliquer »
● « vous pouvez
interagir avec moi »
● attention aux
affordances erron...
Seul le lien « Aller à la liste » est cliquable pour mener vers la catégorie Laine.
On ne peut pas cliquez sur l'image qui...
Pocket.fr : seul le bouton « En savoir plus » est cliquable.
Photo et Nom de l'auteur non cliquables quoique très affordan...
Degré d'affordance :
Hiérarchisez les actions
« Finalisez votre commande »
devrait être plus visible et affordant
au clic ...
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'e...
● limites des menus
déroulants classiques : site
Douce France
Les internautes supposent
souvent que la distance la
plus co...
Audacieux... fournit une complète cartographie du site
Figure de Ponzo : illusion de taille et de surface – voir vidéo
Web ergo3 : Comprendre l'internaute
Web ergo3 : Comprendre l'internaute
Web ergo3 : Comprendre l'internaute
Web ergo3 : Comprendre l'internaute
Web ergo3 : Comprendre l'internaute
Web ergo3 : Comprendre l'internaute
Prochain SlideShare
Chargement dans…5
×

Web ergo3 : Comprendre l'internaute

734 vues

Publié le

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

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
734
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
20
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Web ergo3 : Comprendre l'internaute

  1. 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. 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. 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. 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. 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 »
  6. 6. 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
  7. 7. 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.
  8. 8. 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
  9. 9. Les boutons « sélectionner » et les vignettes produit sont appariés par couleur Dans version précédente se faisait au survol.
  10. 10. 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.
  11. 11. 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.
  12. 12. 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.
  13. 13. 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)
  14. 14. Ségrégation Figure/Fond
  15. 15. 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é
  16. 16. 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
  17. 17. 2 - Fittsizing & affordance
  18. 18. 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.
  19. 19. « 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)
  20. 20. 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é »
  21. 21. ● 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
  22. 22. ● É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
  23. 23. 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).
  24. 24. 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.
  25. 25. Optimiser l'affordance ● « vous pouvez me cliquer » ● « vous pouvez interagir avec moi » ● attention aux affordances erronées L'affordance vous « rend intuitif »
  26. 26. 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.
  27. 27. Pocket.fr : seul le bouton « En savoir plus » est cliquable. Photo et Nom de l'auteur non cliquables quoique très affordants au clic
  28. 28. 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
  29. 29. 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
  30. 30. ● 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
  31. 31. Audacieux... fournit une complète cartographie du site
  32. 32. Figure de Ponzo : illusion de taille et de surface – voir vidéo

×