book graphiste directeur artistique agence web Webdesign Webdesigner communication creation site web design Lyon  carte de visite directeur artistique graphiste agence communication web Lyon creation site internet lyon
 

Les bases de l’ergonomie web

Gestion des interactions

Un ensemble de moyens pour conseiller, orienter, informer et conduire l’utilisateur lors de ses interactions avec l’ordinateur.

Incitation & affordance

Un ensemble de moyens pour amener l’utilisateur à effectuer une démarche ou des actions spécifiques, contenant également un système de repérage dans l’évolution des tâches, l’état ou le contexte, les outils d’aide et d’accessibilité.

Ex : liens, mécanismes de recherche, navigation, date et copyright de l’information, contact webmaster.

En pratique, chaque fichier doit avoir :

  • Un titre concis et explicite,
  • Des pointeurs de localité (Rubrique principale> sous rubriques),
  • Des Liens intelligemment intégrés dans le contenu textuel.

Afin d’éviter la désorientation ainsi qu’une surcharge cognitive,

  • Etudier et renseigner de façon précise la manière dont sera effectuée la recherche. (ex : un mot, et, ou,etc..)

Groupement et distinctions entre items

Groupement et distinction au moyen de l’organisation visuelle et topologique (localisation) des informations afin d’établir une hiérarchie et permettre une meilleur mémorisation.

On consulte trop souvent des pages surchargées d’informations qui nuisent à la lisibilité et qui altèrent la compréhension de l’utilisateur :

  • identifier de façon exhaustive le contenu,
  • catégoriser les informations en classes pertinentes,
  • identifier chaque classe par un libellé précis.
  • la proximité des éléments,
  • leur similarité,
  • leur bonne continuation,
  • leur connexité.

Le groupement par proximité

Dans cet exemple, la série de points consécutifs sera perçue comme étant un enchaînement de séries de deux points.

clip image001 Les bases de lergonomie web

Le groupement par similarité

Une autre loi énoncée par les Gestaltistes est la loi de la similarité : les éléments également proches d’autres éléments mais qui ont des similitudes physiques entre-eux seront perçus comme appartenant à la même catégorie.

clip image002 Les bases de lergonomie web clip image003 Les bases de lergonomie web clip image004 Les bases de lergonomie web

Groupement/ distinctions par la localisation

Le critère Groupement/distinction par la localisation concerne le positionnement des informations les unes par rapport aux autres dans le but d’indiquer leur appartenance ou leur non-appartenance à une même classe, ou dans le but de montrer la distinction entre différentes classes. Ce critère concerne aussi l’organisation des items dans une même classe.

Groupement/ distinctions par le format

Le critère Groupement/distinction par le format concerne plus particulièrement les caractéristiques graphiques (format, couleur, etc.) permettant de faire apparaître la non-appartenance ou l’appartenance d’items à une même classe, ou encore permettant d’indiquer des distinctions entre classes ou bien encore des distinctions entre items d’une même classe.

Ex : isolement et changement d’état de l’image ou du texte pouvant renfermer un lien au passage de la souris, mise en évidence des liens déjà parcourus.

Optimisation

Prise en compte des temps de réponse de l’ordinateur face à toutes les interactions.

Ex : minimiser les images, réduire leur poids quand cela est possible, renseigner leur taille en hauteur et largeur dans le code afin de réduire le temps d’un chargement de page.

  • - Les serveurs Web
  • - La bande passante de l’hébergeur
  • - La charge du réseau
  • - La qualité de la ligne
  • - L’accès à Internet
  • - La puissance du terminal d’accès
  • - Le poids de la page
  • - Le morcellement des images
  • - La découpe des images à la taille exacte
  • - L’inclusion du poids des bandeaux publicitaires dans le total de la page
  • - L’optimisation des fonctions de cache des navigateurs
  • - L’affichage progressif
  • - etc…

Lisibilité

Caractéristiques lexicales des informations à l’écran pouvant entraver ou faciliter leur lecture.

Une bonne analyse de la lisibilité permet :

  • A l’œil de se fatiguer moins vite,
  • Au cerveau de mieux stocker l’information dans la mémoire à court terme,

En pratique :

  • Le style italique est moins lisible,
  • Le texte en capitale est plus difficile à lire,
  • Le contraste entre le texte et le fond de page est idéalement soutenu,
  • La texture du fond ne doit pas entraver la lecture du texte,
  • Les clignotements et autres changements de couleurs injustifiés doivent être évités

Travail du contenu informatif

Tous les moyens disponibles pour rechercher et augmenter la compréhension et l’efficacité du dialogue.

Ex : Etudier toute illustration métaphorique

Brièveté

Limiter les suites d’actions nécessaires pour atteindre un but. Aménager une densité d’informations raisonnable et un nombre limité d’étapes pour la lecture

Concision

Raccourcir les libellés des suites d’actions nécessaires pour atteindre un but.

Actions minimales

Limiter les suites d’actions (pages intermédiaires).

Densité informationnelle

Adapter la rédaction d’un contenu au support écran. Abondance, itération, absence de mise en forme ne sont pas les maîtres mots pour éviter la nausée.

Voir ? lire

Contrôle de la consultation

Le contrôle qu’ont les utilisateurs sur leurs actions et celui que l’on peut avoir sur eux.

Actions explicites

Le critère explicite de l’action et du fonctionnement de l’application par l’utilisateur au moment où il en fait la demande.

Contrôles utilisateur

Le contrôle du fonctionnement de l’application par l’utilisateur (l’initiative supplémentaire est mal perçue).

Ex : les sons et animations ne doivent pas se déclencher seuls sous peine d’agression.


Adaptabilité

Capacité à réagir selon le contexte et les besoins de l’utilisateur.

Flexibilité

Moyens mis en œuvre pour la personnalisation et le confort de l’utilisateur.

En pratique :

  • L’information présente devrait être fractionnée sous forme de pages différentes (liées entre-elles pour la consultation) afin de permettre des approches différentes,
  • Si le travail du fractionnement n’a pas été fait pour l’indexation de l’information par la couleur, celle-ci devrait être personnalisable par l’utilisateur (jeu de thèmes, css)
  • Des liens textuels devraient être mis en place lorsque l’on utilise des images map pour que la navigation reste accessible aux personnes utilisant des navigateurs text only

Prise en compte de l’expérience utilisateur

Moyens mis en œuvre pour la personnalisation et le confort de l’utilisateur.

Gestion des erreurs

Tous les moyens permettant de détecter, éviter et corriger les erreurs lorsqu’elles surviennent.

Protection contre les erreurs

Moyen de détecter et prévenir les erreurs d’entrées de données ou commandes.

Ex : lors de la saisie d’un formulaire, une erreur survient lorsque l’on n’a pas remplit les champs obligatoires car ils n’étaient pas spécifiés.

Qualité des messages d’erreurs

Pertinence, facilité de lecture et exactitude de l’information donnée aux utilisateurs sur la nature des erreurs commises.

Corrections des erreurs

Moyens mis en œuvre pour corriger les erreurs.

Homogénéité /cohérence

Les façons dont les choix ont été faits lors de la conception de l’interface sont correctement déclinées page par page.

En pratique :

  • L’utilisation de feuilles de styles,
  • Se créer des modèles de pages.

Signifiance des codes et dénominations

Compatibilité

Voir aussi :

Le W3C

Systèmes d’exploitation utilisés

Navigateurs utilisés

Configuration des couleurs

Configuration de la résolution écran

Les technologies

————————————————————————————————————–
Me contacter ! Télecharger la VCARD : www.creativ-e-motion.fr

  • email link Les bases de lergonomie web
  • pdf Les bases de lergonomie web
  • printfriendly Les bases de lergonomie web
  • facebook Les bases de lergonomie web
  • viadeo Les bases de lergonomie web
  • linkedin Les bases de lergonomie web
  • googlebuzz Les bases de lergonomie web
  • googlebookmark Les bases de lergonomie web
  • digg Les bases de lergonomie web
  • stumbleupon Les bases de lergonomie web
  • delicious Les bases de lergonomie web
  • yahoobuzz Les bases de lergonomie web
  • twitter Les bases de lergonomie web
  • myspace Les bases de lergonomie web
  • netvibes Les bases de lergonomie web
  • orkut Les bases de lergonomie web
  • technorati Les bases de lergonomie web

Laisser un commentaire avec Google+


Note : 1 Star2 Stars3 Stars4 Stars5 Stars 0,00 / 5 - Nombres de votes : 0
Loading ... Loading ...
Cette entrée a été publiée dans 1- Ergonomie. Vous pouvez la mettre en favoris avec ce permalien.

Les commentaires sont fermés.