2 sujets (Expérience utilisateur & Créativité) + 2 dates =
une multitude de champs d’apprentissage, de réflexion et de partage

Campus Infopresse, le mercredi 22 février 2012

Ergonomie et Expérience utilisateur : Maximiser l’expérience utilisateur de son site web

Une journée de formation donnée par Anastasia Simitsis, Directrice Expérience utilisateur chez w.illi.am/. Experte reconnue dans la conception de solutions interactives centrées utilisateur et très appréciée pour la générosité et la qualité de ses interventions (conférence, atelier ou formation), elle vous amènera à vous poser les bonnes questions en acquérant les outils nécessaires à la réussite de vos projets numériques.

OFF| Créativité. Inspiration. Affaires., le jeudi 15 mars  2012

Une initiative Infopresse présentée par w.illi.am/ à la Société des Arts Technologiques [SAT]

Pensez autrement, gérez autrement, pour faire les choses différemment

Pour la première fois, Infopresse crée l’événement annuel de la créativité qui rassemblera les plus grands visionnaires du 21e siècle dans le domaine des affaires, de l’architecture, du design et des sciences humaines. Google, Amazon, Facebook, Twitter, Toms, Groupon, sont des exemples de réussites qui reposent sur une vision entrepreneuriale forte.

•    Quels sont les concepts d’affaires les plus créatifs qui ont marqué notre décennie?
•    Quels sont les piliers d’innovation qui influenceront les modèles de demain?
•    Comment trouver l’idée génératrice de changement?
•    Qu’ont apporté l’architecture, le design, les sciences humaines, à l’entreprise d’aujourd’hui?

w.illi.am/ est particulièrement heureux et excité d’être le grand partenaire de cette journée qui réunira les experts mondiaux les plus créatifs d’aujourd’hui avec la dynamique communauté des affaires québécoise. Ensemble, nous partagerons et élargirons nos horizons pour toujours poursuivre notre évolution dans l’inventivité. Soyons inspirés!

Restez à l’écoute de W/, avec le printemps d’autres événements tout aussi intéressants sont déjà prévus!

Anastasia Simitsis, directrice expérience utilisateur, et Mike De Luca, directeur design d’affaires chez w.illi.am/ ont partagé dans leur présentation au RDV WEB, leur réflexion et la méthode de travail qu’ils ont mise en place au sein de leurs départements: le design et l’expérience utilisateur.

Voici le support de leur présentation et la vidéo de la conférence : Expérience utilisateur, créativité et design

La section « Films » semble déjà sélectionnée lorsqu’on arrive au Menu principal, mais nous ne sommes pas encore dans la catégorie « Films ». Il faut cliquer dessus pour entrer dans la section.

L’écran montre un message indiquant les tarifs pour un forfait TV. Le menu de gauche semble accessible, mais ne l’est pas. Il faut faire « Annuler » pour accéder de nouveau au menu de gauche. Mon voisin de siège pensait que le système avait « gelé ». Il a cliqué une dizaine de fois sur retour puis a éteint et rallumé l’écran avant de comprendre l’action à faire.

Pour accéder au menu permettant de monter et baisser le volume sonore, il faut appuyer sur le bouton sans libellé placé sous l’écran en bas à droite.

La conception centrée utilisateur est utilisée depuis bien longtemps en avionique et notamment dans la conception de cockpit. L’humain est au centre des préoccupations et au-delà de l’apprentissage, tout est pensé pour assister l’équipage dans ses prises de décisions.

Malheureusement, il n’en est pas de même dans les services proposés aux passagers. Évidemment, la famille qui part en vacances n’a pas la vie de centaines de personnes entre les mains lorsqu’elle utilise l’écran tactile permettant de voir un film… quelle importance que tout ne soit pas si clair !!

Certes la sécurité aérienne est primordiale, mais l’expérience de voyage d’un passager ne passe pas uniquement par la sécurité. La sécurité est moins perceptible et tangible. On la considère déjà acquise tandis que la simplicité d’utilisation d’un petit téléviseur situé dans le dossier du siège face à soi, l’amabilité de l’équipage, le confort des sièges, la gratuité du repas… feront toute la différence à prix égal entre les compagnies.

• Un canal d’information/divertissement plutôt passif pour la TV ;
• Un moyen de communiquer directement avec son entourage pour le téléphone;
• L’ordinateur était plutôt voué à une activité de travail ou de divertissement (actif cette fois).

Au fil du temps, les différents usages technologiques se sont rapprochés pour aujourd’hui largement se recouper dans la plupart des activités. Cette évolution a été l’opportunité d’augmenter l’expérience offerte aux gens en exploitant le potentiel de chaque outil pour des situations précises et les interfaces sont devenues un facteur clé de cette expérience. On les nomme : interfaces plastiques. Issue de la recherche, la plasticité des interfaces est née il y a environ 10 ans et est en passe de devenir incontournable pour une expérience complète auprès des utilisateurs.

Qu’est ce que c’est ?

À l’image d’un sac plastique qui peut nous servir à transporter nos courses, jeter nos déchets, parachuter des jouets d’enfants ou être roulé en boule dans une boite parmi d’autres sacs, une interface plastique doit pouvoir être capable de se modeler, de s’adapter à nos usages et nos besoins. On dit que la plasticité des interfaces est leur capacité à s’adapter à leur contexte d’usage dans le respect de leur utilisabilité.

Oui, mais concrètement c’est quoi ?

Bien que plusieurs utilisateurs puissent avoir les mêmes tâches et les mêmes activités, il n’est pas rare que chacun en ait une représentation bien spécifique. Partant de ce constat, la plasticité des interfaces intervient pour répondre à l’utilisateur de la meilleure façon qu’il soit. Ainsi, pour s’adapter à un contexte d’usage, il ressort 3 aspects à prendre en compte :

Fig. 1. Les 3 piliers d’une Interface Homme-Machine (IHM) plastique

L’utilisateur

Le système doit être capable de s’adapter, de proposer, de dialoguer avec l’utilisateur en fonction de son profil, ses habitudes, ses activités. Plusieurs moyens permettent à l’interface d’avoir une bonne représentation de son utilisateur :

• Configurer les préférences utilisateur;
• Apprendre des actions de l’utilisateur;
• Concevoir une interface basée sur une analyse d’activités des utilisateurs cibles.

La plate-forme

L’interface doit être flexible et s’adapter à l’utilisateur indépendamment du matériel qu’il utilise. C’est-à-dire que si l’utilisateur interagit avec une interface sur son ordinateur, elle devra pouvoir s’adapter à d’autres plates-formes vers lesquelles il désire accomplir ses activités.
Par exemple, l’utilisateur pourrait partager son activité entre un ordinateur, une télévision et un téléphone cellulaire, non seulement par une adaptation de l’interface en fonction des caractéristiques du matériel (ex. passage d’un grand écran vers un petit écran), mais aussi par une redistribution possible de l’interface sur l’ensemble des plateformes présentes.
On pourrait alors imaginer un cinéphile choisissant ses films depuis son Smartphone, lesquels se lanceraient sur sa télé lorsqu’il est dans son salon et sur son téléphone lorsqu’il est en transport.

L’environnement

L’interface doit pouvoir s’adapter à l’utilisateur en fonction du contexte dans lequel il se trouve. Ainsi, si l’utilisateur travaille parfois dans un environnement peu lumineux, bruyant et qu’il doit marcher tout en faisant son activité, des moyens adéquats pourraient être mis en place par le système pour répondre à l’activité de l’utilisateur. Par exemple, la luminosité de l’écran s’adapterait à la luminosité ambiante ou encore, les éléments d’interaction de l’interface pourraient être plus visible (taille, format, etc.) lorsque l’utilisateur est en mouvement. Bien entendu, tout cela se ferait dans le respect de l’utilisabilité, c’est-à-dire en offrant une qualité par l’efficacité, l’efficience et la satisfaction nécessaire.

Finalement

Nous avons abordé ce qu’est la plasticité d’interface et il est clair que la conception et la mise en place d’un tel concept est un grand défi. Néanmoins l’évolution technologique des 10 dernières années nous montre clairement que nous sommes déjà engagés dans cette direction, ce qui nous laisse encore qu’entrevoir de nombreuses possibilités dans la relation Homme-Machine à travers les interfaces. À titre d’illustration, voici un exemple de scénario d’interface plastique qui utilise le logiciel Plex :

- Imaginons la situation suivante, Jean, père de famille, regarde un film sur sa TV dans le salon. Il utilise une télécommande physique pour utiliser les fonctions courantes telles que pause, avance rapide… (fig.1).

Fig. 1. Jean regarde un film sur sa TV qu’il commande depuis une télécommande physique

- Alors qu’il regarde son film tranquillement, son fils Julien arrive et souhaite regarder une série sur la TV. Pour démarrer sa série, Julien commence d’abord par la chercher sur son iPhone, il sélectionne l’épisode puis indique à l’interface qu’il souhaite le lire sur la TV (fig.2). Le film se lance alors sur la télévision et Julien utilise son iPhone comme télécommande (fig.3.).

Fig.2. Julien sélectionne son film via le téléphone et lance la lecture sur sa TV.

Fig.3. Julien utilise une télécommande numérique via son téléphone.

- Finalement, son père (Jean) lui aura laissé la place et continuera son film via son iPad, là ou il s’était arrêté (fig.4).

Fig. 4. Jean continue la lecture du film sur son iPad qui détecte où le film a été arrêté.

Éléments complémentaires :
[1] Ganneau , V. & Calvary, G. & Demumieux, R. 2007. Métamodèle de Règles d’Adaptation pour la Plasticité des Interfaces Homme-Machine
[2] Ganneau , V. & Calvary, G. & Demumieux, R. 2008. EMMA : Modèle Utilisateur pour la Plasticité des Interfaces Homme-Machine en Mobilité, Saint Malo, France
[3] Serna, A. & Pinel, S. & Calvary, G. 2009. La plasticité des IHM en action : un exemple de téléprocédure plastique.
[4] Serna, A. & Calvary, G. & Scapin, D. 2010. Penser “Plasticité” peut améliorer la qualité des interfaces home-machine : une etude de cas.

Partie 1

Partie 2

Une petite animation 3D amusante sur les besoins d’ergonomie sur un poste de travail (physique et interface)

Un petit hommage à Jacques Tati en vidéo donnant une définition de l’ergonomie (1985 – Cité des Sciences)

La vidéo d’une conférence dans le cadre de Paris Web 2009 abordant la notion d’acceptabilité et qui prône le travail pluridisciplinaire dans la conception web (un ergonome – Gautier Barrère et une développeur – Alain Vagne)

Le slide share d’une présentation de Matthieu Mingasson dans le cadre de Paris Web 2010 sur la méthodologie du Design d’expérience utilisateur. Une jolie présentation qui permet de fixer les idées.

• Quel est ton rôle chez w.illi.am/?
• Quel est ton parcours professionnel?
• Qu’est-ce que l’Expérience Utilisateur?

Bon visionnement!

Anastasia participe à la Journée Mondiale de l’Utilisabilité qui aura lieu le 11 novembre en partageant sa passion pour son métier :

• Quel est ton parcours professionnel?
• Quel est ton rôle chez w.illi.am/?
• Qu’est-ce que l’Expérience Utilisateur?
• Quelles sont les tendances actuelles dans le domaine?
• Suggestions de lectures

Bon visionnement!

« Qui dit médias sociaux dit Facebook« … c’est Confucius qui l’a dit! Mais encore plus vrai: « Sans utilisabilité, les médias sociaux se meurent! »

En effet, l’utilisabilité est le nerf de la guerre des médias sociaux… enfin derrière l’aspect social. Petit rappel, amusez-vous à naviguer sur la page d’accueil (déconnecté) de :

• http://www.facebook.com
• http://hi5.com
• http://www.skyrock.com/blog/
• http://www.friendster.com/
• http://www.linkedin.com/
• http://www.plaxo.com/
• http://www.myspace.com/
• http://www.asmallworld.net

En quoi réside le secret de ces différents réseaux? Entre utilisabilité et expérience utilisateur mon cœur chavire.

La page d’accueil. Premier contact avec chacune de ces plateformes. Le premier constat? C’est la connexion. Vous ne verrez rien sans vous identifier. Et cette identification, plus le réseau est fort, plus elle est mise en avant. Quelques très rares explications, précisions et descriptions : si vous ne savez pas pourquoi vous êtes là, inutile de chercher. Alors comment réussir de tels exploits en étant si pauvres en renseignements? Et bien la réponse est dans l’utilisabilité derrière, dans l’expérience que vivent les membres à l’intérieur du réseau… et des outils. Le but de chaque réseau : le viral.

C’est dans le développement de fonctionnalités « hyper » simples et évidentes dans leur utilisation que les réseaux envoient des signaux à l’extérieur de leurs murs. Ces signaux sont interreliés grâce aux API. Par exemple, vous étiez un mordu de Facebook en 2007, vous  parliez de votre grand plaisir de vie à travers LE réseau dans vos différentes soirées. Grâce à un outil de recherche extrêmement simplifié, vous arriviez à trouver vos amis un à un. Votre réseau grandissait avec vos efforts. En 2010, le nouvel inscrit clique sur un simple bouton et en moins de deux minutes son carnet d’adresses complètement scanné lui offre la possibilité d’ajouter par dizaines ses amis automatiquement identifiés. « Un ami invité, c’est un ami qui s’inscrira dans les prochaines semaines lorsqu’il aura reçu au moins 3 invitations similaires« , neveu de Confucius.

Je pourrais continuer longtemps ainsi, mais toutes les fonctionnalités sont compulsivement travaillées et retravaillées afin d’assurer une utilisabilité des plus efficaces et qui permettra d’atteindre des objectifs d’affaires identifiés.

Le plus intéressant dans notre comportement d’utilisateur : nous sommes choqués du manque d’utilisabilité de nombreuses fonctionnalités. Et plus les usagers seront insatisfaits plus le réseau concerné risquera d’aller à sa perte. Malgré ce que j’entends régulièrement, Facebook a su résoudre bon nombre de problématiques dont les autres Hi5, Friendster, ou pire encore, copainsdavant, n’ont su se dépêtrer.

Aujourd’hui, lorsque je développe de nouvelles stratégies interactives, je sais que je dois reprendre certains questionnements, les 5 règles pour assurer le succès d’une communauté en ligne:

1. Trouvez des réseaux déjà existants et actifs autour de votre client et les utiliser afin d’y développer sa communauté en ligne.
2. Maîtrisez les API et développez des tactiques d’interconnexion. Une simplicité d’utilisation de ces interconnexions assurera une diffusion virale.
3. Un réseau s’éteint s’il n’est pas actif. Les fonctionnalités qui permettent l’expression des usagers doivent donc être optimisées version après version de manière itérative.
4. Plus que de l’expression personnelle, c’est la socialisation simplifiée qui assurera le succès d’une communauté en ligne. Pensons simplement à l’identification d’amis dans un status Facebook qui a récemment été mise en ligne.
5. Finalement, n’oubliez pas qu’un média social qui se respecte fait de ces « power users » de véritables stars.

1/ Ne pas imposer aux utilisateurs de se servir d’un outil secondaire

2/ Laisser le pouvoir décisionnel aux utilisateurs, c’est-à-dire le sentiment de contrôle dans l’usage même d’un outil (prédictible et conforme à leur représentation mentale)

3/ Éviter les intrusions / interruptions  dans la tâche de l’utilisateur si elles ne sont pas réellement nécessaires.

Un parfait exemple d’outil visant à aider l’utilisateur pouvant satisfaire tout comme nuire à  l’expérience utilisateur est le correcteur orthographique intégré de l’iPhone ou de l’iPad.

Voici les principes de base de son fonctionnement:
- L’utilisateur tape un texte à l’aide du clavier virtuel

- Si le dictionnaire du système reconnaît un mot dans ce qu’écrit l’usager, il lui propose ce mot

- Si l’usager est en accord avec le mot proposé par le système, il continue d’écrire normalement et le mot sera remplacé

- Si l’utilisateur n’est pas d’accord avec le mot suggéré, il doit le refuser en tapant dessus puis reprendre l’écriture de son texte.

Écrire un texte (SMS) : 3 situations d’usage

Situation numéro 1
Une lettre est tapée pour une autre, le correcteur orthographique remplace le mot par celui que l’utilisateur voulait taper. L’expérience est réussie.

Situation numéro 2
Le correcteur orthographique remplace le mot écrit par un autre qui n’a rien à voir avec celui que l’utilisateur voulait initialement rentrer. L’utilisateur efface le mot qu’il vient de rentrer pour recommencer. Petite frustration, mais rien de grave. De toute façon, il aurait dû corriger le mot puisqu’il avait fait une erreur de frappe.

Situation numéro 3
L’utilisateur écrit un mot que le système ne connaît pas et il lui propose un mot alternatif qu’il ne remarque pas. Il continue son message. Au moment de se relire, il se rend compte qu’un mot a été transformé par un autre et se positionne dessus pour le corriger. Le système remplace une fois de plus le mot écrit. L’utilisateur recommence la manipulation et prend garde à refuser le mot proposé. La tâche est accomplie, mais avec agacement.

Personnaliser l’utilisation de l’option de correction automatique

À travers la situation 1, on note que le choix de corriger les mots au fur et à mesure qu’ils sont écrits peut être très efficace… si et seulement si le système fait peu d’erreurs comme en témoigne les autres situations. Le correcteur orthographique peut alors devenir extrêmement pénible pour l’utilisateur.
Bien sûr, le choix qu’a fait Apple de corriger le texte au fur et à mesure est pertinent dans la mesure où l’utilisation du clavier virtuel, la petite taille de l’écran et l’ensemble de situations d’écriture très variées sont propices à l’erreur humaine (par exemple écrire en se déplaçant).
Pourtant, ce choix n’a pas fait l’unanimité lors de la sortie du premier iPhone, loin de là. Quelques jours après la sortie de ce système de correction automatique, des dizaines de milliers d’utilisateurs, au travers de pétitions en ligne, ont demandé de pouvoir désactiver cette fonctionnalité (octobre 2008). Il était considéré pour beaucoup comme provoquant trop d’erreurs.  Apple a finalement ajouté un moyen de désactiver cette fonctionnalité dans une version ultérieure et a aussi amélioré son système de correction automatique lui permettant d’apprendre de façon plus efficace des actions de son utilisateur.
Cela n’a pas suffi à convaincre l’ensemble des détenteurs d’iPhone d’utiliser cet outil sans grogner. Pourquoi?

Ne pas interrompre la tâche

En creusant un peu, on s’aperçoit que le malaise vient du principe même de la fonctionnalité et non pas uniquement de l’efficacité et de la pertinence du correcteur.
La logique proposée par ce correcteur orthographique est tout à fait valide. En effet, on laisse la possibilité à l’utilisateur de continuer avec le mot proposé ou non. Comme le soulignent Hugues Monod et Bronislaw Kapitaniak, « la décision peut consister en une absence de réaction »… encore faut-il que l’utilisateur ait compris, vu et/ou pris conscience de la nature du message!

Une mauvaise prédiction du comportement de l’interface
D’après les nombreux messages que l’on peut lire dans les forums, les utilisateurs pensaient que le mot affiché était une suggestion qui ne serait pas prise en compte s’ils n’y portaient pas d’action et qui serait choisie s’ils la sélectionnaient.

Un système qui vient perturber la tâche
- Dans une tâche d’écriture, l’utilisateur peut facilement être amené à se concentrer sur le clavier, surtout s’il se déplace et que son environnement sollicite son attention. Il est probable que l’utilisateur ne prête pas vraiment attention à une correction orthographique, corrigeant le mot automatiquement et pouvant même passer inaperçu sans relecture.

- Dans le cas où l’utilisateur prêterait attention au message, cela aurait pour conséquence de l’interrompre dans sa tâche. L’utilisateur doit donc s’arrêter, prendre une décision face à la proposition puis reprendre sa tâche là ou il l’avait laissée. La fonctionnalité devient alors particulièrement intrusive dans la tâche de l’utilisateur.

Aujourd’hui la problématique est moins grave puisque l’outil peut être désactivé, mais aussi parce que le système a été grandement amélioré et apprend des actions de l’utilisateur. De plus, Apple a intégré dans sa version iOS4 ce qui se faisait déjà dans le web, mettre un indicateur visuel sur le mot qui pourrait être mal orthographié ou inconnu. Cela permet à l’utilisateur de repérer rapidement où une erreur a pu se produire et de lui laisser le soin de la corriger quand il le voudra (illustration Fig1).

Fig 1 — Correcteur orthographique

Pour aller plus loin
Ergonomie – Hugues Monod, Bronislaw Kapitaniak (Masson, 2003)
Images – Application messagerie iPhone 3Gs

Bon visionnement!

Bon visionnement!

Suite et fin de cette conférence au prochain épisode, dans une semaine.

Bon visionnement!

La suite, la semaine prochaine…

Bon visionnement!

La suite, la semaine prochaine…

Bonne Expérience Utilisateur!

Pour vous apporter une partie des réponses, nous vous invitons à visionner, chaque semaine, un nouvel extrait de la conférence donnée le 24 février dernier à la Journée Infopresse dédiée aux Institutions financières, par Anastasia Simitsis, Directrice Expérience Utilisateur et Damien Lefebvre, Vice-président, Services Conseil chez w.illi.am/.

Cette présentation montre l’intérêt des tests Utilisateur et des modèles mentaux, voici le premier de 5 épisodes:

Bon visionnement! La suite la semaine prochaine

Plusieurs fois par année w.illi.am/ invite gracieusement ses clients à participer à des Forums exécutifs. Leur but est d’initier les participants aux nouvelles technologies et outils web et surtout de leur permettre d’échanger, en toute confidentialité, sur les problématiques qu’ils rencontrent ou les questions qu’ils se posent pour la gestion de leur actif web.

Le Forum exécutif du 10 février dernier offrait de découvrir l’intérêt des tests utilisateurs alliés à l’optimisation de site ainsi que le uLAB, laboratoire d’utilisabilité ouvert dans les bureaux de w.illi.am/ depuis 6 mois. Deux conférences et un atelier ont été donnés par des experts de w.illi.am/, Anastasia Simitsis, Directrice Expérience utilisateur et par Humberto Valencia, Directeur Optimisation.

Alors que je donne encore en ce moment des conférences sur les médias sociaux je viens de constater que mes propres chiffres n’étaient plus à jour.

Il était donc évident que je devrais partager avec vous l’information: « Les dernières statistiques de Facebook ».

Saviez-vous que Facebook était passé de 300 à 350 millions d’utilisateurs en à peine 3 mois l’année dernière!? Non? Et bien tant pis! La barre des 400 millions vient d’être dépassée en à peine 2 mois!

Si vous croyez que, comme Twitter, les comptes se créent et dorment, et bien non! Ils déclarent haut et fort que près de 100% des usagers se sont connecté dans les 30 derniers jours. Parmi ces 400 millions, 50% se connectent chaque jours et 35 millions en profitent pour mettre à jour leur statut. Pour nos clients, nous sommes surtout très attentifs au fait qu’un utilisateur a 130 amis en moyenne et qu’il passe 55 minutes en moyenne PAR JOUR sur FB. Si vous aviez encore des incompréhensions face à la chute des médias traditionnels…  Le plus drôle dans tout cela, c’est qu’en plus je n’ai jamais autant consommé de publicités que depuis que j’utilise Facebook : pages, groupes, même les pubs je clique!!! Normal! Elles s’adressent à moi précisément!

De notre côté, nous avons développé différentes pages Facebook pour nos clients dans les derniers mois, en voici quelques-une:

• W Hotel Montreal: 1 727 fans (création au mois de novembre 2009)
• Contrat d’gars: 23 382 fans (création au mois d’octobre 2009)
• Toopy and Binoo: 8 215 fans (création au mois de décembre 2009)
• Toupie et Binou: 2 032 fans (création au mois de décembre 2009)
• Zeop: 480 fans (à l’Ile de la Réunion le câblodistributeur vise très peu de population)

Ce que je regrette, c’est de ne pas avoir pu vous montrer les onglets qui ont été développés sur certaines de ces pages qui étaient de véritables microsites. Étant destinées à des évènements ponctuels, nous avons dû les retirer… Mais restez à l’écoute, nous en préparons d’autres!

Enfin, beaucoup de statistiques incroyables au sujet de FB…, et en même temps si prévisibles depuis 1 an et demi, que vous trouverez dans cette page officielle du Méga Réseau Facebook.

Hot on Twitter : le 1er mars, cette présentation a été placée dans les articles les plus lus sur Twitter.

Voir toutes les photos de la Journée IP

© Copyright 2010 Charles-Henri Debeur.com

Meilleures pratiques commerciales web

  À vous de jouer maintenant!