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, …).

1. Ergonomie
Workshop 20/02
Raphaël de Robiano (www.ergonline.be)

2. INTRODUCTION
DISCOVER
DESIGN
EVALUATE
EXERCICES

3. I build interfaces
be.linkedin.com/in/raphaelderobiano4usability/fr

5. Ergonomie
Kesakou?

6. Ergonomie

8. Pratiquement
Customer Interface Complex system &
organization

9. Il faut améliorer
 Apprentissage
 Efficacité
 Mémorisation
 Gestion des erreurs
 Satisfaction
Pour éviter ceci

10. 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

12. User satisfaction: +35%
Energy manager (electrabel)

13. 19 April 2014
Usability is
just a list of
rules to apply

14. Processus itératif
1.
DISCOVER
2.
DESIGN
3.
EVALUATE

15. 1. DISCOVER

16. Technologie"You‘ve got to start with
the customer experience
and work back toward
the technology, not the
other way around."
Steve Jobs

17. 3 éléments à bien
analyser

18. Questions de base:
• B2B ou B2C?
• Métier ou Grand Public?
• Tâches?
• Contraintes (techniques, organisationnelles, etc)?
• Connaissances techniques?
• …

19. Comprendre le Modèle
mental

20. Identifier les tâches
• Pourquoi l’utilisateur
vient-il sur cette app?
• Par quoi va-t-il
commencer?
• Quelles sont les tâches
principales?
…

22. 1. DISCOVERMETHODES
Interviews
Benchmark
Focus groupes
Observation
Surveys

23. 2. DESIGN

24. "If I had an hour to save
the world I would spend
59 minutes defining the
problem and one minute
finding solutions"
Albert Einsten

25. 10 conseils

30. 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

31. Diminuer le bruit et les distractions .
Limiter le nombre d’informations/fonctionnalités sur la
page pour répondre à la demande de l’utilisateur

34. 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

37. Feedback
Où suis-je?

40. • Expliquer ce qu’il se passe ou s’est passé
• ex. confirmation que mon fichier est bien enregistré
Feedback

41. Vue global

44. 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)

46. Correspondre au monde
réel
Parlez le language de l’utilisateur (mots, phrases,
concepts familiers, etc), plus que des termes
techniques

48. http://www.eugenieprahy.com/

49. Consistence
Placer les éléments de manière similaire écran après écran

50. Même langage graphique, peut importe le support

52. Hiérarchiser

53. Eléments de communication visuelle via
- Mise en page
- Typographie
- Couleur
- Image
- Contrôle

54. Choisir ce qui sera plus mis en avant dans la page

56. Rapidité
Load fast (technical speed)
To the point (speed of content)
Scannable (structural speed)

67. Penser usage

69. Gestalt – Règle de
proximité

70. Gestalt – Règle de
proximité

72. Gestalt – Règle de
similarité

73. Gestalt – Règle de
similarité

77. Cas pratiques

78. Exercice 1

79. Exercice 2

80. Exercice 3

82. 3. EVALUATE

83. 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

84. 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

88. METHODES
Analytics
Beta
User feedbacks
User Test

89. http://www.ted.com/talks/malcolm_gladwell_on_spaghetti_sa
uce.html

90. 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!

92. Pour aller plus loin
J.J. Garrett S. Krug A. Boucher
be.linkedin.com/in/raphaelderobiano4usability/fr
www.ergonline.be