programija interaktivnih medijev - ntf.uni-lj.si · • uporabnik ima fokus na svoje cilje in ima...

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

mailto:[email protected]

http://www.ntf.uni-lj.si/igt/employee/helena-gabrijelcic/

http://www.igt.si/helenagabrijelcictomc/

»


Znanost oblikovanja

uporabniških vmesnikov

3

»


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

»


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

»


Percepcija pogojena s pričakovanji

6

Pinterest

Štu

dijs

ko

gra

div

o

»


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

»


Percepcija pogojena s trenutnim kontekstom

8

• črke pred in za sredinsko črko pogojujejo

dojemanje slednje, kot A ali H


Štu

dijs

ko

gra

div

o

»


Percepcija pogojena z goli

9

• naši goli filtrirajo našo percepcijo


Štu

dijs

ko

gra

div

o

»


Percepcija pogojena z goli

10


Štu

dijs

ko

gra

div

o

»


11

Percepcijsko pogojevanje

uporabimo pri oblikovanju:

• izogibajte se dvoumju

• bodite konsistentni

• razumite gole uporabnika

Štu

dijs

ko

gra

div

o

»


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

»


13

https://www.premedhq.com/gestalt-principles

Štu

dijs

ko

gra

div

o

https://www.premedhq.com/gestalt-principles

»


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

http://www.youtube.com/watch?v=LlzuJqZ797U

»


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

»


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

»


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

https://www.haikudeck.com/gestalt--science-and-technology-presentation-eod6aOX2ef

»



18

Pinterest

Štu

dijs

ko

gra

div

o

»


19


http://www.templatemonster.co

m/blog/gestalt-proximity-law-

templatemonster-templates/

Štu

dijs

ko

gra

div

o

http://www.templatemonster.com/blog/gestalt-proximity-law-templatemonster-templates/

»



20


Štu

dijs

ko

gra

div

o

»


Podobnost

• oblikovanje elementov na enakem vizualnem nivoju

• intuitivno percipirane skladnosti, podobnosti, estetike

21

objekte, ki izgledajo podobno, percipiramo kot skupino

Pinterest

Štu

dijs

ko

gra

div

o

»


Podobnost

22

• barva

• velikost

• prostor med elementi

• linije

• font

http://www.greenchameleondesign.com/

Štu

dijs

ko

gra

div

o

http://www.greenchameleondesign.com/

»


23

Jeff Johnson, Designing

with the Mind in Mind

Podobnost (Similarity)Š

tud

ijsko

gra

div

o

»


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

http://vanseodesign.com/web-design/gestalt-principles-of-perception/

http://webdesign.tutsplus.com/articles/the-gestalt-principle-design-theory-for-web-designers--webdesign-1756

»


25

Nadaljevanje (Continuity)Š

tud

ijsko

gra

div

o

»



26

Jeff Johnson, Designing

with the Mind in Mind

Štu

dijs

ko

gra

div

o

»


27


http://www.creativebloq.com/http://wt.blog.ictea.com/?paged=20

Štu

dijs

ko

gra

div

o

http://www.creativebloq.com/

»


Zaključevanje, zapiranje

28

človeška percepcija bo zaključila nepopolne objekte s

spontanim zaključevanjem in zapiranjem manjkajočih

vizualnih stimulijev


Štu

dijs

ko

gra

div

o

»


29

http://www.abduzeedo.com/

Štu

dijs

ko

gra

div

o

http://www.abduzeedo.com/

»


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

http://www.simplifyinginterfaces.com/2009/05/01/induce-visual-behaviour-using-gestalt-the-principle-of-closure/

»


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

http://images.thoughtbot.com/gestalt-principles-blog-post/closure-shopping-cart.gif

»


Simetrija (Symmetry)

32


percepcija ima tendenco poenostavljati kompleksnejše

strukture ter v njih iskati simetrijo

Štu

dijs

ko

gra

div

oŠ

tud

ijsko

gra

div

o

»



33

http://www.templatemonster.com/blog/gestalt-continuity-law-templatemonster-templates/


»



34


Štu

dijs

ko

gra

div

o


»


Razmerje figura - ozadje

35


elemente percipiramo kot figuro ali ozadje

Štu

dijs

ko

gra

div

o

»


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

http://www.smashingmagazine.com/2014/05/design-principles-space-figure-ground-relationship/

»


Figura/ozadje

37

http://finesseatelier.com/

Štu

dijs

ko

gra

div

o

http://finesseatelier.com/

»


Figura/ozadje

38

http://tannbach-modul.zdf.de/

Štu

dijs

ko

gra

div

o

»


Percepcija gibanja

39


elemente, ki se gibljejo, percepcijsko grupiramo oz. jih

dojamemo kot podobne

Štu

dijs

ko

gra

div

o

»


Percepcija gibanja

40

http://www.webdesignerdepot.com/2015/07/7-secrets-for-enhancing-ux-with-micro-interactions/

Štu

dijs

ko

gra

div

o


»


Percepcija gibanja

41


Štu

dijs

ko

gra

div

o


»


42

3. Iščemo in uporabljamo vizualno

strukturo

• bolj strukturirana vsebina omogoča lažjo

percepcijo in razumevanje

Štu

dijs

ko

gra

div

o

»


Vizualna struktura

43

Jeff Johnson, Designing with the Mind in

Mind

Štu

dijs

ko

gra

div

o

»


Vizualna struktura

44


Mind

Štu

dijs

ko

gra

div

o

»


Vizualna struktura

45

• specifične kontrole za določene podatke

• vizualna hierarhija omogoča fokus na pomembnih informacijah


Mind

Štu

dijs

ko

gra

div

o

»


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

»


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


Štu

dijs

ko

gra

div

o

»


Centralna poravnava

48

Štu

dijs

ko

gra

div

o

»


Barva ozadja

49


Štu

dijs

ko

gra

div

o

»


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

»


Vid je optimiziran za detekcijo kontrastov in ne za absolutno svetlost

51


Štu

dijs

ko

gra

div

o

»


Sposobnost razlikovanja barv zavisi od načina predstavitve barv

52

• nasičenost (A)

• velikost površine barv (B)

• ločevanje (C)


Štu

dijs

ko

gra

div

o

»



53


Štu

dijs

ko

gra

div

o

»



54


Štu

dijs

ko

gra

div

o

»


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

»


Percepcija barv

56

http://www.adidas.co.uk/ace_17

Štu

dijs

ko

gra

div

o

http://www.adidas.co.uk/ace_17

»


Percepcija barv

57

https://mailchimp.com/2015/#games-won-by-our-softball-team

Štu

dijs

ko

gra

div

o

https://mailchimp.com/2015/#games-won-by-our-softball-team

»


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


Štu

dijs

ko

gra

div

o

»


Ločljivost rumene pege ter perifernih področij

59


Štu

dijs

ko

gra

div

o

»


Periferni vid

60


Štu

dijs

ko

gra

div

o

»


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


Štu

dijs

ko

gra

div

o

»


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

»


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


Štu

dijs

ko

gra

div

o

»


Dolgoročni spomin

64

• dolgoročni spomin = spominska zaloga (kar ni kratkoročni)


Štu

dijs

ko

gra

div

o

»


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

»


66

9. Prepoznavanje je lahko;

spominjanje je težko

Windows desktop Wordpress interface

Štu

dijs

ko

gra

div

o

»


Seminar

67

Štu

dijs

ko

gra

div

o

»


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

»


Priporočila

69

http://www.templatemonster.com/wordpress-themes.php

demo

Štu

dijs

ko

gra

div

o

http://www.templatemonster.com/wordpress-themes.php

»


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

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/

»


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

»


Valerija Jovanovski, diplomsko delo

72

»


Goran Janošević, diplomsko delo

73

Štu

dijs

ko

gra

div

o

programija interaktivnih medijev - ntf.uni-lj.si · • uporabnik ima fokus na svoje cilje in ima...

Documents