SlideShare une entreprise Scribd logo
1  sur  105
L’ergonomie des interfaces
Licences Bac +3, Cs2i de Nevers
C’est qui ?
Renaud Biemans
UX Designer
Clermont-Ferrand
L’ergonomie
L’ergonomie
C’est quoi ?
Adapter l’outil à l’utilisateur
Et non l’inverse
Définition selon Steve Krug
Faire en sorte que ça marche bien et qu’une personne
moyenne sans compétences ou expérience puisse l'utiliser
sans être frustrée
Bien
ou
Pas bien ?
L’ergonomie
Pourquoi ?
Utilisateur heureux
Utilisateur heureux
Produit fructueux
Une mauvaise expérience utilisateur peut
faire échouer n’importe quel projet
Mais aussi en assurer le succès!
Demandez vous quel navigateur vous utilisez et pourquoi ?
Les besoins de l’être humain
D’après Maslow
Les besoins de l’utilisateur
Fonctionnel
Mémorable
L’ergonomie
C’est pour qui ?
Chef de projet
Graphiste
Développeur
Mais qui se soucie de l’utilisateur ?
Il faut que tout le monde s’en soucie
À commencer par vous
Vous avez déjà la responsabilité des 2 premières couches de
la pyramide. Vous êtes donc en première ligne.
Les 5 règles de
l’ergonome
Une réponse approximative au bon problème
vaudra toujours mieux
qu’une bonne réponse à un problème approximatif.
John Tukey
Règle 1
Se concentrer sur le besoin
de l’utilisateur
Les mises à jour : Un problème de développeur que l’on
impose trop souvent à l’utilisateur
Règle 2
Surtout du bon-sens
Règle 3
Simplifier, Simplifier, Simplifier
Règle 3
Simplifier, Simplifier, Simplifier
Règle 4
Soyez humain
Interface homme-machine
Les mauvais exemples
Les bons exemples
La plupart des ordinateurs ont un indicateur de
veille purement fonctionnel
Chez Apple on utilise une veilleuse qui imite le
rythme de la respiration humaine
Règle 5
Se remettre en question
« C'est le propre de l'homme de se tromper
seul l'insensé persiste dans son erreur. »
Cicéron
Produire
TesterApprendre
Les règles de
l’utilisateur
Les règles de
l’utilisateur
La
JE NE
VEUX PAS
RÉFLÉCHIR
!
JE NE
VEUX PAS
RÉFLÉCHIR
!
JE NE
VEUX PAS
RÉFLÉCHIR
!
JE NE
VEUX PAS
RÉFLÉCHIR
!
JE NE
VEUX PAS
RÉFLÉCHIR
!
JE NE
VEUX PAS
RÉFLÉCHIR
!
LA règle de l’utilisateur
Je ne veux pas réfléchir
• Tout doit être facile
• Je ne lis que ce qui m’intéresse
• Je clique en me fiant à mon instinct
• Si c’est trop compliqué je ne l’utilise pas
Ce que vous concevez
En pensant que l’utilisateur lira tout
Ce que l’utilisateur voit
avant de décider votre site l’intéresse
De quoi parle ce site ?
Ce qui se passe
dans la tête de
l’utilisateur ?
Réserve de bonne volonté
Résistance à l’agacement
Où sont les
souris ?!
Ah les voilà
C’est quoi tout ça ?
Je veux juste une belle
souris
Peut être en
dessous ?
C’est même pas des
souris !!!
Continuer sur un autre site ? Oui Non
Vous savez tout !
Les 5 règles de l’ergonome
1. Se concentrer sur l’utilisateur
2. Faire preuve de bon sens
3. Simplifier
4. Rester humain
5. Se remettre en question
La règle de l’utilisateur
1. Je ne veux pas réfléchir
Tout doit être facile
Je ne lis que ce qui m’intéresse
Je clique en me fiant à mon instinct
Si c’est trop compliqué je ne l’utilise pas
Renaud Biemans
UX Designer
renaudbiemans@gmail.com

Contenu connexe

En vedette

Les réseaux sociaux, les bons choix et les moins bons
Les réseaux sociaux, les bons choix et les moins bonsLes réseaux sociaux, les bons choix et les moins bons
Les réseaux sociaux, les bons choix et les moins bonsAvignon Delta Numérique
 
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...Flupa
 
Prévention du mal de dos et des TMS (Par François Stévignon)
Prévention du mal de dos et des TMS (Par François Stévignon)Prévention du mal de dos et des TMS (Par François Stévignon)
Prévention du mal de dos et des TMS (Par François Stévignon)Jean-Xtophe Ordonneau
 
Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEOSébastien Delorme
 
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...Bertrand Cochet
 
Conseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numériqueConseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numériqueClaire Bizingre
 
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...Claire Bizingre
 
Lois de la Gestalt et Webdesign
Lois de la Gestalt et WebdesignLois de la Gestalt et Webdesign
Lois de la Gestalt et WebdesignMC Casal
 
Ergonomie et accessibilité du Web
Ergonomie et accessibilité du WebErgonomie et accessibilité du Web
Ergonomie et accessibilité du WebGenève Lab
 
L'ergonomie d'un site web par Fred Colantonio
L'ergonomie d'un site web par Fred ColantonioL'ergonomie d'un site web par Fred Colantonio
L'ergonomie d'un site web par Fred ColantonioJ'ai besoin de com
 
Ergonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site webErgonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site webLaurent Mottet
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesRodolphe Finamore
 
Tms ssst cambrai dr thorez
Tms ssst cambrai dr thorezTms ssst cambrai dr thorez
Tms ssst cambrai dr thorezPhilippe Porta
 
Ergonomie web & interface tactile
Ergonomie web & interface tactileErgonomie web & interface tactile
Ergonomie web & interface tactileIdnetInfo
 
Ergonomie des applications web
Ergonomie des applications webErgonomie des applications web
Ergonomie des applications webmadsgraphics
 
Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)Raphael De Robiano
 
éValuation site web en 20 points tactic direct
éValuation site web en 20 points tactic directéValuation site web en 20 points tactic direct
éValuation site web en 20 points tactic directtacticdirect
 

En vedette (20)

Les réseaux sociaux, les bons choix et les moins bons
Les réseaux sociaux, les bons choix et les moins bonsLes réseaux sociaux, les bons choix et les moins bons
Les réseaux sociaux, les bons choix et les moins bons
 
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
Ergonomie et Accessibilité sont dans un bateau : comment ramer dans la même d...
 
Prévention du mal de dos et des TMS (Par François Stévignon)
Prévention du mal de dos et des TMS (Par François Stévignon)Prévention du mal de dos et des TMS (Par François Stévignon)
Prévention du mal de dos et des TMS (Par François Stévignon)
 
Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEO
 
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
[Atelier LCDW] Ergonomie et Expérience Utilisateur pour en finir avec les myt...
 
Gestalt
GestaltGestalt
Gestalt
 
Conseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numériqueConseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numérique
 
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
 
Lois de la Gestalt et Webdesign
Lois de la Gestalt et WebdesignLois de la Gestalt et Webdesign
Lois de la Gestalt et Webdesign
 
Ergonomie et accessibilité du Web
Ergonomie et accessibilité du WebErgonomie et accessibilité du Web
Ergonomie et accessibilité du Web
 
L'ergonomie d'un site web par Fred Colantonio
L'ergonomie d'un site web par Fred ColantonioL'ergonomie d'un site web par Fred Colantonio
L'ergonomie d'un site web par Fred Colantonio
 
Ergonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site webErgonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site web
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapes
 
Tms ssst cambrai dr thorez
Tms ssst cambrai dr thorezTms ssst cambrai dr thorez
Tms ssst cambrai dr thorez
 
Ergonomie web & interface tactile
Ergonomie web & interface tactileErgonomie web & interface tactile
Ergonomie web & interface tactile
 
Ergonomie des applications web
Ergonomie des applications webErgonomie des applications web
Ergonomie des applications web
 
Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
 
éValuation site web en 20 points tactic direct
éValuation site web en 20 points tactic directéValuation site web en 20 points tactic direct
éValuation site web en 20 points tactic direct
 
Evaluation site
Evaluation siteEvaluation site
Evaluation site
 
Ergonomie d'un site
Ergonomie d'un siteErgonomie d'un site
Ergonomie d'un site
 

Similaire à Ergonomie des interfaces web

The Agilists ou "Duo de retour d’expérience sauce aigre douce"
The Agilists ou "Duo de retour d’expérience sauce aigre douce"The Agilists ou "Duo de retour d’expérience sauce aigre douce"
The Agilists ou "Duo de retour d’expérience sauce aigre douce"Bruno Sbille
 
Les 7 Erreurs.pdf
Les 7 Erreurs.pdfLes 7 Erreurs.pdf
Les 7 Erreurs.pdfEgmo2
 
Développer en mode kick-ass à Devoxx France
Développer en mode kick-ass à Devoxx FranceDévelopper en mode kick-ass à Devoxx France
Développer en mode kick-ass à Devoxx FranceSamuel Le Berrigaud
 
Développer en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum DayDévelopper en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum DaySamuel Le Berrigaud
 
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéGuillaume Abel
 
Comment construire une relation solide avec ses lecteurs ? - Campus Made in B...
Comment construire une relation solide avec ses lecteurs ? - Campus Made in B...Comment construire une relation solide avec ses lecteurs ? - Campus Made in B...
Comment construire une relation solide avec ses lecteurs ? - Campus Made in B...Made in
 
Ca va marcher je l'ai lu dans un livre @agilenantes
Ca va marcher je l'ai lu dans un livre @agilenantesCa va marcher je l'ai lu dans un livre @agilenantes
Ca va marcher je l'ai lu dans un livre @agilenantesPatrick Roux
 
Agile Tour Nantais 2022 - Meconnaissances quelles valeurs v1.1- Maxime Guyaux...
Agile Tour Nantais 2022 - Meconnaissances quelles valeurs v1.1- Maxime Guyaux...Agile Tour Nantais 2022 - Meconnaissances quelles valeurs v1.1- Maxime Guyaux...
Agile Tour Nantais 2022 - Meconnaissances quelles valeurs v1.1- Maxime Guyaux...Maxime Guyaux
 
The Agilists Agile Tour Bordeaux
The Agilists Agile Tour BordeauxThe Agilists Agile Tour Bordeaux
The Agilists Agile Tour BordeauxBruno Sbille
 
Le Guide 'Identité Numérique
Le Guide 'Identité NumériqueLe Guide 'Identité Numérique
Le Guide 'Identité NumériqueSabrina Xenofontos
 
Aliaz - Blog du Modérateur- Régions job (Eds) Guide de l'identité numérique
Aliaz - Blog du Modérateur- Régions job (Eds) Guide de l'identité numériqueAliaz - Blog du Modérateur- Régions job (Eds) Guide de l'identité numérique
Aliaz - Blog du Modérateur- Régions job (Eds) Guide de l'identité numériqueDaniel Dufourt
 
L'effet Cupcake
L'effet CupcakeL'effet Cupcake
L'effet CupcakeTP1
 
Satisfaction: La différence entre les Robots et les Humains
Satisfaction: La différence entre les Robots et les HumainsSatisfaction: La différence entre les Robots et les Humains
Satisfaction: La différence entre les Robots et les HumainsTP1
 
Atelier agile 2009_09_27
Atelier agile 2009_09_27Atelier agile 2009_09_27
Atelier agile 2009_09_27domidp
 
Guide identité numérique
Guide identité numériqueGuide identité numérique
Guide identité numériquepw44
 
Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Jean Claude GROSJEAN
 
"Power to the people" : ne vous mettez plus à la place de vos utilisateurs, é...
"Power to the people" : ne vous mettez plus à la place de vos utilisateurs, é..."Power to the people" : ne vous mettez plus à la place de vos utilisateurs, é...
"Power to the people" : ne vous mettez plus à la place de vos utilisateurs, é...david marquié
 

Similaire à Ergonomie des interfaces web (20)

The agilists
The agilistsThe agilists
The agilists
 
The Agilists ou "Duo de retour d’expérience sauce aigre douce"
The Agilists ou "Duo de retour d’expérience sauce aigre douce"The Agilists ou "Duo de retour d’expérience sauce aigre douce"
The Agilists ou "Duo de retour d’expérience sauce aigre douce"
 
Les 7 Erreurs.pdf
Les 7 Erreurs.pdfLes 7 Erreurs.pdf
Les 7 Erreurs.pdf
 
Développer en mode kick-ass à Devoxx France
Développer en mode kick-ass à Devoxx FranceDévelopper en mode kick-ass à Devoxx France
Développer en mode kick-ass à Devoxx France
 
Développer en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum DayDévelopper en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum Day
 
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
 
Comment construire une relation solide avec ses lecteurs ? - Campus Made in B...
Comment construire une relation solide avec ses lecteurs ? - Campus Made in B...Comment construire une relation solide avec ses lecteurs ? - Campus Made in B...
Comment construire une relation solide avec ses lecteurs ? - Campus Made in B...
 
Ca va marcher je l'ai lu dans un livre @agilenantes
Ca va marcher je l'ai lu dans un livre @agilenantesCa va marcher je l'ai lu dans un livre @agilenantes
Ca va marcher je l'ai lu dans un livre @agilenantes
 
Agile Tour Nantais 2022 - Meconnaissances quelles valeurs v1.1- Maxime Guyaux...
Agile Tour Nantais 2022 - Meconnaissances quelles valeurs v1.1- Maxime Guyaux...Agile Tour Nantais 2022 - Meconnaissances quelles valeurs v1.1- Maxime Guyaux...
Agile Tour Nantais 2022 - Meconnaissances quelles valeurs v1.1- Maxime Guyaux...
 
The Agilists Agile Tour Bordeaux
The Agilists Agile Tour BordeauxThe Agilists Agile Tour Bordeaux
The Agilists Agile Tour Bordeaux
 
Le Guide 'Identité Numérique
Le Guide 'Identité NumériqueLe Guide 'Identité Numérique
Le Guide 'Identité Numérique
 
Aliaz - Blog du Modérateur- Régions job (Eds) Guide de l'identité numérique
Aliaz - Blog du Modérateur- Régions job (Eds) Guide de l'identité numériqueAliaz - Blog du Modérateur- Régions job (Eds) Guide de l'identité numérique
Aliaz - Blog du Modérateur- Régions job (Eds) Guide de l'identité numérique
 
L'effet Cupcake
L'effet CupcakeL'effet Cupcake
L'effet Cupcake
 
Satisfaction: La différence entre les Robots et les Humains
Satisfaction: La différence entre les Robots et les HumainsSatisfaction: La différence entre les Robots et les Humains
Satisfaction: La différence entre les Robots et les Humains
 
Atelier agile 2009_09_27
Atelier agile 2009_09_27Atelier agile 2009_09_27
Atelier agile 2009_09_27
 
Guide identité numérique
Guide identité numériqueGuide identité numérique
Guide identité numérique
 
Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009
 
Genma petit guide_d_hygiene_numerique
Genma petit guide_d_hygiene_numeriqueGenma petit guide_d_hygiene_numerique
Genma petit guide_d_hygiene_numerique
 
"Power to the people" : ne vous mettez plus à la place de vos utilisateurs, é...
"Power to the people" : ne vous mettez plus à la place de vos utilisateurs, é..."Power to the people" : ne vous mettez plus à la place de vos utilisateurs, é...
"Power to the people" : ne vous mettez plus à la place de vos utilisateurs, é...
 
Breizh campux
Breizh campuxBreizh campux
Breizh campux
 

Dernier

presentation l'interactionnisme symbolique finale.pptx
presentation l'interactionnisme symbolique  finale.pptxpresentation l'interactionnisme symbolique  finale.pptx
presentation l'interactionnisme symbolique finale.pptxMalikaIdseaid1
 
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptxSAID MASHATE
 
SUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptx
SUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptxSUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptx
SUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptxssuserbd075f
 
Présentation de cartes d'extension zhr..pptx
Présentation de cartes d'extension zhr..pptxPrésentation de cartes d'extension zhr..pptx
Présentation de cartes d'extension zhr..pptxpopzair
 
Cours-irrigation_et_drainage_cours1.pptx
Cours-irrigation_et_drainage_cours1.pptxCours-irrigation_et_drainage_cours1.pptx
Cours-irrigation_et_drainage_cours1.pptxlamourfrantz
 
Formation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadershipFormation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadershipM2i Formation
 
systeme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertsysteme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertChristianMbip
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...Faga1939
 
Mécanique Automobile LE TURBOCOMPRESSEUR.ppt
Mécanique Automobile LE TURBOCOMPRESSEUR.pptMécanique Automobile LE TURBOCOMPRESSEUR.ppt
Mécanique Automobile LE TURBOCOMPRESSEUR.pptssusercbaa22
 
Bolero. pptx . Film de A nnne Fontaine
Bolero. pptx . Film   de  A nnne FontaineBolero. pptx . Film   de  A nnne Fontaine
Bolero. pptx . Film de A nnne FontaineTxaruka
 
Formation M2i - Intelligence Artificielle Comment booster votre productivité ...
Formation M2i - Intelligence Artificielle Comment booster votre productivité ...Formation M2i - Intelligence Artificielle Comment booster votre productivité ...
Formation M2i - Intelligence Artificielle Comment booster votre productivité ...M2i Formation
 
MICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdf
MICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdfMICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdf
MICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdfssuser40e112
 
Boléro. pptx Film français réalisé par une femme.
Boléro.  pptx   Film   français   réalisé  par une  femme.Boléro.  pptx   Film   français   réalisé  par une  femme.
Boléro. pptx Film français réalisé par une femme.Txaruka
 
gestion des conflits dans les entreprises
gestion des  conflits dans les entreprisesgestion des  conflits dans les entreprises
gestion des conflits dans les entreprisesMajdaKtiri2
 
Grammaire pour les élèves de la 6ème.doc
Grammaire pour les élèves de la  6ème.docGrammaire pour les élèves de la  6ème.doc
Grammaire pour les élèves de la 6ème.docKarimKhrifech
 
Sidonie au Japon . pptx Un film français
Sidonie    au   Japon  .  pptx  Un film françaisSidonie    au   Japon  .  pptx  Un film français
Sidonie au Japon . pptx Un film françaisTxaruka
 
MaintenanceLa Maintenance Corrective.ppt
MaintenanceLa Maintenance Corrective.pptMaintenanceLa Maintenance Corrective.ppt
MaintenanceLa Maintenance Corrective.pptssusercbaa22
 
présentation sur l'échafaudage dans des travaux en hauteur
présentation sur l'échafaudage dans des travaux en hauteurprésentation sur l'échafaudage dans des travaux en hauteur
présentation sur l'échafaudage dans des travaux en hauteurdinaelchaine
 

Dernier (20)

presentation l'interactionnisme symbolique finale.pptx
presentation l'interactionnisme symbolique  finale.pptxpresentation l'interactionnisme symbolique  finale.pptx
presentation l'interactionnisme symbolique finale.pptx
 
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
 
Pâques de Sainte Marie-Euphrasie Pelletier
Pâques de Sainte Marie-Euphrasie PelletierPâques de Sainte Marie-Euphrasie Pelletier
Pâques de Sainte Marie-Euphrasie Pelletier
 
SUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptx
SUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptxSUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptx
SUPPORT DE SUR COURS_GOUVERNANCE_SI_M2.pptx
 
Présentation de cartes d'extension zhr..pptx
Présentation de cartes d'extension zhr..pptxPrésentation de cartes d'extension zhr..pptx
Présentation de cartes d'extension zhr..pptx
 
Cours-irrigation_et_drainage_cours1.pptx
Cours-irrigation_et_drainage_cours1.pptxCours-irrigation_et_drainage_cours1.pptx
Cours-irrigation_et_drainage_cours1.pptx
 
Formation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadershipFormation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadership
 
systeme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertsysteme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expert
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
 
Mécanique Automobile LE TURBOCOMPRESSEUR.ppt
Mécanique Automobile LE TURBOCOMPRESSEUR.pptMécanique Automobile LE TURBOCOMPRESSEUR.ppt
Mécanique Automobile LE TURBOCOMPRESSEUR.ppt
 
Bolero. pptx . Film de A nnne Fontaine
Bolero. pptx . Film   de  A nnne FontaineBolero. pptx . Film   de  A nnne Fontaine
Bolero. pptx . Film de A nnne Fontaine
 
Formation M2i - Intelligence Artificielle Comment booster votre productivité ...
Formation M2i - Intelligence Artificielle Comment booster votre productivité ...Formation M2i - Intelligence Artificielle Comment booster votre productivité ...
Formation M2i - Intelligence Artificielle Comment booster votre productivité ...
 
MICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdf
MICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdfMICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdf
MICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdf
 
Boléro. pptx Film français réalisé par une femme.
Boléro.  pptx   Film   français   réalisé  par une  femme.Boléro.  pptx   Film   français   réalisé  par une  femme.
Boléro. pptx Film français réalisé par une femme.
 
Evaluación Alumnos de Ecole Victor Hugo
Evaluación Alumnos de Ecole  Victor HugoEvaluación Alumnos de Ecole  Victor Hugo
Evaluación Alumnos de Ecole Victor Hugo
 
gestion des conflits dans les entreprises
gestion des  conflits dans les entreprisesgestion des  conflits dans les entreprises
gestion des conflits dans les entreprises
 
Grammaire pour les élèves de la 6ème.doc
Grammaire pour les élèves de la  6ème.docGrammaire pour les élèves de la  6ème.doc
Grammaire pour les élèves de la 6ème.doc
 
Sidonie au Japon . pptx Un film français
Sidonie    au   Japon  .  pptx  Un film françaisSidonie    au   Japon  .  pptx  Un film français
Sidonie au Japon . pptx Un film français
 
MaintenanceLa Maintenance Corrective.ppt
MaintenanceLa Maintenance Corrective.pptMaintenanceLa Maintenance Corrective.ppt
MaintenanceLa Maintenance Corrective.ppt
 
présentation sur l'échafaudage dans des travaux en hauteur
présentation sur l'échafaudage dans des travaux en hauteurprésentation sur l'échafaudage dans des travaux en hauteur
présentation sur l'échafaudage dans des travaux en hauteur
 

Ergonomie des interfaces web

Notes de l'éditeur

  1. Bonjour à tous Je me présente, je m’appelle Renaud Biemans, je suis votre intervenant pour ces deux jour et nous allons parler de l’ergonomie des interfaces
  2. Je me présente rapidement, je travail comme ergonome à Clermont-Ferrand dans une société qui édite des logiciels pour l’industrie. Bien que ce soit un logiciel extrêmement complet et novateur et ses créateurs se sont rendu compte que beaucoup de fonctionnalités étaient sous-utilisées. Mon rôle est donc de rendre toutes les fonctions du logiciels accessible au plus grand nombre.
  3. Ok c’est parti
  4. Première question toute légitime, qu’est ce que l’ergonomie ? (si ils ne réponde pas, préciser) Je ne vous demande pas la def du dico mais pour vous, qu’est ce que ça vous évoque ?
  5. Et ajouter que ça ne s’applique pas qu’aux interfaces. L’ergonomie s’appliquait à tous les outils du quotidien
  6. Un marteau c’est l’exemple de l’objet ergonomique, c’est adapaté à l’utilisation que l’on doit en faire
  7. Le mug aussi est assez pratique, on sait immédiatement comment s’en servir, il n’y a pas de superflu
  8. C’est ergonomique et innovant
  9. C’est assez rapide et largement répandu ce qui est un avantage mais le branchement est tout sauf ergonomique : - Impossible de savoir de l’extérieur quel sens est le bon
  10. Pas bien mais ça dépend du contexte, Champolion n’aurait pas de difficulté par exemple
  11. On se rapproche de notre sujet
  12. Le captcha, Pas pratique Ici, caractère non lisibles Il ne faut pas croire que c’est e seul moyen de différencier des humain des robots Exemple du timer
  13. Deuxième question, à quoi sert l’ergonomie ? Rendre les utilisateurs plus efficaces et plus heureux
  14. Bonne réponse Mais a quoi ça sert de rendre des utilisateurs heureux . Ça rend les utilisateurs plus efficaces et plus heureux
  15. Et bien rendre ls utilisateurs heureux c’est tout simplement le meilleur business model qui soit Vous aurez beaeu sortir un produit et passer des millions en marketing, ça restera un flop
  16. On ne compte plus les échecs commerciaux liés à une mauvaise ergonomie. Si ce n’est pas facile à utiliser, on ne l’utilise pas
  17. On va prendre un exemple concret en faisant un petit match : chrome versus Internet explorer Qui parmi vous utilise Chrome comme navigateur principal, IE ? Et bien le reste du monde aussi. Ce n’est pas grace à la pub que chrome s’est imposé, c’est parce qu’il est le meilleur Donc l’ergonomie et la qualité du projet décide de son succès Mais est ce que ce n’est lié qu’à l’ergonomie ? Non, aussi à la performance, la stabilité, … beaucoup de paramètres Donc l’ergonomie de suffit pas, pour plaire à l’utilisateur il faut énormément de choses dont l’ergonomie n’est qu’une portion.
  18. Vous connaissez peut être déjà la pyramide de maslow
  19. et bien voici la pyramide adapté à l’utilisateur Qui décrit les besoins de l’utilisateur Présenter les fonctions 1 a une En tant que dev vous pouvez vous occuper des 3 premiers, c’est déjà très important Exemple « le bon coin » Ebay Et la plupart des site se plantent au niveau de l’ergonomie Mais vous voyez l’ergonomie ce n’est qu’une petite partie de ce qui compte
  20. L’autoroute est une solution ergonomique : Les voies sont séparées = sécurité Très bonne visibilité On roule vite On peut manger et repartir rapidement
  21. Une jolie route de campagne constitue une expérience bien plus agréable et mémorable Mais moins pratique Donc le top serait d’avoir une route aussi efficace que l’autoroute et aussi agréable que le chemin de campagne
  22. Enfin, l’ergonomie qui s’en charge ?
  23. He ben jusqu’à maintenant pas grand monde Le travail se divise entre les chef de projet , le marketing, les designers et les développeurs Le problème c’est que chacun de ces profils à d’autres idées en tête quand il voit un nouveau projet
  24. Pour le chef de projet, c’est un planning et des ressources à tenir si il veut que le big boss soit fier de lui
  25. Pour le designer c’est l’occasion de laisser parler sa créativité et de créer une vraie œuvre d’art
  26. Pour le développeur c’est l’occasion d’exprimer son savoir faire et de se lancer de nouveau défi
  27. Je caricature bien sur mais dans tout ça qui se soucie de l’utilisateur ? Qui se soucie que ce soit simple ?
  28. Si ce n’est pas eux, ça doit être vous
  29. On attaque le vif du sujet. Il y a peu de choses à savoir mais ça vous permettra de déduire beaucoup de chose
  30. John rtukey est un des plus grands statisticien du 20ème siècle c’est que le plus important est de bien définir le probleme et de se concentrer sur la solution et le vrai probleme dans notre cas c’est l’utilisateur, tout le projet ne sert qu’à le contenter donc il ne faut jamais l’oublier.
  31. La meilleure manière de se concentrer dessus c’est de se mettre à sa place. Oubliez que vous êtes développeur, designer ou CdP. Vous êtes juste un utilisateur qui arrive sur le site pour la première fois. Que voulez vous ?
  32. Les plus grands succès technologique on vu le jour comme ça. Vous connaissez l’histoire du walkman, je suis pas sur que vous en ayez utilisé mais c’est le patron de sony qui jouait au golf et qui a demandé a ses ingénieurs de trouver une solution pour qu’il puisse écouter la musique. Ils s’est comporté comme un utilisateur capricieux.
  33. Un autre bon exemple c’est celui de la tente décathlon qui se déplie en 2sec. Avant ça les ingénieurs avaient inventé des tiges en fibre de verre avec un système de clipsage. Ils se sont mis à la place des utilisateur et il se sont dit, j’aimerai prendre ma tente et pchuit…qu’elle soit prête
  34. Et dans un domaine qui nous concerne plus, l’exemple des mise à jour. Personne n’aime faire des mises à jour. Si c’est mieux tu l’installes sinon tu l’installe pas. Et chrome par exemple a complètement eradiqué les mises à jour et c’est tant mieux. Tout ce qui saoule les utilisateur aura bientôt disparu
  35. C’est ça qui est beau avec l’ergonomie c’est qu’en réfléchissant et en vous basant sur votre expérience vous pouvez déduire énormément de chose. Steve Krug, un des plus grand spécialiste de l’ergonomie web dit qu’il a un Master en bon-sens. On en a pas forcément tous autant mais a force de se questionner ça se développe vite
  36. Donc un petit exemple tout simple, le champ de recherche. Selon vous, quel est le plus simple ? Le 3 effectivement, pourquoi ? Moins de texte à lire Action directement positionnée sur le bouton Plus simple et plusintuitif. Bon est ce qu’il y a besoin d’etre ergonome pour ça ? Non Il suffit de se poser la question
  37. Bon comme vous êtes fort, un peu plus difficile Solution 3, la plus épurée et le bouton suffit pour savoir quelle action est effectuée
  38. Le principale reproche que l’on fait aux site c’est qu’ils sont trop compliqués à utiliser et la plupart du temps la solution réside dans la simplification. Vous savez pourquoi Google a percé avec son moteur de recherche ? Parce qu’a l’époque ça ressemblait à ça
  39. Et ils en ont barré 2 Tout est dit.
  40. Parce qu’avant la recherche ressemblait
  41. Ou à ça
  42. Et que google a proposé ça Il y avait juste ce dont on avait besoin, on était pas agressé à l’ouverture de la page Et ça charge très vite Donc tout le monde en a fait sa page de démarrage
  43. Et tout va dans le même sens. On a souvent l’impression que l’utilisateur veut avoir le choix, en réalité il préfère que ce soit le plus simple possible
  44. Par ce qu’on parle beaucoup d’interface homme-machine mais le problème dans les interface homme machine …
  45. c’est la machine
  46. Quand vous utilisez internet, imaginez que vous êtes dans la vraie vie, que l’application ou le site est une personne et vous verrez immédiatement ce qui cloche. Je vais vous montrer une petite vidéo de Google qui illustre ça parfaitement
  47. Alors il y a des marques qui essaye de simuler l’interaction humaine sur leur site mais c’est généralement complètement raté Plus énervant qu’une machine, c’est une machine qui veut se faire passer pour un humain
  48. Quand vous n’avez pas de connexion, Google chrome vous affiche un dinosaure pour faire allusion à la préhistoire Un logiciel qui vous charie, c’est fun non ?
  49. Dans la manière de parler au gens aussi il faut mettre un peu de vie
  50. Ça se joue beaucoup sur les message d’erreur aussi. Dans la manière de communiquer avec l’utilisateur
  51. Enfin un dernier exemple qui achèvera de vous convaincre Google et Apple sont très fort pour ça Sur n’importe quel ordi vous avez une petit lumière qui clignote quand il est en veille, c’est bien, c’est ergonomique
  52. Apple est allé beaucoup plus loin car la led va scintiller très lentement et son rythme est basé sur la respiration humaine au repos. On a donc instinctivement l’impression que l’ordinateur dort. En plus d’être ergonomique, c’est presque émotionnel et ça change tout
  53. Dernière règle, comme je vous le disait, l’ergonomie n’est pas une science exacte, on ne sort pas une super ergonomie du premier coup. Vous avez beau mettre des centaines d’ergonome sur un projet et bien vous pourriez obtenir ça
  54. On a vu plus tot qu’une des regles de l’ergonome c’est de savoir se tromper et se remettre en question. Pour ça il ne faut pas hésiter à mettre son travail à l’epreuve Et la seule bonne manière de le faire c’est grace aux tests utilisateur. Vous vous rappeler windows 8; peut-etre qu’il l’ont testé et qu’il se sont rendu compte que c’était une catastrophe mais il n’ont pas utilisé cette info pour recadrer leur travail.
  55. Windowsz 8 est un échec commercial, et pourtant ils ont fait des choix et sont allé jusqu’au bout Et je peux vous assurer qu’une armée d’ergonome a passé des heures sur ce projet. Comment ont-ils pu rater pendant des années ce que tous les utilisateurs ont vu durant les première 24h de leur utilisation ? Et bien parfois le fait de se mettre à la place des utilisateurs ne suffit pas. C’est pourquoi il faut tester votre travail. Microsoft aurait pris une journée pour faire des tests sur 10 utilisateurs et ils auraient pu anticiper cela.
  56. Et ça ne leur pas beaucoup servi de leçon puisqu’ils ont recommencé avec la xBox one en présentant des caractéristiques à fauire hurler n’importe quel jour : connexion obligatoire, pas de marché de l’occasion etc. Il a fallu la présentation officiel et la sanction publique de la communauté de joueur pour changer leur fusil d’épaules. Mais pourquoi avoir attendu ? Ils auraient testé les réactions des joueurs en amont, ils auraient pu éviter la catastrophe de leur première présentation. Et c’est sony qui en a profité.
  57. Vous allez me dire que c’est propre à Microsoft mais dans certain cas même avec la meilleure volonté du monde il y a moyen de complètement se planter Je vais vous raconter une autre histoire, c’est un entrepreneur américain qui discutait avec un ami malvoyant et qui a appris qu’il n’existait pas de montre vraiment pratique pour les aveugles, les seuls montres existantes utilisait une voit de synthèse pour lire l’heure lorsqu’on appuie sur un bouton. Mais c’est n’est pas discret. Si on est dans un endroit bruyant ou même si on est avec des amis. Il a donc travaillé sur le prototype que vous voyez ici et qui permet en utilisant le toucher de connaitre l’heure. Génial, il a déposé un brevet, prêt à faire un malheur avec sa montre. Mais comme il est consciencieux il a quand même demandé à des malvoyant ce qu’ils en pensait et vous savez ce qu’ils ont demandé ? Est-ce qu’elle est belle ? Bien qu’ils soient complètement non-voyant, ils tenaient pour la grande majorité à ce que cette montre soit jolie, design et qu’elle claque. Quand on y pense c’est vrai, ce n’est pas parce qu’on ne se voit pas qu’on n’a pas envie d’avoir la classe. Mais ce genre de remarque est quasi impossible à anticiper. Il n’y a que la mise à l’epreuve d’un produit auprès de vraix utilisateurs qui peut vous permettre d’améliorer votre produit
  58. Suite à ça ils ont fait appel à un vrai designer pour faire une montre classe. Cette montre telle quelle est un énorme succès, je ne suis pas sur que ça aurait été de le cas sans cette refonte du design. La morale de l’histoire : vous avez beau etre sur que vous faites les choses comme il faut, vous n’etes pas à l’abri de vous tromper. Pour faire les choses bien, testez, améliorez, testez encore, améliorez encore.
  59. La morale c’est qu’on a beau passer du temps sur un projet, on aura jamais la garantie L’ergonomie est un processus itératif, ça ne marchera jamais du premier coup et au plus vous tester et au lus vous testez tôt, au moins vous risquez de faire un bide
  60. On a vu que l’une des regle est de se concentrer sur l’utilisateur. Donc on va commencer par là. Quelles sont les règles de l’utilisateur
  61. Enfin… pour l’utilisateur c’est quand même beaucoup plus simple
  62. Enfin, une dernière règle :
  63. Enfin, une dernière règle :
  64. Enfin, une dernière règle :
  65. Enfin, une dernière règle :
  66. Enfin, une dernière règle :
  67. Enfin, une dernière règle :
  68. Dans la tete de l’utilisateur c’est très simple et vous etes exactement pareil quand vous surfez sur le web L’utilisateur reste 2 sec sur un site pour décider si il va poursuivre ou pas, il n’a pas le temps de lire ou de reflechir, il va se baser sur ses automatismes En plus sur internet la concurrence est à 2 clic de distance
  69. Donc quand vous créez un site qui ressemble à ca
  70. Ce que vous l’utilisateur en 2sec c’est ça Et en fonction de ca il doit décider si ça vaut le coup ou pas
  71. On a vu que l’une des regle est de se concentrer sur l’utilisateur. Donc on va commencer par là. Quelles sont les règles de l’utilisateur
  72. Une navigation ça commence un peu comme dans un jeu video Vous démarrez avec une jauge pleine de bonne volonté
  73. Une navigation ça commence un peu comme dans un jeu video Vous démarrez avec une jauge pleine de bonne volonté
  74. Une navigation ça commence un peu comme dans un jeu video Vous démarrez avec une jauge pleine de bonne volonté
  75. Une navigation ça commence un peu comme dans un jeu video Vous démarrez avec une jauge pleine de bonne volonté
  76. Une navigation ça commence un peu comme dans un jeu video Vous démarrez avec une jauge pleine de bonne volonté
  77. Une navigation ça commence un peu comme dans un jeu video Vous démarrez avec une jauge pleine de bonne volonté
  78. Une navigation ça commence un peu comme dans un jeu video Vous démarrez avec une jauge pleine de bonne volonté
  79. Une navigation ça commence un peu comme dans un jeu video Vous démarrez avec une jauge pleine de bonne volonté
  80. Une navigation ça commence un peu comme dans un jeu video Vous démarrez avec une jauge pleine de bonne volonté
  81. Une navigation ça commence un peu comme dans un jeu video Vous démarrez avec une jauge pleine de bonne volonté
  82. Avec ces 5 règles on va pouvoir aiguiller nos choix
  83. Dans la tete de l’utilisateur c’est très simple et vous etes exactement pareil quand vous surfez sur le web L’utilisateur reste 2 sec sur un site pour décider si il va poursuivre ou pas, il n’a pas le temps de lire ou de reflechir, il va se baser sur ses automatismes En plus sur internet la concurrence est à 2 clic de distance
  84. Ok, on va pouvoir passer à la conception à proprement parlé