Web mobile, l’intérêt d’un petit test

Dans l’article Le web mobile et la performance que je lisais ce matin, Jean-Pierre Vincent présente une intéressante liste de techniques visant à améliorer la consultation de pages web en situation de mobilité. Il est question de polices, d’images, de cache, de responsive etc.

La principale conclusion de l’auteur concernant la création de pages optimisées tient en deux mots : « Mobile first ». Et le conseil le plus important (c’est facile, c’est celui qui est en gras) que fournit l’auteur tient lui en un seul mot : « testez ». Un conseil valable pour la performance du site bien entendu, mais aussi pour son design. Démonstration.

Peu de temps après la lecture de l’article, je discute avec un collègue des conférences Paris Web qui m’ont plues. Nous n’avons pas d’ordinateur à portée de main, du coup je sors mon mobile et je me rends sur le site de l’événement pour lui montrer de quoi il retourne.

Web mobile - homepage du site mobile de Parisweb

La homepage du site mobile

J’appuie ensuite sur Programme 2014 pour afficher la liste des conférences. Et là, il ne se passe rien. Je me dis que c’est normal, que la liste des conférences est une page très longue et donc probablement très lourde à charger, mais même après plusieurs secondes, aucun changement. Ce qui est assez surprenant d’ailleurs : rien ne se passe, mais la homepage est toujours affichée. D’habitude, un problème de chargement engendre un message d’erreur ou une page blanche, mais ici la page est toujours sous mes yeux.

Web mobile : homepage du site de Parisweb ?

Aucun changement

J’appuie une nouvelle fois sur le lien, même résultat, l’écran affiche toujours la même chose.

C’est seulement au troisième appui, et parce que je fixe l’écran (et que j’aperçois la barre de chargement) au lieu de continuer à discuter avec mon collègue, que je comprends le problème : la page Programme 2014 est bien sous mes yeux, c’est juste que la partie haute de la page est la même que sur la homepage !

Un simple défilement au doigt permet de révéler la suite du contenu :

Web mobile : programme du site de Parisweb

La suite de la page

Et ce problème est présent sur toutes les pages du site : lorsque j’appuie sur le lien Orateurs ou lorsque je fais une recherche, je retombe invariablement sur le même header de page.

Web mobile : résultats de recherche sur le site de Parisweb

La page des résultats de recherche

Ceci me ramène donc à la principale conclusion de l’article de Jean-Pierre Vincent : il faut absolument tester son site pour éviter ce genre de problème. Ici le contenu de la page est placé trop bas, ce qui empêche l’utilisateur de constater le changement de page. C’est un problème mineur, relativement simple à résoudre, mais qui peut vraiment gêner la consultation du site.

Note : bien entendu il est impossible de tester toutes les résolutions d’écran. Dans ce cas précis, mon smartphone (un iPhone 5) est tellement populaire qu’on peut considérer que tester sa résolution est opportun.

Gmail ne badine pas avec la sécurité

Je dispose comme beaucoup d’internautes de plusieurs « identités » sur internet, chacune associée à un compte de messagerie différent. Il y a quelques jours, j’ai voulu utiliser une vieille adresse Gmail dont je ne m’étais pas servi depuis longtemps. Problème : impossible de retrouver le mot de passe. J’ai donc fait appel au système de récupération de mot de passe de Google.

Récupération de mot de passe Gmail - 01

Je sélectionne le problème que je rencontre, « je ne connais pas mon mot de passe », j’indique l’adresse e-mail concernée et j’appuie sur le bouton Continuer.

Récupération de mot de passe Gmail - 02 - dernier mot de passe

Le système me demande de fournir le dernier mot de passe dont je me souvienne. J’ai totalement oublié le mot de passe que j’avais utilisé à l’occasion de la création du compte, je clique donc sur le bouton Je ne sais pas.

Récupération de mot de passe Gmail - 03 - adresse de contact

Les choses sérieuses commencent, comme semble l’indiquer la barre de progression qui s’affiche à l’écran (une barre de progression pour la récupération d’un mot de passe ?) Le système me réclame une adresse e-mail à laquelle je peux être joint. Je m’exécute et je valide avec le bouton Continuer.

Récupération de mot de passe Gmail - 04 - date de création

On rentre dans le vif du sujet. Le système me réclame cette fois – et les réponses sont obligatoires :
• la date de ma dernière connexion (sous la forme peu française mois / jour / année) : pas toujours facile de s’en souvenir (impossible dans mon cas) ;
• la date de création du compte ! Sérieusement, il y a beaucoup de gens qui se souviennent de la date de création de leur compte e-mail ?

J’entre des dates très approximatives et je valide.

Récupération de mot de passe Gmail - 05 - contacts, libellés

Cette fois, le système me réclame plusieurs adresses de contacts à qui j’ai fréquemment envoyé des e-mails. Pas trop compliqué pour une personne qui utilise régulièrement son compte. Plus étrange, le système réclame également les noms de quatre libellés au maximum : je vois bien de quoi il s’agit, mais je ne suis vraiment pas certain que ce soit le cas de tous les utilisateurs de Gmail… Pour finir, on me demande la première adresse (il y en a eu plusieurs ?) de récupération de mot de passe dont je me souvienne. Euh…

Google a tout de même prévu un bouton permettant de passer ces questions. Sage décision. Je passe à la suite.

Récupération de mot de passe Gmail - 06 - autres produits Google

Dans cette dernière étape, le système me demande les noms des autres produits de Google que j’utilise, ainsi que leur date (approximative) de première utilisation.

Quelques remarques au passage :
• Les menus déroulants trop court pour afficher tout le texte, ça ne fait pas très sérieux, ça ne ressemble pas à du Google (ou alors à du Google translate.)
• La gestion des erreurs est à revoir : si par mégarde j’entre un nom de produit mais que je fournis pas de date de première utilisation, le message suivant s’affiche :

Récupération de mot de passe Gmail - 07 - gestion des erreurs

Problème, il n’est pas possible de désélectionner le produit Google. La seule façon de procéder, c’est de revenir à la page précédente avec le bouton du navigateur. Pas évident.

Je clique sur le bouton Envoyer, et…

Récupération de mot de passe Gmail - 08 - confirmation

Victoire ! Je vais enfin pouvoir accéder à ma boîte mail !

(Au passage, j’apprécie beaucoup la dernière phrase de cette page. « Si vous n’avez pas reçu d’e-mail de réinitialisation de mot de passe et que votre dossier de spam est vide, essayez d’accéder à votre compte d’une autre manière. » Qu’est-ce que ça peut bien vouloir dire ?)

Je comprends très bien l’importance de la sécurisation de ce genre de données, et je pense qu’une récupération complexe est vraiment une bonne chose. Pour autant, certaines données réclamées ici (date de création du compte, libellés – heureusement facultatifs, date de première utilisation des autres produits Google…) semblent particulièrement inaccessibles.

L’importance du retour utilisateur (ou feedback direct)

J’ai effectué à l’instant un achat sur le site d’H&M. Sur la fiche produit, le manque de retour utilisateur m’a déconcerté.

l'importance du retour utilisateur - 01 : la fiche produit d'H&M

Je clique ici sur le (minuscule) lien guide des tailles. Voici ce qui s’affiche :

l'importance du retour utilisateur - 02 : affichage du guide des tailles

Manifestement ce layer est vide. J’attends une bonne dizaine de secondes, rien ne se passe. Dans le doute je le ferme puis le rouvre : cette fois, le contenu s’affiche convenablement.

l'importance du retour utilisateur - 03 : affichage OK du guide des tailles

Que s’est-il passé ? Je suppose que le contenu du layer ne s’est pas chargé assez vite. Le problème, c’est que le visiteur n’a aucun moyen de savoir ce qui se trame : pas de barre de chargement, de sablier, de message d’information, etc.

Au niveau de la photo de l’article, on retrouve le même type de comportement désagréable lors du chargement en arrière-plan du visuel “pleine page”.

Lorsque je clique sur une vignette de la colonne de gauche, le visuel s’affiche en grand sur mon écran. Problème : lorsque je clique sur une autre vignette, il ne se passe rien.

l'importance du retour utilisateur - 04 : zoom pleine page

Aucun indice ne me permet de savoir que le visuel se charge en fait en arrière-plan. C’est d’autant plus gênant ici qu’il ne se passe vraiment rien (dans le cas précédent l’ouverture du layer, même vide, représentait tout de même une réponse à mon action.)

Pour finir, même remarque lorsque je clique au centre du visuel de la fiche produit pour l’agrandir : dans un premier temps, le visuel est agrandi… mais dégradé.

l'importance du retour utilisateur - 05 : zoom produit

Aucun élément d’interface n’informe l’utilisateur de ce qui est en train de se passer – ici le chargement en arrière-plan du visuel de bonne qualité qui viendra remplacer l’image dégradée.

J’ai noté un problème similaire sur le site d’Asos, qui propose sur ses pages-listes une fonctionnalité d’aperçu. Lorsque je clique sur le bouton vue rapide, il ne se passe rien.

l'importance du retour utilisateur - 06 : Asos, vue rapide

Bien sûr l’aperçu s’affiche au bout de quelques instants, mais le problème n’est pas là : ce petit temps de latence est très désagréable pour l’utilisateur, qui se demande ce qui se passe, s’il a bien cliqué, etc. L’expérience est inutilement dégradée et manque de fluidité. À l’inverse, une réaction immédiate de l’interface rassure l’utilisateur.

Jean-Claude Grosjean en a fait un point essentiel de sa liste de critères ergonomiques : le feedback direct.

C’est l’art de tenir l’utilisateur, en temps réel, informé de ce qui se passe. Ce critère concerne les réponses du système consécutives aux actions des utilisateurs. Son absence est  source d’incompréhension, parfois déstabilisante selon les contextes. Sa présence est un fort élément de réassurance.

Plus d’informations et d’exemples sur cette page de son site Qualitystreet.