Ergonomie des interfaces web

1 039 vues

Publié le

Sensibilisation aux questions d'ergonomie et d’expérience utilisateur.
Cette présentation sert d'ouverture pour un séminaire de 2 jours auprès des futurs ingénieurs informatique du Cs2i de Nevers

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 039
Sur SlideShare
0
Issues des intégrations
0
Intégrations
18
Actions
Partages
0
Téléchargements
29
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Bonjour à tous
    Je me présente, je m’appelle Renaud Biemans, je suis votre intervenant pour ces deux jour et nous allons parler de l’ergonomie des interfaces
  • Je me présente rapidement, je travail comme ergonome à Clermont-Ferrand dans une société qui édite des logiciels pour l’industrie.
    Bien que ce soit un logiciel extrêmement complet et novateur et ses créateurs se sont rendu compte que beaucoup de fonctionnalités étaient sous-utilisées.
    Mon rôle est donc de rendre toutes les fonctions du logiciels accessible au plus grand nombre.
  • Ok c’est parti
  • Première question toute légitime, qu’est ce que l’ergonomie ?
    (si ils ne réponde pas, préciser)
    Je ne vous demande pas la def du dico mais pour vous, qu’est ce que ça vous évoque ?
  • Et ajouter que ça ne s’applique pas qu’aux interfaces. L’ergonomie s’appliquait à tous les outils du quotidien
  • Un marteau c’est l’exemple de l’objet ergonomique, c’est adapaté à l’utilisation que l’on doit en faire
  • Le mug aussi est assez pratique, on sait immédiatement comment s’en servir, il n’y a pas de superflu
  • C’est ergonomique et innovant
  • C’est assez rapide et largement répandu ce qui est un avantage mais le branchement est tout sauf ergonomique :
    - Impossible de savoir de l’extérieur quel sens est le bon
  • Pas bien mais ça dépend du contexte,
    Champolion n’aurait pas de difficulté par exemple
  • On se rapproche de notre sujet
  • Le captcha,
    Pas pratique
    Ici, caractère non lisibles

    Il ne faut pas croire que c’est e seul moyen de différencier des humain des robots
    Exemple du timer
  • Deuxième question, à quoi sert l’ergonomie ?

    Rendre les utilisateurs plus efficaces et plus heureux
  • Bonne réponse
    Mais a quoi ça sert de rendre des utilisateurs heureux .
    Ça rend les utilisateurs plus efficaces et plus heureux
  • Et bien rendre ls utilisateurs heureux c’est tout simplement le meilleur business model qui soit
    Vous aurez beaeu sortir un produit et passer des millions en marketing, ça restera un flop
  • On ne compte plus les échecs commerciaux liés à une mauvaise ergonomie.
    Si ce n’est pas facile à utiliser, on ne l’utilise pas
  • On va prendre un exemple concret en faisant un petit match : chrome versus Internet explorer
    Qui parmi vous utilise Chrome comme navigateur principal, IE ?

    Et bien le reste du monde aussi. Ce n’est pas grace à la pub que chrome s’est imposé, c’est parce qu’il est le meilleur
    Donc l’ergonomie et la qualité du projet décide de son succès

    Mais est ce que ce n’est lié qu’à l’ergonomie ?
    Non, aussi à la performance, la stabilité, … beaucoup de paramètres
    Donc l’ergonomie de suffit pas, pour plaire à l’utilisateur il faut énormément de choses dont l’ergonomie n’est qu’une portion.
  • Vous connaissez peut être déjà la pyramide de maslow
  • et bien voici la pyramide adapté à l’utilisateur
    Qui décrit les besoins de l’utilisateur
    Présenter les fonctions 1 a une

    En tant que dev vous pouvez vous occuper des 3 premiers, c’est déjà très important
    Exemple « le bon coin »
    Ebay

    Et la plupart des site se plantent au niveau de l’ergonomie
    Mais vous voyez l’ergonomie ce n’est qu’une petite partie de ce qui compte
  • L’autoroute est une solution ergonomique :
    Les voies sont séparées = sécurité
    Très bonne visibilité
    On roule vite
    On peut manger et repartir rapidement
  • Une jolie route de campagne constitue une expérience bien plus agréable et mémorable
    Mais moins pratique
    Donc le top serait d’avoir une route aussi efficace que l’autoroute et aussi agréable que le chemin de campagne
  • Enfin, l’ergonomie qui s’en charge ?
  • He ben jusqu’à maintenant pas grand monde

    Le travail se divise entre les chef de projet , le marketing, les designers et les développeurs
    Le problème c’est que chacun de ces profils à d’autres idées en tête quand il voit un nouveau projet
  • Pour le chef de projet, c’est un planning et des ressources à tenir si il veut que le big boss soit fier de lui
  • Pour le designer c’est l’occasion de laisser parler sa créativité et de créer une vraie œuvre d’art
  • Pour le développeur c’est l’occasion d’exprimer son savoir faire et de se lancer de nouveau défi
  • Je caricature bien sur mais dans tout ça qui se soucie de l’utilisateur ? Qui se soucie que ce soit simple ?
  • Si ce n’est pas eux, ça doit être vous

  • On attaque le vif du sujet.
    Il y a peu de choses à savoir mais ça vous permettra de déduire beaucoup de chose

  • John rtukey est un des plus grands statisticien du 20ème siècle
    c’est que le plus important est de bien définir le probleme et de se concentrer sur la solution

    et le vrai probleme dans notre cas c’est l’utilisateur, tout le projet ne sert qu’à le contenter donc il ne faut jamais l’oublier.
  • La meilleure manière de se concentrer dessus c’est de se mettre à sa place.
    Oubliez que vous êtes développeur, designer ou CdP. Vous êtes juste un utilisateur qui arrive sur le site pour la première fois. Que voulez vous ?
  • Les plus grands succès technologique on vu le jour comme ça.
    Vous connaissez l’histoire du walkman, je suis pas sur que vous en ayez utilisé mais c’est le patron de sony qui jouait au golf et qui a demandé a ses ingénieurs de trouver une solution pour qu’il puisse écouter la musique. Ils s’est comporté comme un utilisateur capricieux.
  • Un autre bon exemple c’est celui de la tente décathlon qui se déplie en 2sec.
    Avant ça les ingénieurs avaient inventé des tiges en fibre de verre avec un système de clipsage.
    Ils se sont mis à la place des utilisateur et il se sont dit, j’aimerai prendre ma tente et pchuit…qu’elle soit prête
  • Et dans un domaine qui nous concerne plus, l’exemple des mise à jour. Personne n’aime faire des mises à jour.
    Si c’est mieux tu l’installes sinon tu l’installe pas.
    Et chrome par exemple a complètement eradiqué les mises à jour et c’est tant mieux.
    Tout ce qui saoule les utilisateur aura bientôt disparu
  • C’est ça qui est beau avec l’ergonomie c’est qu’en réfléchissant et en vous basant sur votre expérience vous pouvez déduire énormément de chose.
    Steve Krug, un des plus grand spécialiste de l’ergonomie web dit qu’il a un Master en bon-sens.
    On en a pas forcément tous autant mais a force de se questionner ça se développe vite
  • Donc un petit exemple tout simple, le champ de recherche.
    Selon vous, quel est le plus simple ?
    Le 3 effectivement, pourquoi ?
    Moins de texte à lire
    Action directement positionnée sur le bouton
    Plus simple et plusintuitif.

    Bon est ce qu’il y a besoin d’etre ergonome pour ça ? Non
    Il suffit de se poser la question

  • Bon comme vous êtes fort, un peu plus difficile

    Solution 3, la plus épurée et le bouton suffit pour savoir quelle action est effectuée
  • Le principale reproche que l’on fait aux site c’est qu’ils sont trop compliqués à utiliser et la plupart du temps la solution réside dans la simplification.
    Vous savez pourquoi Google a percé avec son moteur de recherche ?
    Parce qu’a l’époque ça ressemblait à ça
  • Et ils en ont barré 2
    Tout est dit.
  • Parce qu’avant la recherche ressemblait
  • Ou à ça
  • Et que google a proposé ça
    Il y avait juste ce dont on avait besoin,
    on était pas agressé à l’ouverture de la page
    Et ça charge très vite
    Donc tout le monde en a fait sa page de démarrage
  • Et tout va dans le même sens.
    On a souvent l’impression que l’utilisateur veut avoir le choix, en réalité il préfère que ce soit le plus simple possible
  • Par ce qu’on parle beaucoup d’interface homme-machine mais le problème dans les interface homme machine …
  • c’est la machine
  • Quand vous utilisez internet, imaginez que vous êtes dans la vraie vie, que l’application ou le site est une personne et vous verrez immédiatement ce qui cloche.
    Je vais vous montrer une petite vidéo de Google qui illustre ça parfaitement
  • Alors il y a des marques qui essaye de simuler l’interaction humaine sur leur site mais c’est généralement complètement raté
    Plus énervant qu’une machine, c’est une machine qui veut se faire passer pour un humain

  • Quand vous n’avez pas de connexion, Google chrome vous affiche un dinosaure pour faire allusion à la préhistoire
    Un logiciel qui vous charie, c’est fun non ?
  • Dans la manière de parler au gens aussi il faut mettre un peu de vie
  • Ça se joue beaucoup sur les message d’erreur aussi. Dans la manière de communiquer avec l’utilisateur
  • Enfin un dernier exemple qui achèvera de vous convaincre
    Google et Apple sont très fort pour ça
    Sur n’importe quel ordi vous avez une petit lumière qui clignote quand il est en veille, c’est bien, c’est ergonomique
  • Apple est allé beaucoup plus loin car la led va scintiller très lentement et son rythme est basé sur la respiration humaine au repos.
    On a donc instinctivement l’impression que l’ordinateur dort.
    En plus d’être ergonomique, c’est presque émotionnel et ça change tout
  • Dernière règle, comme je vous le disait, l’ergonomie n’est pas une science exacte, on ne sort pas une super ergonomie du premier coup.
    Vous avez beau mettre des centaines d’ergonome sur un projet et bien vous pourriez obtenir ça
  • On a vu plus tot qu’une des regles de l’ergonome c’est de savoir se tromper et se remettre en question.
    Pour ça il ne faut pas hésiter à mettre son travail à l’epreuve
    Et la seule bonne manière de le faire c’est grace aux tests utilisateur.
    Vous vous rappeler windows 8; peut-etre qu’il l’ont testé et qu’il se sont rendu compte que c’était une catastrophe mais il n’ont pas utilisé cette info pour recadrer leur travail.

  • Windowsz 8 est un échec commercial, et pourtant ils ont fait des choix et sont allé jusqu’au bout
    Et je peux vous assurer qu’une armée d’ergonome a passé des heures sur ce projet.
    Comment ont-ils pu rater pendant des années ce que tous les utilisateurs ont vu durant les première 24h de leur utilisation ?

    Et bien parfois le fait de se mettre à la place des utilisateurs ne suffit pas. C’est pourquoi il faut tester votre travail.
    Microsoft aurait pris une journée pour faire des tests sur 10 utilisateurs et ils auraient pu anticiper cela.

  • Et ça ne leur pas beaucoup servi de leçon puisqu’ils ont recommencé avec la xBox one en présentant des caractéristiques à fauire hurler n’importe quel jour : connexion obligatoire, pas de marché de l’occasion etc.
    Il a fallu la présentation officiel et la sanction publique de la communauté de joueur pour changer leur fusil d’épaules.
    Mais pourquoi avoir attendu ?
    Ils auraient testé les réactions des joueurs en amont, ils auraient pu éviter la catastrophe de leur première présentation. Et c’est sony qui en a profité.
  • Vous allez me dire que c’est propre à Microsoft mais dans certain cas même avec la meilleure volonté du monde il y a moyen de complètement se planter
    Je vais vous raconter une autre histoire, c’est un entrepreneur américain qui discutait avec un ami malvoyant et qui a appris qu’il n’existait pas de montre vraiment pratique pour les aveugles, les seuls montres existantes utilisait une voit de synthèse pour lire l’heure lorsqu’on appuie sur un bouton. Mais c’est n’est pas discret. Si on est dans un endroit bruyant ou même si on est avec des amis.
    Il a donc travaillé sur le prototype que vous voyez ici et qui permet en utilisant le toucher de connaitre l’heure.
    Génial, il a déposé un brevet, prêt à faire un malheur avec sa montre.

    Mais comme il est consciencieux il a quand même demandé à des malvoyant ce qu’ils en pensait et vous savez ce qu’ils ont demandé ?

    Est-ce qu’elle est belle ?
    Bien qu’ils soient complètement non-voyant, ils tenaient pour la grande majorité à ce que cette montre soit jolie, design et qu’elle claque.
    Quand on y pense c’est vrai, ce n’est pas parce qu’on ne se voit pas qu’on n’a pas envie d’avoir la classe. Mais ce genre de remarque est quasi impossible à anticiper.
    Il n’y a que la mise à l’epreuve d’un produit auprès de vraix utilisateurs qui peut vous permettre d’améliorer votre produit
  • Suite à ça ils ont fait appel à un vrai designer pour faire une montre classe.
    Cette montre telle quelle est un énorme succès, je ne suis pas sur que ça aurait été de le cas sans cette refonte du design.
    La morale de l’histoire : vous avez beau etre sur que vous faites les choses comme il faut, vous n’etes pas à l’abri de vous tromper.
    Pour faire les choses bien, testez, améliorez, testez encore, améliorez encore.
  • La morale c’est qu’on a beau passer du temps sur un projet, on aura jamais la garantie

    L’ergonomie est un processus itératif, ça ne marchera jamais du premier coup et au plus vous tester et au lus vous testez tôt, au moins vous risquez de faire un bide
  • On a vu que l’une des regle est de se concentrer sur l’utilisateur.
    Donc on va commencer par là. Quelles sont les règles de l’utilisateur
  • Enfin… pour l’utilisateur c’est quand même beaucoup plus simple
  • Enfin, une dernière règle :
  • Enfin, une dernière règle :
  • Enfin, une dernière règle :
  • Enfin, une dernière règle :
  • Enfin, une dernière règle :
  • Enfin, une dernière règle :
  • Dans la tete de l’utilisateur c’est très simple et vous etes exactement pareil quand vous surfez sur le web

    L’utilisateur reste 2 sec sur un site pour décider si il va poursuivre ou pas, il n’a pas le temps de lire ou de reflechir, il va se baser sur ses automatismes
    En plus sur internet la concurrence est à 2 clic de distance
  • Donc quand vous créez un site qui ressemble à ca
  • Ce que vous l’utilisateur en 2sec c’est ça
    Et en fonction de ca il doit décider si ça vaut le coup ou pas
  • On a vu que l’une des regle est de se concentrer sur l’utilisateur.
    Donc on va commencer par là. Quelles sont les règles de l’utilisateur
  • Une navigation ça commence un peu comme dans un jeu video
    Vous démarrez avec une jauge pleine de bonne volonté
  • Une navigation ça commence un peu comme dans un jeu video
    Vous démarrez avec une jauge pleine de bonne volonté
  • Une navigation ça commence un peu comme dans un jeu video
    Vous démarrez avec une jauge pleine de bonne volonté
  • Une navigation ça commence un peu comme dans un jeu video
    Vous démarrez avec une jauge pleine de bonne volonté
  • Une navigation ça commence un peu comme dans un jeu video
    Vous démarrez avec une jauge pleine de bonne volonté
  • Une navigation ça commence un peu comme dans un jeu video
    Vous démarrez avec une jauge pleine de bonne volonté
  • Une navigation ça commence un peu comme dans un jeu video
    Vous démarrez avec une jauge pleine de bonne volonté
  • Une navigation ça commence un peu comme dans un jeu video
    Vous démarrez avec une jauge pleine de bonne volonté
  • Une navigation ça commence un peu comme dans un jeu video
    Vous démarrez avec une jauge pleine de bonne volonté
  • Une navigation ça commence un peu comme dans un jeu video
    Vous démarrez avec une jauge pleine de bonne volonté
  • Avec ces 5 règles on va pouvoir aiguiller nos choix
  • Dans la tete de l’utilisateur c’est très simple et vous etes exactement pareil quand vous surfez sur le web

    L’utilisateur reste 2 sec sur un site pour décider si il va poursuivre ou pas, il n’a pas le temps de lire ou de reflechir, il va se baser sur ses automatismes
    En plus sur internet la concurrence est à 2 clic de distance
  • Ok, on va pouvoir passer à la conception à proprement parlé
  • Ergonomie des interfaces web

    1. 1. L’ergonomie des interfaces Licences Bac +3, Cs2i de Nevers
    2. 2. C’est qui ? Renaud Biemans UX Designer Clermont-Ferrand
    3. 3. L’ergonomie
    4. 4. L’ergonomie C’est quoi ?
    5. 5. Adapter l’outil à l’utilisateur Et non l’inverse Définition selon Steve Krug Faire en sorte que ça marche bien et qu’une personne moyenne sans compétences ou expérience puisse l'utiliser sans être frustrée
    6. 6. Bien ou Pas bien ?
    7. 7. L’ergonomie Pourquoi ?
    8. 8. Utilisateur heureux
    9. 9. Utilisateur heureux Produit fructueux
    10. 10. Une mauvaise expérience utilisateur peut faire échouer n’importe quel projet
    11. 11. Mais aussi en assurer le succès! Demandez vous quel navigateur vous utilisez et pourquoi ?
    12. 12. Les besoins de l’être humain D’après Maslow
    13. 13. Les besoins de l’utilisateur
    14. 14. Fonctionnel
    15. 15. Mémorable
    16. 16. L’ergonomie C’est pour qui ?
    17. 17. Chef de projet
    18. 18. Graphiste
    19. 19. Développeur
    20. 20. Mais qui se soucie de l’utilisateur ?
    21. 21. Il faut que tout le monde s’en soucie À commencer par vous
    22. 22. Vous avez déjà la responsabilité des 2 premières couches de la pyramide. Vous êtes donc en première ligne.
    23. 23. Les 5 règles de l’ergonome
    24. 24. Une réponse approximative au bon problème vaudra toujours mieux qu’une bonne réponse à un problème approximatif. John Tukey
    25. 25. Règle 1 Se concentrer sur le besoin de l’utilisateur
    26. 26. Les mises à jour : Un problème de développeur que l’on impose trop souvent à l’utilisateur
    27. 27. Règle 2 Surtout du bon-sens
    28. 28. Règle 3 Simplifier, Simplifier, Simplifier
    29. 29. Règle 3 Simplifier, Simplifier, Simplifier
    30. 30. Règle 4 Soyez humain
    31. 31. Interface homme-machine
    32. 32. Les mauvais exemples
    33. 33. Les bons exemples
    34. 34. La plupart des ordinateurs ont un indicateur de veille purement fonctionnel
    35. 35. Chez Apple on utilise une veilleuse qui imite le rythme de la respiration humaine
    36. 36. Règle 5 Se remettre en question
    37. 37. « C'est le propre de l'homme de se tromper seul l'insensé persiste dans son erreur. » Cicéron
    38. 38. Produire TesterApprendre
    39. 39. Les règles de l’utilisateur
    40. 40. Les règles de l’utilisateur La
    41. 41. JE NE VEUX PAS RÉFLÉCHIR !
    42. 42. JE NE VEUX PAS RÉFLÉCHIR !
    43. 43. JE NE VEUX PAS RÉFLÉCHIR !
    44. 44. JE NE VEUX PAS RÉFLÉCHIR !
    45. 45. JE NE VEUX PAS RÉFLÉCHIR !
    46. 46. JE NE VEUX PAS RÉFLÉCHIR !
    47. 47. LA règle de l’utilisateur Je ne veux pas réfléchir • Tout doit être facile • Je ne lis que ce qui m’intéresse • Je clique en me fiant à mon instinct • Si c’est trop compliqué je ne l’utilise pas
    48. 48. Ce que vous concevez En pensant que l’utilisateur lira tout
    49. 49. Ce que l’utilisateur voit avant de décider votre site l’intéresse
    50. 50. De quoi parle ce site ?
    51. 51. Ce qui se passe dans la tête de l’utilisateur ?
    52. 52. Réserve de bonne volonté Résistance à l’agacement
    53. 53. Où sont les souris ?!
    54. 54. Ah les voilà
    55. 55. C’est quoi tout ça ? Je veux juste une belle souris
    56. 56. Peut être en dessous ?
    57. 57. C’est même pas des souris !!!
    58. 58. Continuer sur un autre site ? Oui Non
    59. 59. Vous savez tout !
    60. 60. Les 5 règles de l’ergonome 1. Se concentrer sur l’utilisateur 2. Faire preuve de bon sens 3. Simplifier 4. Rester humain 5. Se remettre en question
    61. 61. La règle de l’utilisateur 1. Je ne veux pas réfléchir Tout doit être facile Je ne lis que ce qui m’intéresse Je clique en me fiant à mon instinct Si c’est trop compliqué je ne l’utilise pas
    62. 62. Renaud Biemans UX Designer renaudbiemans@gmail.com

    ×