Avez-vous besoin de préparer votre site aux appareils mobiles?

Comme d’habitude avec internet, la réponse varie selon les cas. Vérifiez donc d’abord:

• que votre public-cible est susceptible d’avoir un usage de votre site via son appareil mobile;
• que vous avez un intérêt à cet effort d’adaptation (effort = ressources = argent / temps / énergie )
• dans quelle mesure ce qui s’affiche sur l’appareil doit être identique au site « desktop » ou plutôt rencontrer un besoin spécifique aux mobiles (ex: trouver des places de parking à proximité, avoir vos heures d’ouverture, et a contrario ne pas charger pleins d’images décoratives gaspillant le crédit telecom de votre visiteur, etc.). Bref, ce point-ci est un sujet de thèse en soi, il est évident que vous avez intérêt à réfléchir à ce que vous allez proposer exactement à vos utilisateurs mobiles-qui sont dans des situations et des motivations fort différentes de la situation « type » de l’utilisateur assis derrière un ordinateur de bureau.

Quelle adresse URL pour votre site mobile?

Une convention semble s’établir pour http://m.votre-nom-de-domaine.tld

Convention n’est pas toujours raison, mais il faut en tout cas tenir compte de la réalité des appareils mobiles: le confort d’encodage y est bien moindre que sur un clavier d’ordinateur complet. De plus, étant en mouvement, l’utilisateur n’a que peu d’attention à donner à une tâche aussi triviale. Autant donc lui faciliter la tâche…

Notez que si votre site vise principalement des visiteurs mobiles, il peut même être judicieux de placer votre site mobile directement accessible via le nom de domaine, et d’utiliser « www » pour la version desktop. Mais j’imagine que c’est un cas de figure encore rare au moment où j’écris ces lignes.

Si mon activité est liée à un lieu physique, géotagguer mon site

C’est un conseil moins souvent -voire jamais- relayé dans les articles sur ce sujet, il me semble pourtant important et fort peu coûteux. Si vous exploitez un magasin, une salle de concert, un café… bref un lieu dans lequel vous recevez le chalant, géotagguer votre site permettra à un utilisateur passant à proximité de votre zone et ayant la fonctionnalité intégrée d’éventuellement se voir afficher des suggestions sur les lieux intéressants à proximité de sa position géographique. Pourquoi pas chez vous?

La procédure est fort simple. Trouvez votre latitude et longitude (par exemple via ce site), puis ajoutez ces deux meta-tags aux pages de votre site (ou à sa template, on est au XIXème siècle no’didjeu) en remplaçant les XX.XXXXX par la latitude, puis la longitude de votre lieu:

<META NAME="ICBM" CONTENT="XXX.XXXXX, XXX.XXXXX">
<META NAME="DC.title" CONTENT="Le nom de votre site, qui s'affichera sur le navigateur mobile">

Cela fait, ajoutez-votre site à la base de données de GeoURL. Finito!

A plus tard pour une prochaine mise à jour!

• la désinscription se fait en un clic (le lien classique « se désinscrire » vous amène sur une page web confirmant la désinscription
• si vous le souhaitez vous pouvez dire pour quelle raison vous vous désinscrivez
• vous n’avez qu’à sélectionner parmi les options choisies
• vous pouvez si vous le souhaitez, mettre un message personnel.

Peut faire mieux?

• Pourquoi ne pas l’afficher dans la langue de départ (l’email original était en néérlandais)
• Pourquoi ne pas ajouter un lien permettant d’annuler la désinscription ( à partir du moment où j’ai été directement désinscrit, il faut tenir compte des clics impulsifs : l’on clique parfois sur un lien par erreur)

Well done Chimp!

En tant que designers, nous mettons souvent en place des systèmes qui nous semblent logiques et « couler de source ». Mais, le nez collé sur nos échéances et sur nos contraintes, influencés par notre propre expertise de l’internet, nous pouvons facilement perdre de vue que nous ne sommes jamais (ou quasi jamais) représentatifs des utilisateurs finaux du site que nous concevons. Dès lors ces questions se posent:

• Comment savoir si les utilisateurs cibles d’un site peuvent réaliser les tâches qu’ils souhaitent de la manière qui leur semble la plus efficace et la plus naturelle possible?
• Comment « mesurer » une expérience de manière à pouvoir déceler les éventuels problèmes et émettre des recommandations d’utilisation?

Tels sont les objectifs de la technique d’évaluation de l’expérience utilisateur que je me propose de vous exposer dans cet article.

Ze mission

Il s’agit d’inviter des utilisateurs représentatifs du public visé à naviguer sur le site (ou un prototype du futur site) après lui avoir demandé d’y réaliser certaines tâches. (En moyenne, 1 à 5 utilisateurs-tests par public-cible identifié devraient suffire).

On lui demande également de penser tout haut, d’expliciter à chaque instant ce qu’il est en train de faire ou de chercher à faire.

Son parcours sur le site est enregistré via un logiciel de capture de navigation (« screencast » ou « screen capture » en englishe), un micro (idéalement un micro-casque; la qualité du son est meilleure) et, bonus, une webcam qui permet de lire les expressions de son visage tandis qu’il ou elle navigue. On s’intéresse particulièrement aux émotions (satisfaction, frustration, sentiments de confusion ou d’être « perdu », etc.).

Le kit

Cette technique pose plusieurs exigences :

• avoir un ordinateur, idéalement un portable muni d’une webcam
• avoir un logiciel de capture de navigation performant
• un casque-micro
• développer sa capacité de remise en question et à se mettre dans la peau de l’utilisateur final
• pouvoir « lire entre les clics ».

Personnellement, un petit macbook blanc et silverback constituent l’arme ultime, fiable et performante.

Préparation d’un test utilisateur

1. Déterminer un scénario comprenant la ou les tâches à effectuerInclure toute fonction critique (pouvoir se connecter via un écran de login, pouvoir utiliser le menu de navigation principal de manière à se rendre jusqu’à l’écran testé, etc.)
2. Configurer et tester la configuration matérielle et logicielle
   • vérifier la disponibilité de mémoire RAM et d’espace disque suffisante pour un enregistrement vidéo de 60 minutes.
   • installer le logiciel de capture de navigation : c’est le plus difficile et l’objet principal de ce billet.
     • Sur Mac OS X: la meilleure application à un coût extrêmement raisonnable est Silverback. D’une simplicité enfantine, elle gère à la fois la capture de la navigation et l’enregistrement de la webcam. Lorsque vous rejouez l’enregistrement, les clics sont visualisés comme des petites « ondes » graphiques. D’une simplicité et d’une fiabilité extrêmes; c’est l’outil idéal.
     • Sur Windows: c’est plus compliqué… En plus de Camtasia (payant), en voici deux gratuits:
       • Free Screen Capturer, mais il arrive souvent que la vidéo s’interrompe tandis que le son continue
       • BB FlashBack Express: je ne l’ai pas testé mais les échos que j’en ai eu sont positifs.

Notez qu’il existe des sites offrant ce genre de fonctionnalité (exemple: ScreenToaster parmi d’autres) , mais d’après mon expérience, leur fiabilité est décevante sur de longs enregistrements, tandis que l’exportation du fichier vidéo final est souvent limité.

Le test

Une fois l’utilisateur installé, vérifiez qu’il a bien compris la consigne de « parler tout haut » en lui demandant d’expliquer comment, par exemple, régler la hauteur de sa chaise de bureau. Cela doit donner quelque chose comme ceci:

« Je veux régler la hauteur de l’assise. Je cherche avec ma main droite une manette. Je trouve une manette et je tente de la pousser; le siège descend. J’ajuste la hauteur en me levant, c’est bon, j’y suis ».

Faites-lui également réciter le scénario (les tâches à effectuer).

Enfin, vous pouvez lui poser d’autres questions, du style:

•  » décrivez votre humeur ? »
• « comment vous attendez-vous à réaliser ces tâches ? »
• etc.

Insistez bien sur le fait que ce n’est pas lui qui est testé, mais l’interface et qu’il ne doit donc pas craindre d’être jugé ou moqué. Au contraire, toute difficulté rencontrée est intéressante pour le travail.

Une fois que le test commence, vous vous taisez et observez. N’intervenez pas, afin de ne pas influencer ses choix.

Après le test

Lorsque le test est terminé, demandez-lui de décrire son état émotionnel (satisfait, frustré, de bonne ou mauvaise humeur…) et puis de se lever. Vous couperez l’enregistrement après cela.
Le moment est venu d’analyser le déroulement de la séance et de coucher sur papier les observations faites, ainsi qu’émettre des recommandations d’amélioration.

Voilà, je pense que c’est tout, le reste relève de votre… expérience !

Je ne peux que vous conseiller de tester vos créations: c’est amusant, riche en enseignements et cela va améliorer votre instinct de web designer.

Je vous invite à participer à ce buzz qui élève le débat et utilise l’interactivité à bon escient: http://1milliondeclicscontrelamisere.org/

Cela étant, petit clin d’oeil qui m’a amusé. L’intitulé du bouton d’envoi du formulaire de contact aurait pu être mieux choisi…

Dans le dernier alertbox, Jakob Nielsen résume les résultats d’une étude sur l’utilisation des réseaux sociaux (RSS, twitter, myspace, facebook, linkedIn) par des entreprises, avec pour objectif de tirer des recommandations sur la meilleure manière d’utiliser les réseaux sociaux dans un contexte professionnel.

A retenir

En bref, les conclusions à tirer sont:

• une fréquence trop élevée de publications est perçue négativement
  

  Users listed too-frequent postings as their top annoyance with following companies and organizations on social networks.

• les flux RSS sont perçus comme plus recommandables que les « status updates » à la twitter
  

  RSS updates were viewed as more trustworthy and as more « official » sources than social messages.

• les utilisateurs sont plus intéressés par les publications récentes. Peu ou prou font de recherches ou remontent dans le temps pour consulter les articles précédents
  

  Users didn’t seek out past postings that they might have missed; they were content to read only the newest information.
  
  So, once your message drops off a user’s main page, it might as well not exist. Users who continue browsing messages on the second page are almost unheard of.
  
  This contrasts with email newsletters and other email notifications that users have to manually delete. Social network updates float down the timeline and eventually dissipate on their own, requiring nothing of users. Although our participants appreciated this fact, it does make stream-based media less powerful than email newsletters in terms of maintaining a customer relationship.

• lorsque les sociétés mettent en place un flux social, elles sont perçues négativement si elles ne le mettent pas à jour régulièrement
  

  In some cases, companies had established a presence that they didn’t bother to update. These graveyard sites gave users a very negative impression when they were looking into companies’ social features.

• les publications les mieux cotées qualitativement par les utilisateurs partageaient trois qualités:
  1. contenu substanciel
  2. étaient publiées au bon moment
  3. correspondaient au type d’information que l’utilisateur attendait de la société

  The messages that received the highest scores had three things in common: they contained something of substance, were timely, and provided the kind of information that users expected from the source company or organization.

La morale de cette métaphore est que tout est dans la nuance et sur cette Terre, les nuances, cela compte.

En développement web, la nuance se traduit par une analyse « coût/bénéfices »: on met à plat et l’on compare les avantages et désavantages d’une option sur l’autre, en fonction de la situation, du contexte et surtout du public-cible. C’est cela l’ergonomie: la prise en compte du public-cible, et dans ce cas-ci, de sa maîtrise de l’outil informatique.

De l’usage du target= »_blank »

Le dernier commandement en date: « il ne faut pas utiliser l’attribut target: »_blank ».

situation

espace: monde
époque: juillet 2009
public-cible: dépend du projet

coût

- ne permet pas à l’utilisateur de choisir la fenêtre dans laquelle va s’afficher la page, en forçant l’ouverture du lien sur une nouvelle fenêtre

bénéfices

- ouverture de fichiers de type autre que « html »
- dans une application ajax mal développée, ne perturbe pas l’historique du navigateur pour l’application en question (et il y en a beaucoup)
- de nombreux utilisateurs ne connaissent pas l’usage du bouton central, ou n’ont pas une souris à trois bouton, ou ne connaissent pas la fonction CTRL (POMME sur mac) + Click.

A la lumière de ces éléments, vous pouvez juger si par exemple vous héritez de la maintenance d’un vieux magasin e-commerce de produits d’entretien développé par un amateur d’ajax… amateur, et que votre public cible, ce sont des ménagères de 65 ans avec un équippement informatique digne de mathusalem, alors vous devrez sans doute choisir l’utilisation de l’attribut target.

Si par contre votre public cible est composé essentiellement de développeurs web, vous savez ce qu’il vous reste à faire ….

Cliquer ici pour voir la vidéo.

Les exemples qu’il montre illustrent bien le fait que suivre une démarche ergonomique ne signifie pas se cantonner aux conventions aveuglément. Oui l’expérimentation a toute sa place en design ergonomique; gardez simplement à l’esprit que si vous choisissez cette voie, priorité absolue à l’utilisateur final, rencontrez-le, regardez-le travailler/vivre/faire l’opération concernée, mettez-vous dans sa peau et oubliez votre égo. Et alors peut-être que votre innovation deviendra… la convention de vos concurrents

J’ai montré la vidéo aux étudiants aujourd’hui, ils semblent avoir réagi positivement. Certains vont d’ailleurs battre les trottoirs pour rencontrer les utilisateurs potentiels du site qu’ils doivent réaliser pour la fin de l’année.

source: ted.com

(1) Paul Bennett travaille chez IDEO, ceux qui ont conçu, entre-autre, le treo et le Palm Pilot.

J’avais envie de voir ce que cela représentait de réaliser un thème pour WordPress. J’ai profité du lancement de ce blog pour répondre à cette question. C’est finalement relativement simple, le travail le plus compliqué étant de trouver les tags disponibles dans l’aide fournie par WordPress (ce qu’ils appellent en bons geeks ayant passé trop de temps à Warhammer 40,000: le Codex ).

thème « Ergonomie Web »

Je vous l’accorde: je n’ai pas été chercher le nom de mon thème très loin . Il est basé sur l’idée de donner au contenu la prédominance en terme d’espace écran, et de concentrer la navigation et les actes de conversion sur la colonne de droite. Le contraste blanc et noir fait référence à cet approche: le blanc comme fond pour le texte, le noir comme fond pour la navigation.

Je dois encore travailler un peu le thème: indiquer les liens déjà cliqué dans la partie « contenu », et autres détails de ce genre. D’ailleurs si vous voyez des améliorations, n’hésitez pas à me les communiquer via le formulaire de commentaire.

Sticky Comment form

Justement: je tente une expérience d’ergonomie avec le formulaire de commentaires. L’idée est que si l’on consulte un billet, le formulaire soit visible même si la page est très longue. En anglais j’appelerais cela « a sticky comment form ». Implémentée via la propriété CSS « position:fixed » ajoutée dynamiquement par du javascript qui détecte la taille d’écran disponible (si pas suffisant, pas sticky) ainsi que la position scroll de la page.

Voilà, j’espère que ce thème vous plaît !

J’enseigne à mes étudiants en ergonomie web une méthode simple visant à placer l’utilisateur final au centre du processus de création. J’ai décidé de la partager via ce blog, afin, qui sait, de l’enrichir de votre expérience !

Ma méthode

Cette méthode nécessite un travail préparatoire, fait lors de la définition du projet, qui est la détermination des publics cibles. Chaque public cible a des besoins que votre site voudra (ou ne voudra pas) satisfaire. Ces besoins doivent donc être rencontrés de la manière la plus adaptée à ces publics cible, à leur manière de penser, à leurs attentes.

Je commence donc par remplir un tableau à 3 colonnes. Considérez cet exemple :

Besoins des utilisateurs

Notez que vous pourriez en ajouter plus (comme « contenu à créer », qui est un classique), mais dans le cadre de ce billet, je me contenterai de ces trois colonnes.

Remarquez la troisième colonne « solution proposée ». Difficile de décrire une solution dans une si petite case, n’est-ce pas?
Alors personnellement, j’y indique la séquence d’écrans la plus directe que je compte mettre en place pour satisfaire le besoin de l’ utilisateur.

Ensuite, muni de ce tableau, je crée un storyboard de chaque solution proposée (colonne 3). Un storyboard, c’est une sorte de bande dessinée, représentant sous forme de mockup (ou schéma d’écran) chaque étape du processus.

Mockup de l'écran de recherche d'un moteur de recherche

J’affine, je peaufine (en groupe ou seul) jusqu’à obtenir des pages html brutes, sans fonctionnalités mais navigables: le wireframe.

Je convoque alors mon client pour le confronter au wireframe, et note ses remarques. Typiquement, il précisera les intitulés, les textes explicatifs. Toujours impliquer le client dans ce processus: il est votre meilleur indic’ sur les multiples identités du public cible. D’ailleurs la plupart de mes clients apprécient cette démarche et fournissent des informations supplémentaires vitales au projet.

A ce stade, je donne un nom unique à ce wireframe, en y incluant le nom du public cible et le besoin, (par exemple: « gestionnaire – voir ses projets », que j’indique dans mon tableau, ainsi je sais à quel besoin le wireframe répond, et inversément, je sais quel wireframe ouvrir pour vérifier la réponse à tel besoin.

Lorsque vous avez modifié le wireframe en tenant compte des remarques du client, vous pouvez commencer à réaliser une première série de tests utilisateurs. Dans un prochain billet, je vous donnerai une technique simple et peu onéreuse (voire gratuite:) ) pour réaliser ces tests. Stay tuned!