interaction design inburgeren.nl

Over de inhoudelijke ontwikkeling waar de belangen van SZW, DUO, begeleiders en inburgeraars bijeen kwamen. Ontwikkeling van teksten, navigatie, presentatie, voor alle devices.

vernieuwing van de website inburgeren.nl

Het ministerie van Sociale Zaken en Werkgelegenheid, kortweg SZW, geeft DUO de opdracht om vóór 1 januari 2015 de website inburgeren.nl te vernieuwen. Ik vervulde de rollen: projectleider, interaction design, en front-end programmeur.

Interaction architect

Ik ben drager geweest van de inhoudelijke ontwikkeling: information architecture, interaction en visual design. Ik werk als primus inter paris. Omdat ik geloof in samenwerken en eigen verantwoordelijkheid van teamleden. Open discussies op inhoud gericht op gemeenschappelijke, gedragen oplossingen.

Om voorgang te boeken of de zaken in elkaar te laten grijpen, hakte ik knopen door. Ik bepaalde in grote lijnen de werkwijze: cyclisch werken, voortdurend in contact met gebruikers blijven middels veldonderzoek en gebruikstesten, en prototyping in de browser.

Wat er mis was met de website vóór 2015

inburgeren.nl vóór 2015

De website inburgeren.nl was voor het laatst vernieuwd in 2013. De website bestond sindsdien uit twee bijna identieke websites. Een website met een groene balk voor inburgeraars met een verblijfsvergunning vóór 1 januari 2013, en één met een blauwe balk voor na 1 januari 2013.

Uit onderzoek bleek dat bezoekers daar helemaal niks van begrepen. Ze begrepen niks van de keuzeknoppen die rechts op alle pagina’s waren geplaatst. Ze gebruikten vaak de verkeerde informatie. Met alle gevolgen van dien.

De informatie was verspreid over meer dan 70 pagina’s per website. De bezoekers raakten daarin helemaal de weg kwijt.

 Illustratie van de homepage van vóór 2015

veldonderzoek

customer research, contextual inquiry, human centered design, hcd

We zijn begonnen met veldonderzoek. Gewoon langs bij een inburgeraar en zijn Nederlandse partner. We hebben in meerdere bezoeken alle aspecten van het inburgeren boven water gehaald. Die ervaring hebben we mondeling overgedragen in een workshop waarin anderen die informatie vastlegden in de modellen bekend van contextual inquiry.

Dit veldonderzoek leverde een rijk beeld van de werkelijkheid op en met name empathie; we konden meevoelen met wat inburgeraars en hun begeleiders meemaken.

mobile first

prototype mobile first

Het eerste ontwerp was een versie voor mobiel. Gebaseerd op onze eerste inzichten in de inhoud, hebben we een informatie-architectuur bedacht en uitgevoerd in een html-prototype. De eerste teksten werden geschreven door een schrijver met ervaring in het domein.

In de gebruikstesten ontdekte we dat inburgeraar vooral geïnteresseerd waren in de video’s. Voor hun begeleiders waren de teksten belangrijker. Het werd ons duidelijk dat de informatiearchitectuur te diep was. En de vertakking van informatie te ingewikkeld.

De gebruikers hadden veel klikken nodig om bij informatie te komen. En hadden er moeite mee om van de ene tak van informatie naar de andere te navigeren. Meer video’s, een platte navigatie, was de conclusie.

 Illustratie van de homepage van het mobile first prototype

volledig overzicht van de inhoud

Het bleek niet eenvoud om een volledig overzicht van de inhoud te krijgen. Binnen DUO zit de kennis van wetgeving en uitvoering vooral in de hoofden van mensen. Elke keer als we met een deskundige spraken, kregen we een ander beeld en de indruk dat het allemaal vreselijk complex was.

Ik heb toen besloten dat we een document gingen schrijven met een volledig overzicht van de inhoud van de website. We verzamelde informatie bij deskundigen, schreven het op en deden reviews.

Alle deelnemers schrokken ervan hoeveel tijd het kostte om alle informatie boven water te krijgen. Tegelijkertijd was het opvallend dat – eenmaal opgeschreven – het allemaal veel minder ingewikkeld was, dan iedereen dacht. Het document werd leidraad van de schrijvers.

naar een eenvoudige informatiearchitectuur

De bestaande website had vertakkingen naar meer dan 70 pagina’s. Ons eerste prototype had minder vertakkingen, maar nog steeds teveel. We besloten de inhoud in drieën te delen: wat is dat inburgeren en hoe doe je dat, meer over de kernactiviteit: leren en examen doen, en hoe betaal je het? Drie lange pagina’s.

desktop

In de tweede versie voegden we de desktop toe. Meteen ontwerp en techniek responsive maken was ons motto. We hebben meerdere varianten ontworpen en gemaakt. Het ministerie was enthousiast over onze ontwerpen. Daarmee hadden we in een vroeg stadium al een deel van de toets doorstaan.

 Illustratie van de homepage van een desktop prototype

Aanvankelijk hadden we alle onderwerpen van alle pagina’s in één lang menu links van de pagina geplaatst. Dat is heel ongebruikelijk, maar werkte in gebruikstesten prima. De gebruiker kon door goed gekozen labels scrollend zijn weg vinden. Toen we echter een uitgebreide footer toevoegden, vonden we het menu te lang worden. We hebben er toen voor gekozen om de onderwerpen per pagina op te klappen. Ondanks een extra handeling van de gebruiker, werd de oplossing goed ontvangen.

baanbrekend

De opzet van inburgeren.nl is baanbrekend te noemen. De hele inhoud van de website toegankelijk met een menu links van de pagina, of links achter de pagina op mobiel. En niet via de balk kenmerkend voor de rijkshuisstijl.

Daarnaast hebben we het blauwe lintje van de rijkshuistijl boven het midden van de inhoud van de pagina geplaatst. En niet boven het midden van de hele pagina inclusief menu.

Nieuw is ook het laten meelopen van de selectie in de navigatie, als de gebruiker scrollt. Hij ziet, als hij scrollt, waar hij is.

omgaan met meningsverschillen

Tijdens het project zijn er met belanghebbenden rond het project meningsverschillen geweest over de plaats van het blauwe lintje van de rijkshuistijl of de teksten. We hebben op dergelijke meningsverschillen gereageerd door de verschillende alternatieven te maken en naast elkaar te beoordelen. Op die manier konden we meningsverschillen snel uit de weg ruimen.

teksten

In de derde versie waren alle ogen gericht op het schrijven van de teksten. Daar zou het ministerie het werk van DUO op beoordelen. Eigen aan de bedrijfscultuur had het overleg over teksten veel voeten in aarde. Dankzij de technische opzet van het prototype

toegankelijkheid

Ondanks dat de overheid er naar streeft om toegankelijk te zijn voor mensen met een beperking, is het helaas ook bij DUO geen automatisme om elke website toegankelijk te maken. We hadden echter een expert aan boord, Janita Top. De nieuwe inburgeren.nl was vanaf dag één toegankelijk.

naar de huidige website

 Illustratie van de homepage van de website