Niehaus Wireframe techniek - Methode om Resultaatgerichte Websites te Schetsen

De laatste jaren heb ik op regelmatige basis wireframes gemaakt voor mijn werk. Mijn ervaring is dat een wireframe (met toelichting) prima functioneert als briefing voor webdesigners en/of front-end developers. Daarnaast bieden wireframes het voordeel dat er tijd bespaard wordt tijdens meetings waarin nieuwe functionaliteiten of design-aanpassingen voor 1 van de websites wordt besproken. Laatst las ik een artikel dat een oplossing voor een probleem schetste, dat ik zelf al eerder heb ervaren. Wireframes bieden namelijk kansen om completere briefings te maken en dus effectievere eindproducten op te leveren. Denk aan instructies die je in wireframes kunt verwerken over SEO, Credibility en Persuasive design. Hieronder volgt een vertaling van een interessant artikel over een nieuwe wireframe techniek die meer communiceert dan de traditionele zwart-wit schetsen van website concepten.

Bij het uitwerken van website projecten bestaat er vaak miscommunicatie tussen behoeften van de doelgroep, daadwerkelijke implementatie en de cruciale vraag om vooraf wensen te verwerken die direct positief van invloed zullen zijn op de conversie, of dat je deze beter later kunt uitwerken. Het Niehaus wireframe concept geeft hierop een antwoord. In mei 2010 presenteerde de Amerikaanse designer Sandra Niehaus (co-auteur van het boek Web Design for ROI) een wireframe concept dat sindsdien gebruikt wordt door bekende Conversie Optimalisatie Professionals die deze vorm van wireframing sindsdien "Niehaus wireframe" mee hebben gegeven.

Volgens Niehaus voldoen 'normale' wireframes prima om architectuur van een website over te brengen en om basisprincipes en structuur van content te communiceren. De minpunten zijn echter: focus, relevantie en conversie optimlisatie. Niehaus stelde daarom voor om aan wireframes voortaan een onderdeel toe te voegen en wel en conversie strategie component. De conversie strategie component kan onderverdeeld worden in:
• Relevantie voor de doelgroep (volgens het Pareto principe)
• Relevantie van onderdelen (psychologie van perceptie)
• Organisatie van content en structuur

Met betrekking tot relevantie van onderdelen binnen een ontwerp, stelde Niehaus voor om pagina-elementen te graderen? in volgorde van belangrijkheid door verschillende tinten van de kleur grijs toe te passen. Het meest belangrijke element zou dan de meest donkere kleur grijs gegeven moeten worden en alle andere elementen krijgen lichtere grijstinten. Volgens Niehaus zou het resultaat dan een wireframe zijn dat bestaat uit verschillende grijze gebieden die beter benadrukt kunnen worden op basis van relevantie bij het vernieuwen of verbeteren van een website.

De sterkte van een Niehaus wireframe wordt duidelijk zichtbaar indien men duidelijke regels opstelt, zoals beperking van het gebruik van maximaal twee Call To Actions. Als je hierover nadenkt, dan denk je niet enkel als een designer en conceptontwikkelaar, maar bovenal als een strateeg. Een strateeg die ook denkt aan doelgroepclustering en vertegenwoordiging van aanbod voor een divers aantal bezoekers. Je dwingt jezelf om met een relevanter voorstel te komen.
Een zwakte van het Niehaus wireframe, is dat het geen oplossing biedt voor toekomstige content. Deze gaten dienen opgevuld te worden door een extra wireframe te maken.

Logischerwijs is het belangrijk om van tevoren alle mogelijke doelgroepen goed onder de loep te nemen voordat je een Niehaus wireframe maakt. Relevantie hangt namelijk af van wat klanten verwachten en waar ze zich op concentreren. Het voorstel is om een wireframing proces op te delen in drie stadia:



Stadium 1: Maak een Pareto wireframe (doelgroep)
Stadium 2: Maak een Niehaus wireframe (relevantie)
Stadium 3: Combineer een definitief storyboard wireframe

1) Pareto wireframe
Het Pareto principe (ook bekend als de 80/20 regel) beschrijft het principe waarbij de applicatie 20% van alle mogelijke oplossingen voldoet om 80% van het potentieel te realiseren. Wat betekent dat bij het maken van wireframes? Het idee is gebaseerd op het gebruik van bestaande doelgroepdefinities, die hun oorsprong vinden in studies zoals Sinus milieus, voorspellingen, of zelfs verkennende typologieen die grofweg de basiselementen, tools, helpteksten, navigatie en content wensen formuleren en beschrijven voor elk template.


Figuur 1: Verkennende persona's 

Zonder er een proriteit aan te koppelen, zou deze verkennende fase kunnen resulteren in honderden elementen of objecten. Deze zullen echter geprioritieerd moeten worden volgens het Pareto principe. Om een optimalie prioritiering te realiseren, wordt potentiële waarde toegekend aan verschillende doelgroepen tijdens de tweede stap (figuur 2). In het derde stadium wordt aan alle persona's een waarde gekoppeld op basis van relevantie (Figuur 3).


Figuur 2: Waarde toekennen


Figuur 3: Pareto wireframe waarin wensen en behoeften van persona's zijn verwerkt

Hier is een voorbeeld: voorkom dat je 100% opvult van je startpagina met tools, objecten en elementen. Of, als je 100 willekeurige elementen hebt, dan zouden deze niet evenredig veel ruimte toebedeeld moeen worden met exact 1% van de ruimte op een pagina. Het is daarom nodig om een 5% norm te introduceren die vervolgens een plaats vergaren in het 'parlement van elementen'.

Als er waarden toegekend zijn aan diverse verkennende persona's, dan communiceren deze ook een zekere mate van relevantie en prioritering van de verschillende elementen. Er zijn soms ook verplichte elementen die inbegrepen worden ondanks de toegekende waarde, zoals de link naar bepaalde SEO elementen, waardoor de pagina anders niet zou werken. Echter zijn SEO-aspecten niet noodzakelijkerwijs relevant voor de eindgebruiker.

Tijdens dit stadium worden onnodige elementen uit het voorlopige resultaat verwijderd, die niet relevant zijn voor de doelgroep. Dat kan betekenen, bijvoorbeeld, dat de social media plug-in of advertentie (die op verzoek van de Marketingafdeling in het ontwerp is verwerkt) verwijderd kan worden als blijkt dat slechts een klein percentage van de doelgroep het betreffende element daadwerkelijk gebruikt. Er is echter niet genoeg ruimte om elk experiment door te voeren.

2) Niehaus wireframes
De wireframes van Niehaus zijn oorspronkelijk bedoeld om de aandacht van een ontwerper te concentreren op de essentiele elementen. Zonder dit ingenieuze systeem, zouden onbelangrijke elementen snel kunnen veranderen in belangrijke onderdelen. Dingen die niet boven de vouw zouden moeten worden getoond, zouden als paddestoelen uit de grond schieten. Het citaat van Landingspagina-specialist Tim Ash sluit hierbij goed aan: "Your website is a growing field, and sooner or later it’s overgrown!"

Het meest ideaal is om maximaal vier stadia van grijs te verwerken in Niehaus wireframes. Elke stadium vertegenwoordigt een verschillende attentiewaarde die aandacht opwekt van internetgebruikers:
• Licht grijs: alle must-have elementen zoals het logo, meta-navigation, belangrijke content en de hoofdnavigatie
• Middel-grijs: tertiaire focus waartoe hoofdnavigatie, contactgegevens, invulvelden en trust-elementen behoren.
• Donker grijs: deze gebieden vertegenwoordigen de secundaire focus. Deze grijstinten wordt toegekend aan alle elementen die zijn bedoeld om primaire focus op te wekken of om attentiewaarde te bevestigen.
• Zwart: betreft primaire focus en wordt vooral toegepast in de Call To Action (CTA).


Figuur 4: Legenda

Met de toepassing van elke grijstint, neemt de hoeveelheid, omvang en ruimte van het betreffende element af. Voorbeed: 60% van de pagina-schets is lichtgrijs, 30% is middel-grijs gekleurd, 8% donkergrijs en 2% ervan is zwart. Maar wees voorzichtg! Dit hangt helemaal af van de voorgaande doelgroep-analyse en het pagina-type. Als het om een losstaande landingspagina gaat, zoals in figuur 5, zal de verhouding tussen de grijstinten verschillen van de eerder genoemde onderverdeling. Er moet tevens besloten worden of een element gepositioneerd wordt boven of onder de vouw.

Het meest opmerkelijke aspect van een Niehaus wireframe is dat het een vroegtijdige eye tracking test kan simuleren. Figuur 4 laat zien dat in een eye-tracking test alle elementen gefocused zijn volgens de aangegeven belangrijkheid met 4 grijstinten.


Figuur 5: Niehaus wireframe waarbij de landingspagina van Frontlineshop.de als voorbeeld is genomen. Aan de productafbeelding is een grotere, secundaire focus toegekend.

Storyboard wireframe
Het storyboard wireframe is eigenlijk een 'klassiek' wireframe. Het vertegenwoordigt een vrij gedetailleerd en zorgvuldig uitgewerkte schets van een website. Het strategische deel van de bevindingen is getest met echte content en verrijkt met details.


Figuur 6: Een voorbeeld van een klassiek wireframe. Er is sprake van een overvloed van mogelijke alternatieven in dit geval, maar deze zijn niet allemaal te vertonen op dit moment.

Bij een professionele uitvoering, worden zwaktes in het concept eruit gefilterd tijdens deze fase:
• Vertalingen, zoals talen met langere woord-structuren (zoals de Franse taal) kunnen worden getest of talen zonder Latijns schrift.
• Content die niet realistisch is of overweldigend, kan verwijderd worden.
• Weinig voorkomende systeem- of gebruikersdialogen kunnen geoptimaliseerd worden voor de laatste keer.


Figuur 7: Definitieve versie van website waarvan concept is gemaakt met Niehaus wireframe

Conclusie: Het wireframe concept dat hierboven is afgebeeld, vult het gat tussen geprioriteerde wensen en behoeften van de doelgroep, de hypotheses die daaruit voortkomen en daadwerkelijke implementatie. Het Niehaus wireframe helpt designers om gebruikersbelangen te bewaken en om niet te lang stil te staan bij de variatie aan alternatieven. Het wireframe concept is ideaal voor nieuwe opvattingen, landingspagina's die los staan van het ontwerp-sjabloon van de website en verbeteringen.

Aanleiding voor dit artikel is het stuk dat usability expert Matthias Henrici eerder op zijn weblog publiceerde over het Niehaus wireframe.