Apple Watch : nouveau challenge pour les ergonomes et designers !

L’Apple Watch représente un nouveau challenge pour les ergonomes et les designers, un prolongement complexe de l’ergodesign responsive.

La surface d’écran beaucoup plus petite, à peine 6,5% (!) de la surface de l’écran d’un iPhone 6, impose une limitation forte des données affichées. Cela oblige les concepteurs à se concentrer uniquement sur l’essentiel des informations à fournir au utilisateurs : quelques images et pictogrammes, quelques mots. Il faut donc que les messages soient compris avec extrêmement peu de ressources, un vrai challenge.

La nouvelle gesture, due au port du device au poignet, ainsi que la présence d’une couronne tournante et d’un bouton unique, apporte également un challenge en terme d’ergonomie. Il s’agit de permettre la navigation et la compréhension des contenus avec très peu de fonctionnalités de navigation disponibles : le scroll vertical avec la couronne, le clic au bouton, ainsi que le scroll au doigt et le swipe horizontal. Cela implique une refonte du paradygme de navigation, et là encore une simplification extrême des chemins de navigation et des fonctionnalités mises à disposition.

Enfin, la réflexion sur la diffusion des contenus et la mise à disposition des fonctionnalités doit être entièrement revue : il ne s’agit plus de réfléchir « Mobile first », mais bien « Handy first ». Les utilisateurs de ce nouveau device doivent avoir d’un coup d’œil les informations essentielles à leurs activités, et d’une pression de doigt l’accès aux fonctionnalités clé dont ils ont besoin.

Les ergonomes et les designer peuvent prendre pied dans ce nouveau monde des montres connectées en déclinant leur expertise acquise dans le domaine du mobile, et en utilisant les mêmes outils de conception et de maquettage. En gardant l’esprit ouvert, et en étant réceptif et attentif aux réels besoins des utilisateurs, tout est permis !

De nombreuses ressources commencent à être disponibles pour les ergonomes et les designer concernant l’Apple Watch. Les « Human Interface Guidelines » Apple en ligne sont un bon point de départ : https://developer.apple.com/watch/human-interface-guidelines/

Les templates PSD pour les designer sont dans la rubriques « Resources » : https://developer.apple.com/watch/human-interface-guidelines/resources/

Merci pour votre lecture, à bientôt avec des exemples pratiques de conception et de design Apple Watch !

Le ROI (retour sur investissement) en ergonomie : définition et introduction

Bonjour, et bienvenue dans cet article consacré à l’évaluation du retour sur investissement en matière d’ergonomie. Prenons ensemble quelques minutes pour comprendre les principes fondamentaux du ROI. Si vous êtes responsable de projet, le ROI est important pour vous. Si vous faites partie d’une Direction, ou d’une Direction Générale, le ROI est important pour vous. C’est logique : si vous dépensez un euro pour mettre en place un projet ou une évolution dans un projet, vous attendez que cela vous rapporte plus qu’un euro. Très bien, mais comment évaluer votre bénéfice ?

Définition du ROI en ergonomie

Pour faire simple, la définition de base du retour sur investissement (ROI), valable quel que soit le secteur, est la suivante :

  1. Je suis dans une situation A, que je peux mesurer avec des indicateurs qualitatifs ou quantitatifs. Je mesure.
  2. Je fais un investissement, pour améliorer ma situation.
  3. Je suis alors dans une situation B, que je mesure à nouveau, avec les mêmes indicateurs que la situation A.
  4. Je calcule le delta entre A et B, pour chaque indicateur.
  5. Si le delta est positif (B mieux que A), alors j’ai un retour sur investissement positif !

Le point clé dans cette définition, qui pose des problèmes insolubles à toutes les personnes qui veulent calculer un ROI, est la mise en place d’indicateurs qualitatifs et quantitatifs. En matière d’ergonomie, c’est assez complexe. Comment qualifier une application plus efficace ? Comment prouver qu’un site web est plus efficace avec une meilleure ergonomie ? Comment démontrer que les utilisateurs seront plus satisfaits avec un site plus agréable à naviguer ? Voici quelques pistes.

Les indicateurs de mesure du ROI

La plupart des projets de calcul ou d’évaluation du ROI en ergonomie échouent par manque d’indicateurs et de mesures factuelles de la situation de départ, ou de la situation d’arrivée. En effet, si je ne mesure pas la situation de départ, mesurer la situation d’arrivée ne me permettra pas de dire si elle est meilleure ou non. Ce sera juste une sensation d’amélioration, et cela ne passe pas très bien dans un PPT destiné à une Direction Générale…

On peut toutefois s’appuyer sur des exemples concrets pour réussir à mettre en place une bonne évaluation de ROI. En voici quelques-uns :

  • Le temps : « Pour réaliser leurs tâches quotidiennes sur le site ou dans l’application, les utilisateurs mettent 10 secondes de moins qu’avant, parce que l’ergonomie a été repensée« . Si vous avez 1000 utilisateurs qui gagnent 1 minute chacun par jour, 20 jours par mois et environ 10 mois par an, alors vous gagnez l’équivalent de plus de 2 postes à plein temps. Soit une économie minimale de 60 000 euros par an. Voilà un vrai retour sur investissement. Mesurez le temps gagné par vos utilisateurs.
  • L’argent : « Depuis que nous avons mis en place une meilleure ergonomie pour le tunnel d’achat, les conclusions de transaction on augmenté de 10%« . C’est factuel, vous vendez plus car votre tunnel d’achat est mieux organisé. Cela implique que vous mesuriez en amont, avant l’intervention ergonomique, le pourcentage de perte que vous avez dans le tunnel d’achat, et bien entendu le chiffre d’affaire généré (ou perdu…). Faites les mêmes mesures, sur une période d’au moins plusieurs mois, après l’intervention ergonomique, et vous saurez ce que vous avez gagné.
  • La satisfaction : c’est probablement l’indicateur le plus compliqué à tracer. Il faut que vous mesuriez avant l’intervention la satisfaction des utilisateurs, par rapport à ce qu’ils doivent faire avec le site ou l’application. Pour être honnête, de nombreuses interventions ergonomiques viennent justement suite à une insatisfaction des utilisateurs… Attention donc à bien la mesurer, par exemple en organisant une enquête de satisfaction, un sondage, ou une réunion utilisateurs suivie d’un compte-rendu. Non seulement vous obtiendrez des indicateurs factuels, mais en plus vous récupérerez surement des pistes d’amélioration, que les utilisateurs vous fourniront. Réalisez la même mesure ensuite, et vous pourrez évaluer le ROI de votre opération.

Conclusion sur le ROI

En conclusion, vous avez avec cet article les premières billes pour aborder sereinement une évaluation de retour sur investissement en matière d’ergonomie. N’oubliez pas que le point clé sera votre capacité à mesurer des indicateurs factuels de la situation de départ, que vous mesurerez à nouveau à l’issue de l’intervention ergonomique. Choisissez les avec soin, et n’hésitez pas à faire des projections de l’évolution de vos indicateurs.

N’hésitez pas à me contacter pour aller plus loin sur ce sujet : pascal.curtil@free.fr

J’espère que cet article vous sera utile, passez une très bonne journée.

Pascal

Une minute pour comprendre l’ergonomie : la loi de proximité

Je commence une série d’articles courts, pour vous aider à comprendre les principes de base de l’ergonomie web. L’idée est de décrire et d’expliquer en quelques lignes une notion particulière, en expliquant à quoi elle sert, et en illustrant avec un ou plusieurs exemples. A vous d’approfondir ensuite, mais en une minute, vous avez l’essentiel.

La loi de proximité veut que des informations physiquement proches les unes des autres ont un rapport entre elles. Pour faire simple, si vous mettez deux éléments proches l’un de l’autre dans un écran, vos utilisateurs vont comprendre qu’ils sont associés.

La loi de proximité est valable pour tout type d’éléments, et d’association d’éléments : les textes, les puces et indentations, les textes avec les boutons, les boutons entre eux, les images avec les textes, les liens avec les images, les blocs entre eux… Voici quelques exemples visuels :

Loi de proximité ergonomie : exemple fnac.com

Loi de proximité ergonomie : exemple fnac.com

 

 

 

 

 

Dans cet exemple, récupéré depuis www.fnac.com, il y a beaucoup de liens sur une petite surface (14 liens pour quelques cm2…). Le lien “Se connecter” est proche du lien “Mon compte”, on les associe donc facilement, pour comprendre qu’en cliquant sur “Se connecter” je vais me rendre à la page d’identification de mon compte.

Cela fonctionne aussi avec les éléments de formulaire. Lequel des deux ci-dessous est le plus facile à remplir ?

☐ OUI     ☐ NON     ☐ PEUT-ETRE

☐       OUI     ☐       NON       ☐       PEUT-ETRE

Les liens et les boutons doivent également avoir une proximité physique pour comprendre facilement qu’ils sont associés :

Loi de proximité en ergonomie : exemple Microsoft

Loi de proximité en ergonomie : exemple Microsoft

 

 

 

 

 

 

Si vous ne respectez pas ce principe de base en affichant les différents éléments de votre interface, vous pouvez facilement amener les utilisateurs à faire des confusions, et finalement à commettre des erreurs d’utilisation. Exemple ci-dessous avec l’interface du dictaphone iOS 7 :

Loi de proximité en ergonomie : exemple Apple

Loi de proximité en ergonomie : exemple Apple

 

 

 

 

 

 

A votre avis, est-ce que le gros bouton rouge est lié au texte “Terminé” ? La bonne réponse est non, mais ce n’est pas intuitif du tout. Le bouton et le texte sont deux éléments actifs différents, mais ils sont si proches et complémentaires qu’on pense facilement qu’ils sont liés. Loi de proximité.

En conclusion, adoptez la loi de proximité comme une bonne pratique, à saupoudrer dans la conception de toutes vos interfaces. Et surtout, si les visiteurs de votre site n’arrivent pas à faire certaines actions (remplir un formulaire, visiter certaines pages…), prenez du recul et posez vous la question de la loi de proximité !

J’espère que cet article vous sera utile, passez une très bonne journée.

Pascal

Connaissance et accès aux utilisateurs finaux : un challenge essentiel de l’ergonomie web

Pourquoi ce titre ? Cela peut vous paraître basique, si vous pensez, à tort ou à raison, que vous avez un accès complet aux utilisateurs finaux dans vos projets. En fait c’est plus compliqué qu’il n’y paraît.

Commençons par définir ce qu’est un utilisateur final. Pour un site internet, de commerce ou d’information, il s’agit bien entendu des visiteurs. Pour une application mobile, ce sont les personnes qui la téléchargent dans le store dans lequel vous l’avez mis à disposition. Pour un intranet, ce sont les collaborateurs de l’entreprise qui y ont accès via leur poste de travail. Pour une application d’entreprise, ce sont les collaborateurs, ou les clients (extranet par exemple) qui vont l’utiliser, que ce soit au quotidien ou de manière ponctuelle. Il est très important que vous ayez conscience des utilisateurs finaux, bien entendu pour l’ergonomie, mais aussi pour la réussite globale du projet. Et il ne suffit pas de savoir qui ils sont, il faut savoir comment ils réagissent et ce qu’ils attendent.

Quand vous mettez en oeuvre un projet, il se peut que vous n’ayez pas accès aux utilisateurs finaux. Cela arrive notamment si vous êtes fournisseur d’un client final, pour lequel vous développez un site ou une application. Votre client peut tout à fait vous dire: “Je connais bien mes clients, mes visiteurs, voici ce qu’ils veulent”. De la même manière pour une application, le product owner chez votre client peut tout a fait vous dire: “Vous n’avez pas accès aux utilisateurs finaux, nous les connaissons très bien, et nous savons ce qu’ils veulent. Dans le process projet vous n’avez pas à être en contact direct avec les utilisateurs”. Il y a deux façons de considérer ces remarques :

  • Vous trouvez cela positif, ça vous fera moins de travail, et finalement c’est le client qui sera responsable de cela. Bien vu, mais c’est une réflexion court terme, et les retours des utilisateurs, si ils sont négatifs, finiront probablement par vous retomber dessus.
  • Vous trouvez cela inquiétant, et c’est à mon avis la bonne attitude. Il faut en faire part à votre client aussi vite que possible. Voyons comment faire et comment trouver le bon argumentaire ci-dessous.

Le top 7 des mauvaises raisons de ne pas avoir accès aux utilisateurs, qui sont le plus souvent données par les commanditaires:

  1. Je connais parfaitement les besoins des utilisateurs, pas la peine de leur demander ce qu’ils veulent.
  2. Dans le process projet, vous n’avez pas accès aux utilisateurs finaux.
  3. Comment voulez-vous qu’on sache ce que veulent les utilisateurs finaux, on créé un site grand public.
  4. Les utilisateurs savent déjà ce qu’ils auront à faire dans l’application, on ne les dérange pas pour savoir si ça leur convient.
  5. De toute façon, les utilisateurs ne savent pas ce qu’ils veulent, donc on décide pour eux.
  6. On a déjà étudié les statistiques de fréquentation du site actuel, donc c’est bon, on sait ce qu’ils font sur le site.
  7. Les utilisateurs ont déjà exprimé leurs besoins dans le cahier des charges et les spécifications fonctionnelles, on ne revient pas là-dessus.

Dans un premier temps, vous pouvez demander à votre client de confirmer, et de vous fournir des documents si nécessaire, que les besoins clients ont bien été pris en compte. Cela n’est pas une solution, mais au moins vous êtes couverts.

Ensuite, au chapitre des actions possibles pour sortir de cette situation, vous pouvez essayer cela :

  • Faites un mini audit ergonomique du site ou de l’application, de manière à mettre en valeur les fonctions les plus accessibles et les plus efficaces, telles que portées au cahier des charges ou dans les spécifications. Puis demandez à votre client si c’est bien cohérent avec sa vision
  • Rédigez une fiche de besoin synthétique (un recto A4 suffit), avec des questions basiques : quelles sont pour vous les fonctionnalités les plus importantes ? Qu’est-ce que vous utilisez au quotidien ? Comment vous utilisez le site ? Quelles améliorations vous faciliteraient la vie ?… puis soumettez cette fiche à votre client, en lui demandant de faire une enquête auprès des utilisateurs. Dites lui que c’est également valorisant pour lui dans le cadre de la conduite du changement associée au projet, puisque cela montre qu’il s’intéresse réellement aux besoins des utilisateurs.
  • Si les statistiques de fréquentation sont disponibles, déterminez à partir de cela les principaux chemins de visite (c’est simple notamment avec Google Analytics). Ils vous mèneront à la connaissance de ce qu’ont réellement fait les utilisateurs sur le site. Croisez cela avec les objectifs client. Si des différences apparaissent, vous aurez alors de quoi convaincre votre client d’étudier réellement les besoins des utilisateurs finaux.
  • Pour répondre à l’objection “les utilisateurs ne savent pas ce qu’ils veulent”, c’est très simple : effectivement, les utilisateurs ne savent pas toujours ce qu’ils veulent, mais ils savent très souvent ce qu’ils ne veulent pas ! Et en étudiant ce qu’ils ne veulent pas, vous trouverez ce dont ils ont besoin.
  • Dans le cadre de la création de site ou application grand public, pour lequel vous n’avez pas de recul en matière d’utilisation, de besoin, de statistiques, vous pouvez utilisez la méthode des Personas. Un article consacré aux personas détaille ce sujet, voici en quelques mots de quoi il s’agit. Vous devez créer un ou plusieurs personnages imaginaires, qui seront des utilisateurs de votre site. Imaginez leur vraie vie, quand ils viennent sur le site, pourquoi faire, qu’est-ce qui leur plait, de quoi ils ont envie, quelles sont leurs contraintes, qu’est-ce qui les influence… vous dressez ainsi des portraits d’utilisateurs, qui vous aident à déterminer de quelle manière répondre à leurs besoins.

En tant que prestataire, si votre client n’entend pas ces arguments, vous n’avez d’autre choix que de faire le projet sans ces éléments. Préparez vous a des ajustements par la suite.

En tant que client, je pense qu’il est important d’assister au mieux vos fournisseurs, de les challenger, mais aussi de les aider à comprendre ce que veulent vraiment vos utilisateurs et vos clients. C’est vous qui les connaissez le mieux, mais ce sont eux qui savent de quoi ils ont besoin.

Voilà pour cet article, vous avez maintenant quelques clés pour mieux accéder aux utilisateurs finaux et mieux comprendre leurs besoins. Bonne journée, à bientôt.

Pascal

Intégrer l’ergonomie au bon moment dans le process projet

Un des points clé de l’efficacité de l’ergonomie, appliquée au web ou à un logiciel, c’est le moment où vous décidez d’intégrer le travail d’ergonomie dans le projet. Cela a des conséquences sur la qualité de ce qui sera produit au final, et sur les coûts du projet.

En pratique, on observe plusieurs types de situations classiques :

  • L’ergonomie en mode “pompier: la fréquentation du site chute, les utilisateurs sont mécontents de l’application, ils perdent du temps, le nombre de paniers validés sur un site ecommerce est en baisse, ou pire, les visiteurs n’arrivent pas à commander correctement. A ce moment là, tout bon chef de projet ou directeur de projet se dit : on a dû oublier quelque chose. Ah oui, l’ergonomie ! Ici commence l’intervention en mode “pompier”, qui va en général coûter assez cher au projet. Tout étant déjà conçu et développé, toute modification de l’ergonomie (navigation, organisation des éléments, hierarchie des contenus…) va obligatoirement avoir un impact en terme de charge (il faut modifier les développements), en terme de planning, et en terme de coût. Sans parler des améliorations ergonomiques qu’on ne peut tout simplement pas mettre en oeuvre, car elles remettent en question trop de développements déjà réalisés. Donc en général on pare au plus préssé, en mettant en oeuvre des solutions ayant le meilleur compromis efficacité/coût.
  • L’ergonomie en mode “on fait tout en même temps: on ne sait pas toujours quand intégrer l’ergonomie du le projet. Particulièrement en méthode agile, où les sprints démarrent souvent sur des spécifications mouvantes, et des besoins clients non clairement définis. Donc on positionne l’ergonomie en parallèle du reste, et typiquement en même temps que le graphisme. Pas idéal, puisque normalement le designer prend comme base de travail les maquettes ergonomiques (wireframe) pour positionner les contenus et fonctionnalités dans sa création. Si on fait les deux en même temps, le double travail est inévitable : on va faire des aller-retours de correction ergonomique sur les créations graphiques. Cela fait perdre du temps, puisque des maquettes graphiques sont plus longues et difficiles à modifier que des maquettes ergonomiques.
  • L’ergonomie en mode “on anticipe le besoin: idéalement, et fort heureusement cela arrive, l’ergonomie est intégrée dans le projet dès la phase de conception. De cette manière, on va pouvoir orienter dès la conception le projet vers les utilisateurs, et faire les bons choix en matière d’efficacité. Les arbitrages nécessaires de l’efficacité versus les coûts de réalisation ne seront pas douloureux, puisque le projet n’est qu’en phase de conception. De la même manière, le travail de design graphique sera facilité par la fourniture en amont des maquettes ergonomiques. Qui plus est, si l’ensemble de l’équipe prend la mesure de l’importance de l’ergonomie, le capital confiance produit est intéressant pour tout le monde, car chacun sait en amont de la réalisation que le résultat sera efficace pour les utilisateurs. C’est un élément qu’on néglige souvent, et pourtant un vrai gain pour la motivation de l’équipe.

Bien évidemment, le bon moment pour intégrer l’ergonomie dans le projet et le plus en amont possible ! Pour faire simple, il faut intégrer l’ergonomie dès la phase de conception, et voici pourquoi en quelques points clé :

  • Eviter de tout défaire pour refaire mieux : ne pas mettre l’ergonomie en fin de projet
  • Eviter de faire deux fois la même chose: ne pas faire de l’ergonomie en même temps que le design graphique
  • Au final, ce sont les utilisateurs qui se serviront du site ou de l’application : autant prendre en compte leurs besoins dès le début !
  • Une équipe projet est plus motivée si elle sait qu’elle va produire un site utile et efficace.
  • Si vos utilisateurs n’ont pas de besoins, alors votre projet ne sert à rien. Inquiétez-vous.

J’espère que cet article vous a éclairé, ou au moins donné envie de réfléchir au sujet. N’hésitez pas à réagir ou a poser des questions, le sujet est passionnant. Bonne journée, à bientôt.

Pascal

 

App mobiles & tests : attention à la résolution écran

Un nouvel article pour attirer votre attention sur le fait de bien tester vos apps mobiles sur plusieurs résolutions cibles, en fonction du public auquel vous les destinez.

Un contre-exemple pour illustrer l’importance des tests, trouvé sur l’application mobile de la Banque Postale. L’app est testée sur un très classique iPhone 4S, qui dispose d’une résolution écran 640×960 pixels. Il ne faut pas aller bien loin dans l’application, il suffit de la lancer pour obtenir l’écran d’authentification ci-dessous :

Ergodesign-Pascal-Curtil-Banque-Postale-01-Iphone-4s

Ecran d’authentification Banque Postale

Le logo Banque Postale parfait, le bandeau titre authentification très bien, le champ de saisie de l’identifiant impeccable, mais au moment de saisir le mot de passe, je clique sur les chiffres du pavé numérique, et rien ne se passe. Pas de possibilité de valider le formulaire, pas de bouton « valider », pas de confirmation de ma saisie, je ne vois rien et je ne peux rien faire.

Un problème technique ? Non, juste un problème d’adaptation du formulaire à la résolution écran. En fait, on ne voit pas tout le formulaire sur l’écran d’accueil. Le reste du formulaire se trouve plus bas (cf. illustration 2 ci-dessous) : on voit en bas de l’écran le champ mot de passe, ainsi que les boutons d’action « corriger », « effacer » et « valider ».

Ce problème peut paraître tout à fait anodin, notamment pour les utilisateurs expérimentés, mais il peut se révéler très gênant pour les utilisateurs moins familiers de cette app, qui peuvent tout simplement rester bloqués sur l’écran d’authentification. Plutôt embêtant quand il s’agit de gérer son compte bancaire.

Ergodesign-Pascal-Curtil-Banque-Postale-02-Iphone-4s

Partie basse du formulaire

La résolution écran d’un iPhone 5S est de 1136×640 pixels, donc pas plus de pixels en hauteur, donc pas de meilleur résultat pour la visualisation du formulaire. Donc même problème.

Ce type de soucis peut être détecté très en amont dans le projet, dès que vous réalisez les maquettes ergonomiques, ou à défaut les maquettes graphiques. Le plus simple est de maquetter les résolutions d’écran les plus courantes sur les smartphones et tablettes que vous visez. Vous pouvez vous contenter de 3 ou 4 résolutions, par exemple 960×640 (iPhones récents), 1280×720 (Samsung Galaxy S3), 1024×768 et  2048×1536 (iPads et iPad retina). Une fois que vous avez vos gabarits de maquette, Photoshop par exemple, il vous suffit d’appliquer une règle ergonomique de base, reprise par le responsive design : qu’est-ce que l’utilisateur a besoin de voir dans cet écran ?

Dans le cas présent, en utilisant cette règle de bon sens, on peut répondre : le logo, le titre de l’écran, le champ de saisie du login, le pavé de saisie du mot de passe, le champ de saisie du mot de passe, le bouton « valider », le bouton « effacer », le bouton « corriger ». Une fois que vous avez ces éléments, à l’ergonome et au graphiste de les répartir d’une manière efficace dans l’écran, de manière à ce qu’ils apparaissent tous.

Dans notre exemple, une façon de répondre à cela serait de limiter la taille des boutons du pavé de saisie du mot de passe. Ou de réduire la largeur du champ de saisie de l’identifiant, pour placer le bouton radio « mémoriser l’identifiant » à droite du champ et non plus en dessous. Troisième possibilité, remonter le bandeau titre « Authentification » en haut de l’écran, en insérant le titre entre le logo Banque Postale et le bouton « annuler ».

En conclusion, rien de compliqué : c’est simple de se tromper, on ne s’en aperçoit pas toujours si on ne maquette pas et si on ne teste pas sur plusieurs résolutions d’écran. D’où l’importance des tests et du maquettage. Les corrections et ajustements seront beaucoup moins coûteux si vous les faites en amont de la réalisation technique du projet.

J’espère que ce nouvel article vous a apporter de la connaissance, passez une très bonne journée.