SlideShare une entreprise Scribd logo
Ergonomie
Workshop 20/02
Raphaël de Robiano (www.ergonline.be)
INTRODUCTION
DISCOVER
DESIGN
EVALUATE
EXERCICES
I build interfaces
be.linkedin.com/in/raphaelderobiano4usability/fr
Ergonomie
Kesakou?
Ergonomie
Pratiquement
Customer Interface Complex system &
organization
Il faut améliorer
 Apprentissage
 Efficacité
 Mémorisation
 Gestion des erreurs
 Satisfaction
Pour éviter ceci
Utilisable ET Utile
• Utilisabilité: simplicité de l’interface (la forme)
• Utilité: adapté aux utilisateurs car répond aux
besoins (le fond)
Les 2 sont des piliers de la démarche ergonomique
User satisfaction: +35%
Energy manager (electrabel)
19 April 2014
Usability is
just a list of
rules to apply
Processus itératif
1.
DISCOVER
2.
DESIGN
3.
EVALUATE
1. DISCOVER
Technologie"You‘ve got to start with
the customer experience
and work back toward
the technology, not the
other way around."
Steve Jobs
3 éléments à bien
analyser
Questions de base:
• B2B ou B2C?
• Métier ou Grand Public?
• Tâches?
• Contraintes (techniques, organisationnelles, etc)?
• Connaissances techniques?
• …
Comprendre le Modèle
mental
Identifier les tâches
• Pourquoi l’utilisateur
vient-il sur cette app?
• Par quoi va-t-il
commencer?
• Quelles sont les tâches
principales?
…
1. DISCOVERMETHODES
Interviews
Benchmark
Focus groupes
Observation
Surveys
2. DESIGN
"If I had an hour to save
the world I would spend
59 minutes defining the
problem and one minute
finding solutions"
Albert Einsten
10 conseils
Charge cognitive
Diminuer le bruit et les distractions .
Limiter le nombre d’informations/fonctionnalités sur la
page (design, ombre, texte, couleurs, etc) pour
répondre à la demande de l’utilisateur
Diminuer la charge cognitive
Diminuer le bruit et les distractions .
Limiter le nombre d’informations/fonctionnalités sur la
page pour répondre à la demande de l’utilisateur
Technologie
"You‘ve got to start with the customer experience
and work back toward the technology—not the
other way around." —Steve Jobs
Les choix ne peuvent pas être fait par facilité
technique mais par nécessité pour le client
(accessibilité, compatibilité, rapidité, compréhension,
etc)
Guider
Feedback
Où suis-je?
• Expliquer ce qu’il se passe ou s’est passé
• ex. confirmation que mon fichier est bien enregistré
Feedback
Vue global
Correspondre au monde
réel
• Parlez le langage de l’utilisateur (mots, phrases,
concepts familiers, etc), plus que des termes
techniques
• Le système suggère sa propre utilisation (affordance)
Correspondre au monde
réel
Parlez le language de l’utilisateur (mots, phrases,
concepts familiers, etc), plus que des termes
techniques
http://www.eugenieprahy.com/
Consistence
Placer les éléments de manière similaire écran après écran
Même langage graphique, peut importe le support
Hiérarchiser
Eléments de communication visuelle via
- Mise en page
- Typographie
- Couleur
- Image
- Contrôle
Choisir ce qui sera plus mis en avant dans la page
Rapidité
Load fast (technical speed)
To the point (speed of content)
Scannable (structural speed)
Penser usage
Gestalt – Règle de
proximité
Gestalt – Règle de
proximité
Gestalt – Règle de
similarité
Gestalt – Règle de
similarité
Cas pratiques
Exercice 1
Exercice 2
Exercice 3
3. EVALUATE
Technologie« After you’ve worked on a
site for even a few weeks,
you can’t see it freshly
anymore. You know too
much. The only way to find
out if it really works is to
test it."
Steve Krug
Test utilisateur
• BUT = valider si cela fonctionne (compris et bien utilisé par
les utilisateurs)
• Étapes:
1. Définir les scénarios à tester (= tâches)
2. Préparer les écrans (= design ou existant)
3. Recruter les utilisateurs (8)
4. Tester
5. Analyser les résultats
6. Faire les modifications
METHODES
Analytics
Beta
User feedbacks
User Test
http://www.ted.com/talks/malcolm_gladwell_on_spaghetti_sa
uce.html
3 concepts de bases
1. Contexte à connaître
2. Règles de design à appliquer
3. Tester, tester, tester
Combiner les 3 pour obtenir une bonne ergonomie!
Pour aller plus loin
J.J. Garrett S. Krug A. Boucher
be.linkedin.com/in/raphaelderobiano4usability/fr
www.ergonline.be

Contenu connexe

En vedette

Analyse Expérience Utilisateur - Voyages-Sncf
Analyse Expérience Utilisateur - Voyages-SncfAnalyse Expérience Utilisateur - Voyages-Sncf
Analyse Expérience Utilisateur - Voyages-Sncf
MBAMCI (Institut Léonard de Vinci)
 
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
 
Ergonomie des interfaces web
Ergonomie des interfaces webErgonomie des interfaces web
Ergonomie des interfaces web
Renaud Biemans
 
Ns petite histoire de ergonomie web
Ns petite histoire de ergonomie webNs petite histoire de ergonomie web
Ns petite histoire de ergonomie web
Olivier Rovellotti
 
les parcours client digitaux, quelles sont les stratégies gagnantes ?
les parcours client digitaux, quelles sont les stratégies gagnantes ? les parcours client digitaux, quelles sont les stratégies gagnantes ?
les parcours client digitaux, quelles sont les stratégies gagnantes ?
Orange Business Services
 
Lois de la Gestalt et Webdesign
Lois de la Gestalt et WebdesignLois de la Gestalt et Webdesign
Lois de la Gestalt et Webdesign
MC Casal
 
Ergonomie et accessibilité du Web
Ergonomie et accessibilité du WebErgonomie et accessibilité du Web
Ergonomie et accessibilité du Web
Genè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 Colantonio
J'ai besoin de com
 
Transmédia et Cross Canal: la digitalisation croissante du parcours client
Transmédia et Cross Canal: la digitalisation croissante du parcours clientTransmédia et Cross Canal: la digitalisation croissante du parcours client
Transmédia et Cross Canal: la digitalisation croissante du parcours client
Geoffrey Laloux
 
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
Laurent Mottet
 
E-transformation du parcours client #MBAMCI
E-transformation du parcours client #MBAMCIE-transformation du parcours client #MBAMCI
E-transformation du parcours client #MBAMCI
Christelle Austruy
 
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
Rodolphe Finamore
 
Livre blanc "10 Best Practices parcours et expérience clients 2016" Different...
Livre blanc "10 Best Practices parcours et expérience clients 2016" Different...Livre blanc "10 Best Practices parcours et expérience clients 2016" Different...
Livre blanc "10 Best Practices parcours et expérience clients 2016" Different...
Different FactorY
 
Notre nouveaux chez nous
Notre nouveaux chez nousNotre nouveaux chez nous
Notre nouveaux chez noussmargeridon
 
Propuesta metodologica matematic
Propuesta metodologica matematicPropuesta metodologica matematic
Propuesta metodologica matematic
Juan José
 
Portfolio Martin Anaïs
Portfolio Martin AnaïsPortfolio Martin Anaïs
Portfolio Martin Anaïs
Anais_Martin_
 
La France (K.L)
La France (K.L)La France (K.L)
La France (K.L)
Klodian Lika
 
Martinez lozano enrique
Martinez lozano enriqueMartinez lozano enrique
Martinez lozano enrique
Jesus Medina
 

En vedette (19)

Gestalt
GestaltGestalt
Gestalt
 
Analyse Expérience Utilisateur - Voyages-Sncf
Analyse Expérience Utilisateur - Voyages-SncfAnalyse Expérience Utilisateur - Voyages-Sncf
Analyse Expérience Utilisateur - Voyages-Sncf
 
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 ...
 
Ergonomie des interfaces web
Ergonomie des interfaces webErgonomie des interfaces web
Ergonomie des interfaces web
 
Ns petite histoire de ergonomie web
Ns petite histoire de ergonomie webNs petite histoire de ergonomie web
Ns petite histoire de ergonomie web
 
les parcours client digitaux, quelles sont les stratégies gagnantes ?
les parcours client digitaux, quelles sont les stratégies gagnantes ? les parcours client digitaux, quelles sont les stratégies gagnantes ?
les parcours client digitaux, quelles sont les stratégies gagnantes ?
 
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
 
Transmédia et Cross Canal: la digitalisation croissante du parcours client
Transmédia et Cross Canal: la digitalisation croissante du parcours clientTransmédia et Cross Canal: la digitalisation croissante du parcours client
Transmédia et Cross Canal: la digitalisation croissante du parcours client
 
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
 
E-transformation du parcours client #MBAMCI
E-transformation du parcours client #MBAMCIE-transformation du parcours client #MBAMCI
E-transformation du parcours client #MBAMCI
 
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
 
Livre blanc "10 Best Practices parcours et expérience clients 2016" Different...
Livre blanc "10 Best Practices parcours et expérience clients 2016" Different...Livre blanc "10 Best Practices parcours et expérience clients 2016" Different...
Livre blanc "10 Best Practices parcours et expérience clients 2016" Different...
 
Notre nouveaux chez nous
Notre nouveaux chez nousNotre nouveaux chez nous
Notre nouveaux chez nous
 
Propuesta metodologica matematic
Propuesta metodologica matematicPropuesta metodologica matematic
Propuesta metodologica matematic
 
Portfolio Martin Anaïs
Portfolio Martin AnaïsPortfolio Martin Anaïs
Portfolio Martin Anaïs
 
La France (K.L)
La France (K.L)La France (K.L)
La France (K.L)
 
Martinez lozano enrique
Martinez lozano enriqueMartinez lozano enrique
Martinez lozano enrique
 

Similaire à Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Stéphanie Hertrich
 
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Atelier IHM Polytech Nice Sophia
 
Plateforme d’e learning
Plateforme d’e learningPlateforme d’e learning
Plateforme d’e learningEl Aber Haythem
 
Ged Open Source - Documation 2010
Ged Open Source - Documation 2010Ged Open Source - Documation 2010
Ged Open Source - Documation 2010Thomas Choppy
 
Plasticitérecherche2015 2
Plasticitérecherche2015 2Plasticitérecherche2015 2
Plasticitérecherche2015 2
Atelier IHM Polytech Nice Sophia
 
L'industriel n'est pas là ou le croit !
L'industriel n'est pas là ou le croit !L'industriel n'est pas là ou le croit !
L'industriel n'est pas là ou le croit !reporter4change
 
Industrialisation Du Logiciel - Introduction Et Bonnes Pratiques
Industrialisation Du Logiciel  - Introduction Et Bonnes PratiquesIndustrialisation Du Logiciel  - Introduction Et Bonnes Pratiques
Industrialisation Du Logiciel - Introduction Et Bonnes PratiquesEmmanuel Hugonnet
 
Industrialisation Du Logiciel Introduction Et Bonnes Pratiques V1.4
Industrialisation Du Logiciel   Introduction Et Bonnes Pratiques   V1.4Industrialisation Du Logiciel   Introduction Et Bonnes Pratiques   V1.4
Industrialisation Du Logiciel Introduction Et Bonnes Pratiques V1.4
Emmanuel Hugonnet
 
Field research and interaction design: course #6
Field research and interaction design: course #6Field research and interaction design: course #6
Field research and interaction design: course #6
nicolas nova
 
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomiqueCours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
ElodieDescharmes
 
Introduction aux spécifications exécutables (dit aussi atdd, bdd)
Introduction aux spécifications exécutables (dit aussi atdd, bdd)Introduction aux spécifications exécutables (dit aussi atdd, bdd)
Introduction aux spécifications exécutables (dit aussi atdd, bdd)
Jean-Pierre Lambert
 
Ergonomie et taux de clic Webx D&N 2012
Ergonomie et taux de clic Webx D&N 2012Ergonomie et taux de clic Webx D&N 2012
Ergonomie et taux de clic Webx D&N 2012
jessica_papiot
 
WEBXDN2012 - Ergonomie & Taux de clics
WEBXDN2012 - Ergonomie & Taux de clicsWEBXDN2012 - Ergonomie & Taux de clics
WEBXDN2012 - Ergonomie & Taux de clicswebxdn
 
Thema @ numelink evaluation heuristique
Thema @ numelink  evaluation heuristiqueThema @ numelink  evaluation heuristique
Thema @ numelink evaluation heuristique
Maxime Fortelle
 
Dans les coulisses de la recherche utilisateurs à Microsoft Surface
Dans les coulisses de la recherche utilisateurs à Microsoft SurfaceDans les coulisses de la recherche utilisateurs à Microsoft Surface
Dans les coulisses de la recherche utilisateurs à Microsoft Surface
Yann Riche
 
Déjeuner-débat EIM360 | Machine Learning et Transformation Digitale, un duo g...
Déjeuner-débat EIM360 | Machine Learning et Transformation Digitale, un duo g...Déjeuner-débat EIM360 | Machine Learning et Transformation Digitale, un duo g...
Déjeuner-débat EIM360 | Machine Learning et Transformation Digitale, un duo g...
SOLLAN FRANCE
 
Introduction a l_agilite_iut_lyon_1_decembre2011
Introduction a l_agilite_iut_lyon_1_decembre2011Introduction a l_agilite_iut_lyon_1_decembre2011
Introduction a l_agilite_iut_lyon_1_decembre2011
agnes_crepet
 
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours IntroductionErgonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
Julien Roland
 
Ergonomie des IHM web - Grille d'analyse de Nielsen
Ergonomie des IHM web - Grille d'analyse de NielsenErgonomie des IHM web - Grille d'analyse de Nielsen
Ergonomie des IHM web - Grille d'analyse de Nielsen
ElodieDescharmes
 
Les outils de l'ergonome agile
Les outils de l'ergonome agileLes outils de l'ergonome agile
Les outils de l'ergonome agile
CARA_Lyon
 

Similaire à Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile) (20)

Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
 
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014
 
Plateforme d’e learning
Plateforme d’e learningPlateforme d’e learning
Plateforme d’e learning
 
Ged Open Source - Documation 2010
Ged Open Source - Documation 2010Ged Open Source - Documation 2010
Ged Open Source - Documation 2010
 
Plasticitérecherche2015 2
Plasticitérecherche2015 2Plasticitérecherche2015 2
Plasticitérecherche2015 2
 
L'industriel n'est pas là ou le croit !
L'industriel n'est pas là ou le croit !L'industriel n'est pas là ou le croit !
L'industriel n'est pas là ou le croit !
 
Industrialisation Du Logiciel - Introduction Et Bonnes Pratiques
Industrialisation Du Logiciel  - Introduction Et Bonnes PratiquesIndustrialisation Du Logiciel  - Introduction Et Bonnes Pratiques
Industrialisation Du Logiciel - Introduction Et Bonnes Pratiques
 
Industrialisation Du Logiciel Introduction Et Bonnes Pratiques V1.4
Industrialisation Du Logiciel   Introduction Et Bonnes Pratiques   V1.4Industrialisation Du Logiciel   Introduction Et Bonnes Pratiques   V1.4
Industrialisation Du Logiciel Introduction Et Bonnes Pratiques V1.4
 
Field research and interaction design: course #6
Field research and interaction design: course #6Field research and interaction design: course #6
Field research and interaction design: course #6
 
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomiqueCours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
 
Introduction aux spécifications exécutables (dit aussi atdd, bdd)
Introduction aux spécifications exécutables (dit aussi atdd, bdd)Introduction aux spécifications exécutables (dit aussi atdd, bdd)
Introduction aux spécifications exécutables (dit aussi atdd, bdd)
 
Ergonomie et taux de clic Webx D&N 2012
Ergonomie et taux de clic Webx D&N 2012Ergonomie et taux de clic Webx D&N 2012
Ergonomie et taux de clic Webx D&N 2012
 
WEBXDN2012 - Ergonomie & Taux de clics
WEBXDN2012 - Ergonomie & Taux de clicsWEBXDN2012 - Ergonomie & Taux de clics
WEBXDN2012 - Ergonomie & Taux de clics
 
Thema @ numelink evaluation heuristique
Thema @ numelink  evaluation heuristiqueThema @ numelink  evaluation heuristique
Thema @ numelink evaluation heuristique
 
Dans les coulisses de la recherche utilisateurs à Microsoft Surface
Dans les coulisses de la recherche utilisateurs à Microsoft SurfaceDans les coulisses de la recherche utilisateurs à Microsoft Surface
Dans les coulisses de la recherche utilisateurs à Microsoft Surface
 
Déjeuner-débat EIM360 | Machine Learning et Transformation Digitale, un duo g...
Déjeuner-débat EIM360 | Machine Learning et Transformation Digitale, un duo g...Déjeuner-débat EIM360 | Machine Learning et Transformation Digitale, un duo g...
Déjeuner-débat EIM360 | Machine Learning et Transformation Digitale, un duo g...
 
Introduction a l_agilite_iut_lyon_1_decembre2011
Introduction a l_agilite_iut_lyon_1_decembre2011Introduction a l_agilite_iut_lyon_1_decembre2011
Introduction a l_agilite_iut_lyon_1_decembre2011
 
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours IntroductionErgonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
 
Ergonomie des IHM web - Grille d'analyse de Nielsen
Ergonomie des IHM web - Grille d'analyse de NielsenErgonomie des IHM web - Grille d'analyse de Nielsen
Ergonomie des IHM web - Grille d'analyse de Nielsen
 
Les outils de l'ergonome agile
Les outils de l'ergonome agileLes outils de l'ergonome agile
Les outils de l'ergonome agile
 

Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)