Test mobile - UI

Supposons que nous utilisons une application mobile et, chose intéressante, vous rencontrez la situation suivante -

  • L'alignement du bouton est manquant.
  • Le texte est coupé.
  • Le contrôle du calendrier est coupé.

En effet, c'est une expérience désagréable pour l'un des utilisateurs. Pour nous assurer que nous fournissons une excellente expérience à nos utilisateurs, Mobile UI Testing est fortement recommandé.

Le premier domaine à explorer dans votre plan de test est l'interface utilisateur. C'est votre travail en tant que testeur de confirmer que votre application répond à certaines attentes, telles que -

  • Jeu de couleurs / thème général de l'appareil
  • Style et couleur des icônes
  • Indicateurs de progression lors du chargement des pages
  • Menus et comment ils sont appelés et les éléments typiques qu'ils contiennent
  • Réactivité globale des applications sur cet appareil

Discutons plus en détail des bases du test de l'interface utilisateur mobile.

Orientation / résolution de l'écran

Le contenu Web doit avoir une belle apparence et se sentir bien sur une grande variété d'appareils et de conditions de réseau. C'est généralement une bonne idée de tester votre page Web avec les résolutions d'écran couramment utilisées afin de vous assurer que votre page est utilisable.

Si vous avez une mise en page multi-colonnes, vous pouvez également vérifier que vos colonnes s'alignent correctement et sont toujours visibles lorsque votre visiteur a une résolution inférieure. Il est également important de connaître les résolutions d'écran standard -

  • 640 × 480
  • 800 × 600
  • 1 024 × 768
  • 1 280 × 800
  • 1366 × 768
  • 1 400 × 900
  • 1680 × 1050

Outils disponibles

Il existe de nombreux outils disponibles sur le marché pour rendre les tests d'interface utilisateur mobile plus fluides et plus simples. Par exemple -

  • Extension Google Chrome
  • Screenfly
  • Navigateur Pile

Comprenons un peu plus ces outils et leur utilité.

Extension Google Chrome

C'est une fonctionnalité gratuite disponible avec le navigateur Web Google Chrome. Nous avons donné ici une explication étape par étape de la façon de tester le Web mobile avec l'extension Google Chrome -

Step 1 - Ouvrez le site Web en cours de test dans «Navigateur Web Google Chrome».

Step 2- Appuyez sur F12. Cela ouvrira la fenêtre de l'outil Developer, comme indiqué dans la capture d'écran suivante.

Step 3- Cliquez sur l'icône du périphérique mobile. Reportez-vous à la capture d'écran suivante.

Step 4- Sélectionnez l'appareil mobile avec lequel vous souhaitez tester le site Web. Vous pouvez choisir les différents appareils disponibles afin de faire la vérification de l'interface utilisateur.

Screenfly

Screenfly est un outil gratuit et facile à utiliser. Pour l'utiliser, il vous suffit de taper Quirktools dans votre navigateur Web. Vous verrez l'écran suivant.

Entrez le site Web testé et cliquez sur Go. Sélectionnez l'appareil mobile sur lequel vous souhaitez afficher le site Web.

BrowserStack

C'est un autre excellent outil pour effectuer des tests d'interface utilisateur mobile. Cela donne de merveilleux résultats. Bien qu'il s'agisse d'un outil payant, vous pouvez bénéficier d'un parcours gratuit en vous inscrivant sur BrowserStack avec une adresse e-mail valide.

Écrans tactiles

Écrans multi-touch vs écrans tactiles simples

Si votre appareil et votre application prennent en charge les fonctionnalités multi-touch, comme l'effet pincer pour zoomer sur l'iPhone, assurez-vous d'inclure de nombreux cas de test impliquant de toucher l'écran à plus d'un endroit simultanément, en particulier lorsque vous tapez sur le clavier virtuel.

Toucher long vs toucher court

Bien qu'il n'y ait pas de concept de double-clic sur les appareils à écran tactile (bien qu'il puisse y en avoir, s'il est spécifiquement mis en œuvre dans votre application), certains appareils, comme les smartphones Android, font la distinction entre les touches longues et les touches courtes. Appuyer et maintenir un élément fera apparaître un menu contextuel au milieu de l'écran, tandis qu'un clic court sur le même élément effectuera automatiquement la première action dans ce menu contextuel.

Taille et position du bouton

Assurez-vous que les boutons et les icônes sont suffisamment grands et suffisamment éloignés des bords de l'écran pour être facilement cliqués du bout du doigt.

Touches souples et matérielles

Claviers logiciels

Souvent, il existe divers cas spéciaux et cas de coin qui sont importants pour les utilisateurs finaux.

  • Le clavier virtuel apparaît-il automatiquement si l'action principale de l'utilisateur est de saisir du texte?

  • La première couche du clavier virtuel comprend-elle des touches de raccourci "@" et ".com" si le champ en surbrillance est destiné à la saisie d'adresses e-mail?

  • Le clavier virtuel peut-il être supprimé et ré-affiché facilement?

  • Les claviers souples et durs peuvent-ils être utilisés de manière interchangeable (si l'appareil possède les deux)?

Clés matérielles

Assurez-vous d'inclure de nombreux tests sur l'utilisation des touches matérielles disponibles de l'appareil telles que Démarrer, Accueil, Menu et Retour. Ceux-ci doivent tous interagir avec votre application de la même manière qu'ils interagissent avec les applications natives de l'appareil.

Trackballs, roues de piste et pavés tactiles

Si votre appareil ne possède pas d'écran tactile, il est encore plus important de vérifier que la navigation à l'écran est aussi indolore que possible pour l'utilisateur. Dans ces cas, l'utilisateur peut s'appuyer sur une boule de commande, une molette ou un pavé tactile pour se déplacer d'un objet à l'autre.