Ergonomie, Expérience Utilisateur, Design Thinking
General
la profondeur de traitement et la mémorisation
0Il y a 12 ans
par Yannick Grenzinger
dans Principe de design
Réfléchir profondément sur une information améliore la probabilité que celle-ci sera mémorisée.
Par exemple, considérons deux tâches qui implique d’interagir avec et se rappeler la même information. Dans la première tâche, on demande à un groupe de personnes de localiser des mots clés dans une liste et de les entourer. Dans la seconde tâche, on demande à un autre groupe de personnes de localiser des mots clés dans une liste, de les entourer et de les définir. Les personnes qui ont effectué la seconde tâche se rappellent plus facilement des mots clés parce qu’ils ont du analyser le mot clé à un niveau plus profond.
Ce phénomène de mémoire est le résultat de deux façons par lesquelles l’information est traitée et mémorisée connus comme la répétition de maintenance et la répétition d’élaboration. La répétition de maintenance répète simplement le même type d’analyse qui a déjà été effectuée. C’est la mémorisation qui est faite lorsqu’on répète un numéro de téléphone pour mieux s’en rappeler : aucune analyse additionnelle n’est effectuée. La répétition d’élaboration implique une analyse plus profonde et pleine de sens de l’information. Par exemple, les gens s’engagent dans une répétition d’élaboration quand ils lisent un texte et doivent ensuite répondre à des questions sur la signification du texte. En général, les résultats de ce type de répétition ont des résultats dans les performances de mémorisation 2 à 3 fois meilleurs que celle de la répétition de maintenance.
Elaborative_vs._maintenance_rehearsal
Les facteurs clés qui déterminent à quel profondeur l’information est traitée sont le coté distinctif de l’information, la pertinence de l’information et le degré avec laquelle l’information est élaborée.
L’aspect distinctif fait référence à l’unicité de l’information par rapport à l’information environnante et des expériences précédentes. La pertinence fait référence au degré avec laquelle l’information est perçu comme importante. Le degré d’élaboration fait référence à combien de réflexion est nécessaire pour interpréter et comprendre l’information. En général, un traitement profond de l’information qui implique ces facteurs vont résulter dans le meilleure rappel et rétention de l’information.
Considérer la profondeur de traitement dans le contexte du design quand le rappel et la rétention de l’information est importante. Utiliser une présentation unique et des activités intéressantes pour impliquer les gens pour traiter profondément l’information. Utiliser les études de cas ou encore les exemples pour rendre l’information pertinente pour l’audience. Notons qu’un traitement profond requiert plus de concentration et d’effort qu’une simple exposition et ainsi des périodes fréquentes de repos doivent être incorporer dans la présentation ou dans les tâches.
Pour compléter le sujet des articles en anglais :
Levels-of-processing_effect
Depth Of Processing Model
Learning and memory
Utiliser le Design Thinking pour arreter de construire des logiciels sans valeur
3Il y a 12 ans
par Yannick Grenzinger
dans General
C’est le titre de la conférence donnée par Jeff Patton au QCon London 2011 !
Jeff Patton commence par exposer les faits.
- Typiquement de 50% à 80% des logiciels que nous livrons échouent à atteindre leur objectif.
- Pour quatre projets qui entrent en développement, seulement un arrive sur le marché.
- Au lancement, au moins un produit sur trois échoue malgré l’étude et la planification.
- Selon le Standish Group, 64% des fonctionnalités sont rarement ou jamais utilisées.
- Ce n’est seulement qu’après la livraison que la valeur d’un produit apparait. Par exemple il compare la différence de valeur entre les backlogs (Ensemble des fonctionnalités d’un produit selon la méthodologie Agile Scrum) de l’iPod et du Zune (un des gros échecs de Microsoft).
- Délivrer des logiciels stupides rapidement ne fait que donner plus de logiciels stupides. Il faut donner du sens à ce que nous développons.
Ayant connu de nombreux projets, je ne peux qu’approuver ce constat qui est à la fois un problème pour l’entreprise mais aussi pour la motivation du développeur. C’est pour ça que j’ai très vite compris l’intérêt des visions de l’expérience utilisateur et du design thinking.
Pour Jeff Patton, il faut se concentrer sur les fonctionnalités qui ont du sens voire qui vont changer dans le monde quand le logiciel sera livré. Le but est de minimiser la sortie en maximisant les résultats.
La recherche et l’analyse donne le sens de l’état actuel des choses. Le design imagine le monde différemment de ce qu’il est actuellement.
Il présente ensuite sa façon d’améliorer ce constat selon une méthode itérative qui se base sur quatre étapes :
- comprendre le problème
- identifier des solutions (générer un maximum d’idées !)
- affiner et valider (itérer !)
- créer un plan
Etapes de Design Thinking
Comprendre le problème
C’est apprendre et non seulement recueillir des besoins. Il faut demander aux utilisateurs de raconter des histoires, laisser l’utilisateur vous apprendre leur métier et ensuite donner du sens à ce que l’équipe a apprise.
Représenter les idées permet d’être sûr qu’on s’est bien compris. A travers une discussion et la construction itérative de modèles, on arrive à une compréhension forte et commune. L’idée est donc de résoudre le problème ensemble (comme les pratiques Agiles essayent de mettre en avant).
Il faut aussi régler le problème dans son contexte.
Générer un maximum d’idées pour identifier des solutions
Il faut générer un maximum d’idées, les combiner, etc. Utiliser un tableau pour y dessiner des esquisses est une façon collaborative de générer des idées d’interfaces utilisateurs.
On peut aussi travailler des esquisses individuellement puis ensuite partager ces idées.
Partager les idées générer par le Design Thinking
Itérer pour affiner et valider les solutions
L’itération pour un Agiliste c’est incrémenter ou construire petit à petit. Pour un designer, cela correspond plus à construire une version simple, la valider puis améliorer lentement la qualité et les fonctionnalités.
Il est utile de valider les concepts avec des prototypes (du papiers, des crayons et des ciseaux suffissent), les tester si possible avec de réels utilisateurs en simulant leurs utilisations.
Prototypage dans le cadre du Design Thinking
Planifier pour continuer à apprendre pendant que vous livrez.
Votre plan nécessite des livraisons publiques et privées. Chaque livraison est une opportunité d’apprendre et d’identifier la valeur. Utiliser un développement itératif et incrémental permet de réduire le risque.
Planification liée au Design Thinking
Il fait au passage référence au challenge des marshmallows de TED pour prouver ce concept.
L’outil appellé Story Map raconte l’histoire de votre produit ainsi que son planning de sortie incrémental. Cette Story Map permet d’associer les sorties (la productivité) avec les résultats (la rentabilité).
Ma conclusion est que le Design Thinking associe Expérience utilisateur et Agilité. Il va plus loin que l’agilité car il y associe les principes d’expérience utilisateur pour définir les besoins réels : ceux qui vont assurer le succès d’un logiciel.
Mais la question est-ce que le Design Thinking est envisageable dans le contexte d’une grande partie des entreprises ?
L’expérience utilisateur définit le produit – Peter Merholz
0Il y a 13 ans
par Yannick Grenzinger
dans General
Peter Merholz d’Adaptive Path commence sa présentation en prenant l’exemple de la photographie et de la simplification de l’appareil photo. Il s’attache notamment sur le premier appareil photo de chez Kodac qui a grandement simplifié la prise de vue.
Il pose ensuite la question quel est le plus grand compliment qu’on puisse évoquer à propos d’une interface utilisateur ?
Ce n’est pas le fait qu’elle soit hautement profitable ou quelle ne plante jamais mais qu’elle soit cool, fun, qu’elle suscite l’engouement qu’on en parle à ses amis (par exemple l’iphone).
L’évolution d’un produit est représenté par cette pyramide :
On commence par la technologie et justement l’erreur est de se concentrer sur la technologie
La technologie évolue et ne reste pas un avantage sur la compétition. Il faut en faire plus.
Il prend l’exemple de Vi par rapport à la machine à écrire et les premiers magnétoscopes.
On se concentre ensuite sur les fonctions. On en ajoute de plus de plus pour garder l’avantage par rapport à la concurrence. Cela marche pendant un certain temps, les clients achètent en fonction du nombre de fonctions. Le produit devient tellement compliqué que l’utilisateur ne sait plus quels sont les possibilités.
On obtient alors ca :
Enfin on vient à l’expérience utilisateur car la technologie et les fonctions ne sont plus compétitives. Cela permet de se distinguer de la concurrence. Même Microsoft l’a compris.
Il faut savoir jeter des fonctions et réfléchir continuellement au produit pour trouver la solution belle et élégante qui marche (il cite alors un livre de Steve Jobs écrit en 1984).
C’est un état d’esprit. Tout dépend de la façon dont approche les problèmes qu’on essaye de résoudre ou la façon dont on compte vendre notre produit.
Il prend bien sur l’exemple de la Wii.
Donner une personnalité à son produit pour le rendre plus attractif.
Lors du développement d’un produit, l’erreur la plus classique est de construire le produit et l’expérience utilisateur à partir des données : quels données avons nous ? comment interpréter ces données ? C’est la vision de l’ingénieur.
Il faudrait faire l’inverse concevoir de l’extérieur (utilisateur) vers l’intérieur (données).
On a besoin d’une vision de l’expérience, une liste d’objectifs qui répondent à un besoin de l’utilisateur.
Il prend l’exemple de Google Calendar et de son succès. L’équipe de Google a interviewé plus de 800 personnes pour savoir ce qu’elle voulaient et construire une vision.
Il rajoute l’exemple du Palm Pilot.
Il faut aussi valoriser le système : Déplacer la difficulté pour permettre de simplifier l’expérience de l’utilisateur.
Exemple de l’Ipod : toute la complexité a été déplacée dans Itunes et le store.
Il prend aussi un très bon exemple sur les produits pharmaceutiques (aller aux slides à 37:27) ou encore Flickr.
En conclusion : l’experience utilisateur définit le produit que l’on veut créer.
Design d’un formulaire web – Luke Wroblewski
1Il y a 13 ans
par Yannick Grenzinger
dans General
Résumé de la vidéo Web form design par Luke Wroblewski
Cette présentation est passionnante, bien riche et remplie d’exemples concrets. Je conseille fortement de la voir pour tout ceux qui veulent améliorer l’expérience utilisateur et l’ergonomie de leur formulaire web (et clairement je pense que je vais essayer d’acheter le livre
Première constatation : les formulaires sont souvent mal faits.
Pourtant ils sont une part très importante du net aussi bien pour le client que l’entreprise. Énormément d’actions passent par un formulaire. Ils représentent même le dialogue du client avec l’entreprise.
Ils ont leur role dans :
- le commerce car ils permettent à l’utilisateur d’acheter en ligne et à l’entreprise de maximiser ces ventes
- l’engagement car ils permettent à l’utilisateur d’entrer et de manipuler des informations et à l’entreprise d’accumuler des données et du contenu
- l’adhésion car ils permettent la participation de l’utilisateur et pour l’entreprise d’augmenter le nombre de client et de faire grandir des communautés
Par exemple, le formulaire d’upload des videos de Youtube a été redessiné de nombreuses fois vu sa fonction centrale.
Comment faire de meilleurs formulaires web ? Les dix meilleures pratiques
1 – chemin vers la complétion
Le but premier d’un formulaire est sa complétion en offrant une ligne de visualisation claire.
Ligne de visualisation non claire du formulaire
Ligne de visualisation claire du formulaire
L’exemple ci dessus montre clairement l’importance de l’alignement et de la cohérence pour que l’utilisateur ne se « perdent » pas.
Il faut créer un flux visuel clair.
Il faut montrer à l’utilisateur son avancement par la portée, le progrès ou le statut.
Indicateur de progression pour l'utilisateur
En conclusion, il faut :
- mettre en avant un chemin clair vers la complétion du formulaire
- utiliser des barres de progression pour communiquer la portée, l’état et la position dans le formulaire
- Si besoin de plus de temps ou d’une recherche d’information, fournir une page de départ
- utiliser des indicateurs de progression plus généraux pour les formulaires avec des séquences variables suivant les besoins
2 – l’alignement
Il explique l’alignement des labels : au-dessus, a droite ou encore a gauche.
Le titre au-dessus se révèle le plus rapide pour les données familières mais demande plus d’espace vertical. Il permet aussi plus de flexibilité pour la localisation et les entrées complexes.
L’alignement à droite permet une bonne association entre le label et la zone de saisie, requiert moins d’espace vertical et a une complétion rapide mais il se révèle plus difficile à lire.
L’alignement a gauche est plus pratique pour les données non familières et permet de parcourir rapidement les labels par contre changer la longueur des labels peut invalider l’alignement du formulaire et la complétion est plus lente.
Mixer plusieurs alignement n’est pas bon.
Les labels dans la zone de saisie sont pratiques mais il faut être sur que l’utilisateur se rappellera de la question.
Il faut aussi les utiliser avec modération (formulaire avec uniquement des réponses mais pas de questions ?)
En conclusion, il faut :
- utiliser l’alignement au dessus pour réduire les temps de complétion d’un formulaire avec des données familières
- utiliser l’alignement à droite quand l’espace vertical est limité
- utiliser l’alignement à gauche quand les données ne sont pas familières ou complexes
3 – Les aides et astuces
Elles sont utiles quand :
- le formulaire demandent des données non familière
- l’utilisateur peut se demander pour quel raison cette donnée est demandée
- une manière recommandée de fournir la donnée
- certaines données sont optionnelles
Cependant, les aides et astuces ne doivent pas envahir le formulaire.
Si c’est obligatoire, il faut peut être passer à une solution dynamique.
Par exemple quand l’utilisateur arrive dans le champs, une aide apparait. On peut aussi utiliser un bouton d’aide ou encore faire apparaitre une section d’aide.
Section d'aide à droite dans un formulaire
En conclusion, il faut :
- minimiser le besoin d’aide et astuces pour remplir un formulaire
- favoriser une aide visible et proche qui est plus utile
- utiliser un système activé par l’utilisateur pour formulaire complexe et souvent réutilisé
- utiliser une aide directement inclue dans le champs de saisie à moins que vous ayez beaucoup de contenu (texte, graphique, tableau)
- utiliser un système cohérente si vous avez beaucoup d’aide
4 – validation en ligne
Il faut fournir une validation directement à l’insertion des données, suggérer des données valides ou encore aider l’utilisateur à rester dans les limites.
Il faut aussi bien faire en sorte que les validations soient cohérentes (exemple du « confirm » qui vérifie juste l’égalité des deux champs ou encore ne refait pas la vérification quand la valeur initiale change).
Il compare énormément la qualité d’enregistrement entre Yahoo et Twitter.
Validation du formulaire sur Twitter
Validation du formulaire sur Yahoo
En conclusion, il faut :
- utiliser une validation directement dans le champs de saisie pour les champs de saisie où il y a potentiellement beaucoup d’erreurs
- utiliser des suggestions d’entrées pour lever des ambiguïtés
- communiquer les limites
5 – Actions
Toutes les actions sur un formulaire (bouton) ne sont pas équivalentes.
Par exemple « Effacer tout », « Annuler » et « Retour en arrière » sont des actions secondaires rarement utilisées. « Sauver », « Continuer » et « Soumettre » sont des actions primaires directement responsables de la complétion du formulaire.
Différentier les actions primaires et secondaires dans un formulaire
Il faut les différentier (Gras, taille, couleur, etc..).
En conclusion, il faut :
- éviter les actions secondaires si possible
- faire une distinction visuelle claire entre les actions primaires et secondaires
- aligner les actions primaires avec les champs de saisie pour un chemin de complétion clair
6 – Actions en attente
Certaines actions nécessitent du temps de traitement (soumission de formulaires, calculs, uploads).
Il faut fournir un retour d’informations par exemple désactiver le bouton de soumission le temps du traitement.
On peut profiter du temps d’attente pour afficher des informations.
7 – Erreurs
Quand une erreur se produit, c’est l’information la plus importante du formulaire car elle vous empêche d’aller plus loin.
Indiquer clairement les erreurs et les associer avec le champs responsable.
En conclusion, il faut :
- indiquer clairement qu’une erreur à eu lieu : placement au dessus et contraste visuel
- fournir des actions de correction
- associer le champ erroné avec le message d’erreur
- ne pas hésiter à « doubler » les informations où l’erreur a eu lieue
8 – Les entrées non nécessaires
Chaque question demande aux utilisateurs de la comprendre, de formuler une réponse et d’entrer cette réponse.
Soyez vigilant sur chaque question en se posant ces trois questions :
- Peut elle être enlevée ?
- Peut elle être remise à plus tard ?
- Peut elle être devinée ?
Enlever des informations peut avoir un grand impact sur la complétion d’un formulaire par exemple le type de carte de paiement n’est pas nécessaire.
Utiliser le code postal pour renseigner directement la ville et l’état.
Il ne faut pas non plus compliquer le traitement dans le seul but d’enlever question.
9 – l’organisation du formulaire
Cela dépend. Il faut essayer d’avoir une conversation, de parler d’une seul voix ou encore d’utiliser les coupures naturelles.
Luke montre un superbe exemple d’un « simple » formulaire de contact qui au fil des besoins (ingénieurs, marketing, légal…) devient très complexe et inutilisable.
Exemple d'un formulaire sous forme d'une conversation.
En conclusion, il faut :
- prendre le temps d’évaluer chaque question que l’on pose
- assurer la cohérence
- se forcer à être succinct
- utiliser une seule page web si le formulaire peut se diviser en plusieurs sujets courts
- utiliser une seule longue page quand il y a de nombreuses questions mais sur un seul sujet
- au contraire utiliser plusieurs pages quand un formulaire contient de nombreuses questions avec peu de sujets
10 – L’engagement graduel
Un bouton de soumission avec un label en rapport avec le titre de la page.
D’après Luke, les formulaires d’inscription doivent disparaître.
Les services web devraient provoquer l’engagement :
- expliquer ce que fait le service
- permettre aux personnes de l’utiliser
- avoir l’inscription comme résultat
En conclusion, il faut :
- essayer d’éviter les formulaires
- mettre en avant le cœur de votre service avec le moins d’interaction possible
- faire en sorte que l’utilisateur réussisse du premier coups
- , si vous générer des comptes automatiquement, faire en sorte que l’utilisateur puisse y accéder des façon claire
- utiliser une seule longue page quand il y a de nombreuses questions mais sur un seul sujet
- ne pas distribuer divers champs de saisie dans des formulaires sans prendre en compte l’engagement
infographie contre visualisation des données
3Il y a 13 ans
par Yannick Grenzinger
dans General
Comme il est assez intéressant, je le résume ici :
Une visualisation de données est une représentation graphique de données quantifiables au moyen d’une carte, d’un tableau ou autre diagramme. Bien qu’elle puisse être créée à la main, l’intérêt est de la générer directement par l’application. On peut mettre en oeuvre des techniques d’organisation de l’information.
Une infographie est une représentation graphique qui associe une ou plusieurs visualisations de données avec des éléments (graphiques ou textuels) créés spécialement pour mettre en avant des éléments clés par exemple en soulignant des relations, en montrant un processus ou en racontant une histoire. Ces éléments ne peuvent être automatiquement déterminées d’après les données. Une infographie exige de mettre en oeuvre un processus créatif avec une certaine compréhension des données sous-jacentes et de son contexte.
Cependant, si une infographie offre plus d’explications, elle est statique par définition. Au contraire, la visualisation des données peut être intéractive et permettre à l’utilisateur d’explorer les données /informations de différentes manières.
Apprendre le design d’interaction dans les objets de tous les jours – Bill DeRouchey
0Il y a 13 ans
par Yannick Grenzinger
dans General
Résumé de cette vidéo : Learning Interaction Design From Everyday Objects par Bill DeRouchey.
L’inspiration est génératrice de design.
On peut ainsi prendre inspiration dans les objets de tous les jours. Il y a des boutons et des affichages partout !
Au cours de cette présentation, Bill DeRouchey s’attache à critiquer de nombreux designs d’objets de notre vie de tous les jours par exemple le distributeur de billets avec une led verte qui nous indique le processus en cours est un exemple réussi de suivi de l’avancement du processus et de guidage de l’utilisateur.
Au contraire, le gamepad ci-dessous est un exemple désastreux avec ses boutons (A, B, X, Y) dont les labels semblent avoir été placés pour perdre l’utilisateur.
Nous faisons des produits pour que les gens les utilisent d’où l’importance de leurs interfaces et de leur utilisabilité.
L’attention aux détails génère le métier de designer.
Il est très utile de mettre le retour d’information à la source du problème : exemple de la connexion d’alimentation d’un mac.
L’interaction a un langage que nous pouvons créer et modifier.
Les designers ont la chance de pouvoir créer de nouvelles conventions et de pouvoir modifier les mauvaises.
D’où l’importance de l’utilisation des affordances !
Comment ? Par l’utilisation de certaines formes, couleurs, tailles, mots, etc.
Pourquoi ? Pour mettre en avant la priorité, le plus important, d’une dans l’interface, sa clarté et son but.
La priorité.
Est-ce que les éléments ont une hiérarchie ? (couleur, taille, zones)
Il prend l’exemple des télécommandes dont le design se révèle souvent mauvais (mauvais organisation ! autant de boutons qu’un portable ??).
Pour lui, un bon exemple de télécommande est celui de Tivo ! Priorité et hiérarchie par zone !
La clarté.
Est ce que l’interface communique clairement ? (Mots, icones, couleurs).
Il montre même qu’on peut faire évoluer ce langage.
Par exemple, le bouton ci-dessous n’a pas besoin de label parce que les symboles sont passées dans la langage courant de l’interaction.
Il faut éviter les confusions liées à ce langage par exemple le bouton pause/annuler avec une icône clairement indiquant l’annulation de l’action.
Analogie du mettre en marche / mettre en pause qui passe des magnétoscope à la machine à laver.
Le bouton ci-dessous n’a pas besoin de label.
Ce langage est parfois différent suivant les produits (manque de consistance) qui peut perturber.
Besoin de conventions !
L’exemple d’une convention très répandu à utiliser intelligemment : Vert = bon, Rouge = problème !
L’usage.
Est ce que le produit maintient ce qu’il est supposé être ou faire ? (Simplicité, perspective, contrainte).
Le distributeur de boisson est un bon exemple : Insérer la monnaie, sélectionner la boisson (énorme bouton), fini.
Quel intérêt d’avoir à rentrer la date pour un micro-onde ? Programmer une cuisson 2 jours avant ? 🙂
Le blog Ergonaute fait un sondage sur les métiers de l’ergonomie
2Il y a 13 ans
par Yannick Grenzinger
dans General
Le blog Ergonaute m’a contacté car ils font en ce moment un sondage sur les métiers de l’ergonomie !
Je ne connaissais pas le blog mais celui-ci me semble à visiter 🙂
Experience utilisateur et Agilité – Johanna Kollmann
0Il y a 13 ans
par Yannick Grenzinger
dans General
Résumé de la vidéo suivante : L’importance de l’identité et de la vision pour les designers sur les projets Agile – Johanna Kollmann.
La vidéo présente les résultats d’un sujet de recherche. La méthode Waterfall n’a pas marché pour Johanna Kollmann. Par contre Agilité et Expérience utilisateur semble s’associer parfaitement dus à leurs aspects itératifs et collaboratifs.
Le premier travail est d’intégrer les communautés. Ainsi les designers doivent être des participants actifs ce qui requiert de la flexibilité.
L’étude a été faite avec une approche qualitative autour de deux axes : interviews et observation contextuelle
Il a fallu s’attacher à la compréhension de l’Agilité, des outils utilisés, de l’implication du client ou encore de l’environnement de travail.
Analyse des interviews.
Identité.
Il faut un état d’esprit Agile (flexibilité, simple et efficace).
En Agilité, on part du principe que ce ne sera jamais bon / parfait ce qui n’est pas intuitif dans l’état d’esprit du design.
Malgré les difficultés, les participants pensent que l’approche Agile est la plus intelligente.
Il est important pour les designers de pouvoir parler, faire des retours et trouver des meilleurs moyens de travailler avec les développeurs parce que c’est le nœud du problème.
Il est intéressant d’utiliser esquisses et maquettes pour faciliter la communication
Du à cette collaboration, les rôles ont tendance à se mélanger.
Il est surtout important que chacun comprenne le langage de l’autre.
Le rôle le plus important pour le designer est d’être l’avocat de l’utilisateur final.
Vision
Pour créer une bonne expérience utilisateur, il faut une compréhension du besoin de l’utilisateur final. Cette vision peut être de haut niveau : les valeurs ou les taches principales.
Si cette vision n’est pas correcte, c’est dangereux pour le projet.
Les participants ont trouvé qu’il était difficile d’établir, d’évaluer et développer la vision de l’expérience utilisateur.
Il s’est révélé intéressant voir nécessaire de faire des « interim sprint zeros » afin de s’assurer que le projet est correct du point de vue de l’utilisateur, qu’il avance dans le bon sens et que la liste de priorité est bonne.
Le risque de perdre la vision de l’expérience utilisateur est un des grands désavantages. L’Agilité se concentre sur les livrables et les participants se retrouvent dépassés par manque de temps et perdent la vision d’ensemble au profit des détails. Le risque est de ne plus avoir un produit consistant.
L’Agilité a l’avantage de faciliter la communication et de protéger la vision.
Sous la pression, le plus dur est d’intégrer la perspective de l’utilisateur en faisant une recherche utilisateur.
Différentes stratégies pour inclure cette perspective:
- travail en amont
- externalisation avec un designer extérieur
- faire une recherche légère : tester puis redesigner (ce qui est ressorti comme le plus intéressant)
Intuitions liées à l’observation.
L’identité.
L’importance de l’état d’esprit de l’équipe et de l’organisation à propos de l’agilité et de l’expérience utilisateur.
Les avantages (être un avocat de l’utilisateur) et défauts (beaucoup de temps pour communiquer et peu pour réaliser le travail) d’être un centre de communication
Vision.
L’importance d’une vision claire et partagée par l’équipe
L’Agilité favorise l’utilisation de bons outils de collaboration (par exemple le tableau de questions).
En conclusion, l’attitude des personnes s’occupant de l’expérience utilisateur envers l’Agilité est très important. La collaboration aide beaucoup. Si l’équipe est trop petite ou mal organisée, la partie orientée expérience utilisateur est la première à être compromise. Pour guider les décisions stratégiques et les activités, la recherche utilisateur doit se faire avant que le développement agile démarre.
Tap is the new screen – Dan Saffer
2Il y a 13 ans
par Yannick Grenzinger
dans General
Résumé de cette video : Tap is the new screen. – Dan Saffer
Les interfaces tactiles et gestuelles envahissent le marché. C’est le début d’une révolution dans le design de l’interaction. La question est donc : comment designer cette nouvelle interaction ?
Cette interaction est basé sur les gestes : tous mouvements physiques qui peuvent être détectés et répondus par un système numérique sans l’aide d’un périphérique d’entrée traditionnel comme la souris ou le stylet.
Deux types d’interaction gestuelle : écran tactile (simple ou multi-touch) ou formes libres dans l’espace (exemple de la Wii mote).
L’ensemble est basé sur des senseurs communs : pression, lumière, proximité, sonore, inclinaison, mouvement, orientation. C’est les senseurs qui définissent les possibilités de l’interaction gestuelle.
Physiologie : contraintes de la main.
Il faut aussi se rappeler qu’un doigt est moins précis qu’un curseur ou que la main peut cacher les informations. Il faut donc éviter de mettre les fonctionnalités ou des informations essentielles en dessous d’un élément de l’interface qui peut être touché.
Il faut se rappeler la loi de Fitts : plus la distance est petite ou plus la cible est grande, plus la cible (icône) est atteinte rapidement.
Éviter au maximum au utilisateur de couvrir l’écran avec leur main.
Créer des cibles de tailles raisonnable : pas plus petites qu’un cm² (la taille du bout des des doigts).
Deux astuces pour les éléments touchables :
- Iceberg : l’icône représentant l’élément touchable est en fait plus petite que cet élément.
- Adaptatif : créer un iceberg en devinant ce que l’utilisateur va utiliser (le clavier de l’Iphone par exemple).
Les éléments qui suivent deviennent difficile à faire voir disparaît avec les interfaces tactiles : curseur (vous savez ou sont vos mains), MouseOver action, double-clic, clic droit.
Annuler une action devient aussi une question complexe.
Comment documenter les gestes ?
Les « maquettes » (wireframes) marchent toujours.
Utilisation d’images-clés voir de storyboards, de « Swim lanes framework » avec le storyboard du scénario en haut et différentes niveaux (techniques, fonctionnels, etc), animations ou encore films.
Transformer le geste en code.
- Variables : Que mesure-t-on ?
- Données : récupérer les données du senseurs
- Calculs : déterminer les différences entre les données
- Structures : Que signifie la somme ?
- Action : si la structure correspond, faire quelque chose.
Communiquer les interactions gestuelles ?
Trois zones d’engagement de l’utilisateur : attraction > observation > interaction ( en fonction de la distance).
Les utilisateurs peuvent avoir du mal à se lancer sur une interface gestuelle : peur de le casser ou de paraître stupide en public.
Il faut utiliser des affordances naturelles, des illustrations pour attirer les gens.
Comment déterminer les gestes appropriés ?
C’est une équation en trois parties :
- les senseurs et entrées disponibles
- la tache qui doit être effectuée
- la physiologie du corps humain
Il faut garder en mémoire que plus le geste sera compliqué moins il y aura de personnes pouvant le réaliser. Il faut donc que la complexité du geste soit en rapport avec la complexité de la tache à réaliser.
Les meilleurs designs sont ceux qui font correspondre le comportement du système aux gestes que l’humain fait déjà naturellement pour permettre ce comportement.
Jesse James Garrett – Adaptive Path
1Il y a 13 ans
par Yannick Grenzinger
dans General
Résumé de cette présentation : Jesse James Garrett – Adaptive path
L’expérience utilisateur est une condition acquise pour lesquels il n’existe aucun remède. La question de l’expérience des utilisateurs est partout. Cette expérience est subjective, éphémère et immatérielle. De plus ce que veulent les utilisateurs est variable.
Cependant il y a un moyen de mesurer l’intérêt des utilisateurs : c’est son engagement.
Le design de l’expérience est le design de n’importe quoi indépendamment du médium ou du média avec l’expérience utilisateur en résultat explicite et l’engagement de l’utilisateur comme but explicite.
Le design de l’expérience utilisateur est étudié depuis presque 10 ans et le schéma ci dessous en est la représentation classique.
Le travail autour de l’expérience utilisateur s’organise actuellement autour des quatre facteurs et engagements suivant :
– Perception: l’engagement des sens (vue mais aussi toucher, odorat, gout). Par exemple le directeur de la photographie fait en sorte que chaque image ait une signification complexe.
– Action: l’engagement du corps (exemple de la Wii)
– Cognition: l’engagement de l’esprit
– Émotion: L’engagement du cœur
On peut alors faire le lien entre ces quatre éléments et le schéma du dessus.
Comme on voit l’élément qui est souvent oublié est l’émotion !
Il faut aussi prendre en compte deux limitions :
– les contraintes : les gens ont leurs limites.
– le contexte : comment vous vous engagez avec l’expérience ?
La subjectivité de la conception est l’intersection entre nos capacités, notre contexte et nos contraintes.
