Werkwijze bij het maken van interactieve producten en diensten
Op basis van mijn bevindingen in de praktijk en mijn scriptie-onderzoek van een aantal jaar geleden (RIA’s ontwerpen) heb ik een werkwijze ontwikkeld voor het succesvol maken van een interactieve (online) applicatie.
© Reinier Ladan, u uiteraard bent vrij deze werkwijze te gebruiken. Mocht u de afbeelding gebruiken dan alleen met naamsvermelding erbij.
Belangrijkste nut van het iteratieve model: een interactieve dienst is geen product maar een proces. Door het product met kleine stappen op te bouwen en constant blijven te verbeteren ontstaat er een steeds betere gebruikservaring. In tegenstelling tot watervalmodellen kan voortschrijdend inzicht sneller en beter verwerkt worden in het productieproces.
Uitleg bij nummers:
1. Concept documentatie / visualisatie
Het initiële idee vervaardigen tot een abstract voorstel. Dit gebeurt in het algemeen in de vorm van een functioneel ontwerp, wireframes en mockups. In de tweede en latere iteraties worden op basis van de analyse deze voorstellen aangepast.
2. Prototype
De abstracte documenten en ontwerpen omvormen tot een testbaar product. Door het prototype zo dicht mogelijk tegen de uiteindelijke techniek aan te bouwen worden de testresultaten betrouwbaarder. Een website is dus het best te testen met een prototype van html/css/js.
3. Gebruikstest
Door te testen met gebruikers (het liefst de mensen die het uiteindelijke product écht gaan gebruiken) kunnen dingen aan het licht komen waar eerder nog niet over is nagedacht en kunnen ideeën worden getest op hun houdbaarheid. Aanpassingen gemaakt naar aanleiding van een eerdere test kunnen hun waarde bewijzen in een volgende test.
4. Analyse en voorstellen tot verbetering
Door de uitkomst van de gebruikstest te analyseren en te documenteren kunnen nieuwe inzichten verwerkt worden in het proces tot verbetering van het product.
5. Live!
Op een gegeven moment is een prototype klaar om zich ‘in het wild’ te gaan bewijzen. De eerste keer dat dit gebeurt is in de meeste gevallen een 1.0 versie of een beta daarvan. Door een product daadwerkelijk te lanceren kan er veel beter mee getest worden en informatie over het gebruik worden verzameld. Dit resulteert in betere aanpassingen aan het product. Het doel is dus ook zo snel mogelijk met een degelijk product te komen om door echte gebruikers te laten gebruiken om verder uit te breiden met kennis over dit gebruik.
Comments Off • design, designflow, userexperience, werkwijze
Nieuwe website NOS
Sinds begin van dit jaar (januari 2009) ben ik bezig als user experience designer om met de NOS (en Stylishmedia voor het design) een heel nieuw concept voor NOS.nl neer te zetten. De website is nu een paar dagen in de lucht en vormt eigenlijk pas het startpunt van het schaven en verbeteren van de gebruikservaring.
De oude site draaide goed maar had een aantal beperkingen. Een van die beperkingen was dat de site moeilijk uit te breiden en te veranderen was in kleine stapjes. Verschillende onderdelen leken niet op elkaar en ook de structuur van de site was weinig flexibel opgezet. Het doel van de nieuwe site is dan ook dat de opzet eenvoudig te veranderen is (dit is zowel qua vormgeving als techniek gelukt) en dat de NOS met kleine stapjes steeds meer bezoekers tevreden kan stellen.
Mijn aandeel in het geheel was het opzetten van de informatie architectuur en de wireframes (blauwdrukken) voor de totale opzet van de website. Daarnaast heb ik het usability traject begeleidt en ben ik nog steeds bezig met het onderzoeken en verbeteren van de gebruikservaring (zowel qua vormgeving als techniek).
Van begin tot eind ben ik betrokken geweest bij het opzetten van de nieuwe NOS website en dat is me goed bevallen! De NOS Nieuwe Media afdeling is erg klein en dat past helemaal bij mijn visie van hoe een webdienst in elkaar gezet dient te worden. Het zal de meeste mensen nog verbazen met hoe weinig mensen en in welke tijd de website in elkaar is gezet. Dat is de kracht van een klein team: weinig vergaderen, veel werken en snel beslissingen nemen.
Oude website NOS.nl
Nieuwe website NOS.nl
Voorbeelden van wireframes voor NOS.nl
Wireframe van de homepage
Wireframe van een artikel
Wireframe van een dossier