ergonomie web-2-0-101205110427-phpapp02

L’ERGONOMIE D’UN SITE WEBCréez des sites web pensés pour les utilisateurs

et leur faciliter l’utilisation et l’action

La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :

DOUBLE CONSTAT

« Le constat est édifiant : un site sur deux est mal conçu, mal écrit et mal pensé.

Donc logiquement peu attrayant, peu vendeur et globalement peu efficace. »

Collectif, Ecrire et manager sa communication, EdiPro, 2008, p.78.

DOUBLE CONSTAT

« Le constat est édifiant : un site sur deux est mal conçu, mal écrit et mal pensé.

Donc logiquement peu attrayant, peu vendeur et globalement peu efficace. »

Collectif, Ecrire et manager sa communication, EdiPro, 2008, p.78.

« La plupart des sites actuels manquent encore de l’essentiel : un vrai souci des internautes, de qui ils sont et de leurs besoins. »

BOUCHER A., Ergonomie web - Pour des sites web efficaces, Eyrolles, Accès libre, 2009, p.XIV.

FAIRE UN BON SITE WEB ?

Seule certitude :

Jean-Claude Dusse (Michel Blanc) dans Les Bronzés, réalisé par Patrice Leconte, 1978.

Seule certitude :

« Sur un malentendu, ça peut marcher »

Jean-Claude Dusse (Michel Blanc) dans Les Bronzés, réalisé par Patrice Leconte, 1978.

Seule certitude :

« Sur un malentendu, ça peut marcher »

Oubliez !

1. Ce que vous croyez savoir

2. Ce qu’est l’ergonomie

3. L’internaute, un humain

4. L’ergonomie en pratique

5. Ressources

6. Conclusions

5. Ressources

6. Conclusions

Idées reçues

5. Ressources

6. Conclusions

Idées reçues

Définition

5. Ressources

6. Conclusions

Idées reçues

Définition

Règles générales

5. Ressources

6. Conclusions

Idées reçues

Définition

Règles générales

Règles pour le web

5. Ressources

6. Conclusions

Idées reçues

Définition

Règles générales

Règles pour le web

Documentation

1. CE QUE VOUS CROYEZ SAVOIR

10 idées reçues sur l’ergonomie

1. L’internaute est sot ou, au contraire, il sait tout

Enoncé

Un enfant de 10ans sait le faire, l’internaute aussi

L’internaute sait qu’en cliquant sur le logo, il reviendra à la page d’accueil

Enoncé

Contre-productivité :

Risques

Enoncé

1. Interfaces ultra-guidées ou simplifiées

Risques

Enoncé

1. Interfaces ultra-guidées ou simplifiées

2. Interfaces manquant d’intuitivité

Risques

1. Evitez de penser pour les internautes

2. Cherchez à connaître les utilisateurs de votre site pour l’adapter à leurs besoinsLe

malin !

1. Oubliez le « si ma grand-mère sait le faire »

malin !

1. Oubliez le « si ma grand-mère sait le faire »

2. Individualisez : visez le bien-être de vos internautes

malin !

2. Le mythe des 3 clics

Enoncé

L’information doit être accessible à l’utilisateur en 3 clics maximum

Enoncé

1. Personne au scénario ≠ utilisateur final

Risques

Enoncé

2. Multiplication des clics en cas d’erreur

Risques

Enoncé

2. Multiplication des clics en cas d’erreur

Risques

Source : BOUCHER A., ergonomie web, Eyrolles, 2009, p.19.

1. Les 3 clics ont aidé à une époque

2. Ils peuvent compliquer la navigationLe po

malin !

1. Le clic n’est pas un facteur pour quitter un site

malin !

2. Mieux vaut 2 clics simples qu’un clic compliqué

malin !

2. Mieux vaut 2 clics simples qu’un clic compliqué

3. Chaque clic doit être réfléchi et avoir un intérêtPens

malin !

3. Ergonomie et design graphique ne vont pas ensemble

Enoncé

L’ergonomie entrave la créativité du graphiste

Enoncé

1. Maquette ergonomique ≠ maquette graphique

Risques

Enoncé

1. Maquette ergonomique ≠ maquette graphique

2. Opposer ergonomie et graphisme

Risques

1. Sans graphisme, l’ergonomie est laide

2. Le graphisme vient renforcer l’ergonomieLe po

malin !

1. Agencez, séparez les zones, laissez respirer…

malin !

2. Faites des aller-retour graphisme / ergonomie

malin !

2. Faites des aller-retour graphisme / ergonomie

3. Sachez que l’esthétique influence la perceptionPens

malin !

4. L’ergonomie peut être gérée par n’importe qui

Enoncé

Un groupe de travail / quelqu’un en interne s’en occupe déjà

Enoncé

1. Dissoudre l’ergonomie dans la réflexion générale

Risques

Enoncé

1. Dissoudre l’ergonomie dans la réflexion générale

2. Biaiser par une perception subjective

Risques

1. Pensez « réflexion site web » + ergonomie

2. Une démarche en interne est utile mais ne remplace pas l’approche extérieure et objectiveLe

malin !

1. Ergonomie = analyse spécifique et autonome

malin !

1. Ergonomie = analyse spécifique et autonome

2. Ergonomie = approche objective

malin !

5. Un site ergonomique sinon rien

Enoncé

« Faites-moi un site ergonomique »

Enoncé

1. Croire que le site ergonomique existe

Risques

Enoncé

1. Croire que le site ergonomique existe

2. Croire qu’il existe une façon de faire

Risques

1. L’ergonomie se travaille au cas par cas

2. L’ergonomie est «objectivement subjective»Le po

malin !

1. Contextualisez : un internaute donné, à un instant donné, dans un contexte donné

malin !

1. Contextualisez : un internaute donné, à un instant donné, dans un contexte donné

2. Ciblez l’internaute dans sa pratique du sitePe

malin !

6. Les internautes lisent en F (Z ou E)

Enoncé

Le regard de l’internaute suit une trajectoire unique et prédéterminée

Enoncé

1. Croire aux schémas intellectuels de lecture

Risques

Enoncé

1. Croire aux schémas intellectuels de lecture

2. Se baser sur une règle sans fondement scientifique

Risques

1. Les habitudes conditionnent les réflexes

2. Les pages produisent les comportements (pas les internautes)Le

malin !

1. Apparence + animations –> parcours visuel

malin !

1. Apparence + animations –> parcours visuel

2. De haut en bas et de gauche à droite…

malin !

7. L’ergonomie, c’est le bon sens

Enoncé

L’ergonomie, ce n’est jamais que du bon sens

Enoncé

1. Penser que tout le monde a une démarche centrée utilisateur

Risques

Enoncé

1. Penser que tout le monde a une démarche centrée utilisateur

2. Réduire l’ergonomie au sens commun

Risques

1. Les sites web ne sont pas tous ergonomiques si ?

2. L’ergonomie est mal connue et mal compriseLe po

malin !

1. Chaque métier du web doit y être sensibilisé

malin !

1. Chaque métier du web doit y être sensibilisé

2. Une charte ergonomique concrétise l’approche

malin !

8. L’ergonomie sera gérée techniquement

Enoncé

L’ergonomie sera gérée par des effets techniques (Flash, Ajax, Web 2.0…)

Enoncé

1. Supposer que des technologies remplacent l’ergonomie

Risques

Enoncé

1. Supposer que des technologies remplacent l’ergonomie

2. Réduire l’ergonomie à des effets techniques

Risques

1. La technique vient soutenir l’ergonomie

2. Les normes et objectifs ergonomiques restent, peu importe la technologieLe

malin !

1. Réfléchissez d’abord à l’ergonomie

malin !

1. Réfléchissez d’abord à l’ergonomie

2. Aidez ensuite les internautes à les réaliser

malin !

9. Les internautes ne scrollent pas

Enoncé

Les internautes regardent la fenêtre courante et basta !

Enoncé

1. Postuler que les internautes sont paresseux

Risques

Enoncé

2. Penser qu’ils sont sots (cf. Point 1)

Risques

Enoncé

3. Croire que les écrans ont tous la même taille

Risques

1. Si le site répond aux attentes –> scroll ok !

2. Si le contenu est intéressant –> scroll ok ! Le po

malin !

1. Ne sacrifiez jamais un contenu intéressant sous prétexte que ça sera «trop long»

malin !

1. Ne sacrifiez jamais un contenu intéressant sous prétexte que ça sera «trop long»

2. Rendez l’information primordiale accessible au maximum sans scrollPe

malin !

10. L’ergonomie sera traitée en bout de projet

Enoncé

« Pour l’ergonomie, on verra à la fin »(en même temps que le référencement… [!])

Enoncé

Risques

Enoncé

Risques

Enoncé

3. Croire que les écrans ont tous la même taille

Risques

1. L’ergonomie est un processus

2. Mené tôt = intégration facile au projetLe po

malin !

1. Approche utilisateurs avant, pendant, et après !

malin !

1. Approche utilisateurs avant, pendant, et après !

2. Gagnez du temps et limitez les erreurs

malin !

2. CE QU’EST L’ERGONOMIE

1. Les différents niveaux de l’ergonomie

2. La «qualité web» ou e-qualité

Ergonomie générale

Interface homme-machine

Informatique

Source : http://ma-tvideo.france2.fr/video/iLyROoafvC4C.html

3. La qualité web ou e-qualité

1. Visibilité

2. Perception

3. Technique

4. Contenus

5. Services

1. Visibilité

2. Perception

3. Technique

4. Contenus

5. Services

Service visible et identifiable ?

1. Visibilité

2. Perception

3. Technique

4. Contenus

5. Services

Correctement perçu par l’utilisateur ?

1. Visibilité

2. Perception

3. Technique

4. Contenus

5. Services

Fonctionnement optimal et reproductible ?

1. Visibilité

2. Perception

3. Technique

4. Contenus

5. Services

Contenus de qualité ?

1. Visibilité

2. Perception

3. Technique

4. Contenus

5. Services

Contenus de qualité ?

Réalisation de services associés de qualité ?

1. Visibilité

1. Référencement

1. Visibilité

1. Référencement

2. Outils de recherche

1. Visibilité

1. Référencement

3. Positionnement

1. Visibilité

1. Référencement

3. Positionnement

4. Webmarketing

1. Visibilité

1. Référencement

3. Positionnement

4. Webmarketing

5. Mesure d’audience

1. Visibilité

1. Référencement

3. Positionnement

4. Webmarketing

5. Mesure d’audience

6. Communication

2. Perception

1. Utilisabilité ou usability

2. Perception

2. Ergonomie

2. Perception

2. Ergonomie

3. Design

2. Perception

2. Ergonomie

3. Design

4. Webdesign

2. Perception

2. Ergonomie

3. Design

4. Webdesign

5. Accessibilité

2. Perception

2. Ergonomie

3. Design

4. Webdesign

5. Accessibilité

6. Navigation

3. Technique

1. Sécurité

3. Technique

1. Sécurité

2. Hardware (matériel)

3. Technique

1. Sécurité

3. Hébergement

3. Technique

1. Sécurité

3. Hébergement

4. Qualité logicielle

3. Technique

1. Sécurité

3. Hébergement

5. Qualité du réseau

3. Technique

1. Sécurité

3. Hébergement

5. Qualité du réseau

6. Conformité technique

4. Contenu

1. Ligne éditoriale

4. Contenu

2. Rédaction

4. Contenu

2. Rédaction

3. Traduction, localisation

4. Contenu

2. Rédaction

4. Syndication

4. Contenu

2. Rédaction

4. Syndication

5. Fraîcheur

4. Contenu

2. Rédaction

4. Syndication

5. Fraîcheur

6. Nétiquette

5. E-services

1. Réponse aux e-mails

5. E-services

2. E-commerce

5. E-services

2. E-commerce

3. Services et e-services

5. E-services

2. E-commerce

4. E-logistique

5. E-services

2. E-commerce

4. E-logistique

5. Support, SAV, garantie

5. E-services

2. E-commerce

4. E-logistique

5. Support, SAV, garantie

6. Relation client/usager

3. L’INTERNAUTE, UN HUMAIN

1. Les principes de la Gestalt

2. La loi de Fitts

3. L’affordance

4. Le nombre magique de Miller et la loi de Hick

1. Loi de similarité

Si deux éléments sont similaires en taille et en forme (*), alors le cerveau les associera

(*) couleur et orientation comptent moins

2. Loi de proximité

Le cerveau associe des éléments visuels lorsqu’ils sont proches les uns des autres ou si les espaces entre eux sont équivalents.

3. Loi de bonne continuité

Nous préférons percevoir des formes continues en termes de formes, tailles et espacement formant un pattern plutôt que des changements abrupts.

4. Loi de clôture

Une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu’une forme ouverte.

4. Loi de clôture

5. Loi de symétrie

Un ensemble de formes sera mieux perçu si les formes composant l’ensemble sont symétriques entre elles.

4. Loi de clôture

2. La loi de Fitts

1. Les éléments clicables doivent être gros

2. La loi de Fitts

2. Les éléments clicables doivent être proches

2. La loi de Fitts

2. Les éléments clicables doivent être proches

Le temps mis pour atteindre une cible est proportionnel à sa distance et inversement proportionnel à sa taille

2. La loi de Fitts

3. L’affordance

1. Définition

3. L’affordance

1. Définition Possibilités d’action suggérées par les caractéristiques d’un objet

3. L’affordance

1. Définition Possibilités d’action suggérées par les caractéristiques d’un objet

3. L’affordance

2. Affordance web

3. L’affordance

2. Affordance web1. Cliquez-moi

2. Interagissez avec moi

1. Définition

1. Définition Au-delà de 7 objets, notre cerveau s’embrouille !

1. Définition

Au-delà de 7 objets, notre cerveau s’embrouille !

2. Middle-point De 5 à 9 éléments !

2. Middle-point

De 5 à 9 éléments !

3. Loi de Hick

3. Loi de HickIl est plus facile de décider parmi un nombre réduit d’éléments

5. Exercice

Analyse ergonomique de sites web

4. L’ERGONOMIE WEBEN PRATIQUE

1. Le cahier des charges

2. Un site lisible

3. Un site compréhensible

4. Un site rapide

5. Un site accessible

6. Les 10 ingrédients d’une page web ergonomique

1. Le cahier des charges

C’est la feuille de route de votre site web !

1. Généralités : nom du site, URL, cible, langues…

2. Equipe mobilisée : fonction, rôle, identité…

3. Fonctionnalités : ce que doit précisément faire le site + description des interactions avec l’internaute…

4. Graphisme : charte graphique, webdesign…

5. Technique : sécurité, fréquentation estimée…

6. Rétro-planning & budget

4. L’ERGONOMIE WEB EN PRATIQUE

2. Un site lisible

1. Ecrivez en minuscules

2. Utilisez des polices standard

3. Exploitez une taille de caractère 12 à 14px

4. Gérez les couleurs et la signalétique

5. Facilitez l’accès aux rubriques d’aide

3. Un site compréhensible

Cf. Ma présentation «communiquez pour le web» !

+ /!\ au son

+ Facilité à prendre contact

4. Un site rapide

1. Les éléments et contenus se chargent rapidement

2. L’internaute trouve rapidement ce qu’il cherche

3. Le moteur de recherche du site donne des résultats pertinents

5. Un site accessible

1. L’accessibilité technologique

2. L’accessibilité aux seniors et personnes moins valides

5. Un site accessible> 1. L’accessibilité technologique

Elle prend en compte :

1. Le système d’exploitation

2. Le navigateur

3. La résolution d’écran

4. Les logiciels et plug-in installés

2. Le navigateur

Qualité ergonomique d’une interface (norme ISO 9241)

1. Choix technologique à effectuer selon la cible visée

2. Notion de « dégradabilité » du site

5. Un site accessible> 2. L’accessibilité aux seniors et personnes moins valides

•US : 1999, Section 508 du Rehabilitation Act

•Europe : plans 2002 et 2005 confirment la priorité des actions à mener pour « lever toute forme de discrimination par Internet »

•UK : un utilisateur peut attaquer un site non accessible

Source : http://www.dailymotion.com/video/xb3kxy_maria-breffy-standard-et-secretaria_news

Différents handicaps à considérer :

• Visuels : daltonisme, cécité

• Auditifs : surdité

• Moteurs et psychologiques

Outils exploités pour répondre à ces handicaps :

• Toucher : afficheur braille, clavier virtuel

• Ouïe : synthèse vocale

Source : http://www.youtube.com/watch?v=SZ0bgMjYG_E&feature=related

La WAI (Web Accessibility Initiative) :

• Créée en 1997 par le W3C

• +500 membres

• A l’origine des WCAG (Web Content Accessibility Guidelines)

Les WCAG = 4 principes pour les contenus web accessibles :

• Perceptibles

• Utilisables

• Compréhensibles

• Robustes

Les contenus doivent être perceptibles :

• Tout contenu multimédia doit proposer une alternative textuelle

• Exemple :

• <img src=“fichier.jpg” alt=“” />

Les contenus doivent être utilisables :

• Tout contenu multimédia doit être accessible par l’utilisation du clavier ou d’un autre dispositif adapté

• Exemple :

• <a href=“lien.html” tabindex=“n“>

• n = ordre de la tabulation

Les contenus doivent être compréhensibles :

• Tout contenu doit être compréhensible par tous

• Exemple :

• Aides pour guider la navigation

• Explications des erreurs de navigation

Les contenus doivent être « robustes » :

• Le contenu ne doit pas être altéré par un tiers

1. Charte graphique: logo, baseline, slogan, design en grille

1. Charte graphique: logo, baseline, slogan, design en grille2. Langues

1. Charte graphique: logo, baseline, slogan, design en grille2. Langues3. Cibles

1. Charte graphique: logo, baseline, slogan, design en grille2. Langues3. Cibles4. Navigation

1. Charte graphique: logo, baseline, slogan, design en grille2. Langues3. Cibles4. Navigation5. Moteur de recherche interne

1. Charte graphique: logo, baseline, slogan, design en grille2. Langues3. Cibles4. Navigation5. Moteur de recherche interne6. Fil d’Ariane

1. Charte graphique: logo, baseline, slogan, design en grille2. Langues3. Cibles4. Navigation5. Moteur de recherche interne6. Fil d’Ariane7. Mise en évidence de la page en cours

1. Charte graphique: logo, baseline, slogan, design en grille2. Langues3. Cibles4. Navigation5. Moteur de recherche interne6. Fil d’Ariane7. Mise en évidence de la page en cours8. Facilite de retour la page d'accueil

1. Charte graphique: logo, baseline, slogan, design en grille2. Langues3. Cibles4. Navigation5. Moteur de recherche interne6. Fil d’Ariane7. Mise en évidence de la page en cours8. Facilite de retour la page d'accueil9. Facilite d'accès aux rubriques d’aide

1. Charte graphique: logo, baseline, slogan, design en grille2. Langues3. Cibles4. Navigation5. Moteur de recherche interne6. Fil d’Ariane7. Mise en évidence de la page en cours8. Facilite de retour la page d'accueil9. Facilite d'accès aux rubriques d’aide10. Coordonnées de contact ou lien visible vers la rubrique

5. RESSOURCES

www.ergolab.net • www.ergologique.com • www.ergonomie-web.com • blog.webatou.info • blog-ergonomieweb.com

6. CONCLUSIONSMERCI ET VOS QUESTIONS

1. En guise de conclusion

2. Merci et vos questions

1. L’ergonomie ne s’improvise pas

2. L’ergonomie excède le web et nous concerne au quotidien

3. L’ergonomie concerne bien plus que le layout du site

4. Un site ergonomique tient compte des attentes des internautes

5. Un site ergonomique impose le moins possible de contraintes à l’utilisateur

6. CONCLUSIONS, MERCI ET VOS QUESTIONS

1. En guise de conclusion

6. CONCLUSIONS, MERCI ET VOS QUESTIONS

2. Merci et vos questions

Crédit images : www.sxc.hu

Merci de votre attention !Je réponds avec plaisir à vos questions.

Fred Colantonio+32 486 99 58 68contact@fredcolantonio.bewww.fredcolantonio.be

: : FredColantonio

ergonomie web-2-0-101205110427-phpapp02

Documents

presentationdelaloidefinances2012 120131042531-phpapp02

ergonomie accessibilite-contenus-web-111027213630-phpapp02

1cascliniquehypereosinof 100509193936-phpapp02

tutorielnatpat 120218122614-phpapp02

coursmtallurgie 111011084551-phpapp02

graphinfl 121126142407-phpapp02

05principedumoteur 120112021830-phpapp02

owasptunisiawebday2011 120112072523-phpapp02

comptabilitgnraledesentreprisesmarocainestome1et2...

5qualite 111224082458-phpapp02

bienchercherunemploi 131009022654-phpapp02

bordeauxreseauxsociaux1 091103075039-phpapp02

lepasscompos 110321090054-phpapp02

lecomportementduconsommateurenverslesproduitsdelafranchise...

3nouveautesmoodle2v1 111219173259-phpapp02

guidedescentresdappelsoffshore 100420045145-phpapp02

livejournalspkib 090429085505 phpapp02

stfrancepresentation1 100508060424-phpapp02

gestiondecrisedanslesrseauxsociaux20100316f...

decrireunepersone 121007225823-phpapp02