Het statusdilemma
In de theaterwereld is er een spelletje genaamd ‘baas/knecht’. Als de acteurs deze scène spelen ontstaat er ongenblikkelijk een standverschil: de baas deelt de lakens uit en de knecht moet zich onzichtbaar zien te maken. Op dit moment is er sprake van een statusverschil. Ook in een groep spelende kinderen is vrij eenvoudig te zien dat er statusverschillen zijn. Je kunt ze bijna nummers geven: één voor het kind dat de baas is, twee voor het kind dat orders van nummer twee aanneemt, en deze doorgeeft aan nummer drie, en zo verder.

Ook in een webpagina is iets dergelijks aan de hand. Als er meerdere elementen op een pagina staan is er altijd wel één die gelijk de aandacht trekt (bijvoorbeeld het logo), een ander element pakt daarna de aandacht (bijvoorbeeld een blokje tekst met een schreeuwerige kleur), dan een derde element, en zo verder.

Wat maakt dat het ene element meer aandacht trekt dan de ander?

Ik heb eens een klein experimentje gedaan om uit te zoeken hoe dit nu zit. Ik heb de twee woorden ‘ik’ en ‘ben’ op een oppervlak gezet om te zien wanneer er ‘ik ben’, en wanneer er ‘ben ik’ staat. Uit ‘ik ben’ en ‘ben ik’ blijkt al dat er een verschil is of een woord links of rechts staat. In de westerse cultuur leest men van links naar rechts, en dus heeft links een hogere status dan rechts. Hetzelfde geld voor boven en onder. Bij gevolg heeft linksboven een hogere status dan rechtsonder. De twee versterken elkaar en linksboven heeft een dubbele status gekregen: een superstatus.

Interessant wordt het als je het ene woord linksonder zet en het andere woord rechtsboven. Dan heffen de statussen elkaar op en kom je in een soort neutraalstand terecht. Het brein weet nu niet meer zo goed of hier nu ‘ik ben’ of ‘ben ik’ staat. Een intrigerende puzzel ontstaat die de hersenen een fractie langer bezighoudt dan de andere ogenblikkelijk te plaatsen volgorden.

status1

Bij een kranteartikel is meteen duidelijk wat de kop en de subkop is, ook al staat die er soms boven en er soms onder. Groot is hoger in status dan klein. Dit met een zinnetje bewijzen is lastig omdat woordvolgorde heel erg dwingend is. Geen nood, met een cirkel en een vierkant is dat opgelost.

Plaats en grootte. Maar er zijn er nog meer. Kleur bijvoorbeeld. De status van een felle kleur is hoger dan een zwakke kleur. Contrast. Is het contrast met de achtergrond heel sterk, dan is die status hoger dan een laag contrast. Een goed voorbeeld hiervan is het ‘disabled’ effect dat op websites en in computers wordt gebruikt om aan te geven dat iets niet werkt. En dan is er nog beweging/stilstand, leesbaar/onleesbaar, omlijnd/niet-omlijnd en er zijn er vast nog meer.

status2

Aangezien er meerdere factoren zijn die de status bepalen bedacht ik mij dat het dus mogelijk is deze te stapelen en tot superstatussen te komen, maar dat het ook mogelijk is deze statussen tegen elkaar weg te strepen tot een neutraalstand.

status3

Ok. En wat heeft dit nu met spannend design te maken?

In mijn ontwerppraktijk was ik al vaker over mooie ontwerpen gestruikeld die desondanks op de een of andere manier niet lekker zaten. Door tussen de oogharen te kijken kon ik controleren hoe het in dit ontwerp gesteld was met de status. Wat trekt het meest de aandacht?, en is dat wel datgene wat het meest aandacht zou moeten krijgen?

Ik kwam er geregeld op uit dat alle elementen op de pagina om evenveel aandacht schreeuwden. De beschouwer had geen idee waar hij zijn ogen moest laten. Niet goed. Door een aantal elementen te benadrukken en een aantal elementen te degraderen wist ik de communicatieve waarde en dus de gebruiksvriendelijkheid van het ontwerp aanzienlijk te verbeteren. Opgelost. Hieruit distilleerde ik de wet ‘hoe duidelijker de statusverschillen tussen de elementen op de pagina, hoe beter de communicatie’.

Met dit in mijn achterhoofd begon ik kleine compositietjes te maken van superstatus. In een ontwerp bevordert een goede statusvolgorde de gebruikvriendelijkheid en mijn statusschetsjes zouden aantonen dat dit superieur was aan een neutrale composie, of erger, een chaotische compositie.

Maar dat gebeurde niet.

Je hebt je dag niet, mooi is subjectief, je bent een waardeloze vormgever... Het spookte allemaal door mijn hoofd. Ook maar eens een paar compositietjes maken met een neutraalstand. En tot mijn grote verbazing zagen die er veel interessanter uit. Ze waren mooier!

status4

Ik had toch bedacht dat design beter wordt als de statusverschillen helder zijn? En nu heb ik onder mijn neus het bewijs van het tegendeel!

Waarom vind ik de ene mop wel leuk en de andere niet? Geen idee, maar wat ik wel weet is dat ik van grappen hou die ik NET WEL begrijp. Het zit hem vaak ik die ene halve seconde die ik nodig heb om te begrijpen wat er de grap aan is. Een mop die ik ogenblikkelijk snap vindt ik flauw, en grappen die te moeilijk zijn begrijp ik dus dan ook niet. Mensen vinden het prettig om, al is het maar een halve seconde, bezig gehouden te worden.

Dingen die ogenblikkelijk duidelijk zijn zijn flauw, saai, voorspelbaar, evident. Zo ook mijn superstatus compositie. In de neutrale composities waren echter alle elementen zo goed mogelijk gelijk geschakeld. Het is niet gelijk duidelijk wat er aan de hand is en daagt de geest uit. En dat is leuk, spannend, intrigerend, mooi.

Houston, we have a problem. Ik kan namelijk niet een ontwerp maken die tegelijkertijd superstatus EN neutraal is. Dat zou namelijk ideaal zijn: een ontwerp die zowel in één keer duidelijk is en ook nog spannend en intrigerend.

Het is de heilige graal waar iedere designer op zoek naar is. In de praktijk komt het er op neer dat je een compromis moet sluiten. Moet de site erg gebruiksvriendelijk zijn, dan maar wat minder spannend. Moet de site spannend zijn, dan maar wat minder gebruiksvriendelijk.

Goed communiceren is er voor zorgen dat iemand je ogenblikkelijk begrijpt. Iemand boeien is er voor zorgen dat iemand je niet ogenblikkelijk begrijpt. Knappe jongen als je dat tegelijkertijd kan.

Finn Stapelkamp


Eerder gepubliceerd: MacFan 46