UNIVERZA V LJUBLJANI
NARAVOSLOVNOTEHNIŠKA FAKULTETA
DIPLOMSKO DELO
EMILIJA VIDA
LJUBLJANA 2021
UNIVERZA V LJUBLJANI
NARAVOSLOVNOTEHNIŠKA FAKULTETA
ODDELEK ZA TEKSTILSTVO, GRAFIKO IN OBLIKOVANJE
UPORABNIŠKO USMERJENO OBLIKOVANJE APLIKACIJE SOCIALIZER
DIPLOMSKO DELO
EMILIJA VIDA
Ljubljana, september 2021
UNIVERSITY OF LJUBLJANA
FACULTY OF NATURAL SCIENCES AND ENGINEERING DEPARTMENT OF TEXTILES, GRAPHIC ARTS AND DESIGN
USER-CENTERED DESIGN OF APP SOCIALIZER
DIPLOMA THESIS
EMILIJA VIDA
Ljubljana, September 2021
PODATKI O DIPLOMSKEM DELU
Število listov: 69 Število strani: 58 Število slik: 34 Število preglednic: 0 Število literaturnih virov: 25 Število prilog: 1
Študijski program: visokošolski strokovni študijski program (1. stopnja) Grafična in medijska tehnika
Komisija za zagovor diplomskega dela:
Predsednica: prof. dr. Klementina Možina Mentorica: prof. dr. Helena Gabrijelčič Tomc Član: viš. pred. dr. Andrej Iskra
Ljubljana ,________________________________
ZAHVALA
Iskreno se zahvaljujem mentorici prof. dr. Heleni Grabrijelčič Tomc za ves čas, pomoč, nasvete in trud pri izdelavi diplomskega dela. Posebna hvala tudi mojemu fantu za vso pomoč in vzpodbudo pri dokončanju diplomskega dela.
Hvala tudi vsem bližnjim in vsem testirancem, ki so z odgovori pripomogli k izdelavi diplomskega dela.
V
IZVLEČEK
Namen diplomskega dela je načrtovanje in oblikovanje vmesnika mobilne aplikacije za spoznavanje novih ljudi, spodbujanja druženja in spoznavanja v živo. S postopkom načrtovanja uporabniške izkušnje je bil cilj ustvariti enostaven, intuitiven in uporaben uporabniški vmesnik. V teoretičnem delu so predstavljene uporabniške izkušnje in uporabniško usmerjeno oblikovanje, s čimer so postavljeni temelji za nadaljnje oblikovanje izdelka. Z analizo uporabniških želja in potreb so bile pridobljene informacije o tem, kdo so reprezentativni uporabniki aplikacije ter kaj je treba upoštevati pri nadaljnjem oblikovanju vmesnika. Z zbranimi informacijami se je ustvarila informacijska arhitektura in žični model, s katerimi se je organizirala vsebina in funkcionalnost. Z izdelavo žičnih modelov so bili ustvarjeni temelji za oblikovanje uporabniškega vmesnika. Ta se je oblikoval po načelih oblikovanja, predstavljenih v teoretičnem delu. Najprej so bili opredeljeni vizualni elementi za nadaljnje oblikovanje, kot so barve, tipografija, gumbi, razmiki in prazna stanja, ter nato je bil oblikovan končni vmesnik aplikacije. Izdelan je bil prototip aplikacije, s katerim je bilo izvedeno uporabniško testiranje na platformi Maze.design. Analiza rezultatov testiranja je pokazala, da je izdelek ustrezen, zadovoljiv in enostaven za uporabnike. Rezultati so tudi pokazali, da bi bilo treba del aplikacije, ki hkrati zajema zemljevid s točno določeno lokacijo druženja in pogovor o druženju z drugo osebo, prilagoditi in spremeniti, da bi bila aplikacija še bolj prijazna uporabnikom.
Ključne besede: uporabniška izkušnja, mobilna aplikacija, oblikovanje vmesnika, uporabniško testiranje, prototip, uporabnost
VI
ABSTRACT
The purpose of the diploma thesis was to plan and design the interface of a mobile application for meeting new people, that would encourage users to socialize and meet new people in person.
Through the user experience planning process, the goal was to create a simple, intuitive, and useful user interface design. In the diploma thesis, the theoretical part of user experience and user-oriented design were first researched, thus laying the foundation for further product design.
The analysis of the user wishes and needs provided information on who the representative users of the application are and what needs to be considered when further designing the interface of the application. With the gathered information, an information architecture and wireframe models were created, with which the content and functionality were organized. The wireframes, also laid the foundations for the design of the user interface. This was designed according to the design principles presented in the theoretical part. First, visual elements such as colors, typography, buttons, grids, and empty spaces were defined and then the final interface interface of the application was designed with them. In the end, the prototype of the application was created and user testing was performed on the Maze.design platform. Analysis of the test results showed us that the product is adequate, sufficient and simple, but it would be necessary to slightly adjust and change one part of the application design to make the application even more user-friendly.
Keywords: user experience, mobile application, user interface design, user testing, prototype, usability
VII
KAZALO VSEBINE
IZVLEČEK ... V ABSTRACT ... VI KAZALO VSEBINE ... VII KAZALO SLIK ... IX OKRAJŠAVE IN SIMBOLI ... XI
1 UVOD ... 1
2 TEORETIČNI DEL ... 2
2.1 Predstavitev uporabniške izkušnje ... 2
2.1.1 Načrtovanje uporabniške izkušnje ... 2
2.1.2 Analiza in opredelitev ciljne publike ... 4
2.1.3 Žični modeli mobilne aplikacije ... 11
2.1.4 Oblikovanje uporabniškega vmesnika ... 11
2.1.5 Testiranje uporabnosti (ang. Usability Testing) ... 12
2.2 Predstavitev operacijskega sistema iOS ... 13
2.2.1 iOS Oblikovalske Teme (ang. iOS Design Themes) ... 14
3 EKSPERIMENTALNI DEL ... 16
3.1 Cilji aplikacije Socializer ... 16
3.2 Opredelitev ciljne publike in določitev reprezentativnega uporabnika ... 16
3.3 Določitev reprezentativnega uporabnika mobilne aplikacije ... 17
3.4 Informacijska arhitektura mobilne aplikacije ... 17
3.5 Žični modeli ... 18
3.6 Opredelitev vizualnih elementov za nadaljnjo oblikovanje mobilne aplikacije ... 18
3.6.1 Barve ... 18
3.6.2 Pisava... 19
3.6.3 Gumbi ... 20
VIII
3.6.4 Razmiki... 21
3.6.5 Prazna stanja (ang. Empty States) ... 23
3.7 Oblikovanje vmesnika aplikacije ... 24
3.7.1 Izdelava prototipa aplikacije ... 26
3.8 Testiranje uporabnosti (ang. Usability Testing) ... 26
3.8.1 Načrt študije ... 26
3.8.2 Nastavitev ... 27
4 REZULTATI IN RAZPRAVA ... 30
4.1 Rezultati opredelitve ciljne publike in reprezentativnih uporabnikov ... 30
4.2 Rezultati informacijske arhitekture in žičnih modelov ... 32
4.3 Rezultati oblikovanja mobilne aplikacije ... 35
4.4 Rezultati izdelave prototipa... 42
4.5 Rezultati testiranja uporabnosti ... 43
5 ZAKLJUČEK ... 48
6 LITERATURNI VIRI ... 49
7 PRILOGE ... 52
IX
KAZALO SLIK
Slika 1: Prikaz nivojev uporabniške izkušnje (povzeto po viru 3) ... 4
Slika 2: Okoliščine, ki vplivajo na uporabnikovo interakcijo s telefonom (12) ... 7
Slika 3: Prikaz hierahičnega modela IA za mobilne aplikacije (10) ... 8
Slika 4: Prikaz IA modela vozlišče in povezave za mobilne aplikacije (10) ... 8
Slika 5: Prikaz IA modela ugnezdena lutka za mobilne aplikacije (10) ... 9
Slika 6: Prikaz IA modela pregled zavihkov za mobilne aplikacije (10) ... 9
Slika 7: Prikaz IA modela nadzorne plošče za mobilne aplikacije (10) ... 10
Slika 8: Prikaz IA modela filtriran pogled za mobilne aplikacije (10) ... 10
Slika 9: Primer aplikacije na podlagi iOS oblikovalske teme – Čistost (20)... 14
Slika 10: Primer aplikacije na podlagi iOS oblikovalske teme – Spoštovanje in Globina (21) .... 15
Slika 11: Barvna paleta aplikacije ... 19
Slika 12: Opredeljena pisava SF Pro Text ... 20
Slika 13: Gumbi za uporabo v aplikaciji... 21
Slika 14: Spreminjanje velikosti pri sodem in lihem številu (27) ... 22
Slika 15: Definirani razmiki, ki so uporabljeni v aplikaciji ... 22
Slika 16: Prazni stanji uporabljeni v aplikaciji (Domov in Kontakti) ... 24
Slika 17: Razmiki in elementi v aplikaciji po večkratniku števila 8 ... 25
Slika 18: Reprezentativni uporabnik – Kevin (fotografija osebnosti prevzeta po viru 22) ... 31
Slika 19: Reprezentativna uporabnica – Tara (fotografija osebnosti prevzeta po viru 22)... 31
Slika 20: Informacijska arhitektura... 34
Slika 21: Žični model aplikacije Socializer ... 35
Slika 22: Odjavljeni del aplikacije ... 36
Slika 23: Dovoljenji za uporabo lokacije dovoljenje za obvestila ... 37
Slika 24: Matična plošča, ki prikazuje različne poti uporabnika ... 38
Slika 25: Uporabniški profil prijavljenega uporabnika ... 39
Slika 26: Potek druženja ... 40
Slika 27: Kontakti ... 41
Slika 28: Povezan prototip ... 42
Slika 29: Starostna umestitev ... 44
Slika 30: Predstavitvene strani ... 44
Slika 31: Graf jasnosti predstavitvenih nalog ... 45
Slika 32: Področja klikanja začetne strani pogovora ... 46
X Slika 33: Graf kako enostavno je sprejemanje povabila ... 46 Slika 34: Področja klikanja naloge za razširitev pogovora ... 47
XI
OKRAJŠAVE IN SIMBOLI
UX uporabniška izkušnja (ang. User Experience)
UCD na uporabnika usmerjeno oblikovanje (ang. User Centered Design) IA informacijska arhitektura (ang. Informational Architecture)
SCUS ocena uporabnosti zaslona (ang. Screen Usability Score) DOR stopnja odstopa in odbitka (ang. Drop-off and Bounce Rate) MCR stopnja napačnih klikov (ang. Misclick Rate)
AVGD povprečno trajanje v sekundah (ang. Average Duration in Seconds)
MIN minimum
MAX maksimum
1
1 UVOD
Danes najdemo pametne telefone že v skoraj vsakem žepu posameznika. Ti so na potek naših življenj drastično vplivali in ga tudi spremenili. Lahko navedemo primer, da smo med uporabo javnih prevoznih sredstev pogovarjanje en z drugim, zamenjali za odnose s pametnimi telefoni, ki poskrbijo, da nam med čakanjem prevoza ni nikoli dolgčas. Prav tako, ko se odločimo za kosilo v restavraciji, pa smo sami, v bistvu nismo, saj lahko dostopamo do medmrežja in s tem do želenih informacij na mobilnem telefonu, zaradi česar ne moremo več trditi, da smo povsem »sami«.
Lahko bi rekli, da imamo ves svet dostopen preko mobilnega telefona. Pa ga imamo res?
Raznovrstne raziskave kažejo, da so danes ljudje veliko bolj osamljeni, depresivni in anksiozni (1, 2). Zaradi mobilnih in računalniških naprav smo začeli izgubljati človeški stik. Povezani smo z vsemi – tudi z neznanci, kakovostnih odnosov (komunikacija v živo, fizični stik) pa imamo vedno manj. Zaradi natrpanosti vsakodnevnih urnikov posameznikov postaja stresno že usklajevanje srečanj s prijatelji, ki sicer spadajo v najbližji krog poznanstev posameznika.
Pri pregledu aplikacij, ki omogočajo navezovanje stikov smo ugotovili, da že obstajajo rešitve, ki omogočajo druženje in spoznavanje (na primer Tinder, Bumble …). Ugotovili smo, da se recimo Tinder osredotoča bolj na zmenkarjenje in iskanje partnerja, medtem ko ima Bumble poudarek na iskanju novih prijateljstev. V večini primerov pa ne pride do dejanskega druženja v živo, je zgolj le povezovanje in širjenje poznanstev po medmrežju. Zato smo si pred pričetkom diplomskega dela zadali cilj, da ustvarimo aplikacijo, ki bi privedla uporabnike do dejanskega druženja v živo.
Načrtovano je bilo, da bi aplikacija uporabnikom omogočala preprosto in hitro spoznavanje oz.
iskanje družbe.
Predpostavljamo, da lahko z aplikacijo, ki ima omejen čas za pogovor preko sporočil v aplikaciji in ki vključuje ponudbo lokacije za druženje, uporabnike usmerimo, da se dogovorijo in so pripravljeni na druženje in človeški stik v živo.
2
2 TEORETIČNI DEL
2.1 Predstavitev uporabniške izkušnje
Uporabniška izkušnja (ang. User experience, UX) se nanaša na kakršnokoli interakcijo uporabnika z izdelkom ali storitvijo in tudi na izkušnje ter občutke uporabnika ob interakcijah s tem izdelkom ali storitvijo. Načrtovanje uporabniške izkušnje obsega študij vsakega dejavnika, ki oblikuje uporabniško izkušnjo, kakšno je počutje uporabnika in njegovo zadovoljstvo, kako uporabnik doseže želene cilje in namene, ali ima pri uporabi kakšne težave in frustracije, kako je uporabna rešitev (izdelek, storitev) in koristna za uporabnika. V praktičnem smislu se lahko pri evalvaciji izkušnje analizira, kakšen je občutek fizičnega izdelka, ki ga uporabnik drži v roki ali kako enostaven je proces nakupa v spletni trgovini. Cilj optimizacije uporabniške izkušnje je ustvarjanje enostavne, učinkovite, pomembne in vseskozi prijetne izkušnje pri interakciji z izdelkom, medijem, storitvijo za uporabnika (3).
Namen oblikovanja uporabniške izkušnje je pomagati uporabnikom doseči lažjo interakcijo z izdelkom ali storitvijo ter reševanje morebitnih problemov in izzivov pri uporabi.
Oblikovalec UX združuje poznavanje raziskav trga, razvoj izdelka, digitalnih strategij in oblikovanja za ustvarjanje optimalne uporabniške izkušnje izdelkov, storitev in procesov (3).
2.1.1 Načrtovanje uporabniške izkušnje
Predstavili bomo postopek načrtovanja uporabniške izkušnje po nivojih, ki temeljijo na knjigi avtorja Jesse James Garrett – The Elements of User Experience: User-Centered Design for the Web and Beyond (3).
Garrett je mnenja, da je pri načrtovanju uporabniške izkušnje potrebno predvideti in preprečiti nepričakovanosti in s tem olajšati uporabo izdelka. To pomeni, da moramo upoštevati vse možnosti vsake akcije, ki jo lahko uporabnik izvede, hkrati moramo razumeti tudi uporabnikova pričakovanja na vsakem koraku skozi celoten proces uporabe izdelka. Z upoštevanjem uporabnika na vsakem koraku načrtovanja, dosežemo učinkovito uporabniško izkušnjo.
Takšnemu načinu gradnje uporabniške izkušnje pravimo uporabniško usmerjeno oblikovanje ali
3 na uporabnika usmerjeno oblikovanje (ang. user centered design, UCD), ki stremi k temu, da so vsi možni načini uporabe in konteksta uporabe predvideni in ustrezno oblikovani ter da je v centru oblikovanja izkušnja uporabnika (ciljne skupine in reprezentativni uporabnik).
Za lažje razumevanje celote in za zavedanje posledic je potrebno uporabniško izkušnjo razbiti na več glavnih komponent oz. v našem primeru na pet glavnih nivojev uporabniške izkušnje, poimenovanih po nivojih, kot je razloženo v nadaljevanju za primer aplikacije (in spletnih rešitev) in je prikazano na sliki 1 (3):
• Strategija (ang. The Strategy Plane) – Predstavlja bistvene temelje aplikacije in vključuje tako uporabniške potrebe in želje kot tudi želje samega podjetja – tukaj pravzaprav definiramo cilje, ki jih podjetje želi pridobiti z izdelkom in hkrati, kar želijo sami uporabniki. Kot primer – na spletni trgovini si uporabniki želijo kupiti izdelke, medtem ko si lastniki spletne trgovine želijo čim večjo prodajo.
• Obseg (ang. The Scope Plane) – Definira značilnosti, vsebine in funkcionalnosti aplikacije in predstavi odnose med njimi. Kot primer – spletna trgovina, pri opravljanju nakupa shrani uporabnikov naslov za pošiljanje, zato da uporabniku prihrani vnos podatkov pri naslednjem nakupu.
• Struktura (ang. The Structure Plane) – Definira informacijsko strukturo aplikacije.
Predstavi hierarhijo navigacijskih elementov (kako je uporabnik prišel do določene strani oz. podstrani in kam gre lahko naprej. Predstavi lahko tudi postavitev navigacijskih elementov, ki na primer dovoljujejo uporabniku brskanje med kategorijami izdelkov.
• Ogrodje (ang. The Skeleton Plane) – Na tem nivoju so predstavljene postavitve gumbov, slik, besedila in ostali grafični in vsebinski elementi aplikacije. Oblikovan je za optimiziranje postavitve elementov aplikacije, za maksimalen učinek in čim večjo učinkovitost.
• Postavitev (ang. The Surface Plane) – Zadnji nivo predstavlja celotno aplikacijo in je nadgradnja ogrodja. Tu aplikacija dobi podobo končnega vmesnika in vključuje postavitev in ureditev interaktivnih in vizualnih elementov aplikacije, vse funkcionalnosti in elemente navigacije ter vse vsebine (slike, besedilo, gumbi itd.)
4 2.1.2 Analiza in opredelitev ciljne publike
Pri oblikovanju aplikacije se nam lahko zgodi, da se ujamemo v pasti, misleč, da oblikujemo izdelek ali storitev za enega idealiziranega uporabnika, nekoga, ki nam je enak. Oblikujemo aplikacije za druge osebe in če želimo, da bi bila drugim aplikacija všeč, uporabna, koristna in da bi jo z zadovoljstvom uporabljali, je ključnega pomena, da razumemo, kdo so uporabniki in kakšne so njihove potrebe. Definiranje uporabniških potreb je kompliciran proces, ker so si med sabo uporabniki zelo raznoliki.
Za jasno predstavo potreb je potrebno definirati, kdo so naši uporabniki. Ko imamo razdelano, kdo je naša ciljna publika, lahko z njimi izvajamo nadaljnje raziskave npr. jih sprašujemo o zadovoljstvu pri uporabi izdelka, preverimo njihovo obnašanje pri uporabi izdelka in ugotavljamo morebitne težave pri uporabi (3).
2.1.2.1 Določitev reprezentativnega uporabnika
Osebnost ali persona je reprezentacija uporabnikov naše aplikacije in predstavlja celosten pogled lastnosti, obnašanja, običajev in navad posameznih ciljnih skupin uporabnikov, ki se srečajo z našim izdelkom. Osebnost razvijamo z raziskavami uporabnikov, ki nam omogočajo
Slika 1: Prikaz nivojev uporabniške izkušnje (povzeto po viru 3)
5 vzpostavljanje vživljanja do končnih uporabnikov in identifikacijo, kaj sami potrebujejo od aplikacije, ki jo razvijamo.
Z razumevanjem uporabnikovih pričakovanj, skrbi in motivacij je oblikovanje izdelka bližje uporabnikovim potrebam in posledično je izdelek lahko bolj uspešen (4, 5).
Koraki za ustvarjanje osebnosti (4, 6, 7):
1. Zbiranje informacij o potencialnih uporabnikih
Za razumevanje miselnosti, motivacij in vedenj uporabnikov, je treba izvesti raziskavo. Najbolj natančne osebnosti so tiste, ki so narejene na podlagi dejanskih raziskav.
2. Prepoznavanje vedenjskih vzorcev iz raziskovalnih podatkov
Sledi analiza ugotovitev iz raziskav. Cilj tega koraka je najti vzorce, ki omogočajo združevanje podobnih ljudi v vrste uporabnikov.
3. Ustvarjanje osebnosti
Opis osebnosti sestavimo s pomočjo vedenjskih vzorcev, ki smo jih pridobili skozi raziskave. Pomembno je, da je vsaka osebnost opisana tako, da izraža dovolj razumevanja in empatije za razumevanje uporabnikov.
Razvijanje osebnosti je zelo podobno, kot če bi nekoga na novo spoznali. Uporabne informacije za razvijanje osebnosti so (5):
• Ime.
• Slika.
• Demografski podatki (spol, starost, lokacija, poklic in/ali stopnja prihodka, zakonski status, družina).
• Cilji in potrebe.
• Frustracije.
• Vedenje.
• Del osebnosti (na primer citat ali slogan, ki zajame osebnost).
Pri sprejemanju nadaljnjih odločitev o izdelku nam lahko izbrani podatki pomagajo tako, da se na podlagah zbranih podatkov pri osebnosti odločamo, katere funkcije bi osebnosti najbolj koristile.
Z osredotočeno prakso, da ugajamo le določenemu uporabniku, nam pomaga, da se izognemo ustvarjanju izdelka, ki zajema vse možne skrajnosti. Dejstvo je, da ne moremo oblikovati izdelka,
6 ki bi ugajal vsem. Je pa mogoče ustvariti izkušnjo, ki bo prijetna in uporabna za izbran nabor ciljnih uporabnikov (8).
2.1.2.2 Informacijska arhitektura mobilne aplikacije
Vse mobilne aplikacije so osredinjene na vsebino in funkcionalnosti in kako je le ta informacijsko razporejena v strukturi aplikacije. Besedila, vizualizacije, video in zvočne vsebine, galerije, navigacijski elementi itd. so lahko same po sebi že zanimive in dovolj všečne za uporabo, ampak če med njimi ni prave razvrstitve po položaju v informacijski arhitekturi in posledično pri oblikovanju vmesnika, se bo uporabnik hitro zmedel in bo prav kmalu prenehal uporabljati aplikacijo. Za dobro uporabniško izkušnjo je ključnega pomena, da je sama informacijska arhitektura dobro premišljena in pravilno organizirana. Je tretji sloj uporabniške izkušnje – struktura (9).
Informacijska arhitektura (IA) aplikacije je v bistvu organiziranost strukture in hierarhije; je struktura odnosov vsebine. Glavni cilj oblikovalca, ki se ukvarja z informacijsko arhitekturo je, da je navigiranje v aplikaciji preprosto in intuitivno (9).
Glavna razlika med IA za mobilne aplikacije in računalniške aplikacije ali spletne strani je precej očitna: uporaba mobilnega telefona je precej drugačna od računalnika.
Poznamo osem načel informacijske arhitekture za mobilne aplikacije (10,11):
• Načelo objektov – Mobilne vsebine obravnavamo kot "živo bitje". Različni tipi vsebine imajo svoje lastnosti, interakcije in vedenja, ki jih je potrebno upoštevati.
• Načelo izbire – Strani oblikujemo tako, da uporabnikom ponujajo smiselne izbire, pri čemer naj bo vrsta izbire osredotočena na določeno nalogo.
• Načelo odkritja – Uporabnikom razkrijemo samo toliko informacij, da razumejo, kaj jih čaka, ko se poglobijo v določeno funkcijo ali stran.
• Načelo vzorcev – Vsebino različnih kategorij predstavimo s prikazanimi primeri (slike, seznami, ikone).
• Načelo vhodnih vrat – Pričakovati je, da bo približno polovica uporabnikov na mobilnih straneh prišla z druge strani, ki ni domača stran.
• Načelo večkratne razvrstitve – Ker imajo uporabniki različne motive in načine, kako brskajo in iščejo informacije, jim omogočimo različne načine navigiranja čez vsebino.
7
• Načelo usmerjene navigacije – Navigacijo definiramo glede na funkcionalnost in ne lokacijo. Primer: Navigacijo v stranski vrstici zamenjamo za zgornjo ali spodnjo navigacijo.
• Načelo razvoja – Planiramo za razširitev. V mislih moramo imeti, da je digitalna vsebina živa. S časom raste in če tega ne upoštevamo, nam lahko povzroča težave.
Primer: kam dodati novo vsebino ali kategorijo.
Pri mobilni informacijski arhitekturi pa moramo upoštevati še dve stvari prikazani na sliki 2 (4):
• Značilnosti naprave: Interakcija uporabnika s pametnim telefonom temelji na potegih (ang. swipes) in dotikih (ang. tap) namesto klikov z miško in uporabo bližnjic na tipkovnici. Zaslon je bistveno manjši, zato lahko nanj spravimo bistveno manj elementov. Manjše velikosti in lažji telefon pa pomenita tudi to, da je telefon sam po sebi bolj prepričljiv za uporabo in prenašanje.
• Okoliščine uporabe: Danes uporabniki uporabljajo pametne telefone na vsakem koraku, najbolj pogosto pa posežejo po njih, ko hodijo od točke A do točke B, uporabljajo javni prevoz ali gledajo televizijo. Telefon uporabljajo tudi takrat, ko
“počnejo” še nekaj drugega. To pomeni, da lahko uporabniki uporabljajo napravo med slabšimi vidljivimi pogoji ali med različnimi motnjami.
Zaradi navedenih okoliščin je potreben dober premislek, kako naj se vsebina prikazuje na mobilni aplikaciji za nemoteno uporabniško izkušnjo (12).
Slika 2: Okoliščine, ki vplivajo na uporabnikovo interakcijo s telefonom (12)
8 Na voljo je že kar nekaj izhodišč mobilne informacijske arhitekture, po katerih se je mogoče zgledovati (10,12):
• Hierarhični model (ang. Hierarchy) – Hierarhični model oponaša strukturo spletnih strani. Začetek je na domači strani, ki je povezana na podstran, ta pa ima spet povezavo naprej na druge podstrani (slika 3). Ta tip IA deluje dobro pri enostavnih straneh, vendar ni prva izbira za mobilne aplikacije, ker pri rasti vsebine ni optimizirana za razširitev.
• Vozlišče in povezave (ang. hub & spoke) – To je privzeti model IA uporabljen v iPhone aplikacijah. Iz glavne strani (vozlišča – ang. the hub) se uporabniki lahko za opravljanje želenih nalog pomikajo na druge strani (povezave – ang. spokes) (slika 4).
Če bi si uporabniki želeli preklopiti na druge strani, se morajo najprej vrniti na glavno stran ali vozlišče. Ta struktura uporabnike spodbuja, da opravljajo eno nalogo hkrati.
Slika 3: Prikaz hierahičnega modela IA za mobilne aplikacije (10)
Slika 4: Prikaz IA modela vozlišče in povezave za mobilne aplikacije (10)
9
• Ugnezdena lutka (ang. nested doll) – To je linearen model (slika 5), ki uporabnikom omogoča premikanje z glavne strani z osnovno vsebinsko preglednostjo na strani z več vsebine. Ta model je uporaben za spletne strani in aplikacije, ki imajo fokus na eno določeno temo ali nekaj tem, ki so si zelo sorodne.
• Pregled zavihkov (ang. tabbed view) – Vsebina v tem modelu je razdeljena v zavihke. Uporabniki se premikajo med zavihki, ki so na voljo na vsaki strani (ali zavihku) (slika 6). Ta model je uporaben, ko uporabniki želijo večopravilnosti, vendar to lahko navigacijo po nepotrebnem zaplete.
Slika 5: Prikaz IA modela ugnezdena lutka za mobilne aplikacije (10)
Slika 6: Prikaz IA modela pregled zavihkov za mobilne aplikacije (10)
10
• Nadzorna plošča (ang. dashboard) – Nadzorna plošča na glavni strani prikazuje povzetke pogledov različnih informacijskih elementov, iz katerih se uporabnik lahko premakne naprej na stran s podrobnejšimi informacijami. Gre za priročno metodo, ki daje uporabniku hiter pregled informacij, vendar je hitro lahko prenatrpana z informacijami, zato se uporabnik lahko zgubi med vsemi prikazanimi informacijami (slika 7).
• Filtriran pogled (ang. filtered view) – Filtriran pogled uporabniku omogoča zoženje prikazanih informacij z uporabo filtrov. Ta metoda deluje dobro v primerih z veliko vsebine (slika 8).
Slika 7: Prikaz IA modela nadzorne plošče za mobilne aplikacije (10)
Slika 8: Prikaz IA modela filtriran pogled za mobilne aplikacije (10)
11 Pomembno je, da je previdno izbran tip strukture, ki nam ustreza. Seveda je možna kombinacija več tipov struktur, ki opisujejo dogajanje v aplikaciji, vendar potrebujemo en glavni matični tip strukture in nato lahko uporabljamo druge tipe strukture za podsekcije (12).
2.1.3 Žični modeli mobilne aplikacije
Žični modeli so preproste linijske risbe z označenimi elementi, s katerimi se osredotoča na dodeljevanje prostora in prioritizira vsebino, razpoložljive funkcije in predvideva vedenja uporabnikov. Zaradi tega so žični modeli enostavni in ne vključujejo stilov, barve ali grafike (14).
Vrste žičnih modelov (15):
• Žični modeli z malo podrobnostmi – Črno-bele ilustracije, ki so osredinjene k “veliki sliki” strani. Elementi uporabniškega vmesnika so prikazani kot polja in vrstice brez podrobnih pripisov. Tovrstni žični modeli so precej abstraktni, vendar dajejo predstavo osnovne strukture uporabniškega vmesnika.
• Žični modeli s srednjimi podrobnostmi – Ustvarjeni v enobarvni paleti, pogosto v sivinski lestvici. Ta vrsta modelov vsebuje različne vrste pisav in ustrezne razmike.
• Žični modeli z veliko podrobnostmi – Ti se od drugih dveh vrst razlikujejo po tem, da so barvni in prikazujejo bližnjo podobo končnega vizualnega oblikovanja. Pisave so stilsko oblikovane, vizualni elementi vsebujejo teksture in sence.
2.1.4 Oblikovanje uporabniškega vmesnika
Vsako izkušnjo, ne samo z izdelki in storitvami, ampak tudi z našo okolico ter prav tako v medsebojnih odnosih, zaznamo kot občutek. V oblikovalnem procesu je to zadnja točka na poti pri oblikovanju izkušnje za naše uporabnike: določitev, kako bo naše oblikovanje vplivalo na uporabnikove občutke.
Vendar oblikovanje ni le nekaj, kar izgleda estetsko lepo, saj imamo vsi drugačno mnenje o tem, kaj je estetsko, zato je pomembno, kako stvari delujejo na uporabnika in kako oblikovana aplikacija podpira definirane cilje iz spodnjih nivojev. Primer: ali so pri oblikovanju uporabniku jasne možnosti, ki so mu na voljo? Prav tako se skozi oblikovanje sporoča identiteta izdelka oz.
blagovne znamke. Zato je pomembna skladnost v izbiri barv, tipografije, gumbov in razmikov (3).
12 2.1.5 Testiranje uporabnosti (ang. Usability Testing)
Uporabnost lahko definiramo kot lahkotno upravljanje z izdelkom. Testiranje uporabnosti (ang.
Usability Testing) je proces, s katerim lahko prepoznamo najbolj relevantne probleme v sami uporabnosti izdelka. Testiranje uporabnosti ni namenjeno za odkrivanje vseh težav, je bolj kot vodič k razumevanju, zakaj imajo uporabniki težave in do kakšne mere jim odkrite težave preprečujejo da bi dosegli določen cilj (16).
Preden se lotimo opisovanja postopka, je prav, da razložimo pojem “uporabnost”. Steve Kurg, avtor Don’t make me think (17), je povzel uporabnost tako: “Je zgolj le način preverjanja, da nekaj deluje pravilno: tako, da stvar lahko uporablja uporabnik, s povprečnimi zmožnostmi, za predvideni namen, brez nepotrebnih frustracij, pa naj bo to spletna stran, opekač kruha ali vrtljiva se vrata.”
Uporabnost je kakovosten atribut, s katerim lahko ocenimo, ali je uporabniški vmesnik enostaven za uporabo. Beseda “uporabnost” se prav tako nanaša na metode za izboljšavo enostavne uporabe skozi oblikovni proces (18).
Uporabnost je opredeljena s petimi kakovostnimi sestavnimi deli (17):
• Učljivost – Opredeljuje, kako enostavno uporabnik lahko doseže osnovne naloge, ko se prvič sreča z oblikovanim vmesnikom.
• Koristnost – Kako hitro lahko uporabniki opravljajo naloge, enkrat ko so se že spoznali z oblikovanim vmesnikom.
• Zapomnljivost – Kako enostavno lahko uporabniki vzpostavijo znanje uporabe vmesnika po določenem obdobju, ko ga niso uporabljali.
• Napake – Koliko napak uporabniki naredijo, kako resne so te napake in kako enostavno jih lahko popravijo.
• Zadovoljstvo – Kako prijetno je uporabljati oblikovan vmesnik.
Namen testiranja uporabnosti ne služi kot samo odkrivanje težav z uporabnostjo, ampak hkrati tudi nakazuje, kaj deluje pravilno, uspešno. Pri testiranju je pomembno, da smo pozorni na vse aktivnosti in dejanja uporabnika, saj resnično intuitivnih in samoumevnih korakov, interakcij in atributov testiranec med testom sploh ne opazi ali omeni (4).
13 Tipični scenariji testiranja uporabnosti (18):
• Prepoznavanje glavnih vprašanj uporabnosti izdelka.
• Preverjanje, ali uporabniki razumejo korake za izvajanje določene naloge.
• Opazovanje, kako enostavno in hitro izpolnjujejo naloge, ki se uporabniku zadanejo pri testiranju.
• Preverjanje vrednosti aplikacije – ali jo naši potencialni uporabniki razumejo?
Koliko testov je potrebnih?
Po Nielsenovem mnenju testiranje petih ljudi v enem ciklu deluje, saj se do konca kroga prikaže 85 % problemov. Po krogu je potrebna prioritizacija težav, ki se nato izboljšajo, ponovi se vse skupaj in se preizkusi znova (17).
2.2 Predstavitev operacijskega sistema iOS
Aplikacija Socializer je oblikovana za operacijski sistem iOS, ki ga je razvil in ga uporablja Apple Inc, po njihovih smernicah za oblikovanje Human Interface Guidelines (19). Operacijski sistem iOS teče na Apple napravah, pri katerih večina interakcije predstavlja zaslon na dotik.
Smernice za oblikovanje vmesnikov (ang. Human Interface Guidelines) (19) slonijo na človeku prijaznem in razumljivem oblikovanju, kar lahko zaznamo že pri sami uporabi Applovih izdelkov.
iOS uporabniški vmesnik je narejen na podlagi direktne manipulacije uporabe več-dotičnih gest (ang. multi-touch gestures). Elementi za upravljanje vmesnika so sestavljeni iz drsnikov (ang.
sliders), stikal (ang. switches) in gumbov (ang. buttons). Interakcija z OS vsebuje geste, kot je potegni (ang. swipe), hiter pritisni dotik (ang. tap), poteg s prstoma skupaj (ang. pinch) in poteg s prstoma narazen (ang. reverse pinch). Imajo vse specifične definicije v kontekstu operacijskega sistema iOS in njegovega več-dotičnega vmesnika (19).
Nekatere aplikacije uporabljajo notranje merilce pospeškov za odzivanje na tresljaje naprave (ukaz za razveljavitev) ali pa vrtenje v treh razsežnostih (preklapljanje med portretnim in pokrajinskim načinom). Apple je deležen pohval za vključitev temeljitih funkcij dostopnosti (ang.
accessibility) v iOS, kar omogoča pravilno uporabo izdelkov tudi osebam z motnjami vida in sluha (19).
14 2.2.1 iOS Oblikovalske Teme (ang. iOS Design Themes)
Apple v svojih smernicah poziva oblikovalce aplikacij za njihovo platformo, da ciljajo k visokim standardom za kakovost in funkcionalnost.
Tri primarne smernice, ki ločujejo iOS od drugih platform so (19):
• Čistost (ang. Clarity) – Pisava naj bo čitljiva, ne glede na velikost skozi celoten sistem, prav tako naj bodo ikone natančne in razumljive, oblikovanje pa naj motivira ostro osredotočenost na uporabnost. Negativni prostor, barva, pisave, grafike in elementi vmesnika naj subtilno poudarjajo pomembno vsebino in prinašajo interaktivnost, primer lahko vidimo na sliki 9 (19).
• Upoštevanje in ohranjanje pomembnosti umeščenosti vsebine (ang. Deference) – Nemoteno gibanje in razumljiv, lep vmesnik pomaga uporabnikom razumeti in komunicirati z vsebino, tako da ne prevzema pozornosti od podane vsebine. Vsebina tipično prekriva celoten zaslon, medtem ko lahko s prosojnostjo in zamegljenostjo namigujemo na več slojev vmesnika. Z minimalno uporabo okvirjev, prehodov (ang.
gradients) in senc lahko dosežemo občutek svetlosti in lahkotnosti vmesnika, hkrati pa tako oblikovanje daje poudarek na vsebino. Primer uporabe lahko vidimo na sliki 10 (19).
• Globina (ang. Depth) – Z razločno vizualnimi plastmi in realističnimi gibi lahko dosežemo hierarhijo, ki dajejo občutek vitalnosti in olajšajo razumevanje za končnega
Slika 9: Primer aplikacije na podlagi iOS oblikovalske teme – Čistost (20)
15 uporabnika (slika 10). Z dotikom in odkrivnostjo se povečata zadovoljstvo in omogočata dostop do funkcionalnosti in dodatnih vsebin, ne, da bi se pri tem izgubil kontekst. Prehodi so pomembni med samim premikanjem po vsebini, ker dajejo občutek globine (19).
Slika 10: Primer aplikacije na podlagi iOS oblikovalske teme – Spoštovanje in Globina (21)
16
3 EKSPERIMENTALNI DEL
3.1 Cilji aplikacije Socializer
V prvi nivo oblikovanja uporabniške izkušnje (Strategija) spadajo cilji in želje uporabnikov. Eden izmed ciljev aplikacije je vzpodbuditi uporabnike k druženju v živo. Uspešni bi bili takrat, ko bi uporabniki začutili potrebo po druženju, pomislili na našo aplikacijo in jo uporabili. Torej, tako kot takrat, ko nekaj potrebujejo ali jih zanima – odprejo iskalnik Google in vtipkajo ključne besede in že iščejo in dobivajo relevantne rezultate. Ko potrebujejo odvračanje pozornosti, zabavo ali si želijo deliti utrinek iz njihovega življenja z drugimi, odprejo Instagram ali Facebook. Ko bi si želeli druženja v živo, bi uporabili aplikacijo Socializer. Ne želimo pa, da bi nas uporabniki povezovali z zmenkarjenjem, saj bi aplikacija bila zgolj le povezovalni element za širjenje socialnega kroga.
Za merilo uspešnosti aplikacije smo si zadali merjenje števila potrditev srečanj. To je stanje, ko uporabnik A pošlje prošnjo za srečanje uporabniku B in ga ta sprejme. Na tej točki imata oba uporabnika v ospredju uporabniškega vmesnika to srečanje, ki bi ga naj izvedla.
3.2 Opredelitev ciljne publike in določitev reprezentativnega uporabnika
Glede na predhodno izvedeno anketo, ki je bila izvedena junija 2018, smo ugotovili in našli ponavljajoče se vzorce odgovorov, po katerih smo definirali našo ciljno publiko. Anketa je bila izvedena na spletu in je sodelovalo približno tristo ljudi iz različnih koncev sveta, večina udeležencev je bila iz Anglije, našli so se tudi prebivalci Srbije, Nizozemske, Slovenije, Švedske, ZDA itd. Anketa je vsebovala šestnajst zastavljenih vprašanj, kot so:
• Starost.
• Samski stan.
• Kolikokrat so se anketiranci sestali s prijatelji v zadnih dveh tednih.
• Ali kdaj začutijo potrebo po druženju tudi takrat, ko so njihovi prijatelji zasedeni in kaj takrat storijo.
• Kje se ponavadi družijo s svojimi prijatelji?
• Ali so se kdaj spoznali s popolnim neznancem, s katerim so spletli prijateljsko vez.
• Koliko in katere aplikacije za druženje in spoznavanje so že preizkusili v preteklosti.
17
• Ali zaupajo drugim uporabniškim profilom prej naštetih aplikacij.
• Ali so že kdaj spoznali osebo v živo po aplikaciji.
3.3 Določitev reprezentativnega uporabnika mobilne aplikacije
Za reprezentativna uporabnika smo določili, katere informacije so pomembne, da jih vključimo:
• Osnovne informacije:
• Kratek opis osebe.
• Starost.
• Poklic.
• Število prijateljev v osebnem življenju (brez socialnega omrežja).
• Samski stan.
• Lokacija bivanja.
• Cilji in potrebe.
• Frustracije.
• Aktivnost na socialnih omrežjih.
• Interesi.
• Osebnostne značilnosti.
Ko smo določili ključne informacije, smo iz rezultatov ankete poiskali ponavljajoče se vzorce med odgovori iz ankete in jih prioritizirali po tem, kolikokrat so omenjeni. Iz razvrščenih podatkov smo tako oluščili podatke in jih razvrstili na dva dela za dva različna reprezentativna uporabnika (persone). Nato smo poskrbeli za oblikovni del reprezentativnih uporabnikov. Oblikovali smo ju v programu Sketch.
3.4 Informacijska arhitektura mobilne aplikacije
Informacijsko arhitekturo smo izdelali glede na ugotovitve iz ankete in pri tem smo upoštevali smernice, ki smo si jih postavili z definirano ciljno publiko in reprezentativnim uporabnikom. Na podlagi vseh pridobljenih podatkov smo najprej določili, katere strani želimo vključiti v našo aplikacijo, kakšno je smiselno zaporedje in na katere robne primere moramo biti pazljivi. Z izdelavo informacijske arhitekture smo tako zgradili temelj za nadaljnjo oblikovanje aplikacije.
Informacijsko arhitekturo smo izdelali v programu Sketch.
18
3.5 Žični modeli
Ko smo imeli razdelano, katere strani, funkcionalnosti in podatke potrebujemo za delovanje naše aplikacije, smo se lotili izdelave žičnih modelov za vse predvidene strani v aplikaciji. Žične modele smo izdelali v aplikaciji Sketch in se držali smernic in navodil iz teoretičnega dela.
3.6 Opredelitev vizualnih elementov za nadaljnjo oblikovanje mobilne aplikacije
3.6.1 Barve
Sestavili smo barvno paleto, v kateri je primarna barva bila že določena z logotipom – nebesno modra (#17A2CC). Ta vzpodbuja zaupanje, kar se nam zdi ključno za našo aplikacijo, saj osnovana na medsebojnem zaupanju. Predstavlja pa tudi svobodo, ki jo lahko povežemo s svobodo izbiranja, prav tako je radostna barva. V industriji jo najdemo pri izdelkih namenjenih za komunikacijo, tehnologijo in razvedrilo. Primarni barvi smo določili še svetlo in temno modro.
Pri nadaljnji izbiri barv smo upoštevali komplementarnost barv za sekundarno barvo (oranžna) in nadaljnje potrebne barve, ki bi pokrile možna stanja (napake, potrditve) v aplikaciji. Pomembna je pa tudi sivinska paleta, s katero se lahko gradi tipografska hierarhija. Na sliki 11 so prikazane definirane barve naše aplikacije.
19 3.6.2 Pisava
Pri izbiri pisave smo upoštevali, da so linearne pisave bolj berljive na zaslonih, tudi ob spreminjanju velikosti. Izbrali smo sistemsko pisavo iOS operacijskega sistema – SF Pro Text, ki zajema vse potrebne nabore znakov za različne jezike. Pisava je dobro berljiva in dovolj minimalistična, da ne odvrača pozornosti uporabnika od vsebine. Različne vrste pisave, ki so uporabljene v aplikaciji lahko vidimo na sliki 12.
Slika 11: Barvna paleta aplikacije
20 3.6.3 Gumbi
Pri oblikovanju aplikacije je pomembna skladnost, če želimo, da naša aplikacija izgleda bolj profesionalna in zaupanja vredna, zato je definiranje oblike in velikosti gumbov ključno pred samo izdelavo končnega. Z gumbi dajemo uporabniku nadzor nad dejanji v aplikaciji, vendar lahko na njegova dejanja vplivamo z izbiro barv pri gumbih in ga usmerimo v tisto akcijo, ki bi bila najbolj primerna za optimalno izkušnjo z aplikacijo. Zato smo oblikovali in definirali primarni in sekundarni gumb in dodali obema vsa možna stanja gumbov – osnovno, pritisnjeno in onemogočeno stanje, kot lahko vidimo na sliki 13. Ta stanja lahko vizualno sporočajo dogajanje v ozadju aplikacije ali pa, da se določena akcija ne more izvesti.
Slika 12: Opredeljena pisava SF Pro Text
21 3.6.4 Razmiki
Na skladnost in izgled aplikacije pa zelo vplivajo tudi sami razmiki ali bele površine med elementi v aplikaciji, saj izboljšajo zaznavo podatkov in omogočajo boljšo čitljivost. Pravilni razmiki dajejo elementom vizualno hierarhijo in s tem definirajo njihov medsebojni odnos. Za definiranje velikosti, robov (ang. margins), polnil (ang. paddings) smo se odločili za večkratnike števila 8, pri obeh blokovskih (na primer gumbi) in vrstnih elementih (23, 24).
Določitev sodega števila (na primer 8) za velikosti in razmike elementov olajša spreminjanje velikosti in omogoča skladnost pri uporabi različnih zaslonov.
Slika 13: Gumbi za uporabo v aplikaciji
22 Za naprave ki imajo ločljivost 1.5 x, bo upodabljanje težje z uporabo večkratnika lihega števila – na primer, če imamo element, ki je velik 5 slikovnih točk in ga povečamo za 1.5 x, dobimo polovični odmik slikovne točke in posledično moten rob, kot je prikazano na sliki 14.
Deljivost s številom 8 pa najdemo tudi pri večini zaslonov danes na trgu. Zato menimo, da je število 8 najbolj ustrezno za našo aplikacijo. Na sliki 15 lahko vidimo definirane razmike od 8 slikovnih točk pa vse do 96 slikovnih točk.
Slika 14: Spreminjanje velikosti pri sodem in lihem številu (27)
Slika 15: Definirani razmiki, ki so uporabljeni v aplikaciji
23 3.6.5 Prazna stanja (ang. Empty States)
Prazno stanje oz. prazne strani v aplikaciji so strani, kjer ni podatkov za prikaz. Te so pomembne pri oblikovanju aplikacije, saj predstavljajo tople pozdrave uporabnikom, predvsem na samem začetku uporabe aplikacije, kjer še ni vnesenih informacij bodisi od samega uporabnika ali drugih uporabnikov aplikacije. Prazna stanja štejejo med prve vtise aplikacije; pomagajo uporabnikom odkriti nove funkcije, vzpodbujajo izvedbo akcij in dajejo slog in osebnost sami aplikaciji. Z njimi aplikacija deluje bolj človeška in lahko daje občutek uporabniku, da ga aplikacija razume.
Do praznih stanj pride tako, da se je uporabnik šele registriral in posledično še ni bila izvedena nobena akcija, lahko, da je uporabnik počistil vse elemente, ki so mu bili na voljo, ali pa tako, da se je v ozadju nekje ustvarila napaka.
Prazna stanja so po navadi sestavljena iz preproste sličice/ilustracije, ki naj bi vizualno sporočala to stanje, ilustracijo pa navadno spremlja še obrazložitveno besedilo.
Za oblikovanje praznih stanj smo naprej potrebovali prostor – torej, kje lahko pride do praznih stanj in nato idejo, kaj bo glavni element, ki bo predstavljal prazno stanje. Prazno stanje potrebujemo na glavni strani (domov ang. Home), kjer se lahko zgodi, da ko želi uporabnik uporabljati našo aplikacijo, ni v njegovi bližini nobenega drugega uporabnika aplikacije, s katerim bi se lahko povezal. Za to stanje smo se odločili za motiv, ki predstavlja iskanje ali opazovanje, če se kdo nahaja v bližini. Do drugega primera praznega stanja, bi pa uporabnik lahko prišel na strani kontaktov, v primeru, da še nikoli ni ustvaril druženja z drugim uporabnikom. Do tega stanja, lahko tako pride samo na začetku uporabe aplikacije. Za motiv na tej točki smo se odločili za upodobitev imenika, vendar samo s slikami oseb. Ideje smo najprej skicirali na list papirja in jih nato računalniško zrisali v programu Sketch. Pri obeh ilustracijah so upodobljene osebe, zato je za skladnost in enotnost najprej potrebno definirati obrazne poteze, ki se pri vseh ilustriranih podobah ponavljajo. Za ilustracije smo uporabili barvno shemo, ki smo jo definirali že prej (točka 3.6.1.) in dodali še par odtenkov za upodobitev kožne barve in pa rjave za lase. Pri dodatnih barvah smo poskrbeli, da se ujemajo z definiranimi barvami. Slika 16 prikazuje končni prazni stanji; prvo prazno stanje se, kot že prej omenjeno, nahaja na glavni strani aplikacije, drugo pa na strani kontaktov.
24 Prazni stanji spremlja še obrazložitveno besedilo, da je uporabniku razumljivo, zakaj je prišlo do tega in pa kaj lahko stori sam uporabnik, da se izogne praznemu stanju (če je to sploh mogoče).
3.7 Oblikovanje vmesnika aplikacije
Ko smo imeli definirane štiri nivoje oblikovanja uporabniške izkušnje (strategija, obseg, struktura, ogrodje) smo se lahko posvetili zadnjemu – postavitev. Prej smo že opredelili vizualne elemente (barve, tipografijo, razmike, prazna stanja), iz katerih je aplikacija sestavljena, tako nam je manjkala samo še konča postavitev teh v končni podobi aplikacije. Za oblikovanje aplikacije smo uporabili program Sketch, v katerem so bili izdelani že prej omenjeni vizualni elementi.
V programu Sketch smo najprej določili velikosti zaslona iOS, in sicer 375 x 812 slikovnih točk in aplicirali elemente zastavljene v žičnih modelih tako, da se ujemajo z vizualnimi elementi in jih po potrebi prilagodili. Pri tem smo upoštevali definirane razmike, hiearhijo pisave in iOS oblikovalske smernice. Pri samem oblikovanju smo prav tako potrebovali fotografije za predstavitvene strani, ki dajejo podporo besedilu in profilne fotografije, ki smo jih poiskali na spletni strani Unsplash (22).
Slika 16: Prazni stanji uporabljeni v aplikaciji (Domov in Kontakti)
25 Na sliki 16 lahko vidimo primere uporabe razmikov in velikosti elementov uporabljene v aplikaciji, uporabo različnih fotografij za profilne fotografije ter uporabljeno hiearhijo pisave.
Slika 17: Razmiki in elementi v aplikaciji po večkratniku števila 8
26 3.7.1 Izdelava prototipa aplikacije
Prototipi so namenjeni preverjanju oblikovanemu vmesniku, strukture in same uporabnosti z uporabniki, preden pride do dejanske izvedbe ali javne objave aplikacije. S prototipi lahko ugotovimo, če je karkoli takega, kar bi uporabnika zmedlo in/ali če je karkoli odveč. V bistvu s prototipi preverjamo, kakšna je trenutna kakovost oblikovanega vmesnika, strukture, uporabnosti in kaj lahko spremenimo, da bi bilo uporabniku bolj prijazno.
Pri prototipih, ki so narejeni na način “preklikavanja” (ang. click-through) je pomembno, da so zasloni med sabo logično povezani, da imajo (če je možno) več izhodišč in da dajejo občutek, kot da uporabnik upravlja z realno aplikacijo.
Izdelali smo interaktiven prototip visoke ločljivosti, saj smo želeli doseči čim bolj realen občutek uporabe prototipa v primerjavi s pravo aplikacijo. Prototipsmo izdelali v programu Sketch, kjer smo v logičnem zaporedju medsebojno povezali strani aplikacije, tako kot bi si strani sledile v sami aplikaciji. V načinu za prototipiranje smo določili vroče točke (ang. Hot Spots), ki določajo prostor interakcije uporabnika z aplikacijo, ob ustrezni izvedeni gesti (ta se določi pri ustvarjanju prototipa), se izvede animacija in se prikaže naslednja stran, ki je bila določena na tej vroči točki.
Rezultat je delujoči interaktiven prototip, s katerim smo izvedli uporabniško testiranje.
3.8 Testiranje uporabnosti (ang. Usability Testing)
Z izvedenim testiranjem uporabnosti smo pridobili povratne informacije o izdelanem izdelku. Pred testiranjem smo napisali načrt študije in skripto, s katerima smo definirali potrebne informacije za izvedbo testa in se nanj pripravili.
3.8.1 Načrt študije
Izdelek: Socializer mobilna aplikacija Platforma: iOS
Cilji raziskovanja:
• 1. cilj: Preveriti, ali so uporabnikom predstavitvene strani dovolj jasne.
• 2. cilj: Ali lahko najdejo določeno povabilo, ga sprejemajo in začnejo pogovor z osebo.
27
• 3. cilj: Ali znajo povečati oz. razširiti okno pogovora in nato zaključiti pogovor.
3.8.2 Nastavitev
Testiranje je potekalo na spletni platformi maze.design, ki je namenjena prav za te namene, ker zbira uporabniške vpoglede in jih vključi v obstoječ oblikovan prototip.
Skripta
• Uporabniku razložimo namen testiranja in kako si lahko pomagamo z iskrenimi povratnimi informacijami, tako si tudi olajšajo svoje mnenje o “testni” situaciji.
• Izraz “testiranje uporabnosti” je lahko zavajajoč, saj osebe, ki izvajajo testiranje, testirajo izdelek in nikoli uporabnika. Zato je pomembno izpostaviti, da uporabnik ne povzroča neuspeha, saj nobena poteza uporabnika oz. testiranca ne pomeni, da je naredil kaj narobe, tudi če se ne zmore premakniti na naslednjo točko.
• Testne skripte smo prilagodili za vsakega udeleženca, glede na njihovo predznanje.
Nekateri so potrebovali razlago terminologije, kot je recimo prototip, medtem ko je bil drugim ta pojem že znan.
• Ustvarili smo realističen scenarij. Tukaj so bile pomembne osebne reakcije uporabnika na izdelek, saj nismo bili ocenjevalci uporabnosti, ki bi pisali ocene. Naša naloga je bila, da testirancem pomagamo do te mere, da so se predali in angažirali pri testiranju.
• Ustvarili smo natančne naloge, ki jih želimo, da jih naši udeleženci opravijo. V našem primeru je to bilo natančno zapisano besedilo ali naloge.
Naloge:
Testiranje smo razdelili na šest delov oziroma šest nalog. Nekatere naloge so narejene v obliki prototipa aplikacije, preko katerega so testiranci rabili zaključiti akcije, druge so pa sestavljene kot anketa in dodatna vprašanja v povezavi s prototipom.
• Prva naloga je bila zgolj demografskega namena, in sicer testirance smo povprašali, v katero starostno skupino spadajo.
• Druga naloga je bila sestavljena z delom prototipa, in sicer, da se testiranci pobližje spoznajo, prebijejo, preklikajo in preberejo predstavitvene strani oblikovane aplikacije, ki so razdeljene na tri strani, s kratkimi opisi in razlagami o sami aplikaciji.
28
• Tretja naloga je bila anketnega namena, in sicer smo testirance vprašali o jasnosti, kako so bile testirancem razumljive predstavitvene strani, s skalo od ena do pet, kjer ena predstavlja čisto zmedo in pet zelo jasno predstavitev.
• V četrti nalogi so testiranci na domači strani morali najti Christino, klikniti na njeno profilno fotografijo, ter na njenem profilu sprejeti povabilo, in ji nato pustiti sporočilo.
• Pri peti nalogi smo testirance vprašali, kako enostavno bi ocenili sprejemanje povabila, na lestvici od ena do deset, kjer ena predstavlja čisto zmedo ter 10 zelo enostavno sprejemanje povabila.
• Zadnja, šesta naloga, je bila namenjena testiranju ali se testiranci znajdejo pri uporabi razdeljenega zaslona na dva dela – na zgornji del, kjer je prikazana mapa in dodeljena lokacija za druženje, ter na spodnji del, kjer se odvija pogovor z uporabnikom. Tako smo testirancem zadali nalogo, da naj razširijo okno pogovora znotraj stanja druženja s Christino, tako, da je večinski del viden pogovor in mapa, ki vodi do točke za druženje v živo, je v večini skrita. Na koncu so testiranci rabili še končati druženje.
Aplikacijo smo testirali s petindvajsetimi anonimnimi posamezniki po spletu. Testirancem smo pred reševanjem nalog razložili pomen testiranja in jim podali navodila. Testiranci so v povrečju potrebovali tri do pet minut, samo testiranje je bilo na voljo tri dni.
Kot smo omenili že zgoraj, platforma maze.design uporablja svoj način ocenjevanja uporabnosti SCUS (Screen Usability Score), in sicer ocenjuje vsak zaslon posebej glede na določeno pričakovano pot. Končna ocena odraža, kako enostavno je za uporabnika končati podano nalogo.
Visoka ocena uporabnosti označuje, da je oblikovan uporabniški vmesnik enostaven za uporabo in intuitiven. Skupna ocena uporabnosti je točno določena številka od 0 do 100, ki je podana glede na vsako stran in nalogo.
Rezultati so preračunani po naslednji formuli:
SCUS Formula: (25)
SCUS = MAX(0,100 – (DOR × dW) – (MCR*mW) – (MIN(10,MAX(0,(AVGD – 5)/2))))
Ki ima naslednje spremenljivke:
SCUS = Ocena uporabnosti zaslona (ang. Screen Usability Score) DOR = Stopnja odstopa in odbitka (ang. Drop-off and Bounce Rate)
29 dW = Teža DOR; dW je enaka 1 točki za vsak odstop / odboj
MCR = Stopnja napačnih klikov (ang. Misclick Rate)
mW = Teža MCR; MW je enaka 0,5 točki za vsak napačen klik
AVGD = Povprečno trajanje v sekundah (ang. Average Duration in Seconds)
In naslednje funkcije:
MAX : MAX (vrednost, {izraz}) => vrne maksimum med vrednostjo in izrazom MAX : MIN (vrednost, {izraz}) => vrne minimum med vrednostjo in izrazom
30
4 REZULTATI IN RAZPRAVA
4.1 Rezultati opredelitve ciljne publike in reprezentativnih uporabnikov
Iz rezultatov preliminarne raziskave menimo, da so spodaj navedeni najpomembnejši podatki, ki so nam služili za nadaljnji razvoj.
Demografska razčlenitev:
• Starost: 18–30 let (84 %).
• Samski stan: samski (76 %).
Psihografska razčlenitev:
• Osebnost: osebe, ki menijo, da so ekstrovertirane.
• Potreba po druženju: osebe, ki se vsaj 3 x na teden vidijo s prijatelji.
• Lokacija druženja: bari, restavracije.
Pri izvajanju raziskav smo med odgovori ugotovili, da ima več kot 65 % ljudi, ki spadajo v našo ciljna publika ta problem, ki ga rešujemo. Prav tako zanj do sedaj še nimajo dobre rešitve, saj so nam nekateri pojasnili, da se velikokrat znajdejo v položaju, ko bi si želeli druženja, pa nimajo nikogar, s komer bi se lahko družili.
Na sliki 17 in 18 sta prikazana dva reprezentativna uporabnika opredeljena iz raziskave ciljne publike, Kevin in Tara.
31
Slika 18: Reprezentativni uporabnik – Kevin (fotografija osebnosti prevzeta po viru 22)
Slika 19: Reprezentativna uporabnica – Tara (fotografija osebnosti prevzeta po viru 22)
32
4.2 Rezultati informacijske arhitekture in žičnih modelov
Za našo mobilno aplikacijo Socializer smo določili, da bo kombinirana informacijska arhitektura, in sicer med linearno, ki se prav tako uporablja za spletne strani ter med vozliščem in povezavami.
Ker se mobilna aplikacija precej razlikuje od samega spletnega mesta, smo IA naše aplikacije razdelili na tri dele.
1. Odjavljeni del
Odjavljeni del je del, ki je prikazan, ko se po uporabi aplikacije že odjavi, ali ko uporabnik na novo naloži aplikacijo. Pod ta del smo vključili:
• Nalaganje zaslona (ang. Splash screen) – Del, ko se aplikacija zažene in uporabniku da povratno informacijo o dogajanju. Tukaj smo z oblikovanjem pri standardni praksi, in sicer enostaven zaslon s prikazanim logotipom na sredini.
• Predstavitvene strani (ang. Onboarding) – Del, kjer uporabnik izve ključne podatke o aplikaciji, čemu je namenjena, kaj lahko uporabnik počne z njo in ključne funkcije aplikacije.
• Registracijski ali prijavni del – Na tej točki se uporabniki registrirajo ali prijavijo v aplikacijo. Korak za prijavo ali registracijo je enak, se pa pot loči, ko aplikacija zazna, ali gre za prijavo ali registracijo. In sicer, ko se registrira nov uporabnik, je naslednji korak dodajanje telefonske številke in potrditev telefonske številke s kodo prejeto po SMS sporočilu. S tem načinom onemogočimo izrabljanje lažnih profilov. Po potrditvi telefonske je naslednji korak dodajanje rojstnega datuma, nato sledi dovoljenje za lokacijo in obvestila, brez katerih aplikacija ne more pravilno delovati. V primeru, da pa gre za že registriranega uporabnika, in se je le ta, samo še enkrat prijavil v aplikacijo, je usmerjen naprej na prijavljeni del.
2. Prijavljeni del
To je del, ko je uporabnik prijavljen in so mu na voljo funkcije aplikacije.
Pod ta del smo vključili:
• Matično ploščo – Ta sestoji iz več različnih strani:
• Domača stran aplikacije (ang. Home) – Tukaj so uporabniku prikazani podatki o drugih uporabnikih, ki se nahajajo v njegovi bližini, ki jih lahko potencialno povabi na druženje. Na domači strani so prav tako prikazane informacije o prejetih povabilih za druženje od drugih uporabnikov, kot tiste, ki jih je uporabnik
33 sam poslal za druženje. Iz domače strani se lahko uporabnik premika naprej do profila drugih uporabnikov, lastnega uporabniškega profila in do strani s prikazanimi preteklimi druženji.
• Profil drugih uporabnikov – Vsebuje ključne informacije o uporabniku, kot so ime, starost, slika in opcijski opis. Na profilu pa se prav tako nahaja gumb za povabilo na druženje. Prav tako je pomembno, da so vključene opcije za prijavo profila in blokiranje.
• Stanje druženja – V to stanje lahko uporabnik pride samo takrat, ko sprejme povabilo za druženje, ali drugi uporabnik sprejme njegovo poslano povabilo za druženje. Stanje druženja je sestavljeno in predlagane lokacijske točke, kje naj bi druženje potekalo ter prostorom za izmenjevanje sporočil, ki omogoča, da se bo to druženje lahko zgodilo, saj si uporabnika lahko izmenjata ključne informacije brez, da bi si izdala telefonski številki.
• Pretekla druženja – Pregled vseh preteklih druženj z dodano možnostjo ponovnega povabila na druženje, ne glede na razdaljo med uporabnikoma.
• Uporabniški profil – Del, kjer so izpisani podatki uporabnika, z njimi lahko upravlja in spreminja po njihovi volji.
• Nastavitve – Del, kjer uporabnik prilagodi nastavljive nastavitve, glede vsebine, pravic itn. Pod nastavitve po navadi spada tudi možnost za odjavo in/ali izbris profila.
3. Globalni del
Globalni del zajema prikaz podatkov, ki niso vezani na točno določen potek premikanja uporabnika v aplikaciji in se lahko pojavijo skozi oba druga dva dela (odjavljeni in prijavljeni del).
Pod ta del smo razvrstili obvestila:
• Obvestila – Pojavna okna na zaslonu, ki opozarjajo na dejanje, ki ga želi uporabnik storiti, v primeru, če je pritisnil na določeno akcijo po pomoti ali si je uporabnik v tem kratkem času premislil glede izvršitve te akcije. V večini ta obvestila pokrivajo negativna dejanja, ki jih kasneje ni mogoče razveljaviti.
Vozlišče in povezave so primarni model informacijske arhitekture, saj se bodo uporabniki največ zadrževali v prijavljenemu delu (slika 20).
34
Slika 20: Informacijska arhitektura
Na podlagi informacijske arhitekture smo izdelali žične modele s srednjimi detajli (slika 21) in tako izdelali ogrodje za nadaljnjo oblikovanje aplikacije.
35
4.3 Rezultati oblikovanja mobilne aplikacije
V zadnji fazi načrtovanja uporabniške izkušnje smo oblikovali izgled končne aplikacije. Najprej smo se lotili izdelave odjavljenega dela aplikacij, kot je prikazano na sliki 22, ki vsebuje nalaganje zaslona, predstavitvene strani (ang. onboarding) in registracijo/prijavo. Ta del je pomemben, ker se preko tega uporabnik seznani z delovanjem in namenom aplikacije. Uporabnik je po namestitvi aplikacije na svoj telefon dobil celotno izkušnjo odjavljenega dela, če bi se pa iz kakršnegakoli
Slika 21: Žični model aplikacije Socializer
36 razloga želel odjaviti in nato nazaj prijaviti, bi ga čakala samo prijava s Facebook ali Google računom. V samem postopku registracije je ključnega pomena tudi prijava s telefonsko številko, ker se na ta način izognemo ponarejenim profilom in s tem damo uporabniku večji občutek varnosti, ki smo ga pri reprezentativnem uporabniku izpostavili. Tukaj smo ozavestili, da lahko s tem korakom odvrnemo marsikaterega uporabnika, vendar smo se glede na rezultate analize trga odločili, da nam je prednostno to, da se uporabniki počutijo varno.
V spodnji vrstici je prikazan registracijski in prijavljeni del. Kot že prej omenjeno, ima registracijski del več korakov, in sicer zajema še vnos telefonske številke in datum rojstva. Za potrditev telefonske številke uporabnik potrebuje vnesti telefonsko številko, na katero prejme kodo za njeno potrditev. Kodo vnese na ločeni strani, ki smo jo namenili prav za to. Ko je koda vnesena in je pravilna, se uporabnik lahko premakne na dodajanje rojstnega datuma. Pri strani, kjer uporabnik vnese datum rojstva, smo se za komponento za izbiro datuma odločili za iOS sistemsko komponento izbirnik datumov (ang. date picker).
Slika 22: Odjavljeni del aplikacije
37 V odjavljeni del spadata tudi dovoljenji za lokacijo in prejemanje obvestil, ki sta potrebni za optimalno delovanje aplikacije. Pri lokacijski je idealno, če uporabnik dovoli, da aplikacija vedno uporablja njegovo lokacijo, saj se glede na njegovo premikanje spreminjajo podatki prikazani na domači strani in pa tako daje tudi drugim uporabnikom aplikacije najbolj relevantne podatke, da se nahaja v njihovem radiju. Tako lahko uporabnik izkusi celotno izkušnjo aplikacije. Slika 23 prikazuje dovoljenji za uporabo lokacije in obvestil.
Po dovoljenju lokacije lahko dostopamo do glavne strani (slika 24), kjer je viden seznam drugih uporabnikov, z njihovimi imeni, opisi ter avatarjem (profilno fotografijo). To je seznam ljudi, ki se nahajajo v bližini (do radija 2,5 km). Ta stran je dinamična in se prikazana vsebina spreminja
Slika 23: Dovoljenji za uporabo lokacije dovoljenje za obvestila
38 glede na lokacijo, če smo koga povabili na srečanje ali, če je kdo povabil nas. Če v naši okolici ni nobenega drugega uporabnika, se nam pokaže prazno stanje (slika 16).
Na sliki 24 vidimo tri poti uporabnikov, in sicer:
• 1. pot: Seznam oseb v naši bližini.
• 2. pot: Podatki o poslanih prošnjah za druženje in seznam oseb v naši bližini.
• 3. pot: Prejeta povabila na druženje, podatki o poslanih prošnjah za druženje in seznam oseb v naši bližini.
Seznam oseb, ki se pojavlja pri vseh treh poteh uporabnika, zajema ključne informacije, ki so prav tako navedene na uporabniškem profilu (predstavljeno spodaj) torej ime, starost, poljuben opis in slika. Pri drugi in tretji poti smo se odločili, da v primeru, ko uporabnik dobi povabilo drugega uporabnika, je le ta bolj izpostavljen na vrhu, in ima dodatno še moder rob, ki kliče po akciji. Klik na avatar osebe uporabnika odpelje na uporabniški profil uporabnika, ki ga vabi na druženje. V naslednji vrstici pod prejetimi povabili se prav tako nahajajo povabila, ki jih je uporabnik sam poslal drugim in čakajo na njihov odgovor.
Slika 24: Matična plošča, ki prikazuje različne poti uporabnika
39 Iz glavne strani se lahko premaknemo na naš profil (slika 25), kjer lahko uredimo prikazno fotografijo in opis, ki je lahko poljuben. Ker bi se pa radi izognili praznim opisom, aplikacija prvotno umesti enega izmed generičnih opisov, ki delujejo povabljivi. Tukaj najdemo tudi možnost za odjavo iz aplikacije.
Slika 25: Uporabniški profil prijavljenega uporabnika
40 Če se vrnemo na glavno stran, se lahko tudi premaknemo na profil od drugega uporabnika, ki omogoča, da ga povabimo k druženju. Uporabnika na njegovem profilu lahko po potrebi tudi blokiramo in prijavimo.
V primeru, da nekdo sprejme naše povabilo ali mi sprejmemo povabilo druge osebe, preidemo v stanje druženja, kjer je vidna določena lokacija (v večini primerov je to bar), ki jo aplikacija določi sama, navigacijo, ki uporabnika vodi do podane lokacije in polje za medsebojna sporočila, kot lahko vidimo na sliki 26, na drugem in tretjem predstavljenemu zaslonu. Polje za sporočila je namenjeno za dogovarjanje podrobnosti in je omejeno na 90 minut. Po 90. minutah aplikacija sama zaključi druženje in vsa poslana sporočila izginejo. To je namenjeno za vzpodbujanje k srečanju v živo in izogibanju prekomernemu pogovarjanju po sporočilih. Prav tako so vsa sporočila enkriptirana za varnost osebnih podatkov.
V stanju druženja je, kot že prej omenjeno zaslon razdeljen na dva dela (lokacijo in sporočila), ki ga lahko po želji povečamo v eno ali drugo smer. Če potegnemo okence za sporočila gor, se ta raztegne in v večini vidimo sporočila (prav tako se to zgodi, če kliknemo v prostor za vnašanje sporočila, saj se nam prikaže pod tem tipkovnica), če pa potegnemo to okence navzdol pa v večini vidimo navigacijo.
Druženje se lahko zaključi s križcem (X), za katerega je potrebna še dodatna potrditev, da je to res željena akcija, kot je prikazano na sliki 26 na zadnjem zaslonu.
Slika 26: Potek druženja
41 Iz glavne strani in/ali iz našega profila, lahko dostopamo do strani kontaktov (ang. Contacts), kjer lahko dostopamo do vseh druženj, ki smo jih opravili preko naše aplikacije. Tukaj lahko željeno osebo ponovno povabimo k druženju ne glede na to, ali je v določenemu radiju ali ne, ali v primeru, da se ne želimo več z določeno osebo sestati, lahko to osebo odstranimo iz našega seznama kontaktov, kot lahko vidimo na sliki 27. V primeru, da še ni bilo opraviljeno nobeno druženje, se nam prikaže prazno stanje (slika 16).
Slika 27: Kontakti
42
4.4 Rezultati izdelave prototipa
Na naslednji sliki (slika 28) je prikazan oblikovan uporabniški vmesnik povezan v prototip. Na sliki so prikazane oranžne puščice, ki prikazujejo potek prototipa. Pri izdelavi prototipa smo se odločili, da smo zajeli predstavitvene strani zato, da so testiranci dobili informacije, kaj je namen aplikacije in pa idealno pot uporabnika, torej sprejem druženja, druženje v poteku in zaključek druženja.
Slika 28: Povezan prototip
43
4.5 Rezultati testiranja uporabnosti
Platforma Maze je na koncu ustvarila poročilo z rezultati testiranja in podrobnimi informacijami, kje so se uporabniki zataknili, kje jim uporaba aplikacije ni delala težav in s priporočili, kaj je v aplikaciji potrebno izboljšati. Maze te podatke oz. parametre izračuna na podlagi njegovih algoritmov in upošteva njihove glavne kazalnike uspešnosti uporabnosti: uspešno zaključene naloge, odbitki testirancev, ki so naloge zapustili ali opustili, trajanje izvajanja nalog in napačnih klikov.
Ocena uporabnosti meri uporabnost oblikovanja na podlagi ključnih kazalnikov uspešnosti:
uspeha, odbijanja, trajanja in napačnih klikov.
Rezultat je v razponu od 0 do 100, višji rezultat pomeni boljšo uporabnost.
Ocena uporabnosti je določena glede na naslednje ravni praga:
• Visoka raven: 80–100.
• Srednja raven: 50–80.
• Nizka raven: 0–50.
Naša skupna ocena uporabnosti je bila 73, kar pomeni, da sta funkcionalnost in koristnost aplikacije zadovoljivi, testiranci so v večini naloge uspešno izpeljali. Majhen procent testirancev je naloge zapustil ali opustil, in sicer v četrti nalogi je takih 9,5 % ter v šesti nalogi jih je 15 %. Kar pomeni, da aplikacija ni slabo zastavljena in je v večini zadovoljiva in koristna za uporabo, ena stran, pa bi potrebovala še malce dodelave ali manjše spremembe.
Pri prvem delu testiranja smo testirance vprašali po njihovi starosti in iz rezultatov lahko ugotovimo, da največji delež (56 %) pripada mladim med 24. in 30. letom, kar je tudi v skladu z našo ciljno publiko. Drugo uvrščena je starostna skupina od 18 do 23 let (28 %) in na zadnjem mestu 31 do 45 let (16 %). Med testiranci ni bilo nobenega, ki bi bil mlajši od 18 let in starejši od 45 let, kar lahko razberemo iz spodnje slike (slika 29). Prikazani grafi so vzeti iz ustvarjenega poročila na platformi Maze.
