Wist je dat één op de 6 Nederlanders laaggeletterd is en dus moeite heeft met lezen en/of rekenen? Dat is iets om als user interface-ontwerper rekening mee te houden bij de ontwikkeling van een game UI. Zo zijn er meer facetten om de user interface van een (serious) game te verbeteren. In dit artikel willen we vijf tips met je delen om de user interface van een game te verbeteren.
Een goede game UI helpt spelers om door het spel te navigeren, de juiste informatie te vinden, uitdagingen te voltooien en beloningen vrij te spelen. Deze interface moet tot in de details kloppen. Het moet visueel aantrekkelijk zijn, maar vooral functioneel goed in elkaar zitten. In dit artikel gaan we in op vijf tips die helpen om de bespeelbaarheid en functionaliteit van een game UI te verbeteren, namelijk:
- Vorm vloeit voort uit de functie
- Wees consistent in het UI design
- De standaard is voldoende
- Toegankelijkheid is belangrijker dan ‘mooiheid’
- Houd rekening met meerdere resoluties
Vorm vloeit voort uit de functie
Een belangrijke regel bij het maken van een game UI is dat de vorm van een object voortvloeit uit de functie van het object, en niet andersom. Dit principe heet ‘form follows function’ en speelt een belangrijke rol in game design.
Het ‘form follows function’ principe wordt niet alleen bij de ontwikkeling van games toegepast. Ook autofabrikanten gebruiken het. Zo introduceerde FIAT in 1998 de FIAT Multipla: het ultieme voorbeeld van ‘form follows function’.
De FIAT Multipla won in het jaar 2000 de “Ugliest Car Award” en dat was best wel terecht. Toch wist FIAT in hetzelfde jaar ook de prijs “Best Family Car of the Year” binnen te slepen en dat is waar het om ging. FIAT wist namelijk een auto te ontwerpen met twee rijen van drie stoelen: drie voorin en drie achterin. Het ontwerp vloeide voort uit de functie van de auto: een familieauto voor zes personen die ook nog eens fijn rijdt.
Of het nu om auto’s of game interfaces gaat: zorg dat het uiterlijk voortvloeit uit de functie van het element.
Wees consistent in het UI design
De UI van een game moet consistent zijn. Denk aan de manier waarop spelers interactie hebben met het spel. Als een veelgebruikte knop eerst linksboven staat, bij het volgende level linksonder en daarna weer rechtsboven, geeft dit verwarring bij de speler.
Ook kleurgebruik en witruimtes moeten consistent zijn. Het is verstandig om een vast kleurenpalet te gebruiken met primaire en secundaire kleuren. Zorg dat hier een balans in zit van een donkere kleur en een iets lichtere kleur. Tot slot is het goed om groen in te zetten voor elementen die positieve feedback geven en rood voor waarschuwingen, meldingen en negatieve feedback.
Tip: een goede tool om een kleurenpalet te creëren vind je hier!
De standaard is voldoende
Creativiteit is een goede eigenschap, maar kan in UI-design ook tegen je werken. Zoals eerder genoemd moet het ontwerp voortvloeien uit de functionaliteit en is het belangrijk om consistent te zijn in het design. Een derde punt wat we daar aan toe willen voegen is dat je het wiel niet opnieuw uit hoeft te vinden. Een standaard icoon voor een ‘start-knop’ voldoet al snel aan de eisen en hoef je dus niet opnieuw te ontwerpen. Niet alleen kost het tijd om een nieuw icoontje te ontwerpen, ook moet je deze weer laten testen door de doelgroep en eventueel weer aanpassen.
Je kan gebruik maken van standaard iconen door bestaande design systems te gebruiken. Een ‘design system’ is een overzicht met standaard elementen voor een user interface. Het voordeel van zo’n overzicht is dat alle elementen maar één keer getest hoeven te worden bij de gebruiker en dat het door het hele development team met één klik geïmplementeerd kan worden.
Een design system hoef je niet zelf te bedenken als je ook inspiratie op kunt doen van grote bedrijven als Google, Apple en Microsoft. Nieuwsgierig? Bekijk dan dit en dit artikel!
Toegankelijkheid is belangrijker dan ‘mooiheid’
Eén van de belangrijkste onderdelen bij het ontwikkelen van een game UI is toegankelijkheid. Toegankelijkheid van een game betekent niet alleen dat het spel te spelen is op verschillende systemen. Het gaat vooral om het toegankelijk maken van het spel voor zo veel mogelijk mensen. In deze paragraaf gaan we in op leesbaarheid en witruimtes.
Zijn de teksten leesbaar?
Maar liefst één op de zes Nederlanders boven de 16 jaar oud is laaggeletterd. Dat betekent dat ze moeite hebben met lezen, schrijven en/of rekenen. Deze 2,5 miljoen Nederlanders hebben moeite met digitaliseren en dus ook met (het lezen van teksten in) games. Te kleine tekstgroottes en onduidelijke lettertypes is een veelvoorkomende klacht van gebruikers.
Er wordt door UI-designers veel geëxperimenteerd met lettertypes om ze mooi aan te laten sluiten bij de setting van een game. Toch gaat dit vaak ten koste van de leesbaarheid, terwijl er vaak een goede middenweg te vinden is. In de video hieronder wordt een goede uitleg gegeven over typografie in games en hoe kleine aanpassingen een enorm verschil kunnen maken:
Zit er genoeg witruimte tussen de elementen?
Witruimte wordt over het algemeen beschreven als de ruimte tussen twee tekstregels. Zoals je kunt zien in dit blog zit er voldoende ruimte tussen de regels om te zorgen dat jij niet verdwaald raakt in de tekst.
Om dezelfde reden zit er een volledige witregel tussen deze en de laatste alinea!
Witruimte is ook belangrijk rondom elementen in de interface van een game. Er zijn twee soorten witruimte: micro en macro. Knoppen mogen niet te dicht naast elkaar staan (micro-whitespace) en ook niet te dicht bij de rand van het scherm (macro-whitespace).
Houd rekening met meerdere resoluties
De vijfde tip die we met je willen delen klinkt logisch: houd rekening met meerdere resoluties en beeldschermverhoudingen. Dat is tegenwoordig lastig met veel verschillende apparaten en schermresoluties op mobiel, tablet en desktop. Als je zelf een afwijkende resolutie hebt, merk je al snel dat veel ontwikkelaars dit snel over het hoofd zien en dat de interface of effecten niet het hele scherm gebruiken.
Het scheelt je veel werk en tijd als je je ontwerpen regelmatig controleert tijdens de ontwikkeling: het achteraf geschikt maken van de interface voor verschillende schermen is veel, vervelend werk. Test het vaak en houd het dus goed bij.
Ook wil je graag een UI die je gemakkelijk kan onderhouden. Verschillende systemen voor verschillende platformen is daarbij niet ideaal.
Een plug-in die ons hierbij in Unity helpt is Universal Device Preview. Hiermee kun je Unity screenshots laten maken van verschillende apparaten en schermen terwijl je je interface ontwerpt.
Heb jij moeite met het onderhouden van je UI en ben je veel tijd kwijt om achteraf de interface voor verschillende schermen in te stellen? Binnenkort zullen wij een artikel plaatsen waarin we uitleggen hoe jij je Unity set-up inricht met één interface voor meerdere schermen. Wil je een bericht krijgen wanneer dit artikel online staat? Schrijf je in voor onze nieuwsbrief!
[sc name=”newsletter-signup-NL”]
