Laïla Atrmouh

Bloc-notes

Fresh new website!

20 November ’14

A new version (again)! This blog has already two years and has migrated from Wordpress to Jekyll, a static site generator tool pretty convenient! Besides some trouble with the import of images from my former Wordpress articles, the import tool works very well.

Comment réussir un test d'utilisabilité ?

26 June ’14

Il n'y a pas que le code qui se teste, une interface utilisateur aussi !

Dans le cadre de ma maîtrise en commerce électronique, j'ai été amenée à réaliser des tests d'utilisabilité sur un site Internet. L'expérience est vraiment intéressante car on réalise à quel point notre vision d'expert web est biaisée par rapport aux individus "normaux".

Cet article a pour but de vous présenter les tests d'utilisabilité et de faire un petit retour d'expérience avec les erreurs que j'ai pu commettre.

Un test d'utilisabilité consiste à comprendre comment un utilisateur perçoit un site Internet et de lister ainsi les erreurs de son interface. Une personne (le modérateur) observe le comportement de l'utilisateur sur le site, et peut être accompagné éventuellement d'une équipe plus large qui observera en retrait (idéalement, dans une salle de focus groupe).

Le participant réalisera donc différentes tâches et à la fin de chacune de ces tâches, une verbalisation se fera avec le modérateur. Il est préférable pour le participant de verbaliser à voix haute pendant sa réalisation de la tâche mais certains n'y arrivent pas donc il est inutile de trop forcer le participant. Le plus important est en effet qu'il se sente à l'aise et de recréer une expérience "comme à la maison".

Nous utilisions Tobii Studio, un système d'oculométrie mais ce matériel coûte extrêmement cher. L'essentiel est d'enregistrer l'expérience de navigation de l'utilisateur sur le site. On peut utiliser des outils d'enregistrement d'écran ou encore cet outil que j'ai découvert aujourd'hui Inspectlet (http://www.inspectlet.com/) qui enregistre les sessions sur un site et crée des heatmaps.

Le test se prépare en plusieurs étapes :

  • Planification du test

Cette étape consistera à planifier les scénarios qui seront à réaliser par les participants. On va notamment écrire des guides d'entrevue qui vont permettre au modérateur de ne manquer aucun détail sur le scénario à réaliser ou la présentation du test:

  1. Un premier script qui va consister à présenter le test au participant (la confidentialité de sa participation, le fait qu'il doit suivre ses habitudes de navigation...)
  2. Les scripts qui vont présenter les tâches à réaliser

Personnellement, je ne lisais pas ces scripts car je n'étais pas à l'aise de ne pas regarder le participant dans les yeux pendant que je parlais. Je m'assurais juste de n'avoir manqué aucun point important du script après avoir parlé.

  • Aller chercher des participants

Les participants ne devront pas être choisis au hasard et devront correspondre à la cible du site testé. Nous avions réussi à obtenir une dizaine de participants pour notre test, on peut en récupérer même moins selon le degré d'implication du participant. On a constaté que beaucoup de choses se répétaient parmi nos répondants, il y a un stade où on ne peut récolter plus d'informations que celle dont on dispose déjà.

Un incitatif peut faciliter leur déplacement (argent, nourriture gratuite, échantillons ... Soyez inventifs! :-P ) mais n'invitez le participant que s'il est un minimum intéressé: un participant peu motivé fournira des résultats inexploitables.

  • Réaliser les tests

Nos tests se faisaient au laboratoire de focus groupe de la faculté d'administration de la faculté de Sherbrooke. Nous disposions d'un oculomètre qui suivait les mouvements des pupilles des participants. Le fait d'être observé peut biaiser les résultats: l'idéal est de recréer les conditions de navigation habituelles de l'internaute (lors de la présentation du test, nous insistions sur l'aspect "comme à la maison").

Il est difficile de recréer les conditions "comme à la maison": c'est pourquoi nous insistions là-dessus pendant la présentation du test. Si on voyait pendant le test que le participant ne jouait pas assez le jeu (réalisation de la tâche de manière anormalement rapide), nous posions la question durant la verbalisation "Auriez-vous fait ça chez vous?". Cela permet de récolter de l'information manquante.

Pour éviter d'avoir des résultats trop biaisés, il est recommandé de garder toujours le même modérateur.

N'effectuez pas de tests trop long sous peine de fatiguer votre participant et d'ainsi diminuer la qualité des commentaires qu'il vous donne.

Je conseille personnellement d'avoir une liste de tâches pour la configuration du matériel, surtout s'il y a beaucoup de choses à faire pour la mise en place du test. Nous avions un oculomètre à configurer et les caméras à démarrer, il nous est déjà arrivé d'oublier de démarrer les enregistrements car nous étions concentré sur autre chose.

Aussi, pensez à vider l'historique entre chaque test, surtout si vous testez des remplissages de formulaire... Cela évitera que le navigateur garde en cache les informations saisies par le participant précédent.

  • Exploiter les résultats

Une étape longue mais essentielle ! N'oubliez pas de faire des sauvegardes de vos enregistrements, re-visualisez les vidéos pour être sûr de ne manquer aucun commentaire.

En espérant que cet article soit utile, je vous souhaite de bons tests utilisateur! :-)

Quelques techniques de design pour susciter de l'émotion chez l'utilisateur

6 May ’14

L'influence de l'interface sur les émotions ressenties par les utilisateurs durant leur navigation fait l'objet de nombreuses recherches scientifiques. Par exemple, Éthier et al. (2008) ont démontré qu'un utilisateur pouvait ressentir différentes émotions (telles que la peur, la joie, ou encore la frustation) durant un épisode d'achat sur un site de commerce en ligne.

L'interface a donc un rôle non négligeable dans l'état émotionnel de l'utilisateur, cet article a pour but de vous présenter certaines techniques qui permettent d'aller chercher des émotions chez l'utilisateur, créant ainsi une expérience utilisateur qui fidélisera vos visiteurs.

Se doter d'une personnalité

Mailchimp est un excellent exemple pour ce point: outre l'interface extrêmement "user-friendly" et son design épuré, Mailchimp dispose d'une forte image de marque axée sur l'humour. Une mascotte rigolote, des phrases humoristiques (high five après avoir envoyé une campagne): autant d'atouts qui vont jouer sur la fidélisation de l'utilisateur !

Un site qui se veut plus "sophistiqué" (exemple d'une marque de luxe par exemple) adoptera une approche plus minimaliste au niveau de son design: images larges, peu de contenu textuel et un nombre minimal de couleurs dans la charte graphique.

La carte humoristique: Mailchimp
La carte humoristique: Mailchimp

La carte sophistiquée: Chanel
La carte sophistiquée: Chanel

Les beauty-shots

En mettant en avant une image, choisie judicieusement et à la qualité irréprochable, on va créer un sentiment d'émerveillement chez l'utilisateur.  Cette technique sera particulièrement appréciée pour les sites mettant en avant une personne (artiste, professionnel...). Un bon exemple pour ce cas est le site de Julie Zhuo, directrice du design chez Facebook, qui met en fond de page une photo d'elle-même haute résolution.

Site officiel de Julie Zhuo
Site officiel de Julie Zhuo

De (petites) animations

L'idée est de réveiller l'utilisateur dans sa navigation et de ne pas le rendre "inactif" en animant un peu les éléments du site. On ne parle évidemment pas de blinkie  (so 2000!) mais plutôt d'une animation légère qui s'adapterait à l'utilisateur. Cela peut se faire par des carrousels interactifs (avec des boutons "Call-to-Action", voir mon article précédent) ou par des animations légères sur certains éléments du site. Stromae, l'artiste belge, le fait très bien sur son site. Des effets parallax auront également une influence positive, en allant chercher l'attention de l'utilisateur.

Site officiel de Stromae
Site officiel de Stromae

Sources

Éthier, Jean, et al. "Interface design and emotions experienced on B2C Web sites: Empirical testing of a research model." Computers in Human Behavior 24.6 (2008): 2771-2791.

http://uxmovement.com/content/5-design-techniques-to-incite-user-emotion/

Bibliographie UX

5 May ’14

Voici une petite bibliographie qui pourrait plaire aux novices qui s'intéressent au domaine de l'user experience. Je l'ai dénichée à partir d'un article de blog qui a recensé toutes les références faites à ces livres, créant le classement suivant:

 

  • Don’t Make Me Think by Steve Krug
  • About Face by Alan Cooper
  • Rocket Surgery Made Easy by Steve Krug
  • Designing Interactions by Bill Moggridge
  • The Design of Everyday Things by Don Norman

 

On m'a déjà parlé du livre de Steve Krug qui semble être un incontournable. Thank you Armen Ghazarian for this list !

Sources

http://armenghazarian.com/what-to-read-if-you-decided-to-learn-ux/

https://docs.google.com/spreadsheet/ccc?key=0Ai4lrwKRQj2BdElpcDFiNUNYSjRtZFVWMmJvZDdEWkE#gid=0

Grille ou liste: quel affichage adopter pour son site de e-commerce ?

29 April ’14

Vous souhaitez vendre des produits en ligne et hésitez sur la manière de présenter vos produits. Trois solutions sont envisageables: grille, liste ou hybride.

Grilles

Quand les utiliser?

Quand l'image du produit est suffisante pour le distinguer d'un autre produit (ex: vêtements).  Certains sites (comme Etam) proposent une vision 360° du produit dès la page catalogue, ce qui permet à l'utilisateur d'avoir un "feeling" du produit avant même d'atteindre la fiche produit détaillée.

Avantages / Inconvénients

  • Permet d'afficher plus de produits sur une page
  • Confortable pour l'utilisateur qui n'a pas à lire de texte
  • Nécessité d'avoir des images de bonne qualité, fidèle au produit réel

Exemples

Sites de vêtements (Etam, ...)

Affichage Grille sur le site d'Etam
Oui je me prépare à l'été :-P

Listes

Quand les utiliser?

Quand le produit a des informations complexes associées, ou qu'il est difficile de distinguer deux produits différents par une image (exemple: meubles de tailles différentes). Il est nécessaire dans ce cas là de faire apparaître l'information à l'utilisateur sous forme textuelle.

Avantages / Inconvénients

  • Information mise à disposition de l'utilisateur, ce qui le met en confiance et favorise la conversion
  • Texte à lire parfois rebutant pour les utilisateurs: nécessité d'aller à l'essentiel (présentation sous forme de liste...)

Exemples

Priceminister (qui propose à ses utilisateurs de switcher en mode grille) ou encore ThemeForest (pour afficher plus de détails sur la structure et compatibilité du template)

Affichage sous forme liste
Affichage sous forme liste

Hybride

On adopte un affichage type grille et au survol d'un produit, on affiche plus de détails sur le produit.

Avantages/Inconvénients

  • On conserve les avantages des deux catégories: pouvoir montrer plus de produits tout en affichant un détail sur le produit (s'il est complexe).
  • Être vigilant sur le temps de chargement de la page (Javascript à ajouter pour la gestion du texte à afficher au survol des images)

Exemples

Ikea


Affichage hybride

Source

http://uxmovement.com/navigation/increasing-ecommerce-conversion-rates-category-page/