Au delà du web : CUE, Cadillac User Experience [MAJ]

Article mis à jour en bas de page.

J’ai lu il y a quelques semaines la note « L’interface… d’une Cadillac ! » postée sur graphism.fr. Je profite de quelques jours de vacances pour revenir sur l’intéressante vidéo qui illustre le message. Comme le dit Amélie Boucher, il est bon de « s’inspirer de ce qui se fait ailleurs que sur le web. »

Voici la vidéo en question.

Première réaction : wow ! Ça s’anime, ça clignote, ça brille…

Cela dit, beaucoup d’autres choses me viennent à l’esprit lorsque je regarde en détail cette vidéo.

1. La plupart des technologies (toutes ?) présentées ici existent déjà. Le bouton « Start » pour démarrer la voiture ? Rien de neuf. Le tableau de bord sous forme d’écran ? Il me semble avoir déjà vu ça (je ne connais pas tous les tableaux de bord du monde…) Les commandes vocales ? Croisées depuis des années sur un tas de voitures — d’ailleurs je n’ai pas l’impression que le système intéresse vraiment les utilisateurs, apprendre les commandes par cœur ne doit pas amuser grand monde. L’écran tactile, l’affichage tête haute, la connexion aux appareils nomades… Peu de réelles innovations, plutôt un bon mélange.

2. L’écran tactile central permet de regrouper un grand nombre de commandes dans un espace limité. C’est évidemment très pratique : une seule interface remplace des dizaines de boutons. Cela dit, je me pose plusieurs questions à ce sujet.

Cadillac User Experience - écran tactile

• Les boutons de la console centrale d’une voiture classique sont statiques (leur position n’évolue pas dans le temps), ont une forme particulière (potentiomètre, poussoir, etc.) et offrent un retour (visuel, auditif) spécifique. Ces éléments facilitent la mémorisation de leur emplacement et l’association mentale « tel bouton = telle fonction ».

De son côté, l’écran tactile nécessite une attention soutenue de la part de l’utilisateur (souvent le conducteur). Impossible de savoir où se trouve la commande de volume sans vérifier si l’on se trouve bien sur l’écran de contrôle de la radio (et pas sur celui du GPS par exemple). C’est le problème d’un écran multifonctions : il faut d’abord sélectionner le bon environnement (commandes radios, commandes GPS, commande clim…) puis trouver la fonction recherchée.

• Le temps d’apprentissage d’une interface aussi complexe peut perturber beaucoup d’utilisateurs. Peu de personnes apprécient la consultation d’un mode d’emploi, en particulier lorsqu’il s’agit du manuel d’un type d’appareil (les voitures) qu’ils utilisent depuis des dizaines d’années. S’il faut ajouter au mode d’emploi de la voiture (au moins 200 pages) un mode d’emploi de l’écran tactile (c’est déjà le cas), combien y a-t-il de chances pour que les utilisateurs s’y plongent ? La présence d’une application « Help book » (1:33) montre bien que les concepteurs sont conscients de la complexité de cette nouvelle interface.

3. Question récurrente lorsque l’on se trouve devant une interface de ce type : quid des bugs ? Un ordinateur, on a plusieurs possibilités : fermer le programme qui bloque la machine, redémarrer la machine, désinstaller le programme problématique, faire une restauration du système, formater la machine… Pour une voiture, c’est forcément plus complexe. Pas question de redémarrer si les commandes de l’autoradio ne fonctionnent plus au beau milieu de l’autoroute.

Les problèmes électroniques sont (logiquement) de plus en plus nombreux au fil du temps. Ce type d’interface risque de rendre ses utilisateurs toujours plus dépendants du garagiste spécialisé le plus proche.

4. Les constructeurs veulent rendre leurs voitures connectées. Première interrogation : est-ce que cela répond à une demande ? Est-ce que l’utilisateur d’une automobile a besoin d’un véhicule connecté ? Deuxième interrogation : que se passe-t-il lorsque la connexion n’est plus disponible ? Ou lorsque l’on se trouve à l’étranger ? Troisième interrogation : finira-t-on par pouvoir pirater un véhicule à distance ?

Fred Cavazza évoque les nouvelles interfaces riches de nos véhicules dans cet article. On y retrouve les mêmes éléments que dans la vidéo ci-dessus : écrans tactiles, tableaux de bord digitaux… et bien sûr véhicules connectés. Et comme dans la vidéo ci-dessus, on ne montre pas l’intérêt que cette connexion apporte. À quoi cela peut-il bien servir ? (Appel de détresse mis à part, cette commande existe depuis un certain temps déjà.)

Réponse possible : à installer des applications. Après tout, l’écran tactile, la connexion… tout cela rappelle beaucoup les téléphones mobiles. Très bien, mais quelles applications ? Détail très amusant : on retrouve la même application « Pandora » sur 3 photos d’interfaces différentes…

Cadillac User Experience - application Pandora

Pourquoi est-ce que les concepteurs ne nous montrent pas des usages intéressants ? Une application qui me donne les prix du stationnement à l’endroit où je me trouve par exemple. Dans la vidéo, les applications visibles sont : Weather (super), Pandora, App Store (euh…) et Stitcher (le picto rappelle un baby phone…?) N’y avait-il rien de plus intéressant sur l’App Store justement ?

Et qui dit applications dit nouveaux apprentissages, nouvelles interfaces, nouveaux bugs…

Bonus

Une petite vidéo pour finir, au sujet des innombrables nouvelles fonctions que l’on trouve dans les voitures les plus modernes :


Il s’agit de l’essai de la BMW M5 diffusé dans l’émission anglaise Top Gear. Plusieurs passages illustrent tout à fait certaines de mes interrogations.

Bonus 2

Pour les amateurs, le sublime intérieur d’une BMW 328 de 1937 (je ne suis pas certain d’avoir le droit de les publier directement dans l’article…)

Mise à jour

HTeuMeuLeu a publié une note « Le prototype vs. la réalité » qui oppose la théorie (la vidéo ci-dessous) à la pratique. Je rejoins totalement son point de vue : les différences sont minimes mais modifient l’expérience vécue. Devant le prototype j’ai l’impression de me trouver dans un film de science fiction ; devant le tableau de bord réel je suis bien au volant d’une « simple » voiture moderne. Rien de grave bien sûr, c’est juste une petite déception…

Expérience utilisateur : little big mistakes, les petites erreurs qui agacent (Lastminute, Carrefour, EDF)

Petite compilation de bugs, d’oublis et de mesquineries glanés sur l’internet ces derniers jours.

• Lastminute : les cases invisibles

Je lance une recherche sur le site de Lastminute. Après avoir patienté quelques secondes, je suis redirigé sur cette page d’erreur :

Little big mistakes : Lastminute, cases invisibles

Le message indique : « Veuillez relancer une recherche en cochant l’option dates flexibles ». Très bien, mais où puis-je trouver cette case ? Plus loin : « Veuillez aussi ne pas cocher la case vols directs ». Euh… Même question ? J’ai jeté un œil aux combo box à tout hasard, je n’y ai rien trouvé.

J’en profite pour relever une erreur que je croise fréquemment : si j’ai un fils de 2 ans, dois-je le compter comme un enfant (2-11) ou comme un bébé (0-2) ? Dans le doute, je choisirai ce qui me coûte le moins cher…

Une dernière petite remarque. Je ne suis pas certain que beaucoup de gens lisent les messages commerciaux que l’on trouve sur des pages d’erreur, mais tout de même : l’encart de droite, qui liste les avantages du voyage sur mesure, reprend deux fois le point « la flexibilité des dates et horaires de voyage ». Ça ne gênera pas grand monde, c’est le principal.

• Carrefour : triste sournoiserie ?

Je souhaite créer mon espace personnel sur le site de Carrefour. Je me rends donc sur cette page :

Little big mistakes : Carrefour, petite sournoiserie ?

Je passe rapidement sur la balise <title>, qui m’indique que je suis sur la page… « recherche » du site. Je note également que l’url de la page ne me donne pas beaucoup d’informations.

La première rubrique « Vos identifiants » mériterait une structure mieux pensée : séparer à ce point les champs « e-mail » et « confirmer l’e-mail » n’est pas une très bonne idée (même remarque concernant les champs relatif au mot de passe) ; quant au captcha je me demande ce qu’il fait ici. Mais ce n’est pas ce qui m’intéresse.

Ce qui m’intéresse, c’est la troisième partie, étrangement intitulée « Votre information ». Au premier coup d’œil, je distingue quatre cases, bien alignées, à gauche de la page. Les libellés des cases fonctionnent tous de la même manière : d’abord un message qui indique de quoi il est question (exemple : « Recevez des informations de la part de Carrefour Market »), puis la phrase « Si vous le souhaitez, cochez cette case. » Jusque là, pas de problème — même si la tournure pourrait être moins lourde.

Le problème vient de la première phrase du paragraphe. Cette première partie ne fonctionne pas du tout de la même manière que les quatre cases qu’elle surmonte. En terme de structure : la case se trouve à la fin de la phrase, et pas alignée à gauche comme les quatre autres. En terme de message : il ne faut pas cocher la case « si vous le souhaitez » comme c’est le cas en dessous, il faut cocher la case « si vous ne le souhaitez pas » !

Cette façon de présenter m’étonne — à vrai dire, je ne suis même pas sûr qu’elle soit légale. Si je ne dis pas de bêtise, cette première case fonctionne en opt-out, c’est-à-dire qu’il faut la cocher pour éviter de recevoir des messages de Carrefour et des autres sociétés du groupe. Or il me semble bien que cette méthode est interdite en France.

• EDF : un e-mail bien mal conçu

Je me suis inscrit au service « relevé de compteur » d’EDF. Je reçois donc une fois tous les 2 mois un e-mail m’indiquant de faire mes relevés et de les transmettre à EDF.

J’ai reçu mon premier e-mail il y a quelques jours. Je pense qu’il se passe de commentaire.

Little big mistakes : EDF, un e-mail bien mal conçu

À vrai dire je ne sais pas si le problème vient de l’e-mail ou du webmail. Ce que je sais, c’est qu’EDF aurait dû le tester.

J’espère qu’il s’agit d’un bug ponctuel : le webmail de Voila est le même que celui d’Orange, et j’imagine que de nombreux utilisateurs d’Orange sont aussi abonnés au service « relevé de compteurs »…

Ergonomie des sites web : retours d’un petit test utilisateur

J’ai assisté récemment au test* fortuit d’un site internet que je ne connaissais pas. Voici quelques retours de cette expérience.

Le testeur se rend sur le site de Who*s who, marque de prêt-à-porter haut de gamme. Il est accueilli par un grand visuel.

Analyse et test utilisateurs - Splashpage

Je l’ai dit, de nombreux autres aussi, les splashpages de ce genre sont clairement à déconseiller. Elles n’apportent rien et font perdre du temps à l’utilisateur.

Qu’en pense le testeur ? Échange :
– Wah, c’est très classe !
– Cette page ne te dérange pas ?
– Non, pas tellement. J’aime beaucoup la photo, le produit, le mannequin… Ça met dans l’ambiance, c’est agréable.

L’analyse déconseille… mais le visiteur apprécie ! Intéressant.

Le testeur clique sur « Skip intro » pour se rendre à la page suivante.

Analyse et test utilisateurs - Accueil

En revenant sur cette page aujourd’hui, je constate que nous sommes passés à côté d’un élément important lors du test : le son. À l’ouverture de la page, une musique se lance. J’y reviendrai dans une prochaine note.

Le son n’a pas dérangé le testeur puisqu’il était coupé. La présentation du site, en revanche, l’a un peu dérouté.

– C’est très élégant, la vidéo, les produits qui bougent… c’est classe, comme sur la page d’avant ! [Un temps] Par contre c’est compliqué, il y a des textes dans tous les sens, un peu partout sur la page, on a du mal à trouver ce qu’on cherche.

Sans surprise, ce menu très visuel plaît… une ou deux secondes, le temps de constater qu’il faut explorer la page en détail pour trouver ce que l’on cherche. Et ça, ça n’a rien de plaisant.

Le testeur cherche à visualiser les produits de la collection, il clique donc sur « Shop Online ». Une nouvelle fenêtre s’ouvre alors sur le site yoox.com.

Analyse et test utilisateurs - Yoox.com

Incompréhension totale.

– Je veux voir leur collection et on me renvoie sur un autre site que je ne connais même pas !

Pour ne rien arranger, après avoir cliqué sur la splashpage de Yoox pour accéder à… quelque chose, le site plante.

– Bon là ça charge depuis 2 minutes, je pense que c’est planté. Je vais revenir en arrière.

Le site s’est ouvert dans un nouvel onglet, le bouton « page précédente » ne fonctionne donc pas. Le testeur repassera donc par Google puis par la splashpage pour revenir sur la page souhaitée.

Le testeur trouve le bouton « Collection » et clique dessus.

Analyse et test utilisateurs - Collection

Le testeur clique immédiatement sur la première silhouette pour afficher le visuel en détail.

Analyse et test utilisateurs - Silhouette

Satisfait, le testeur clique ensuite plusieurs fois sur le bouton « Next » pour voir les silhouettes suivantes. Il clique à côté par mégarde : la silhouette se ferme et il revient à la page précédente. Gêné et surpris par ce comportement inattendu (« Je ne comprends pas ce qui s’est passé »), il n’aura cependant aucune difficulté à revenir sur la silhouette qu’il consultait.

Le testeur cherche ensuite à consulter la collection chaussures. Il cherche sur cette page, revient sur la page précédente, essaie de cliquer sur la chaussure animée, rien ne se passe.

– C’est dommage, ils n’ont pas mis leur collection chaussures en ligne, j’aurais bien aimé la voir.

Cette collection est pourtant bien présente sur le site. Le contraste trop faible du menu de la page « Collection » a malheureusement empêché le testeur d’y accéder. Le contraste… et peut-être aussi le choix du libellé : il faut cliquer sur « Accessories » pour trouver les chaussures.

J’indique le chemin au testeur.

– Ah oui, effectivement. C’est écrit en gros, mais en gris clair sur fond blanc je n’ai rien vu.

Il clique sur « Accessories » et est redirigé sur la page correspondante.

Analyse et test utilisateurs - Accessoires

Il en profite pour regarder les sacs. Il clique sur le premier produit.

Analyse et test utilisateurs - Détail accessoires 01

– C’est bizarre, le produit est en bas à droite, et il est coupé. Et puis je ne vois pas le bouton « Next » comme tout à l’heure, je ne peux pas aller au produit suivant.

Le site bugue complètement… mais ça ne décourage pas le testeur. Il clique au hasard sur la page et constate qu’il peut ainsi revenir à la page des accessoires. Il clique ensuite sur le deuxième produit pour l’afficher.

Analyse et test utilisateurs - Détail accessoires 02

– Ah, cette fois-ci j’ai le bouton « Prev ». C’est bien : je vais aller voir le tout dernier produit de la liste et je vais cliquer sur « Prev » pour voir les autres.

Astucieux et efficace !

Pour conclure cette note, je vais reprendre les points notables de ce bref test.

• Le test utilisateur et l’analyse sont deux méthodes complémentaires qui permettent d’inventorier un grand nombre de soucis potentiels ou avérés.

• Dans la majeure partie des cas, les résultats de ces deux méthodes iront dans le même sens (la complexité de la page d’accueil qui dégrade l’expérience utilisateur, par exemple).

• Il arrive que ce ne soit pas le cas (exemple : la splashpage).

• Lorsqu’un utilisateur veut vraiment quelque chose (naviguer parmi les accessoires du site), il est capable de chercher un bon moment et de trouver une astuce pour y arriver (naviguer à l’envers).

• Il lui arrive cependant d’être contraint à renoncer (la collection chaussures, introuvable sans aide).

• Avant même de faire appel à ces méthodes, il semble important de vérifier le bon fonctionnement du site (mise en page des pages accessoires)… et des sites afférents (bug de yoox.com).

 

* Il ne s’agissait pas d’un test utilisateur au sens « traditionnel » du terme, plutôt d’une découverte de site.