Een kijkje in de keuken bij het opnieuw ontwerpen van NU.nl

In juli dit jaar is de nieuwe site van NU.nl gelanceerd. Het design van Nederlands grootste nieuwssite NU.nl is aangepast om beter aan te sluiten op de grotere pc- en laptopschermen die er in omloop zijn, waarbij de herkenbare overzichtelijkheid is behouden. De website streeft op deze manier naar een optimale gebruikservaring. Vanuit Usabilla zijn we betrokken geweest bij het proces, en in deze blog wil ik jullie graag een kijkje in de keuken geven bij wat er bij zo’n redesign komt kijken.

Vernieuwingen

Het nieuwe NU.nl is breder, het lettertype is groter, evenals de regelafstand en het kleurgebruik is rustiger. Niet eerder vond er op deze schaal een vernieuwing plaats van NU.nl. In de nieuwe versie staan de social media-knoppen bij de artikelen overzichtelijk op een rij. De extra content die NU.nl biedt via extensies als bijvoorbeeld NUjij, NUsport en NUzakelijk, verhuizen in het nieuwe design van de linkerzijkant naar tabs bovenaan de pagina.

Eén van de redenen om de site te vernieuwen, is dat de bezoekers bij de vorige versie op de homepage bleven steken en ze de andere delen van het nieuwsnetwerk niet genoeg bezochten. Annemarie Boon, usability specialist bij Sanoma Media, heeft mij een kijkje in de keuken gegund. Ik zoom in op hoe de keuze voor de plaatsing van de tabs tot stand is gekomen. Bezoekers van de site zijn op meerdere manieren bij dit deel van het ontwerpproces betrokken. De andere vernieuwde onderdelen laat ik buiten beschouwing.

NU.nl is de grootste nieuwswebsite van Nederland en presenteert een enorme hoeveelheid informatie. Om dit te structureren maakt de site gebruik van extensies, zoals NUzakelijk.nl en NUsport.nl. De bezoekers-statistieken van de site laten zien dat bezoekers weinig vanuit de navigatie op de homepage de extensies bezochten. De links naar de extensies stonden in de linker zijbalk. Het zag er zo uit:

Het oude ontwerp van NU.nl, zonder duidelijke links naar de extensies.

De eerste fase van het ontwerpproces met interviews

Sanoma Media heeft als eerste stap om meer bezoekers naar de extensies te laten navigeren een testversie ontworpen met een andere menustructuur. Het blok met links in de zijbalk is vervangen door een horizontale navigatie met tabbladen, helemaal bovenin de pagina. Tabs zijn een inmiddels ingeburgerd design pattern en worden gebruikt voor de hoofdnavigatie van een site. Hiermee wordt duidelijk gecommuniceerd dat de extensies net zoveel te bieden hebben als NU.nl.

De eerste testversie van Nu.nl, met toegevoegde tabnavigatie bovenaan de pagina

Annemarie Boon vertelde ons:

“Het nieuwe ontwerp zorgt ervoor dat de site inderdaad logischer wordt ingedeeld. Ook staat de navigatie meer in het ‘F’ scanpatroon en dichter bij de relevante content.”

Vooraf zijn bezoekers van de site geïnterviewd over het nieuwe ontwerp. Hieruit bleek dat de nieuwe navigatie goed werd ontvangen, maar dat de plaatsing nog problemen gaf. Annemarie legt uit waarom: “We denken dat dit komt door de gewenning aan banners. We zagen tijdens de interviews dat hoe drukker de banner, hoe kleiner de kans was dat bezoekers de extensies zagen.

De tweede testversie van NU.nl, met de tabnavigatie onder de banner

Om dit probleem op te lossen is een tweede testversie ontwikkeld. Hier staat de tab navigatie beneden de banner.

De tweede fase met tests op afstand

Het team van Sanoma Media had inmiddels genoeg materiaal voor een kwantitatieve toets. Annemarie: “Omdat met de kwalitatieve interviews nog niet met voldoende zekerheid te zeggen was welke versie het beste zou scoren en in welke mate, is besloten om een kwantitatieve onderzoekscomponent aan het ontwerpproces toe te voegen.”

Deze interviews leveren gedetailleerde informatie over de meningen en het gedrag van een kleine hoeveelheid gebruikers op. Hierdoor kan in het begin van een ontwerpproces een richting gekozen worden. De gegevens over het gedrag van de deelnemers moeten echter getest worden met meer deelnemers, zodat er met meer zekerheid vastgesteld kan worden welke versie uiteindelijk het beste zal scoren. Annemarie over de opzet van de test: “We hebben het origineel en de twee testversies willekeurig aan deelnemers van de test voorgelegd, en gevraagd waar ze zouden klikken om meer financieel nieuws te lezen. We hebben gemeten hoeveel mensen klikken in gebieden die ze naar de extensie NuZakelijk.nl brengt, en hoelang ze hierover doen.”

Testresultaten van de vraag “Waar klik je om meer financieel nieuws te lezen?”

De resultaten laten zien dat de eerste testversie beter scoorde dan het origineel. De deelnemers deden er wel iets langer over om de navigatie te vinden (8,5 seconden, in plaats van de 6,5 seconden bij het origineel). De tweede testversie, die was verbeterd met behulp van de feedback uit interviews, scoorde beter dan het origineel én de eerste testversie. Meer mensen weten de extensies te vinden, en dit komt voor een groot deel door de verplaatsing van de navigatie naar de bovenkant. Mensen voeren de klik net zo snel uit als bij de originele versie. Dit bevestigde de vermoedens van Annemarie: “Hoewel meer mensen doorklikken dan bij het origineel, moeten ze langer zoeken door de positie van de banner. We hebben naar aanleiding van deze test een keuze gemaakt voor de tweede testversie. Deze staat nu ook live op de huidige site. De statistieken laten zien dat de verschillende extensies inderdaad meer aangeklikt worden dan voorheen.”

Testen in het ontwerpproces

Samengevat verliep het ontwerpproces als volgt:

1. Om bezoekers vaker van de homepage van NU.nl naar extensies als NUzakelijk.nl te leiden, is er een nieuw ontwerp gemaakt die de extensies in een tabnavigatie bovenaan plaatst.
2. Om een idee te krijgen van het effect van het ontwerp op bestaande gebruikers, is in interviews gevraagd gebruik te maken van het nieuwe ontwerp en wat ze hiervan vonden.
3. Naar aanleiding van de interviews is een aangepaste testversie gemaakt om het effect van de banner op de navigatie te voorkomen.
4. Alle versies zijn vervolgens getest met meer deelnemers met een test op afstand.
5. Het winnende design is live gegaan met goede resultaten. De statistieken wezen al snel uit dat de verschillende extensies meer aangeklikt worden dan voorheen.

Door deze stappen te doorlopen, is in korte tijd een nieuw ontwerp gemaakt, getest en geïmplementeerd.

Ik ben benieuwd naar jullie mening over dit proces. Hoe combineren jullie kwalitatief en kwantitatief onderzoek bij het opnieuw ontwerpen van een website?

Ik wil Annemarie graag bedanken voor haar toelichting op het ontwerpproces en de onderzoeksresultaten.