Interaction Personne Machine (MOOC)

Hébergé par Coursera, ce cours sur l’Interaction Personne Machine de l’Université de Californie à San Diego est présenté en anglais par Scott Klemmer, professeur associé de science cognitive, d’informatique et d’ingénierie. Il présente les concepts du prototypage, de l’évaluation comparative, les principes de la conception visuelle, de la perception et de la cognition. Pour résumer, il aide à établir de bonnes fondations en conception centrée sur les utilisateurs.

Présentation

Maintenant professeur associé à l’UCSD, Scott Klemmer a auparavant travaillé à l’université de Stanford où il a co-dirigé le groupe IHM. Il a contribué à l’introduction de l’évaluation par les pairs dans l’éducation en ligne, et a enseigné le premier cours en ligne évalué par les pairs. Il est aussi chercheur en Interaction Personne-Machine.

Avec une durée de sept semaines, ce cours se divise en sept modules : introduction, recherche des besoins (trouver des idées de conception à partir de l’observation d’utilisateurs), prototypage rapide, évaluation heuristique, manipulation directe et représentations, design visuel et design d’information, conception d’expériences. Chaque module se compose de quatre ou cinq vidéos d’une durée moyenne de quinze minutes. Chaque vidéo contient un ou deux QCM qui permettent de bien intégrer les deux ou trois points les plus importants du cours. Quatre QCMs sont proposés au total durant le cours, et donc chacun d’eux porte sur plusieurs modules. Si les exposés vidéos sont accessibles dès la première semaine, les QCMs, de même que les devoirs, ne peuvent être passés que durant une certaine durée limitée, avec date de remise.

Six devoirs sont proposés durant le cours pour construire un projet de design. Trois briefings de design sont proposés et l’étudiant doit en choisir un. Comme chaque devoir se base sur les précédents, le résultat final consiste en un projet de design complet. Recherche de besoins, storyboard, wireframe, construction d’un prototype en haute-fidélité, plan d’évaluation, et enfin tests utilisateur : chaque étape mène à la suivante.

Trois pistes séparées sont proposées pour le classement, dépendant des tâches suivies par l’étudiant : la piste de l’apprenti (seulement les QCMs), celle du studio (QCMs et devoirs), et celle de la pratique (devoirs, l’étudiant devant déjà être titulaire d’un certificat d’accomplissement apprenti ou studio d’une session antérieure). Chaque piste donne lieu à un certificat d’accomplissement si la note finale est de 80% ou plus.

En terme d’accessibilité, les vidéos peuvent être téléchargées, de même que les sous-titres (à la fois aux formats .txt et .srt) et les diapositives. Pour les étudiants internationaux, les vidéos peuvent être sous-titrées en de nombreuses langues, dépendamment de la vidéo : français, anglais, portugais, allemand, turc, japonais, chinois… Les vidéos sont aussi accessibles sur une chaîne YouTube.

La session suivie, de juin à août 2014, comptait plus de 29 500 participants.

Notes et remarques

• Voici quelques stratégies de recherche de besoin pour découvrir des idées innovantes : l’observation directe (ce que les utilisateurs font en comparaison avec ce qu’ils disent), l’observation participative, la pratique, les entretiens avec des questions ouvertes et non dirigées, les journaux et livres de bord, l’échantillonnage d’expérience.
• Une bonne façon de trouver des idées est d’observer les utilisateurs principaux (les lead users) pour leur approche orientée solution, et les utilisateurs extrêmes pour leur approche visant à dépasser les limites, mais sans jamais oublier les utilisateurs classiques. C’est pourquoi les personas, ou les utilisateurs abstraits, peuvent couvrir une large gamme de types d’utilisateurs.
• Un storyboard décrit une tâche, pas une interface. Par conséquent, il doit transmettre une motivation, un cadre, une séquence et la satisfaction de ses personnages (les utilisateurs).
• Les prototypes Magiciens d’Oz imitent une interface réelle et aident à l’obtention d’un retour des utilisateurs. Mais ils doivent rester plus rapides, moins coûteux et plus faciles à produire que des interfaces réelles. Cela me rappelle une maquette d’interface que j’ai faite pour un client avec le logiciel Balsamiq. Alors même que les éléments graphiques du design étaient grossiers et sommaires, je devais constamment rappeler au client qu’il n’interagissait pas avec le produit final, naviguant de page en page et de formulaire en formulaire, et que tout pouvait être modifié avec un coût très réduit. La haute-fidélité apparente de cette maquette l’empêchait de demander des modifications, et elle lui donnait l’impression que le produit final pourrait être livré en quelques jours, alors qu’aucune ligne de code n’avait encore été écrite. À un stade précoce, un prototype grossier en papier garde de nombreux avantages par rapport à un prototype de haute-fidélité.
• Non seulement le fait de partager de nombreux designs aide à la construction de l’équipe (on se concentre sur des artefacts plutôt que sur des egos), le résultat final est meilleur (plus de clics pour une nouvelle publicité par exemple).
• Il y a de nombreuses façons d’évaluer un système (conception, architecture et flux de l’interface utilisateur) : empirique (testé avec de vrais utilisateurs), formel (mesures par des modèles et des formules), automatisé (mesures par logiciel) et critique (expertise et rétroaction heuristique).
• L’évaluation heuristique utilise des évaluateurs multiples qui testent le design indépendamment, puis les résultats sont agrégés. Cette approche aux coûts maîtrisés économise sur les tests utilisateurs, peut avoir un fort ratio bénéfices/coûts, et couvre un large éventail de problèmes.
• Heuristiques de conception : montrer le statut du système (temps, espace, changement, action, prochaines étapes, complétion), métaphores et langage familiers, contrôle et liberté (de revenir en arrière, d’explorer), consistence (présentation et agencement, langue, choix), prévention des erreurs (empêcher la perte de données, les flux confus, les entrées erronées, les contraintes superflues), la reconnaissance plutôt que le rappel (éviter les codes et les obstacles supplémentaires, proposer des prévisualisations), flexibilité et efficacité (raccourcis flexibles, valeurs par défaut avec options, information ambiante, proactivité, recommandations pertinentes), design esthétique et minimaliste (au-dessus de la ligne de flottaison, rapport signal-bruit, redondance, fonctionnalité), reconnaissance, diagnostic et correction des erreurs (rendre le problème clair, fournir une solution, montrer le chemin à suivre, proposer une alternative en relâchant les contraintes), aide (offrir des choix avec des exemples, guider le chemin, montrer les étapes, fournir plus d’information).
• Une interface devrait fournir suffisamment d’affordance (capacité à suggérer sa propre utilisation) pour que les utilisateurs comprennent son usage par eux-mêmes. Elle devrait correspondre au modèle mental des utilisateurs, même si elle fonctionne de manière complètement différente sous le capot.
• Il y a deux types d’erreurs : les dérapages et les fautes. Un dérapage a lieu lorsque l’utilisateur comprend le modèle mais fait une erreur comme le fait de cliquer sur le mauvais bouton, alors qu’une faute se produit quand l’utilisateur interagit de façon correcte avec l’interface en se basant sur des croyances fausses (ou en utilisant le mauvais type de fichier à traiter dans un programme d’entrée de données). Pour prévenir un dérapage, l’ergonomie et le design visuel doivent être améliorés avec de meilleurs libellés, des boutons plus gros, une meilleure utilisation de l’espace et des couleurs… Une faute devrait être évitée avec des options plus claires et une meilleure rétroaction.
• Le design visuel a trois buts principaux : guider (communiquer la structure, l’importance relative, les relations), donner un rythme (attirer les gens, les aider à s’orienter, leur donner les moyens d’aller plus loin) et exprimer un message (à travers le sens et le style, apporter de la vie au contenu).
• L’héritage technologique de la typographie vit toujours dans son vocabulaire, encore basé sur les blocs de plomb de l’époque de Gutenberg : taille de point, interlignage (leading, de lead, plomb), hauteur d’x (x-height), poids…
• Concevoir des études : manipuler des variables indépendantes mais mesurer des variables dépendantes (du point de vue de l’utilisateur).
• Expérimenter par soi-même : indiquer aux testeurs que c’est le système qui est testé, pas eux. Choisir entre l’approche de la pensée exprimée à voix haute et les tâches chronométrées.
• Faire tourner des expériences web : chaque changement de design, aussi minuscule que la modification du ratio d’espace négatif, peut avoir des effets significatifs sur le but de la page.
• L’A/B testing est une façon de tester des approches différentes. Voir aussi le livre You should test that, de Chris Goward.
• Ajouter un champ de saisie pour les codes offre sur un formulaire peut tuer la poule aux œufs d’or : de nombreux utilisateurs vont rechercher ces codes offre sur internet et ne jamais revenir (sans compter l’impression insidieuse de se faire rouler en payant le plein tarif).
• Pour sentir vos données, faites-en des graphes.
• Tests statistiques pour comparer des taux : la loi du khi carré et sa table de distribution peut indiquer la confiance dans la différence entre, par exemple, les taux de clic d’une expérience, en particulier pour les échantillons de taille réduite.
• Les données ne sont pas normalement distribuées : on peut faire de l’A/B testing pour s’en rendre compte (couper une condition en deux, comme le nombre de personnes qui ont cliqué sur le bouton Acheter maintenant, puis vérifier chaque moitié résultante pour trouver une différence statistiquement significative).

Lectures suggérées

Les éléments de l'expérience utilisateur, de Jesse James Garrett, Pearson (2011)

Designing Interfaces, de Jenifer Tidwell, O’Reilly Media (2011)

Human-Computer Interaction (MOOC) (en anglais)
Interacción persona-computador (MOOC) (en espagnol)
Interação Humano-Computador (MOOC) (en portugais)