Faites mieux avec peu
Optimisation ergonomique




                           © confidentiel / w.illi.am/ 15 mai 2009
Simplicité

         © confidentiel / w.illi.am/ 15 mai 2009
SOURCE : http://www.stuffthathappens.com



            © confidentiel / w.illi.am/ 15 mai 2009
SOURCE : http://www.stuffthathappens.com



            © confidentiel / w.illi.am/ 15 mai 2009
SOURCE : http://www.stuffthathappens.com



            © confidentiel / w.illi.am/ 15 mai 2009
SOURCE : http://www.stuffthathappens.com



            © confidentiel / w.illi.am/ 15 mai 2009
Le Web, où en sommes-nous ?
Plus ergonomique ?



{ Simplicité vs. Expérience }
« Simplicity is boring. We want richness a...
Avec l’explosion des
                                                    The characteristics of Web 2.0 are :
technologies...
«Usability matters, it matters a lot. But it only
matters if underneath the surface, you’ve got a
product that actually wo...
Quelques définitions…



 ERGONOMIE
                                               Utilité                                ...
Les 5 « E » de l’expérience utilisateur
1.   Efficace
     Le degré d’exhaustivité et de précision dans l’accomplissement ...
Équilibre de chaque dimension ?


                        Efficace




   Enfantin à                          Efficient
  ...
Efficace

Enfantin à
 maîtriser                         Efficient



                   Expérience
                   util...
Plaisir à utiliser vs. efficience ?

iPhone - 50 % plus lent…

                           Nokia




                      ...
SOURCE : http://www.poetpainter.com




          © confidentiel / w.illi.am/ 15 mai 2009
Un grand constat !
ABONDANCE…
SURCHARGE

                     © confidentiel / w.illi.am/ 15 mai 2009
Comment faire simple
dans un contexte complexe?
Est-ce important ?
 Surinformation
 Trop de choix
 Fonctionnalités avan...
« Investissez 10% en
utilisabilité et gagnez 83% »
                  - Jacob Nielsen, janvier 2008




                   ...
Usability ROI

50

40

30

20

10
                                   ROI Percentage
 0

 <100%                  1 - 299%  ...
Toujours selon la même étude…


 The top 3 benefits of investment in usability are:

  improved perceptions of brand
  i...
Faire mieux avec peu
3 règles à suivre dans un
contexte économique difficile
et même quand il ne l’est pas ;)




        ...
Les opinions…




                © confidentiel / w.illi.am/ 15 mai 2009
Règle # 1

 Prenez des décisions basées sur des données
 utilisateurs…et non des opinions

  Identifiez + Mesurez + Observ...
Règle # 1
Identifiez + Mesurez + Observez vos utilisateurs



  « Don’t fix it if it ain’t broken »
  Une refonte complète...
4 principales techniques
Identifiez + Mesurez + Observez vos utilisateurs

                                       Qualitat...
Combien de tests utilisateurs ?




                                  SOURCE : http://www.useit.com



                   ...
© confidentiel / w.illi.am/ 15 mai 2009
Règle # 2



        Priorisez + Maquettez




                                © confidentiel / w.illi.am/ 15 mai 2009
Selon les niveaux de satisfaction
                                          Satisfaction utilisateur


                  ...
Diagramme
d’affinités
Permet de classer et d'organiser des
informations obtenues par brainstorm,
groupes de discussion, so...
Tri de carte fermé Optimal Sort




Boîte à outils
Tri de cartes

   Papier, post-it, crayons – Gratuit
   WebSort – 79$...
Boîte à outils
Maquettage, prototypage

   Papier, post-it, crayons – Gratuit
   Balsamiq – Gratuit en ligne ou 79$US   ...
© confidentiel / w.illi.am/ 15 mai 2009
Maquette basse fidélité réalisée en 2-3 min. avec Balsamiq




                                                           ...
Concept       Tests



Tests    Prototype



        Site en ligne   Tests



                                © confidenti...
Coût d’un changement….

                                                               100x
                              ...
Ne réinventez pas la roue. Apprenez de vos
compétiteurs…et faites-mieux ;)

 Faites des tests utilisateurs sur les site d...
Guidelines
For reduced completion
times & familiar data input:

top aligned




                               SOURCE : ht...
Guidelines
For unfamiliar, or advanced
data entry:

left aligned



                              SOURCE : http://www.luke...
Guidelines
When vertical screen space
is a constraint:

right aligned



                             SOURCE : http://www....
Boîte à outils
Patrons de conception
(« design patterns »)
attention, utiliser avec précaution…

   Yahoo Design Library
...
95% of web users do not read
              80% of your content!
   doesn’t mean that your content isn’t important,
       ...
SOURCE : Steve Krug, Don't Make Me Think!: A Common Sense Approach to Web Usability




                                  ...
SOURCE : http://www.neoinsight.com/newsletter/0903.html#0903get-there-mode




                                           ...
« It doesn't matter how many times I
have to click, as long as each click is a
mindless, unambiguous choice »
            ...
Règle # 3



 Optimisez , optimisez, optimisez
          votre contenu
   Contenu = texte, hyperliens, boutons et images

...
TEXTE doit être :

   Dans un langage simple et familier pour l’usager
    (attention aux noms de marques !)

   Aéré : ...
© confidentiel / w.illi.am/ 15 mai 2009
© confidentiel / w.illi.am/ 15 mai 2009
© confidentiel / w.illi.am/ 15 mai 2009
© confidentiel / w.illi.am/ 15 mai 2009
Ouf…

       © confidentiel / w.illi.am/ 15 mai 2009
Oui, la vie
est Bell ;)



              © confidentiel / w.illi.am/ 15 mai 2009
© confidentiel / w.illi.am/ 15 mai 2009
BOUTONS et HYPERLIENS


  Maximiser l’affordance « vous pouvez me cliquer »
    o   Un bouton doit avoir l’air d’un bouto...
© confidentiel / w.illi.am/ 15 mai 2009
Où est Charlie le bouton ?




                             © confidentiel / w.illi.am/ 15 mai 2009
Où est le bouton acheter ?




                             © confidentiel / w.illi.am/ 15 mai 2009
Où est le bouton acheter ?




                             © confidentiel / w.illi.am/ 15 mai 2009
Où est le bouton acheter ?




                             © confidentiel / w.illi.am/ 15 mai 2009
© confidentiel / w.illi.am/ 15 mai 2009
© confidentiel / w.illi.am/ 15 mai 2009
© confidentiel / w.illi.am/ 15 mai 2009
SOURCE : http://www.lukew.com/resources/articles/PSactions.asp


                                                         ...
À lire !




           © confidentiel / w.illi.am/ 15 mai 2009
Avant de conclure…
Qui est responsable de l’expérience utilisateur ?




                                               © ...
CHAQUE INDIVIDU de votre organisation
qui participe de près ou de loin au maintien et à l’évolution
de votre site

 Gesti...
Google user experience

The Google User Experience team aims to create
designs that are useful, fast, simple, engaging,
in...
Avec l’optimisation ergonomique….


  C’est possible de faire mieux avec peu !

  1- Identifiez + mesurez + observez

  2 ...
Bonne expérience utilisateur ;)

               Merci !




© confidentiel / w.illi.am/ 15 mai 2009
Prochain SlideShare
Chargement dans…5
×

Faire Mieux Avec Peu - Webcom 2009 Anastasia Simitsis, w.illi.am/

3 634 vues

Publié le

Conférence donnée par Par Anastasia Simitsis au Webcom Montréal 2009

Est-il besoin de rappeler que nous traversons une crise économique? Ou que le Web est un canal de communication à part entière, voire un centre de profit? Il est évident qu’en 2009 les investissements importants dans les projets Web se feront plus rares qu’au cours des dernières années. Toutefois, faut-il pour autant négliger un canal de communication primordial avec la clientèle et ainsi risquer d’aggraver la situation avec une stratégie de repli sur soi? Nous croyons sincèrement que non, et nous voulons partager avec vous des solutions à ce problème.

Certes nous partageons avec les décideurs leurs problématiques budgétaires, mais nous croyons fermement que vous pouvez faire mieux avec peu, une optimisation ergonomique intelligente de votre actif Web par des actions concrètes nécessitant des investissements de beaucoup inférieurs à une refonte complète de votre site, vous permettra d’obtenir des résultats rapides, quantifiables, garantissant votre retour sur investissement.

Publié dans : Technologie
1 commentaire
11 j’aime
Statistiques
Remarques
  • À ce jour, c'est une des meilleures présentations sur l'ergonomie web à laquelle j'ai eu la chance dA'ssister. Heureusement, le document mis en ligne est compréhensible malgré l'absence de la présentatrice.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
3 634
Sur SlideShare
0
Issues des intégrations
0
Intégrations
695
Actions
Partages
0
Téléchargements
96
Commentaires
1
J’aime
11
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Faire Mieux Avec Peu - Webcom 2009 Anastasia Simitsis, w.illi.am/

  1. 1. Faites mieux avec peu Optimisation ergonomique © confidentiel / w.illi.am/ 15 mai 2009
  2. 2. Simplicité © confidentiel / w.illi.am/ 15 mai 2009
  3. 3. SOURCE : http://www.stuffthathappens.com © confidentiel / w.illi.am/ 15 mai 2009
  4. 4. SOURCE : http://www.stuffthathappens.com © confidentiel / w.illi.am/ 15 mai 2009
  5. 5. SOURCE : http://www.stuffthathappens.com © confidentiel / w.illi.am/ 15 mai 2009
  6. 6. SOURCE : http://www.stuffthathappens.com © confidentiel / w.illi.am/ 15 mai 2009
  7. 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. 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. 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. 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. 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. 12. Équilibre de chaque dimension ? Efficace Enfantin à Efficient maîtriser Expérience utilisateur Évitant les Engageant erreurs © confidentiel / w.illi.am/ 15 mai 2009
  13. 13. Efficace Enfantin à maîtriser Efficient Expérience utilisateur Évitant les erreurs Engageant © confidentiel / w.illi.am/ 15 mai 2009
  14. 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
  15. 15. SOURCE : http://www.poetpainter.com © confidentiel / w.illi.am/ 15 mai 2009
  16. 16. Un grand constat ! ABONDANCE… SURCHARGE © confidentiel / w.illi.am/ 15 mai 2009
  17. 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. 18. « Investissez 10% en utilisabilité et gagnez 83% » - Jacob Nielsen, janvier 2008 © confidentiel / w.illi.am/ 15 mai 2009
  19. 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. 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. 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
  22. 22. Les opinions… © confidentiel / w.illi.am/ 15 mai 2009
  23. 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. 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. 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. 26. Combien de tests utilisateurs ? SOURCE : http://www.useit.com © confidentiel / w.illi.am/ 15 mai 2009
  27. 27. © confidentiel / w.illi.am/ 15 mai 2009
  28. 28. Règle # 2 Priorisez + Maquettez © confidentiel / w.illi.am/ 15 mai 2009
  29. 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. 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. 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. 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
  33. 33. © confidentiel / w.illi.am/ 15 mai 2009
  34. 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. 35. Concept Tests Tests Prototype Site en ligne Tests © confidentiel / w.illi.am/ 15 mai 2009
  36. 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. 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
  38. 38. Guidelines For reduced completion times & familiar data input: top aligned SOURCE : http://www.lukew.com/resources/articles/WebForms_LukeW.pdf © confidentiel / w.illi.am/ 15 mai 2009
  39. 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. 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. 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. 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. 43. SOURCE : Steve Krug, Don't Make Me Think!: A Common Sense Approach to Web Usability © confidentiel / w.illi.am/ 15 mai 2009
  44. 44. SOURCE : http://www.neoinsight.com/newsletter/0903.html#0903get-there-mode © confidentiel / w.illi.am/ 15 mai 2009
  45. 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. 46. Règle # 3 Optimisez , optimisez, optimisez votre contenu Contenu = texte, hyperliens, boutons et images © confidentiel / w.illi.am/ 15 mai 2009
  47. 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
  48. 48. © confidentiel / w.illi.am/ 15 mai 2009
  49. 49. © confidentiel / w.illi.am/ 15 mai 2009
  50. 50. © confidentiel / w.illi.am/ 15 mai 2009
  51. 51. © confidentiel / w.illi.am/ 15 mai 2009
  52. 52. Ouf… © confidentiel / w.illi.am/ 15 mai 2009
  53. 53. Oui, la vie est Bell ;) © confidentiel / w.illi.am/ 15 mai 2009
  54. 54. © confidentiel / w.illi.am/ 15 mai 2009
  55. 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
  56. 56. © confidentiel / w.illi.am/ 15 mai 2009
  57. 57. Où est Charlie le bouton ? © confidentiel / w.illi.am/ 15 mai 2009
  58. 58. Où est le bouton acheter ? © confidentiel / w.illi.am/ 15 mai 2009
  59. 59. Où est le bouton acheter ? © confidentiel / w.illi.am/ 15 mai 2009
  60. 60. Où est le bouton acheter ? © confidentiel / w.illi.am/ 15 mai 2009
  61. 61. © confidentiel / w.illi.am/ 15 mai 2009
  62. 62. © confidentiel / w.illi.am/ 15 mai 2009
  63. 63. © confidentiel / w.illi.am/ 15 mai 2009
  64. 64. SOURCE : http://www.lukew.com/resources/articles/PSactions.asp © confidentiel / w.illi.am/ 15 mai 2009
  65. 65. À lire ! © confidentiel / w.illi.am/ 15 mai 2009
  66. 66. Avant de conclure… Qui est responsable de l’expérience utilisateur ? © confidentiel / w.illi.am/ 15 mai 2009
  67. 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. 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. 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
  70. 70. Bonne expérience utilisateur ;) Merci ! © confidentiel / w.illi.am/ 15 mai 2009

×