12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007 Amélie Boucher www.ergolab.net www.ergonomie-sites-web.com

Avant toute chose ... » 12 règles d’ergonomie = un outil ≠ une finalité » De grands principes = objectifs à atteindre ≠ moyens » Pré-règle = connaître votre internaute

Règle n°1 : Architecture Le site doit être bien rangé ORGANISATION » Qu’est-ce qui fait que l’on se repère facilement ?

Règle n°1 : Architecture » Pensez l'architecture pour vos visiteurs ! Que viennent-ils faire ? Quelles sont leurs connaissances ? exemple : dans une maison, on trouve plus souvent la salle de bains à côté de la chambre qu'à côté de la cuisine exemple : si un architecte pense une maison pour quelqu'un qui a du mal à se déplacer, il préférera une maison de plain pied plutôt qu'une à étage » Vous n’êtes pas votre internaute Oubliez tout ce que vous savez à propos de vos contenus Une architecture orientée stratégie de marque

Règle n°1 : Architecture » Architecture de l'information = Les fondations de votre site » Niveau de l'organisation conceptuelle On ne s'occupe pas de l'écran (Mais l'écran peut compenser une mauvaise architecture)

Règle n°2 : Organisation visuelle La page doit être bien rangée » Limiter la surcharge visuelle » Quantité d’informations réelle ≠ quantité d’informations perçue Supprimer tous les « bruits » Ne pas réduire la mesure au nombre de pixels occupés à un instant t

Règle n°3 : Cohérence On capitalise sur l’apprentissage interne » On ne change pas les choses d’endroit » On ne supprime pas des choses utiles sans raison » Une chose = un mot » Formats de présentation (exemple des liens) » Comportement du site

Règle n°4 : Conventions On capitalise sur l’apprentissage externe » Vous n’êtes pas le 1er sur l’Internet » L’ergonomie ne sert pas à être original Dépend bien sûr du type de sites mais quand tous les sites du monde respecteront des principes de base, là on pourra reparler de « créer » de nouvelles ergonomies » Avantages objectifs et subjectifs

Règle n°4 : Conventions "Une case à cocher, je peux la cocher" www.clarins.fr

Règle n°4 : Conventions "Une case à cocher, je peux la cocher"

Règle n°5 : Information Le site informe l’internaute et lui répond » Information générale sur le site » Information ponctuelle Finalement juste une histoire de politesse et d’aide, mais ne semble pas si évident que ça

Règle n°5 : Information » Notion de feedback : L’ordinateur doit acquiescer www.virgin-mega.fr Attention à la visibilité du feedback !

Règle n°6 : Compréhension » Choix des mots et symboles 75% du travail d’ergonomie . Utiliser les mots . Bien les choisir Encore plus pour l’architecture de l’information

Règle n°7 : Assistance On doit guider l’internaute Explicitement Et / ou Implicitement » Mots (mots uniques, légendes, textes explicatifs) à défaut d’autre chose » Organisation visuelle » Format et comportement des objets

Règle n°7 : Assistance » La notion d’affordances = possibilités d’action suggérées par un objet

Règle n°7 : Assistance » Visibilité des objets-clés

Règle n°7 : Assistance » Attention aux contre-affordances = on incite à emprunter une impasse = on risque la déception Déception = presque la pire chose pour la relation site-internaute somme de micro-déceptions construisent une relation peu fiable si l’internaute peut aller ailleurs, il ira ailleurs déception plus forte quand l’internaute s’est engagé dans l’action différence : . carte des desserts : pas de pannacotta, c’est votre dessert préféré. Vous choisissez parmi ce que propose la carte. . carte des desserts : une superbe pannacotta au coulis de fruits rouges. À la commande, la patronne vous dit qu’il ne lui en reste plus. > déception + forte alors que le résultat est identique.

Règle n°8 : Gestion des erreurs » 3 manières de gérer les erreurs : Avant l’erreur : protéger Après l’erreur : faciliter le repérage de l’erreur faciliter la compréhension de l’erreur Au-delà de l’erreur : faciliter la correction Postulat de base : L’internaute va se tromper

Règle n°8 : Gestion des erreurs » Attention à la sur-protection ! www.rememberthemilk.com

Règle n°9 : Rapidité L’internaute ne doit pas perdre son temps » Faciliter les clics et les interactions (cf. la loi de Fitts) » Ne pas recourir à la mémoire » Pas d'actions inutiles / Pas 2 fois la même chose » Des fonctionnalités raccourcis (exemple : ListExpress sur Telemarket)

Règle n°10 : Liberté C'est l’internaute qui commande » Respecter les contrôles utilisateur de base www.labanquepostale.fr » Attention aux actions au survol ! Au survol : L'affichage au survol est encore problématique pour les internautes les moins experts Alors l'action... acteur ou alors, c'est qu'il a décidé d'être spectateur » L'internaute est acteur : Attention au site qui se prend pour une télé

Règle n°10 : Liberté » Limiter toute intrusion

Règle n°11 : Accessibilité » Un site facile d'accès pour tous Accessibilité physique Accessibilité technologique

Règle n°12 : Satisfaction de votre internaute » 4 dimensions : Utilité Des micro-fonctionnalités pensées sur-mesure pour votre internaute www.threadless.com

Règle n°12 : Satisfaction de votre internaute Micro-fonctionnalités : l’exemple du “Browze by size” sur Threadless

Règle n°12 : Satisfaction de votre internaute Esthétique & expérience utilisateur globale Qualité du service Puissance et fiabilité technique

Au-delà des règles » Pondération des règles » Un guide mental plutôt qu'une checklist

Ceci est la fin, merci et rendez-vous ci-dessous : www.ergolab.net Site éditorial www.ergonomie-sites-web.com Le site du livre