Attrapons les insectes ! Un guide pour les débutants sur les tests de sites Web

 James Tsividis
James Tsividis

Suivre

2 mai 2019 * 5 min de lecture

Les tests de sites Web sont beaucoup plus simples qu’il n’y paraît. Vous n’avez pas besoin d’être testeur pour le faire. Et vous aurez un aperçu de votre produit qui vous aidera à le comprendre d’une toute nouvelle manière.

Je suis testeur sur le projet de Présence Numérique unique (SDP). Mon travail consiste à tester des sites Web SDP sur de nombreux navigateurs, tailles d’écran et appareils pour trouver des bugs et assurer une expérience utilisateur optimale.

Les tests vous aident à mieux comprendre vos utilisateurs

Lorsque je teste un site Web, je ne cherche pas seulement à trouver des erreurs ou des bugs, mais j’essaie de le regarder à travers autant de lentilles différentes que possible. Cela signifie utiliser un site Web sur différents appareils, dans différents navigateurs et dans différentes tailles d’écran. Certains bugs n’apparaissent que dans 1 navigateur, il est donc nécessaire de tester de nombreux environnements différents. C’est également une excellente occasion de voir comment différents utilisateurs pourraient interagir avec le site.

Ce que nous testons sur

Pour le vic.gov.au site web, nous testons sur plusieurs environnements, y compris Windows, Mac, Android et iOS. Nous testons sur des ordinateurs de bureau, des tablettes et des téléphones, ainsi que plusieurs navigateurs Internet pour certains appareils.

Nous utilisons les normes numériques du gouvernement victorien pour tester un guide de produit ou de service qui comprend des navigateurs couramment utilisés et des modèles de tests d’acceptation des utilisateurs.

Nous ne savons jamais comment les gens accèderont à notre site, nous voulons donc nous assurer que quelle que soit la façon dont ils y accèdent, leur expérience est cohérente et qu’elle répond à nos normes de qualité. Bien sûr, il existe un nombre apparemment infini d’appareils sur lesquels nous pouvons tester nos sites, mais l’utilisation des appareils que nous avons déjà et que nous pouvons emprunter à d’autres suffit souvent à nous fournir un aperçu inestimable de la façon dont le public pourrait le percevoir.

Après le vic.gov.au le site Web a été publié, je me trouvais au centre commercial Doncaster. Je suis donc allé à l’Apple store pour tester le site sur un de leurs iPhones, car je n’en avais pas moi-même. J’ai rempli l’un des formulaires de commentaires de la page et l’ai signé comme « James d’un Apple Store », et notre équipe de contenu a apprécié les efforts que j’ai déployés pour tester le site.

Si vous souhaitez des données précises sur les appareils, navigateurs et tailles d’écran utilisés par les utilisateurs pour accéder à votre site, vous pouvez toujours vérifier Google Analytics s’il a été configuré avec votre site.

Test de glisser

Le premier test que j’aime faire lors du test d’un site Web est le test de glisser. Cela me permet de comprendre rapidement à quoi pourrait ressembler le site Web sur différentes tailles d’écran et sur différents appareils, tout en restant dans le même navigateur.

Le test de glisser consiste à faire glisser la fenêtre du navigateur de la plus grande taille à la plus petite taille, afin de voir à quoi ressemble le site à différents points d’arrêt, qui est le point auquel le site se transforme en fonction de la taille de la fenêtre d’affichage.

Les points d’arrêt sont nécessaires car nous voulons que les choses deviennent plus grandes ou plus petites pour s’adapter aux différentes tailles d’écran sur lesquelles nous pouvons visualiser le site, et faire glisser la fenêtre pour qu’elle soit plus petite ou plus grande est un moyen facile d’observer tous ces changements. Voyons donc un exemple avec le vic.gov.au page d’accueil.

C’est mon vic.gov.au la page d’accueil s’est ouverte à sa taille maximale sur mon écran iMac 27 « . Observons la page d’accueil et voyons ce qui se passe lorsque nous réduisons la fenêtre.

C’est le vic.gov.au page d’accueil mais il occupe un peu moins de la moitié de l’écran maintenant. Dans l’image, j’ai noté certaines des différences majeures entre les deux images jusqu’à présent.

Cette image est la plus petite version du site et est visible sur les téléphones mobiles. Ce sera le plus différent des autres.

Ce ne sont pas les trois seuls points d’arrêt de taille d’écran sur vic.gov .au et ce sera différent pour chaque site, mais c’est quelque chose pour vous aider à démarrer.

Je regarde souvent l’en-tête pour voir sur quel point d’arrêt je suis car presque tous ont quelque chose de changé dans l’en-tête à chaque fois. Et j’ai appris à quoi ressemble chaque en-tête différent en regardant les conceptions du site. Cela aide beaucoup d’avoir accès aux conceptions afin que vous puissiez savoir si une fonctionnalité est censée ressembler à un certain point d’arrêt de taille d’écran. Compte tenu du nombre de différences entre les points d’arrêt, il y a souvent quelques erreurs dans l’implémentation. C’est donc un test très précieux à faire pendant le développement du site.

N’oubliez pas de faire le test de glisser pour l’en-tête, le contenu et le pied de page du site, car ils ont tous un contenu unique qui pourrait changer d’un point d’arrêt à l’autre. Notez également où va le contenu de la barre latérale lorsque la page devient suffisamment petite. Il va généralement quelque part au fond.

Test de type de contenu

Chaque site Web a des types de contenu de page différents. Assurez-vous de vous familiariser avec chaque type de contenu car vous testerez différents attributs sur chaque page. Certaines pages varient plus que d’autres. Sur vic.gov.au , nos types de contenu sont:

  • Alerte
  • Événement
  • Subvention
  • Landing Page
  • Actualités
  • Page
  • Profil

Pour en savoir plus sur les types de contenu, visitez: https://www.vic.gov.au/what-single-digital-presence-offers#page-templates-available-on-sdp

Test de l’appareil et du navigateur

Et enfin, une fois que vous avez testé le site à fond sur votre navigateur préféré, il est toujours bon de voir à quoi il ressemble sur d’autres appareils et navigateurs — en particulier les plus populaires — car l’expérience tactile n’est pas quelque chose que vous pouvez toujours anticiper, et vous pouvez toujours trouver des bugs spécifiques à un certain navigateur sur un appareil particulier. Qui semblent sortir de nulle part et sont complètement inattendus.

Liens de test pratiques

  • Navigateurs les plus populaires (Australia) — http://gs.statcounter.com/browser-market-share/all/australia
  • Navigateurs les plus populaires (Monde) — http://gs.statcounter.com/browser-market-share
  • Simulateur iPhone (Mac uniquement) — https://developer.apple.com/xcode/
  • Si vous souhaitez effectuer des tests spécifiques à un appareil au lieu de simplement tester la résolution d’écran, Google Chrome Developer Tools dispose d’une barre d’outils pour appareils qui peut simuler le comportement d’un appareil réel, mais ce n’est pas parfait.

Il existe de nombreuses techniques de test de sites Web non discutées dans cet article, mais c’est un excellent point de départ. La prochaine chose que je testerais est que les données saisies dans les formulaires apparaissent correctement dans le backend et que les données non valides ne peuvent pas être saisies.

Amusez-vous à tester et j’ai hâte d’entendre ce que les gens apprennent de cet article. Faisons tous mieux le web ensemble!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.