Tag Wireframe
Prototype van een website: visueel en testbaar
Bij Marlon starten we elk project, groot of klein, met het maken van een prototype. Een prototype (of mock-up) is een voorstel van een site of applicatie, dat dienst doet als basis om samen met de klant en eindgebruiker de functionaliteit te bespreken, bepalen en te testen.
De Saaie Specificatie
Het gebruik van prototypes is voor ons gegroeid uit een frustratie: documenten met specificaties zijn saai, worden niet grondig genoeg gelezen en worden dan toch gevalideerd. Je zal me niet horen zeggen dat een specs-document geen nut heeft, maar ze hebben twee fundamentele gebreken:
- een document met specificaties verlangt verbeeldingsvermogen van de klant of de eindgebruiker, iets dat weinigen gegeven is
- een document met specificaties kan je niet testen
Een prototype daarentegen is visueel, en je kan jouw ideeën testen.
Wat is een prototype?
En vooral: wat doe je er mee? Wat zit er in een prototype? Wat moet de conclusie zijn als het prototype af is?
Welke pagina’s, wat staat er op en hoe staat het er op
De essentie van het prototype is: het bepalen van elke pagina (type-pagina), welke elementen er op staat (pagina-elementen), waaruit elk element bestaat (content-componenten), waar die elementen staan (organisatie) en hoe die elementen zich tegenover elkaar verhouden (hiërarchie).
Versies van pagina’s
Daarnaast maak je voor sommige pagina’s of elementen verschillende versies (states): hoe ziet de pagina er uit als je niet bent aangemeld, en hoe ziet ze er uit als je wel bent aangemeld. Het mandje van je e-commerce site: hoe ziet het er uit als je mandje leeg is, of als er één item in zit, of als er 10 items in zitten? Hoe zit het formulier er uit voor en na validatie?
Waar ben ik, waar kan ik naartoe, en hoe
Als je daar stopt, dan heb je te maken met een wireframe: je bepaalt de bladspiegel, en niets meer (zie ook later: terminologie).
Het prototype gaat verder: je voegt aan dat wireframe interactie toe. Eenmaal de pagina’s en pagina elementen bepaald, kan je links leggen tussen de pagina’s. Dit laat toe te testen of het navigatiepad duidelijk is, of de bezoeker steeds weet waar hij zich bevindt, en of die bezoeker telkens weet wat zijn verdere opties zijn.
De dynamiek
Maar je kan met een prototype nog verder gaan. Je kan op alle pagina’s ook alle interactiviteit toevoegen die binnen je website of applicatie zal gebruikt worden. Je beperkt je dus niet alleen tot de navigatie van pagina naar pagina. Een voorbeeld: voor een e-commerce website kan je bepalen wat er gebeurt als iemand een product aan het mandje toevoegt. In een formulier dat mensen gebruiken om zich in te schrijven, kan je afhankelijk van een bepaalde keuze (keuze van het land bijvoorbeeld), extra velden laten verschijnen, boodschappen tevoorschijn toveren, enz…
Met als doel: het bepalen van de scope
En zo eindig je bij een prototype dat de scope van het project bepaalt. Wij beschouwen een prototype volledig als het alle type-pagina’s bevat; alle mogelijke unieke soorten pagina’s zitten er in vervat, in al hun versies. We beperken ons bijvoorbeeld niet tot een formulier, maar tonen met het prototype ook hoe het formulier er uit ziet als je niet alles correct hebt ingevuld, en we voegen daar alle mogelijke bevestigingspagina’s achter. Zo zaten er in het prototype van de site van Plan België meer dan 120 pagina’s of pagina versies.
Als je de wil hebt om je prototype volledig te maken, is het resultaat dat je een perfect idee krijgt van de omvang van wat gebouwd moet worden. Tot in de kleinste details zal bepaald zijn welke acties waar nodig zijn, welke onderdelen er op elke pagina staan, hoeveel soorten pagina’s er moeten ontworpen worden en ook welke templates er moeten gemaakt worden.
Goede afspraken maken goede vrienden
Het prototype, eenmaal afgewerkt en gevalideerd door klant en eindgebruiker, zorgt ervoor dat iedereen weet wat er zal gebouwd worden, en wat niet:
- de klant heeft het eindproduct al gezien, en heeft het kunnen testen
- de designer weet welke pagina’s er gemaakt moeten worden, weet van elke pagina welke versies en uitzondering er bestaan, en weet exact wat er waar komt
- de ontwikkelaar weet exact wat hij zal moeten bouwen.
Zowaar: management of expectations!
Conclusie
Een prototype heeft dus veel voordelen:
- het is visueel
- het is testbaar (best in een browser, de natuurlijke biotoop van de website)
- het zorgt voor duidelijke afspraken
Hoe maakt u het?
Een prototype (of wireframe) maakt zichzelf niet. We hebben in de loop der jaren al verschillende technieken en software pakketten getest. De voorkeur voor een pakket is bij iedereen verschillend, maar hou toch deze basiseisen voor ogen:
- testbaar in een browser: het software pakket moet in staat zijn een prototype af te leveren dat in een browser kan worden bekeken; de browser is de natuurlijke habitat van de website;
- genoeg middelen voor het visueel aspect: het pakket mag je geen beperkingen opleggen: je moet een pagina kunnen opbouwen met de elementen die XHTML ook aanbiedt;
- testbare interacties, en niet enkel de navigatie flow: het pakket moet niet alleen in staat zijn je van pagina A naar B te brengen, je moet ook alle andere interacties kunnen uitbouwen.
Op grootmoeders wijze: met de hand (throwaway prototyping)
Onderschat de voordelen (snelheid, kostprijs) van een met de hand getekend prototype niet. Op papier, op een tafel, op een whiteboard: je kan snel verschillende modellen aftoetsen.
Maar is dat dan geen wireframe? Ja, als je je beperkt tot het tekenen van de pagina en zijn elementen. Maar met paper prototyping kan je verder gaan: elementen uitknippen, de pagina’s nabootsen door de uitgeknipte elementen te rangschikken, enz…
Een prototype tekenen met de hand is vandaag nog altijd mijn eerste stap, en een zeer valabele werkwijze.
Je favoriete HTML-editor
De eerste prototypes die we maakten werden in Dreamweaver gebouwd. Een software pakket dat nuttig is voor een heleboel mensen, maar om een prototype te maken was dit verre van de ideale oplossing. Het prototype dat in zo gemaakt werd was natuurlijk perfect testbaar in een browser, maar (veel) links leggen, hergebruik van bepaalde elementen, rijke interactiviteit of versies van bepaalde pagina elementen zorgden ervoor dat het maken van een dergelijk prototype veel te arbeidsintensief was.
En een strikte, perfect afgemeten layout maken was ook al geen sinecure.
Visio, Illustrator, Photoshop
De volgende stap in onze evolutie was Visio, samen met de GUUUI Prototyping tools voor Visio, een set templates en stencils. Visio, samen met die templates, had als voordeel, net als Illustrator (of Photoshop) dat elementen makkelijk en snel te plaatsen of verplaatsen zijn. Maar het resultaat was niet testbaar in een browser, je kon er weinig tot geen rijke interacties aan toevoegen en vooral: je kan er helemaal geen navigatiepad mee simuleren. En ik zwijg nog over het feit dat Visio in centimeters denkt, de meest gehate eenheid bij webdesigners.
Axure, degelijk gereedschap
Wij werken al een paar jaar met Axure. Axure heeft alle voordelen waar we naar op zoek waren:
- drag ‘n’ drop plaatsen van grafische elementen, tot op de pixel perfect
- hergebruik van elementen doorheen het prototype
- leggen van links tussen pagina’s
- rijke interactiviteit toevoegen
- versies van pagina’s of pagina elementen kunnen bepalen
- resultaat testbaar in een browser
Axure evolueert vrij snel en krijgt er bij elke release een pak – al dan niet exotische – features bij. Maar het pakket heeft één nadeel: je maakt uiteindelijk een throwaway prototype. De HTML die Axure uitspuwt als resultaat is een diaree van absoluut gepositioneerde elementen, waardoor er met dat resultaat in een volgende stap – ontwikkeling of templating – niks kan aangevangen worden.
Alles kan beter
Onlangs hebben we onze aanpak voor het analyseren en ontwerpen van een website kunnen bespreken samen met een aantal mensen van het Expertise Centre for Digital Media aan de universiteit van Hasselt. De conclusie was daar dezelfde als die waartoe we kwamen tijdens een informele samenkomst met gelijkgezinde mensen: vandaag bestaat er nog geen tool of werkwijze die van prototyping een integraal deel maakt van de ontwikkeling van een website. Een prototype wordt vaak ‘over het muurtje’ gegooid naar designers en ontwikkelaars.
De ideale wereld zal ons toelaten een prototype te maken waar alle elementen in een grafisch pakket als Photoshop worden getrokken en als basis dienen voor het ontwerpen; waar de HTML van het prototype als basis dient voor de templating; waar de opbouw van alle elementen in een pagina de datastructuur wordt van je applicatie: in je prototype bepaal je data componenten, de eigenschappen van die data, en de views op die data.
En was het nu wireframe, mock-up of prototype?
Voor ons ligt het verschil hierin: een wireframe is een alleenstaande “tekening” die illustreert hoe een pagina (of scherm) er uit ziet, door te bepalen welke elementen er waar op een pagina staan. Een wireframe legt niet zozeer links tussen de pagina’s (of schermen), maar geeft enkel aan welke elementen de pagina of het scherm zal bevatten.
Een protoype is dan een geavanceerde wireframe, waar er interactiviteit is aan toegevoegd: links tussen verschillende pagina’s zodat de flow in de website of de applicatie kan getest worden; functionaliteit op die pagina’s zoals knoppen, dropdowns; de state van een pagina kan verschillen door in het prototype een actie uit te voeren, niet door een ander wireframe te bekijken.
Zowel een wireframe als een prototype bevat echter zo weinig mogelijk design. Uiteindelijk ontwerp je wel al de pagina of het scherm, door elementen een bepaalde plaats te geven, woorden een bepaalde lettergrootte, een bepaalde tint grijs te gebruiken, of een bepaalde lijndikte. Maar toevoegen van kleur, grafische elementen zoals afgeronde kaders, verlooptinten, echte afbeeldingen, etc… komen een wireframe of prototype niet ten goede, want dan wordt er eerder gekeken naar het ontwerp, en niet naar het pure functionele en de organisatie.