Menu

Wireframes - Faut-il vraiment les tester? Et si oui, comment?

wireframes should they really be tested

Essayez Notre Instrument Pour Éliminer Les Problèmes

De nouveaux stagiaires sont venus à bord et nous avons eu un cours de formation pour apprendre les concepts de test de logiciels . Après avoir vu ces visages enthousiastes avec leur esprit presque vide (professionnellement), j'ai décidé de faire un détour par mon entraînement de routine.

Après une brève introduction, au lieu de parler des tests de logiciels comme je le fais normalement, j’ai jeté une question aux nouveaux esprits: « Quelqu'un peut-il m'expliquer quoi à filaire est? '

La réponse fut une pause et donc, nous avons décidé d'en discuter. Et c'est comme ça que ça a commencé - Test de wireframe / prototype :)

essai de prototype filaire

Alors, qu'est-ce qu'un wireframe? Laissez-moi vous l'expliquer avec quelques analogies simples:

  1. Le décorateur d'intérieur ne commence pas à installer les meubles et à décorer la maison au hasard. Il met son plan sur papier (ou logiciel de conception), en discute avec le client, essaie et modifie le plan de la meilleure façon pratique, puis le met en œuvre.
  2. Pour comprendre à quel point une partie du corps est gravement blessée, les médecins examinent une radiographie. La radiographie est essentiellement un squelette de notre corps et donne des informations correctes sur les os et les articulations.
  3. Un tailleur prépare le tissu en papier (une sorte de prototype encore une fois), fait toutes les modifications nécessaires et l'utilise comme mesure de base jusqu'à ce que tout soit précis et qu'il soit confiant pour aller de l'avant avec la pièce qu'il / elle coud.

Je pense que ces exemples étaient suffisants pour que quiconque comprenne le concept de wireframe.

Les wireframes sont des prototypes de toutes sortes:

Ils sont de nature limitée, ce qui signifie qu'ils peuvent contenir des pages HTML vides sans éléments fonctionnels ou des captures d'écran statiques représentatives d'une page / fonction / élément de l'application et peuvent manquer de couleur, de graphiques et d'autres éléments de la conception visuelle réelle.

Pour créer une application / site Web solide, un cadre solide est nécessaire et les wireframes aident à fournir le cadre en donnant une description de la mise en page, de l'interface globale, de la navigation et des fonctionnalités.

Voici quelques exemples de wireframes:

exemple filaire 2

exemple filaire 1

Pourquoi les éditeurs de logiciels créent-ils des wireframes?

Pour la même raison, le tailleur / architecte d'intérieur / médecin décide d'essayer les choses en premier - pour éviter les erreurs, éliminer les devinettes, obtenir l'approbation du client avant de tout graver. Il aide à identifier les problèmes dès le début et à donner un aperçu du logiciel tel qu'il apparaîtrait une fois terminé.

Ce que vous apprendrez:

Importance des wireframes / tests de prototypes:

Alors, pourquoi tester quelque chose qui est un squelette et qui ne sera pas vu par l'utilisateur tel qu'il est maintenant? En d'autres termes - Pourquoi s'embêter avec l'intermédiaire alors que c'est encore un mannequin?

Simplement - pour aider à la prévention des défauts - qui est l'agenda global des équipes QA (Assurance qualité = Prévention des défauts + Identification des défauts ).

Importance des tests filaires

Les tests de wireframes peuvent vous aider dans les domaines suivants:

# 1) Identification des exigences manquantes:

Disons si les exigences stipulent que dans un page de connexion il devrait y avoir 2 champs de saisie, respectivement ID de connexion et mot de passe et les 3 boutons, OK-Annuler-Réinitialiser. Si le filaire est le suivant, nous pouvons facilement trouver le bouton de réinitialisation manquant dès le début et l'incorporer dans l'application.

Elle est chef de projet et possède plus de 10 ans d

# 2) Identification des exigences supplémentaires:

L'inverse de la situation ci-dessus peut être que l'exigence stipule que dans une page de connexion, il devrait y avoir 2 champs de saisie, ID de connexion et mot de passe respectivement et les 2 boutons, OK et Annuler. Si le filaire est le suivant, nous pouvons facilement trouver qu'il dispose d'un bouton de réinitialisation supplémentaire et demander une confirmation pour savoir s'il est vraiment nécessaire ou non.

test filaire 2

# 3) Convivialité:

Les wireframes sont l'une des meilleures options pour tester la convivialité du produit / application avant son développement.

Voici le wireframe pour l'un des formulaires:

test filaire 3

À première vue, cela semble correct.

Maintenant, pensez en tant qu'utilisateur final, l'utilisateur qui va remplir les informations dans le formulaire. Pensez-vous qu'il existe un moyen, ce formulaire peut être plus convivial? Eh bien, je le pense certainement.

  • Fournissez le symbole du calendrier et limitez l'utilisateur à sélectionner la date dans le calendrier Cela serait utile pour l'utilisateur car il n'aura pas à être confus quant au format de date à suivre et la sélection de la date dans le calendrier serait quelque chose que chaque utilisateur préférerait.
  • Une info-bulle expliquant ce que signifie chaque champ serait formidable.
  • Le nom de la page comme titre est nécessaire pour comprendre le wireframe et relier les champs.
  • Les champs obligatoires doivent être marqués du signe * ou d'une note indiquant ' Tous les champs sont requis »Doit être visible.
  • Le libellé du premier champ doit être 'Nom de la campagne', plutôt que 'Nom' uniquement, pour éviter toute confusion pour les utilisateurs.

# 4) Test fonctionnel précoce:

référence non définie à la fonction de classe c ++

Dans l'exemple ci-dessus lui-même, à partir du diagramme, nous pouvons éventuellement deviner le fonctionnement de la fonctionnalité. Sinon, cela conduira au moins à un approfondissement et à une meilleure compréhension de l'application.

  • Par exemple : Que faire si l'utilisateur souhaite ajouter plusieurs identifiants de réservation? L'application remplacera-t-elle l'entrée précédente ou autorisera-t-elle plusieurs entrées? Comment va-t-il le gérer et le gérer?

Comme on peut le voir dans les exemples ci-dessus, le test des wireframes aide vraiment à l'identification précoce des problèmes via un wireframe statique et empêche les défauts de s'infiltrer dans l'application réelle. Ceci est très bénéfique car nous savons que les défauts identifiés au début du processus de développement sont moins chers à corriger que ceux découverts plus tard.

Outils pour le wireframing:

Il existe de nombreux outils disponibles sur le marché, mais il faut utiliser l'outil selon l'adéquation du contexte. Alors que la plupart des outils tels que Axure, Power mockup, Simulify, Balsamiq, etc. sont payants, certains sont utiles outils de wireframing gratuits trop:

  1. Cacoo : Cacoo est un outil de dessin en ligne convivial qui permet à l'utilisateur de créer une variété de diagrammes tels que des plans de site, des wireframes, UML et des graphiques de réseau.
  1. MockupBuilder : MockupBuilder aide l'utilisateur à afficher rapidement ses idées à l'écran. C'est une application Web gratuite alimentée par Silverlight.
  1. Projet de crayon : Pencil Project est gratuit et facile à apprendre. Il peut fonctionner comme un module complémentaire Firefox ou seul.

Quand les tests de wireframes peuvent-ils (ou ont-ils) lieu:

  • Avant le développement du produit: Cela peut aider à identifier les lacunes ou les exigences manquantes, les erreurs de conception, problèmes d'utilisabilité etc.- Prévention des défauts
  • Post développement: Dans ce cas, les wireframes peuvent être utilisés comme références pour valider l'application. - Identification des défauts.

Dans le cas des tests Wireframe pour la convivialité, ils sont généralement effectués manuellement et la plupart des utilisateurs en temps réel sont impliqués. On leur pose une série de questions pour comprendre leur expérience ou leurs commentaires ou on leur fournit des wireframes interactifs pour capturer les commentaires.

Pour avoir une analyse détaillée des wireframes, des experts en la matière sont parfois également impliqués.

Des services tels que test utilisateur peut être très utile, où l'on peut poster un lien de wireframes et après le test des wireframes, les résultats sont générés avec ce qui suit points de rétroaction:

  • Une vidéo de l'écran de chaque utilisateur testant votre filaire.
  • Audio de l'utilisateur expliquant comment il accomplit les tâches.
  • Des commentaires précieux sur la façon d'améliorer votre site Web.

Sortie des tests de prototype:

Les résultats des tests de wireframes sont très utiles en termes de compréhension de la conception, de la navigation, de la convivialité, du flux de travail global et des fonctionnalités. Fondamentalement, après le test des wireframes, les wireframes deviennent plus clairs et réalisables.

Conclusion:

Pour résumer, les tests de wireframes fonctionnent comme une action proactive et peuvent être très utiles pour trouver des failles d'utilisabilité et de conception dans la phase de pré-développement de l'application.

Avec cela, je termine le sujet, dans l'espoir que les lecteurs me tenteront d'écrire un autre article à ce sujet en posant des questions et en fournissant des commentaires.

A propos de l'auteur: Cet article est rédigé par Bhumika, membre de l'équipe STH. Elle est chef de projet et possède plus de 10 ans d'expérience en tests de logiciels.

Bon test, comme d'habitude :)

lecture recommandée

^