copyright © 2005 | update software AG | 01.12.2016
PROGRAMJA INTERAKTiVNIH MEDIJEV
PROGRAMJA INTERAKTIVNIH
MEDIJEV
Helena Gabrijelčič Tomc
Katedra za informacijsko in grafično tehnologijo
Univerza v Ljubljani, NTF, OTGO
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Kontakt
izr. prof. dr. Helena Gabrijelčič Tomc,
Katedra za informacijsko in grafično tehnologijo
e-mail: [email protected]
govorilne ure: ponedeljek 12 – 13h
tel.: 01 2003291
splet: http://www.ntf.uni-lj.si/igt/employee/helena-gabrijelcic/
http://www.igt.si/helenagabrijelcictomc/
2
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Glavna vodila
4
1. uporabnik naj bo v kontroli vsebine in funkcionalnosti
2. zmanjševanje kognitivnega procesiranja
3. oblikovanje konsistentnih vmesnikov
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
5
1. percipiramo to, kar
pričakujemo
Naša percepcija ter posledično naša pričakovanja
temeljijo na:
• preteklosti: naše izkušnje
• sedanjosti: trenutni kontekst
• prihodnosti: naši cilji
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Percepcija pogojena s pričakovanji
6
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Percepcija pogojena s pričakovanji
7
• gumb „Next“ je
percipiran na
določenem mestu,
čeprav ga tam ni na
strani 4
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Percepcija pogojena s trenutnim kontekstom
8
• črke pred in za sredinsko črko pogojujejo
dojemanje slednje, kot A ali H
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Percepcija pogojena z goli
9
• naši goli filtrirajo našo percepcijo
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Percepcija pogojena z goli
10
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
11
Percepcijsko pogojevanje
uporabimo pri oblikovanju:
• izogibajte se dvoumju
• bodite konsistentni
• razumite gole uporabnika
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
12
2. Naš vid je optimiziran za
videnje struktur
Gestalt teorija
• danes se ne smatra kot pojasnjevalna in predikativna teorija
• je opisni delokrog in proces, ki se uporablja pri oblikovanju
digitalnih medijev
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
13
https://www.premedhq.com/gestalt-principles
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Interaction design and Gestalt Principles
Interaction design and Gestalt Principles | lynda.com tutorial
http://www.youtube.com/watch?v=LlzuJqZ797U
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
15
Gestalt principi
1. relativna razdalja: med objekti na prikazovalniku vpliva
na percepcijo njihove organizacije
2. podobnost: objekti ki izgledajo podobno se percepcijsko
grupirajo
3. kontinuiteta: reševanje percepcije vizualno dvoumnih
tako, da tvorijo celoto
4. zaprtost: zaključevanje, zapiranje
5. simetrija: percepcija rešuje kompleksne scene v
kombinacije enostavnih
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
16
Gestalt principi
6. figure/ozadje: vizualna percepcija organizira sliko v
koncept figura/ozadje
7. percepcija gibanja: elementi, ki se gibljejo skupaj so
percipirani kot skupina oz. v določenem razmerju
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
17
Relativna razdalja (Proximity)
• bližina: postavitev elementov v neposredno bližino omogoča njihovo združevanje
in percepcijo podobnosti
podobne objekte povezujemo v skupine
https://www.haikudeck.com/gestalt--science-and-
technology-presentation-eod6aOX2ef
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
19
Relativna razdalja (Proximity)
http://www.templatemonster.co
m/blog/gestalt-proximity-law-
templatemonster-templates/
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Relativna razdalja (Proximity)
20
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Podobnost
• oblikovanje elementov na enakem vizualnem nivoju
• intuitivno percipirane skladnosti, podobnosti, estetike
21
objekte, ki izgledajo podobno, percipiramo kot skupino
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Podobnost
22
• barva
• velikost
• prostor med elementi
• linije
• font
http://www.greenchameleondesign.com/
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
23
Jeff Johnson, Designing
with the Mind in Mind
Podobnost (Similarity)Š
tud
ijsko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Nadaljevanje (Continuity)
24
• princip nadaljevanja trdi, da uporabnikovo oko ustvarja moment
generiranja linij oblikovanja postavitve, ko se giblje od enega do drugega
• uporabnik dojame objekte, ki so na liniji ali krivulji, kot da so podobni
http://vanseodesign.com/web-design/gestalt-principles-of-perception/
http://webdesign.tutsplus.com/articles/the-gestalt-principle-design-theory-for-web-designers--webdesign-1756
Percepcija ima tendenco nadaljevanja poti in toka, ki ga
ustvarja zaporedje grafičnih elementov
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Nadaljevanje (Continuity)
26
Jeff Johnson, Designing
with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
27
Nadaljevanje (Continuity)
http://www.creativebloq.com/http://wt.blog.ictea.com/?paged=20
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Zaključevanje, zapiranje
28
človeška percepcija bo zaključila nepopolne objekte s
spontanim zaključevanjem in zapiranjem manjkajočih
vizualnih stimulijev
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
29
http://www.abduzeedo.com/
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Zapiranje (Closure)
30
http://www.simplifyinginterfaces.com/2009/05/01/induce-visual-behaviour-using-gestalt-
the-principle-of-closure/
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Zaključevanje, zapiranje
31
• spontano zapiranje zaključevanje med akcijami z interaktivnostjo
http://images.thoughtbot.com/gestalt-principles-blog-post/closure-shopping-cart.gif
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Simetrija (Symmetry)
32
Jeff Johnson, Designing with the Mind in Mind
percepcija ima tendenco poenostavljati kompleksnejše
strukture ter v njih iskati simetrijo
Štu
dijs
ko
gra
div
oŠ
tud
ijsko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Simetrija (Symmetry)
33
http://www.templatemonster.com/blog/gestalt-continuity-law-templatemonster-templates/
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Simetrija (Symmetry)
34
http://www.templatemonster.com/blog/gestalt-continuity-law-templatemonster-templates/
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Razmerje figura - ozadje
35
Jeff Johnson, Designing with the Mind in Mind
elemente percipiramo kot figuro ali ozadje
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Razmerje figura - ozadje
36
• razmerje med njima je lahko
stabilno
reverzibilno
dvoumno
http://www.smashingmagazine.com/2014/05/design-principles-space-figure-ground-relationship/
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Figura/ozadje
37
http://finesseatelier.com/
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Figura/ozadje
38
http://tannbach-modul.zdf.de/
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Percepcija gibanja
39
Jeff Johnson, Designing with the Mind in Mind
elemente, ki se gibljejo, percepcijsko grupiramo oz. jih
dojamemo kot podobne
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Percepcija gibanja
40
http://www.webdesignerdepot.com/2015/07/7-secrets-for-enhancing-ux-with-micro-interactions/
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Percepcija gibanja
41
http://www.webdesignerdepot.com/2015/07/7-secrets-for-enhancing-ux-with-micro-interactions/
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
42
3. Iščemo in uporabljamo vizualno
strukturo
• bolj strukturirana vsebina omogoča lažjo
percepcijo in razumevanje
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Vizualna struktura
43
Jeff Johnson, Designing with the Mind in
Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Vizualna struktura
44
Jeff Johnson, Designing with the Mind in
Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Vizualna struktura
45
• specifične kontrole za določene podatke
• vizualna hierarhija omogoča fokus na pomembnih informacijah
Jeff Johnson, Designing with the Mind in
Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
46
4. Branje je nenaravno
• branje je gnano z značilkami (feature-driven reading)
• vizualni sistem identificira enostavne značilke, segmente
linij v določeni orientaciji ter krivulje ter nato kombinira v
bolj kompleksne strukture
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Branje, ki je gnano s kontekstom (contex-driven reading)
47
• vizualni sistem širši kontekst začne deliti na enostavne elemente kar ima za
posledico razumevanje vsebine
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Barva ozadja
49
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
50
5. Barvni vid je omejen
• človeški vid ima jakosti in slabosti, ki se upoštevajo pri
oblikovanju vmesnikov
• vid je optimiziran za detekcijo kontrastov in ne za absolutno
svetlost
• sposobnost razlikovanja barv zavisi od načina predstavitve barv
• prikazovalnik naprave ter pogoji opazovanja vplivajo na
percepcijo
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Vid je optimiziran za detekcijo kontrastov in ne za absolutno svetlost
51
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Sposobnost razlikovanja barv zavisi od načina predstavitve barv
52
• nasičenost (A)
• velikost površine barv (B)
• ločevanje (C)
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Sposobnost razlikovanja barv zavisi od načina predstavitve barv
53
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Sposobnost razlikovanja barv zavisi od načina predstavitve barv
54
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Priporočila
55
• ločevanje barv po nasičenosti, svetlosti in barvnem tonu
• uporaba značilnih barv
• izogibanje barvnih kombinacij, ki jih slabovidni ne razlikujejo
• kombinacija učinkov barv ter drugih značilk
• ločite močno nasprotne barve
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Percepcija barv
56
http://www.adidas.co.uk/ace_17
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Percepcija barv
57
https://mailchimp.com/2015/#games-won-by-our-softball-team
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
58
6. Periferni vid je percepcijsko
skromen
• stacionarni elementi v nežnih barvah, ki so predstavljeni periferno,
ne bodo opaženi
• gibanje, ki je predstavljeno periferno običajno pritegne pozornost
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Ločljivost rumene pege ter perifernih področij
59
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Periferni vid
60
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Lokacije za sporočila
61
• lokacija na mesto gledanja (pozornosti) uporabnikov
• označevanje napak
• uporaba simbolov za napake
• rezervacija rdeče barve za napake in opozorila
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
62
7. Naša pozornost je omejena;
naš spomin je nepopoln
• kratkoročni in dolgoročni spomin
• razumevanje spomina za obogatenje dizajna interaktivnih
sistemov
• kratkoročni in daljno ročni spomin sta dela enotnega
spominskega sistema
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Kratkoročni spomin
63
• kratkoročni spomin = fokus naše pozornosti
• pri oblikovanju UI je pomemben za vodenje spominjanja osnovnih informacij iz
trenutka v trenutek
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Dolgoročni spomin
64
• dolgoročni spomin = spominska zaloga (kar ni kratkoročni)
Jeff Johnson, Designing with the Mind in Mind
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
65
8. Pomanjkljivosti pozornosti,
razmišljanje in akcija
• uporabnik ima fokus na svoje cilje in ima malo pozornosti za
orodja
• uporabnik uporablja zunanjo pomoč, da sledi svoji aktivnosti
• uporabnik sledi „sledem“ za informacijami (ang. scient of
information) , ki mu omogočajo do cilja
• uporabnik ima najraje znane poti
• uporabnikov cikel razmišljanja: cilj, izvršba cilja, ocena
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
66
9. Prepoznavanje je lahko;
spominjanje je težko
Windows desktop Wordpress interface
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Seminar –spletna mesta
68
• 1. idejna zasnova
• 2. informacijska arhitektura
• 3. analiza ožjega izbora treh tem ter izbor najprimernejše
• 4. žični modeli spletnih strani za izbrano temo
• GIK: ponedeljek 5.12. (13h-15.30h)
• GMT torek 6.12 (11h – 12.30h) in četrtek 8.12. (12h-14h)
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Priporočila
69
http://www.templatemonster.com/wordpress-themes.php
demo
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Iskanje teme: Koristne povezave
• https://mythemeshop.com/themes
• https://colorlib.com/wp/free-wordpress-themes/
• http://designscrazed.org/free-responsive-wordpress-themes/
• http://www.elegantthemes.com/gallery
• http://www.fabthemes.com
70
Štu
dijs
ko
gra
div
o
»
PROGRAMJA INTERAKTIVNIH MEDIJEV
Seminar – animacija
71
• končni in detajlni scenariji animacije na temo spletnega
termina
• izris grafičnih elementov
• točen zgodboris
• izbor glasbe
• točno določeno besedilo, ki bo vključeno v animacijo
• GIK: ponedeljek 12. in 19.12. (14.30h-16h)
• GMT četrtek 15.12 (12h – 14h) in četrtek 22.12. (12h-
14h)
Štu
dijs
ko
gra
div
o