12 règles d’ergonomie web




                    TECHNOFUTUR TIC
                 Mercredi 12 Décembre 2007


Amélie Bouc...
Avant toute chose ...

» 12 règles d’ergonomie
  = un outil
  ≠ une finalité

» De grands principes
  = objectifs à attein...
Règle n°1 : Architecture

Le site doit être bien rangé


                      ORGANISATION




  » Qu’est-ce qui fait que...
Règle n°1 : Architecture

» Pensez l'architecture pour vos visiteurs !
 Que viennent-ils faire ?         Quelles sont leur...
Règle n°1 : Architecture

» Architecture de l'information
  = Les fondations de votre site


» Niveau de l'organisation co...
Règle n°2 : Organisation visuelle

La page doit être bien rangée


» Limiter la surcharge visuelle


» Quantité d’informat...
Règle n°3 : Cohérence

On capitalise sur l’apprentissage interne

» On ne change pas les choses d’endroit

» On ne supprim...
Règle n°4 : Conventions

On capitalise sur l’apprentissage externe


» Vous n’êtes pas le 1er sur l’Internet


» L’ergonom...
Règle n°4 : Conventions

quot;Une case à cocher, je peux la cocherquot;




                      www.clarins.fr




     ...
Règle n°4 : Conventions

quot;Une case à cocher, je peux la cocherquot;




                                         10 / 28
Règle n°5 : Information

Le site informe l’internaute et lui répond

» Information générale sur le site


» Information po...
Règle n°5 : Information

» Notion de feedback :
  L’ordinateur doit acquiescer


 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 c...
Règle n°7 : Assistance

   On doit guider l’internaute


   Explicitement                         Implicitement
          ...
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




                               16 / 28
Règle n°7 : Assistance

» Attention aux contre-affordances

 = on incite à emprunter une impasse
 = on risque la déception...
Règle n°8 : Gestion des
erreurs
Postulat de base : L’internaute va se tromper
» 3 manières de gérer les erreurs :
Avant l’...
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 ...
Règle n°10 : Liberté

C'est l’internaute qui commande

» Respecter les contrôles utilisateur de base

» Attention aux acti...
Règle n°10 : Liberté

» Limiter toute intrusion




                            22 / 28
Règle n°11 : Accessibilité

» Un site facile d'accès pour tous




    Accessibilité                Accessibilité
     phy...
Règle n°12 : Satisfaction de votre internaute

» 4 dimensions :
    Utilité
    Des micro-fonctionnalités pensées sur-mesu...
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


  ...
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         www.ergonomie-sites-web.com

   Site éditori...
Prochain SlideShare
Chargement dans…5
×

Ecommerce 12regles Ameliebouchez Technofutur

1 994 vues

Publié le

Conférence ecommerce et slides de présentation des orateurs

Publié dans : Technologie, Business
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 994
Sur SlideShare
0
Issues des intégrations
0
Intégrations
33
Actions
Partages
0
Téléchargements
75
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ecommerce 12regles Ameliebouchez Technofutur

  1. 1. 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007 Amélie Boucher www.ergolab.net www.ergonomie-sites-web.com
  2. 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 2 / 28
  3. 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 ? 3 / 28
  4. 4. Règle n°1 : Architecture » Pensez l'architecture pour vos visiteurs ! Que viennent-ils faire ? Quelles sont leurs connaissances ? Une architecture orientée stratégie de marque 4 / 28
  5. 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) 5 / 28
  6. 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 6 / 28
  7. 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 7 / 28
  8. 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 » Avantages objectifs et subjectifs 8 / 28
  9. 9. Règle n°4 : Conventions quot;Une case à cocher, je peux la cocherquot; www.clarins.fr 9 / 28
  10. 10. Règle n°4 : Conventions quot;Une case à cocher, je peux la cocherquot; 10 / 28
  11. 11. Règle n°5 : Information Le site informe l’internaute et lui répond » Information générale sur le site » Information ponctuelle 11 / 28
  12. 12. Règle n°5 : Information » Notion de feedback : L’ordinateur doit acquiescer Attention à la visibilité du feedback ! www.virgin-mega.fr 12 / 28
  13. 13. Règle n°6 : Compréhension » Choix des mots et symboles 75% du travail d’ergonomie . Utiliser les mots . Bien les choisir 13 / 28
  14. 14. Règle n°7 : Assistance On doit guider l’internaute Explicitement Implicitement Et / ou » Mots » Organisation visuelle (mots uniques, légendes, textes » Format et comportement des objets explicatifs) à défaut d’autre chose 14 / 28
  15. 15. Règle n°7 : Assistance » La notion d’affordances = possibilités d’action suggérées par un objet 15 / 28
  16. 16. Règle n°7 : Assistance » Visibilité des objets-clés 16 / 28
  17. 17. Règle n°7 : Assistance » Attention aux contre-affordances = on incite à emprunter une impasse = on risque la déception 17 / 28
  18. 18. Règle n°8 : Gestion des erreurs Postulat de base : L’internaute va se tromper » 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 18 / 28
  19. 19. Règle n°8 : Gestion des erreurs » Attention à la sur-protection ! www.rememberthemilk.com 19 / 28
  20. 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) 20 / 28
  21. 21. Règle n°10 : Liberté C'est l’internaute qui commande » Respecter les contrôles utilisateur de base » Attention aux actions au survol ! www.labanquepostale.fr » L'internaute est acteur : Attention au site qui se prend pour une télé 21 / 28
  22. 22. Règle n°10 : Liberté » Limiter toute intrusion 22 / 28
  23. 23. Règle n°11 : Accessibilité » Un site facile d'accès pour tous Accessibilité Accessibilité physique technologique 23 / 28
  24. 24. 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 24 / 28
  25. 25. Règle n°12 : Satisfaction de votre internaute Micro-fonctionnalités : l’exemple du “Browze by size” sur Threadless 25 / 28
  26. 26. Règle n°12 : Satisfaction de votre internaute Esthétique & expérience utilisateur globale Qualité du service Puissance et fiabilité technique 26 / 28
  27. 27. Au-delà des règles » Pondération des règles » Un guide mental plutôt qu'une checklist 27 / 28
  28. 28. Ceci est la fin, merci et rendez-vous ci-dessous : www.ergolab.net www.ergonomie-sites-web.com Site éditorial Le site du livre 28 / 28

×