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.

Modifier le comportement du clic droit, une mauvaise idée ?

Mon estimé confrère Hteumeuleu twittait cette phrase hier :

Et le #darwwwin de la « Mauvaise Idée Au Clic-Droit sur le Logo du Site » est attribué à… https://www.playframework.com/download

Un clic-droit sur le logo du site de Play Framework ouvre en effet une fenêtre modale permettant au visiteur de télécharger les logos de l’entreprise dans différents formats.

Les réactions à ce message (et au suivant) ont été plutôt nombreuses. La réponse la plus fréquente est : pourquoi est-ce une mauvaise idée ?

Je me suis penché sur cette idée il y a un moment. Voici les conclusions auxquelles j’étais arrivé.

– Premier problème : rien n’indique au visiteur ce nouveau comportement, or on le sait : il est mal perçu de modifier le comportement standard du navigateur. Que ceux qui en doutent se remémorent les sites en Flash qui pendant des années ont altéré le comportement du bouton “page précédente” du navigateur.

– Deuxième problème : rien n’indique au visiteur ce nouveau comportement, autrement dit l’affordance de ce comportement est nulle. Je pense cette fois à la personne qui souhaite justement récupérer le logo de l’entreprise : comment peut-elle deviner que tous les logos sont téléchargeables via un clic-droit sur le logo du site ? Le réflexe d’un habitué sera plutôt de chercher une page dédiée sur le site, ou via Google (c’est si facile : Facebook brand, Twitter guidelines…) par exemple.

Quel graphiste pensera faire un clic-droit sur le logo pour le télécharger ? Un logo de moins de 300px de large, que pourrait-il bien en tirer ? Bien entendu, s’il n’a besoin que d’un petit logo un clic-droit enregistrer sous… suffirait, mais dans ce cas… il n’a pas besoin d’un logo en haute définition.

La bonne nouvelle, c’est qu’on peut retrouver le logo via Google Images (en bas de la page 2). La seconde bonne nouvelle, c’est qu’une fois désespéré le graphiste à la recherche du logo risque effectivement de faire un clic-droit sur l’image pour l’enregistrer…

– Troisième problème : les options traditionnelles du clic-droit ne sont plus accessibles. C’est probablement ce qui a le plus gêné mon estimé confrère, et c’est probablement ce qui lui a donné envie d’en parler.

Il serait amusant de connaître et de comparer les deux chiffres :
• le nombre de personnes qui ont fait un clic-droit dans le but de télécharger le logo ;
• le nombre de personnes qui ont fait un clic-droit dans le but de… faire un clic-droit.

– Quatrième problème : il n’est pas possible (à ma connaissance) d’accéder à ces logos via un terminal tactile.

C’est à peu près tout ce qui me vient en tête (les suggestions sont les bienvenues !) J’ajoute pour finir que ce comportement pose peut-être des problèmes d’accessibilité (je ne connais pas ce domaine), et que le choix d’une modale est toujours discutable.

Tous ces problèmes ne sont pas dramatiques. Ce qui est bête, c’est qu’il y a mieux et beaucoup plus simple : pourquoi ne pas faire une page dédiée, comme beaucoup d’autres entreprises ? Cela résout tous les problèmes : pas de modification de comportement, un lien évocateur permet au visiteur de trouver ce qu’il cherche sans souci, les options du clic-droit restent accessibles et la récupération des logos est possible via un terminal mobile. Pourquoi faire compliqué quand on peut faire simple ?

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.

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.

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.

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.

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.

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.

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 :

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…

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.