Contenu connexe Similaire à Faire Mieux Avec Peu - Webcom 2009 Anastasia Simitsis, w.illi.am/ (20) Plus de Matyas Gabor (16) Faire Mieux Avec Peu - Webcom 2009 Anastasia Simitsis, w.illi.am/1. Faites mieux avec peu
Optimisation ergonomique
© confidentiel / w.illi.am/ 15 mai 2009
2. Simplicité
© confidentiel / w.illi.am/ 15 mai 2009
7. Le Web, où en sommes-nous ?
Plus ergonomique ?
{ Simplicité vs. Expérience }
« Simplicity is boring. We want richness and depth in our
lives. Moreover, the world and our activities are inherently
complex, so the tools we use must match that complexity.
Simplicity is not the answer. We don't want confusion,
perplexity, and confusion. »
- Don Norman 2008
© confidentiel / w.illi.am/ 15 mai 2009
8. Avec l’explosion des
The characteristics of Web 2.0 are :
technologies riches à la 2.0*, Rich user experience, user participation,
a-t-on des sites web dynamic content, metadata, web
standards and scalability. Further
plus ergonomiques ? characteristics, such as openness, freedom
and collective intelligence by way of user
participation, can also be viewed as
essential attributes of Web 2.0.
- Wikipedia
NON pas nécessairement!
Ce n’est pas la technologie en soi qui détermine la facilité d’utilisation.
© confidentiel / w.illi.am/ 15 mai 2009
9. «Usability matters, it matters a lot. But it only
matters if underneath the surface, you’ve got a
product that actually works well and is meeting real
user needs (usefulness)…if you don’t have a
fundamentally strong product, then your users are
going to have no reason to keep coming back to
using your site or product time and time again… »
- Jen Fitzpatrick, Engineering Director of User Experience, Google
© confidentiel / w.illi.am/ 15 mai 2009
10. Quelques définitions…
ERGONOMIE
Utilité Utilisabilité
Web
Synonymes
(convivialité, facilité d’utilisation)
Pour un contexte d’utilisation, des utilisateurs et des buts spécifiques….
Efficacité (atteindre son but)
Efficience (atteindre son but avec le minimum d’efforts, en un minimum de temps)
Satisfaction (ressenti global, composantes liées aux deux précédentes et à l’utilité…)
(ISO 9241-11,1998)
© confidentiel / w.illi.am/ 15 mai 2009
11. Les 5 « E » de l’expérience utilisateur
1. Efficace
Le degré d’exhaustivité et de précision dans l’accomplissement de la tâche ou dans la réalisation des
objectifs.
2. Efficient
La rapidité avec laquelle la tâche peut être accomplie.
3. Évitant les erreurs
L’efficacité du produit à éviter les erreurs et à aider l’utilisateur à dépasser celles qui surviennent.
4. Enfantin à maîtriser
La capacité de répondre à la fois à l’orientation de départ et à l’apprentissage continu pendant toute la
durée de vie de l’utilisation.
5. Engageant
La capacité de l’interface à pousser l’utilisateur à interagir, le degré de plaisir et de satisfaction dans
l’utilisation.
SOURCE : http://www.wqusability.com/articles/getting-started-fr.html
© confidentiel / w.illi.am/ 15 mai 2009
12. Équilibre de chaque dimension ?
Efficace
Enfantin à Efficient
maîtriser
Expérience
utilisateur
Évitant les
Engageant
erreurs
© confidentiel / w.illi.am/ 15 mai 2009
14. Plaisir à utiliser vs. efficience ?
iPhone - 50 % plus lent…
Nokia
Lequel est préféré ?
Les utilisateurs
préfèreraient le plaisir à
l’efficience pour les tâches
de courte durée et peu
fréquentes…
© confidentiel / w.illi.am/ 15 mai 2009
16. Un grand constat !
ABONDANCE…
SURCHARGE
© confidentiel / w.illi.am/ 15 mai 2009
17. Comment faire simple
dans un contexte complexe?
Est-ce important ?
Surinformation
Trop de choix
Fonctionnalités avancées
Plateformes variées
© confidentiel / w.illi.am/ 15 mai 2009
18. « Investissez 10% en
utilisabilité et gagnez 83% »
- Jacob Nielsen, janvier 2008
© confidentiel / w.illi.am/ 15 mai 2009
19. Usability ROI
50
40
30
20
10
ROI Percentage
0
<100% 1 - 299% 3 - 499% 500+%
45 % of respondents reported an ROI of 300% or more from usability
85 % of respondents reported an ROI of 100% or more from usability
SOURCE : Usability and User Experience Survey Report 2007; E-consultancy/Bunnyfoot
© confidentiel / w.illi.am/ 15 mai 2009
20. Toujours selon la même étude…
The top 3 benefits of investment in usability are:
improved perceptions of brand
increased conversion rates
greater customer loyalty and retention
© confidentiel / w.illi.am/ 15 mai 2009
21. Faire mieux avec peu
3 règles à suivre dans un
contexte économique difficile
et même quand il ne l’est pas ;)
© confidentiel / w.illi.am/ 15 mai 2009
23. Règle # 1
Prenez des décisions basées sur des données
utilisateurs…et non des opinions
Identifiez + Mesurez + Observez
vos utilisateurs
Vous n’êtes pas l’utilisateur ;)
© confidentiel / w.illi.am/ 15 mai 2009
24. Règle # 1
Identifiez + Mesurez + Observez vos utilisateurs
« Don’t fix it if it ain’t broken »
Une refonte complète est rarement la solution…
La règle du 80/20 s’applique.
En évaluant et ajustant les éléments sur le chemin des tâches critiques, vous
réglez 80% des problèmes…
Permet de concentrer vos énergies et $$$ là où l’impact
sera le plus grand pour
vos utilisateurs et votre entreprise.
© confidentiel / w.illi.am/ 15 mai 2009
25. 4 principales techniques
Identifiez + Mesurez + Observez vos utilisateurs
Qualitatif
Sur place
Salle de tests
À distance
Entrevues Tests utilisateurs
Buts et attitudes Comportements
(Ce que disent les gens) (Ce que font les gens)
Sondages auprès Statistiques du site
d’utilisateurs (Web Analytique)
Quantitatif
© confidentiel / w.illi.am/ 15 mai 2009
26. Combien de tests utilisateurs ?
SOURCE : http://www.useit.com
© confidentiel / w.illi.am/ 15 mai 2009
28. Règle # 2
Priorisez + Maquettez
© confidentiel / w.illi.am/ 15 mai 2009
29. Selon les niveaux de satisfaction
Satisfaction utilisateur
Attractives
Enchantement (besoins latents)
Proportionnelles
(besoins exprimés)
Peu fonctionnel Très
Degré fonctionnel
ou pas offert bien
Obligatoires
(besoins implicites)
Déception
SOURCE : Modèle Kano Avec le temps…
© confidentiel / w.illi.am/ 15 mai 2009
30. Diagramme
d’affinités
Permet de classer et d'organiser des
informations obtenues par brainstorm,
groupes de discussion, sondages (client,
écoute des employés, satisfaction de la
clientèle ou autres), tests utilisateurs, etc.
Permet de rassembler les différents
membres de l’équipe pour dresser un
tableau complet et arriver à un
consensus.
© confidentiel / w.illi.am/ 15 mai 2009
31. Tri de carte fermé Optimal Sort
Boîte à outils
Tri de cartes
Papier, post-it, crayons – Gratuit
WebSort – 79$US pour une étude
http://websort.net
Optimal Sort – Gratuit pour 10
participants, 30 cartes par projet
http://www.optimalsort.com
© confidentiel / w.illi.am/ 15 mai 2009
32. Boîte à outils
Maquettage, prototypage
Papier, post-it, crayons – Gratuit
Balsamiq – Gratuit en ligne ou 79$US http://www.balsamiq.com/
Pencil Project– Gratuit http://www.evolus.vn/Pencil/
Axure - http://www.axure.com/
© confidentiel / w.illi.am/ 15 mai 2009
34. Maquette basse fidélité réalisée en 2-3 min. avec Balsamiq
Maquette haute fidélité avec Pencil Project
© confidentiel / w.illi.am/ 15 mai 2009
35. Concept Tests
Tests Prototype
Site en ligne Tests
© confidentiel / w.illi.am/ 15 mai 2009
36. Coût d’un changement….
100x
En ligne
Coûts des changements
6x
1x Développement
Conception
© confidentiel / w.illi.am/ 15 mai 2009
37. Ne réinventez pas la roue. Apprenez de vos
compétiteurs…et faites-mieux ;)
Faites des tests utilisateurs sur les site de
vos concurrents.
Référez-vous aux guidelines et patterns de
conception.
© confidentiel / w.illi.am/ 15 mai 2009
39. Guidelines
For unfamiliar, or advanced
data entry:
left aligned
SOURCE : http://www.lukew.com/resources/articles/WebForms_LukeW.pdf
© confidentiel / w.illi.am/ 15 mai 2009
40. Guidelines
When vertical screen space
is a constraint:
right aligned
SOURCE : http://www.lukew.com/resources/articles/WebForms_LukeW.pdf
© confidentiel / w.illi.am/ 15 mai 2009
41. Boîte à outils
Patrons de conception
(« design patterns »)
attention, utiliser avec précaution…
Yahoo Design Library
http://developer.yahoo.com/ypatterns/
Welie
http://www.welie.com/
UI Patterns
http://ui-patterns.com/
© confidentiel / w.illi.am/ 15 mai 2009
42. 95% of web users do not read
80% of your content!
doesn’t mean that your content isn’t important,
it means it’s more important
SOURCE : http://www.mindseyewebdesign.net/blog/
© confidentiel / w.illi.am/ 15 mai 2009
43. SOURCE : Steve Krug, Don't Make Me Think!: A Common Sense Approach to Web Usability
© confidentiel / w.illi.am/ 15 mai 2009
45. « It doesn't matter how many times I
have to click, as long as each click is a
mindless, unambiguous choice »
- Steve Krug, Author Don’t Make me think
© confidentiel / w.illi.am/ 15 mai 2009
46. Règle # 3
Optimisez , optimisez, optimisez
votre contenu
Contenu = texte, hyperliens, boutons et images
© confidentiel / w.illi.am/ 15 mai 2009
47. TEXTE doit être :
Dans un langage simple et familier pour l’usager
(attention aux noms de marques !)
Aéré : grossissez vos polices, laissez du blanc et éliminez les éléments superflus !
Facilement balayable : titres, sous-titres et hyperliens en un clin d’œil !
Concis : En général, diviser la quantité de mots par 2 !
« Every sentence, every phrase, every word has to fight for its life »
- Crawford Kilian, Writting for the Web 3.0
Mettre de l’avant les bénéfices plutôt que les fonctionnalités de votre service
ou produit
Supporté par des illustrations, graphiques, tableaux…PARLANTS!
Dépourvu d’erreurs et à jour
© confidentiel / w.illi.am/ 15 mai 2009
52. Ouf…
© confidentiel / w.illi.am/ 15 mai 2009
55. BOUTONS et HYPERLIENS
Maximiser l’affordance « vous pouvez me cliquer »
o Un bouton doit avoir l’air d’un bouton !
o Prenez attention…
Forme
Couleur
Libellé
Localisation dans l’interface
Les hyperliens doivent être explicites (descriptifs)
o Bannissez les liens « cliquez ici »
o Privilégiez le souligné
© confidentiel / w.illi.am/ 15 mai 2009
57. Où est Charlie le bouton ?
© confidentiel / w.illi.am/ 15 mai 2009
58. Où est le bouton acheter ?
© confidentiel / w.illi.am/ 15 mai 2009
59. Où est le bouton acheter ?
© confidentiel / w.illi.am/ 15 mai 2009
60. Où est le bouton acheter ?
© confidentiel / w.illi.am/ 15 mai 2009
65. À lire !
© confidentiel / w.illi.am/ 15 mai 2009
66. Avant de conclure…
Qui est responsable de l’expérience utilisateur ?
© confidentiel / w.illi.am/ 15 mai 2009
67. CHAQUE INDIVIDU de votre organisation
qui participe de près ou de loin au maintien et à l’évolution
de votre site
Gestionnaires de produits, ingénieurs
Ergonomes, architectes de l’information, directeur UX
Designers, directeur artistique
Développeurs, analystes de la qualité
Auteurs, éditeurs, traducteurs du contenu
Service à la clientèle
Membres de la direction
…
© confidentiel / w.illi.am/ 15 mai 2009
68. Google user experience
The Google User Experience team aims to create
designs that are useful, fast, simple, engaging,
innovative, universal, profitable, beautiful,
trustworthy, and personable. Achieving a harmonious
balance of these ten principles is a constant challenge.
A product that gets the balance right is quot;Googleyquot; –
and will satisfy and delight people all over the world.
SOURCE : http://www.google.com/corporate/ux.html
© confidentiel / w.illi.am/ 15 mai 2009
69. Avec l’optimisation ergonomique….
C’est possible de faire mieux avec peu !
1- Identifiez + mesurez + observez
2 - Priorisez + maquettez* (guidelines, patterns)
3 - Optimisez vos contenus*
* Testez encore!
© confidentiel / w.illi.am/ 15 mai 2009