Menu

Wireframes - Moeten ze echt worden getest? En zo ja, hoe?

wireframes should they really be tested

Probeer Ons Instrument Voor Het Oplossen Van Problemen

Nieuwe stagiaires kwamen aan boord en we hadden een trainingsklas leer concepten voor het testen van software ​Na het zien van die enthousiaste gezichten met hun bijna lege geest (professioneel), besloot ik een omweg te maken naar mijn routinetraining.

Na een korte introductie, in plaats van te praten over softwaretesten zoals ik normaal doe, gooide ik een vraag bij de frisse geesten: ' Kan iemand me uitleggen wat naar draadframe is? ​

Het antwoord was een pauze en daarom besloten we het te bespreken. En zo is het begonnen - Wireframe / prototype testen ​

wireframe prototype testen

Zo, wat is een draadframe? Laat me het uitleggen met enkele eenvoudige analogieën:

  1. De binnenhuisarchitect begint niet willekeurig meubels te plaatsen en het huis in te richten. Hij zet zijn plan op papier (of ontwerpsoftware), bespreekt het met de klant, probeert en past het plan op de meest praktische manier aan en voert het vervolgens uit.
  2. Om te begrijpen hoe ernstig een lichaamsdeel is gewond, kijken artsen naar een röntgenfoto. Röntgenfoto's zijn in feite een skelet van ons lichaam en geven correcte informatie over de botten en gewrichten.
  3. Een kleermaker bereidt het papieren doekje voor (weer een soort prototype), doet alle nodige aanpassingen en gebruikt het als basismeting totdat alles klopt en hij er zeker van is dat hij verder kan met het eigenlijke stuk dat hij / zij aan het naaien is.

Ik denk dat die voorbeelden genoeg waren voor iedereen om het concept van draadframe te begrijpen.

Wireframes zijn soorten prototypes:

Ze zijn beperkt van aard, wat betekent dat ze lege HTML-pagina's kunnen bevatten zonder werkende elementen of statische schermafbeeldingen die representatief zijn voor een pagina / functie / element van de applicatie en mogelijk geen kleur, afbeeldingen en andere elementen van het daadwerkelijke visuele ontwerp hebben.

Om een ​​solide applicatie / website te bouwen, is een solide raamwerk nodig en wireframes helpen bij het bieden van het raamwerk door een weergave te geven van de pagina-indeling, de algehele interface, navigatie en functionaliteiten.

Hier zijn enkele voorbeelden van wireframes:

wireframe voorbeeld 2

wireframe voorbeeld 1

Waarom bouwen softwarebedrijven wireframes?

Om precies dezelfde reden besluit de kleermaker / interieurontwerper / arts om eerst dingen uit te proberen - om fouten te voorkomen, gissen te elimineren, goedkeuring van de klant te vragen voordat alles in steen wordt gezet. Het helpt bij het vroegtijdig identificeren van problemen en om een ​​glimp op te vangen van de software zoals deze eruit zou zien als deze klaar is.

Wat je leert:

Belang van wireframes / prototype testen:

Dus, waarom iets testen dat een skelet is en dat niet door de gebruiker zal worden gezien zoals het nu is? Met andere woorden: waarom zou je je druk maken over de tussenpersoon als het al een dummy is?

Gewoon - om te helpen bij defectpreventie - dat is de algemene agenda van QA-teams (Kwaliteitsborging = Defectpreventie + Identificatie van defecten ​

Belang van wireframe-testen

Wireframes-testen kunnen helpen bij het volgende:

# 1) Ontbrekende vereisten identificeren:

Laten we zeggen of de vereisten stellen dat in a login pagina er moeten 2 invoervelden zijn, respectievelijk login-ID en wachtwoord en de 3 knoppen, OK-Annuleren- Reset. Als het draadframe als volgt is, kunnen we de ontbrekende Reset-knop gemakkelijk in een vroeg stadium vinden en in de applicatie opnemen.

Ze is een projectleider en heeft meer dan 10 jaar ervaring in het testen van software.

# 2) Identificatie van extra vereisten:

Het omgekeerde van bovenstaande situatie kan zijn dat de vereiste stelt dat er op een inlogpagina 2 invoervelden moeten zijn, respectievelijk login-ID en wachtwoord en de 2 knoppen, OK & Annuleren. Als het draadframe als volgt is, kunnen we gemakkelijk ontdekken dat het een extra resetknop heeft en om bevestiging vragen of het echt nodig is.

wireframe testen 2

# 3) Bruikbaarheid:

Wireframes zijn een van de beste opties om de bruikbaarheid van een product / applicatie te testen voordat deze wordt ontwikkeld.

Hier is het draadframe voor een van de formulieren:

wireframe testen 3

Op het eerste gezicht lijkt het oké.

Denk nu als eindgebruiker aan de gebruiker die informatie in het formulier gaat invullen. Denk je dat er een manier is om dit formulier gebruiksvriendelijker te maken? Nou, ik denk het zeker.

  • Geef een kalendersymbool en beperk de gebruiker om een ​​datum uit de kalender te selecteren. Dit zou handig zijn voor de gebruiker, aangezien hij niet hoeft te verwarren over welk datumnotatie hij moet volgen en het selecteren van een datum in de kalender iets zou zijn, dat elke gebruiker zou verkiezen.
  • Een tooltip die uitlegt wat elk veld betekent, zou geweldig zijn.
  • Paginanaam als titel is vereist om het draadframe te begrijpen en de velden met elkaar in verband te brengen.
  • Verplichte velden moeten worden gemarkeerd met een * -teken of een opmerking met de tekst ' alle velden zijn verplicht ”Moet zichtbaar zijn.
  • Het label van het eerste veld moet 'Campagnenaam' zijn in plaats van alleen 'Naam', om verwarring voor gebruikers te voorkomen.

# 4) Vroege functionele testen:

hoe bin-bestand te openen in Windows 7

In het bovenstaande voorbeeld zelf kunnen we aan de hand van het diagram mogelijk raden hoe de functionaliteit zou kunnen werken. Zo niet, dan leidt dat in ieder geval tot verder opgraven en een beter begrip van de applicatie.

  • Bijvoorbeeld : Wat als de gebruiker meerdere boekings-ID's wil toevoegen? Overschrijft de applicatie het vorige item of staat het meerdere items toe? Hoe zal het het behandelen en beheren?

Zoals uit de bovenstaande voorbeelden blijkt, helpt het testen van wireframes echt bij het vroegtijdig identificeren van problemen via een statisch wireframe en voorkomt het dat de defecten in de daadwerkelijke toepassing sijpelen. Dit is zeer gunstig omdat we weten dat defecten die vroeg in het ontwikkelingsproces zijn geïdentificeerd, goedkoper zijn om te herstellen dan degene die later worden gevonden.

Tools voor wireframing:

Er zijn veel tools beschikbaar op de markt, maar men moet de tool gebruiken volgens de contextgeschiktheid. Hoewel de meeste tools zoals Axure, Power mockup, Simulify, Balsamiq etc. worden betaald, zijn er enkele handige gratis wireframing-tools te:

  1. Cacoo : Cacoo is een gebruiksvriendelijke online tekentool waarmee de gebruiker verschillende diagrammen kan maken, zoals plattegronden, wireframes, UML en netwerkgrafieken.
  1. MockupBuilder : MockupBuilder helpt de gebruiker om snel zijn ideeën op het scherm te krijgen. Het is een GRATIS door Silverlight aangedreven webapp.
  1. Potlood Project : Pencil Project is gratis en gemakkelijk te leren. Het kan als Firefox-add-on of op zichzelf worden uitgevoerd.

Wanneer kunnen (of zullen) Wireframes-testen plaatsvinden:

  • Voor productontwikkeling: Dit kan helpen bij het identificeren van hiaten of ontbrekende vereisten, ontwerpfouten, bruikbaarheidsproblemen etc. - Defecten voorkomen
  • Post ontwikkeling: In dit geval kunnen de wireframes worden gebruikt als referenties om de applicatie te valideren. - Identificatie van defecten.

In het geval van Wireframe-tests op bruikbaarheid, gebeurt dit meestal handmatig en zijn meestal real-time gebruikers betrokken. Ze krijgen een reeks vragen voorgelegd om hun ervaring of feedback te begrijpen, of ze krijgen interactieve wireframes om de feedback vast te leggen.

Voor een gedetailleerde analyse van wireframes zijn soms ook materiedeskundigen betrokken.

Diensten zoals usertesting kan erg handig zijn, waar men een link van wireframes kan plaatsen en na het testen van wireframes, de resultaten worden gegenereerd samen met het volgende feedback punten:

  • Een video waarin het scherm van elke gebruiker uw draadframe test.
  • Audio van de gebruiker die vertelt hoe hij de taken voltooit.
  • Waardevolle feedback over hoe u uw website kunt verbeteren.

Output van prototypetests:

De resultaten van het testen van wireframes zijn erg nuttig voor het begrijpen van ontwerp, navigatie, gebruikersvriendelijkheid, algemene werkstroom en functionaliteiten. Kortom, na het testen van wireframes worden de wireframes duidelijker en implementeerbaar.

Gevolgtrekking:

Kortom, het testen van wireframes werkt als een proactieve actie en kan zeer nuttig zijn bij het vinden van bruikbaarheid en lacunes in het ontwerp in de pre-ontwikkelingsfase van de applicatie.

Hiermee rond ik het onderwerp af, in de hoop dat lezers me zullen verleiden om hier nog een bericht over te schrijven door vragen te stellen en feedback te geven.

Over de auteur: Dit artikel is geschreven door STH-teamlid Bhumika. Ze is een projectleider en heeft meer dan 10 jaar ervaring in het testen van software.

Veel plezier met testen, zoals gewoonlijk :)

Aanbevolen literatuur

^