Tester un site web mobile sans mobile… le prix du ‘sans’?

Tester un site web mobile sans mobile… le prix du ‘sans’?

 

Cet article complète celui écrit par Stéphane concernant la diversité des méthodes disponibles pour pouvoir effectuer vos tests mobiles sans le matériel physique indispensable:Comment tester sur mobile sans mobile?

Attention cependant à la pertinence de vos tests…

Au vu du prix élevé des smartphones grand public, et malgré l’apparition de solutions moins coûteuses comme les plateformes de reconditionnement – par exemple celle de BackMarket-, la gratuité et la facilité d’accès de certaines de ces méthodes comme les outils de simulation des navigateurs tendent à nous les faire utiliser plus souvent que nos appareils physiques de test.

Prenons un premier exemple: entrer l’URL du site ou cliquer sur son lien favori dans le navigateur desktop configuré sur l’affichage responsive paraît plus rapide que de taper l’URL à la main dans le navigateur mobile, ou d’accéder en quelques taps au menu des favoris… entre les deux solutions, et à condition d’avoir le téléphone préparé à portée de main, le gain de temps peut atteindre environ quinze secondes.

Ce gain de temps peut parfois être considérable: dans le cas de la plateforme iOS et de son IDE XCode, lancer le simulateur avec le tout dernier build permet de s’affranchir des problèmes de certificats requis pour l’installation du build sur des artefacts mobiles physiques. D’expérience, et si vous n’avez pas les connaissances minimales requises, ces problèmes peuvent prendre un long moment à être résolus et impliquent parfois l’aide extérieure d’un collègue.

Ces avantages de prix et de ‘rapidité apparente’ peuvent donc créer un confort et des habitudes qui sont les ennemis des testeurs. En effet, malgré le temps gagné, quelle pertinence ont les tests effectués sur ces supports ?

Ayant travaillé trois ans pour le groupe Net-A-Porter.com Yoox – un site de vente en ligne de vêtements et articles de luxe – au sein de l’équipe de développement de leurs applications mobiles iOS et Android, voici un petit récapitulatif de mon expérience et des avantages / inconvénients dont je me suis aperçu en testant des sites web mobiles sur ces différents supports.

 

User Agent

Exemple: User Agent Switcher extension sur Chrome

Représentez-vous le User Agent comme une courte liste de caractéristiques que le navigateur web envoie au serveur pour s’authentifier, un peu comme celles inscrites sur votre pièce d’identité: votre date de naissance, votre genre… Grâce aux plugins disponibles, il est très facile de falsifier l’identité d’un client web et ainsi d’en usurper une autre: par exemple, vous pouvez vous faire passer pour un iPhone tout en naviguant depuis votre navigateur Chrome de bureau: vous obtiendrez ainsi rapidement la mise en forme prévue pour ce type de périphérique mobile. Un plugin utile est le ‘User Agent Switcher’ disponible sur le Chrome Web Store

Le gros avantage que j’y trouve personnellement pour mes tests est de pouvoir rapidement tester les libellés des textes. Ceci s’avère extrêmement utile pour des scénarios de traduction afin de rapidement traquer les textes manquants ou non traduits.

Néanmoins, il sert uniquement à ‘mimer’ l’affichage du site sur la plateforme demandée, et ne dimensionne absolument pas l’affichage dans la taille réelle de cette dernière. Par conséquent, vous ne pouvez pas vous rendre compte si ces fameuses traductions allemandes à rallonge ne déforment pas le rendu de la page car elles sont trop longues pour les boutons d’interaction…

Avantages

  • Tests rapides des libellés des textes (scénarii de traduction, ajout de mentions légales…)

Inconvénients

  • Outil non pertinent pour tous les autres tests, car dépend d’une plateforme décorrélée de la réalité des supports mobiles testés.

 

Outils de développement des navigateurs

Dans son article, Stéphane montre l’outil de dimensionnement responsive de Google Chrome, qui permet d’avoir un rendu bien plus fidèle de l’affichage des éléments du site. Vous pourrez ainsi résoudre votre casse-tête avec les traductions allemandes.

Cependant, une fois de plus, vous ne pourrez pas vous fier au comportement des fonctionnalités via ce type d’outils, qui dépend en effet de la plateforme de votre poste local qui ne reflète pas celle des périphériques de test mobiles.

La variété des outils disponibles vous permettront également d’obtenir rapidement des informations que vous ne pourrez pas voir immédiatement en testant le site web sur le téléphone: je pense à l’onglet ‘Network’ qui permettra certainement de mettre en évidence des temps de chargement anormaux, ou des requêtes manquantes… je pense également aux cookies qui peuvent être visualisés et gérés pour vous permettre d’effectuer quelques tests de sécurité.

Gros point positif, et à condition de prendre un peu de temps pour mettre en place l’écosystème (une heure maximum), il est désormais souvent possible de combiner ces outils puissants au site web testé depuis le mobile: concernant les requêtes réseau, je pense aux outils de proxy, qui vous permettront de capturer les requêtes de votre site web mobile et de les analyser. Le navigateur Safari permet de sélectionner le matériel mobile souhaité et met à disposition de vos tests toute sa panoplie d’outils de développement.

Avantages

  • Les outils d’affichage responsive permettent d’avoir des retours rapides sur le rendu de l’affichage,
  • Grande variété et puissance des outils disponibles.

Inconvénients

  • La qualité des outils de développement est inégale selon les navigateurs, ce qui risque d’orienter une plus grosse portion des tests sur un navigateur non représentatif de la cible cliente de votre application,
  • Les tests de fonctionnalité ne sont pas pertinents.

 

Simulateur

Bien que nécessitant l’installation d’un écosystème au préalable, le simulateur permet de faire un grand bond en avant dans le rapprochement du comportement par rapport au mobile. Le rendu d’affichage est bien plus fidèle et pertinent que celui des outils de navigateur, et il offre une panoplie d’options réelles des navigateurs et de l’OS mobile, bien qu’incomplète.

D’expérience, le simulateur est un outil très fiable pour obtenir des retours fonctionnels rapides, voire effectuer quelques smoke tests. Il est extrêmement utile pour augmenter la couverture de tests et couvrir les configurations physiques des périphériques mobiles manquants à l’entreprise – en particulier sur Android.

Attention car il reste en usage ‘au clic’ sur votre poste et ne représente aucunement l’expérience ergonomique souhaitée par votre site web mobile utilisée par des ‘tappeurs’. Il n’a également pas les contraintes de ressources de votre périphérique mobile, et ne vous permettra pas de détecter les problèmes de réactivité et de performances.

Par ailleurs, j’ajouterais un bémol supplémentaire: il m’est arrivé d’observer des bugs web qui apparaissaient sur le navigateur web du périphérique de test et non sur le simulateur, notamment des bugs impliquant des URLs de redirection, impactant l’affichage de certaines pages: par exemple des pop-up de conditions générales, ou des pages transférant des paramètres d’URL…

Avantages

  • Tests fonctionnels pertinents, utilité pour smoke tests,
  • Augmente la couverture des tests en testant les configurations physiques manquantes.

Inconvénients

  • Le simulateur requiert souvent l’installation d’un écosystème (IDE, compte et abonnement pour plateforme iOS, versions de SDK correspondants aux différentes versions d’OS)
  • Tests d’ergonomie des fonctionnalités pas du tout pertinents: réactivité des boutons, problème de gros doigt, cohérence du positionnement des éléments de l’interface par rapport à l’usage…
  • Utilise les ressources de votre ordinateur: impossible de détecter des problèmes de performance spécifiques au mobile, comme la réactivité des boutons suite à de multiples taps…
  • L’OS sur simulateur ne donne pas accès à toutes les options de l’OS mobile, donc limitant pour les fonctionnalités qui intègrent certaines options au sein de votre site web mobile (l’appareil photo par exemple).

 

Emulateur

Je n’ai personnellement jamais testé de site web mobile ni d’application native sur un émulateur, je ne peux donc pas partager d’expérience avec vous sur ce point. Je sais seulement qu’un émulateur est censé tourner avec la même configuration hardware que le périphérique physique, permettant d’adresser la limitation des ressources observées avec le simulateur.

 

Les services cloud

Ces services ont également été mentionnés par Stéphane dans son article, et je n’ai jamais non plus utilisé ces services Cloud pour tester. Nous serions ravis d’avoir votre feedback sur le sujet.

 

Le périphérique mobile physique

N’oublions pas le véritable Hercule du test mobile, le support physique lui-même!

Un point dont nous n’avons pas encore parlé est le test du rendu des images: l’écran physique fera très facilement ressortir les images de mauvaise qualité nécessitant d’être retravaillées: celles-ci sont floutées. Mon expérience sur iOS a démontré un besoin de définir des images de qualité différentes pour les écrans Retina (iPad depuis version 3 par exemple) Non-Retina (iPad version 2 et antérieures), exigence fonctionnelle implicite qui pouvait souvent être omise dans le développement d’une User Story si elle n’était pas explicitée dès la conception. Ceci impliquait un travail des designers mobiles et que les images soient livrées à temps pour l’intégration dans le build (à une époque où nous n’avions pas encore de serveur d’images pour distribuer le contenu).

Avantages

  • Représentatif des contraintes de ressources hardware et software,
  • Permet de tester efficacement la qualité de rendu des images

Inconvénients

  • Investissement parfois coûteux pour certains modèles de périphériques mobiles,
  • Il faut parfois partager le peu de périphériques avec les autres membres de l’équipe, ce qui parfois provoque des goulots d’étranglement sur certains projets.

 

Finalement, que dois-je retenir de cet article?…

…Que les outils de test disponibles pour s’affranchir des périphériques physiques ne sont que des méthodes ponctuelles pour accélérer certains de vos tests. Utilisés avec sagesse, ils vous permettront d’augmenter la couverture des tests et de réduire les risques, mais ne pourront jamais se substituer aux téléphones physiques.
Si votre entreprise ne souhaite pas investir dans des périphériques physiques, tâchez d’en connaître la raison: il est possible qu’ils trouvent tous ces outils plus alléchants pour les tests. Grâce à cet article je l’espère, vous serez pleinement armés pour les convaincre du contraire…

5 réactions au sujet de « Tester un site web mobile sans mobile… le prix du ‘sans’? »

  1. J’ajouterais tout de même qu’un labo de test physique est efficient dans le cas où peu de configurations différentes sont représentées. Plus il y a de configurations différentes et plus l’investissement est lourds, la maintenance compliquée et coûteuse.
    Cela dit c’est tout à fait vrai : rien de plus fidèle que les devices physiques.
    Merci pour votre article.

    1. Merci pour votre point de vue sur le labo physique, je pensais que la contrainte majeure de ce support était que les périphériques étaient nécessairement partagés sur le moyen terme entre plusieurs entreprises, est-il possible d’en garder des dédiés pendant longtemps?

      1. Pour être franc je n’ai connu que des labos dédiés. Mais la mutualisation entre sociétés peut être une solution, effectivement. Tant que les besoins des entreprises sont conciliables…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.