Ergonomie : performance et satisfaction de nos clients

Annabelle Buffart & Laurence Vagner

AnnabelleFront-end Consultant

Agile Partner

LaurenceUX designer

iKe Consulting

Ergonomie ≠ Design

Ergonomie + Design = ❤�

Ergonomie web(...) a pour objectif de rendre les sites Web plus aisés d'utilisation pour l'utilisateur final, sans qu'il ait besoin de suivre un apprentissage dédié

Design graphique(..) a pour objectif de créer des objets de

communication visuelle (logotype, affiche, site

web, etc.)

Sources : fr.wikipedia.org

UX & UI

UXUser eXperience

analyse,

personas,

emotional design,

use cases, stories,

workflows,

archi de l’information,

wireframes,

supports/devices

UIUser Interface

maquettes graphiques,

interactions,

versions mobiles,

guides de styles,

accessibilité

Dans la pratique

1. Objectifs● Business● Marketing● Développeurs● Utilisateurs

2. Use Case & User Stories

Comme en Agile! User Stories

https://fr.wikipedia.org/wiki/Diagramme_des_cas_d%27utilisation

Use Case

2. PersonasQui?

4. ArchitectureDe quoi ai-je besoin?

http://www.renow.public.lu/fr/techniques-ux/tri-cartes-inverse/index.html

5. Workflow

6. Rédaction“ Less is more ”

7. Supports

Desktop

Multi-supports

8. Emotional Design

Normaliser ces informations en impliquant des utilisateurs

Critères & bonnes pratiques

8 critères ergonomiques de Bastien & Scapin

http://www.ergoweb.ca/criteres.html

1. Guidage

2. Charge de travail

3. Contrôle explicite

4. Adaptabilité

5. Gestion des Erreurs

6. Homogénéité/Cohérence

7. Signification des Codes et Dénominations

8. Compatibilité

Exemple : gestion des erreurs

Moyens permettant d'une part d'éviter ou de réduire les erreurs,

d'autre part de les corriger lorsqu'elles surviennent.

Protection Contre les Erreurs

Mettre en place des moyens pour détecter et prévenir les erreurs.

Qualité des Messages d'Erreurs

S'assurer que l'information donnée aux utilisateurs sur la nature des erreurs commises et sur les actions à entreprendre pour les corriger, soit pertinente, facile à lire et exacte.

Correction des Erreurs

Mettre à la disposition des utilisateurs des moyens pour corriger leurs erreurs.

10 heuristiques de Jakob Nielsen

http://www.nngroup.com/articles/ten-usability-heuristics/

Visibility of system status

Match between system and the real world

User control and freedom

Consistency and standards

Error prevention

Recognition rather than recall

Flexibility and efficiency of use

Aesthetic and minimalist design

Help and documentation

Opquasthttp://checklists.opquast.com/fr/

Opquasthttp://checklists.opquast.com/fr/

Ressources

● Ergonomie Web - Amélie Boucher● Memento “Sites web - Les bonnes

pratiques” - Elie Sloïm● Mobile First - Luke Wroblewski● Responsive Web Design - Ethan

Marcotte● Emotional Design - Aarron

Walter● Designing the moment - Robert

Hoekman● Don’t make me think - Steve

Krug

Livres et sites

● http://opquast.com/fr/● http://www.renow.public.

lu/fr/index.html● https://goodui.org/● http://www.alsacreations.com/● http://uxchecklist.github.io/

Exemple

Pyramid

Remarques

Architecture : 3 menus

Affordance : Où cliquer ?

Contenu caché

Colonne “description”

Manque d’infos : TBS code? Légendes des icônes

Hiérarchie

Vous êtes aussi des UTILISATEURS.

Vous êtes aussi des TESTEURS.

Comment faire des tests ?

Heuristiquesà faire soi-meme

Utiliser les ressources précedentes

Checklists

Vischeck (daltoniens)

vischeckhttp://www.vischeck.com/vischeck/vischeckImage.php

Guerilla testingavec des utilisateurs

potentiels(collègues, amis,

inconnus)

5 à 10 min

autour d’un café

définir un objectif

observer : neutre & bienveillant

prendre des notes / enregistrer l’écran

améliorer

Tests ABEn production

Testez de grands éléments

Fiabilité5000 visiteurs minimum100 conversions / variation

AttentionNécessite jusqu’à 2 fois plus de développement

« 5 utilisateurs suffisent pour trouver85 % des problèmes » - Jakob Nielsen

Étude récente: 9 utilisateurs est idéal

Conclusionimpliquer l’utilisateur tout au long du projet

● Taux de conversion● Actions● Performance● Sondage● Diminution des

frustrations

● Travail en amont● Impliquer l’utilisateur● Impliquer les services!