Don't click it

We zijn er allemaal aan gewend dat je door een website navigeert door te klikken op links en knoppen. Je staat er eigenlijk helemaal niet bij stil dat klikken niet strikt noodzakelijk is. Het kan namelijk ook anders.
Het is even wennen, maar het “don’t click it“-principe werkt eigenlijk wel goed.
Wat me vooral opvalt is dat je snelheid behoudt bij het navigeren. Je hoeft niet te wachten tot er weer een pagina is geladen. En dat werkt er fijn. Opvallend genoeg is al uit 2005 (jaren oud dus). Blijkbaar zijn de ideeen nog niet aangeslagen.
Toch leuk om de site te gebruiken als inspiratie om op een hele andere manier over interfaces na te denken.

Hoe je bezoekers stuurt met visuele hiërarchie

Op een gemiddelde website kunnen bezoekers letterlijk alle kanten op. Via links in de content, knoppen onder de tekst en tabs uit het menu kunnen bezoekers in iedere gewenste richting navigeren.
Als online marketeer of website eigenaar wil je echter vaak dat bezoekers een specifieke richting op gaan (b.v. in de richting van een aankoop).
Je kunt bezoekers sturen door gebruik te maken van visuele hiërarchie. Interaction designers noemen dit ook wel het gebruik maken van “primary & secondary actions“.
Luke Wroblewski (Chief Design Architect bij Yahoo) heeft op zijn site een paar mooie voorbeelden staan hoe je bezoekers stuurt met visuele hiërarchie:

In het voorbeeld hierboven is het voor de bezoeker meteen duidelijk wat de meest gewenste actie is. De submit-optie heeft een veel prominentere look  dan dan de optie om te cancelen.
Hierboven zie je goed hoe het principe van visuele hiërarchie werkt. Wanneer de knoppen visueel gelijk zijn wordt je als bezoeker niet gestuurd: je moet harder nadenken over de juiste actie. Wanneer je visueel gaat variëren worden bezoekers al een stuk meer gestuurd, waarbij de laatste optie het sterkt is.
Bekijk ook het “primary action” design pattern op Quince.
De volgende artikelen zijn ook interessant als je meer wilt weten over dit onderwerp:

De kracht van "microcopy" bij het sturen van bezoekers


Om bezoekers de juiste richting in te sturen maak je als marketeer gebruik van woorden. Niet alleen woorden in je long copy teksten, maar ook de woorden op knoppen of bij instructies voor de volgende stap die een bezoeker moet nemen. Deze korte stukjes tekst wordt ook wel “microcopy” genoemd. Weinig woorden, grote impact.
Copywriting is interface design
Goed artikel op 37signals over de kracht van copywriting bij het maken van interfaces:

Copywriting is interface design. Great interfaces are written (…) Do you label a button Submit or Save or Update or New or Create? That’s copywriting. Do you write three sentences or five? Do you explain with general examples or with details? Do you label content New or Updated or Recently Updated or Modified? Is it There are new messages: 5 or There are 5 new messages or is it 5 or five or messages or posts? (…) Icons with names, form fields with examples, buttons with labels, step by step instructions in a process, a clear explanation of your refund policy. These are all interface design.

Microcopy
Wanneer je het hebt over de kracht van copywriting bij interface design gaat het dus niet over creatieve long of short copy, maar over de woorden die je kiest op een knop, tussenkopje of voor een motiverend zinnetje. Ik weet niet of het een algemeen bekende term is, maar dit soort copywriting wordt ook wel “microcopy” genoemd (omdat het zo kort & puntig is):

Microcopy is small yet powerful copy. It’s fast, light, and deadly. It’s a short sentence, a phrase, a few words. A single word. It’s the small copy that has the biggest impact. Don’t judge it on its size…judge it on its effectiveness.

Microcopy is zo krachtig omdat dit de meest bepalende instructies zijn om bezoekers de juiste richting is te sturen. Ter inspiratie is het goed om deze voorbeelden van microcopy eens te bekijken.

Websitebezoekers verleiden met goed interface design


Hoe je het ook wendt of keert, voor veel mensen is het nog steeds knap lastig om hun weg te vinden op een website waar ze voor het eerst komen. Een belangrijke reden daarvoor is dat interface (navigatie, content) de bezoeker niet “helpt”. De bezoeker krijgt wel alle mogelijkheden te zien wat hij kan doen, maar hij wordt niet in de juiste richting gerstuurd met behulp van goed design.
Usability is niet genoeg… Een interface moet de bezoekers motiveren en verleiden waardoor het gebruik van een website duidelijker, gemakkelijker sneller en leuker wordt.
Interfaces die verleiden
Ryan Singer maakte een presentatie over hoe je een website interface maakt die bezoekers verleidt. Het designen van zo’n interface bestaat volgens hem uit drie onderdelen:

  • De indeling van de pagina’s
  • Het creeeren van “flow” in de interactie
  • Het kiezen van de juiste woorden

Indeling van de pagina
Het eerste onderdeel wat Ryan Singer in zijn presentatie bespreekt is de indeling van de pagina. Zijn tips voor dit onderdeel zijn heel gemakkelijk:

  1. Decide what matters
  2. Make that pop out
  3. Make everything else fade back

Het voorbeeld hierna maakt dit principe in één keer duidelijk:

In het voorbeeld hierboven is alles min of meer even belangrijk. Wanneer je de drie stappen van Ryan Singer (decide what matters, make that pop up, everything else fade back) toepast op dit plaatje krijg je het volgende:

Zoals je ziet ontstaat er op deze manier een natuurlijke hierarchie in de verschillende elementen op de pagina. De bezoeker wordt op deze manier geholpen bij het focussen van zijn aandacht.
Flow
De “flow” van een interface kun je het beste samenvatten als de vraag hoe je de websitebezoeker in beweging houdt. Bij iedere pagina moet je je afvragen waar de bezoeker naar toe door zal klikken. Een beetje zoals “what’s the next action?” van de Getting Things Done methode. Door je bezoekers met je design proactief suggesties te geven van dingen die ze op dat moment kunnen doen verleid je ze om langer op je site te blijven. Ze hoeven minder zelf uit te zoeken, dus daardoor wordt de interface (en de hele website dus eigenlijk) duidelijker, gemakkelijker sneller en leuker.

De juiste woorden
Bij interface design is het zeer belangrijk om de juiste woorden te kiezen. Het gaat er om de je de taal van de bezoeker spreekt. Jouw bedrijf kan het wel consequent over “kampeerauto’s” hebben, maar waarschijnlijk zijn je bezoekers vooral op zoek naar “camper”. Gebruik dan vooral dat laatste woord in je navigatie etc.

Het gaat erom dat je in je navigatie woorden gebruikt die in bij normale gesprekken ook gebruikt.
Ryan Singer haalt in de presentatie het voorbeeld aan van de “submit-button” die je veel ziet op Engelstalige sites. Maar hoe vaak “submit” je iets? In plaats van “verstuur je bestelling” (daar komt “submit” vandaan) kun je toch veel beter gewoon het woord “bestel” gebruiken? Hetzelfde geldt voor tal van andere acties die je op een website kunt uitvoeren.
Samenvatting
Op één van de laatste slides wordt de presentatie nog op een duidelijke manier samengevat: