HOE GEBRUIKEN WE DESIGN PATTERNS ALS ONTWERPER VAN MOBILE GAMES?
LIANNE BLONDEAU ONDERZOEKSVERSLAG SEMINAR UXD
INHOUDSOPGAVE INLEIDING 3 WAT ZIJN DESIGN PATTERNS?
4
GESCHIEDENIS
5
VOORBEELDEN
6
7
PATTERN LIBRARIES
DESIGN PATTERNS IN MOBILE GAMES
9
VOORBEELDEN
10
11
WAT VALT OP
CONCLUSIE 12 REFLECTIE 13 LITERATUUR 14
2
INLEIDING Mobile games zijn sinds een paar jaar niet meer weg te denken uit ons dagelijks leven. We spelen talloze spellen op onze smartphones zoals Candy Crush, Angry Birds, Wordfeud en 2048 en nog dagelijks breiden we die collectie uit met weer een nieuw spel. Zelf speel ik ook regelmatig games op mijn smartphone en sinds ik bij mijn specialisatie user experience design heb geleerd over het veelvuldige gebruik van patterns in websites en apps ben ik hier heel anders naar gaan kijken. Ik heb mezelf de vraag gesteld hoe het gebruik van patterns verschilt bij verschillende media en hoe het zit met mobile games. Want waar het bij informatieve en sociale applicaties voornamelijk draait om de inhoud, staat bij mobile games de beleving van de gebruiker centraal. Ik vraag me af welke patterns daarbij horen en wat dat betekent voor de gebruikerservaring. Om die reden heb ik de volgende onderzoeksvraag geformuleerd: “Hoe gebruiken we design patterns als ontwerper van mobile games?“. Ik hoop hiermee meer inzicht te krijgen in de user interfaces van mobile games en de toepassing van design patterns daarbij.
3
WAT ZIJN DESIGN PATTERNS? Design patterns zijn oplossingen voor terugkerende ontwerpproblemen. Of zoals James Maioriello het omschrijft: “Design patterns are commonly defined as time-tested solutions to recurring design problems”1. Bij het ontwerpen van interfaces kom je vaak dezelfde problemen tegen en de oplossingen hiervoor zijn dan meestal ook hetzelfde. Om even een voorbeeld te noemen: je hebt te veel menuknoppen om binnen de beschikbare ruimte te plaatsen. Een oplossing hiervoor kan zijn om gebruik te maken van submenu’s. Vaak zijn er meerdere mogelijkheden om een probleem op te lossen, dan hangt het af van de context welke oplossing je kiest. Het is als ontwerper erg belangrijk om deze design patterns te respecteren. Iedereen is bekend met patterns (bewust of onbewust) en dat maakt het voor de gebruiker makkelijk om te begrijpen welke handelingen uitgevoerd moeten worden. Iedereen weet bijvoorbeeld hoe een deurklink werkt. Datzelfde geldt voor photo-galleries op een smartphone of de scrollbalk op een website. Zodra je van deze patterns afwijkt zal dat bij de gebruiker voor verwarring zorgen. Dit kan ertoe leiden dat de gebruiker je product niet snapt en niet meer wilt gebruiken. Dat wil overigens niet zeggen dat je alleen maar patterns moet gebruiken en je creativiteit niet meer kwijt kan, het is de kunst om de juiste blans te vinden tussen originaliteit en herkenbaarheid door middel van patterns. Maar wanneer wordt een ontwerpoplossing een pattern? In principe wordt de regel gehandhaafd dat een succesvol pattern zich in minimaal drie eerdere projecten of situaties bewezen moet hebben2. Zo ben je er zeker van dat het daadwerkelijk een oplossing is voor het probleem en dat het geen toeval was. Hoe vaker een pattern wordt bewezen, hoe beter uiteraard.
1 2
(2002, “Design Patterns”, para. 2) (Geert Bos, z.j.) 4
WAT ZIJN DESIGN PATTERNS? VOORBEELDEN Er zijn talloze design patterns vastgelegd in verschillende naslagwerken zoals Designing Interfaces van Jenifer Tidwell en Mobile Design Pattern Gallery van Theresa Neil (beiden uitgegeven door O’Reilly). Hierin zijn hele collecties van patterns te vinden die je als ontwerper kan raadplegen. Zo kan je snel een oplossing vinden voor je probleem of simpelweg inspiratie opdoen voor een nieuw ontwerp. Hieronder zie je een paar voorbeelden van zulke patterns.
Accordion
Accordions kunnen op verschillende manieren gebruikt worden. Zowel voor een simpel menu als voor een hele pagina. Je kan het ook horizontaal in plaats van verticaal plaatsen zoals hiernaast.
5
Password Strength Meter De Password Strength Meter is bedacht omdat bedrijven wilden dat hun gebruikers een veilig wachtwoord zouden gebruiken. De oplossing was om direct feedback te geven over hoe sterk een wachtwoord is. Zo kan je het meteen aanpassen als deze niet veilig genoeg is.
Zoals je kunt zien hoeft het gebruik van patterns niet te betekenen dat je geen originele ontwerpen meer kunt maken. Het derde voorbeeld van de Accordion is bijvoobeeld op een andere manier toegepast dan gebruikelijk en daardoor origineel, maar toch herkenbaar. Bij de Password Strength Meter zie je dat je een pattern zo simpel of uitgebreid kan maken als je wilt door het gebruik van kleur en tips om het wachtwoord te verbeteren. Dit pattern is zeer succesvol en wordt tegenwoordig dan ook op bijna iedere website gebruikt waarvoor je een account met wachtwoord moet aanmaken.
Module Tabs In de apps van Facebook en 9292 zie je dat ze dezelfde manier gebruiken om hun app op te delen in verschillende pagina’s/categoriën. Deze Module Tabs helpen om informatie te groeperen. Dit kan echter alleen wanneer een gebruiker de verschillende pagina’s niet tegelijkertijd nodig heeft.
6
WAT ZIJN DESIGN PATTERNS? PATTERN LIBRARIES Patterns maken gebruik van een specifieke structuur om een probleem en de daarbij horende oplossing te omschrijven. Het verschilt per library hoe uitgebreid de patterns worden omschreven, maar het bevat bijna altijd de volgende 6 aspecten: 1. Naam 2. Wat is het? 3. Wanneer komt het van pas? 4. Waarom is dit de juiste oplossing? 5. Hoe kan je het toepassen? 6. Voorbeelden Omschrijving van een pattern Dit voorbeeld komt uit het boek Designing Interfaces (2e editie) door Jenifer Tidwell. Je ziet hier duidelijk de 6 aspecten uitgelegd.
Door een vast stramien zoals dit aan te houden blijft de inhoud overzichtelijk en kan je als ontwerper makkelijk verschillende patterns met elkaar vergelijken. Doordat patterns vaak ook door andere pattern libraries worden overgenomen ontstaan er vaste benamingen voor patterns waardoor het tevens makkelijk is om ook via andere kanalen meer informatie of voorbeelden erover te vinden.
7
WAT ZIJN DESIGN PATTERNS? GESCHIEDENIS Veelgebruikte oplossingen voor terugkerende problemen bestaan natuurlijk al heel lang. Echter was het Christopher Alexander die in 1977 voor het eerst over patterns in zijn boek A Pattern Language. Christopher Alexander schreef over zijn ervaringen als civiel ingenieur en besteedde daarbij aandacht aan ontwerpproblemen die hij tegenkwam. Het viel hem op dat bepaalde constructies die keer op keer gebruikt werden leidden tot het gewenste effect. Hij documenteerde en publiceerde zijn kennis en ervaring zodat anderen hier hun voordeel mee konden doen. Rond 1987 begonnen software ontwikkelaars deze manier van documenteren langzaam over te nemen als leidraad voor beginnende ontwikkelaars. Dit inspireerde ook anderen om over patterns te schrijven wat in 1995 leidde tot het verschijnen van het boek Design Patterns: Elements of Reusable Object-Oriented Software door Eric Gamma, Richard Helm, Ralph Johnson, and John Vlissides, onder de naam Gang of Four. Dit boek werd gezien als de doorbraak van design patterns binnen de software community en heeft een grote invloed gehad op de evolutie van design patterns. Het boek beschreef 23 design patterns, gebaseerd op de ervaringen van de auteurs. Deze patterns waren uitgekozen omdat ze oplossingen beschreven voor veel voorkomende problemen in de software ontwikkeling. Sindsdien zijn er vele patterns bijgekomen en is het gebruik van patterns ook in andere sectoren overgevloeid, waaronder interface design.
8
DESIGN PATTERNS IN MOBILE GAMES In mobile games zie je ook design patterns terug, al is dit vaak minder opvallend dan bij apps of websites. Dit komt doordat games niet gericht zijn op het informeren van de gebruiker, maar op het amuseren. Uitdaging speelt hierbij een grote rol, vandaar dat er weinig tot geen patterns terug te vinden zijn in de gameplay zelf. Want is een spel nog leuk als er overal dezelfde patronen gebruikt worden waarmee je het in een keer uit kan spelen? Nee. De uitdaging is dan weg. Veel mobile games geven in het begin dan ook weinig informatie weg en laten hem door middel van trial and error zelf leren hoe de besturing werkt en wat wel of juist niet punten oplevert. Bij computergames zie je juist vaak dat er een uitgebreide tutorial wordt gegeven aan het begin van een spel, maar het gevaar daarvan is dat je na een tijdje al weer bent vergeten wat je nodig hebt. Het spel Portal is tot nu toe het meest geloofd om zijn gebruikersvriendelijke gameplay die ook probeert de gebruiker zoveel mogelijk zelf te laten experimenteren in het begin. Wat we echter wel zien in mobile games is dat ze niet enkel bestaan uit het spel zelf. Er zitten vaak nog een aantal extra schermen of elementen omheen die je scores bijhouden, je instellingen regelen of simpelweg aangeven dat je spel geladen wordt. Hier zien we juist wel weer veel design patterns terug. Wat we hieruit kunnen concluderen is dat patterns ook bij mobile games erg goed werken en dus ook veelvuldig gebruikt worden om informatie op een duidelijke manier weer te geven. Het grote verschil is dat bij apps de informatie en daarmee de patterns centraal staan terwijl dit bij mobile games dus niet het geval is.
9
DESIGN PATTERNS IN MOBILE GAMES VOORBEELDEN Om een beter beeld te krijgen van verschillende patterns in games en om ze beter te kunnen vergelijken met de patterns die in apps of websites worden gebruikt heb ik een aantal voorbeelden verzameld en toegelicht. Opstarten
Het opstartscherm bevat meestal een fraaie afbeelding van het spel. Het is ontworpen als visuele inleiding, maar wordt ook gebruikt om aan de gebruiker te laten zien dat het spel wordt opgestart. Als dit pattern niet wordt gebruikt kan de gebruiker denken dat het niet werkt.
Navigatiemenu
Het navigatiemenu (ook wel hoofdmenu genoemd) is de plek vanwaar je als speler het spel kan starten of je scores en instellingen kan bekijken en bewerken, afhankelijk van de complexiteit van het spel.
10
Laadscherm
Het laadscherm heeft dezelfde functionaliteit als de loading indicator die ook veel in andere apps wordt gebruikt. Het verschil is dat bij mobile games hier vaker een heel scherm aan wordt gewijd. Dit geeft ontwerpers de kans om zijn creativiteit los te laten zonder rekening te houden met de technische beperkingen in het spel zelf.
Instellingen Ook de instellingen zie je veel terug in andere apps, maar ook bij desktop programma’s. Deze wordt ook wel de Settings Editor genoemd. Hier kun je een aantal instellingen aanpassen die het spelen van de game prettiger maken. Bijvoorbeeld je gebruikersnaam aanpassen, de muziek aan of uit zetten of de speelmodus aanpassen.
11
Pauze
Het pauze-scherm is overgenomen van PC games. De pauze-functie is belangrijk omdat de gebruiker een level niet altijd in een keer uit kan spelen. Bij sommige games is deze functie geblokkeerd omdat dat het spel soms te makkelijk maakt. Het pauzescherm heeft vaak ook een menu waarmee je bijvoorbeeld naar een ander level, het hoofdmenu of de instellingen kan gaan.
Level kiezen
Veel games zijn tegenwoordig enkel nog gebaseerd op highscores (zoals Flappy Bird). Games die wel levels hebben geven deze vaak in een overzicht weer zoals bij deze voorbeelden te zien is. Zo kan de gebruiker zijn voortgang bijhouden of een ander level kiezen om te spelen.
12
Besturing
Bij de besturing van games wordt vaak nog teruggegrepen naar bekende elementen voor de gebruiker. Linksboven zie je naast het geweer ook andere hulpmiddelen zoals een vizier in beeld. Hierdoor ziet de gebruiker meteen wat de functie is. Bij het voorbeeld ernaast zie je hetzelfde principe, maar dan met een gashendel. Echter zijn de makers van het voetbalspel uitgegaan van de knoppen die ook op controllers bij consolegames gebruikt worden. Bij het voorbeeld links zijn geen besturingselementen te vinden. De gebruiker moet zelf uitzoeken hoe de besturing werkt.
13
DESIGN PATTERNS IN MOBILE GAMES WAT VALT OP Op het gebied van design is het eerste wat opvalt de speelse vormgeving van mobile games en de strakke vormgeving bij andere (informatieve) apps die hiervoor te zien waren. Dit heeft verschillende oorzaken. Allereerst is de doelgroep verschillend. Mensen die games spelen zijn op zoek naar een leuke uitdaging en zitten dus niet te wachten op een zakelijk design. Het ontwerp moet tot de verbeelding spreken. Je wilt als ontwerper je gebruikers stimuleren het spel te spelen, dus afhankelijk van het type spel en de bijbehorende sfeer stel je het design daar ook op af. Een first person shooter heeft vaak een realistischere interface omdat de gebruikers zich dan beter kunnen verplaatsen in het karakter en het verhaal. Terwijl een spel als Angry Birds verre van realistisch is, dus is deze ook niet zo vormgegeven, maar juist erg speels. Daarnaast heb je te maken met andere behoeften en verwachtingen. Bij mobile games heb je vaak te maken met korte levels omdat de aandachtspanne van de gebruikers ook relatief kort is vergeleken met PC games. Vaak worden mobile games onderweg gespeeld, dus heeft het weinig zin om lange levels te maken, die spelen ze dan veel te langzaam uit. Het is daarom ook niet erg om tutorials achterwege te laten. De eerste keer dat iemand het speelt komt hij er snel genoeg achter hoe de besturing werkt en waar hij op moet letten. Dit in tegenstelling tot informatieve apps, waarbij alle informatie duidelijk vindbaar en herkenbaar moet zijn. Als een gebruiker hier iets niet kan vinden zal hij de app minder snel weer gebruiken. Tot slot is te zien dat in de gameplay en besturing zelf amper tot geen patterns worden gebruikt. Zoals eerder ook al gezegd werd is dit bij mobile games niet altijd nodig. De game moet niet voorspelbaar worden door standaard patterns. Bovendien leert de gebruiker snel genoeg hoe de besturing werkt. Een game is niet bedoeld om te informeren, maar om te amuseren. Daarintegen zijn alle menu’s om de game heen zijn wel bedoeld om te informeren en dat zie je direct terug in het gebruik van patterns. Daar waar de gebruiker informatie wil vinden over bijvoorbeeld zijn highscores of de instellingen van een spel zie je direct dat daar wel van patterns gebruik wordt gemaakt. We kunnen hieruit concluderen dat patterns erg nuttig zijn om informatie overzichtelijk weer te geven, maar dat je je er niet aan vast hoeft te houden als ontwerper zijnde wanneer het niet om de informatievoorziening gaat.
14
CONCLUSIE Als ontwerper van mobile games is het allereerst van belang dat je je goed verdiept in je doelgroep en kijkt naar soortelijke spellen ter inspiratie. In mobile games zijn niet zoveel patterns terug te vinden als op websites en in apps, maar ze zijn er wel! Vaak overgenomen van websites en apps, maar aangepast naar de context van games. Ik ben tot de conclusie gekomen dat er 5 belangrijke regels zijn waar je als ontwerper van mobile games rekening mee moet houden. 1.
Besteed extra veel aandacht aan je gebruikers en de gebruikerscontext Meer dan bij informatieve apps ben je hier afhankelijk van de gebruikerservaring. Deze hangt nauw samen met de context van de gebruiker. Besteeds daarom extra veel aandacht aan je doelgroep en de context waarin zij zich bevinden.
2. Denk goed na over de besturing Is het nodig om de gebruiker een tutorial te geven of kan deze in de eerste levels zelf uitzoeken hoe de besturing werkt? Hier geldt: hoe minder extra’s, hoe duidelijker de gameplay. 3. Pas in de extra features van de game patterns toe Informatie als highscores, opties en levels moeten duidelijk en makkelijk te vinden zijn voor de gebruiker. Maak daarom goed gebruik van patterns bij deze schermen. 4. Visueel en auditief aantrekkelijk Met de vormgeving van je spel verzorg je de ervaring van de gebruiker. Besteed veel aandacht aan mooie visualisaties. Hoewel ik het in mijn onderzoek niet specifiek behandeld heb is het wel degelijk van belang om ook te investeren in muziek en geluidseffecten. Deze versterken de ervaring en maakt de game compleet. 5. Houd het simpel! De aandachtsspanne bij gebruikers van mobile games is zeer beperkt. Het is vaak een activiteit dat even tussendoor gedaan wordt. Probeer de hoeveelheid informatie en functies daarom te beperken, anders haakt de gebruiker af.
15
LITERATUUR Boeken Neil, T. (2012). Mobile Design Pattern Gallery Tidwell, J. (2011). Designing Interfaces 2nd Edition PDF’s Astahovs, I. (2012). Use of Design Patterns for Mobile Game Development. Geraadpleegd op 29 mei van http://umu.diva-portal.org/smash/get/diva2:546698/FULLTEXT01.pdf Björk, S., Davidsson, O. & Peitz, J. Game Design Patterns for Mobile Games. Geraadpleegd op 29 mei van http://web.science.mq.edu.au/~isvr/Documents/pdf%20files/game-master/Game_ Design_Patterns_for_Mobile_Games.pdf Websites 1. Design Patterns, para. 2. Geraadpleegd op 14 mei http://www.developer.com/design/article.php/1474561/What-Are-Design-Patterns-andDo-I-Need-Them.htm 2. Bos, G. Computerwoorden. Geraadpleegd op 1 juni http://www.computerwoorden.nl/direct--15627--Pattern.htm UI Patterns. Geraadpleegd op 7 mei http://ui-patterns.com/patterns UX Patterns. Geraadpleegd op 7 mei http://uxpatterns.org/affordances/mobile-navigation-menus/ Mobile Patterns. Geraadpleegd op 7 mei http://www.mobile-patterns.com/ Game Patterns. Geraadpleegd op 7 mei http://www.game-patterns.com/#!/ Pattern Tab. Geraadpleegd op 12 mei http://patterntap.com/ Mobile Tuxedo. Geraadpleegd op 12 mei http://www.mobiletuxedo.com/category/ui-patterns/ UX Movement. Geraadpleegd op 12 mei http://uxmovement.com/resources/4-best-design-pattern-libraries/
16
Mobile Game Patterns. Geraadpleegd op 12 mei http://mobilegamepatterns.com/ Mauro New Media. Geraadpleegd op 12 mei http://www.mauronewmedia.com/blog/why-angry-birds-is-so-successful-a-cognitiveteardown-of-the-user-experience/ Yahoo Developer. Geraadpleegd op 14 mei https://developer.yahoo.com/ypatterns/everything.html Android Patterns. Geraadpleegd op 14 mei http://www.androidpatterns.com/ Games UI. Geraadpleegd op 15 mei http://gamesui.com/ Wired Insights. Geraadpleegd op 15 mei http://insights.wired.com/profiles/blogs/the-anatomy-of-a-successful-mobilegame#axzz33hs8OWRZ That Game’s UX. Geraadpleegd op 16 mei http://thatgamesux.com/ Greatpreneurs. Geraadpleegd op 16 mei http://greatpreneurs.com/keys-successful-mobile-game/ Design Patterns Book. Geraadpleegd op 22 mei http://c2.com/cgi/wiki?DesignPatternsBook Zee 3. Geraadpleegd op 12 juni http://www.zee-3.com/pickfordbros/archive/loadingscreens.php
17
