ergonomie : performance et satisfaction de nos clients
TRANSCRIPT
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!