Menu

Wireframe: dovrebbero essere davvero testati? E se sì, come?

wireframes should they really be tested

Prova Il Nostro Strumento Per Eliminare I Problemi

Nuovi tirocinanti sono saliti a bordo e abbiamo tenuto un corso di formazione apprendere i concetti di test del software . Dopo aver visto quei volti entusiasti con le loro menti quasi vuote (professionalmente), ho deciso di fare una deviazione al mio allenamento di routine.

Dopo una breve introduzione, invece di parlare di test del software come faccio normalmente, ho lanciato una domanda alle nuove menti: ' Qualcuno può spiegarmi cosa per wireframe è? '

La risposta è stata una pausa e così abbiamo deciso di discuterne. Ed è così che è iniziato - Wireframe / Test di prototipi :)

test di prototipi wireframe

Così, cos'è un wireframe? Lasciatemelo spiegare con alcune semplici analogie:

  1. Il decoratore di interni non inizia a mettere i mobili e decorare la casa in modo casuale. Mette il suo piano su carta (o software di progettazione), ne discute con il cliente, prova e modifica il piano nel modo più pratico e poi lo implementa.
  2. Per capire quanto sia gravemente ferita una parte del corpo, i medici esaminano una radiografia. I raggi X sono fondamentalmente uno scheletro del nostro corpo e forniscono informazioni corrette sulle ossa e sulle articolazioni.
  3. Un sarto prepara la stoffa di carta (una sorta di prototipo di nuovo), fa le modifiche necessarie e la usa come misura di base finché tutto è accurato e lui è sicuro di andare avanti con il pezzo reale che sta cucendo.

Penso che quegli esempi siano stati sufficienti per chiunque comprendesse il concetto di wireframe.

I wireframe sono prototipi di sorta:

Sono di natura limitata, il che significa che potrebbero contenere pagine HTML vuote senza elementi funzionanti o screenshot statici che sono rappresentativi di una pagina / funzione / elemento dell'applicazione e potrebbero mancare di colore, grafica e altri elementi del design visivo effettivo.

Per costruire una solida applicazione / sito web, è necessario un solido framework e i wireframe aiutano a fornire il framework fornendo una rappresentazione del layout della pagina, dell'interfaccia generale, della navigazione e delle funzionalità.

Ecco alcuni esempi di wireframe:

wireframe esempio 2

wireframe esempio 1

Perché le società di software creano wireframe?

Per la stessa identica ragione per cui il sarto / interior designer / dottore decide di provare prima le cose: per evitare errori, eliminare supposizioni, ottenere l'approvazione del cliente prima di incidere tutto sulla pietra. Aiuta a identificare tempestivamente i problemi e a dare un'idea del software come apparirebbe una volta terminato.

Cosa imparerai:

Importanza dei wireframe / test di prototipi:

Allora, perché testare qualcosa che è uno scheletro e che non sarà visto dall'utente così com'è adesso? In altre parole: perché preoccuparsi dell'intermediario quando è ancora un manichino?

Semplicemente, per aiutare nella prevenzione dei difetti, che è l'agenda generale dei team QA (Garanzia di qualità = Prevenzione dei difetti + Identificazione dei difetti ).

Importanza del test wireframe

Il test dei wireframe può aiutare in quanto segue:

# 1) Identificazione dei requisiti mancanti:

Diciamo se i requisiti affermano che in a pagina di login dovrebbero esserci 2 campi di input, rispettivamente ID di accesso e password e 3 pulsanti OK-Annulla-Ripristina. Se il wireframe è il seguente, possiamo facilmente trovare il pulsante Reset mancante all'inizio e incorporarlo nell'applicazione.

È responsabile del progetto e vanta oltre 10 anni di esperienza nel test del software.

# 2) Identificazione di requisiti aggiuntivi:

Il contrario della situazione precedente può essere che il requisito stabilisce che in una pagina di accesso dovrebbero esserci 2 campi di input, rispettivamente ID di accesso e password e i 2 pulsanti, OK e Annulla. Se il wireframe è il seguente, possiamo facilmente scoprire che ha un pulsante di ripristino extra e cercare conferma se è davvero necessario o meno.

test wireframe 2

# 3) Usabilità:

I wireframe sono una delle migliori opzioni per testare l'usabilità del prodotto / applicazione prima che venga sviluppato.

Ecco il wireframe per uno dei moduli:

test wireframe 3

A prima vista, sembra ok.

Ora pensa come utente finale, l'utente che riempirà le informazioni nel modulo. Pensi che ci sia un modo, questo modulo può essere più user-friendly? Beh, certamente penso di sì.

  • Fornire il simbolo del calendario e limitare l'utente a selezionare la data dal calendario. Ciò sarebbe utile per l'utente in quanto non dovrà essere confuso sul formato della data da seguire e la selezione della data dal calendario sarebbe qualcosa che ogni utente preferirebbe.
  • Un suggerimento che spieghi cosa significa ogni campo sarebbe fantastico.
  • Il nome della pagina come titolo è necessario per comprendere il wireframe e correlare i campi.
  • I campi obbligatori devono essere contrassegnati con un segno * o una nota che dice ' tutti i campi sono obbligatori 'Dovrebbe essere visibile.
  • L'etichetta del primo campo deve essere 'Nome campagna', anziché solo 'Nome', per evitare confusione per gli utenti.

# 4) Test funzionale iniziale:

domande e risposte ai colloqui di informatica powercenter

Nell'esempio sopra, dal diagramma possiamo possibilmente indovinare il modo in cui la funzionalità potrebbe funzionare. In caso contrario, porterà almeno a ulteriori approfondimenti e a una migliore comprensione dell'applicazione.

  • Per esempio : Cosa succede se l'utente desidera aggiungere più ID di prenotazione? L'applicazione sovrascriverà la voce precedente o consentirà più voci? Come lo gestirà e lo gestirà?

Come si può vedere dagli esempi precedenti, il test dei wireframe aiuta davvero l'identificazione precoce dei problemi attraverso un wireframe statico e impedisce che i difetti penetrino nell'applicazione effettiva. Ciò è molto vantaggioso poiché sappiamo che i difetti identificati nelle prime fasi del processo di sviluppo sono più economici da correggere rispetto a quelli rilevati in seguito.

Strumenti per wireframing:

Ci sono molti strumenti disponibili sul mercato, ma uno dovrebbe usare lo strumento secondo l'idoneità del contesto. Mentre la maggior parte degli strumenti come Axure, Power mockup, Simulify, Balsamiq ecc. Sono a pagamento, ce ne sono alcuni utili strumenti wireframing gratuiti pure:

  1. Cacoo : Cacoo è uno strumento di disegno online di facile utilizzo che consente all'utente di creare una varietà di diagrammi come mappe del sito, wireframe, UML e grafici di rete.
  1. MockupBuilder : MockupBuilder aiuta l'utente a ottenere rapidamente le sue idee sullo schermo. È un'app Web GRATUITA basata su Silverlight.
  1. Progetto matita : Pencil Project è gratuito e facile da imparare. Può funzionare come componente aggiuntivo di Firefox o da solo.

Quando può (o fa) eseguire il test Wireframe:

  • Prima dello sviluppo del prodotto: Questo può aiutare a identificare lacune o requisiti mancanti, errori di progettazione, problemi di usabilità ecc. - Prevenzione dei difetti
  • Post sviluppo: In questo caso, i wireframe possono essere utilizzati come riferimenti per convalidare l'applicazione. - Identificazione dei difetti.

In caso di test di usabilità Wireframe, di solito viene eseguito manualmente e la maggior parte delle volte sono coinvolti utenti in tempo reale. Viene posta loro una serie di domande per comprendere la loro esperienza o feedback oppure vengono forniti wireframe interattivi per acquisire il feedback.

Per avere un'analisi dettagliata dei wireframe, a volte vengono coinvolti anche esperti in materia.

Servizi come usertesting può essere molto utile, dove si può pubblicare un collegamento di wireframe e dopo aver testato wireframe, i risultati vengono generati insieme a quanto segue punti di feedback:

  • Un video dello schermo di ogni utente che verifica il tuo wireframe.
  • Audio dell'utente che parla del modo in cui completa le attività.
  • Feedback prezioso su come migliorare il tuo sito web.

Risultato del test del prototipo:

I risultati dei test sui wireframe sono molto utili in termini di comprensione del design, navigazione, facilità d'uso, flusso di lavoro complessivo e funzionalità. Fondamentalmente, dopo il test dei wireframe, i wireframe diventano più chiari e implementabili.

Conclusione:

Per riassumere, il test dei wireframe funziona come un'azione proattiva e può essere molto utile per trovare usabilità e scappatoie di progettazione nella fase di pre-sviluppo dell'applicazione.

Con questo, sto concludendo l'argomento, nella speranza che i lettori mi tenteranno a scrivere un altro post su questo facendo domande e fornendo feedback.

Circa l'autore: Questo articolo è stato scritto dal membro del team STH Bhumika. È responsabile del progetto e vanta oltre 10 anni di esperienza nel test del software.

Buon test, come al solito :)

Lettura consigliata

^