Cours webmaster : Ergonomie site web et système de navigation
Ergonomie site web et système de navigation
.…
PARTIE 1 : INTRODUCTION A L'ERGONOMIE WEB
L'ergonomie web, qu'est-ce que c'est?
Un site web ergonomique est un site utile et utilisable
L’ergonomie redonne du pouvoir à l’être humain, permet à l’outil « site Internet » d’aider et non de pénaliser.
2 grandes fonctions sont gages de la réussite d’un site Internet et de la fidélisation des internautes qui l’utilise :
Utilité du site pour capter l'internaute
A quoi sert un site et quels micro-services il offre ?
Utilisabilité pour prolonger l'utilisation par l'internaute
LES COMPOSANTS DE L’UTILISABILITE :
! Efficacité : un utilisateur peut faire ce qu’il doit faire (surtout pour les sites généralistes)
! Efficience : faire rapidement ce qu’il a à faire avec le moins d’erreur (surtout pour les sites spécialisés + pour fidéliser l’internaute)
! Satisfaction : mettre le site au service des utilisateurs
Intérêts et retour sur investissement (ROI)
« Investir » dans l’ergonomie permet:
! satisfaction donc fidélisation des « clients »
! augmentation des ventes et taux de conversion ! augmentation du trafic et de sa qualité
! amélioration des performances des utilisateurs en terme d’efficacité et d’efficience
! amélioration de l’image de marque
-~> réduction des temps de développement (pour Jakob Nielsen une modification coûte 100 fois plus après le lancement d’un site)
Les méthodes de l'ergonomie web
Méthodes expertes
Ces méthodes font intervenir un ou plusieurs intervenants concepteurs ou responsables d’audit pour concevoir où évaluer des sites en fonction de leurs connaissances, expériences et convictions.
Méthodes participatives
Ces méthodes mettent en jeu les utilisateurs finaux en les observant, les questionnant sur des données objectives le plus souvent sous forme d’entretiens ou d’analyses individuelles.
La place de l'ergonomie dans les projets web
Elle est parfois qualifiée de « science du compromis » dans le sens où elle doit mettre en jeu tous les interlocuteurs d’un projet web en leur demandant de dialoguer. Le suivi ergonomique est primordial et transversal à tout le projet de création du début à sa fin.
MOTS CLES DU CHAPITRE
Le top 10 des idées reçues sur l'ergonomie
Où comment se défaire des idées reçues. Architecture de l’information, ergonomie, design, sens de lecture, scroll, focus group, test utilisateur
La sacro-sainte règle des 3 clics
Cette « règle » prend en compte la difficulté physique des clics, mais occulte complètement la difficulté mentale; l’important est que l’internaute réalise à bien les tâches qu’il souhaite mener sans erreur ou ambiguïté. Appliquer stricto-sensu cette règle peut nuire au projet. L’internaute peut au final être plus efficient dans sa démarche en faisant plus de 3 clics sans se poser de question ni commettre d’erreur.
Les internautes sont des idiots
Il ne faut ni sous-estimer ni surestimer les internautes. Il ne faut pas réfléchir au bien être des Internautes en général, mais connaître les Internautes visitant le site et prendre en compte leurs caractéristiques.
L'ergonomie et le design sont des ennemis jurés
Les 2 disciplines frontalières doivent en réalité collaborer et se répondre :
-~>Le graphisme aide l’ergonomie quand il respecte les recommandations. Ces échanges permettent d’optimiser l’utilisabilité, le design influence la qualité ergonomique de l’interface d’un point de vue utilisateur.
-~>Le graphisme possède également un fort impact sur la satisfaction des internautes (composante de l’utilisabilité).
!L’esthétique d’une interface influence la perception de l’utilisabilité par les internautes car inconsciemment on interprète que ce qui est beau est également agréable à utiliser.
Pas besoin d'ergonomie, on a fait un focus group
Il est essentiel de ne pas confondre les résultats et la démarche de focus group (méthode collective permettant de collecter les avis subjectifs des internautes) et la démarche ergonomique. Les focus group et les tests utilisateurs sont tous 2 utiles à la démarche ergonomique mais ne s’y substituent pas.
Faites-moi un site ergonomique
Un site ergonomique à 100% est un modèle idéal utopique puisque tous les internautes sont différents, cherchent à réaliser des taches différentes dans des contextes différents.
Les internautes lisent en F
Il n’existe pas de sens de lecture de page web inscrit dans nos automatismes mentaux, chaque internaute possède des habitudes différentes et l’aspect graphique à un fort impact sur son comportement de lecture. Il ne faut pas construire un site à partir de tels pré-requis mais de façon réfléchi et dépendant du contexte ainsi que des conventions web qui ont émergées.
L'ergonomie c'est juste du bon sens
Il n’y a pas de bon sens ergonomique, c’est essentiellement, la réflexion, la connaissance des grands principes d’ergonomie, et l’expérience qui permettent de forger une bonne ergonomie. Il est important que tous les acteurs du projet possèdent des notions d’ergonomie.
On le fera en WebZ.0, en ajax, etc,
La technologie ne détermine pas en soi la facilité d’utilisation finale du site, les objectifs et normes de l’ergonomie sont les mêmes quelque soit la technologie.
Les internautes ne scrollent pas
En réalité les internautes scrollent si le site correspond à leurs attentes et si ils pensent qu’ils trouveront ce qu’ils cherchent en scrollant. A contrario veiller à disposer dans la zone de haut de page tous les éléments primordiaux, et des éléments plus annexes dans les zones scrollables est judicieux.
Pour l'ergonomie, on verra à la fin
Les préoccupations ergonomiques n’intervient pas ponctuellement mais tout au long du projet.
PARTIE Z : LES FONDEMENTS DE L'ERGONOMIE
Comprendre l'internaute : d'abord un être humain
Ce chapitre présente différentes « lois » qui conditionnent le comportement des êtres humains de manière générale et qui ont des conséquences importantes quand à leurs comportements sur internet.
Découvrez et appliquez les théories de la Gestalt
Elles traitent de la manière dont notre cerveau analyse son environnement comme un ensemble de formes. Plusieurs lois composent les théories de Gestalt, 2 ont des conséquences essentielles par rapport à Internet :
La loi de proximité
Notre cerveau tend à regrouper des choses qui sont proches physiquement. Il faut donc rapprocher physiquement des éléments ayant des points communs et dissocier les éléments différents et ce quelque soit l’échelle (de la page dans son ensemble à chaque zone et élément la composant. En respectant ce principe, le site gagne en intuitivité.
La loi de similarité
Notre cerveau tend à regrouper des choses qui se ressemblent, une différence de forme ou de couleur sera signe d’objets opposables.
Découvrez et appliquez la loi de Fitts
Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande :
Les éléments cliquables doivent être gros
Pour augmenter la taille des éléments cliquables, il est possible :
- D’augmenter la taille réelle des éléments cliquables et de choisir des tailles relatives à leur importance
- D’augmenter la surface cliquable des éléments cliquables (ex : le clic sur le label pour un bouton radio, en s’assurant que toute la surface des boutons soient cliquables et pas seulement le texte du bouton). Cela permet en plus de compenser les erreurs et imprécisions des internautes, et de guider leur comportement (le changement du curseur de la souris « prévient », avant d’arriver précisément sur la cible, l’internaute qu’il pourra cliquer)
- D’augmenter la distance entre des éléments cliquables par des actions sur la distance physique ou la différence de formes ou de couleurs.
Les éléments cliquables doivent être proches
Plus l’objet cible est proche de l’objet source, plus on l’atteindra rapidement, en conséquence, il faut : - Regrouper les éléments utilisés de manière simultanée ou successive
- Utiliser les raccourcis claviers et clic droit qui réduisent forcément les distances.
Découvrez et appliquez le concept d'affordance
Les affordances sont les possibilités d’action suggérées par les caractéristiques d’un objet. Les affordances nous permettent d’anticiper et de connaitre à l’avance quel comportement adopter face à un objet ou une situation.
Optimiser l'affordance « vous pouvez me cliquer »
- En optimisant l’affordance de cliquabilité des éléments correspondant pour favoriser leur repérage (via la forme, couleur, libellé, curseur de souris, localisation dans l’interface, adjonction d’éléments indiquant la présence d’un lien,)
- En travaillant sur le comportement de l’objet lors de l’interaction avec l’internaute (roll-over)
Et penser également à renforcer l’affordance des autres éléments d’interaction tel des formulaires.
Optimiser l'affordance « vous pouvez interagir avec moi »
Il s’agit de donner aux éléments d’interaction de type champ de formulaire une apparence les incitant à les utiliser et facilitant leur repérage via une recherche sur la forme, la couleur, le libellé, le contenu, la localisation d’interface, l’adjonction d’éléments renforçant l’identité et surtout en respectant les conventions.
Attention aux affordances erronées
Il ne vaut mieux pas détourner les affordances pour ne pas diminuer l’utilisabilité finale (pas de texte souligné non cliquable,...)
Le nombre magique de Miller et la loi de Hick
La loi de Miller
« Au-delà de 7 « objets » dans notre cerveau, il sature » ; 7 est donc le nombre magique de Miller (plus ou moins 2 éléments), seuil maximal de notre « mémoire de travail » qui nous permet de stocker des informations temporaires. En conséquence il faut le prendre en compte pour ne pas surcharger les interfaces web. Ce n’est cependant pas une loi à respecter stricto-sensu notamment quand au nombre d’items des menus.
La loi de Hick
Cette loi indique qu’il est plus facile de décider parmi un nombre réduit d’éléments, la complexité de compréhension et d’utilisation croit proportionnellement au nombre de choix proposés
Accessibilité visuelle et lisibilité
- S’attacher à concevoir des interfaces adaptées aux internautes pénalisés sur le plan visuel (synthèse vocale et autres...) —> Optimisation de l’intégration html (normes xhtml/css (séparer contenu et forme) + normes d’accessibilité (liens de contournement (skiplink) et title sur les liens))
- S’attacher à facilité l’utilisation courante du site quelque soit l’internaute -~> Optimisation de la charte graphique
o optimisation des couleurs :
n différence de couleurs en prenant en compte les couleurs qui « vibrent » (bleu rouge; noir blanc franc) et la taille et la graisse des textes
n différence de brillance (recommandé d’être supérieure à 125) o optimisation des caractéristiques des textes
n taille des polices
n graisse des polices
n typographie (sans serif plus lisible qu’avec serif)
n interlignage
n casse (minuscule plus lisible que les majuscules)
n MOTS CLES DU CHAPITRE
Définir votre internaute : critères et méthodes des personas Profils utilisateurs, personas, scénarios d’utilisation
« Définir l’utilisateur et ses particularités afin de concevoir un système adapté à ses besoins et capacités »
Une personne donnée dans un contexte précis
Il faut dialoguer avec les responsables du projet et collecter un maximum d’informations sur les cibles utilisateurs en déterminant : « Qui ? », « Quels sont ces objectifs ?», « Quels sont les contextes d’utilisation ? »
Concevoir un site pour les plus novices d’entre eux n’est pas « la » solution, mieux vaut l’adapter aux réelles cibles.
La notion de tâche pour mieux cerner l'internaute
Il est primordial d’analyser, de questionner, d’observer les utilisateurs dans les taches qu’ils effectuent sur le site, on en retire des données concernant à la fois l’utilité et l’usabilité.
Les statistiques de visite, un atout majeur
Renseignent sur les configurations des utilisateurs et la qualité des visites (pages les plus visitées, nb de pages vues/visite,...) et désormais des outils permettent d’obtenir des informations sur le comportement au sein même d’une page (taux de clics sur différents éléments...)
Interroger les internautes
Un persona pas comme les autres
Les personas représentent des utilisateurs typiques créés de toute pièce permettant de concrétiser la notion d’utilisateur type.
Les intérêts de créer des personas
- Force à se pencher réellement sur la cible toute l’équipe impliquée dans le projet
- « Humanisation » de la cible par l’apport de toutes les caractéristiques (nom, histoire, lieu de consultation,...) favorable à l’empathie et donc la réelle considération
- Nécessite d’attribuer aux personas des missions et à matérialiser les objectifs utilisateurs
Comment créer et utiliser des personas
Il existe différents types de personas
- Le persona primaire (cible de prédilection) important pour définir les principes de fonctionnement par défaut du système
- Les personas secondaires
- Les personas tertiaires pour les profils plus annexes
- Les ante-personas sont éventuellement utilisés pour définir les profils que l’on souhaite exclure du site
Combien de personas créer ?
Le but à conserver en tête est d’avoir au final le mois de personas possibles car il ne s’agit pas de prendre en compte l’exhaustivité de la cible mais au contraire de restreindre à peu de profils particuliers.
La création de personas doit être collective
Sous peine d’écarter des personas importants et de s’éloigner des cibles réelles
Comment définir (construire) un persona
Les dimensions à prendre en compte dans l’ordre suivant:
- Objectifs et missions sur le site spécifiques et précis (ce point est bien le premier à définir !)
- Information socio-démographique
- Relation à la marque, historique client et relation à la concurrence
- Habitudes et envies
Communiquer sur les personas
Ce sont des outils de travail pour l’ensemble de l’équipe projet, il faut donc ne cesser d’en parler. Tout ce qui peut les rendre plus présents est positif (affiches,...)
PARTIE 3 : LES REGLES DE L'ERGONOMIE WEB
MOTS CLES DU CHAPITRE
1Z règles pour optimiser l'ergonomie de votre site
Les règles d’ergonomie permettent d’optimiser la qualité d’utilisation du site en influençant la conception et en tant qu’outil de pour évaluer des interfaces existantes. Toutes ces règles sont imbriquées et doivent régir la construction de l’architecture du site dans son ensemble tout comme chacune des pages. Règles ergonomiques, architecture de l’information, navigation, charge informationnelle, Gestalt, Homogénéité, conventions, informations et feedback, vocabulaire, guidage, affordances, erreurs, efficience, contrôle utilisateur, accessibilité, satisfaction.
Règle n'1. L'architecture: le site est bien rangé
Il s’agit de déterminer la meilleure manière d’organiser le contenu en vue de sa présentation aux internautes via la catégorisation (grouper) et la structuration (hiérarchiser).
Les regroupements sont logiques
Faire des regroupements logiques en adoptant des termes clairs et n’induisant pas en erreur sur le contenu.
La structuration met en avant les contenus clés
!L’architecture doit être pensée pour faire remonter au premier plan les éléments majeurs et contenus importants
Les menus aident à naviguer dans les contenus
Les menus reflètent à la fois les principes de catégorisation et de structuration. Les intitulés doivent respecter 3 critères :
- être signifiants: évoquer clairement le contenu
- être complémentaires: la somme de tous les items recouvre tout le contenu du site
- être exclusifs : éviter les ambiguïtés en permettant à chaque item d’avoir son sens même en l’absence de la lecture des autres items
Contourner un site mal rangé
La mise en place de liens transversaux au cœur des pages peuvent permettre de contourner une mauvaise organisation et renforcer la mise en exergue de certains contenus ou de certaines fonctionnalités.
Règle n'Z. Organisation visuelle: la page est bien rangée
La finalité est de libérer au maximum l’esprit de l’internaute en limitant la charge mentale liée au traitement des informations de ce qu’il perçoit à l’écran.
Eviter le trop plein d'informations
En épurant les pages et en supprimant ce que ne sert à rien...
Diviser la quantité de mots par 2 dans les pages de navigation
Il est souvent possible de supprimer des termes inutiles essentiellement dans les pages de navigation et dans les éléments de navigation. Il ne faut pas hésiter à remettre en cause l’utilité de textes pour les internautes en vérifiant que leur présence est justifiée.
N'afficher que les principaux éléments de navigation et d'interaction
Afficher les éléments optionnels que quand cela est nécessaire
Ce point prend toute sa valeur pour les formulaires ou il y a des interactions avec l’internaute ; le but est de ne proposer les fonctionnalités optionnelles que lorsque l’internaute en a besoin et sans rafraichissement de la page.
Supprimer les éléments d’interaction inutile
C’est notamment le cas d’un « bouton » suivant apparaissant en bas de page d’un résultat de recherche alors qu’il n’y a pas de page suivante.
N’afficher que les éléments d’interaction les plus utiles
Différencier les quantités d'information réelles et perçues
L’hétérogénéité visuelle augment la charge d’information
Plus on emploie de typographies et de couleurs différentes plus on augmente la charge informationnelle sur une surface d’écran donnée.
Les images de fond augmentent la charge d’information Il s’agit parfois d’éléments graphiques polluant le contenu.
Les animations augmentent la charge informationnelle
Aussi il est nécessaire que les animations ne fonctionnent pas en continu ou que l’internaute puisse les arrêter; et il faut éviter de placer plusieurs animations dans le même écran.
Démultiplier la valeur du pixel carré
Il s’agit de profiter de la flexibilité de l’interface pour utiliser les mêmes surfaces physiques pour délivrer différents contenus.
Remplacer une information au clic
C’est souvent le cas lors de l’utilisation d’onglets permettant d’afficher des contenus cachés sans rechargement de pages.
Remplacer une information au roll-over
Le changement de contenu peu également s’effectuer au roll-over, attention toutefois à la sensibilité du système.
L’apparition d’informations au roll-over
Contrairement au cas précédent le fait qu’une information apparaisse n’est pas suggérée et donc évidente. Cela peut poser des problèmes de compréhension et d’appréhension par les internautes notamment :
- Si la distance entre l’action et l’apparition de l’élément est grande,
- Si la surface de déclenchement est trop réduite,
- Si la fonction de déclenchement n’est pas facilement compréhensible,
- Si l’intégration html/javascript produit des comportements peu faciles à gérer pour l’utilisateur,
La question de la publicité
Souvent difficile à écarter la cantonner aux pourtours du site dans des zones réservées placées aux mêmes endroits sur toutes les pages.
Optimiser l'organisation et la hiérarchie visuelle
En faisant appel aux principes de proximité et de similarité, il s’agit d’organiser les éléments au sein de la page : distinction des espaces de navigation des éléments de contenus, des éléments d’interaction,... Ce travail doit se faire au sein de la page comme au niveau de chacun des éléments la composant (séparation de différents groupes de champs dans un long formulaire,...). La hiérarchisation du contenu textuel et des éléments est également un moyen d’apporter de la clarté et de facilité l’utilisation du site.
Règle n°3. Cohérence: le site capitalise sur l'apprentissage interne
La cohérence dans la mise en page entre les pages du site facilite l’utilisation par les internautes qui dès leur connexion au site enregistre sans s’en rendre compte des principes de fonctionnement, et gagne ainsi en rapidité et en efficacité dans leur visite.
Des localisations cohérentes
Autrement dit ne pas déplacer les éléments semblables entre les différentes pages du site.
Les appellations sont cohérentes
Employer le même mot pour désigner un même élément.
Les formats de présentation sont cohérents
Il faut rechercher la cohérence au sein des classes « d’objets » d’un même type et l’hétérogénéité entre ces classes « d’objets ».
Les interactions sont cohérentes
Un site doit se comporter de la même manière afin de ne pas surprendre les visiteurs.
Règle n°4. Conventions: le site capitalise sur l'apprentissage externe
Les connaissances et habitudes tirées de l’expérience de l’internaute lors de sa navigation sur d’autres sites doit être mise à profit pour simplifier l’usage d’une interface.
Qu'est ce qu'une convention
On parle de standard si plus de 80% des sites adoptent une même procédé/dispositif, et de convention s’ils sont 50 à 79% à l’adopter. Lorsqu’on recherche les conventions à respecter pour un site, mieux vaut les rechercher parmi les sites que visitent les internautes cibles que parmi tous les sites existants. Cela peut même parfois s’opposer à d’autres principes, par exemple le bleu #0000ff qui a caractérisé les liens a été une convention bien qu’en contradiction avec les principes de saturation des couleurs.
Respecter les conventions de localisation
Les éléments tels le logo en haut à gauche, le moteur de recherche en haut, l’accès au panier en haut à droite, les barres de navigation horizontales en haut pour le premier niveau de navigation, les barres de navigation verticales à gauche pour les menus de second niveau, les éléments de pied de page (mentions légales) font maintenant partie des conventions. On peut donc difficilement ne pas s’y soumettre sauf si la démarche est justifiée et souvent compensée par une mise en exergue de l’élément pour qu’il devienne immanquable.
Respecter les conventions de vocabulaires
Respecter les conventions permet de simplifier et d’apporter en clarté (« accueil » plutôt que « page d’accueil »), et s’adapter à la cible, en respectant les conventions de vocabulaire qui lui sont propre, lui apporte plus de facilité pour l’utilisation.
Respecter les conventions d'interaction et de présentation
Cela touche tous les éléments d’interaction : ascenseurs, formulaires, alertes, déclenchement d’actions, process de commande,... il faut donc veiller à ne pas créer un élément qui ressemble à un menu alors qu’il ne l’est pas, à ne pas utiliser le format d’alerte pour indiquer des messages peu importants, à respecter les différentes formes du curseur de souris,...
Règle n°5. Information: le site informe l'internaute lui répond
Le site se doit d’être poli, et informe l’internaute au moment opportun.
TAGLINE, BASELINE OU SLOGAN:
C’est la phrase accompagnant le logo et définissant le caractéristique principale du site. Elle prend toute son importance en absence d’un accès par la page d’accueil mais par un moteur de recherche.
- A apporter à l’internaute les précisions nécessaires qui lui permettront d’interagir et de comprendre l’interface, de « faire ce qu’on attend de lui » ;
- A apporter les informations lui permettant de comprendre ce qui est en train de se passer grâce à un feedback adapté (symbolisation du téléchargement pour ne pas qu’il ait l’impression que rien ne se passe,...).
Informez, mais au bon moment
Le fait de prévenir du format à télécharger ou de l’ouverture d’une nouvelle fenêtre évite que l’internaute soit troublé par le comportement d’un site. Le fait d’offrir la possibilité d’acheter un produit sans aller consulter sa fiche détaillée, ou d’indiquer quels éléments seront nécessaires pour remplir un long formulaire, d’indiquer le plus en amont si un produit est disponible ou nécessite un délai de livraison vont raccourcir, simplifier ou éviter une démarche longue et infructueuse à l’internaute.
L'ordinateur répond aux interactions de l'internaute
Il s’agit de mettre en place des feedbacks répondant aux actions de l’internaute.
Donner du feedback aux actions de l’internaute
Dans le cas de rechargement de page, ou d’éléments au sein d’une page, suite à l’action de l’internaute il faut que les différences visuelles soient assez marquées pour que l’internaute comprenne aisément ce qui s’est passé.
Visibilité du feedback
C'est-à-dire mettre en place des feedbacks suffisamment visibles et positionnés judicieusement.
Règle n°6. Compréhension: les mots et symboles sont choisis minutieusement
Il s’agit d’employer les codes sémantiques que l’internaute connait.
La bonne utilisation des mots sur le web
La réduction de boutons à de simples icones sans terme associé entraine par exemple une diminution de l’utilisabilité.
Il faut utiliser des mots explicites adaptés aux internautes cibles en faisant référence au « langage naturel » et aux conventions en terme de nomenclature, les plus précis et concis possibles et en rapport avec le contenu ou la fonction qu’ils proposent pour améliorer l’utilisabilité au maximum (éviter les langages techniques, éviter les ambiguïtés,...).
Les symboles et codes doivent être compréhensibles
Les codes et symboles comme les couleurs doivent être en adéquation avec la culture de l’internaute (rouge = erreur,...) et une trop grande utilisation entraine une surcharge informationnelle.
Dans le cas des icônes, il faut veiller à ce que leur sens soit clair et que chacune ne porte qu’un sens connu et compréhensible par tous.
Règle n°7. Assistance: le site aide et dirige l'internaute
Le site doit être conçu de manière à assister l’internaute tout au long de sa visite.
Dirigez grâce à l'organisation de la visibilité
Dans ce cadre la bonne visibilité des objets de navigation est primordiale (menu, pages suivantes ou précédentes,...). Il est nécessaire de répondre à la question « qu’est ce que le site propose ? » pour présenter l’interface en conséquence et de s’assurer que tous les éléments primordiaux sont affichés sans scroll.
Dirigez grâce à des clics logiques
Il est fondamental que ce soient les éléments décisionnels qui soient activables et cliquables (proscrire « pour lire la suite cliquez sur le bouton ci-dessous »).
Dirigez grâce aux affordances
Il est impératif que les internautes identifient quasi instantanément les éléments cliquables et actionnables.
Les affordances permettent de repérer ce qui est cliquable
Il faut veiller à ne pas induire en erreur l’internaute en lui faisant croire qu’un élément n’est pas cliquable par l’utilisation d’un style ou d’un effet. A noter que le fait d’utiliser des formulations à l’impératif ou l’infinitif ont tendance à renforcer l’affordance au clic.
Les affordances permettent de remarquer ce qui est utilisable
Il faut aider les internautes à repérer tous les éléments interactifs. C’est important pour tous les formulaires où les champs de saisie doivent apparaitre clairement en couleur claire pour représenter le vide et en contraste avec le fond du formulaire (le fait de pré-remplir un champ de saisie est plutôt néfaste à l’utilisabilité). Le fait des utiliser des affordances temporaires pour distinguer le champ de saisie en cours de remplissage est favorable à l’utilisabilité (ajout de pictogrammes, changement de couleur, bordures,...).
Veiller à ne pas diriger de façon erronée
Le manque de justesse et de précision induit en erreur
Les contre affordances induisent en erreur
Il s’agit de ne pas déguiser des éléments en ce qu’ils ne sont pas (ne pas faire ressembler à un lien un élément non cliquable, ne pas proposer une list-box lorsqu’il n’y a qu’un choix proposé)
Evitez d'avoir à diriger grâce à un modèle d'interaction adapté
Il ne faut pas demander à l’internaute de faire plus d’action qu’il n’est nécessaire (inutile de le faire cliquer sur le bouton recalculer lorsqu’il change le nombre de produits d’un panier, le recalcule doit être fait dès qu’il sort de la zone « quantité »).
Assistez votre internaute en tenant compte de ses besoins en terme de tâches
La prise en compte du comportement des internautes effectuant des tâches sur un site est importante pour lui faciliter « le travail ». L’idée de remplacer des caractères par des * lors de la saisie d’un code peut renforcer le sentiment de sécurité mais complexifie et gêne la saisie de l’internaute qui peut désirer vérifier sa saisie).
Assistez votre internaute en le suivant de très près
Il faut assister l’internaute en lui proposant clairement les choix qui s’offrent à lui à un instant T (aide à la saisie ou suggestions lors d’une recherche).