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 au...
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...
3 éléments à bien
analyser
Questions de base:
• B2B ou B2C?
• Métier ou Grand Public?
• Tâches?
• Contraintes (techniques, organisationnelles, etc)?
...
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â...
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...
10 conseils
Charge cognitive
Diminuer le bruit et les distractions .
Limiter le nombre d’informations/fonctionnalités sur la
page (des...
Diminuer le bruit et les distractions .
Limiter le nombre d’informations/fonctionnalités sur la
page pour répondre à la de...
Technologie
"You‘ve got to start with the customer experience
and work back toward the technology—not the
other way around...
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 ter...
Correspondre au monde
réel
Parlez le language de l’utilisateur (mots, phrases,
concepts familiers, etc), plus que des term...
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 ...
Test utilisateur
• BUT = valider si cela fonctionne (compris et bien utilisé par
les utilisateurs)
• Étapes:
1. Définir le...
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 ...
Pour aller plus loin
J.J. Garrett S. Krug A. Boucher
be.linkedin.com/in/raphaelderobiano4usability/fr
www.ergonline.be
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
Upcoming SlideShare
Loading in …5
×

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

1,369 views
1,249 views

Published on

Offrir une bonne expérience client est essentiel, surtout dans un environnement hautement concurrentiel. Mais obtenir une interface ergonomique pour votre application (mobile, SAAS, intra / extra-net, site, …) n’arrive pas par hasard. Cela émerge d’un processus intentionnel basé sur une démarche centrée utilisateur.

Durant cet atelier, après la prise de connaissance des fondamentaux, Raphaël se lance avec vous dans des exemples, des exercices et des ateliers pratiques afin de vous donner les principes de mise en page, les outils à utiliser et les méthodologies qui lui ont permis de mieux satisfaire ses clients depuis 10 ans.

Raphaël de Robiano (http://www.ergonline.be) est spécialisé en Expérience Utilisateur (UX) et optimisation de site internet/App mobile. Depuis 10 ans, il conseille aussi bien des grands comptes (Electrabel, Brussels Airlines, PhoneHouse, Delhaize, BASE, Mobistar, …) que des PME/Startups (Primento, Comptaline, ICTjobs, MySavings, Altissia, Certinergie, …). Il partage aussi son expérience via du coaching et des formations (Solvay, Agence Bruxelloise de l’Entreprise, Software in Brussels, ICHEC, ECS, …).

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,369
On SlideShare
0
From Embeds
0
Number of Embeds
84
Actions
Shares
0
Downloads
54
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. Ergonomie Workshop 20/02 Raphaël de Robiano (www.ergonline.be)
  2. 2. INTRODUCTION DISCOVER DESIGN EVALUATE EXERCICES
  3. 3. I build interfaces be.linkedin.com/in/raphaelderobiano4usability/fr
  4. 4. Ergonomie Kesakou?
  5. 5. Ergonomie
  6. 6. Pratiquement Customer Interface Complex system & organization
  7. 7. Il faut améliorer  Apprentissage  Efficacité  Mémorisation  Gestion des erreurs  Satisfaction Pour éviter ceci
  8. 8. 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
  9. 9. User satisfaction: +35% Energy manager (electrabel)
  10. 10. 19 April 2014 Usability is just a list of rules to apply
  11. 11. Processus itératif 1. DISCOVER 2. DESIGN 3. EVALUATE
  12. 12. 1. DISCOVER
  13. 13. Technologie"You‘ve got to start with the customer experience and work back toward the technology, not the other way around." Steve Jobs
  14. 14. 3 éléments à bien analyser
  15. 15. Questions de base: • B2B ou B2C? • Métier ou Grand Public? • Tâches? • Contraintes (techniques, organisationnelles, etc)? • Connaissances techniques? • …
  16. 16. Comprendre le Modèle mental
  17. 17. Identifier les tâches • Pourquoi l’utilisateur vient-il sur cette app? • Par quoi va-t-il commencer? • Quelles sont les tâches principales? …
  18. 18. 1. DISCOVERMETHODES Interviews Benchmark Focus groupes Observation Surveys
  19. 19. 2. DESIGN
  20. 20. "If I had an hour to save the world I would spend 59 minutes defining the problem and one minute finding solutions" Albert Einsten
  21. 21. 10 conseils
  22. 22. 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
  23. 23. Diminuer le bruit et les distractions . Limiter le nombre d’informations/fonctionnalités sur la page pour répondre à la demande de l’utilisateur
  24. 24. 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
  25. 25. Feedback Où suis-je?
  26. 26. • Expliquer ce qu’il se passe ou s’est passé • ex. confirmation que mon fichier est bien enregistré Feedback
  27. 27. Vue global
  28. 28. 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)
  29. 29. Correspondre au monde réel Parlez le language de l’utilisateur (mots, phrases, concepts familiers, etc), plus que des termes techniques
  30. 30. http://www.eugenieprahy.com/
  31. 31. Consistence Placer les éléments de manière similaire écran après écran
  32. 32. Même langage graphique, peut importe le support
  33. 33. Hiérarchiser
  34. 34. Eléments de communication visuelle via - Mise en page - Typographie - Couleur - Image - Contrôle
  35. 35. Choisir ce qui sera plus mis en avant dans la page
  36. 36. Rapidité Load fast (technical speed) To the point (speed of content) Scannable (structural speed)
  37. 37. Penser usage
  38. 38. Gestalt – Règle de proximité
  39. 39. Gestalt – Règle de proximité
  40. 40. Gestalt – Règle de similarité
  41. 41. Gestalt – Règle de similarité
  42. 42. Cas pratiques
  43. 43. Exercice 1
  44. 44. Exercice 2
  45. 45. Exercice 3
  46. 46. 3. EVALUATE
  47. 47. 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
  48. 48. 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
  49. 49. METHODES Analytics Beta User feedbacks User Test
  50. 50. http://www.ted.com/talks/malcolm_gladwell_on_spaghetti_sa uce.html
  51. 51. 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!
  52. 52. Pour aller plus loin J.J. Garrett S. Krug A. Boucher be.linkedin.com/in/raphaelderobiano4usability/fr www.ergonline.be

×