Ontwerptip: alles kan groter!

In een poging de vele concepten van dit blog op te ruimen, probeer ik deze alsnog af te schrijven en te publiceren. Dit bericht was origineel geschreven in 2019. Nadat ik terugkwam van mijn revalidatie, als een idioot besloot meteen een nieuw groot project op te pakken, en matige artikelen schreef. Desondanks zijn mijn tips hier wel heel nuttig.

Jaren geleden wilde ik weten hoe de kunst van het ontwerpen in elkaar stak.

Ik begon allerlei boeken te lezen, vol moeilijke woorden zoals “the Gestalt principles of perception”, “Active & Passive Shapes”, en “voorwoord”.

Hoewel ik veel kennis daaruit heb gehaald, begonnen die talloze verschillende designprincipes toch te duizelen op den duur. Het is gewoon te veel om aan te denken. Ben je net lekker bezig met ontwerpen volgens het ene principe, botst dat weer met het andere, en vergeet je de overige zevenenveertig “gouden regels” van ontwerpen.

Zodoende kwam ik erachter dat ik liever een handjevol grappige principes hanteer. Dat is beter te onthouden en de rest moet toch voortkomen uit ervaring die je over de jaren heen opbouwt.

Eén van die principes is: alles kan groter.

“Als je het even niet meer weet, probeer dan je (belangrijkste) ontwerpelementen extreem uit te vergroten“

De laatste maanden is dit principe weer keer op keer van waarde gebleken, wat mij aanspoorde om een artikel erover te schrijven. Hopelijk heeft u, mijn trouwe lezer, ook zoveel aan deze gouden regel 🙂

Voorbeeld: een knop

Ik ben de laatste maanden bezig met het ontwikkelen van een groot computerspel. In dit spel moet je samenwerken met vrienden op de bank om zoveel mogelijk pakketjes af te leveren. Dat klinkt misschien saai en standaard, maar natuurlijk doe ik mijn uiterste best om dat op zijn kop te zetten.

In dit spel heb je een heel arsenaal aan knoppen. De ene knop opent een poort (zodat je medespeler erdoorheen kan), de andere knop zet de pakketjesmachine aan het werk (voor als je een nieuwe doos nodig hebt), weer een andere knop zet iets anders in beweging, en zo gaat het maar door.

In eerste instantie ontwierp ik, verrassend genoeg, iets wat eruit zag als een knop. Ongeveer de juiste verhoudingen, ongeveer de juiste vorm, ongeveer de juiste functionaliteit.

Wat denk je? Mensen begrepen het niet. Spelers konden de knoppen niet vinden, ze begrepen niet wanneer ze hem wel/niet hadden ingedrukt (of moesten indrukken), en ze vonden het niet zo’n leuke toevoeging aan het spel.

Dus toen dacht ik: alles kan groter. Ik maak de knop gewoon nog groter dan de spelers. Ik maak hem dikker, zodat hij beter te zien is én het iets langer duurt om hem in te drukken. Ik zorg dat hij kleur verandert wanneer hij helemaal is ingedrukt (en dus iets activeert).

Wat denk je? Ineens was dit het leukste deel van het spel. Ineens waren die knoppen een goed idee, véél leuker dan de andere ideeën!

In één van de levels besloot iemand zelfs om gewoon twee minuten lang constant de knoppen in te drukken om zoveel mogelijk pakketjes te maken :p Let op de stapel blauwe pakketjes helemaal rechts, en de persoon die de knop indrukt (P2) linksboven.

Zoals je ziet heb ik dit principe niet alleen toegepast op de ronde knoppen. De knoppen om pakketjes te ontwikkelen zijn vierkant … en ook extreem groot. Het level dat je hierboven ziet was nog niet af toen het werd gespeeld, dus er was letterlijk géén uitleg vooraf, en toch begrepen spelers het meteen en vonden ze het leuk.

Dat is de kracht van uitvergroten.

(Dit spel heet trouwens Package Party en is hier te vinden: Package Party – a local multiplayer game for anyone. Het is nooit verder gekomen dan de eerste wereld + een paar extra levels. Waarom? Omdat het dus te groot was voor mij op dat moment én ik moest weer terug naar de studie. Het is echt een leuk spel, veelbelovend, maar ik weet niet of het ooit verder af komt.)

Voorbeeld 2

Ik ben bezig met een ander spelletje, deze keer voor de mobiel en vele malen kleiner en simpeler dan het spel hierboven.

Het is weer een coöperatief spel, voor twee mensen op dezelfde smartphone. Je moet tegenover elkaar zitten, zodat je alleen jouw helft van het scherm goed kan lezen, want die van je medespeler is ondersteboven voor jou. (Geen zorgen, het filmpje zal dadelijk heel veel duidelijk maken.)

Vervolgens moet je goed samenwerken om te overleven. Zo kan speler 2 voor een dichte poort staan die alleen geopend kan worden als speler 1 snel de juiste sleutel pakt. Ook verschijnen er “monsters” op het veld, die speler 2 moet zien te vangen voordat ze speler 1 bereiken.

Na enkele dagen in ontwikkeling stuur ik dit filmpje naar een vriend:

Dit filmpje is gewoon op de computer opgenomen. Om de een of andere reden laat deze “game engine” automatisch een Samsung telefoon rondom het spel zien. Ze zullen wel worden gesponsord. Hoe dan ook, mijn computer kan ik natuurlijk niet plat leggen, dus dit spel is wel behoorlijk lastig uit te testen voor mezelf :p

De rode knoppen (pijl links en rechts) besturen het rode poppetje. De blauwe wereld is voor ons ondersteboven — in het echt zou er dus een andere speler aan die kant zitten, voor wie de blauwe wereld er normaal uitziet, maar de rode wereld juist ondersteboven is.

Wat is de reactie van mijn vriend? (Die overigens verrassend veel verstand heeft van ontwerpen en dingen er goed uit laten zien, ondanks het feit dat hij er nooit iets mee doet.)

“Ik zou die monsters wegdoen, anders te onoverzichtelijk”

Het was de bedoeling dat die monsters hét grote onderdeel van het spel worden, dus ik was natuurlijk niet blij om dit te horen. Maar tegelijkertijd wist ik dat hij gelijk had: ik vond het spel zelf ook al best vervelend om uit te testen. Alle onderdelen waren te klein, te priegelig, ze bewogen te snel.

Je voelt hem al aankomen: alles kan groter!

In plaats van de monsters wegdoen, heb ik ze juist groter gemaakt. (En de knoppen om te besturen waren trouwens eerst ook veel kleiner.)

Sterker nog, ik heb zo’n beetje alles in het spel groter gemaakt. In het filmpje hierboven zie je, bijvoorbeeld, gouden sleutels en groene pijltjes. Die sleutels openen zo’n grote deur aan de andere kant. Die groene pijltjes schieten speler 2 naar links of naar rechts (ze geven een tijdelijke “boost”). Hartstikke leuk, maar op deze manier kwamen er heel veel losse icoontjes bij, die de speler weer moest onthouden en moest zien te vinden in deze chaos.

Dus toen besloot ik om alles via monsters te doen: je hebt een monster dat de sleutel vastheeft (door die de te vangen open je de poort), je hebt een monster met een grote pijl op zijn buik (door die te vangen krijg je een boost), et cetera

Zoals je ziet, je kunt niet alleen letterlijk dingen groter maken (op visueel gebied), maar ook figuurlijk. Door heel veel kleine details samen te nemen in één groot geheel, worden dingen vaak ook beter en duidelijker.

(Jammer genoeg is mijn filmpje van de nieuwe versie op mysterieuze verdwenen en staat er nu slechts een error. Sorry.)

Waarom gebeurt dit steeds?

Ik was weer in de aloude val getrapt: ik wilde teveel dingen tegelijkertijd doen. Ik wilde teveel op het scherm laten zien, waardoor ik alle blokjes te klein had gemaakt, en te veel monsters toestond.

Ik was bang dat het spel anders te makkelijk zou worden. Dat het saai zou zijn en niemand zou interesseren als je maar een paar dingen op het scherm kon zien.

Dus denkt mijn brein: het is niet goed genoeg, laat ik meer toevoegen.

Of mijn brein wordt onzeker en denkt: het ontwerp van die monsters is niet al te best getekend, als ik ze nou kleiner maak valt het niet zo op!

Ik bespeur deze valkuilen constant bij mezelf, maar ook bij anderen. Vrijwel iedereen doet dit van nature.

Voorbeeld: groepsprojecten

Op mijn middelbare school werden we vroeger wel eens gevraagd om iets te ontwerpen. Ontwerp een poster voor dit, ontwerp een voorkant voor dat, ontwerp een flyer voor een zogenaamde verkiezingscampagne, dat soort dingen.

Ik heb meerdere keren bij zo’n groepsoverleg gezeten voor het ontwerp, welke ik nu losjes zal reconstrueren:

• “Zo, deze informatie moet er sowieso op.”
• “Eeeh zouden we niet X en Y er ook op zetten? Voor de zekerheid. Anders krijgen we gezeur dat X en Y er niet op staan, terwijl die informatie er overduidelijk bij moet.”
• “Oké dan.”
• “Maar dan moeten A en B er ook bij, toch?”
• “Zet gewoon zoveel mogelijk erop, dan kunnen we niks missen.”
• (… enkele dagen later …)
• “Ik heb het ontwerp gemaakt jongens.”
• “Hmm … goed begin, maar ziet er wel een beetje kaal uit. Geef maar aan mij, dan doe ik vanmiddag nog wel wat.”
• (Dit patroon herhaalt zich, terwijl ieder groepslid weer tien nieuwe dingetjes op het ontwerp plakt. Denk aan: versieringen aan de rand, meer kleuren, nieuwe lettertypes introduceren, achtergrond veranderen, misschien zelfs wel PLAATJES op de achtergrond, want het mag er allemaal niet te kaal uitzien.)

Wat is ontwerpen eigenlijk?

Vrijwel iedereen herkent dit patroon, terwijl het een soort “anti-ontwerpen” is. Ontwerpen is namelijk niks anders dan een duidelijke structuur en hiërarchie scheppen binnen bepaalde informatie.

Als jij een poster ontwerpt voor een festival, dan heb je bepaalde informatie die je het liefste zou overbrengen (naam, artiesten, locatie), en andere informatie die niet zo belangrijk is (of helemaal niet belangrijk).

Als jij een plaatje tekent voor een prentenboek, heb je waarschijnlijk iets dat je moet laten zien (“hoofdpersoon A knuffelt hoofdpersoon B”), terwijl op de achtergrond heel veel details de boel ondersteunen (de locatie zelf, misschien andere beesten die in de achtergrond iets doen, et cetera).

Door dingen uit te vergroten, schep je vaak deze structuur. Ondanks het feit dat mensen bovenstaand “anti-ontwerp” patroon vaak hanteren, heeft vrijwel iedereen een gevoel voor wat belangrijk is. Mensen kunnen namelijk heel goed vergelijken. Het is makkelijker om te zien dat A belangrijker is dan B, dan om een absoluut cijfer op te hangen aan de belangrijkheid van A en B.

“Control the Comparison”

Dat is ook waar dat psychologische trucje van “control the comparison” vandaan komt. Als je iets wilt verkopen, bijvoorbeeld, kun je het beste zelf meerdere opties geven. Als ik mijn computerspel verkoop, kan ik misschien zeggen:

• Het basisspel: 20 euro
• Het basisspel + uitbreiding: 25 euro
• Het basisspel + uitbreiding + soundtrack: 40 euro

Mensen zien dit en slaan direct aan het vergelijken.

Vervolgens komt er in hun hoofd een winnaar uit: “pff, optie 2 is duidelijk het beste, zo’n soundtrack is écht niet 15 euro meer waard!”

En vervolgens heeft hun hoofd dus besloten dat ze optie 2 kiezen … terwijl ze in eerste instantie misschien niet eens geïnteresseerd waren in het spel.

De “absolute waarde” die ze aan het spel geven is misschien maar een 5: het is niet hun genre, het ziet er niet superleuk uit, het is meh. Maar mensen doen daar niet echt aan — ze vergelijken.

Dus, wat moet ik hiermee?

Oftewel, als je iets ontwerp, zal je meestal op gevoel weten “dit moet belangrijker” en “dit is eigenlijk helemaal niet zo belangrijk”.

En in dat geval kan je deze regel toepassen: alles kan groter.

Het eerste dat ik deed toen ik dit blog oprichtte, was het lettertype van de kopjes vergroten.

Het tweede was de “featured images” groter maken. (Wat is dat? Als ik wil, kan ik bij een artikel een plaatje toevoegen als uitgelichte afbeelding. Deze verschijnt dan automatisch bovenin én overal waar dit artikel opduikt. Ik gebruik ze niet eens heel vaak, maar toch ergerde ik me aan de kleine grootte.)

Het derde was de maximale breedte van de website verminderen. Want als de breedte minder is, worden zinnen korter, en voelt de tekst groter. (En omdat lange kolommen haast onleesbaar zijn. A5 formaat is ideaal voor ons, alles breder dan dat is een hel.)

Deze website heeft echt grote tekst, grote blokken, alles is vrij groot. Maar de verschillen tussen informatie van verschillend belang (zoals een hoofdkop en een subkop) zijn daardoor ook groot.

Kleine veranderingen, veranderingen die je snel kunt doen, maar ze maken uiteindelijk een gigantisch verschil.

Het is inmiddels zo’n automatisme van mij om te denken “alles kan groter”, dat ik soms nog wel hele domme fouten maak. Zo heb ik wel eens een website ontworpen waarbij de plaatjes zo groot waren dat ze op de mobiel maar voor een minibeetje te zien waren. Dat is inmiddels gefikst, natuurlijk.

Ook heb ik in dat pakketjesspel van hiervoor de tekst expres zo groot gemaakt, dat mijn “verhaaltjes” bij elk level niet langer konden zijn dan tien zinnen, want dan gingen ze uit het scherm.

Maar ach, fouten zijn er om van te leren. En als je iets extreem uitvergroot, leer je een stuk sneller dan wanneer je voorzichtig veranderingen toepast.

Nog wat voorbeelden

Ik heb nu vooral voorbeelden gegeven uit de grafische wereld: ontwerpen van spellen en tekstlay-out. Om dit artikel compleet te maken wil ik ook wat voorbeelden uit andere disciplines geven.

Verhalen schrijven

Ik heb dikwijls een verhaal geschreven en gedacht: “Hmm, het verhaal loopt niet echt. Is het wel interessant genoeg? Is het wel duidelijk genoeg? Willen lezers niet meer weten?”

Wat doe je dan? Nou, dit soort dingen bijvoorbeeld:

• Je voegt een proloog toe van tien pagina’s waarin je de hele voorgeschiedenis van je wereld uitlegt. Want dat doen all andere mensen, dus dat moet wel werken toch?
• Je probeert in elke zin zoveel mogelijk extra, spannende, intrigerende informatie te stoppen.
  • “Henk liep naar de deur.” Nee, dat kan echt niet, dat moet beter.
  • “Henk strompelde naar de deur, zijn gedachten bij de voet die hij verloor tijdens de oorlog in Wahala, in het jaar voordat Hilio koning werd, toen de wind waaide en de winter woest de wereld in haar greep hield, ja, zo strompelde Henk naar de deur, die hij nog had gekregen van zijn vorige vriendin, Isabella, degene die … blabalbalalablala)
• Je bedenkt een backstory voor dat ene personage dat maar één scene voorkomt, want zoals men zegt: een personage zonder achtergrond is een personage dat lezers in slaap brengt!

Al die dingen heb ik gedaan, allemaal maken ze je verhaal alleen maar slechter en slechter.

Als je verhaal niet interessant genoeg voelt, dan ligt het probleem waarschijnlijk bij het volgende: de lezer voelt zich niet emotioneel verbonden, want er staat niks op het spel.

Oftewel, je kunt …

• De obstakels uitvergroten.
• De persoonlijkheden (en bijbehorende drama/ontwikkeling) uitvergroten
• De allerspannendste delen uitvergroten (en zo de iets mindere delen wat naar de achtergrond drukken)

Ik ken mensen die een verhaal schrijven waarin het grote conflict iets heel minimaals is, iets kleins waar echt weinig mensen wakker van liggen. Denk aan: “de hoofdpersoon haalt een dikke onvoldoende voor zijn toets”

Natuurlijk, met moeite kan je alles laten werken, maar het wordt een stuk makkelijker als je het uitvergroot.

Misschien heeft die persoon problemen thuis en die ene onvoldoende zal de druppel zijn die de emmer van zijn ouders doet overlopen. Misschien is deze ene onvoldoende genoeg om het jaar niet te halen. Misschien is het een liefdesverhaal en zal de hoofdpersoon niet bij de liefde van zijn leven in de klas komen als hij dit slechte cijfer haalt. Misschien is het een fantasyverhaal waar grote, grote straffen staan op slechte cijfers halen.

Niet in elk verhaal hoeft de wereld te vergaan (liever niet zelfs), maar alles kan groter.

Muziek schrijven

Ik heb een tijdje geleden onderzoek gedaan naar waarom John Williams zo’n goede en succesvolle componist is. (Je weet wel, die van Harry Potter, Star Wars, Indiana Jones, Jaws, en zo’n beetje alle klassiekers ooit.)

Je kunt meerdere dingen aanwijzen, maar één van de belangrijkste die ik vond was deze:

John Williams gebruikt doorgaans een groter bereik voor zijn nummers/melodieën dan andere componisten

Bijna al zijn melodieën kennen ergens een grote sprong (van laag naar hoog, of andersom), of beslaan in het algemeen maar dan één octaaf. Hierdoor heeft zijn muziek een grotere impact, is het unieker, en onthoud je het beter.

Deze vondst was een doorbraak voor mij. Ik probeerde ook zulke goede muziek te schrijven, maar het lukte niet. Alles wat ik schreef klonk hetzelfde, alles wat ik schreef zou maar net een krappe voldoende krijgen van mijzelf. Toen ik het begon uit te vergroten, en veel meer noten erbij betrok, improviseerde ik al meteen dingen die interessanter waren.

De muziek van John Williams is helemaal niet complex, het is zelfs behoorlijk simpel en heeft veel herhalingen. Dus je kunt niet zeggen dat muziek beter wordt van meer complexiteit of als iemand meer kennis heeft.

Nee, veel muziek verbetert direct als je durft te denken: alles kan groter.