Recommandé
Contenu connexe
Plus de ElodieDescharmes
Plus de ElodieDescharmes (20)
Dernier
Dernier (20)
Cours ergonomie des IHM web - Chapitre 3 - Caractéristiques générales des internautes
- 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. Connaître et définir votre internaute : caractéristiques générales Introduction Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Cette partie constitue le support théorique des règles ergonomiques que nous verrons dans la partie « Evaluation ergonomique d’un site web »
- 3. 3 @elodescharmes Introduction Votre internaute est défini par – Des caractéristiques générales (c’est un être humain) Ces caractéristiques peuvent être définies et utilisées à travers : – Les théories de la Gestalt – La loi de Fitts – Le concept d’affordance – Le nombre de Miller et la loi de Hick – L’accessibilité visuelle et la lisibilité – Des caractéristiques individuelles (ce n’est pas n’importe quel être humain) Ces caractéristiques peuvent être définies et utilisées à travers : – La méthodes des personas Objet de ce chapitre Sera détaillée dans un chapitre dédié Introduction Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 4. 4 @elodescharmes Caractéristiques générales Issues des recherches en psychologie cognitive Fournissent des informations sur les capacités de tout être humain – Perceptives – Sensori-moteur – Raisonnement – Mémoire – Langage Ces capacités influencent le rapport internaute-interface web et permettent de formuler des règles universelles valables quelle que soit l’interface Introduction Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 5. 5 @elodescharmes Les théories de la Gestalt « Gestalt » = « forme » en allemand Théorie de la Gestalt – Postulat : – dans l'acte de perception nous ne faisons pas que juxtaposer une foule de détails, mais nous percevons des formes globales qui rassemblent les éléments entre eux – exemple musical : lorsqu'on se rappelle d'une mélodie, on se souvient d'une structure globale de musique et non d'une suite successive de notes prises isolément Aussi appelée « psychologie de la forme » Théorisée par Christian von Ehrenfels dans son article «Uber Gestaltqualitäten» (1890) Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 6. 6 @elodescharmes Les théories de la Gestalt « Gestalten » = mettre en forme, donner une structure signifiante « Gestalt » = forme structurée, complète et prenant sens pour nous Exemples : – une même table ne nous évoque pas la même chose suivant qu’elle est couverte de papiers et de livres ou d’une nappe – les étoiles sont autant de stimuli visuels indépendants les un des autres, mais nous pouvons les percevoir sous forme de constellations La première Gestalt : le visage de la mère Le nouveau-né n’en distingue pas les détail mais cette forme est déjà porteuse de signification pour lui Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 7. 7 @elodescharmes Les théories de la Gestalt Nos perceptions ne peuvent se réduire à la simple somme des stimuli perçus et obéissent à un certain nombre de lois pour définir un tout différent de la somme de ses parties – l’eau est autre chose que de l’oxygène et de l’hydrogène – une symphonie est autre chose qu’une succession de notes Les théories de la Gestalt définissent un modèle d’économie mentale (réflexe mental de bas niveau) Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 8. 8 @elodescharmes Les théories de la Gestalt Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 9. 9 @elodescharmes Les 7 lois de la Gestalt La théorie de la Gestalt énonce 7 lois Ces lois agissent en même temps et sont parfois contradictoires La loi de la bonne forme – loi principale dont les autres découlent : un ensemble de parties informe (comme des groupements aléatoires de points) tend à être perçu d'abord (et automatiquement) comme une forme, cette forme se veut simple, symétrique, stable, en somme une « bonne forme » La loi de bonne continuité – des points rapprochés tendent à représenter des formes lorsqu'ils sont perçus, nous les percevons d'abord dans une continuité, comme des prolongements les uns par rapport aux autres. Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 10. 10 @elodescharmes Les 7 lois de la Gestalt La loi de proximité – nous regroupons les points d'abord les plus proches les uns des autres La loi de similarité (ou similitude) – si la distance ne permet pas de regrouper les points, nous nous attacherons ensuite à repérer les plus similaires entre eux pour percevoir une forme. Ces deux lois sont celles qui sont le plus facilement applicables à l’ergonomie des interfaces. Nous verrons comment dans la suite du cours. Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 11. 11 @elodescharmes Les 7 lois de la Gestalt La loi de destin commun – des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme La loi de clôture – une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 12. 12 @elodescharmes Loi de proximité Notre cerveau tend à regrouper les choses qui sont proches physiquement – Proximité visuelle = indice de proximité conceptuelle – Eloignement visuel = indice d’éloignement conceptuel La forme d’une page ou des objets à l’écran est traitée comme autant d’indices par le cerveau des internautes – Rapprocher les objets qui ont un lien fonctionnel – Eloigner ceux qui n’ont rien en commun Penser à appliquer cette loi à tous les niveaux – Forme générale (impression globale lorsque l’internaute arrive sur la page) – Micro formes (sous-niveaux d’organisation) Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 13. 13 @elodescharmes Loi de proximité Cette règle paraît logique et évidente, et pourtant elle n’est pas appliquée, souvent à cause d’un manque d’espace entre les groupes d’information Distinguer des zones d’information permet de faciliter le travail d’analyse visuelle de l’internaute Contre-exemple (pour une page de paiement en ligne) – L’internaute doit analyser l’ordre des éléments dans la ligne et en déduire la logique – Impact de principes techniques : le bouton radio lié à Paypal est plus proche de l’élément précédent CB Visa Master card American Express Paypal Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 14. 14 @elodescharmes Bien ou mal ?Mauvaise application Loi de proximité http://www.odelices.com (03/03/2012) Recette Recettes similaires Commentaires sur la recette Zone d’information « recette » séparée en deux blocs Commentaires trop éloignée de l’information à laquelle ils se rapportent (la recette) Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 15. 15 @elodescharmes Bien ou mal ? Loi de proximité www.calipage.fr (13/02/2011) Défaut compensé par un traitement spécifique au survol de la souris Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Mauvaise application
- 16. 16 @elodescharmes Loi de proximité Exemple d’analyse d’une page web mettant en évidence l’application de la loi de proximité Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Bonne application
- 17. 17 @elodescharmes Loi de similarité Notre cerveau a tendance à regrouper les choses qui se ressemblent – Ressemblance de forme = proximité conceptuelle – Différence de forme = éloignement conceptuel • La similarité de deux éléments peut être liée à – La taille – La forme – La couleur – Le contenu – Le comportement Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 18. 18 @elodescharmes Bien ou mal ? Loi de similarité store.apple.com (03/03/2012) Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Bonne application
- 19. 19 @elodescharmes Loi de similarité Exemple d’analyse d’une page web mettant en évidence l’application de la loi de proximité Introduction Les théories de la Gestalt Présentation Les lois Loi de proximité Loi de similarité La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Bonne application
- 20. 20 @elodescharmes Application des théories de la Gestalt La proximité et la similarité sont les deux lois de la Gestalt les plus pertinentes et les plus faciles à appliquer, mais une analyse complète peut appliquer tous les principes de la Gestalt à l’évaluation ergonomique d’une interface Exemple : www.simplifyinginterfaces.com/tag/gestalt/ Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Pour aller plus loin…
- 21. 21 @elodescharmes La loi de Fitts La loi de Fitts – Le temps que l’on met à atteindre une cible est proportionnel à la distance à laquelle elle se trouve, ainsi qu’à sa taille – Une cible est d’autant plus facile à atteindre qu’elle est proche et grande Application à l’ergonomie web (« Fittsizing ») – Faciliter le clic d’un élément = augmenter la vitesse avec laquelle on peut cliquer dessus – Augmenter la taille des éléments cliquables – Réduire leur éloignement par rapport au point de départ du mouvement …Ces deux recommandations pouvant se compenser l’une l’autre – Hiérarchiser l’application de la loi de Fitts – en fonction de l’importance respective des différents éléments cliquables Les théories de la Gestalt La loi de Fitts Présentation Augmenter la taille Réduire l’éloignement Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 22. 22 @elodescharmes Les éléments cliquables doivent être gros « Une cible est d’autant plus facile à atteindre qu’elle est proche et grande » Objectif – Réduire les erreurs du type « je clique à côté » (même si ce type de comportement passe en général inaperçu pour les internautes, il s’agit bien d’une erreur en langage ergonomique) – Limiter les sous-mouvements correctifs d’un premier mouvement approximatif Les théories de la Gestalt La loi de Fitts Présentation Augmenter la taille Réduire l’éloignement Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 23. 23 @elodescharmes Augmenter la taille réelle Première manière de faire : augmenter la taille réelle des éléments cliquables Les théories de la GestaltLa loi de Fitts Augmenter la taille Réduire l’éloignement Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Pour consulter notre menu, cliquez ici Pour consulter notre menu, cliquez ici Pour vous mettre l’eau à la bouche, consultez notre menu Plus le lien est grand, plus il est facile à cliquer Les théories de la Gestalt La loi de Fitts Présentation Augmenter la taille Réduire l’éloignement Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Bien ou mal ? Il est plus facile de cliquer sur « suivant » que sur « 2 » pour accéder à la deuxième page de résultats www.lapeyre.fr (03/03/2012) http://www.google.fr (03/03/2012) Bien ou mal ?Bonne application Mauvaise application
- 24. 24 @elodescharmes Augmenter la taille virtuelle Deuxième manière de faire : augmenter la taille virtuelle des éléments cliquables 1. Augmenter la surface cliquable des éléments Consiste à se servir de ce qui entoure l’élément pour augmenter la surface cliquable 2. Augmenter la distance entre éléments cliquables Afin de limiter l’impact des erreurs de clic Les théories de la Gestalt La loi de Fitts Présentation Augmenter la taille Réduire l’éloignement Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 25. 25 @elodescharmes Augmenter la surface cliquable 1. Première manière d’augmenter la taille virtuelle Augmenter la surface cliquable des éléments – En profitant des éléments signifiants qui accompagnent l’élément cliquable Exemple : cliquer sur le libellé d’une case à cocher aussi bien que sur la case elle-même – En augmentant la surface cliquable autour de l’élément (exploiter l’espace vide en le rendant actif) http://www.voyages-sncf.com (03/03/2012) Les théories de la Gestalt La loi de Fitts Présentation Augmenter la taille Réduire l’éloignement Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Bien ou mal ?Bonne application
- 26. 26 @elodescharmes Augmenter la surface cliquable Augmenter la surface cliquable des éléments permet de prendre en compte la marge d’erreur des internautes – C’est pas des blagues, on clique vraiment à côté ! – Permet aussi de devancer la stratégie de l’internaute : quand celui-ci voit sont pointeur indiquer qu’il est dans une zone cliquable, il peut stopper son mouvement et cliquer – Améliore l’utilisabilité de l’interface (critère d’efficacité) http://www.clickdensity.com/ (03/03/2012) Les théories de la Gestalt La loi de Fitts Présentation Augmenter la taille Réduire l’éloignement Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 27. 27 @elodescharmes Augmenter la distance entre éléments 2. Deuxième manière d’augmenter la taille virtuelle Augmenter la distance entre éléments cliquables – Une erreur de clic sur un élément neutre est moins grave que sur un élément actif ! Les théories de la Gestalt La loi de Fitts Présentation Augmenter la taille Réduire l’éloignement Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 28. 28 @elodescharmes Bien ou mal ?Mauvaise application Augmenter la distance entre éléments Les théories de la Gestalt La loi de Fitts Présentation Augmenter la taille Réduire l’éloignement Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Les boutons ne sont suffisamment espacés pour faciliter les clics http://www.paris.fr (04/03/2012)
- 29. 29 @elodescharmes Les éléments cliquables doivent être proches « Une cible est d’autant plus facile à atteindre qu’elle est proche et grande » Concept difficile à appliquer aux IHM web – Difficile de préjuger de l’endroit où se trouve la souris de l’utilisateur – La plupart du temps, il est plus important de respecter une convention que d’obéir à tout prix à cette loi On peut cependant l’utiliser dans l’idée d’adapter l’interface à sa logique d’utilisation – Exemple : placer le bouton de validation d’un formulaire en bas de celui-ci Les 5 endroits les plus facilement cliquables d’un écran Remarque : les principes de la loi de Fitts liés à la proximité immédiate sont beaucoup plus largement utilisés dans les interfaces applicatives Les théories de la Gestalt La loi de Fitts Présentation Augmenter la taille Réduire l’éloignement Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 30. 30 @elodescharmes Bien ou mal ? Les éléments cliquables doivent être proches Mauvaise application Attention aux interfaces « élastiques » ! www.telemarket.fr (27/02/2011) Les théories de la Gestalt La loi de Fitts Présentation Augmenter la taille Réduire l’éloignement Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 31. 31 @elodescharmes Le concept d’affordance Affordances : capacité d’un objet à suggérer sa propre utilisation – Ou : possibilités d’actions suggérées par les caractéristiques d’un objet – Vient du verbe anglais « to afford » – Exemple : l’apparence d’une porte nous donne des indices sur comment l’ouvrir (s’il faut la pousser, la tirer, la faire glisser etc.) Les théories de la Gestalt La loi de Fitts Le concept d’affordance Présentation Augmenter l’affordance Affordances erronées Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 32. 32 @elodescharmes Signes explicites et signes implicites L’affordance d’un objet peut dépendre de signes implicites comme de signes explicites – Exemple : dans le cas de la porte – Signes implicites : forme de la poignée, emplacement des gonds, etc. – Signes explicites : panneau « poussez », quelqu’un qui passe devant nous en la poussant, etc. Les théories de la Gestalt La loi de Fitts Le concept d’affordance Présentation Augmenter l’affordance Affordances erronées Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 33. 33 @elodescharmes Optimiser l’affordance « Vous pouvez me cliquer » Application la plus importance du concept d’affordance pour le web : différencier ce qui est cliquable de ce qui ne l’est pas. Deux règles à respecter : 1.Optimiser l’affordance à la cliquabilité des éléments – Forme, couleur, libellé, localisation, comportement, adjonction d’autres éléments (ex: puce), etc. 2.N’appliquer cette règle qu’aux éléments de navigation primaires (ceux que l’on veut privilégier), sous peine de surcharger l’interface (et de perdre l’internaute…) – Il n’y a aucun intérêt à mettre en évidence qu’un logo est cliquable, ce genre d’élément doit être considéré comme un « plus » Les théories de la Gestalt La loi de Fitts Le concept d’affordance Présentation Augmenter l’affordance Affordances erronées Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 34. 34 @elodescharmes Optimiser l’affordance « Vous pouvez interagir avec moi » Remarque : les affordances des éléments web sont principalement déduites de conventions de présentation et d’interaction Exemple : un champ de saisie (recherche, login, etc.) – L’utilisateur s’attend à trouver un rectangle blanc et vide, c’est donc la forme qui présente la plus grande affordance à l’interaction – C’est ce qui peut poser problème – Avec les champs de recherche pré-remplis – Avec des champs de recherche colorés ou qui ne contrastent pas suffisamment avec la couleur de fond de la page Les théories de la Gestalt La loi de Fitts Le concept d’affordance Présentation Augmenter l’affordance Affordances erronées Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 35. 35 @elodescharmes Bien ou mal ? Optimiser l’affordance « Vous pouvez interagir avec moi » Mauvaise application Champs de recherche pré-remplis peu visible Les théories de la Gestalt La loi de Fitts Le concept d’affordance Présentation Augmenter l’affordance Affordances erronées Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité www.glenatbd.com (04/03/2012)
- 36. 36 @elodescharmes Bien ou mal ? Optimiser l’affordance « Vous pouvez interagir avec moi » Mauvaise application Sur le bouton « en savoir plus » est cliquable alors que la photo et le nom en gras présentent également une bonne affordance au clic http://www.pocket.fr (04/03/2012) Les théories de la Gestalt La loi de Fitts Le concept d’affordance Présentation Augmenter l’affordance Affordances erronées Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 37. 37 @elodescharmes Attention aux affordances erronées Cas le plus courant : le concepteur a voulu mettre en avant des éléments qui ne sont pas des liens Ne pas souligner un texte qui n’est pas un lien Attention aux éléments mis en avant graphiquement qui pourraient représenter la seule possibilité d’interaction sur la page Ne pas utiliser des formats habituellement adaptés pour des éléments actifs comme simple élément purement graphique Les théories de la Gestalt La loi de Fitts Le concept d’affordance Présentation Augmenter l’affordance Affordances erronées Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 38. 38 @elodescharmes Bien ou mal ? Attention aux affordances erronées Les théories de la Gestalt La loi de Fitts Le concept d’affordance Présentation Augmenter l’affordance Affordances erronées Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Mauvaise application « le matin » ou « l’après-midi » n’est pas cliquable, pas plus que le rond au- dessus… www.senseo.fr (04/03/2012)
- 39. 39 @elodescharmes Le nombre de Miller et la loi de Hick (à priori) vos internautes sont constitués comme la plupart des êtres humains… et malheureusement ils ont des capacités mentales limitées ! Ce que ça signifie – Au-delà de 7 objets dans notre tête (plus ou moins deux), tout s’embrouille – Mémoire de travail : mémoire immédiate (lorsque l’on retient un numéro de téléphone juste le temps de le saisir par exemple) Mais attention à ne pas l’appliquer « bêtement » ! – Il ne s’agit pas de ne faire que des menus de 7 éléments maximum – L’interface doit être suffisamment claire pour ne pas faire appel (ou le moins possible) à la mémoire de travail des internautes Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité 7 George Armitage Miller (psychologue et chercheur en cognitique humaine) se base sur des expériences et des preuves scientifiques pour définir le seuil maximal de notre mémoire de travail = 7, plus ou moins 2
- 40. 40 @elodescharmes Le nombre de Miller et la loi de Hick La loi de Hick (ou loi de Hick-Hyman) est plus adaptée à l’ergonomie web Idée : il est plus facile de choisir parmi un nombre limité d’éléments Le temps nécessaire pour prendre une décision croît proportionnellement au nombre et à la complexité des options proposés Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité T = b.log2(n + 1) T : le temps de réponse. b : une constante expérimentale dépendante de la situation n : le nombre de choix Le +1 apparaît "parce qu'il y a une incertitude sur s'il faut répondre ou non, au même titre que sur quelle réponse choisir Intuitivement, on peut faire le raisonnement que la loi de Hick a une forme logarithmique car les gens divisent le nombre total de choix en catégories, en éliminant environ la moitié des options restantes à chaque étape, au lieu de considérer chaque choix un par un, ce qui requerrait un temps linéaire.
- 41. 41 @elodescharmes Bien ou mal ? Le nombre de Miller et la loi de Hick Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Mauvaise application www.fnac.com (04/03/2012)
- 42. 42 @elodescharmes Bien ou mal ? Le nombre de Miller et la loi de Hick Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Bonne application www.voyages-sncf.com (04/03/2012)
- 43. 43 @elodescharmes Accessibilité visuelle et lisibilité Accessibilité : caractère possible de la liberté de déplacement dans l'espace, d'utilisation d'outils, et de compréhension Dans le cas des interfaces web, on parle essentiellement d’accessibilité visuelle – Prise en compte du handicap (malvoyants ou non-voyants) : des moyens détournés peuvent être utilisés pour consulter le site (synthèse vocale par exemple), les pages doivent être conçues de manière à en faciliter l’emploi Cette démarche dépend souvent de la réalisation technique – Tous les internautes ont besoin d’un site soit visuellement optimisé du point de vue accessibilité. Cette démarche relève plutôt de l’optimisation graphique Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 44. 44 @elodescharmes Faciliter l’utilisation de moyens de contournement du mode visuel Utiliser des moyens techniques pour faciliter la consultation du site en mode texte – Séparer forme et contenu – Appliquer les règles de conception définies dans les guides et normes dédiés à l’accessibilité web. – Définir pour chaque image un substitut textuel – Eviter les liens « génériques » (cliquez ici, suite, détails…) – Etc. – Ajouter des fonctionnalités – Fournir un lien qui permet de ne pas tenir compte des éléments répétés sur toute les pages (barres de navigation par exemple) Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 45. 45 @elodescharmes Optimiser la lisibilité à l’écran Optimisation des couleurs – Contraste positif recommandé : texte foncé sur fond clair – Attention au contraste de luminances trop élevé (effet d’éblouissement) – Eviter les couleurs complémentaires A éclairement égal, le diamètre pupillaire est plus petit en contraste positif qu'en contraste négatif. En conséquence, la focalisation sur l'écran est plus facile pour l'œil en contraste positif car la profondeur du champ augmente. Le contraste positif s'avère donc moins fatigant pour la vision que le contraste négatif. Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. […]
- 46. 46 @elodescharmes Optimiser la lisibilité à l’écran Optimisation des caractéristiques des textes – Taille des polices – Normal / gras – Typologie – Interlignage – Casse (minuscules ou majuscules) – Exemple pour la casse – Minuscules : facilite la lecture – Majuscules : facilite l’activité de recherche dans une page (mise en avant de certains mots) Le texte en minuscules est plus facile à lire. LE TEXTE EN MAJUSCULE EST PLUS DIFFICILE A LIRE. Un texte entièrement en majuscules est lu 13% à 20% moins vite que le même texte en minuscules. La vitesse de lecture est optimale lorsque majuscules et minuscules sont combinées à bon escient. Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité
- 47. 47 @elodescharmes Bien ou mal ? Optimiser la lisibilité à l’écran Les théories de la Gestalt La loi de Fitts Le concept d’affordance Le nombre de Miller et la loi de Hick Accessibilité visuelle et lisibilité www.unog.ch (04/03/2012) Mauvaise application
- 48. 48 @elodescharmes Conclusion Nous avons maintenant défini notre internaute en temps d’être humain « générique », avec ses possibilités et ses limites Pour rappel – Loi de proximité : proximité visuelle = indice de proximité conceptuelle – La loi de similarité : ressemblance de forme = proximité conceptuelle – La loi de fitts : une cible est d’autant plus facile à atteindre qu’elle est proche et grande – L’affordance : suggérer les possibilités d’interactions – Nombre de Miller et loi de Hick : limiter les alternatives quand un choix est nécessaire – Accessibilité visuelle et lisibilité : prendre en compte le handicap et optimiser graphiquement pour tous Dans le chapitre dédié à la méthodes des persona, nous chercherons ce qui le définit comme utilisateur de votre site : qui est-il ? Que cherche-t-il à faire ? Dans quelles conditions ?