Van​papier​naar​een​werkende​editor

Ik begon met deskresearch en een concurrentieanalyse. Bijna iedereen had een visuele editor waarin je layout, inhoud en stijl direct aanpast en meteen ziet wat er gebeurt. Wij hadden formulieren.

In de interviews die ik daarna deed zeiden klanten hetzelfde als de analyse: ik wil zien wat ik verander. Uit die analyse kwam ook de belangrijkste ontwerpkeuze. Als je een pagina opdeelt in secties, rijen en blokken, krijg je een beperkte set bouwstenen die je toch vrij kunt combineren. Weinig om te onderhouden, veel om mee te maken.

Ik tekende de populairste secties en blokken uit de analyse na, stuurde ze als pdf naar de copyshop en knipte een dag lang. Daarna drie sessies met steeds maximaal vijf klanten, met één opdracht: bouw je ideale homepage met deze stukken.

Wat ze pakten en waar ze het neerlegden zei meer dan welke enquête ook. In het tweede deel van elke sessie praatten we over wat er in die blokken zou moeten en wat ze misten.

Twee dingen, steeds opnieuw. Je moet zien wat je doet, en je moet de inhoud makkelijk kunnen wijzigen. De indeling in secties, rijen en blokken bleek te kloppen.

Tijdens de sessies kwamen er bijna geen vragen. Dat is het beste teken dat een idee klopt. Deelnemers waren enthousiast, ook nadat ze hoorden dat de eerste versie veel minder zou kunnen dan wat ze gewend waren.

De lastigste vraag bij het wireframen was waar de bewerkingsknoppen moesten staan. Op papier hadden we dat mondeling opgelost, op een scherm moet het ergens staan. Ze moesten licht zijn en niet in de weg zitten.

Daarna kreeg het een stijl. Rond, licht, wit en blauw, zodat de bewerkingslaag duidelijk verschilt van de winkel eronder. Zo weet je altijd of je aan het kijken of aan het bewerken bent.

Ik richtte een testruimte in op kantoor. Een computer met twee schermen, een microfoon en een camera. Op het rechterscherm de opdracht, op het middelste het prototype. De uitnodiging ging breed de deur uit.

Achttien klanten kwamen langs, met de vraag hardop te denken. Dat levert meer op dan een lijst met problemen, want je hoort waarom iemand ergens klikt. Het was bovendien de eerste keer dat veel van hen de makers van hun software ontmoetten.

De grootste pijnpunten bleken klein. Een paar iconen en abstracte plaatjes waren niet meteen duidelijk. Dat is precies wat je wilt vinden voordat er een regel code geschreven is.

De echte winst zit niet in het prototype maar in de volgorde. Papier is goedkoper dan een ontwerp, en een ontwerp is goedkoper dan code.