Sensibilisation à l'ergonomie des sites web

Ergonomie ?

• Discipline, démarche, point de vue applicable aux outils utilisés par l'être humain
• Alain Wisner (~1950) :

  L'ensemble des connaissances scientifiques relatives à l'Homme nécessaires pour concevoir des outils, des machines, et des dispositifs qui puissent être utilisés avec le maximum de confort, de sécurité et d'efficacité.

• Cette définition se décline différemment selon les domaines, les tâches, les individus…

Site web ergonomique

• Un site web peut être qualifié d'ergonomique s'il est utile et utilisable
  • Utilité : répondre à un besoin. Permet d'attirer les internautes (ils viennent sur le site pour faire quelque chose)
  • Utilisabilité : faciliter la satisfaction du besoin. Permet de prolonger la visite (l'internaute reste et va jusqu'au bout de son projet)
• C'est surtout l'utilisabilité qui concerne le développeur web

Notion d'utilisabilité : norme ISO 9241

Introduction à la norme ISO 9241 sur Wikipedia

Un produit est dit utilisable lorsqu'il peut être utilisé avec efficacité, efficience, et satisfaction par des utilisateurs donnés, cherchant à atteindre des objectifs donnés, dans un contexte d'utilisation donné.

• Efficacité : l'utilisateur réussit à faire ce qu'il veut faire (aisance, facilité d'apprentissage)
• Efficience : il réussit rapidement et avec le moins d'erreurs possibles
• Satisfaction : il prend plaisir à le faire (critères esthétiques, marketing…)

Utilisateurs, objectifs et contexte donnés : on ne peut pas optimiser l'ergonomie de manière générique

L'ergonomie, un investissement rentable ?

• Usability Return on Investment, Nielsen & Gilutz (2003)
• Étude sur l'utilisabilité de 42 sites après refonte
• Résultat : + 202% d'utilisabilité
• Selon d'autres études, les modifications coûtent 100 fois plus cher après lancement du site que lors de la phase de conception fonctionnelle
• En résumé : ne pas négliger l'ergonomie, à toutes les étapes de la conception

Théorie de la Gestalt

• Psychologie de la forme
• Recherches en psychologie cognitive début XX^e siècle, école de Berlin
• Modèle théorique, fournit un support d'analyse des interfaces
• Le tout est plus que la somme des parties
• Page web = formes mises à côté les unes des autres et qui dessinent un tout

Loi de proximité

• Le cerveau regroupe ce qui est proche physiquement
• Réflexe : proximité physique ⇒ proximité conceptuelle

Proximité : application au web

• Rapprocher les éléments ayant un rapport fonctionnel
• Éloigner ceux qui n'ont rien en commun
• À appliquer à toutes les échelles, de la forme générale de la page aux « micro-formes »

Loi de similarité

• Le cerveau regroupe ce qui se ressemble (forme, couleur, contenu, comportement…)
• Ressemblance ⇒ proximité conceptuelle
• Différence ⇒ opposition conceptuelle

Similarité : application au web

• Un résumé assez complet des principes de la gestalt : Gestalt Principles: The Complete Overview

Loi de Fitts

• Paul Fitts, 1954, recherches sur l'ergonomie des cockpits d'avion
• La loi de Fitts est une formule mathématique qui quantifie la règle suivante :

  Une cible est d'autant plus facile à atteindre qu'elle est proche et grande

• Application au web :
  • Augmenter la taille des éléments cliquables
  • Réduire leur distance du point de départ
  • Les 2 règles peuvent se compenser !
• Faciliter le clic ⇒ plus rapide et moins d'erreurs

Loi de Fitts : Exemples

• Augmenter la taille réelle (ou la surface) des éléments cliquables
• Augmenter aussi la taille virtuelle :
  • Cliquer ici
  • Cliquer ici
  • Site de Toto
  • Site de Toto
  Autres exemples : pagination Google (comparer la taille du lien « suivant » par rapport aux autres), cases
  faciles à cocher (cliquer sur le texte)

  difficiles à cocher
• Augmenter la distance entre éléments cliquables
• Penser à changer l'apparence au survol ⇒ affordance perçue

Concept d'affordance

• James Gibson (fin 70s), psychologie cognitive : les affordances sont les possibilités d'action sur un objet
• Donald Norman (1988), introduit le concept d'affordances perçues pour le design d'IHM
• Affordances perçues = possibilités d'actions que renvoie un objet quand on le perçoit
• Utiliser les affordances perçues permet d'optimiser l'utilisabilité : elles permettent à l'utilisateur d'anticiper le comportement des objets

Affordance perçue et web

• Affordances perçues : possibilités d'action suggérées par les caractéristiques d'un objet
• Dépendent fortement des conventions
• Affordance perçue « Vous pouvez me cliquer » : doit être très forte pour la navigation principale, moins pour la navigation secondaire
• Affordance perçue « Vous pouvez interagir avec moi » : champs de saisie, doivent attirer l'attention
• Exemples
  • Texte « Feuilleter » avec la flèche + curseur qui devient un index
  • Sur la vue en grand, le curseur devient une main
• Attention aux fausses affordances ! Un exemple (via cet article)

Nombre magique de Miller et loi de Hick-Hayman

Georges A. Miller, The magical number seven, Plus or Minus Two, 1956

• Pas plus de 7 objets en tête, plus ou moins deux
• Mémoire de travail
• ⇒ capacité d'appréhension immédiate
• ⇒ ne pas surcharger l'interface

William Hick, On the rate of gain of information, 1952

• Il est plus facile de décider parmi un nombre réduit d'éléments
• ⇒ conception de menus

Ergonomie et accessibilité

• L'ergonomie va de pair avec l'accessibilité
• L'accessibilité commence par un codage propre (séparation fond-forme)
• Conception des liens : le texte du lien doit être explicite (Pas de Cliquer ici !)
• Attributs alt des images, title des liens (exemple : laisser la souris sur ce lien)
• Optimisation des couleurs : par ex. différences de couleurs fond/texte
• Optimisation des textes : typographie, par ex. pas de long texte en majuscules ou en italiques
• Voir les recommandations du W3C

12 règles

Les points à prendre en compte pour optimiser l'ergonomie d'un site, selon Amélie Boucher :

1. Architecture
2. Organisation visuelle
3. Cohérence
4. Conventions
5. Information
6. Compréhension
7. Assistance
8. Gestion des erreurs
9. Rapidité
10. Liberté
11. Accessibilité
12. Satisfaction

Architecture

• Le contenu du site est bien rangé
• Localiser rapidement ce qu'on cherche
• Travail déconnecté de la présentation
• ⇒ regroupements logiques
• ⇒ mettre en avant les contenus clefs
• ⇒ menus aidant à naviguer dans les contenus
• Attention aux catégories discutables, ex courses en ligne Super U :
  • Où est le lait UHT ? dans les produits frais
  • Où sont les « graines de tournesol grillées et salées » ? pas dans « Epicerie salée > Grignotage salé > Mélange graines et fruits », mais dans « Produits frais > Fruits > Fruits secs grignotage, apéritif » !

Organisation visuelle

• La page est bien rangée ⇒ éviter trop d'informations
• Essayer de diviser le nombre de mots par 2 ⇒ scan visuel rapide (pas sur les pages de contenu !)
• Afficher seulement les principaux éléments de navigation et d'interaction
• Attention : hétérogénéité, images de fond et animations ⇒ augmentation de la charge informationnelle

Cohérence

• Capitaliser sur l'apprentissage interne
• L'utilisateur retrouve les mêmes comportements dans toutes les pages
• Cohérence des
  • localisations
  • appellations
  • formats de présentation
  • interactions

Conventions

• Capitaliser sur l'apprentissage externe
• Selon Nielsen :
  • Standard : > 80% des sites utilisent un même principe
  • Convention : 50 à 79% des sites utilisent un même principe
• Un site ne respectant pas une convention pourra être considéré comme fonctionnant mal
• Conventions de :
  • localisation
  • vocabulaire
  • présentation et interaction
• Bien observer les sites que vous visitez !

Conventions : Exemples

• De nombreuses personnes ont l'habitude de cliquer sur le logo ou la bannière pour revenir à la page d'accueil, mais tous les sites ne le permettent pas
• lemonde.fr : on peut cliquer sur les titres et sur les images, très ennuyeux quand ce n'est pas le cas
• Panier et achat : voir article « Ergonomie : pourquoi il est dangereux de s'écarter des conventions »

Information (1)

• Le site informe l'internaute et lui répond
• Information générale : qui et quoi ?
  • éléments génériques : logo, tagline, barre de navigation principale
  • page d'accueil
• Information ponctuelle : se repérer dans le site / ce qu'on attend de l'utilisateur
  • navigation principale
  • où est-on dans le site ?
  • options possibles
  • pages déjà vues…
• Exemple : select inutile

  

• Informer au bon moment ! Exemples :
  • Article pas disponible ? (voir en haut à droite) En effet, c'était bien indiqué… (site original) Il aurait été malin de rendre plus explicite les produit pas en stock, plutôt que l'inverse…
  • lien interne vs lien externe

Information (2)

• Répondre aux actions de l'internaute (feedback)
• Cas général : changement de page
• Cas particuliers : pages très semblables ou rechargement partiel de la page
• Changement dans la page trop éloigné du clic ⇒ l'utilisateur ne voit pas
• Exemple : je clique sur « ajouter au panier », je suis ramené en haut de la page. Ça a marché ou non ? (page originale)

Compréhension

• Mots et symboles choisis minutieusement
• ⇒ pas de jargon ou mots techniques
• ⇒ icônes seules déconseillées
• Instructions claires et exprimées simplement, vocabulaire précis et exact
• Exemples : que signifie « je continue » ou « recherche express » ?
• Utiliser le vocabulaire de vos internautes
• Utiliser les conventions

Assistance

• Le site aide et dirige l'internaute
• Pas que les textes explicatifs !
• Il faut rendre visible ce dont l'utilisateur a besoin
• … surtout ce qu'il n'attend pas (quelle quantité de contenu ?)
• Avoir des clics logiques, exemple : « cliquez à droite de l'écran » (page originale)
• Utiliser les affordances perçues
• Simplifier le modèle d'interaction permet d'éviter les problématiques d'assistance
• Exemple : j'ai 6 bouteilles dans mon panier ; je modifie le nombre de bouteilles et je clique sur valider… Non, il fallait d'abord cliquer sur recalculer, et laisser le site choisir le nombre… (site original)

Gestion des erreurs

• Prévoir que l'internaute se trompe
• Créer une interface qui entraîne le moins d'erreurs possible
• Faciliter le repérage des erreurs
• Expliquer précisément et clairement l'erreur
• Possibilité de corriger ses erreurs
• Être courtois !

Rapidité

• L'utilisateur ne perd pas son temps
• Appliquer la loi de Fitts
• Optimiser la navigation
• Multiplier les points d'entrée vers une page, faciliter les interactions (exemples déjà vus)
• Ne pas demander deux fois la même chose (si j'ai ajouté un objet au panier, j'en veux au moins 1 exemplaire)
• Exemple : commande 1-click chez amazon
• Contre-exemple : ecampus

Liberté : c'est l'internaute qui commande

• Ne pas essayer de bloquer les actions usuelles (bouton back, copier/coller, etc.)
• Pas d'actions au survol : complètement contre-intuitif (voir une interface expérimentale sans aucun clic)
• Flexibilité, possibilité de contournement (couper le son, arrêter ou avancer une animation…)
• Pas de comportement passif (spot publicitaire, transitions animées trop longues)
• Système non enfermant (ex. navigation libre) et non intrusif (pop-ups, « Voulez-vous vraiment quitter cette page ? »)
• Ne pas empêcher l'accès à l'information pour les navigateurs non standard ! En particulier, JavaScript doit être utilisé pour améliorer l'expérience utilisateur quand il est disponible, il ne faut pas construire son site sur l'hypothèse que ce sera le cas. Bien sûr, certains sites particuliers ne peuvent pas vraiment s'en passer (par ex. Google Maps), mais c'est une minorité.
• Si votre site utilise JavaScript, vérifiez qu'il fonctionne correctement sans ! Quelques informations sur la façon de procéder

Accessibilité

• Physique ⇒ recommandations W3C
• Technologique ⇒ penser à la variété de SE, navigateur, taille d'écran, présence ou non de JavaScript, plugins, versions de logiciels, etc.
  ⇒ Toujours viser la graceful degradation, l'important est l'accès à l'information : tant pis si le site est moche sous IE7 ou avec JavaScript désactivé, à condition que le contenu soit accessible !
• Si ce n'est pas possible, indiquer à l'utilisateur pour quelle raison technique il ne peut pas accéder au contenu et lui indiquer ce qu'il doit faire (rejoint les problématiques d'information et de gestion des erreurs). Par ex sncf.com ne fonctionne pas sans JS mais ne le dit pas. Il est pourtant très simple et efficace de mettre une balise noscript.

Satisfaction

• Règle n°1 !
• Critère d'utilité (micro-fonctionnalités)
• Esthétique et expérience utilisateur
• Qualité du service
• Fiabilité technique
• Augmente la confiance de l'utilisateur dans le site

Pour conclure

• Steve Krug: « Don't make me think! »
• KISS : Keep It Simple, Stupid
• Vous avez 5 secondes pour indiquer à l'utilisateur qu'il est bien sur la page qu'il cherche
• Ergonomie et design fonctionnent de pair, ils ne sont pas antinomiques !