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

  • View
    737

  • Download
    3

  • Category

    Design

Preview:

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

ErgonomieWorkshop 20/02

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

INTRODUCTION

DISCOVER

DESIGN

EVALUATE

EXERCICES

I build interfaces

be.linkedin.com/in/raphaelderobiano4usability/fr

ErgonomieKesakou?

ErgonomieAdapter un objet à ses utilisateurs dans un contextedonné

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)

April 8, 2023

Usability is just a list of rules to apply

Processus itératif

1.DISCOVE

R

2.DESIGN

3. EVALUAT

E

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

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

FeedbackOù 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/

ConsistencePlacer 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

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/frwww.ergonline.be