In de hoofdnavigatie zijn de verschillende niveaus uit elkaar getrokken. Dat was nodig, want deze bestond uit drie lagen, die niet goed functioneerden ten opzichte van elkaar. Het hoofdniveau auto’s, klassiekers, motoren en bedrijfswagens is in het nieuwe ontwerp boven het leaderboard geplaatst. De gebruiker kiest immers voor bijvoorbeeld auto’s of klassiekers en zal niet zo gauw switchen daartussen. In het nieuwe ontwerp liggen de onderdelen home, kopen, verkopen, gids en nieuws op het eerste niveau. Bij mouseover verschijnen de submenu’s in een lijstje hieronder.

Ook de zoekbox op de homepage is aangepast. Tegenwoordig kan er naast merk en model (waar de aantallen die aangeboden worden nu achter staan), ook een keuze gemaakt worden voor prijs, bouwjaar, kilometerstand, postcode en afstand. Deze zijn allemaal in dropdownmenu’s gezet. Daarnaast kan boven de zoekbox geklikt worden op het icoon voor het zoeken naar auto’s, klassiekers, motoren of bedrijfswagens.

Een laatste, en voor de gebruiker niet onbelangrijke aanpassing, is gedaan aan linkerkolom op de resultaatpagina. Waar vroeger alleen opnieuw gezocht kon worden op prijs, bouwjaar en kilometerstand, zijn daar aan toegevoegd de postcode, afstand, trefwoord of snelcode. Daarnaast is de facetnavigatie verbeterd, waarmee het zoekresultaat kan worden verfijnd. Dit is gedaan door het tonen van meer verfijnopties, en de lijsten niet langer te maken dan vijf items. Daarnaast wordt ook hier achter alle items de aantallen getoond, zodat de gebruiker weet wat de omvang van het aanbod is per item in de lijst. Met de nieuwe linkerkolom kan de gebruiker blijven zoeken en verfijnen op de resultaatpagina, zonder naar een uitgebreid zoeken pagina te gaan.

Aan het herontwerp van de Auto Trader portal hebben we nauw samengewerkt met Resoluut, die zorgden voor het grafisch ontwerp, en met Mirabeau, die de site hebben gerealiseerd.

Kleimodel in ontwikkeling (bron: BMW)

Je zou er bijna in willen gaan zitten, zo echt lijken ze: de volledig uit klei opgetrokken prototypes van auto’s, die in de automotive industrie worden gemaakt voordat modellen in productie worden genomen. De oeroude en kostbare ontwerpmethode staat nog steeds als een huis. Pas als de auto tot op een kwart millimeter nauwkeurig is gemodelleerd en afgewerkt met folies om de klei echt te doen lijken, als na vele iteraties helemaal duidelijk is hoe de auto eruit komt te zien, dan pas kunnen de executives hun goedkeuring geven en kan de productie beginnen, eerder niet. Er moet om de auto heen gelopen kunnen worden. Hij moet er echt uit zien, een 2D tekening kan niet op die manier worden beoordeeld. Het is interessant om een vergelijking met onze sector te maken.

Voor ons heeft het middel ‘prototyping‘ zich al lang en breed bewezen. Wij laten graag zien aan klanten hoe ons ontwerpidee werkt. En dat doen we op veel manieren: van een serie schetsen, tot wireframes, tot klikbare, (eventueel) vormgegeven, aan elkaar gelinkte pagina’s die in een browser bekeken kunnen worden. We maken zelfs prototypes voor de iPhone die op het toestel zelf bekeken en ‘beleefd’ kunnen worden. Toch zien we in ons werkgebied nog veel te vaak anders. Met alle mogelijke gevolgen van dien: processen waar geen einde aan komt, enorme overschrijdingen van budgetten en slechte ontwerpen.

Waar gaat het mis? Volgens Bill Buxton, auteur van Sketching User Experiences is bij de ontwikkeling van softwareproducten de oorzaak vaak gelegen in het feit dat de ontwerpfase wordt overgeslagen en meteen wordt begonnen met het bouwen van de applicatie. Hij zegt:

“It is just as inappropriate to have an engineer manage the design process as it is to have a designer who graduated from art college be responsible for the product’s engineering.
[...] The bulk of our industry is organized around two all-too common myths: 1. That we know what we want to at the start of a project, and 2. That we know enough to start building it.”

En daar wringt dus de schoen. Aan het begin van het proces is bijna nooit duidelijk wat er gemaakt gaat worden. Bij het ontwerpen van auto’s wordt al 2,5 ton uitgegeven aan het maken van één kleien model, en dat alleen maar aan de vorm van de auto. Dat zijn enorme bedragen, en toch is het niks vergeleken bij de kosten die gemaakt zouden worden als niet voor deze methode was gekozen. Waarin maakt het werken met prototypes dan precies het verschil?

Waarom prototypen?

De belangrijkste eigenschap van prototypes is dat ze ideeën concreet maken. Prototyping is een manier van communiceren. Het zorgt ervoor dat ontwerpers nadenken over de manier waarop het concept moet werken. Het geeft antwoord op vragen die ontstaan tijdens het ontwerpproces. Prototypes zijn goedkoop, snel te maken en aan te passen en naast het beantwoorden van vragen, genereren ze ook nieuwe ideeën. Toegepast in een iteratief proces, dat wil zeggen, in een zichzelf herhalend proces van ontwerpen, gebruiken en analyseren, groeit een ontwerp en wordt steeds duidelijker wat het moet doen, voordat het daadwerkelijk gebouwd wordt.

Prototyping is voor ons als ontwerpers onmisbaar om verder te geraken in een ontwerpproces. We geven elkaar feedback aan de hand van de prototypes die we maken. Het mooie van een interactief document boven statische wireframes is dat veel beter een beeld gekregen kan worden van de structuur en werking van wat we maken. Er kan door een klikbaar prototype heen worden gelopen (zoals om het kleien model van de auto heen kan worden gelopen). De interactie die plaatsvindt komt dicht in de buurt bij de ervaring van het uiteindelijke product. En dit kan worden getest, waardoor gemaakte keuzes kunnen worden bevestigd of herzien.

Het is uiteindelijk de klant die beslist. Hoe beter de werking en beleving van zijn product aan hem kan worden gedemonstreerd, hoe blijer hij uiteindelijk zal zijn. Vanwege de helderheid van de functionaliteit in het prototype weet hij wat zijn product zal gaan doen, wat er gebouwd gaat worden en hoeveel hem dat in grote lijnen gaat kosten.

Benieuwd wat voor prototypes wij maken? Een paar voorbeelden:

Skills online: Een e-learning portal voor het leren van vaardigheden voor opleidingen verpleegkunde op MBO- en HBO-niveau. Met het prototype (gemaakt in Adobe Fireworks) konden we een ingewikkeld navigatieprincipe demonstreren. Bekijk het prototype

Santander Nederland: Eén van de grootste verstrekkers van leningen in Nederland. We gebruikten dit prototype (in Adobe Fireworks gemaakt door Acato) om een gebruikerstest uit te voeren. Bekijk het prototype

Check uit: In samenwerking met Fabrique werkten we aan een jongerenportaal voor het Amsterdams Uitburo. Het prototype (Adobe Fireworks) geeft een goede indruk van de bewegende onderdelen en de interactiviteit. Bekijk het prototype

Gemeente Breda: Samen met Wortell hebben we aan verschillende serviceprocessen binnen de gemeente Breda gewerkt. De pagina’s binnen het prototype (gemaakt met Axure) zien er heel realistisch (net echt) uit. Bekijk het prototype

Binnenkort meer over prototyping. Dan zal Matthijs ingaan op de verschillende soorten software waarmee we onze prototypes maken.

In ons ontwerp hebben we de navigatie verbeterd door alle items onder te brengen in een horizontaal menu met slechts vier onderwerpen in het eerste niveau, wat een helder overzicht geeft over de inhoud van de site. Op de homepage zijn drie calculatoren geplaatst, die de gebruiker op een interactieve manier direct antwoord geven op de meeste voorkomende vragen ‘hoeveel kan ik maximaal lenen?’, ‘wat zijn mijn maandlasten als ik een bepaald bedrag wil lenen?’ en ‘hoeveel kan ik besparen als ik mijn huidige lening oversluit?’. De sterke punten en de producten van Santander worden kort en bondig beschreven, wat ervoor zorgt dat de gebruiker zonder lange lappen tekst te hoeven lezen zich een beeld van de bank kan vormen en het zo belangrijke vertrouwen wordt gekweekt.

Voor de verhoging van de conversie (het verhogen van het aantal aanvragen voor leningen) zorgden we voor meer directe links naar het aanvraag-proces op de juiste plaatsen, en in verband daarmee een verbetering van de productpagina’s. Deze zijn compact gehouden door het toepassen van een tabstructuur, zodat de gebruiker altijd weet waar hij zich bevindt en makkelijker de gewenste informatie kan vinden. In de rechterkolom is ruimte voor ondersteunende informatie zoals de meest gestelde vragen die voor dat product relevant zijn.

Van de hand van ontwerpbureau Acato kwam het visueel ontwerp en een klikbaar prototype, waarmee we een gebruikerstest deden met zes proefpersonen. We interviewden hen en vroegen hen taken uit te voeren om inzicht te krijgen in het gemak en de bruikbaarheid van ons ontwerp. De bevindingen hebben we weer verwerkt in het uiteindelijke interactieontwerp, dat door Techtribe is gerealiseerd.

Na lancering van Santander.nl, nam UNITiD ook het interactieontwerp voor Santander automotive en comfortcard op zich. De eerste richt zich als financieringsspecialist op de autobranche, de laatste op retailers die hun klanten meer betalingsmogelijkheden en service willen geven.

Alice Rawsthorn, design critica van de International Herald Tribune, schrijft over de grote verschuiving in vaardigheden die de laatste 10 jaar plaats heeft gevonden vanwege de moderne technologie. We hebben leren spellen op school, maar hoe belangrijk is dat tegenwoordig nog? We gebruiken toch spelling-controle! Kaart lezen? Wat een gedoe! We hebben toch satelliet navigatie. Iets onthouden? Waarom? We kunnen het toch googelen!

Zijn we dan dommer geworden? Nee, de moderne mens heeft zichzelf nieuwe skills aangeleerd. Rawsthorn refereert naar het boek Grown Up Digital van de Amerikaanse auteur Don Tapscott, die daarin de term ‘Net Geners‘ ofwel de ‘Net Generation’ introduceert, de generatie die opgegroeid is met digitale technologie. Zij zijn het die voorop lopen en het voorbeeld geven aan de generatie 30+ers, voor wie het heel wat moeilijker is om 5 dingen tegelijk te doen, of om zich aan te passen aan de laatste software- of media-ontwikkelingen. Hoewel, ook de oudere generatie laat zien dat zij het kan.

Daarom raad Rawsthorn afsluitend aan om ook de duim in vorm te brengen. De Net-Geners, die door het vele sms-en en gamen van nature een super-flexibele duim hebben, waren inspiratiebron voor ontwerper Ron Arad om een parfumfles voor Kenzo te ontwerpen die met de duim kan worden geopend. Wat zal er nog meer volgen?