Archives des en vitesse - Page 5 sur 12

15 décembre 201419 février 2019

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.

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.

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 :

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.

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.

7 novembre 201413 février 2018

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 ?

30 juin 201413 février 2018

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é.

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

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.

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.

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é.

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.

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.