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.
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.
In de vorige blogposts rond e-commerce besteedden we hoofdzakelijk aandacht aan praktische en technische issues. Deze post heeft eerder een commerciële insteek. We bekijken namelijk de mogelijkheden voor cross- en up-selling en enkele tools die klanten kunnen binden aan je webshop.
Mag het iets meer zijn?
Wie af en toe op sites als Amazon dingen aankoopt, heeft zeker al volgende zin gelezen: ‘Customers who bought this item also bought…’, gevolgd door een lijst met producten die sterk aanleunen bij het product dat je net in detail bekijkt. Dit vanzelfsprekend vanuit de optiek om ook deze producten te verkopen. Amazon doet hier aan cross-selling door in te spelen op het gevoel dat mensen met een gelijkaardige smaak interessante suggesties kunnen aanbieden. Je hoeft echter geen shop van de grootorde van Amazon te zijn om dit principe toe te passen.
Een andere mogelijkheid om een shopper te verleiden tot meer aankopen dan oorspronkelijk gepland is het tonen van accessoires, gerelateerde producten en een iets betere – en duurdere – versie van het beoogde product. Deze up-selling presenteert zich vaak in de vorm van ‘Voor X euro meer heeft u…’. Up-selling kan verder worden aangemoedigd door een korting te koppelen aan de gecombineerde aankoop.
I want it all and I want it NOW
Dankzij online shops is zowat alles voor iedereen beschikbaar geworden. Verschillende shops bieden dezelfde producten aan. Logischerwijs gaat een shopper eerst kostprijs en verzendingskosten vergelijken. Dat is echter lang niet de enige bepalende factor bij de keuze van de aankoop. Iedereen wil zijn of haar product namelijk liever gisteren dan vandaag. Het is voor een webshop belangrijk om de klant te laten weten wanneer een product leverbaar is. Is een product niet op stock, dan kan je aangeven wanneer dat wel opnieuw het geval is. Om dat te doen kan je achter de schermen de stock van je leveranciers raadplegen. Wat ook kan is de bezoeker de kans bieden om een e-mailadres in te vullen met als doel een berichtje te krijgen wanneer een product opnieuw op stock is. Wanneer blijkt dat het product in kwestie enkele weken later nog niet beschikbaar is, kan de shophouder een mail sturen met enkele alternatieven.
Reviews
Voor de aankoop van artikelen vertrouwen mensen vaak op de mening van vrienden, kennissen en vakmensen, zeker als het om duurdere aankopen gaat. Op internet geldt dit dubbel zo hard. Je hebt immers grote groepen van mensen die een mening kunnen en willen geven. Dat kan je aanwenden in je webshop door klanten reviews van producten te laten schrijven. Heel wat shophouders huiveren bij de gedachte dat een negatieve review hun producten of diensten zou kelderen, maar doorgaans zal de balans voor een degelijk product positief zijn.
Enkele van onze realisaties:
- De Kleine Zebra
- Codima
- Tele Atlas
- Monsters With An Attitude
Tools om performantie te meten
Het lijkt allemaal eenvoudig: je laadt een webpagina, je start de chrono en je drukt opnieuw af wanneer de website geladen is. Alleen zijn we met die onnauwkeurige en algemene tijd niet veel. We moeten veel preciezer weten hoeveel tijd bepaalde componenten nodig hebben en achterhalen waar we verbeteringen kunnen aanbrengen.
Gelukkig bestaan er een aantal tools die dit proces voor de frontend ontwikkelaar vereenvoudigen.
IBM Page Detailer
IBM Page Detailer is een Windows tool, die in de achtergrond gegevens analyseert terwijl je surft. Aan de hand van deze tool kan je kijken hoe webpagina’s aan de browser worden bezorgd. Dit houdt ondermeer in: de timing en volgorde, bestandsgroottes, de identiteit en details van elk item op de pagina.
IBM Page Detailer moet als zelfstandige applicatie draaien en werkt dus browseronafhankelijk.
Handig bij de Page Detailer zijn de gedetailleerde waterfall reports. Aan de hand van deze charts kan je de sequentie en de timing van webobjecten analyseren. Je zal dus kunnen zien waar de typische performantieproblemen optreden. Ondermeer dat het laden van Javascript files de rest van de downloads blokkeert, of de browserlimitatie van 2 connecties per hostname.
Naast de grafiek, heb je ook nog toegang tot een detailscherm, met daarop meer informatie over elk object op de pagina. Je kan bovendien zelf in de tabel definiëren welke gegevens moeten weergegeven worden.
Download IBM Page Detailer
Firebug
Met deze onmisbare extensie ben je ondermeer in staat om te meten wat er precies allemaal in Firefox gebeurt. Firebug beschikt onder de tab Net ook over waterfall reports en basisgegevens van bestandsgroottes, requests en de tijd die nodig is om de bestanden binnen te halen. Wanneer je met de muis even blijft hangen over items, krijg je een preview van dat element te zien.
Firebug toont echter geen details van elk van de requests. De response time, delivery time en zelfs de tijd om JavaScript uit te voeren worden gecombineerd.
Download Firebug
YSlow (Firebug extension)
YSlow is een Firebug uitbreiding, ontwikkeld door Yahoo!. Hiermee kan je een website testen tegen de 14 performantieregels, toegelicht in het boek High Performance Web Sites. YSlow analyseert je website aan de hand van Firebug’s Net Panel in combinatie met het overlopen van de DOM tree. Het voorziet de website dan van een score (Performance Grade).
Je kan op elk van de items klikken om meer details te ervan te bekijken.
Onder stats vinden we dan weer een handige grafiek waarop je de empty en primed cache met elkaar kan vergelijken.
De components tab geeft een overzicht van alle componenten die ingeladen werden, met onder andere vermelding van type, url, response time, bestandsgrootte, ETag,…
Zeer praktisch is ook de print view (onder Tools), de ultieme checklist om mee te starten.
Download YSlow
AOL Pagetest
Deze tool werd oorspronkelijk door AOL ontwikkeld voor interne performance testing, maar enkele maanden geleden werd de tool gereleased als open source. Het is momenteel de applicatie met de meeste features.
Bij AOL Pagetest worden ook waterfall reports gegenereerd, maar deze zijn voorzien van tijdslijn bovenaan, genummerde componenten en markeringen voor belangrijke sleutelmomenten bij de rendering van de pagina.
Elke request wordt visueel in een aantal kleuren voorgesteld en dit iets eleganter dan bij IBM Page Detailer.
Naast de charts heb je ook nog toegang tot een handige checklist view, die je componenten test tegen een aantal optimalisatieregels (vergelijkbaar met die van YSlow).
Bij AOL Pagetest kan je optimalisatierapporten exporteren (in .txt files), of de charts en checklists als afbeelding (.png)
Pagetest is enkel beschikbaar voor Internet Explorer.
Download AOL Pagetest
Er bestaat tevens een online versie: Pagetest webpage performance test
Zelf de websiteperformatie testen
Nu je weet welke tools je kan gebruiken, is het belangrijk te weten wat je moet doen om deze zo waarheidsgetrouw te gebruiken.
We willen uiteraard zowel testen voor de bezoekers die nog nooit op de website hebben gesurfd, als de terugkerende bezoekers.
Flush DNS
Wanneer een browser een domeinnaam voor het eerst tegenkomt, moet hij een DNS lookup uitvoeren, om het IP adres van die domeinnaam te achterhalen. Gemiddeld duurt dit zo’n 10 tot 20 ms.
Dat IP adres wordt dan lokaal gecached. Dus voor je de website op performantie test, kan je deze cache best legen.
Windows: Start -> run -> ipconfig /flushdns
Mac OS X: Terminal -> lookupd -flushcache
Browsercache legen en cookies wissen
Om te verzekeren dat alle bestanden moeten gedownload worden, wis je best de cache en cookies.
Internet Explorer 7:
Selecteer Tools -> Internet Options -> Delete -> Delete Files
Selecteer Tools -> Internet Options -> Delete -> Delete Cookies
Internet Explorer 6:
Selecteer Tools -> Internet Options -> Delete Files
Selecteer Tools -> Internet Options -> Delete Cookies
Firefox:
Selecteer Tools -> Clear Private Date -> Check Cache, Cookies -> Clear Private Data Now
Connectiesnelheden simuleren
Als webontwikkelaars verschillen wij meestal van de doorsnee websitebezoekers: zo beschikken wij over recente computers en snelle internetverbindingen. Daarom zou het wel handig zijn als we bepaalde parameters kunnen simuleren.
Charles
Charles is een web debugging proxy. Via Charles kan je ondermeer toezicht houden op al de HTTP traffiek tussen jouw computer en het internet, dus zowel requests, responses als de HTTP headers zelf. Bovendien kan je verschillende connectiesnelheden simuleren en bewust vertragingen introduceren (round-trip latencies).
Charles is een Java applicatie en is zowel beschikbaar voor Windows, Mac OS X als Linux / Unix.
Download Charles
En tot slot…
Zo, deze reeks van artikels over website (en dan vooral frontend) optimalisatie zit er bijna op. Ik wil jullie om af te sluiten nog enkele handige resources meegeven, voor zij wiens honger nog niet helemaal gestild is.
Interessante websites
Aanbevolen boeken
Podcasts en presentaties:
De List control in Flex 3 beschikt over de mogelijkheid de scrollbar te beïnvloeden. Dit is echter beperkt tot horizontalScrollPolicy & verticalScrollPolicy. Met deze twee property’s kan je bepalen of je de scrollBar al dan niet toont.
Maar ik wou – bij het aanpassen van een item uit de list – niet dat de scrollBar zou verdwijnen, maar disabled zou worden. Dit resultaat heb ik bereikt door gebruik te maken van volgende methode:
var lSubtitles:CustomList = new CustomList();
lSubtitles.enableScrollBar(false);
// Invalidate the CustomList so the applications knows
// he needs to refresh the list
lSubtitles.invalidateList();
De klasse:
package classes.views.subtitles.list
{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.controls.List;
import mx.controls.scrollClasses.ScrollBar;
// This custom list is programmed to be able to disable
// the scrollbar which is by default impossible.
// This is a useful addition to the current
// functionality of ScrollPolicy OFF|ON|AUTO
// (which hides/shows the scrollbar)
public class CustomList extends List
{
private var _bEnabledScrollBar:Boolean = true;
// Constructor
public function CustomList()
{
super();
}
// Function to set whether the scrollbar should
// be put enabled or disabled
public function enableScrollBar(bValue:Boolean):void
{
_bEnabledScrollBar = bValue;
if(!bValue)
{
// This is the event which is triggered when a
// user scrolls with his mouse wheel.
// Check if this object has such an event listener
if(super.hasEventListener(MouseEvent.MOUSE_WHEEL))
{
// This is the protected event handler which
// resides inside the ListBase
super.removeEventListener(MouseEvent.MOUSE_WHEEL,
mouseWheelHandler);
}
}
else
{
// This is the event which is triggered when a user
// scrolls with his mouse wheel. Make sure this
// doesn't has such an event listener
if(!super.hasEventListener(MouseEvent.MOUSE_WHEEL))
{
// This is the protected event handler which
// resides inside the ListBase
super.addEventListener(MouseEvent.MOUSE_WHEEL,
mouseWheelHandler);
}
}
}
// The configure scrollbar method manages
// the functionality of the scrollbars this method
// get's called when the invalidateDisplayList is called
protected override function configureScrollBars():void
{
// If the _bDisabledScrollBar boolean is set to true;
// the scrollbar should be disabled!
if(!_bEnabledScrollBar)
{
// Loop trough the children of the list and
// find the scrollbar
for(var t:int = 0; t < this.numChildren; t++)
{
if(this.getChildAt(t) is ScrollBar)
{
var sb:ScrollBar = this.getChildAt(t) as ScrollBar;
sb.enabled = false;
sb.mouseEnabled = false;
this.mouseEnabled = false;
}
}
}
// Else just use the default behavior of the list
else
{
super.configureScrollBars();
}
}
}
}
Een screenshot van het resultaat:
In een vorige blogpost hadden we het over het online betalen van bestellingen en wat daar bij komt kijken. In deze post bekijken we hoe de beheerder een binnengekomen bestelling kan verwerken. Voor dat beheer wordt een vaste flow ontwikkeld die ook rekening moet houden met uitzonderingen.
Betaald of besteld
Zodra een bezoeker iets koopt of bestelt op de website komt deze bestelling in het beheer van de webshop terecht. Een bestelling die werd betaald met de kredietkaart krijgt de status ‘betaald’ en kan in principe meteen worden verwerkt. Een bestelling die men wil betalen met een overschrijving komt in het systeem terecht als onbetaald en wordt pas afgehandeld wanneer de overschrijving effectief werd ontvangen. Via een systeem met statussen als ‘betaald’, ‘verpakt’, ‘verzonden’, ‘geannuleerd’ enz. kan de beheerder perfect zien in welke fase een bestelling zich bevindt. Dit is de gebruikelijke flow van een bestelling. Het spreekt voor zich dat de beheerder van de webshop altijd de details van een bestelling kan oproepen en aanpassen.
De uitzonderingen bevestigen de regel
In de voorgaande paragraaf zagen we de gebruikelijke flow van een bestelling, die vrij
straightforward is. Er zijn echter een aantal situaties waar de gewone afhandelprocedure wijzigt.
Wanneer de klant nog voor de levering contact opneemt voor bijkomende producten, moet de besteller een betalingsuitnodiging voor het extra bedrag krijgen. Leuker is het andere geval waar één of meerdere producten goedkoper worden. In dat geval krijgt de besteller een creditnota of cadeaubon.
Een klant kan ook artikelen terugsturen. Denken we hierbij aan kleren die niet passen. Tenslotte is er ook nog de minder leuke situatie waarbij een bestelling aankomt met één of meerdere producten die stuk gingen tijdens de verzending of een bestelling die helemaal verloren ging. In deze gevallen moet de beheerder service orders kunnen aanmaken.
Wenst u een factuur?
Een volledig beheer van bestellingen omvat ook de mogelijkheid om een aantal documenten af te drukken. Zo moet de beheerder een factuur en een bestelbon of leveringsbon kunnen afdrukken. Zoals we hierboven zagen is het vaak ook nodig om creditnota’s af te printen.
Om de boekhouding op orde te houden, kan de beheerder ook alle verkopen afprinten en zelfs de BTW-listing.
In een volgende blogpost hebben we het over up- en cross-selling en enkele handige tools om klanten aan je webshop te binden.
Enkele van onze realisaties:
- De Kleine Zebra
- Codima
- Tele Atlas
- Monsters With An Attitude
