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

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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

ErgonomieWorkshop 20/02

Raphaël de Robiano (www.ergonline.be)

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

INTRODUCTION

DISCOVER

DESIGN

EVALUATE

EXERCICES

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

I build interfaces

be.linkedin.com/in/raphaelderobiano4usability/fr

Page 4: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 5: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

ErgonomieKesakou?

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

ErgonomieAdapter un objet à ses utilisateurs dans un contextedonné

Page 7: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 8: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

Pratiquement

Customer Interface Complex system & organization

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

Il faut améliorer

Apprentissage

Efficacité

Mémorisation

Gestion des erreurs

Satisfaction

Pour éviter ceci

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

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

Page 11: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 12: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

User satisfaction: +35%

Energy manager (electrabel)

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

April 8, 2023

Usability is just a list of rules to apply

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

Processus itératif

1.DISCOVE

R

2.DESIGN

3. EVALUAT

E

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

1. DISCOVER

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

Technologie"You‘ve got to start

with the customer

experience and work

back toward the

technology, not the

other way around." 

Steve Jobs 

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

3 éléments à bien analyser

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

Questions de base:

• B2B ou B2C?

• Métier ou Grand Public?

• Tâches?

• Contraintes (techniques, organisationnelles, etc)?

• Connaissances techniques?

• …

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

Comprendre le Modèle mental

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

Identifier les tâches

• Pourquoi l’utilisateur vient-il sur cette app?

• Par quoi va-t-il commencer?

• Quelles sont les tâches

principales?

Page 21: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 22: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

1. DISCOVERMETHODES

Interviews

Benchmark

Focus groupes

Observation

Surveys

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

2. DESIGN

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

"If I had an hour to

save the world I

would spend 59

minutes defining the

problem and one

minute finding

solutions" 

Albert Einsten

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

10 conseils

Page 26: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 27: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 28: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 29: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 30: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

Charge cognitiveDiminuer 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

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

Diminuer le bruit et les distractions .

Limiter le nombre d’informations/fonctionnalités sur la page pour répondre à la demande de l’utilisateur

Page 32: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 33: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 34: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

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

Page 35: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 36: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 37: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

FeedbackOù suis-je?

Page 38: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 39: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 40: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

• Expliquer ce qu’il se passe ou s’est passé

• ex. confirmation que mon fichier est bien enregistré

Feedback

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

Vue global

Page 42: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 43: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 44: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

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)

Page 45: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 46: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

Correspondre au monde réel

Parlez le language de l’utilisateur (mots, phrases, concepts familiers, etc), plus que des termes techniques

Page 47: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 48: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

http://www.eugenieprahy.com/

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

ConsistencePlacer les éléments de manière similaire écran après écran

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

Même langage graphique, peut importe le support

Page 51: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 52: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

Hiérarchiser

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

Eléments de communication

visuelle via- Mise en page- Typographie- Couleur - Image- Contrôle

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

Choisir ce qui sera plus mis en avant dans la page

Page 55: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 56: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

RapiditéLoad fast (technical speed)

To the point (speed of content)

Scannable (structural speed)

Page 57: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 58: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 59: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 60: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 61: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 62: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 63: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 64: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 65: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 66: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 67: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

Penser usage

Page 68: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 69: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

Gestalt – Règle de proximité

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

Gestalt – Règle de proximité

Page 71: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 72: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

Gestalt – Règle de similarité

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

Gestalt – Règle de similarité

Page 74: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 75: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 76: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 77: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

Cas pratiques

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

Exercice 1

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

Exercice 2

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

Exercice 3

Page 81: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 82: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

3. EVALUATE

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

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 

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

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

Page 85: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 86: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 87: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 88: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

METHODES

Analytics

Beta

User

feedbacks

User Test

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

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!

Page 91: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)
Page 92: Booster l'Ergonomie et Expérience Utilisateur Digitale (web & mobile)

Pour aller plus loin

J.J. Garrett S. Krug A. Boucher

be.linkedin.com/in/raphaelderobiano4usability/frwww.ergonline.be