12 règles d’ergonomie web

Présentation au sujet: "12 règles d’ergonomie web"— Transcription de la présentation:

1 12 règles d’ergonomie web
TECHNOFUTUR TIC Mercredi 12 Décembre 2007 Amélie Boucher

2 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

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

4 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

5 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)

6 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

7 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

8 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

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

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

11 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

12 Règle n°5 : Information » Notion de feedback :
L’ordinateur doit acquiescer Attention à la visibilité du feedback !

13 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

14 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

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

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

17 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.

18 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

19 Règle n°8 : Gestion des erreurs
» Attention à la sur-protection !

20 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)

21 Règle n°10 : Liberté C'est l’internaute qui commande
» Respecter les contrôles utilisateur de base » 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é

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

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

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

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

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

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

28 Ceci est la fin, merci et rendez-vous ci-dessous :
Site éditorial Le site du livre