POVZETEK: V Sloveniji imajo spletne banke še precej prostora za izboljšanje storitev in širitev ponudbe med vse ciljne skupine. Banke lahko konkurenco prehitijo s spletnimi bančnimi storitvami, ki so oblikovane z mislijo na uporabnika, pri čemer se sodelovanju z njimi ni mogoče izogniti. V magistrskem delu s pomočjo pregleda literature in študije primera spletne banke NLB Klik predstavljamo, kako oblikovati in oceniti uporabniško izkušnjo komitentov s spletno banko. Raziskali smo vse tri vidike uporabniške izkušnje spletne banke, in sicer funkcionalnost, uporabnost in zadovoljstvo ob uporabi. Nato smo se osredinili na ključne dejavnike dobre uporabniške izkušnje, ki vključujejo: navigacijo, vizualno podobo uporabniškega vmesnika in razumevanje vsebine. Na osnovi raziskovalnih vprašanj ter s pomočjo testov uporabnosti in razvrščanja kartončkov smo pokazali, s katerimi težavami se spoprijemajo uporabniki spletne banke, ki z vidika uporabniške izkušnje ni optimizirana. Oblikovali smo tudi predloge, kako te težave odpraviti. Ugotovili smo, kako pripraviti strukturo in poimenovanja v navigacijskem meniju, kako izboljšati obliko posameznih funkcionalnosti, da bo vsebina dostopna za širšo ciljno skupino, in kako izboljšati podajanje informacij, da jih bodo uporabniki razumeli ter posledično bolj samozavestno in z veseljem uporabljali. Ker pregled literature kaže, da so izpostavljeni problemi široko prisotni, lahko predloge posplošimo tudi zunaj študije primera NLB Klika. (ENGLISH) User experience in online banking: case study of user interface in service NLB Klik Slovenian online banks show a considerable margin for improvement in the services they provide to all target groups. Banks can surpass their competition with banking services designed with users in mind, which also entails working closely with them. In this master thesis we investigate how to design and evaluate user experience of online banking drawing on a literature review and a case study of NLB Klik online bank. We first examine all three aspects of user experience: functionalities, usability, and user satisfaction. Next, we focus on the key factors of good user experience, including navigation, visual attributes of user interface, and reading comprehension. Driven by the research questions, we use usability tests and card sorting to examine what problems users face when an online bank is not optimized for user experience. Using the same data we then propose solutions to these difficulties. We provide suggestions on how to structure and name items in the navigation menu; how to change the design of specific functionalities to improve accessibility for a broader target group; how to make information delivery more understandable and how that leads to users using the service in with more confidence and delight. Since literature review shows that identified problems are wide present, we conclude that our findings

1. U P O R A B N I Š K A I Z K U Š N J A V
S P L E T N E M B A N Č N I Š T V U :
š t u d i j a p r i m e r a u p o r a b n i š k e g a
v m e s n i k a s t o r i t v e N L B K l i k
M A Š A C R N K O V I Č
Mentor: doc. dr. Andraž Petrovčič
Ljubljana, 2017

2. V S E B I N E
P R E G L E D 2
R AZ I S K AV A
1 AN ALI Z A
2 R E Š I T V E
3
Z A G O V O R

3. R a z i s k a v a

4. Z A K A J U P O R A B N I Š K A I Z K U Š N J A ?
R A Z I S K A V A 4
D O B R A U P O R A B N I Š K A
I Z K U Š N J A
V E Č U P O R A B N I K O V , K I
S O B O L J Z A D O V O L J N I
V E Č J I D O B I Č E K I N
U G L E D B A N K E
Z A G O V O R

5. U P O R A B N I Š K A I Z K U Š N J A
S P L E T N E S T O R I T V E
R A Z I S K A V A
U Ž I T E K
U P O R A B N O S T
V S E B I N A I N
F U N K C I O N A L N O S T I
Kako privlačna
je uporaba?
Kako enostavna je uporaba?
Ali so uporabnikom na voljo želene vsebine in funkcionalnosti?
5Z A G O V O R

6. K A K O O C E N I T I I N I Z B O L J Š A T I
U P O R A B N I Š K O I Z K U Š N J O S P L E T N E B A N K E ?
R A Z I S K A V A
1. Kakšna je navigacija spletne banke, da je razumljiva
uporabnikom?
2. Kako izboljšati vizualno podobo osrednjega dela
uporabniškega vmesnika, da bodo uporabniki lažje
uporabljali ponujene funkcionalnosti?
3. Kako izboljšati razumljivost poimenovanj v osrednjem
delu uporabniškega vmesnika?
Z A G O V O R 6

7. Povprečno trajanje testa
28 min
Število testirancev
8
Število kartončkov
23 vsebin + 9 funkcionalnosti
Glavni cilj
Odkriti optimalno organizacijo informacij
in poimenovanje navigacijske strukture
ZAGOVOR

8. Povprečno trajanje testa
47 min
Število testirancev
7
Število nalog
11
Glavni cilj
Odkriti težave pri razumevanju NLB Klika
in obvladovanju funkcionalnosti
R A Z I S K A V A 8Z A G O V O R

9. A n a l i z a

10. Potrebna je zbranost in veliko raziskovanja. Tudi
osnovne bančne izraze moraš poznati. Želel bi si,
da bi bilo bolj podobno miselnemu vzorcu in z več
vizualnimi poudarki. Zelo je monotono.
– U D E L E Ž E N E C T E S T I R A N J A
A N A L I Z AZ A G O V O R 10

11. 24 uporabniških težav
A N A L I Z AZ A G O V O R
6
zelo resnih
10
srednje resnih
8
manj resnih
11

12. Pri obeh metodah raziskave so imeli
uporabniki težave z razumevanjem
bančnih izrazov in poimenovanji, ki
niso dovolj natančna.
Z A G O V O R A N A L I Z A 12
SEPA depoziti
referenca
valuta računa
klirinška koda
E-računi
SEPA direktne obremenitve
spremenljiva obrestna mera
Klikin
trajni nalogi SMS-sporočila

13. Navigacijska struktura spletne banke ne sledi
mentalnemu modelu uporabnikov. Uporabniki
pričakujejo vsebino tematsko razporejeno in ne
ločeno glede na funkcionalnost ali akcijo.
Z A G O V O R A N A L I Z A 13
Osebni računi: Kartice: Varčevanja:
• Stanje
• Promet
• Izpiski
• Stanje
• Promet
• Naroči
• Stanje
• Naroči
Stanje: Promet: Naroči:
• Osebni računi
• Kartice
• Varčevanja
• Osebni računi
• Kartice
• Varčevanja
• Osebni računi
• Kartice
• Varčevanja
I L U S T R A T I V N I P R I M E R

14. Uporabnik, ki ne naredi
pravilnega prvega klika, z
70% manjšo verjetnostjo
nalogo uspešno zaključi.
Z A G O V O R 14

15. T E Ž A V E V I Z U A L N E P O D O B E
A N A L I Z A 15
UP O R A B A L E E N E
B A R V E
Vijolična in siva nista dovolj, da bi
učinkovito dajali pomen in
kontekst posameznim elementov.
K R ŠE N J E
K O N V E N C I J
Delovanje in oblika
funkcionalnosti niso takšne, kot
so jih uporabniki navajeni iz drugih
spletnih strani.
D R O BNI T E K S T
BR E Z H I E R A R H I J E
Velikost in struktura besedila,
otežujeta branje.
Z A G O V O R

16. N E - S O D O B E N D I Z A J N
Estetika vpliva na
zaznano kakovost in
uporabnost.
Z A G O V O R A N A L I Z A 16

17. R e š i t v e

18. 7 K L J U Č N I H R E Š I T E V
M I S E L N I M O D E L
1. Informacijska arhitektura, ki sledi
miselnemu modelu
2. Poimenovanja gumbov, ki jih uporabniki
razumejo
3. Poimenovanja gumbov, ki točno
opisujejo, kaj se po kliku zgodi
R E Š I T V EZ A G O V O R 18
P R I R O Č N O S T
4. Vizualna arhitektura vmesnika, ki
uporabniku pomaga pri opravljanju nalog
5. Velikost in struktura besedila, ki olajša
branje in omogoča „skeniranje“
6. Sodobna celostna podoba, ki je poenotena z
drugimi digitalnimi produkti banke
7. Upoštevanje konvencij pri oblikovanju in
delovanju interaktivnih elementov

19. 7 K L J U Č N I H R E Š I T E V
M I S E L N I M O D E L
1. Informacijska arhitektura, ki sledi
miselnemu modelu
2. Poimenovanja gumbov, ki jih uporabniki
razumejo
3. Poimenovanja gumbov, ki točno
opisujejo, kaj se po kliku zgodi
R E Š I T V EZ A G O V O R 19
P R I R O Č N O S T
4. Vizualna arhitektura vmesnika, ki
uporabniku pomaga pri opravljanju nalog
5. Velikost in struktura besedila, ki olajša
branje in omogoča „skeniranje“
6. Sodobna celostna podoba, ki je poenotena z
drugimi digitalnimi produkti banke
7. Upoštevanje konvencij pri oblikovanju in
delovanju interaktivnih elementov
+ P O M O Č
v trenutku in na mestu, ko jo uporabnik potrebuje

20. 1. Pomoč v obliki pojasnil in
razlag, kaj uporabnik lahko
naredi na posameznem
zaslonu
2. Pomoč, namigi in razlage med
uporabo funkcionalnosti (tooltips)
3. Dokumentacija s pomočjo in odgovori
na pogosta vprašanja (FAQ)
4. Jasen in kar se da specifičen feedback
o napakah in neuspelih akcijah
5. Izobraževanje o funkcionalnostih
portala v stilu »Ali ste vedeli?«
Primer: SharpSpring app
Na vsakem zaslonu
dobimo pomoč, ki
je povezana z
akcijam na njem.
Primer zaslona, kjer
lahko ustvarimo novo
formo in pregledamo
podatke. Pomoč je
temu ustrezna.

21. 1. Pomoč v obliki pojasnil in razlag, kaj
uporabnik lahko naredi na
posameznem zaslonu
2. Pomoč, namigi in razlage med
uporabo funkcionalnosti
(tooltips)
3. Dokumentacija s pomočjo in odgovori
na pogosta vprašanja (FAQ)
4. Jasen in kar se da specifičen feedback
o napakah in neuspelih akcijah
5. Izobraževanje o funkcionalnostih
portala v stilu »Ali ste vedeli?«
Ikona, ki ponudi dodatno razlago, če se ji
približamo z miško
Razlaga ob polju (lahko tudi pod njim).
Primer: SharpSpring app

22. 1. Pomoč v obliki pojasnil in razlag, kaj
uporabnik lahko naredi na
posameznem zaslonu
2. Pomoč, namigi in razlage med
uporabo funkcionalnosti
(tooltips)
3. Dokumentacija s pomočjo in odgovori
na pogosta vprašanja (FAQ)
4. Jasen in kar se da specifičen feedback
o napakah in neuspelih akcijah
5. Izobraževanje o funkcionalnostih
portala v stilu »Ali ste vedeli?«
Na koncu je pojasnilo te funkcionalnosti,
dodatne informacije in opozorilo.
Za kakšen tip besedila gre, je takoj jasno
na podlagi ikone.
Primer: SharpSpring app

23. 1. Pomoč v obliki pojasnil in razlag, kaj
uporabnik lahko naredi na
posameznem zaslonu
2. Pomoč, namigi in razlage med uporabo
funkcionalnosti (tooltips)
3. Dokumentacija s pomočjo in
odgovori na pogosta vprašanja
(FAQ)
4. Jasen in kar se da specifičen feedback
o napakah in neuspelih akcijah
5. Izobraževanje o funkcionalnostih
portala v stilu »Ali ste vedeli?«
Primer: Unbounce app, Sharpspring app
Pomoč je vedno na voljo v
zgornjem desnem meniju
Različni tipi pomoči, ki vodijo do
strani z dokumentacijo in kontakti

24. 1. Pomoč v obliki pojasnil in razlag, kaj
uporabnik lahko naredi na
posameznem zaslonu
2. Pomoč, namigi in razlage med uporabo
funkcionalnosti (tooltips)
3. Dokumentacija s pomočjo in odgovori
na pogosta vprašanja (FAQ)
4. Jasen in kar se da specifičen
feedback o napakah in
neuspelih akcijah
5. Izobraževanje o funkcionalnostih
portala v stilu »Ali ste vedeli?«
Primer: Twitter

25. 1. Pomoč v obliki pojasnil in razlag, kaj
uporabnik lahko naredi na
posameznem zaslonu
2. Pomoč, namigi in razlage med uporabo
funkcionalnosti (tooltips)
3. Dokumentacija s pomočjo in odgovori
na pogosta vprašanja (FAQ)
4. Jasen in kar se da specifičen feedback
o napakah in neuspelih akcijah
5. Izobraževanje o
funkcionalnostih portala v stilu
»Ali ste vedeli?«
Primer: SlideShare
Nasveti, kaj funkcionalnost je in kako jo uporabiti

26. R E Š I T V E 26Z A G O V O R
Čeprav obstaja veliko hevristik, je za dobro
uporabniško izkušnjo potrebno v proces vključiti
uporabnike - in proces testiranja ponavljati.
Hevristike so statične, uporabniki in produkt pa
se spreminjajo.

27. I M P L E M E N T A C I J A R E Š I T V E
R E Š I T V E 27Z A G O V O R
NLB Klik prenova 2016

28. … N E K A J D E L A J E Š E O S T A L O
R E Š I T V E 28Z A G O V O R

29. U P O R A B N I Š K A I Z K U Š N J A
V P R A K S I
R E Š I T V E
U Ž I T E K
U P O R A B N O S T
V S E B I N A I N
F U N K C I O N A L N O S T I
Kako privlačna
je uporaba?
Kako enostavna je uporaba?
Ali so uporabnikom na voljo želene vsebine in funkcionalnosti?
29Z A G O V O R

30. R E Š I T V E 30Z A G O V O R
Uporabniška izkušnja pridobiva na veljavi, vseeno
pa se v primerjavi z oglaševanjem, vanjo vloži
precej manj denarja.
Zato so pomembne raziskave kot je ta, ki
pokažejo, koliko potenciala je skritega v slabih
spletnih storitvah.

31. „Podjetja z dobro izkušnjo
povečujejo svoj dohodek
3x hitreje kot ostali.“
- F o r r e s t e r 2 0 1 6
31Z A G O V O R

32. m a g i s t r i c a d r u ž b o s l o v n e i n f o r m a t i k e
M A Š A C R N K O V I Č
m a s a . c r n k o v i c @ g m a i l . c o m