Web mobile : même les meilleurs oublient de tester ?

Je consulte ce matin le top 100 des e-mails marketing de 2014 de Campaign Monitor (via ‏@kReEsTaL), une plateforme d’emailing souvent considérée comme une référence dans son secteur. Voici la page regroupant les meilleurs e-mails en terme de performance :

Campaign Monitor - les e-mails les plus performants

Lorsque je scrolle, un layer d’inscription à la newsletter apparaît en bas à droite de la page.

Campaign Monitor - layer en bas à droite

C’est un layer assez classique, qu’une petite croix judicieusement située en haut à droite permet de fermer. Je clique sur cette croix, le layer disparaît, tout va bien.

Je me rends ensuite sur la page des meilleurs e-mails en terme de design. Déception : bien que j’aie fermé le layer sur la page précédente, il apparaît ici à nouveau.

Campaign Monitor - layer sur une autre page

C’est mal fichu (j’ai déjà signalé au site que son layer ne m’intéressait pas, ce n’est sûrement pas en me l’affichant à nouveau que je vais changer d’avis), mais ce n’est pas le plus gênant.

Lorsque je redimensionne ce site responsif, le comportement du layer change. Au premier point de rupture, le layer n’apparaît plus seulement au scroll, mais dès le haut de la page.

Campaign Monitor - layer inamovible, bouton "fermer" caché

Et surtout : la croix permettant de le fermer a disparu ! Il est désormais impossible de le masquer. Et si ça ne me pose pas (trop) de problème ici, sur un ordinateur dont je redimensionne la fenêtre, la situation est très différente sur mobile :

Le layer masque ici une partie non-négligeable de l’écran, ce qui est particulièrement désagréable pour consulter la page. Et comme il est impossible de le masquer, eh bien… tant pis pour moi.

Une fois encore, un simple test aurait permis aux concepteurs de constater la gêne qu’engendre ce layer. Cette fois aussi le problème est mineur et relativement simple à résoudre. Alors, quand est-ce qu’on teste ?

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.

Jouer sur smartphone, une plaie moderne

Il y a quelques semaines j’ai décidé d’acheter mon premier jeu sur smartphone. J’ai sélectionné Out There, un excellent rogue-like que j’ai découvert via son créateur, FibreTigre. J’ai passé pas mal de temps à jouer ces derniers jours, et je peux désormais en tirer quelques conclusions sur mon expérience de jeu sur mobile.

Jeu sur smartphone - 01 - carte de Out There

En plein centre, l’étoile autour de laquelle orbite mon vaisseau. Tout autour, des étoiles (blanches, jaunes, rouges…)

Dans Out There, je dois ramener mon vaisseau spatial, perdu dans l’espace, sur Terre. Je me déplace donc d’étoiles en étoiles afin de retrouver ma chère planète. Il s’agit d’une action très simple : j’appuie sur une étoile, je confirme mon action et mon vaisseau se déplace. Jusque là, rien de compliqué.

Jeu sur smartphone - 02 - inventaire de mon vaisseau

À gauche, les réserves de mon vaisseau. À droite, les opérations de maintenance.

Les problèmes commencent avec la gestion de l’inventaire. Mon vaisseau consomme du carburant et de l’oxygène, il faut donc que je puise régulièrement dans mes réserves afin de remettre de l’hydrogène dans le réservoir et de l’oxygène dans l’habitacle. Une action très simple ici aussi : j’appuie sur le carré ‘H’, je maintiens mon appui, je déplace le carré vers la zone de maintenance ‘H’ (en haut à droite) et je relâche.

Jeu sur smartphone - 03 - déplacement de ressources

Très simple, et pourtant… Au début, je ratais mon coup régulièrement, et après plusieurs heures de jeu il m’arrive encore fréquemment de me louper.
Première raison : l’écran de mon smartphone est petit (c’est un modèle 5″) et/ou mon doigt est gros. Il arrive donc régulièrement que je n’appuie pas exactement au bon endroit.
Seconde raison : lorsque j’appuie sur le carré ‘H’, mon doigt masque la zone, m’empêchant ainsi de savoir si le carré est effectivement sélectionné.

Certains déplacements d’éléments sont encore plus difficiles. Lors d’un transfert de ressources d’un vaisseau à un autre par exemple, les carrés sont tellement petits que leur déplacement est une véritable plaie (avec mon gros doigt et sur mon smartphone en tout cas.)

Jeu sur smartphone - 04 - transfert de ressources

Autre souci rencontré régulièrement : les appuis répétés sur un même bouton.

Jeu sur smartphone - 05 - division de ressources

Je dispose ici d’un stock de 19 ‘He’. si je veux le diviser en deux parties (17 et 2, par exemple), il faut que j’appuie plusieurs fois sur le (tout petit) bouton ‘+’ pour répartir mon stock. Problème : le smartphone réagit extrêmement mal, dit autrement je dois appuyer un tas de fois pour que le compteur s’incrémente. (Je suis bien incapable de dire si le problème est hardware ou software.)

Au passage : lorsque j’appuie sur le bouton, mon index masque la zone d’affichage. Je dois donc attendre de relever mon doigt pour savoir si mon action a réussi.

Je joue depuis tout petit. Je crois que la première “manette de jeu” que j’ai essayée était le contrôleur de la Colecovision (ou le “joy stick” de l’Apple II, je ne sais plus, de toute façon la conclusion est la même) : j’en ai un très mauvais souvenir, les boutons étaient très désagréables et répondaient vraiment mal. J’ai également passé beaucoup de temps avec des joysticks en main(s), et leur fonctionnement laissait souvent à désirer. Quelques années plus tard la NES est arrivée, et depuis les manettes de jeux ne m’avaient plus posé de problème.

Jeu sur smartphone - 06 - vieux joystick

L’écran tactile, tel que je l’ai expérimenté ici du moins, me fait l’effet d’une régression. La sensation d’“action effectuée” n’est pas franche, et ce flou m’a beaucoup perturbé.

Autre point qui m’a ennuyé, la position de jeu. Après plusieurs heures d’expérimentations, je n’ai toujours pas trouvé de position agréable pour jouer sur mon smartphone. La plupart du temps je pose l’appareil sur le bureau et je me penche dessus… ce qui se révèle très inconfortable à la longue. Il m’arrive aussi de jouer assis dans le canapé, mais à ce moment-là la prise en main de l’appareil est problématique (pour moi qui n’arrive pas à jouer avec les pouces). Bref pas moyen de s’installer confortablement pour jouer.

Point amusant : je n’ai pas de problème d’écran tactile ni de position de jeu (disons, moins) avec une Nintendo DS. L’appareil a été conçu pour jouer, ça se ressent immédiatement, l’expérience n’a rien à voir.

Une dernière chose pour conclure, sans doute le point qui m’ennuie le plus : il m’est impossible de prêter mon jeu à un ami ou de le revendre. Et alors ça vraiment, ça m’emmerde.