Gamifikace z pohledu designu a tvorba online výukového průvodce

Transkript

Masarykova univerzita
Fakulta informatiky
Gamifikace z pohledu designu a vytvoření
online výukového průvodce
Diplomová práce
Monika Příkopová
Brno, jaro 2016
Prohlášení
Prohlašuji, že tato práce je mým původním autorským dílem, které jsem vypracovala samostatně.
Všechny zdroje, prameny a literaturu, které jsem při vypracování používala nebo z nich čerpala, v práci
řádně cituji s uvedením úplného odkazu na příslušný zdroj.
Vedoucí práce: Mgr.art. Katarína Czikorová, ArtD.
Poděkování
Ráda bych poděkovala zejména Mgr.art. Kataríně Czikorové, ArtD za vstřícnou pomoc a veškeré rady
a připomínky během celého psaní mé diplomové práce. Také bych chtěla poděkovat MgA. Heleně
Lukášové, ArtD za důvěru a počáteční konzultaci.
Shrnutí
V práci popisuji obecnou definici gamifikace ve webovém prostředí s důrazem na grafické ztvárnění
a UX. Zahrnuji popis jednotlivých elementů a vyzdvihuji jejich vzájemné souvislosti. Stanovuji proces
návrhu gamifikace a porovnávám využití této metody v ČR a ve světě. Součástí práce je vytvoření
online vzdělávacího průvodce gamifikací.
Abstract
This diploma thesis deals with gamification in a web environment with focus on graphic design and
UX, and compare its application in the Czech Republic and abroad. It includes description of individual
elements and highlights their mutual relations. i determine the design process of gamification. The
thesis includes a creation of an online educational guide of gamification.
Klíčová slova
gamifikace, webové a mobilní aplikace, estetika, UX, proces návrhu
Key words
gamification, web and mobile apps, aesthetics, UX, design process
Obsah
1 Úvod 2 Gamifikace ve webovém prostředí 1
2
2.1 Co je gamifikace 2
2.2 Co není gamifikace 3
2.3 Růst gamifikace a potenciál do budoucna 3
2.4 Použití gamifikace v různých kontextech 4
2.4.1 V kontextu učení a vzdělávání 4
2.4.2 Jako marketingový nástroj 4
2.4.3 Pro podporu pracovního nasazení 4
3 Elementy gamifikace 5
3.1 Mechaniky 5
3.2 Dynamiky 9
3.3 Zpětná vazba 10
3.4 Psychologie a motivace 12
3.4.1 Typy hráčů 13
3.5 Estetika 14
3.5.1 Principy grafického návrhu 15
3.5.2 Obecné principy 16
3.5.3 Typografické principy 19
3.5.4 Principy z pohledu UX 21
4 Proces návrhu gamifikace 4.1 Frameworky a jejich použití v procesu návrhu 24
24
4.1.1 Octalysis 24
4.2 Porozumění problému a kontextu 25
4.2.1 Definice problému 25
4.2.2 Získání požadavků na systém 26
4.2.3 Vizuální pomůcky a syntéza informací 27
4.2.4 Porozumění cílových uživatelů 29
4.3 Stanovení cílů 30
4.3.1 Stanovení základních elementů 30
4.4 Stanovení mechanik 31
4.5 Porozumění UX v procesu návrhu 31
4.6 Porozumění grafického návrhu aplikace 33
4.6.1 Gamifikační estetické kolo 33
4.7 Testování aplikace a prototyping 5 Gamifikace v ČR a ve světě 5.1 Gamifikace v ČR 34
36
37
5.1.1 Kód Salomon 37
5.1.2 Online bankovnictví mBank 37
5.1.3 Žatecký stroj času 38
5.2 Gamifikace ve světě 39
5.2.1 Foldit 39
5.2.2 Foodzy 40
5.2.3 EpicWin 40
5.2.4 Duolingo 40
6 Tvorba vlastní gamifikované aplikace 41
6.1 Porozumění problému a stanovení cíle 41
6.2 Získání požadavků na systém 41
6.3 Porozumění cílových uživatelů 42
6.4 Moodboard 42
6.5 Stanovení mechanik 43
6.5.1 Mechanika svět 43
6.5.2 Mechanika postup 43
6.5.3 Mechanika avatar 44
6.5.4 Mechanika oblast 44
6.5.5 Mechanika odznak 45
6.6 Implementace aplikace 46
6.6.1 OnePageScroll 46
6.6.2 CSS3 Flexible Box 48
6.6.3 Animace 48
6.6.4 Veriod 49
7 Závěr 8 Použitá literatura 9 Seznam obrázků 10 Přílohy 51
52
55
56
1 Úvod
Používané technologie ve webových a mobilních aplikacích mají tendenci rychle se měnit
a vyvíjet. Každý, kdo pracuje v informačních technologiích, by měl sledovat vývoj používaných metod pro vývoj aplikací, ať už z pohledu samotného vývoje či grafického návrhu. Existují prvky, které
se využívají krátkodobě, a pak prvky, které mají takový potenciál, že se s nimi počítá do dlouhodobé
budoucnosti. Mezi takové se řadí využití gamifikace. Že se jedná o důležité odvětví značí i to, že toto
téma zasahuje nejenom do informačních technologií, ale také do marketingu, vzdělávání a psychologie. Právě tento potenciál je ale i slabým místem, jelikož využití gamifikace může mít kladný, ale
i záporný následek, a to z důvodu špatného porozumění této metody a z nesprávného pochopení, jak
gamifikaci nasadit do samotného systému.
Téma diplomové práce se zakládá právě na tomto faktu, že gamifikace, přes svůj velký potenciál, má stále velmi malé využití (zejména v ČR) a častokrát její nasazení nemá takový výsledek, jaký
by měl být. Vše plyne z nedostatečného porozumění, co vůbec gamifikace je a jak ji správně využít.
Při návrhu musíme zvážit více oborů, které ovlivňují celkové návrh gamifikace. Měli bychom zahrnout nejenom definici jednotlivých mechanik a jejich nasazení do systému, ale také psychologii, teorii
her, a v neposlední řadě estetiku, která hraje v procesu návrhu velmi důležitou roli. Vzhledem k velmi
obsáhlé problematice je tato práce zaměřena právě na estetiku a vizuální předání informací. Zahrnuje
nejen pohled čistě z estetického hlediska, ale také s důrazem na UX a použitelnost. Právě tato kombinace totiž může vytvořit takový systém, který naplno využije svůj potenciál pro dlouhodobé používání.
Bez zaměření na estetickou stránku gamifikace by totiž žádná aplikace neměla naději na dlouhodobější
úspěch, jelikož právě vizuální charakter „prodává“ danou aplikaci uživateli.
V teoretické části se zabývám obecnou definicí gamifikace. Stanovuji základní mechaniky
a elementy a vysvětluji jejich vzájemné propojení. Popisuji pracovní postup, jak začít se samotným
návrhem gamifikace, a to s ohledem na grafický návrh aplikace a celkovou estetiku.
Praktická část obsahuje vytvoření online průvodce, který funguje jako návod pro návrh
gamifikace. Důraz je kladen nejen na vizuální stránku, ale také na přínosnost a celistvost prezentovaných informací.
Cílem této práce je stanovení obecného postupu návrhu gamifikace ve webovém prostředí
a vytvoření online aplikace, která bude mít vzdělávací charakter.
1
2 Gamifikace ve webovém prostředí
Při návrhu webových stránek či aplikací je důležité neustále sledovat vývoj a směr, jakým se
mění implementace a design v průběhu let. Pokud chceme tvořit něco, co bude použitelné a moderní
i za několik let, musíme do našeho návrhu zapojit nejen určitou flexibilitu, ale snažit se vidět i do budoucnosti. Nesoustředit se tedy pouze na to, co se používá teď, ale také, co by se mohlo používat za
pár let. Jednou z těchto nadějných metod, jejíž potenciál během několika let stále roste, je gamifikace.
2.1 Co je gamifikace
Pro pojem gamifikace lze použít různé definice a to v závislosti na tom, v jakém oboru je
gamifikace zapojena. Všeobecná definice zní, že se jedná o „široce využívaný trend používání herních mechanik v neherním prostředí jako jsou inovace, marketing, školení, výkonnost zaměstnanců,
zdravotní a sociální změny [1].“ Z marketingového pohledu je gamifikace definována jako „proces
používání herního myšlení a mechanik, které slouží k zapojení publika (cílové skupiny) a k řešení
problému [1]. Dle knihy Community Building on the Web od A. Jo Kima, který se zabývá designem
společenských her, je gamifikace definována jako „používání herních technik pro větší aktivitu uživatelů a větší zapojení a zábavu [2].“
Gamifikaci v online prostředí můžeme vysvětlit následovně.
„Gamifikace ve webovém prostředí používá herní mechaniky pro
zapojení uživatele do procesu a to zábavnou formou, která motivuje
uživatele k předem definovaným interakcím v rámci systému.“
Pokud to tedy shrneme, gamifikace je založená na herním myšlení a primární cíl je zapojení
uživatele do procesu. K tomu využíváme různé mechaniky (viz Mechaniky), které jsou založené na
motivaci, a to vše je prezentováno uživateli zábavnou formou s důrazem na estetický zážitek.
2
GAMIFIKACE VE WEBOVÉM PROSTŘEDÍ
2.2 Co není gamifikace
Pro lepší pochopení problému „co je gamifikace“, je vhodné vyzdvihnout, co naopak
gamifikace není. Pokud vyhledáme definici gamifikace na internetu, zpravidla se nám zobrazí definice
následujícího typu: „Gamifikace je metodika uplatňování technik herního designu, myšlení a principů
do neherních oblastí.“ Z toho vyplývá, že pokud použijeme základní herní techniky typu herní postava – body – úrovně – badge, aplikovali jsme gamifikaci do systému [1]. Gamifikace ovšem takto
jednoduše nefunguje. Pouhé nasazení těchto technik nezaručuje zároveň jejich používání a už vůbec
nezaručuje zvýšení tržeb či zlepšení použitelnosti. Analytik Gartneru Brian Burke napsal, že „gamifikace je často volně definovaná, což vede k marketingovému zmatení, k přehnaným očekáváním
a implementačním pochybením“ [3].
2.3 Růst gamifikace a potenciál do budoucna
Trend gamifikace roste bez žádných známek zpomalení. Elementy z her si získávají své místo
ve školství i marketingu skrz avatary, žebříčky a odznaky. Růst zapojení gamifikace není překvapivý, když
vezmeme v potaz, že herní průmysl je jedním z nejvíce rozvíjejících se průmyslů. Dle Entertainment
Software Association se uvádí, že v roce 2015 byl průměrný věk hráčů videoher 35 let a z nich 27% je
starších 50 let. Zároveň se uvádí, že 56% hráčů jsou muži a 44% jsou ženy1. Je tedy vidět, že herní techniky oslovují celé spektrum lidí a hry/gamifikaci lze zaměřit jak na mladší hráče/uživatele2, tak na starší.
Herní průmysl se každým rokem zdokonaluje a veškeré příbuzné odvětví roste s ním, ať už se jedná
o vývoj HW či právě gamifikaci. Stejně jako se vyvíjejí hry a z klasických 2D bitmapových arkád se staly
3D virtuální RPG, lze očekávat, že i gamifikované systému půjdou stále dopředu.
Téma gamifikace je již tak rozšířené, že existují konference na toto téma, kde lze získat zajímavé informace o používaných technologiích a statistikách. Dle konference v New Yorku s názvem
„Gamifying the Mobile Experience“ se předpokládá, že globální trh pro gamifikaci dosáhne v roce
2018 5,5 miliard dolarů, což představuje roční růst o 67% od roku 2013 do roku 2018 [5]. Zda se tato
předpověď naplní je jiná otázka, důležité je si ale uvědomit, jak daleko sahá tato technologie a jaký má
důležitý dopad nejen na průmysl, ale i na celou společnost.
1)Statistiky pochází od organizace ESA (=entertainment software association) dle publikace Essential facts about the computer and video game industry z roku 2015.
2) V této diplomové práci je použití slova „hráč“ ve stejném významu jako slovo „uživatel“. Tedy člověk, který používá (gamifikovanou) aplikaci
3
GAMIFIKACE VE WEBOVÉM PROSTŘEDÍ
2.4 Použití gamifikace v různých kontextech
Gamifikaci lze, jak již bylo řečeno, použít u různých aktivit, ať už digitálních či nikoliv. Její
použití má ale v určitých oborech větší uplatnění, jelikož její výhody lze nejlépe zužitkovat právě
v těchto oborech. Nejlepší uplatnění gamifikace je v následujících kontextech.
2.4.1 V kontextu učení a vzdělávání
Vzdělávání se týká každého člověka. Zahrnuje, jak se lidé učí jak explicitní materiály (fakta,
data, vzorce), tak implicitní materiál (kritické myšlení, postoje, rozsudky). Vzdělávání je možno poskytnout dvěma způsoby – instruktorem (učitelem) nebo na počítači (digitálně) [6]. Gamifikace může
pracovat s oběma metodami. V kurzech vedených počítačem hry poskytují tolik potřebnou interaktivitu mezi účastníky a učitelem. Pomocí gamifikace můžeme výrazně ovlivnit motivaci k naučení se
požadované látky a k variabilnější zpětné vazbě, která nemusí být v kontextu známek. Pro určitý druh
vzdělávání je použití gamifikace velmi přínosné, například při výuce cizích jazyků.
2.4.2 Jako marketingový nástroj
Stále větší počet společností zjišťuje, že lze použít gamifikaci jako pomoc při řešení jejich
marketingových problémů. S gamifikací roste emocionální spojení se se značkou a to vede k lepší
věrohodnosti značky. Gamifikace pomáhá motivovat a podněcovat chování, které je pro značku prospěšné. To může zvýšit uživatelský komfort a loajalitu ke značce. Uplatnění mechanik poskytuje větší
zapojení do hloubky než jiné formy digitální reklamy. Odměny pomáhají pozvednout status uživatele,
aby se cítili lepší a důležitější [7].
2.4.3 Pro podporu pracovního nasazení
Motivace zaměstnanců k podání lepších výkonů je častokrát pro zaměstnavatele velký úkol.
Práce, stejně jako učení, dokáže být velmi ubíjející až demotivující. V pracovním prostředí se tedy
využití gamifikovaných elementů zdá jako ideální prostředí. Využívání motivačních programů může
být cíleno jak na stávající změstnance, tak i na nábor nových zaměstnanců. Použití je velmi variabilní.
4
3 Elementy gamifikace
V této části se zabývám jednotlivými elementy gamifikace, kde estetika tvoří podstatnou část.
Mezi základní element patří „mechaniky“, které se často považují za základní (a jediný) kámen gamifikace. Toto označení je ovšem chybné, jelikož samotné mechaniky bez ostatních elementů nejsou sami
o sobě pro aplikaci přínosné. Pouze všech následujících 5 elementů tvoří celkovou gamifikaci3.
Tyto elementy jsou:
1)
mechaniky
2)
dynamika
3)
zpětná vazba
4)
psychologie a motivace
5)
estetika
3.1 Mechaniky
Mechaniky se definují jako jednoduché akce nebo pravidla s přesně definovanými výsledky.
Jsou to klasické akce, kontrolní mechanismy a procesy, které jsou používány ke gamifikaci aktivit.
Pravidla limitují tyto akce a vytvářejí tlak, čímž tvoří herní mechanismy [8].
Pokud chceme vybudovat komplexní aplikaci založenou na gamifikaci, neměli bychom se
omezovat pouze na základní mechaniky. Čím komplexnější a propracovanější systém navrhneme, tím
spíše máme zaručený úspěch, a to nejen krátkodobý, ale dlouhodobý, který je poháněný vnitřní motivací uživatele.
Základní mechaniky jsou:
1)
Svět, kde se celý příběh odehrává. Je to první věc, kterou si musíme stanovit, jelikož od toho
se odvíjí vše ostatní. Svět určuje kontext, ve kterém jsou stanoveny a použity pravidla, výzvy
a ostatní komponenty.
2)
Oblast, tedy různé části „světa“, kde se hráči můžou vyskytovat v rámci systému. Může
to být například chatovací místnost nebo profil s avatarem. Tyto oblasti musí být užitečné
a atraktivní, jinak v systému nemají význam.
3)Kategorizace jednotlivých elementů není doposud jednotná a vládne v nich velký zmatek. Různé publikace a zdroje používají různé kategorie,
proto jsem v rámci této diplomové práce zvolila vlastní členění.
5
ELEMENTY GAMIFIKACE
3)
Avatar znázorňuje hráče a poskytuje ztotožnění s herní postavou a herním prostředím. Jednou
z možností, jak personifikovat aplikaci, je právě použití avatarů.
4)
Customizace neboli přizpůsobení profilu. Typickým prvkem je využití avatara. Jedná se ale
také o co největší přizpůsobení obsahu uživateli, aby došlo ke ztotožnění a vyjádření sama
sebe. Je nutné poskytnout pro hráče určitou variabilitu.
5)
Úrovně určují, v jaké „části“ systému se hráč právě nachází. Pokud něčemu věnujeme určitý
čas, je přirozené, že se chceme někam posouvat a zlepšovat se. Pomocí úrovní se můžeme
v aplikaci posouvat dál a nenudit se. U této mechaniky je velmi důležité, abychom si určili
frekvenci „level up“, tedy podmínky pro postup do další úrovně a stanovení, zda je počet
úrovní konečný či nikoliv [9].
6)
Postup (pokrok), tedy informování hráčů o jejich postupu a s tím související zpětná vazba.
Jedná se o mechaniku, která zdůrazní (upozorní na) následky chování hráče v systému.
7)
Skóre, tedy získané body alias skóre. Může být vyjádřeno mnoha způsoby (viz Zpětná vazba), nejčastější je ale virtuální měna, kde dochází k největšímu ztotožnění s reálným světem.
Uživatel má pak pocit, že skutečně „něco“ vlastní. Ať se použije jakákoliv měna, musí být
vždy kvantifikovatelná.
8)
Žebříček a znázornění pořadí vůči ostatním hráčům. Velmi důležité pro typ hráčů Achiever
(viz Typy hráčů), jelikož poskytuje informaci o tom, jak si vede s porovnáním s ostatními hráči. Pořadí v žebříčku může být nástroj užitečný k identifikaci nejenom, kdo používá nejlepší
strategii, ale také slouží k porovnání minulého výkonu k současnému a umožňuje stanovení
té nejlepší strategie. [9].
9)
Odznaky jsou jednou z nejvíce používaných mechanik, a to zejména pro typ hráčů Socialiser.
Umožňují nejenom něco vlastnit, ale zároveň umožňují prezentovat své výkony na sociálních
sítích. Neméně důležitý aspekt také je, že sdílení odznaku na sociálních sítích může sloužit
jako marketingová strategie pro rozšíření klientely aplikace.
10) Následky slouží k tomu, aby hráči získali informace o důsledku jejich akcí. Nezáleží na tom,
zda jsou pouze graficky ztvárněné nebo zda modifikují pravidla hry. Následky můžou být
rozděleny na pochvalu či potrestání, kde každá z nich může být využita v pozitivním i negativním smyslu. Následky lze brát jako samostatný element a více informací obsahuje kapitola
Zpětná vazba.
11) Dovednosti mají silnou asociaci s počítačovými hrami a málokdy jsou využívané v gamifikaci. Nicméně pořád se řadí mezi mechaniky, které lze zakomponovat do naší aplikace. V tomto
6
ELEMENTY GAMIFIKACE
smyslu jsou dovednosti vnímány spíše jako možnosti v aplikaci či vlastnosti uživatele (či avatara). Neurčují nám tedy, co nového umíme, jako spíš co nového můžeme udělat.
12) Odměna může mít mnoho podob, kterou určuje mechanika „svět“. Můžeme získávat body,
předměty, dovednosti, speciální možnosti, omezené příležitosti atd. Zároveň je vhodné
stanovit určitou hierarchii odměn, tedy rozdělit odměny na ty, které hráči dostávají vždy
(například po splnění každého úkolu), výjimečné (například při postupu do vyšší úrovně)
a na tzv. easter egg (vzácné odměny při splnění specifického úkolu). Právě tento typ má
největší dopad na hráče, jelikož jim dává pocit, že jsou výjimeční a lepší než ostatní hráči.4
Mechaniky lze dělit různými způsoby, a to jak na základní (které se využívají téměř vždy) a na
doplňkové (méně používané mechaniky), tak dle využití podle typu hráčů, dle kladných a záporných
stránek použití, zda se vztahují k postupu nebo zpětné vazbě atd. Kategorizace není tolik podstatná,
důležité je spíše si uvědomit, jaké všechny existují a jak spolu souvisí.
4)Vyjmenované mechaniky nejsou všechny, ale jedná se pouze o základní výběr. Druhy mechanik nejsou standardizované a existuje rozdělení až na
36 a více mechanik. Vzhledem k tématu diplomové práce jsem zmínila pouze ty nejdůležitější.
7
ELEMENTY GAMIFIKACE
Obr. 3.1: Svět - Aplikace EpicWin se odehrává ve světě válečníků (vikingů), a tím je
stanovený druh odměn a dovedností
Obr. 3.2: Avatar - V aplikaci jsou k dispozici 4 avataři, se kterými můžeme aplikaci
využívat
Obr. 3.3: Dovednosti - V profilu svého
avatara můžeme vidět získané schopnosti
a počet bodů
Obr. 3.4: Odměna - Grafická vizualizace
získání odměny a znázornění zpětné vazby
uživateli
Obr. 3.5: Postup - V aplikaci je k dispozici
mapa, která znázorňuje postup v podobě
ušlých mil. Lze vidět i získané poklady.
Obr. 3.6: Sdílení - Při nalezení pokladu lze
sdílet odměnu na sociálních sítích
8
ELEMENTY GAMIFIKACE
3.2 Dynamiky
Dynamiky doplňují používání mechanik ve hře. Pomáhají udávat mechanikám směr a posouvají uživatele v aplikaci vpřed. Definují emocionální dopad mechanik na uživatele a vymezují možné akce
v systému. Mohou mít pozitivní i negativní účinky. Pokud si hráč vychutnává vyšší status mezi vrstevníky
prostřednictvím svých úspěchů, tato dynamika má pozitivní efekt. Pokud hráči nedělají úkol, protože jim
chybí odměna, pak má dynamika negativní účinek [8].
Existují 3 typické prvky v dynamikách gamifikace, což jsou hranice (constraints), emoce (emotions)
a příběh (narrative). V podstatě jsou tyto 3 prvky více v pozadí struktury a jsou orientované na elementy, které fungují jako hrací pohon.
1. Omezení či hranice – stejně jako hry mají svá pravidla, i gamifikovaný systém má svá pravidla a hranice. Smysluplné volby jsou prezentovány uživatelům a můžou pozměnit cestu
simulace. Hranice (a kompromisy) zajišťují rovnováhu jednotlivých složek v gamifikaci a vymezují volby, které jsou uživateli prezentovány.
2. Emoce – emocemi se zabýváme každý den v našich každodenních situacích a stejně tak
jsou obsažené emoce v herních systémech. Můžeme využít celé spektrum emocí, od čistého
potěšení po překvapení, úžas až pocit neštěstí. Od pocitu úspěchu pro správnou volbu po
provedení špatného rozhodnutí, se vším se dá pracovat.
3. Příběh – či scénář určuje, jak naše mechaniky v aplikaci fungují. V úvodu seznámíme uživatele se světem a vtáhneme tak uživatele do děje či hry. Pomocí příběhu jsme schopni vytvořit
lepší grafický zážitek a umožníme uživatelům zapamatovat si větší množství informací, které
byly v systému prezentovány.
Pokud to shrneme, gamifikační mechaniky a dynamiky umožňují vytvořit více přesvědčivé
a participativní uživatelský zážitek motivující uživatele ke specifickým akcím. Jsou schopny apelovat na
naše základní lidské touhy jako něco vlastnit, či získat odměnu za provedený úkol. Při správné aplikaci
těchto dvou gamifikačních elementů má systém schopnost zapojit uživatele a povznést jejich účast na
zcela novou úroveň [11].
9
ELEMENTY GAMIFIKACE
3.3 Zpětná vazba
Zpětnou vazbu lze částečně zařadit jak mezi mechaniky, tak mezi psychologii i dynamiky.
Existuje ovšem tak rozmanité větvení, že je vhodné používat zpětnou vazbu jako samostatný element.
Pokud hráči konají nějakou aktivitu v systému nebo něco získají, očekávají zpětnou vazbu. Ta může
být podána v následujících možnostech:
a)
oceňující zpětná vazba
b)
motivující zpětná vazba
c)
ohodnocující zpětná vazba
Oceňující zpětnou vazbu uživatel získá, pokud dobře odvede svou práci. Motivující zpětná
vazba je zaměřená na to, aby uživatele posouvala dále a ukázala mu správnou cestu nebo rozšířila oblast znalostí. Ohodnocující zpětná vazba nastává, když je výkon hráče porovnáván s výkony ostatních
a pro zvýraznění posunu hráče v aplikaci.
Na zpětnou vazbu se můžeme dívat z více úhlů a zobrazit jí uživateli různými způsoby.
Nejčastější zpětná vazba je znázornění postupu či poklesu pomocí zobrazením počtem určitých elementů. Této zpětné vazbě se říká Granular feedback component. Může se jednat o klasické body, kde jejich
počet určuje postup, ale i úroveň hráče. Může se také jednat o virtuální měnu či předměty, které fungují
jako prvek pro znázornění úrovně hráče. Aggregate feedback components nám sumarizují nejen body, ale také
ostatní granulární počitatelné elementy, které můžeme zobrazit a porovnávat pomocí žebříčku.
Další možností jak dát zpětnou vazbu uživateli je pomocí vizuálních elementů. Právě vizuální
efekty, které získá hráč při postupu, dělá gamifikaci zábavnou. Je důležité si uvědomit, že některé zábavné prvky fungují jako motivátory a jsou součástí vizuálních a estetických prvků.
Je nutné zahrnout do zpětné vazby i zvukové elementy, které k tomu neodmyslitelně patří.
Tyto elementy ovšem nemají nic společného s vizuální stránkou gamifikace a neváží se ani k motivaci.
Můžou být ale důležitým prvkem pro informování uživatele, co se v systému po jeho interakci změnilo.
Do zpětné vazby lze i zařadit elementy fyzického projevu, tedy zavibrování telefonu či rozsvícení světla.
Další část, která doprovází zpětnou vazbu, je text. Ten doplňuje informace, o jakou zpětnou vazbu se jedná. Může být jak motivující tak i pochvalná či čistě informující. Je tedy vidět, že
i samotný text je důležitý a častokrát i sám o sobě vypovídající, kdy není třeba speciálních vizuálních
či zvukových prvků.
10
ELEMENTY GAMIFIKACE
Gamifikovaný systém mBank obsahuje zpětnou vazbu pomocí Granular feedback component,
kde využívá virtuální hvězdičky pro znázornění postupu. Zároveň je zde použita i Aggregate feedback
component, tedy zobrazení a porovnání našeho postupu vzhledem k ostatním.
Obr. 3.7: Náhled gamifikace v internetovém bankovnictví mBank
Pomocí webové aplikace todoist.com, která využívá gamifikaci, lze vidět zpětnou vazbu ve
formátu virtuálního elementu, který se postupně mění v průběhu procházení systémem hráčem. Čím
více splní hráč daných úkolů, tím více má „karmy“, která znázorňuje body. Počet bodů je rozdělen do
intervalů, kde je každý interval znázorněn vizuálním elementem.
Obr. 3.8: Náhled gamifikace ve webové aplikaci Todoist.com
Mobilní aplikace EpicWin využívá virtuální měnu. Za každý splněný úkol získá hráč určitou
odměnu. Množství odměny určuje náročnost úkolu a postup (progress) vidí uživatel dle progress baru,
který je rozdělen na 5 zaměření: strength, stamina, intellect, social a spirit (obrázek viz str.8).
Zpětná vazba uživateli může probíhat nejen různými vizuálními či zvukovými způsoby, ale
také různými významovými způsoby, které jsou zaměřené na emoce. Se zpětnou vazbou se dá dobře
11
ELEMENTY GAMIFIKACE
pracovat a lze ji přizpůsobit různým herním situacím. Vazbu můžeme rozdělit na posilující — tedy
tu, která podporuje dané chování — nebo na trestající — tu, která se snaží dané chování odstranit.
Každou můžeme podat pozitivním i negativním způsobem, přičemž tu negativní můžeme rozdělit na
typ Escape — tedy odstranění škodlivého stimulu následováno správným chováním — a na Active
Avoidance — chování vyhýbající se škodlivému podnětu [12].
Pokud ji chceme použít, je důležité si nejprve stanovit, o jakou zpětnou vazbu se jedná a co
bychom měli uživateli říct. Pokud se jedná o oceňující zpětnou vazbu s použitím Granular feedback component, jedná se o pozitivní vazbu s posilujícím účinkem. Po zobrazení této vazby by se uživatel měl cítit
jako vítěz, tomu bychom měli přizpůsobit grafiku a využít grafické prvky, které vyjadřují úspěch.
3.4 Psychologie a motivace
Každý, kdo vytváří novou (webovou) aplikaci, by měl zvážit, co bude zásadní pohon pro
uživatele. Tedy co bude to, co přesvědčí uživatele o využívání přesně této aplikace a ne jiné. K tomu
slouží motivace. Pochopit motivaci člověka je náročné, zejména proto, že každého člověka motivuje
něco jiného. V zásadě ale existují dva typy motivace, které se vztahují ke všem typům hráčů. Jedná
se o vnitřní a vnější motivaci, kde nejvíce žádoucí je právě ta vnitřní. Ta nám totiž určuje, jestli gamifikovaný systém bude využíván hráčem dlouhodobě a nezačne ho nudit. Obecně platí, že hráči
začnou využívat gamifikovaný systém kvůli vnější motivaci, ale v pokračování využívání systému
používají vnitřní motivaci.
Vnitřní motivace je tedy stav, který „nutí“ jedince dělat něco pro vlastní uspokojení. Osoba,
která je vnitřně motivovaná, se ochotně učí nebo hraje, jelikož samo učení (hraní) ji uspokojuje. Vnitřní
motivace je mnohem důležitější, jelikož popud k učení (hraní) vychází přímo z žáka (hráče), a je pro
něj zajímavější, přičemž žák (hráč) je mnohem trpělivější.
Vnější motivace se definuje jako stav, kdy se jednotlivec učí (hraje) nikoliv z vlastního zájmu, ale pod vlivem vnějších činitelů. V případě gamifikačního rámce se tedy jedná o motivaci typu
„hraju, abych porazil soupeře“, tedy nedělám to sám pro sebe, ale kvůli ostatním. V případě vnitřní
motivace se jedná o „hraju, abych porazil sám sebe“, tedy snažím se stále zlepšovat a nemám potřebu se porovnávat s ostatními.
Naše chování není vždy založeno na racionálních rozhodnutí. To lze využít i v gamifikaci,
kde se můžeme soustředit na zvyky. Jsme schopni se naučit různé zvyky, tedy když uděláme určitou
činnost, dostaneme odměnu. To funguje jak v normálním životě, tak i v gamifikovaném systému [13].
12
ELEMENTY GAMIFIKACE
3.4.1 Typy hráčů
Do části psychologie a motivace je vhodné zahrnout část o typech hráčů, jelikož právě
psychologie jednotlivých hráčů ovlivňuje použití jak jednotlivých mechanik, tak využití jednotlivých
oblastí aplikace a ovlivňuje i výsledný vzhled aplikace.
Každý hráč hraje určitým způsobem, který ho definuje. Existují různé typy hráčů, které se
dají i kombinovat, a jednotlivé hry či jakékoliv gamifikační prostředí lze vytvořit na míru jednotlivým
typům hráčů. Každý typ hráče vyznačují určité interakce, výhry a způsob hraní. Pro určité typy hráčů je
nejdůležitější kooperace, pro jiné zejména individuální odměny. Hráči mohou soupeřit sami se sebou
nebo s ostatními hráči.
Základní typy hraní lze rozdělit na soutěžení, kooperace a sebevyjádření. V prvním typu hry je
důležitá interakce s ostatními hráči, vzájemné porovnávání a snaha o poražení ostatních. Naopak v kooperativní hře hráči spolupracují, pomáhají jeden druhému a sdílejí výhry. Většina systémů založených
na gamifikaci se snaží zkombinovat všechny typy her. Je velmi těžké udržet systém takový, aby využíval
elementy pouze z jednoho typu hry. Povolením všech těchto tří prvků podpoří největší zapojení a aktivitu s gamifikačním prostředním.
Uživatele lze rozdělit dle Richarda A. Bartla na základní 4 typy hráčů, kteří můžou interagovat
s herním systémem. Ti jsou definováni popisem, co mají a co nemají rádi, jaké techniky využívají, proč
hrají a co nebo v čem se snaží zlepšit. Základním rozdělením je Achiever, Explorer, Socializer a Killer.
Achiever je hráč, který rád soutěží a vyhrává. Nezáleží mu tolik na kontextu hry ale spíše
na úspěchu s porovnáním s ostatními. Chce být na vrcholu žebříčku. Chce vědět, jak dosáhnou jednotlivých statusů a primárně se vyžívá ve výzvách. Achievers uznávají získání odměn, sbírání bodů
a pohyb z nižšího levelu do vyššího jako jejich hlavní cíl. Zapojují so do ostatních aktivit pouze pokud
je to posune na žebříčku výš. Vyznačují se agresivnějším chováním a odrovnáním soupeře pokud se
stane překážkou [9].
Explorer je hráč, který se snaží co nejvíce poznat herní prostředí. Chce porozumět „hře“
v celé šíři a naučit se vše o zákoutích aplikace. Rád objevuje doposud neobjevené, rád vyhrává speciální výhry. Užívá si objevení nových věcí (schopností, míst) ve hře, o kterých ostatní neví. Není pro
ně tolik důležitý bodový zisk jako spíš uspokojení z vlastní vynalézavosti. Rád ve hře experimentuje
a sleduje, co se stane [9].
Socializer je hráč, který se zajímá o vztahy s jinými hráči a vytváří virtuální spojení s ostatními v herním prostředí. Samotná hra je pro ně spíše doplňková ke komunikaci s ostatními hráči. Rádi
13
ELEMENTY GAMIFIKACE
vítají nového hráče, tvoří podskupiny a používají všechny komunikační nástroje, které jsou v herním
prostředí dostupné. Rádi kooperují a pomáhají ostatním hráčům. Po poznání zákoutí hry tolik neexperimentují jako Explorers, ale hledají tipy v diskuzích a od ostatních hráčů [9].
Killer je hráč, který se snaží porazit všechny ostatní a nerad navazuje jakékoliv vztahy s ostatními. Výhra je pro něj porazit všechny ostatní. Jsou podobní Achievers v pohledu na to, že chtějí
vyhrát. Na rozdíl od nich ale samotná výhra není dost. Musí vyhrát za předpokladu, že někdo jiný
něco ztratí. Tato skupina je početně nejmenší (zejména v gamifikaci), co se typů hráčů týče, ale pořád
je natolik důležitá, aby byla v charakteristikách hráčů zahrnuta [9].
Hráči mohou nabývat vlastností ze všech 4 typů hráčů a je téměř nemožné někoho zařadit
pouze do jedné skupiny. Všeobecně platí, že 80% jsou socializers, 50% jsou explorers, 40% jsou achievers a 20% jsou killers [9]. Je také důležité zvážit, jaký typ aplikace gamifikujeme. Typ hráčů velmi
záleží na cílové skupině uživatelů, které musíme zvážit před samotným návrhem používaných mechanik a grafického ztvárnění (viz kapitola Porozumění cílových uživatelů).
3.5 Estetika
Při procesu návrhu jakékoliv webové aplikace vizuální ztvárnění ovlivňuje, jak efektivně
a s jakým pocitem předáme informace cílovému uživateli. Abychom předali informace v esteticky
kladném dojmu a se správným vyzněním, musíme znát určité zákonitosti grafického designu. Pro
osvojení zákonitostí vizuální komunikace musí grafik nejdříve umět „myslet očima“. Rozvíjení této
schopnosti, vizuálního smyslu, se podobá zvládnutí nového jazyka, který má svou vlastní abecedu,
slovní zásobu i syntax (strukturu vět) [14].
Návrh designu aplikace zahrnuje nejen jaké jednotlivé elementy se používají, ale hlavně jak
tyto elementy ztvárníme a kde budeme tyto informace prezentovat uživateli. Samotné hezké estetické
ztvárnění nezaručí úspěch, pokud nebudou zohledněny ostatní specifika jako psychologie barvy, konzistence či srozumitelnost. Příliš mnoho informací zahlcuje hráče, kteří nemají příliš času nebo ještě
nezískali dostatek schopností, aby si s informacemi poradili (věděli, co znamenají).
Gamifikaci tvoří zábavnou právě estetika a grafické ztvárnění prvků, které mají dopad na
lidské emoce a pocity. A právě to je ta část, která ovlivňuje využívání gamifikované aplikace uživatelem.
Cílem je, aby vizuální prezentace aplikace zanechala na uživateli kladný dojem, pocit vzrušení či pocit
výzvy. Element estetiky apeluje na motivátory zábavy. Je to také způsob, jak přenést informace a to
prostřednictvím grafiky až na úrovni detailů, jakožto například indikátorů zpětné vazby. Kromě toho
14
ELEMENTY GAMIFIKACE
vizuální efekty mohou změkčit selhání a místo toho vytvořit vizuální efekt, který povznese neúspěch
na novou rovinu [8].
Vizuální komunikace se podobně jako ta písemná či mluvená sestává z analýzy, plánování,
uspořádání a nakonec vyřešení konkrétní otázky [14]. Pokud tedy navrhujeme grafické ztvárnění
(nejen) gamifikace, je potřeba znát, „co“ grafické prvky říkají, tedy co je obsahem vizuální promluvy a jaké existují principy, které určují, jak s těmito prvky naložit. Tyto grafické prvky a principy
můžeme rozdělit do několika kategorií, kde se v každé kategorii zabýváme různým pohledem na
danou problematiku.
Obecné principy nám určují základní layout a rozvržení stránky. Zahrnují základní estetické principy, teorii barev a také jak spolu jednotlivé prvky pracují. Obecné principy nám ovlivňují
celkový vzhled a zanechávají na nás celkový dojem, jelikož pozornost není zaměřena na jednotlivé
prvky, ale naopak na celkovou podobu a vyznění.
Typografické principy nám určují, jakým způsobem pracovat s písmem a že správně pochopené principy typografie dokážou často nahradit složité grafické ztvárnění. Zároveň nám umožňují
zvážit možnou stylizaci pomocí ikon.
Principy z pohledu UX nám udávají, jakým způsobem využít grafické a typografické prvky
tak, aby tyto prvky byly použity správně a efektivně, a to s co největším důrazem na použitelnost. V této
části je nejdůležitější spokojený uživatel, který nejenom bude vizuálně přitahován grafickým ztvárněním, ale také bude intuitivně a správně používat aplikaci bez errorů a slepých cest. Pomocí zaměření se
na UX zvýšíme použitelnost aplikace, což je poslední krok pro dlouhodobé udržení uživatelů.
3.5.1 Principy grafického návrhu
Estetika je důležitá součást každé aplikace, webu, hry i gamifikace. Pokud neklademe důraz
na vizuální stránku, sebelepší projekt nikdy nemůže být úspěšný. Grafické zpracování s důrazem na
UX dokáže posunout a vylepšit i jinak neúspěšnou aplikaci. Nelze ale říci, že správně zvolená estetika
vytvoří ze špatné aplikace aplikaci dobrou. Může ji ale výrazně posunout směrem k lepšímu. Správná
estetika poskytuje přidanou hodnotu, která může zvýšit nejenom použitelnost webu, ale také důležité
části gamifikace, bez nichž by nefungovala. Cíl grafického ztvárnění gamifikačních mechanik je dostat
k uživateli informace, které ovlivňují jeho chování v dané aplikaci. Pokud není vizuální informace
správně podána, může vést k dezorientaci uživatele a jeho následným odmítnutím celé aplikace.
Ignorování estetiky v procesu návrhu hry či gamifikace snižuje celkový dojem na uživatele.
Prostor, ve kterém se odehrává hra, se stane bez estetiky nudným. Odpovídající a sladěné vizuální
15
ELEMENTY GAMIFIKACE
prostředky, důraz na detail, jednoduché kontrasty či barevné pozadí vytváří dokonalé prostředí, které
přispívá k celkovému hernímu zážitku [1].
V této části bychom si již měli být vědomi, jaké jednotlivé části jsou zahrnuty v elementu
estetiky. Vědět, jaké možnosti máme a co všechno lze použít, je základ k utřídění si možností a definitivnímu rozhodnutí, jaké prvky využívat chceme a jaké nikoliv. Každý použitý prvek musí mít
svůj význam a důvod. Pro korektní použití námi zvoleného grafického ztvárnění je ale důležitá ještě
jedna věc, a to znát principy, které udělají naší aplikaci kvalitně zpracovanou a uživatelsky přívětivou.
Následující principy z obecného, typografického a UX pohledu by měli pomoci každému grafikovi,
který se rozhodne vytvořit jakoukoliv gamifikaci (a nejen tu) v rámci aplikace. Stanovená pravidla jsou
obecného zaměření a lze je použít i v jiných kontextech než v gamifikaci.
3.5.2 Obecné principy
Grafické principy fungují jako konstrukční zásady. Umožňují co nejvhodněji a nejúčinněji
využít prvky, z nichž má vzniknout smysluplné a pochopitelné vizuální sdělení. Grafické prvky říkají,
„co“ je obsahem vizuální promluvy, principy určují „jak“ s nimi naložit [14]. U obecných principů se
soustředíme na obecné zákonitosti a pravidla, která mají obecné použití v designu, ať už u návrhu
webové stránky či GUI aplikace. Jednotlivé principy jsou tvořeny pravidly, doporučeními, lidskými
předsudky a obecnými úvahami o designu [16].
Kompozice či layout nám určuje základní rozvržení stránky. Existují grafické principy,
které dělají design vizuálně přitažlivý a ovlivňují celkové vyznění naší aplikace. Při kompozici
je možné využít všeobecně známé principy jako zlatý řez či pravidlo třetin. Vhodné je také ale
orientovat se v pohybu očí po obrazovce dle Gutenbergova diagramu a rozumět, kde na obrazovce vznikají „slepá“ místa a jaké rozvržení vzhledem k množství zobrazovaných prvků je
nejlepší. Množství zobrazovaných prvků určuje pravidlo 80/20 (viz kapitola Principy z pohledu
UX) a ovlivňuje, jaký layout je pro naši aplikaci vhodný. Všeobecně spíše platí, že méně je více,
zejména u nových uživatelů, kteří by neměli být informačně přesyceni. Tomuto tématu se věnuje Informační kaskádová teorie, která říká, že informace by měli být zobrazeny postupně dle
dosáhnuté úrovně a které by měly odpovídat množstvím znalostí získaných v daném okamžiku
v průběhu průchodem aplikace [17].
Zlatý řez je jev, který se vyskytuje nejen v přírodě, ale jeho využití je velmi variabilní. Používá
ideální poměr 0.618, a pokud nejsou ohroženy ostatní aspekty designu, je přínosné ho v našem designu
16
ELEMENTY GAMIFIKACE
použít. Pokud si dáme trochu záležet, lze ho aplikovat jak na layout webové stránky, tak na GUI aplikace. Použití se meze nekladou.
Pravidlo třetin je zjednoduššený princip kompozice, který využívá poměr 0.6. Tato technika
vede k jinému poměru, než je zlatý řez, uživatelé této techniky se ale mohou domnívat, že jednoduchost jejího použití kompenzuje její relativní přibližnost ke zlatému řezu [16].
Mřížka je v podstatě soustava vodorovných a svislých čar, které grafikovi slouží jako vodítka
při rozmísťování jednotlivých prvků. Její existence může a nemusí být z hotového díla jasně patrná,
Mřížka je důležitým principem vizuální komunikace. Může dávat řád a jednotu vizuálnímu sdělení,
posilovat jeho rytmus a pohyb [14].
Obr. 3.9: Layout webové gamifikované aplikace Foodzy a její rozmístění elementů
pomocí zlatého řezu
Obr. 3.10: Layout mobilní aplikace Duolingo se
zarovnáním elementů pomocí mřížky
Stabilitu webové stránky lze docílit vhodným uspořádáním prvků. Jedná se o estetické, příjemné rozložení elementů v obrazu tak, že tyto prvky vyjadřují stabilitu a lad.
Gestalt principy jsou jedním ze základních principů, kterým by každý designer měl věnovat pozornost a zvážit je v procesu návrhu [18]. Gestalt je německé slovo, které znamená „podstata
nebo tvar entity v kompletní formě“ a jedná se v podstatě o skupinu prvků, v níž celek je více než
jeho jednotlivé součásti. Obsahuje několik pravidel, která se dají aplikovat nejen na webdesign, ale
u jakéhokoliv vizuálního ztvárnění od malby obrazu po sazbu knihy.
Gutenbergův diagram popisuje obecné putování lidského zraku při pohledu na rovnoměrně
17
ELEMENTY GAMIFIKACE
rozložené homogenní informace [16]. U webového designu slouží k rozvržení prioritních věcí na
stránce. Zároveň určuje “slepá” místa, kam není vhodné umísťovat důležité elementy.
Zarovnání určuje umístění prvků tak, že jsou jejich okraje zarovnány podél společných řádků nebo sloupců, nebo jejich obsahy podél společného středu. Zarovnání vytváří dojem jednotnosti
a spojitosti, což přispívá k celkové estetice a vnímané stabilitě designu. Například řádky a sloupce
mřížky nebo tabulky jasně vyjadřují příbuznost prvků v těchto řádcích a sloupcích a vedou zrak odpovídajícím způsobem zleva doprava a shora dolů [16].
Přestože dodržování pravidel v designu obecně funguje a je prospěšné, občas je žádoucí
pravidla porušit. Člověk by se měl také řídit instinktem. Nemusíme využít jen softwarové zarovnání
objektů (vlevo, vpravo, na střed,...), ale můžeme využít i zarovnání dle plochy, které je závislé na úsudku a oka designéra. Uspokojivé zarovnání podle plochy lze dosáhnout takovým umístěním objektu
podél osy zarovnání, že na obou stranách zůstanou stejné plochy nebo stejná vizuální váha objektů
– pokud by měl objekt určitou hmotnost, měla by být rozložena podél osy [16].
Barva je v jazyce grafického designu nesmírně silným a sdělným prvkem. Dokáže upoutat
pozornost, spojit izolované prvky, zdůraznit sdělení a posílit celkový účinek kompozice. Může také
přímo vyjádřit postoj nebo emoci, podnítit k reakci, zdůraznit a zpestřit, sdělit konkrétní poselství
nebo podtrhnout hierarchii [14]. Díky barvě může být design aplikace vizuálně zajímavější a estetičtější. Barva může posílit uspořádání a význam prvků designu. Naopak při nesprávném použití
mohou barvy vážně narušit podobu a funkčnost designu [16].
Prvek „barva“ obsahuje následující vlastnosti:
a)
počet barev - omezte paletu na tolik barev, kolik jich dokáže lidské oko na první pohled
zpracovat. Nikdy bychom neměli používat barvu jako jediný prostředek pro identifikaci
(neboď významná část populace má omezené barevné vidění) [16].
b) barevné kombinace - estetických barevných kombinací dosáhneme použitím sousedních
barev na barevném kruhu (analogické barvy), protilehlých barev na barevném kruhu (komplementární barvy), barev v rozích symetrického mnohoúhelníku vepsaného do barevného
kruhu (triadické a kvadratické barvy) nebo barevných kombinací, s nimiž se můžete setkat
v přírodě [16].
c)
sytost - syté barvy použijte v případech, kdy je prioritou upoutání pozornosti. Nesaturované
barvy použijte v případech, kdy je prioritou výkonnost a efektivita. Syté barvy jsou vnímány jako více vzrušující a dynamické [16].
18
ELEMENTY GAMIFIKACE
d) kontrast - všeobecný design se skládá z mnoha prvků, z nichž každý má různé úrovně
významu a důležitosti. Některé prvky jsou ve vztahu mezi sebou, některé nikoliv. V této
části je vhodné použít nejprve „kontrast“, který odpovídá rozdílu důležitosti mezi dvěma
a více prvky.
e)
symbolismus - neexistuje žádný přesvědčivý důkaz, který by podporoval všeobecný
vliv barvy na emoce a náladu. Různé kultury přiřazují barvám různý význam [16]. Pokud
ale tvoříme aplikaci či web primárně pro střední evropu, existují konvence, které se všeobecně dodržují.
Obr. 3.11: Barevné schéma zleva: monochromatické, analogické, komplementární, triadické [29]
3.5.3 Typografické principy
Existuje pravidlo, které říká, že 95% webdesignu tvoří typografie [19]. Typografie je mocný nástroj, díky němuž můžeme zobrazit a sdělit informace mnohem efektivněji, než pomocí
grafiky. Text totiž může pracovat jako samostatný grafický element, který může být velmi přínosný. Typografie se tedy zabývá grafickou úpravou slov a textu a může mít dvojí funkci. Na nejnižší
úrovni může sloužit jako prostý grafický element, podobně jako bod či linie. Jeho hlavní funkce
je ale verbální. Pokud se typografický element zúží jen na stránku obsahovou, hrozí oslabení jeho
vizuální působivosti a tím i sdělnosti. Jedině pojetí kladoucí vizuální stránku na úroveň obsahové
působí na diváka na více úrovních, nejen myšlenkové, ale i citové a estetické [14].
Na první pohled typografie v gamifikaci nehraje významnou roli, jelikož gamifikované aplikace naopak více využívají herní elementy, které jsou založené na grafickém vyjádření. Jsou prvky,
kde použití písma (textu) nemá takový účinek jako použití grafického elementu. Je to ovšem důležitý
prvek, který může design velmi obohatit a přenést sdělení na novou úroveň. Jelikož právě text je v gamifikovaných aplikacích častokrát až na druhém místě (tedy za grafikou), o to víc bychom mu měli
věnovat pozornost. Je důležité si vůbec uvědomit, jaké prvky je vhodné sdělit graficky, jaké textově
19
ELEMENTY GAMIFIKACE
a jaké kombinovaně. Nejdříve ale uvedu obecná pravidla pro typografii, která by se měla dodržovat
v jakémkoliv kontextu.
Typ písma nám určuje, jak bude celkový design působit na uživatele. Základní rozdělení je
na bezserifové písmo a serifové, přičemž bezserifové písmo je v gamifikovaných aplikacích používáno
jednoznačně více. Je to dáno tím, že toto písmo je na obrazovkách lépe čitelné a v aplikaci působí méně
rušivě. Navíc, jelikož jak již bylo zmíněno, text zaujímá v gamifikovaných aplikacích až druhé místo za
grafikou, množství textu je většinou v řádech slov, což u všeobecném designu je to pravé místo pro
využití bezserifového písma (např. Nadpisy knih, perexy článku, atd...), Rozdělení na dva typy písma
je ovšem úplně základní a nedá se všeobecně říci, že pokud chceme vytvořit aplikaci s dojmem důvěryhodnosti, musíme zvolit serifové písmo. Obecné pravidlo říká, že bychom měli využívat v rámci
jedné aplikace pouze jeden typ písma (tzv. rodinu písma), maximálně dva, které se vzájemně doplňují.
Mnohem žádoucí je využití různých řezů, které nepůsobí rušivě a vytváří esteticky sladěný layout.
Hierarchie slouží ke stromové struktuře textu a ke zlepšení orientace uživatele v textu. Ten
by se měl v aplikaci vždy orientovat, kde se nachází, zda je v nadřazené části či podřazené. Je důležité
zachovat kontinuitu a jednotnost. Pokud mají dva textové prvky stejný význam, měly by být i stejně
typograficky řešeny. Všeobecný princip stanovuje, že jakýkoliv design by měl mít alespoň 3 úrovně hierarchie [19]. Výsledné použití záleží na složitosti dané aplikace, ale její použití by mělo být přirozené,
jednoznačné a intuitivní.
Zvýraznění je technika upoutání pozornosti na určité místo v textu. Obecně platí, že bychom neměli zvýrazňovat více než 10% textu a používat jednotnou techniku zvýraznění pro zachování
konzistence [16].
Existují následující typy zvýraznění textu:
a)
dle velikosti písma – souvisí s hierarchií a slouží k orientaci uživatele v rámci aplikace (víc
viz Hierarchie)
b) dle barvy – barva je potenciálně účinnou technikou zvýraznění, ale měla by být použita rozvážně a v souladu s ostatními zvýrazňovacími prvky [16].
c)
dle druhu písma – všeobecně nevhodná metoda pro zvýraznění písma, je vhodná spíše pro
vizuální oddělení významu.
d) dle řezu – nejčastější technika zvýraznění písma. Zahrnuje jak použití tučného písma, tak
kurzívy či podtržení. Použití tučného písma je zpravidla upřednostňováno před ostatními technikami, neboť v designu působí nejméně rušivým dojmem a jasně zvýrazňuje cílové prvky [16].
20
ELEMENTY GAMIFIKACE
Obr. 3.12: Všimněte si různého použití zvýrazňujících technik u aplikace Duolingo. Použitím změny velikosti písma, barvy a řezu písma jsou vyzdviženy
důležité prvky a naopak utlumuje ty méně důležité.
Čitelnost je vlastnost písma, která určuje, jak snadno se nám text čte a zda mu rozumíme, a to
se správným, tedy původně zamýšleným záměrem. Vizuální srozumitelnost textu zpravidla závisí na velikosti a typu písma, kontrastu, bloku textu, prokladu písma a velikosti řádku [16]. Až 75% lidí nečte text na
webových stránkách slovo od slova, ale pouze skenuje text v rychlosti. Při pohybu aplikací hledají klíčová
slova, která jim jednoznačně popíšou svůj význam. Pokud to shrneme, množství textu bychom měli redukovat na přiměřenou míru tak, aby byl co nejkratší, ale zároveň aby uživatel dostal veškeré informace,
které v danou chvíli potřebuje.
Pokud řešíme textovou stránku aplikace, kromě výše vyjmenovaných pravidel je také nutno zvážit, co bude zobrazeno uživateli textově a co obrázkem. Je to velmi důležité rozhodnutí a každé použití
má své klady i zápory. Toto téma se týká také UX, jelikož musíme zvážit, zda uživatelé rozumí zobrazovanému obrázku či nikoliv. Pokud nejsme schopni dostatečně jasně stylizovat text či akci do ikony, je
vhodné používat buďto čistě textové značení, nebo daný obrázek alespoň textem doplnit.
3.5.4 Principy z pohledu UX
UX neboli uživatelský prožitek vyjadřuje míru spokojenosti uživatele se systémem. Pod
tímto pojmem si tedy lze představit soubor technik a způsobů, díky kterým můžeme záměrně ovlivňovat, jaký dojem z našeho webu zůstane v uživatelích. Dojem, jaký na nás zanechal po interakci
21
ELEMENTY GAMIFIKACE
daný systém, nás ovlivní, jestli si ho oblíbíme či použijeme znovu [20]. V případě gamifikace je to
tedy velmi důležitý aspekt. Gamifikace musí v uživateli vzbudit dobrý dojem, který by měl nabádat
k dlouhodobému použití což je původní účel nasazení gamifikace. Interakce jsou podřízené subjektivním vnímáním, nikdy tedy nemůžeme zcela uspokojit všechny typy uživatelů. Proto bychom si
předem měli ujasnit, jaká je naše cílová skupina a jaké interakce od této skupiny očekáváme, respektive, co skupina očekává od systému.
Cílem UX je vytvořit produkt, službu nebo systém, který bude předvídatelný, použitelný
a zároveň přitažlivý. Z pohledu estetiky budou tedy grafické elementy splňovat určité konvence,
jejich funkčnost bude v souladu s použitelností a estetické ztvárnění bude pro uživatele příjemný.
Grafický návrh uživatelského rozhraní má na starosti vizuální designér a je zodpovědný za elementy
webové stránky nebo aplikace, které uživatel vidí. To zahrnuje tvorbu pohledu a pocitu vytvářející
emoční spojení s uživatelem, který bude na stejné vlně jako aplikace samá. Například bankovní
systém potřebuje vyzařovat stabilitu, důvěryhodnost, přístupnost. Designér může dát toto pojištění
skrz vizuální elementy pomocí barev a užíváním metafor. Je velký rozdíl mezi vytvářením efektivního, propracovaného a emočně vizuálního designu oproti běžnému grafickému návrhu stránky [21].
Vliv estetiky na použitelnost je myšlenka, která by měla být zvážena jako první. Toto
téma bylo již v minulosti řešeno různými studiemi5, které potvrdily, že estetika má významný dopad
na přijatelnost, použití a funkčnost designu. Všeobecně jsou tedy estetické designy vnímány jako
snadněji použitelné než méně estetické designy. Navíc jsou více akceptovány a podporují kreativní
myšlení a řešení problémů [16]. Měly bychom se tedy zamyslet, jak velkou roli hraje estetika v naší
aplikaci a kolik jí chceme dát prostoru, aby vytvářela vizuálně přitažlivý produkt ale zároveň nesnížila použitelnost.
Pravidlo 80/20 je pravidlo, které se používá ve všech designech (nejen ve webovém rozhraní) a říká, že nedůležité funkce, které jsou součástí méně důležitých 80 procent systému, by měly být
minimalizovány, nebo by měly být z designu zcela odstraněny. Na začátku si tedy musíme ujasnit, co
patří do 20% nejdůležitějších funkcí a jak lze zbylých 80% uživateli poskytnout. Navíc, pokud jsou čas
i zdroje omezené, měli bychom se vyhnout vynaloženému úsilí na opravu a optimalizaci designů nad
rámec důležitých 20 procent, neboť takové úsilí vede k poklesu výnosů [16].
Hickův zákon nám říká, že doba potřebná k učinění rozhodnutí se prodlužuje s rostoucím
počtem alternativ [16]. To znamená, že čím více nabídneme uživateli možností, tím déle bude přemýšlet nad výběrem, a to i když uživatel přesně ví, co chce. Designéři mohou efekt Hickova zákona
využít ve svém designu. Aby se uživatel pohyboval v systému rychle a s přehledem, měli bychom mu
nabídnout jasné a co nejvíce stručné možnosti.
5)Například studie Apparent Usability vs. Inherent Usability: Experimental Analysis on the Determinants of the Apparent Usability from Masaaki
Kurosu and Kaori Kashimura.
22
ELEMENTY GAMIFIKACE
Hierarchie velmi souvisí s předchozím Hickovým zákonem. Nejjednodušší strukturou pro
vizualizaci a pochopení komplexnosti je právě hierarchické uspořádání [16]. To umožňuje lepší pochopení a znázorňuje propojenost mezi jednotlivými prvky. Pro usnadnění rozhodování uživatelem, jakou
akci chce vykonat (v souvislosti s Hickovým zákonem) bychom měli využít hierarchické zobrazení informací, které nejenom zrychlý proces rozhodování, ale zároveň zanechá v uživateli lepší dojem (díky
přehlednosti a srozumitelnosti), který je základním kamenem pro UX.
Psychologické omezení limituje rozsah možných činností posílením způsobu, jakým lidé
vnímají svět a jak o něm přemýšlí. Jedná se tedy o způsob vymezení kroků, které lze v systému provádět [16]. V designu existují 3 druhy symbolického omezení a to symboly, konvence a mapování.
Symboly ovlivňují chování sdělování významu prostřednictvím jazyka, např. pomocí textu a ikon na
výstražné značce. Konvence ovlivňují chování na základě naučených tradic a zvyklostí, například že
červená znamená stůj a zelená jeď. Mapování ovlivňuje chování na základě vnímaných vztahů mezi
prvky. Např vypínače blízko světel ovlivňují právě tyto světla [16]. Vytvářejte prvky tak, aby nad nimi
uživatel nemusel přemýšlet a aby splňovaly to, co uživatelé očekávají. Pokud totiž systém nedělá to,
co uživatel chce, pak je uživatel nespokojený a systém nadále využívat nebude. Což je opačné chování
uživatele v gamifikovaném systému než chceme.
Dle principu konzistence jsou systémy použitelnější a je snazší se je naučit používat, pokud jsou
podobné části vyjádřeny podobným způsobem. Konzistence umožňuje lidem efektivně přenášet znalosti do
nových kontextů, rychle se učit novým věcem a zaměřit pozornost na relevantní aspekty určité úlohy [16].
V designu existuje konzistence estetická, funkční a vnitřní. Estetická označuje konzistenci vzhledu a stylu, zlepšuje rozpoznání a vyjadřuje emoční očekávání. Funkční konzistence označuje konzistenci významu
a funkce a zvyšuje použitelnost, díky tomu že lidem umožňuje využít stávajících znalostí funkčnosti daného
designu. Vnitřní konzistence označuje konzistenci s ostatními prvky v systému a posiluje v lidech důvěru [16].
23
4 Proces návrhu gamifikace
Plné porozumění gamifikace je pouze začátek procesu jejího návrhu. Abychom návrh aplikace zvládli, musíme nejenom plně porozumět teorii, ale také chápat praktický postup. Tato kapitola
se bude věnovat celému procesu návrhu gamifikace, tedy od plánování mechanik a dynamik, přes
grafické návrhy až po samotnou implementaci do systému.
Existuje mnoho způsobů, jak se chopit tohoto problému a záleží na individuálních zkušenostech, jak postupovat při procesu návrhu. Stejně jako zatím neexistuje unifikované/normované
rozdělení mechanik, tak neexistuje unifikovaný/normovaný postup, kterým se lze řídit při návrhu
gamifikace. Postup tedy nemá jasně danou strukturu a vychází ze zkušeností designera. V této kapitole
se zabývám tímto procesem a stanovuji jednotlivé fáze, kterými je vhodné projít, abychom nejenom
dotáhly gamifikaci do konce, ale také aby výsledek byl uspokojivý a splňoval požadavky. V této kapitole se pokusím tento postup definovat a to s důrazem na grafické ztvárnění a celkovou estetiku.
4.1 Frameworky a jejich použití v procesu návrhu
V průběhu návrhu našeho gamifikovaného systému nám mohou pomoci různé frameworky.
Existuje jich mnoho a používají se v různých kontextech. Některé se používají pro gamifikaci nejčastěji, některé spíše okrajově či doplňkově. Pomocí frameworků se můžeme soustředit na důležité věci,
které bychom neměli opomenout. Pokud chceme navrhnout systém komplexní, řídíme se zpravidla
více frameworky, které pokrývají větší škálu vlastností a funkcionality. Můžeme tedy rozdělit celý systém do subsystémů, které můžeme navrhovat zvlášť. Čím podrobněji tedy rozdělíme problém na
podproblémy, tím detailnější a komplexnější systém bude. Jediný framework, který je založený čistě na
návrhu gamifikace, je Octalysis.6
4.1.1 Octalysis
Octalysis je jeden z nejkomplexnějších frameworků pro návrh gamifikace a nejspíše jediný
framework zaměřující se čistě na gamifikaci. Soustředí se na to, že gamifikace je design, který klade
největší důraz na lidskou motivaci v procesu, čemuž se říká human‑focus design. Ten se zaměřuje na to,
že lidé mají v průchodu systémem pocity nejistoty a důvody, proč chtějí nebo nechtějí dělat určité věci.
Proto se systém optimalizuje s ohledem na tyto pocity.
6) Framework Octalysis pochází od experta na gamifikaci Yu-kai Choua, který o této metodice přednáší na Standfordu, účastnil se konference TEDx
a patří mezi 3 přední gamifikační guru.
24
PROCES NÁVRHU GAMIFIKACE
Octalysis pracuje se základními disky zvanými „Core Drives“, kde nás každý disk motivuje
k určité činnosti. Zároveň nás i různé herní mechaniky „tlačí vpřed“ odlišně — některé inspirujícím a motivujícím způsobem, jiné manipulativním a obsedantním způsobem. Právě tímto se zabývá
gamifikační rámec nazvaný Octalys, který je založen na tvaru osmiúhelníku s 8 základními pohony
reprezentující každou stranu [22].
Mimo Octalysisu existuje mnoho dalších frameworků, kterými se lze řídit při návrhu našeho
gamifikačního řešení aplikace, jako např.: MDA framework7 [23], RAMP framework8 [24], GAME framework9 [25] či EEEE framework10 [26]. Popis frameworku Octalysis je v mé diplomové práci velmi
stručný, jelikož toto téma není prioritní. Pro celý proces návrhu gamifikace je ovšem možnost použití
frameworků důležitou součástí, která by neměla být opomenuta.
4.2 Porozumění problému a kontextu
4.2.1 Definice problému
Prvním krokem pro proces návrhu je porozumění problému, který se snažíme řešit, a stejně
tak kontext, v němž je problém vložen. Je velmi pravděpodobné, že v počátečním stádiu původ problému není jasný a dostaneme se k němu až postupně.
Existují tři základní aspekty, které musí být zváženy v této fázi. Firemní kultura (company
culture), obchodní cíle (business goals) a nejdůležitější porozumění cílových uživatelů ( understanding
of users). Firemní kultura má velký vliv na to, jak budou hráči komunikovat (interagovat) a reagovat na
iniciativy gamifikace. Aby bylo možné dosáhnout účinné změny chování, musíme se ve firemní kultuře
dobře orientovat. Různé kultury můžou být více či méně otevřené novým nápadům (myšlenkám), mají
různě pevné či ohebné povinnosti, jsou různě orientované na kooperaci (spolupráci) či konkurenceschopnosti a mají formální či neformální prostředí mezi ostatními charakteristikami (vlastnostmi).
Na začátku se tedy musíme pokusit identifikovat hlavní aspekty firemní kultury a ujistit se, že
budou zohledněny v následujících etapách.
Iniciativy gamifikace by měly být rovněž v souladu s obchodními cíli společnosti – musí
sloužit jako podpora pro další probíhající akce. V případě, že iniciativa ovlivňuje ostatní oblasti, je
důležité porozumět jejich cílům a specifickým obchodním cílům pro vyhnutí se konfliktům. Pro
dosažení účinné změny v chování je nezbytné porozumět různým aspektům lidí, kteří jsou zapojení
7) MDA = Mechanics, Dynamics and Aesthetics.
8) RAMP = Relatedness (souvislost), Autonomy (nezávislost), Mastery (osvojení) and Purpose (smysl).
9) GAME = Gather, Act, Measure and Enrich.
10)EEEE = Enrol, Enthuse, Engage and Endear.
25
do problému a jak tito lidé tomuto problému čelí v každodenní rutině. Způsob, jakým uživatelé
vstřebávají nové znalosti, emocionální charakteristiky vztahující se k práci, jejich estetické vnímání
světa a kulturních záležitostí: to jsou některé elementy, které musí být velmi pečlivě nastudovány
pro vytvoření dobré gamifikace.
Prostřednictvím následujících technik budeme chápat, jaké typy chování potřebujeme změnit.
Pro zíkání potřebných informací používáme následující techniky, a to interview, pozorování a uplatňování specifických nástrojů pro syntézu těchto zjištění.
4.2.2 Získání požadavků na systém
Pro specifikaci požadavků se využívají různé metody, které jsou využívány v softwarovém
inženýrství. Při tvorbě gamifikace (ať už u nové aplikace nebo při redesignu již stávající aplikace) můžeme plně využít poznatky z vývojového procesu aplikace.
Interview je jedna z nejvíce intuitivních technik. Promluvíme si s lidmi, u kterých chceme
změnit chování a snažímese pochopit, čím jsou motivovaní a jaké jsou jejich postoje k sebevyjádření.
Rozhovory můžou být neformální, aby se lidé necítili pod pracovním tlakem. Rozdíly v hierarchii často
ohrožují výsledky, takže se doporučuje pro získání dat usilovat o neutrální osobu v rámci organizační
struktury.
Mezi základní tipy na otázky patří:
a)
ptejte se na otevřené otázky (vyhnout se odpovědím ano/ne)
b)
neovlivňujte odpovědi a reakce
c)
povolte respondentům mluvit a nepřerušujte je
d)
zeptejte se jich na minulé situace – lepší pochopení a ilustrace problému
e)
často se ptát na otázky „proč“ – slouží pro pochopení motivace
f)
zaznamenávejte si veškeré detaily rozhovoru
Odpovědníky je další metoda pro získání informací od cílových uživatelů. Odpovědníky lze
zprostředkovat více způsoby, pomocí online nástrojů až po tužku a papír. Online odpovědník obvykle
přináší více povrhcní informace, proto je vhodné pomocí rozhovoru získat kvalitativní data a pomocí
dotazníků kvantitativní.
26
„5 Why’s“ je dobrá technika pro pochopení původu problému. Skládá se z pokládání otázek
jedna za druhou, přičemž se položená otázka skládá z předchozí odpovědi. Tato metoda se nazývá
„5 Why’s“ protože většinou po právě 5 položených otázkách se dostaneme k jádru problému.
Další možná technika je pozorování, tedy pozorování lidí při práci se systémem.
Prostřednictvím této techniky můžeme zjistit asertivněji informace a zjistíme, co lidé skutečně dělají
a ne to, co řikají že dělají. Je běžné, že respondenti říkají ty věci, které si myslí, že výzkumný pracovník
chce slyšet. Proto je vhodné zapojit techniku pozorování pro získání informací o problémech v systému. Při pozorování je důležité pochopit jak jednotlivce, tak kontext, v jakém se nachází.
4.2.3 Vizuální pomůcky a syntéza informací
Po získání požadavků je důležité si uvědomit, jak spolu jednotlivé požadavky souvisí. Pro
lepší představivost je přínosné používat vizuální prostředky, které nám pomůžou k utřídění požadavků
a vlastností a ujasnění si, že jsme na nic nezapomněli.
„Mind Map“ je diagram koncipovaný na uspořádání myšlenek pomocí vizuálního a textového způsobu, který pomáhá zobrazit různá témata s vizualizací jejich propojení. To může být velmi
užitečné při procesu návrhu a může to fungovat jako vodítko pro náš projekt. Začínáme s centrálním
tématem a postupně větvíme na sekundární a terciální témata. Pro každou větev se tvoří subvětev,
které dané téma více rozvíjí.
„User’s journey“ je technika, pomocí níž můžeme pochopit akce, které člověk potřebuje
k provedení, což může sloužit jako základ porozumění „jak“ a „kdy“ gamifikace může být použita.
Jedná se o reprezentaci všech kroků, kterými uživatel prochází před, během a po použití produktu
či služby nebo při plnění úkolu v rámci společnosti. Kromě popisů jednotlivých akcí, je možné přehlédnout tzv „touchpoints“, což jsou situace při průchodu systémem, kde je vhodné zapojit některé
gamifikační mechaniky jako například zpětnou vazbu či zvětšení motivace. Mapováním těchto bodů
můžeme snáze identifikovat příležitosti pro vložení gamifikačních elementů, sdělování informací či
vývoji motivátorů. Při mapování se snažíme zjistit, co je nejdůležitější pro uživatele v každé fázi cesty.
Pokud naše gamifikační iniciativy jsou v rozporu se skutečnými potřebami hráče, pozitivní efekt této
mechaniky se snižuje a je vhodné zvážit, zda tuto mechaniku implementovat či ne.
27
Obr. 4.1: Znázornění techniky „User’s journey“ [28].
„Empathy map“ je mapa, která znázorňuje syntézu informací o uživateli, kde můžeme
identifikovat, co uživatel říká, co cítí a myslí si. Tato mapa slouží pro snadnější porozumění kontextu,
chování, obav a uživatelovy aspirace. Chceme-li využít mapu efektivně, použijeme věty, které reprezentují, co uživatelé slyší nebo říkají nebo použijeme verbální konstrukce, které reprezentují, co vidí.
Obr. 4.2: Znázornění techniky „Empathy map“ [28].
U „Stakeholders map“ se jedná o vizuální prezentaci různých osob nebo skupin působících
ve studované oblasti, která pomáhá identifikovat vztahy mezi jednotlivci/skupiny. Zaprvé se snaží
identifikovat činidla, tj. jednotlivce i skupiny, které ovlivňují nebo jsou ovlivněny studovaným problémem. Vybereme si jednu osobu jako centrální zaměření a začneme přidávat ostatní činidla a umístíme
28
je podle jejich vztahu s centrální osobou. Řízeno existujícím identifikačním kofliktem Tato mapa může
podporovat vytváření různých rolí v systému pro pozitivní ovlivnění těchto vztahů. Chcemeli zesílit
efekt této mapy, můžeme se pokusit identifikovat zájmy a motivace jednotlivých činitelů, jak spolu
souvisejí a komunikují [28].
4.2.4 Porozumění cílových uživatelů
Při definování problému je důležité pochopit, kdo jsou naši hráči/uživatelé a jak jejich chování může být použito k řešení problému nebo naopak jak jejich chování může být změněno. Při
definování našich cílových uživatelů zvažujeme více charakteristik, které nám dokáží více specifikovat
a zaměřit naší gamifikaci. Pokládáme si tedy otázku nejen kdo jsou naši uživatelé (dle věku, pohlaví,
odborných zkušeností, demografie,...), ale také jaké aktivity/chování mají, jaký typ hráčů jsou (achiever, socialiser,...), jaké je jejich typické chování vzhledem k demografii a jestli jsou do systému zapojení
i jiní lidé než cíloví uživatelé.
Při definování našich cílových uživatelů používáme následující techniky a charakteristiky.
Persona
Persona je typický příklad fiktivního charakteru založeného na analýze pozorování chování
představující různé potřeby, motivace, přání a očekávání. Jedná se o techniku, která pomáhá při procesu návrhu tím, že poskytuje přehled o významných aspektech uživatele, které je třeba vzít v úvahu. Je
to také forma usnadňující nalezení zarovnání informací mezi uživatele mezi všemi zúčastněnými, kteří
jsou zapojení do projektu [27].
Věk
Různé věkové období mění u lidí způsob hraní her a způsob využití herních prvků. Pro herní
návrháře, dva nejvýznamější demografické proměnné jsou věk a pohlaví. Jak stárneme, měníme způsob „hraní si“. Stejně jako ženy a muži hrají různě, i věkově odlišitelní lidé hrají různě.
Profesní znalosti
Jaké očekáváme znalosti od uživatelů, kteří budou využívat gamifikaci v naší aplikaci? Jedná
se o odbornou aplikaci, která využívá odborné prvky specifické pro danou problematiku? Jedná se
o tzv. serious game11? Důležité je si uvědomit, že i když máme aplikaci s odborným zamřením, můžeme
29
oslovit mnohem větší rozsah uživatelů, než danou problematiku zná. Jako příklad můžeme použít aplikaci Foldit, která měla daleko větší rozsah, než se předpokládalo. Zapojit se tedy mohly jak uživatelé,
kteří „vnitřnímu fungování“ aplikace zcela rozuměli, tak i lidé, kteří brali svou účast v aplikaci pouze
jako zpestření. Přesto se mohli zapojit a mít užitečné výsledky svým konáním!
Můžeme si položit otázky typu: Jakou práci hráči mají? Co je jejich pracovní náplň? Jaké mají
výzvy zapojené do každodenních úkolů?
Typy hráčů
Pro jaké typy hráčů vytváříme náš gamifikovaný systém? Kdo jsou prioritní cíloví uživatelé?
Co je pro ně typické a jaké herní prvky nejvíce využívají? Všechny tyto otázky si musíme položit a dokázat na ně odpovědět.
4.3 Stanovení cílů
S jasnějším pochopením problému a cílových uživatelů stanovíme principy návrhu pro naši
gamifikaci. S použitím principů se vyvarujeme kritickým bodům. Zapojíme spolupráci, podnítíme
výměnu informací mezi hráči. S ohledem na principy návrhu, definujte misi. Snažíme se být specifičtí
a definujeme takový cíl, který je měřitelný. Tedy místo „zlepšení prodeje“ použijeme „podněcujte zaměstnavatele ke sdílení denních informací o nejlepších prodejních postupech“.
4.3.1 Stanovení základních elementů
Doposud jsme si vymezili problém, který chceme řešit, pochopili jsme obchodní cíle, stanovili jsme si cílové uživatele a definovali poslání, které chcem gamifikací dosáhnout. Teď nastává doba
pro zamyšlení se nad skutečnými elementy gamifikace. Jaký bude příběh, který nás bude provázet při
průchodu gamifikací? Jaké je téma/námět/theme gamifikace? Jaká bude estetika?
V této fázi je vhodné určit základní stavební kámen pro návrh gamifikace, a tím je theme
a aesthetics, protože tyto elementy hrají významnou roli v symbolickém kontextu, který pomáhá
hráčům porozumět pravidlům a cílům z předchozích znalostí. Jako příklad můžeme uvést příklad
aplikace EpicWin, kdy estetická část gamifikace ja navržená do období Vikingů. Celá grafika tedy
vychází z tohoto tématu a definuje nejenom základní grafické rozhraní, ale také vizualizaci avatara
(Vikinga), mapu, která znázorňuje postup (dle získaných bodů), odměny (samonosný toulec, omšelý
11) Serious game, tedy v překladu „vážná hra“, simuluje vážné situace a problémy ze skutečného světa ale bez skutečných rizik v životě. Tento princip
hry je vhodný pro vzdělávací charakter.
30
dřevěný kalich,...), ale i způsob vizualizace zpětné vazby (při postupu do dalšího levelu prorazí ruka
válečníka desku).
Estetika je herní vzhled, vůně, chuť a pocity. Pro vytvoření dobrého zážitku, mechaniky typu
příběh a theme by měly být zváženy a zakomponovány do naší aplikace.
4.4 Stanovení mechanik
V této části jsme připraveni definovat mechaniky a začít s procesem konkrétního návrhu.
Každá hra/gamifikace by měla mít jasnou definici z hlediska cílů a trvání. Hra může končit, když hráč
dosáhne cíle, může trvat po určitou dobu nebo může být nekonečná. Jedna z možností, jak zaujmout
dlouhodobě hráče, je čas od času poskytnout hráčům nové verze a možnosti v rámci systému. Jednou
z možností je využití tzv. Game’s dramatic arc12, který je odvozen od literárního a filmového umění a pomáhá udržet zábavu a upoutání hráče od začátku až do konce hry či filmu.
V této části bychom již měli vědět, co od naší aplikace chceme, kdo jsou naši uživatelé
a měli bychom tušit, co budou chtít uživatelé od naší aplikace. Pro stanovení jednotlivých mechanik
si projděte pomocí vaší Persony aplikaci a v každém kroku si určete, co by se mělo stát a co by měl
uživatel vidět. V jaké fázi by měly nastat motivační mechaniky a jakou funkci by měly splňovat. Při
použití zvažte také frekvenci výskytu (tedy jestli je dostupná uživateli vždy či po omezenou dobu nebo
náhodně).
4.5 Porozumění UX v procesu návrhu
Na začátku je třeba si ujasnit, jaké akce a interakce budou uživatelé (chtít) používat.
Potřebujeme znát různé souvislosti, které se s těmito akci pojí a snažíme se vytvořit širokou škálu
podnětů praktických akcí – získání či odemčení „něčeho“ – i nepraktických akcí – ocenění a odznaky.
Následující pravidla by nám měla pomoci s vytvářením UX pro gamifikovanou aplikaci.
1)
První věc, kterou musíme udělat, je poznat své publikum – v našem případě uživatele. To
znamená poznat jejich průměrný věk, pohlaví, orientaci ve webovém rozhraní atd. Poznání
těchto lidí nám pomáhá stanovit základní design a interakce se systémem. Pokud jsou například naši cíloví uživatelé právníci či lékaři, musíme zeslabit hravost designu a držet se
modernějšího a méně rušivého přístupu [22].
12) Označení pochází z filmové stavby dramatu - Expozice, Kolize, Krize, Peripetie a Katastrofa.
31
2)
Jako další věc bychom si měli stanovit cíle a všechny akce, které uživatelé mohou provádět v rámci systému. Zároveň bychom si měli zvýraznit ty interakce, které uživatelé budou
používat nejčastěji. K těmto akcím by měli mít uživatelé nejsnadnější přístup a to v rámci
celého systému. Například v aplikaci Foursquare najít daný podnik a ohodnotit ho.
3)
Všechny akce, které budou pro uživatele v rámci systému přístupné, si vložíme do tabulky
a ohodnotíme je ve formě bodů. To nám pomůže stanovit priority a lépe vidět v jaké kontextu se akce nacházejí. Čím víc bodů akce má, tím je pro uživatele důležitější. Důležitost
jednotlivých akcí se může lišit dle toho, v jaké části systému se nacházíme. To je třeba zahrnout do našeho bodování akcí (např.: vytvořením tabulky na každou část v systému).
4)
Zeptejme se sami sebe, proč by měl chtít uživatel provést tuto akci? Jakou k ní bude mít motiovaci? Bude ji chtít sdílet? Motivace pro vykonání akce je důležitý aspekt, který je potřeba
zasadit do našeho procesu návrhu.
5)
Do jaké míry je naše aplikace založená sdílení a spolupráci uživatelů dohromady? Jsou jednotlivé akce založené na sdílení s ostatními nebo jsou založené na jednotlivci? Sdílení pomáhá
pro rozšíření oblasti našich uživatelů a používá se zejména v komerčních aplikacích.
6)
Stanovení odměny, díky které se budou uživatelé vracet zpět. Jaká motivace bude pro uživatele dostatečná? Při jejím stanovení si zároveň musíme rozmyslet, jak často (s jakou frekvencí)
bude daná akce probíhat. Chceme, aby se uživatelé vraceli každý den nebo třeba jednou za
týden či měsíc? Notifikační element je třeba zařadit do procesu návrhu.
7)
Pro lepší pochopení interakcí mezi uživatelem a systémem je vytvořit si tzv. User journey neboli uživatelská cesta aplikací. Zahrnuje typický (i netypický) průchod naší aplikací. Začíná na
domovské obrazovce a prochází systémem postupně tak, jak by nejspíš procházel systémem
sám uživatel. Ujasníme si tím, k jakým akcím by měl mít uživatel v dané podstránce přístup.
8)
Pro lepší vizualizaci je vhodné použít wireframy a přesně znázornit rozložení elementů
a jejich vzájemnou propojenost. Tyto wireframy lze již použít jako základní testování – např.:
člověk seznámený s aplikací ale neseznámený s uživatelským prostředím. Díky tomu získáme
zpětnou vazbu a design můžeme více uživatelsky přizpůsobit.
32
4.6 Porozumění grafického návrhu aplikace
V této fázi bychom měli mít definované cíle naší tvorby, měli bychom chápat problém,
který se snažíme vyřešit, znát své cílové uživatele a náš grafický návrh postavit dle předem připravených wireframů.
4.6.1 Gamifikační estetické kolo
Při procesu návrhu grafického ztvárnění aplikace neexistuje jedna cesta, jak ztvárnit veškeré
prvky aplikace, a přestože estetika je brána spíše z uměleckého hlediska, lze k ní přistupovat systematicky. Samotný grafický návrh se dá totiž rozdělit na jednotlivé části a kroky, které po spojení tvoří
celkový dojem gamifikace. Je ovšem důležité si uvědomit, že veškeré kroky spolu úzce souvisí. Nelze
tedy k návrhu přistupovat krok po kroku, ale spíše jako k hierarchii či stromu, kde nadřazená vlastnost
ovlivňuje níže postavené vlastnosti. Ty mohou být propojeny do sítě a ovlivňovat tedy jedna druhou.
V první části je vhodné si vytvořit prvotní moodboard, který nám představí základní grafické prvky. Tam se nesoustředíme na detaily, ale naopak na celek a hlavně, jaký pocit v nás vyvolává.
Pokud v nás vyvolává ty emoce/vlastnosti, na kterých má být aplikace postavena a na jakých funguje
samotná společnost, grafika je naržená správně.
V druhé části si před samotným návrhem grafického ztvárnění musíme ujasnit theme, tedy
námět neboli motiv. Gamifikace vychází z her a herních prvků, kde je námět také využíván. Je to důležitý prvek, který drží veškerý příběh, souvislosti a podněty dohromady. Je to svět, ve kterém se naše
gamifikace odehrává. Tento svět nás musí vtáhnout dovnitř, proto je důležité jeho promyšlení a to do
detailů, kde právě ty detaily vytvářejí dojem dokonalého zážitku.
Třetí část je určení perspektivy a kamery, tedy z jakého pohledu je příběh vyprávěn a jak uživatel s prostředím interaguje. Jde tedy o rozhodnutí, zda průchod aplikací vykonáváme pomocí druhé
osoby (v případě gamifikace pomocí tzv. avatara), nebo sami za sebe.
Ve čtvrté části si musíme promyslet scénář, který využívá dynamiky „storytelling“. Scénář se v podstatě skládá ze stejných částí jako u filmu, tedy z expozice, kolize, krize, peripetie a katastrofa. Ale v gamifikaci
se tento přístup využití scénáře liší v jedné důležité věci. Gamifikace vůbec nemusí mít nějaký závěr, naopak se
používá takový příběh, který sice má napsaný závěr, ale k závěru uživatel nikdy nedojde a to z prostého důvodu. Gamifikace slouží jako marketingový nástroj, který se snaží vzbudit u uživatelů neustálou potřebu danou
aplikaci využívat a stále postupovat kupředu, ale nikdy neskončit. Autoři gamifikovaných aplikací nechtějí, aby
zákazník přestal jejich aplikaci po nějaké době používat, naopak chtějí, aby ji využívali napořád. To samozřejmě
33
v současném konkurenčním prostředí nelze poskytnout, rozhodně se ale nestane, že zákazníci přestanou používat aplikaci kvůli tomu, že scénář gamifikace skončil. Z estetického hlediska je důležité si uvědomit, jakým
způsobem budeme příběh uživateli vyprávět. Uvedení do příběhu aplikace bude pouze jako krátké intro při
registraci uživatele či to bude prvek, se kterým budeme pracovat celým průchodem aplikace? Je důležité si to
promyslet a dle zvoleného použití zvolit správné grafické ztvárnění.
V páté části se soustředíme na jednu z nejdůležitějších částí z pohledu UX a to tzv.: dashboard.
Sem se vztahuje celkový interface, tedy veškeré rozmístění grafických prvků, které informují uživatele
o jeho současném statusu. Definujeme tedy část estetiky, kterou můžeme nazývat „makro prostředí“ a která
definuje navigation flow, kde vidíme, jak naše rozhraní bude fungovat [15].
Těchto 5 částí tvoří základní střed, od kterého se odvíjí další menší části. Mezi ty patří následující:
1)
pozicování – rozmístění na obrazovce jednotlivých elementů dashboardu, jakmile je definováno rozhraní navigačního toku (=dashboard), musíme stanovit, jak budou tyto prvky
rozmístěny
2)
tvar – různé formy estetických elementů, které vyzdvihují a doplňují theme, prvky jsou
obvykle vnímány pomocí tvarů a my si musíme zvolit, jaké tvary budou na dashboardu využívány. Kruh značí nevinnost, mládí, energii a ženskost. Oproti tomu trojúhelník značí agresi,
sílu a ráznost.
3)
ikonografie – implicitní či explicitní mínění, jak se estetické elementy předávají hráči. Jedná
se o porozumění ikonám, které musí jasně vyjadřovat danou funkci
4)
FXs – jakýkoliv druh efektu, který funguje v uživatelském prostředí jako spouštěč během
toho, co hráč interaguje se systémem. Hráčům se v podstatě zobrazí, že systém rozpoznal
jejich akce a graficky je zaznamená.
5)
barvy – barevná kombinace používaných barev
6)
font – primární a případně sekundární font, které v rozhraní figurují
4.7 Testování aplikace a prototyping
Cílem prototypingu je ověřit myšlenku, kterou se snažíme vyvíjet. Zároveň to slouží jako
možný pohled na zlepšení dosavadních návrhů. Vytvoříme prototyp, který je hmatatelný a umožní
nám začlenit základní interakce se systémem. Zahrnuje proces iterace, ve kterém náš návrh neustále
34
zlepšujeme. Prototypy přispívají ke snížení nejistoty projektu a pro zjištění rizik, které jsou nepostradatelné pro realizaci projektu.
Po nasazení gamifikace je důležité neustále sbírat data o chování uživatelů a pracovat s těmito
daty. Pokud chceme, aby se uživatel nezačal po čase v naší aplikaci nudit, musíme do aplikace vnést
dlouhodobý motivační prvek. Tím může být „efekt překvapení“, tedy něco úplně nového, co uživatel
nečekal a pozitivně ho to překvapilo. V současné době existuje mnoho nástrojů, které sledují pohyb
uživatele na naší webové stránce. Můžeme sledovat jejich interakce a definovat slepá místa, která je
třeba zlepšit. Hodnocení (a zpětnou vazbu) jednotlivých mechanik můžeme získávat rovnou v rámci
systému. Například při zobrazení „tipu“ uživateli použít tlačítko „Nezajímá mě to“ a tím pádem zjistit,
jestli uživatelé mají o danou mechaniku zájem či nikoliv.
35
5 Gamifikace v ČR a ve světě
Česká republika v odvětví gamifikace poněkud zaostává, nicméně v poslední době se na téma
gamifikace a udělování odznaků soustředí čím dál více firem. Mezi takovou lze zařadit Veriod, což je
první česká ověřená platforma pro vydávání a sbírání digitálních verifikačních odznaků. Ty fungují
jako potvrzení, univerzální způsob, jak poznat, doložit, zaznamenat a sdílet životní úspěchy – a to mezi
jednotlivci, nebo mezi organizací a jejími klienty, mezi spolupracovníky či partnery. Veriod zároveň
obsahuje verifikační mechanismus, který po nahrání obrázku určí, o jaký digitální odznak se jedná
a jestli je vůbec pravý, tedy validní.
Jedna z prvních webových stránek, která se rozhodla pro využití gamifikace, byl brněnská
Čajovna Za zrcadlem. Motiv byl na způsob Alenky v říši divů, kde objednávky, hraní deskových her
a návštěva kulturních událostí jsou ohodnoceny body a podpořeny herními úkoly. Plněním úkolů
a sbíráním bodů se postupuju v úrovních hry. Zákazník získá na základě unikátního kódu přístup do
webového rozhraní, které sleduje jeho průběh hrou. Při placení se zákazník identifikuje svým kódem
a doplní, co zajímavého v čajovně dělal, případně jaké ze svých příběhových úkolů splnil. Díky statistikám mají zákazníci přehled, jak si stojí v boji o prestižní titul čajového guru nebo největšího hráče
deskových her. Z popisu je vidět mnoho trhlin a slepých míst, což byl nejspíš důvod, proč z celého
nasazení tohoto gamifikovaného systému nakonec sešlo.
Následující aplikace (v českém prostředí) dosáhli většího úspěchu z pohledu použití gamifikace. Výčet je ovšem velmi malý a je tedy vidět, že v porovnání se světem jsme v této oblasti velmi
pozadu. Lze to i pozorovat na projektu Gamification World Map, který slouží jako repozitář projektů
založených na gamifikaci se zapojením odborníků a průkopníků v této disciplíně.
Obr. 5.1: Gamification World Map a zobrazení projektů zaměřených na gamifikaci v Evropě [30].
36
GAMIFIKACE V ČR A VE SVĚTĚ
5.1 Gamifikace v ČR
V České republice dosáhly největšího úspěchu následující gamifikované aplikace.
5.1.1 Kód Salomon
Mezi české aplikace zaměřené na gamifikaci lze zařadit hru Kód Salomon, kterou vytvořila
firma Gameleon. Jedná se o aplikaci na Android, kde má hráč za úkol objevit v městě Ostrava tajemný talisman a Ostravu tím zachránit. Aplikace vznikla jak pro místní obyvatele, tak pro nemístní, pro
poznání města Ostrava, pro závod s přáteli a pro prověření, jak to komu myslí. Kód Salomon získal
kladné ohlasy a vyhrál 3. místo v AppParade. Je detailně promyšlený, obsahuje konkrétní postavy a má
svůj příběh. Obsahuje 3 různé scénáře pro časové přizpůsobení hráčů – místní obyvatelé můžou mít
delší scénář než výletníci, kteří navštíví Ostravu pouze na den. Pomocí hry lze navštívit nejvýznamější
památky města a seznámit se tak s historií Ostravy. Samozřejmostí je pak výsledková listina, kde se
jednotlivý hráči mohou porovnávat, kdo jak rychle vyřešil různé záhady. Design odpovídá charakteru
hry, je vytvořen komixovým stylem a odpovídá historickému tématu.
Storytelling, tedy vyprávění příběhů, je velmi účinný způsob, jak uživatele vtáhnout do aplikace. Pokud umíme gamifikaci správně použít, lidé se pomocí ní dokážou mnohé naučit a to efektivněji
a rychleji, než v negamifikovaném prostřední.
5.1.2 Online bankovnictví mBank
Potenciál gamifikace se rozhodla využít mBanka a to ve svém internetovém bankovnictví,
kde se rozhodla zvýšit zapojení uživatelů a vzdělávání uživatelů o možnostech internetového bankovnictví. Pro tento účel zvolila mBanka několik mechanik, kam patří například získané body, žebříčky,
odznaky a odměny ve virtuální měně.
Motivace funguje na vnitřním principu, tedy uživatele se motivuje sám, bez vnějšího ovlivňení. Jedná se o vzdělávací gamifikaci, tedy o naučení uživatelů potřebným věcem, které můžou
potřebovat v jejich internetovém bankovnictví. Motivace je zprostředkována pomocí bodů, s jejiž
pomocí lze získat různé typy odznaků, které můžeme sdílet skrz internet.
Celkový design je navrhnutý v moderním flat designu s využitím sytých jasných barev. Celkový
dojem je svěží a moderní, jako se prezentuje samotná banka a její vizuální styl.
37
5.1.3 Žatecký stroj času
Dalším využití gamifikace v českém prostředí je Žatecký stroj času, kde je využita gamifikace
v rámci expozice muzea. Jedná se o jedno z nejefektivnějších použití gamifikace v ČR a to v rámci
vzdělávacího projektu. Pomocí gamifikace a interaktivního prostředí šel vyřešit problém, jak „nahustit“ mnoho informací do malého prostoru. Návštěvníci prochází expozicí s tabletem s aplikací
Žatecký stroj času, který obsahuje příběh, jednotlivé úkoly a nabízí místa k rozhodování, což pro každého hráče vytváří individuální zážitek ze hraní/učení. Hra se navíc dělí na 6 miniher, které zábavnou
formou provedou návštěvníka tématy expozice (školství, průmysl, osobnosti,...). Celá aplikace tedy
slouží pro rychlý přístup k informacím, což je velmi žádané v dnešní uspěchané době. Zároveň slouží
jako motivace pro studium, aby si návštěvník při studiu odnesl i zážitek. Ten navíc podpoří i trvalejší
uchování nabytých znalostí.
Obr. 5.2: Ukázka aplikace Kód Salomon.
Obr. 5.3: Ukázka gamifikace v internetovém bankovnictví mBank.
Obr. 5.4: Ukázka aplikace Žatecký stroj času.
38
5.2 Gamifikace ve světě
Gamifikace ve světě má rozhodně větší ohlas a využití než v České republice. Pokud se ale
zaměříme čistě na webové či mobilní aplikace, použití gamifikace je stále poměrně řídké. V této kapitole popisuji pouze nejznámější aplikace.
5.2.1 Foldit
Aplikace, která využívá gamifikaci pro vědu. Claim zní „Folding proteins for fun & science“
a je to jedná z mála aplikací, které se v oblasti vědy podařilo získat velkého (světového) zapojení. Foldit
je typická aplikace, kde je použití gamifikace přiměřené a správné. Aplikace se nesnaží zapůsobit na
všechny typy hráčů ani využít veškeré mechaniky, co se nabízejí. Naopak využívá jen ty, které v aplikaci
mají smysl. Samotné grafické rozhraní je vybudováno na jednodušší a zastaralejší bázi, to ovšem v oblasti vědy není takový problém. Nejdůležitější je totiž poslání, tedy důvod proč tato aplikace vznikla
a co má za účel. Aplikace Foldit je představitelem „Epic journey“, tedy umožňuje uživateli cítit se jako
„hrdina“ a vydat se na epickou cestu, která má skutečný smysl.
Foldit vznikl v roce 2008, je tedy vidět, že gamifikace má hlubší kořeny. Foldit je online
puzzle aplikace, která vyzývá hráče jakéhokoliv věku, aby poskládali proteinový struktury pomocí nejrůznějších nástrojů a metod. Ty nejvíce obodované jsou následně zkoumány výzkumníky, kteří ověří
jejich pravost v přírodě. Největší úspěch měl Foldit v roce 2011, kdy se „hráčům“ podařilo rozluštit
strukturu bílkoviny, kterou se snažili vyřešit vědci přes 15 let. Hráčům se to podařilo za 3 týdny. Je tedy
vidět, že správně navržená gamifikace má skutečný smysl, a to i pro použití v reálném životě.
Gamifikace je zde využívána právě proto, aby nezaujala jen vědce a studenty z příslušných
oborů, ale aby se mohl zapojit libovolný člověk, který má rád výzvy. Při průchodu aplikací člověk nemusí zcela chápat, co tvoří nebo dělá, přesto se může dostat k výsledku, který bude pro vědu prospěšný.
Foldit změnil své grafické rozhraní několikrát, jednak proto že je na trhu již 8 let a také proto,
že původně se vůbec neočekávalo, že by Foldit dosáhl takového úspěchu.
39
5.2.2 Foodzy
Aplikace Foodzy existuje jako webová i mobilní aplikace od roku 2011. Jedná se o aplikaci, která se řídí heslem „turn
healthy living into a game“, které vypovídá za všechno. Po přihlášení do aplikace si uživatel nastaví osobní údaje a pak může
využívat základní verzi nebo placenou verzi Pro. Základ aplikace
tvoří jednotlivé druhy jídel, které člověk zadává do systému. Při
přidání jídla stanovíme datum, kdy jsme jídlo snědli. Systém nám
různými vizualizacemi poskytuje informace, jak zdravě se stravujeme, co jsme jedli, kde jsme na tom špatně a kde dobře, kolik
tekutin jsme vypili a jaké jídlo jíme nejčastěji.Celkový design je
laděný do jednoduchých piktogramových ikon, které znázorňují
dané jídlo. Styl pomocí flat designu a sytých barev bez přechodů
naznačuje, že se jedná o modernější aplikaci.
Obr. 5.5: Ukázka aplikace Foodzy.
5.2.3 EpicWin
Jedná se o aplikaci s heslem „Level up your life“ a slouží pro sepsání úkolů, po jejichž splnění
se posouváme ve hře (aplikaci) vpřed. Obsahuje výběr avatara, virtuální měnu, oblasti systému (mapa
a její průchod pro znázornění progressu) a virtuální odměny. Jednotlivým úkolům lze přiřadit různá
priorita a důležitost (dle bodového ohodnocení), zaměření (strength, stamina, intellect, social, spirit)
a splnění úkolu je doprovázeno vizuální zpětnou vazbou. Theme je založený na vikingách a grafické
ztvárnění tento námět podporuje. Aplikace je jednodušší a není do ní zahrnuta motivace pro dlouhodobější využívání (chybí například nějaké využití virtuální měny – získání virtuálních předmětů,
zlepšení vlastností,....). Náhled aplikace můžete vidět na stránce 8.
5.2.4 Duolingo
Vzdělávací aplikace Duolingo se považuje ze nejúspěšnější aplikaci se zaměřením na gamifikaci. Je přeložená do několika jazyků a důvod, proč je tak úspěšná, je správné nasazení mechanik
a dynamik v aplikaci, a to vše s velkým důrazem na estetiku a UX. O této aplikaci vzniklo již mnoho
rozborů a proto zde nebudu uvádět další podrobnosti. Náhled aplikace můžete vidět na stránce 21.
40
6 Tvorba vlastní gamifikované aplikace
Výsledkem diplomové práce je vzdělávací online aplikace, která vysvětluje komplexní gamifikaci pomocí vizuálních elementů se zaměřením na samotné mechaniky gamifikace. Pro návrh mé
aplikace jsem použila postup vysvětlený v kapitole Proces návrhu gamifikace a při grafickém ztvárnění
jsem využila principy z kapitoly Principy grafického návrhu.
6.1 Porozumění problému a stanovení cíle
Vzdělávacích materiálů ohledně gamifikace je mnoho jak v tiskových publikacích, tak v online zdrojích. Naprostá většina ovšem prezentuje tuto problematiku pouze pomocí textu a ne pomocí
vizuálního ztvárnění. To vede k nepochopení gamifikace a následně jejího špatného nasazení. Vizuální
prezentace informací je jedna z nejpodstatnějších částí pro pochopení komplexnosti gamifikace. Proto
byl můj cíl navrhnout jednoduchou vzdělávací online aplikaci, která bude názorně vysvětlovat dané
elementy pro snazší pochopení uživatelem.
Problém: Nedostatečné využití a nedostatečný důraz estetiky v procesu návrhu gamifikace.
Cíl: Vytvoření online vzdělávacího průvodce, který s důrazem na estetickou část poskytne všeobecný
přehled o gamifikaci se zahrnutím postupu, jak gamifikaci navrhnout.
6.2 Získání požadavků na systém
Vzhledem k tomu, že se nejednalo o integrování gamifikace do již běžícího systému, nezjišťovali se požadavky pomocí technik uvedených v kapitole Získání požadavků na systém. Jelikož
se jedná o jednoduchou aplikaci s důrazem na předání informací, požadavky jsem stanovila předem
následovně:
1) Uživatel musí samotným průchodem aplikací (bez čtení textu) pochopit, že estetika hraje důležitou roli v procesu návrhu
2) Celý průchod by neměl trvat déle než 15 minut (s čtením textu)
41
TVORBA VLASTNÍ GAMIFIKOVANÉ APLIKACE
3) Uživatel by měl mít možnost se vrátit do části, kde v aplikaci skončil, za předpokladu, že v předchozím průchodu neprošel aplikací celou
4) Uživatel by měl mít možnost zjistit, co je aplikace (projekt) zač a proč vznikl — vytvoření podstránky s informacemi
5) Uživatel by měl být zapojen do průchodu a měl by být motivován k interakcím v rámci systému
6.3 Porozumění cílových uživatelů
Aplikace je zaměřená pro uživatele, kteří buďto o gamifikaci nevědí nic nebo už o ní slyšeli,
ale neumějí si konkrétně představit, co to znamená. Zároveň jsou cíloví uživatelé ti, kdo chtějí využít
gamifikaci pro svoji aplikaci, ale nevědí jak postupovat při procesu návrhu. Jedná se tedy zejména
o mladší lidi, kteří se snaží inspirovat se současnými možnostmi vývoje aplikací s využitím metod,
které mají velký potenciál do budoucnosti. Pro průchod aplikací nejsou vyžadovány žádné předchozí
profesní znalosti. Aplikace není striktně zaměřená na žádný typ hráče.
6.4 Moodboard
Pro aplikaci jsem zvolila základní barevnou paletu, od které se odvíjela celková barevnost
veškeré grafiky. Zvolila jsem pastelové barvy, protože jsou pro oči mnohem přirozenější než syté barvy, a také méně únavné. Veškerá grafika je založená na flat designu, tedy bez použití stínů a rušivých
elementů. Pro jejich tvorbu jsem vytvořila vektorové ilustrace v programu Adobe Illustrator cs6.
Obr. 6.1: Stanovená barevná paleta pro celou aplikaci Gamíkov.
42
6.5 Stanovení mechanik
Pro aplikaci jsem vytvořila následující mechaniky. Veškeré ilustrace jsem vytvořila v programu Adobe Illustrator cs6.
6.5.1 Mechanika svět
Vizuální charakter aplikace je zasazen do virtuálního městečka s názvem Gamíkov. Od něho
se odvíjí ostatní mechaniky. Průchod aplikace by měl simulovat průchod městečkem.
Obr. 6.2: Vizualizace městečka Gamíkov, který se zobrazuje na úvodní stránce webové aplikace.
6.5.2 Mechanika postup
Postup uživatele aplikací je znázorněno pomocí progressbaru, který se nachází v každé sekci
aplikace. Uživatel má tak přehled, v jaké části se nachází a kolik mu toho ještě zbývá. Progressbar zároveň slouží jako motivační element.
Obr. 6.3: Znázornění progress baru, který znázorňuje uživateli, v jaké části aplikace se nachází.
43
6.5.3 Mechanika avatar
V aplikaci doprovází uživatele avatar „Filip“, který poskytuje informace a motivuje uživatele k pokračování. Pomocí vizuálního ztvárnění poskytuje uživateli zpětnou vazbu v podobě
grafického elementu.
Obr. 6.4: Ukázka avatara Filipa, který se zobrazuje v různých významech během průchodu aplikací.
6.5.4 Mechanika oblast
V rámci aplikace je možné jít do tzv. relaxační zóny. Pokud je uživatel unaven či si chce
dát přestávku, může opustit vzdělávací sekci a jít do jiné oblasti systému. Z té se může vždy vrátit
zpět do vzdělávací sekce. Oblast funguje jako zpestření průchodu aplikací a obsahuje efekt překvapení — podoba relaxační zóny se mění při každé návštěvě uživatele nebo po refreshi stránky.
V aplikaci jsou dostupné 2 motivy a lze je rozšířit o další.
Obr. 6.5: Oblast „relaxační zóna“ obsahuje náhodně vygenerovaný grafický element doplněný lehkou animací.
44
6.5.5 Mechanika odznak
Po průchodu aplikací je možné získat odznak a sdílet ho na sociálních sítích. Odznak funguje
jako odměna za průchod aplikací a zároveň poskytuje uživateli možnost doložit své znalosti skrz webové
rozhraní. Pro typ hráče Socialiser poskytuje možnost, jak sdílet svou výhru.
Obr. 6.6: Podoba virtuální odznaku „Gamíkovský guru, který
lze získat po průchodu aplikací.
45
6.6 Implementace aplikace
Vzhledem ke specifickému layoutu a přístupu k dané aplikaci jsem nepoužila žádný framework
a veškerý kód jsem napsala sama přizpůsobený mé aplikaci. Pro vývoj jsme použila Sublime Text 3.
Základní struktura webu je založená na principu jednotlivých slidů, které lépe simulují průchod aplikací. Pro scrollovací část jsem použila javascriptový plugin, který mi umožnil vytvořit část
s jednotlivými slidy.
Obsah každé sekce má různý obsah, proto je celý layout přizpůsobený zarovnáním na mřížku. Tu jsem vytvořila pomocí grid systému o 12 sloupcích, který jsem si sama vytvořila.
Výsledný layout je přizpůsobený na rozlišení minimálně 1366x768 bodů, což je minimální
rozlišení většiny notebooků. Vytvoření mobilní verze nebylo cílem mé práce, jelikož by se musel zásadně změnit layout celé aplikace.
6.6.1 OnePageScroll
Celá aplikace je postavená na javascriptovém pluginy OnePageScroll.js, který vznikl primárně
pro použití na mobilních zařízeních v roce 2013. Funguje na základě jQuery Swipe Events, pomocí
něhož se posouvá obsah aplikace dle scrollu myši. Jakmile uživatel scrolluje (dolů či nahoru), plugin
automaticky přidá CSS3 transformaci, která sjede na sekci další, nebo předcházející. Plugin zároveň
obsahuje i onepage-scroll.css, který nám automaticky nastyluje obsah. Z tohoto css jsem využila pouze
kód pro nastylování bočního scrollbaru (paginace).
1
2
3
4
5
6
7
8
9
<body>
...
<div class=„main“>
<section>...</section>
<section>..</section>
...
</div>
...
</body>
46
Pro vložení funkcionality musíme vložit následující javascriptový kód do našeho html dokumentu.
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
$(document).ready(function() {
...
$(„.main“).onepage_scroll ({
sectionContainer: „section“,
easing: „ease“,
animationTime: 1000,
pagination: true,
updateURL: false
});
...
});
</script>
Tento kód je defaultní a můžeme si ho přizpůsobit dle našich požadavků. Section container
určuje tag, který chceme použít pro jednotlivé stránky (slidy). Easing nám určuje animaci scrollování a můžeme využít veškeré dostupné easing funkce (linear, ease-in, ease-out,...). AnimationTime
nám určuje, jak dlouho se animace přehrává. Pro mou aplikaci jsem zvolila dynamičtější chod 600ms.
Pagination je defaultně nastavená na TRUE a znamená, že při přidání sekce automaticky přidá paginaci
na straně stránky. UpdateURL nám umožňuje nastavit, jestli chceme automaticky změnit URL webové
stránky dle prohlížené sekce uživatelem. Defaultní nastavení je false. V případě, že tvoříme responzivní aplikaci pro mobilní zařízení, můžeme si zvolit responsiveFallback, který nám při daném rozlišení
přepne zobrazení na landing page (tedy ignoruje jednotlivé section) a vyroluje obsah na první section.
Zároveň můžeme změnit defaultní vertikální scrollování na horizontální.
V rámci odkazů při pohybu mezi jednotlivými sekcemi můžeme využít následující předdefinované funkce:
a)
b)
c)
scroll na předchozí sekci - $(„.main“).moveUp();
scroll na následující sekci - $(„.main“).moveDown();
scroll na libovolnou sekci - $(„.main“).moveTo(numberOfSection);
Plugin je kompatibilní s prostředím Windows, OSX, iOS, Android, Chrome, Firefox, Safari,
IE10 a je přizpůsobený pro desktopové i mobilní zařízení.
47
6.6.2 CSS3 Flexible Box
Pro tvorbu layoutu mé aplikace jsem využila mód Flexbox, který je nejlépe přizpůsobený
pro tvorbu layoutu webové aplikace. Flexbox pochází z anglického slova „flex“ což znamená pružný
či přizpůsobivý. Jeho přednost je v tom, že umožňuje vyplňovat zbylý prostor bez nutnosti přepočítávání javascriptem. Umožňuje tedy jednoduché pozicování prvků dle zbylého prostoru či rozlišení.
Flexbox není podporovaný v prohlížečích Internet Explorer 8 a 9. Vzhledem k tomu, že flexbox má
velký potenciál pro budoucí implementaci webových aplikací, nepřisuzuji nekompatibilitě se staršími
prohlížeči velký význam.
Zarovnání obsahu každé sekce na vertikální střed jsem zajistila následujícícm kódem.
1
2
3
4
5
6
.page_container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
6.6.3 Animace
Animace slouží pro dynamičtější obsah aplikace a lepší znázornění průchodu. Poskytují zpětnou vazbu uživateli, fungují jako motivační element a zároveň zajišťují „zábavu“, což je jedna z částí,
která by v gamifikaci neměla chybět. Pro animace jsem využila CSS3 a jQuery. Mezi jednu z nejdůležitějších částí považuji hlavní stránku, která by měla obsahovat „wow“ efekt a přesvědčit uživatele, aby
prošel celý obsah. Hlavní stránka obsahuje animaci projíždějících autíček, které zajistí neustálý pohyb
(stránka tedy není nikdy statická). Zároveň vstupní button mírně mění svou velikost pomocí funkce
transform: scale, který jemně nabádá ke kliknutí.
Animace progress baru byla jednou z nejdůležitějších částí aplikace. Poskytuje nejenom
zpětnou vazbu uživateli, ale funguje zároveň jako motivační element. Pro implementaci jsem použila
následující kód.
48
1
2
3
4
5
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function(){
$(„.main“).onepage_scroll({
...
beforeMove: function (pageIndex) {
if (pageIndex == 1) {
percent = 1;
}
else if (pageIndex == pageCount) {
percent = 99;
}
else {
var percent = Math.
floor(pageIndex / (pageCount) * 100);
}
var $percentContainer = $(„.progress-bar .text“);
$percentContainer.html(percent + „%“);
$percentContainer.addClass(„changed“);
setTimeout(
function() {
$percentContainer.removeClass(„changed“);
},
500
);
}
Pro generování náhodného obsahu „relaxační zóny“ jsem použila následující kód, který body
elementu přidá třídu „pageType“ + náhodné číslo z rozsahu 1 až 3, které určí, jaká sekce se zobrazí.
1
2
3
4
5
<script>
$(„body“.addClass(
„pageType“ + (Math.floor(Math.random() * 3) + 1)
);
</script>
6.6.4 Veriod
Veriod je jediná česká platforma pro vydávání a sbírání digitálních verifikačních odznaků.
Odznaky fungují jako potvrzení či doložení našich úspěchů, znalostí a dovedností. Veriod poskytuje
tzv: digitální odznaky, kterými se můžeme prezentovat v online prostředí a jsou OBI13 kompatibilní. To
13) OBI neboli Open Badge Infrastructure je volně přístupný software od společnosti Mozzila, pomocí něhož můžeme vytvářet a ověřovat digitální
odznaky.
49
znamená, že digitální odznak neboli „badge“ je soubor, který se navenek prezentuje vizuální formou
(obrázkem), ale uvnitř obsahuje v zakódované podobě kritéria pro jeho udělení a zároveň obsahuje
potvrzení, kdo odznak vydal, kdy a co je předmětem hodnocení. Odznak tak v sobě uchovává spoustu
informací nejenom o majiteli odznaku, ale také o organizaci, která ho vydala. Veriod umožňuje lidem
vydávat odznaky bez jakéhokoliv potvrzení, pouze na základě registrace. Tento systém jsem využila
pro vydání odznaku Gamifikační guru, který je vložen na konci mé aplikace.
Veriod má dvě možnosti integrace odznaku do naší aplikace. První možnost je poskytnout
uživateli tajnou URL adresu na základě vyplněného formuláře, který si sami vytvoříme. Podoba tajné
adresy je pak následující:
http://veriod.cz/badge/
udel-odznak/482?secret=71a9eef587eb415b57f7ee131c740b3c&email=nejaky%40email.cz&firstname=Jan&surname=Nov%C3%A1k
Druhá možnost je vložení <iframe> do našeho kódu. To umožní zobrazit uživateli odznak
přímo v naší aplikaci (tedy bez přesměrování na Veriod.cz). Tajná URL má stejnou podobu jako
v předchozím bodě, jen se za ni přidá parametr „format“ s hodnotou „iframe“. Pokud do iframu doplníme do příslušných parametrů e-mailovou adresu, případně jméno a příjmení, zobrazí se okamžitě
obrazovka se získaným odznakem. V opačném případě se zobrazí formulář pro doplnění těchto údajů.
<iframe width=“500“ height=“750“ src=“http://veriod.cz/badge/
udel-odznak/482?secret=71a9eef587eb415b57f7ee131c740b3c&format=iframe“ frameborder=“0“></iframe>
50
7 Závěr
Cílem práce bylo vytvoření online vzdělávacího průvodce, který bude přístupný veřejnosti.
Celá aplikace je založená na jednoduchosti, ale čistotě a komplexnosti prezentovaných informací, a to
s důrazem na jejich estetické ztvárnění. Součástí práce je vlastní navržený postup pro proces tvorby
gamifikace a jeho následné využití při tvorbě praktické části.
Informace potřebné pro teoretickou část jsem získala jak z odborných publikací, tak z online
zdrojů. Soustředila jsem se na dostupné vzdělávací materiály od ověřených osobností z oblasti gamifikace, které lze dohledat na adrese www.rise.global/gurus-2014. K implementační části jsem získala
znalosti zejména z výukových videí a ostatních online zdrojů.
Výsledná aplikace je dokončená a přístupná veřejnosti na adrese www.gamikov.cz. Aplikaci
lze v budoucnosti rozšířit o další gamifikované elementy a doplnit nové vzdělávací podněty. Zároveň
ji lze rozšířit o informace z jiných oborů jako je psychologie a teorie her.
51
8 Použitá literatura
[1]
KAPP, Karl M. and Carolyn CHANDLER. The gamification of learning and instruction:
game-based methods and strategies for training and education. San Francisco, CA: Pfeiffer,
2012. ISBN 9781118096345
[2]
KIM, Amy Jo. Community Building on the Web: Secret Strategies for Successful Online
Communities, 2000, Peachpit Press. ISBN 0-201-87484-9
[3]
BURKE, Brian. Gartner Redefines Gamification. Gartner [online]. 2014 [cit. 2015-10-20].
Dostupné z: http://blogs.gartner.com/brian_burke/2014/04/04/gartner-redefinesgamification/
[4]
Essential facts about the computer and video game industry. Entertainment software association
[online]. 2015 [cit. 2016-10-2]. Dostupné z: http://www.theesa.com/wp-content/
uploads/2015/04/ESA-Essential-Facts-2015.pdf
[5]
DALLAS, June. Gamification Market Worth $5.5 Billion by 2018. PR Newswire [online].
2013 [cit. 2016-10-2]. Dostupné z: http://www.prnewswire.co.uk/
[6]
Gamification of Education. Gamification Wiki [online]. 2013 [cit. 2015-13-9]. Dostupné z:
https://badgeville.com/wiki/education
[7]
Gamification of Marketing. Gamification Wiki [online]. 2013 [cit. 2015-13-9]. Dostupné z:
https://badgeville.com/wiki/Gamification_of_Marketing#1
[8]
HERGER, Mario. Which Mechanics Make the Best Gamification? In: Enterprise
Gamification: Consultancy [online]. 2014 [cit. 2016-05-22]. Dostupné z: http://www.
enterprise-gamification.com/index.php?option=com_content&view=article&id=199:whi
ch-mechanics-make-the-best-gamification&catid=4:blog&lang=en&Itemid=251
[9]
ZICHERMANN, Gabe a Christopher CUNNINGHAM. Gamification by design:
implementing game mechanics in web and mobile apps. 1st. ed. Sebastopol, Calif.: O‘Reilly
Media, 2011, xix, 182 p. ISBN 978-1-4493-9767-8.
[10]
Game Mechanics. Gamification Wiki [online]. 2013 [cit. 2016-28-3]. Dostupné z: https://
badgeville.com/wiki/Game_Mechanics
[11]
NIELSON, Bryant. Gamification Mechanics vs. Gamification Dynamics. In: Your Training
Edge: Your online resource for corporate training [online]. 2013. Dostupné z: http://www.
yourtrainingedge.com/gamification-mechanics-vs-gamification-dynamics/
52
[12]
STADDON, John E. R. a Yael NIV. Operant conditioning [online]. 2008 [cit. 2016-222]. DOI: 10.4249/scholarpedia.2318. Dostupné z: http://www.scholarpedia.org/article/
Operant_conditioning
[13]
MCLEOD, Saul. Maslow‘s Hierarchy of Needs. In: Simply psychology [online]. 2014 [cit.
2015-11]. Dostupné z: http://www.simplypsychology.org/maslow.html
[14]
POULIN, Richard. Jazyk grafického designu: ilustrovaná příručka vysvětlující hlavní
principy designu. V Praze: Slovart, 2012. ISBN 978-80-7391-552-0.
[15]
MANRIQUE, Victor. The Gamification Aesthetics Color Wheel. In: Epic Win Blog
[online]. 2015 [cit. 2016-05-22]. Dostupné z: http://www.epicwinblog.net/2015/02/thegamification-aesthetics-color-wheel.html
[16]
LIDWELL, William, Kritina HOLDEN a Jill BUTLER. Univerzální principy designu: 125
způsobů jak zvýšit použitelnost a přitažlivost a ovlivnit vnímání designu. Brno: Computer
Press, 2011. ISBN 978-80-251-3540-2.
[17]
Game Mechanic: Cascading Information Theory. Gamification Wiki [online]. 2013 [cit.
2015-13-9]. Dostupné z: https://badgeville.com/wiki/Game_Mechanics/Cascading_
Information_Theory
[18]
FINKE, Tim, Sebastian MANGER a Stefan. FICHTEL. Informotion: animated
infographics. Berlin: Gestalten, 2012. ISBN 3899554159.
[19]
COUSINS, Carrie. Every Design Needs Three Levels of Typographic Hierarchy. In:
Designshack [online]. 2014 [cit. 2016-05-22]. Dostupné z: https://designshack.net/articles/
typography/every-design-needs-three-levels-of-typographic-hierarchy/
[20]
UNGER, Russ a Carolyn CHANDLER. a project guide to UX design: for user experience
designers in the field or in the making. Berkeley: New Riders, c2009, xix, 267 s. Voices that
matter. ISBN 978-032-1607-379.
[21]
Visual Designer. In: Playbasis [online]. 2016 [cit. 2016-05-22]. Dostupné z: https://www.
playbasis.com/careers/visual-designer/
[22]
CHOU, Yu-Kai. Octalysis: Complete Gamification Framework. In: Yu-Kai Chou &
Gamification [online]. 2015 [cit. 2016-05-22]. Dostupné z: http://yukaichou.com/
gamification-examples/octalysis-complete-gamification-framework/#.V0F0CuSxanl
[23]
HUNICKE, Robin, Marc LEBLANC a Robert ZUBEK. MDA: a Formal Approach to
Game Design and Game Research [online]. In: . 2004 [cit. 2016-05-22]. Dostupné z: http://
www.cs.northwestern.edu/~hunicke/MDA.pdf
53
[24]
MARCZEWSKI, Andrzej. The Intrinsic Motivation RAMP. In: Gamified UK: Thoughts on
Gamification and More [online]. 2013 [cit. 2016-05-22]. Dostupné z: http://www.gamified.
uk/gamification-framework/the-intrinsic-motivation-ramp/
[25]
MARCZEWSKI, Andrzej. GAME: a design process framework. In: Gamified UK:
Thoughts on Gamification and More [online]. 2014 [cit. 2016-05-22]. Dostupné z: http://
www.gamified.uk/2014/05/07/game-design-process-framework/
[26]
MARCZEWSKI, Andrzej. The EEEE User Journey Framework. In: Gamified UK:
Thoughts on Gamification and More [online]. 2014 [cit. 2016-05-22]. Dostupné z: http://
www.gamified.uk/2014/04/30/eeee-user-journey-framework/
[27]
SCHELL, Jesse. The art of game design: a book of lenses. Boston: Elsevier/Morgan
Kaufmann, c2008. ISBN 0123694965.
[28]
VIANNA, Ysmar, Maurício VIANNA, Bruno MEDINA a Samara TANAKA.
Gamification, Inc.: Recreating companies through games [online]. 1. Rio de Janeiro:
MJV Press, 2013 [cit. 2016-05-22]. ISBN 978-85-65424-08-0. Dostupné z: http://www.
gamificationbook.com/
[29]
6 Best Color Schemes for Any Painting Project. CBP of Arizona [online]. Dostupné z:
https://cbpofarizonainc.com/paint-schemes/
[30]
Gamification World Map. Dostupné z: http://www.gamificationworldmap.com/
54
9 Seznam obrázků
Obr. 3.1: Aplikace EpicWin a znázornění mechaniky „svět“
8
Obr. 3.2: Aplikace EpicWin a znázornění mechaniky „avatar“
8
Obr. 3.3: Aplikace EpicWin a znázornění mechaniky „dovednosti“
8
Obr. 3.4: Aplikace EpicWin a znázornění mechaniky „odměna“
8
Obr. 3.5: Aplikace EpicWin a znázornění mechaniky „postup“
8
Obr. 3.6: Aplikace EpicWin a znázornění mechaniky „sdílení“
8
Obr. 3.7: Náhled gamifikace v internetovém bankovnictví mBank
11
Obr. 3.8: Náhled gamifikace ve webové aplikaci Todoist.com
11
Obr. 3.9: Aplikace Foodzy a její layout založený na zlatém řezu
17
Obr. 3.10: Aplikace Duolingo a její layout zarovnaný na mřížku
17
Obr. 3.11: Zobrazení barevných schémat
19
Obr. 3.12: Typografie v aplikaci Duolingo a použití zvýrazňujících technik
21
Obr. 4.1: Znázornění techniky „User’s journey“
28
Obr. 4.2: Znázornění techniky „Empathy map“
28
Obr. 5.1: Gamification World Map
36
Obr. 5.2: Aplikace Kód Salomon
38
Obr. 5.3: Internetové bankovnictví mBank
38
Obr. 5.4: Aplikace Žatecký stroj času
38
Obr. 5.5: Aplikace Foodzy
40
Obr. 6.1: Barevná paleta pro aplikaci Gamíkov
42
Obr. 6.2: Grafická podoba městečka Gamíkov
43
Obr. 6.3: Náhled progress baru v aplikaci Gamíkov 43
Obr. 6.4: Zobrazení avatara pro aplikaci Gamíkov
44
Obr. 6.5: Oblast „relaxační zóna“ a náhled grafických elementů
44
Obr. 6.6: Digitální odznak „Gamíkovský Guru“
45
55
10 Přílohy
Přiložené CD obsahuje:
• samostatnou diplomovou práci ve formátu pdf a indd
• všechny vytvořené grafické prvky v souboru Adobe Illustrator
• všechny vytvořené grafické prvky ve formátu png
• kód celé webové aplikace Gamíkov 56

Gamifikace z pohledu designu a tvorba online výukového průvodce

Transkript

Podobné dokumenty

spolupráce nejen na dálku

8.01 Návrhy a ovladače zvuků

Prezentace aplikace PowerPoint - E

Get Social, 6. 11. 2013 Josef Šlerka, Studia nových médií, Ataxo Group

Skripta_Marketing v době wikinomie a - E

ZÁPADOČESKÁ UNIVERZITA V PLZNI FAKULTA EKONOMICKÁ

Sestava 1 - IT Lib

Zde - FIT

pdf ke stažení - Katedra mediálních studií a žurnalistiky

stáhnout číslo v PDF

Časopis Mensa 2/2012

Udržitelná doprava jako součást každodenního života

Srovnání základních funkcí iDeal Orchidej a iDeal

AVG 8.5 Internet Security Network Edice