![Page 1: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/1.jpg)
Slide 1Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Osnovne tehnike vizualne komunikacije
Franc Novak
![Page 2: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/2.jpg)
Slide 2Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
vizualni dizajn grafičnih uporabniških vmesnikov
prej: estetski vidiki forme
urejenost prostora
![Page 3: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/3.jpg)
Slide 3Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
vizualni dizajn grafičnih uporabniških vmesnikov
prej: estetski vidiki forme splošno,
neodvisno odciljne
urejenost prostora aplikacije
![Page 4: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/4.jpg)
Slide 4Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
vizualni dizajn grafičnih uporabniških vmesnikov
prej: estetski vidiki forme splošno,
neodvisno odciljne
urejenost prostora aplikacije
sedaj: zakonitosti vizualnega dizajna
ciljna aplikacija
![Page 5: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/5.jpg)
Slide 5Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
vizualni dizajn grafičnih uporabniških vmesnikov
prej: estetski vidiki forme splošno,
neodvisno odciljne
urejenost prostora aplikacije
sedaj: zakonitosti vizualnega dizajna konkretenproblem
ciljna aplikacija
![Page 6: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/6.jpg)
Slide 6Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
uvod
Orodje, ki ga imamo na razpolago, je vizualni jezik.
Sintakso vizualnega jezika tvorijo osnovni elementi: točka, linija, ploskev involumen.
Skupaj z atributi: oblika, velikost, barva in tekstura določajo strukturovizualnega jezika.
Vizualni jezik ima: formalni slovar, ki vsebuje osnovne elemente dizajna,vizualno sintakso, ki opisuje način medsebojnega kombiniranja elementovv okviru danega sistema.
![Page 7: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/7.jpg)
Slide 7Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
primer slabega dizajna
![Page 8: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/8.jpg)
Slide 8Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
osnovna izhodišča
Kdaj vključiti dizajn v razvoju nekega produkta?
![Page 9: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/9.jpg)
Slide 9Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
vizualni dizajn vmesnika
Osnovne tehnike komunikacijskoorientiranega grafičnega dizajna
eleganca in enostavnostsorazmerje, kontrast, dimenzijska harmonijaorganizacija in vizualne strukture
![Page 10: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/10.jpg)
Slide 10Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
eleganca in enostavnost
Eleganco v dizajnu razpoznamo v primerih, ko gre za rešitev danegaproblema na inovativen, uspešen način, ki je hkrati popoln in skrajnoekonomičen.
Zelo pomembna je enostavnost rešitve.
Enostavnost rešitve dosežemo s ponavljajočim poenostavljanjem.
![Page 11: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/11.jpg)
Slide 11Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
eleganca in enostavnost
Henry C. Beck, 1933
![Page 12: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/12.jpg)
Slide 12Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
eleganca in enostavnost
London Underground's Victoria Line
![Page 13: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/13.jpg)
Slide 13Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
eleganca in enostavnost – običajne napake
![Page 14: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/14.jpg)
Slide 14Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
Reduciranje dizajna do njegovega bistva
Napotki:• določi glavne lastnosti, ki naj jih ima dizajn (tipično krajši spisek
pridevnikov); navedi tudi formalne elemente, kot je na primer ime, oznaka, barva, tekstura ali slika.
• kritično preglej vsak element dizajna; ali je dizajn možen brez njega? Če ne znaš odgovoriti, ga izpusti.
• poskusno odstrani element iz dizajna in poglej, kaj se zgodi. Če se dizajn poruši, ga ohrani. Če ne, pa razmisli, če ne bi morda element izpustil.
![Page 15: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/15.jpg)
Slide 15Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
Dva primera:
Logo Victoria and Albert Museum, London dostop za invalide
![Page 16: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/16.jpg)
Slide 16Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
Regularnost dizajna
Napotki:• kjerkoli je možno, uporabljaj regularne geometrijske oblike, umirjene
barve, enostavne obrise.• če uporabljaš več podobnih elementov (form, oblik), jih po možnosti
naredi enake z vidika velikosti, barve, teksture, debeline linij, orientacije, poravnanja ali medsebojne razdalje.
• omeji variacije v tipografiji na nekaj velikosti ene ali dveh družin pisav.• da bi izrabil prednosti regularnosti, izpostavi kritične elemente namenoma
na neregularen način.
![Page 17: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/17.jpg)
Slide 17Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
primer :
regularne oblike
![Page 18: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/18.jpg)
Slide 18Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
primer:
poenotenje oblik elementov
![Page 19: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/19.jpg)
Slide 19Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
primer :
omejitev nabora pisav
![Page 20: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/20.jpg)
Slide 20Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
Večkratna funkcionalnost elementov dizajna
Osnovna ideja: poiskati elemente dizajna, ki lahko igrajo večkratno vlogo
Napotki:• preveri funkcijo, ki jo ima vsak posamezni element dizajna.• poišči situacije, ko imajo različni elementi enako vlogo.• preveri, če je možno nadomestiti kak element z drugim (tudi če naredimo
kako manjšo spremembo).• združi redundantne elemente v enostavno enoto ali pa jih zamenjaj z
neko skupno funkcionalnostjo glede na dano ciljno okolje
![Page 21: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/21.jpg)
Slide 21Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
Primer večkratne funkcionalnosti iz vsakdanjega življenja
![Page 22: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/22.jpg)
Slide 22Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
Primer večkratne funkcionalnosti
![Page 23: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/23.jpg)
Slide 23Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
razmerje, kontrast, skladnost
Razmerje predstavlja relativno velikost danega elementa dizajna glede na ostale elemente celotne kompozicije.
Kontrast predstavlja opazne razlike znotraj dane vizualne dimenzije (kot na primer oblika, velikost, barva, tekstura, pozicija).
Skladnost (dimenzijska harmonija) - tipičen primer: zlati rez.
![Page 24: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/24.jpg)
Slide 24Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
razmerje, kontrast, skladnost
![Page 25: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/25.jpg)
Slide 25Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna Jasnost (angl. clarity)
Predstavljeni elementi so organizirani na smiseln, razumljiv in razpoznaven način.
Faktorji, ki vplivajo na jasnost dizajna so:konsistentnost dizajna,vizualno privlačna kompozicija,logična razporeditev,predstavitev primerne količine informacij,grupiranje in poravnava elementov zaslona.
![Page 26: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/26.jpg)
Slide 26Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Jasnost (angl. clarity)
![Page 27: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/27.jpg)
Slide 27Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Harmonija
Zlati rez
![Page 28: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/28.jpg)
Slide 28Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Zlati rez
![Page 29: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/29.jpg)
Slide 29Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Zlati rez
![Page 30: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/30.jpg)
Slide 30Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
koren od 2
![Page 31: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/31.jpg)
Slide 31Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Simetrija:
![Page 32: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/32.jpg)
Slide 32Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Simetrija:
Določi linije, ki bodo igrale vlogo osi simetrije. Običajno se v tem koraku odločamo tudi med vertikalno in horizontalno simetrijo.Za človekovo zaznavanje je bolj učinkovita vertikalna simetrija.Odloči se o vsebini, ki bo podana na obeh straneh osi simetrije.Prepričaj se, da je os simetrije dejansko na sredini zaslona ali okna, kjer bo podana dana vsebina.
![Page 33: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/33.jpg)
Slide 33Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Simetrija:
![Page 34: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/34.jpg)
Slide 34Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
uravnoteženost
![Page 35: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/35.jpg)
Slide 35Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
uravnoteženost
![Page 36: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/36.jpg)
Slide 36Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
uravnoteženost
![Page 37: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/37.jpg)
Slide 37Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Optična prilagoditev:
![Page 38: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/38.jpg)
Slide 38Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Optična prilagoditev:
![Page 39: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/39.jpg)
Slide 39Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Optična prilagoditev:
![Page 40: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/40.jpg)
Slide 40Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Optična prilagoditev:
![Page 41: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/41.jpg)
Slide 41Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Optična prilagoditev:
![Page 42: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/42.jpg)
Slide 42Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Optična prilagoditev:
![Page 43: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/43.jpg)
Slide 43Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Bela okolica:(angl. white space, negative space)
![Page 44: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/44.jpg)
Slide 44Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Bela okolica:
![Page 45: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/45.jpg)
Slide 45Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Bela okolica:
![Page 46: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/46.jpg)
Slide 46Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Bela okolica:
slab dizajn
![Page 47: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/47.jpg)
Slide 47Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajnaBela okolica:
dober dizajn
![Page 48: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/48.jpg)
Slide 48Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
integriranje figure in podlage
Kako uskladiti velikost figure in podlage?
![Page 49: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/49.jpg)
Slide 49Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
integriranje figure in podlage
zgoraj: preveč natrpan dizajnspodaj: izboljšana varianta
![Page 50: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/50.jpg)
Slide 50Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Omejevanje, zadržanost (angl. restraint)
Regularnost forme, kjer so izpuščeni detajli in variacije, povečuje jasnost intransparentnost dizajna.
Omejimo se pri podajanju kontrastov, pa še to le na eno ali vsaj zelo malovizualnih dimenzij. Tako namreč dosežemo, da so dani kontrasti učinkoviti.
primer:
![Page 51: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/51.jpg)
Slide 51Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Omejevanje, zadržanost (angl. restraint)
Regularnost forme, kjer so izpuščeni detajli in variacije, povečuje jasnost intransparentnost dizajna.
Omejimo se pri podajanju kontrastov, pa še to le na eno ali vsaj zelo malovizualnih dimenzij. Tako namreč dosežemo, da so dani kontrasti učinkoviti.
primer:
![Page 52: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/52.jpg)
Slide 52Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
organizacija in vizualna struktura dizajna
Kaj lahko dosežemo z dobro organizacijo in strukturo dizajna?
Uporabnik zazna organizacijo in vizualno strukturo brez napora, zato je zelo pomembno, da znamo njun vpliv učinkovito izrabiti.
![Page 53: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/53.jpg)
Slide 53Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
organizacija in vizualna struktura dizajna
Kaj lahko dosežemo z dobro organizacijo in strukturo dizajna?
Uporabnik zazna organizacijo in vizualno strukturo brez napora, zato je zelo pomembno, da znamo njun vpliv učinkovito izrabiti.
Pozor!Človeško oko skuša zaznati strukturo v dizajnu. Če je ni, bo samo po sebi skušalo zasnovati strukturo in ji slediti, kar lahko privede do napačnega razumevanja.
Gestalt psihologija!
![Page 54: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/54.jpg)
Slide 54Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Gestalt psihologija
Razum dojema zunanje informacije, ki nam jih posredujejo čutila, kot celota, ne pa kot vsota posameznih delov.Celote so strukturirane in organizirane v skladu s pravili grupiranja.
![Page 55: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/55.jpg)
Slide 55Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Kako torej učinkovito podati informacijo?
![Page 56: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/56.jpg)
Slide 56Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
posredovanje informacije
Pri snovanju uporabniškega vmesnika ali spletnih strani je cilj minimizirati število informacijskih spremenljivk, ki jih mora uporabnik hraniti v kratkoročnem spominu. To dosežemo, če je informacija logična in smiselna.
![Page 57: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/57.jpg)
Slide 57Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
posredovanje informacije
Pri snovanju uporabniškega vmesnika ali spletnih strani je cilj minimizirati število informacijskih spremenljivk, ki jih mora uporabnik hraniti v kratkoročnem spominu. To dosežemo, če je informacija logična in smiselna.
Napotki:Razdeli informacijo na enote, ki so zaznavne, logične in smiselne. Poskrbi, da bo vrstni red informacijskih enot na zaslonu ustrezal prioriteti uporabnikovih pričakovanj in potreb.Zagotovi, da bodo informacije, ki se medsebojno primerjajo, ves čas med primerjavo vidne.Zagotovi, da bo na zaslonu prezentirana samo takšna informacija, ki se nanaša na uporabnikove naloge.
![Page 58: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/58.jpg)
Slide 58Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za učinkovito podajanje informacije
razmerje, kontrast nenapovedljivi učinki skladnost (potrebne praktične izkušnje)
organizacija jasne in zanesljivevizualna struktura metode:
grupiranjehierarhijaporavnava
![Page 59: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/59.jpg)
Slide 59Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za učinkovito podajanje informacije
Grupiranje:
Grupiraj posamezne informacijske enote v (7+/-2) kategorij glede na njihov izvor in namen uporabe. Za vsako skupino informacijskih enot, ki jih je treba neodvisno obdelovati, priredimo svojo grupo.Rangiraj grupe po pomembnosti in njihovo število (po možnosti) še zmanjšaj na 3 – 4.Maksimiraj vizualno razlikovanje med grupami in minimiziraj vizualno razlikovanje znotraj grupe.
![Page 60: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/60.jpg)
Slide 60Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za učinkovito podajanje informacije
Grupiranje
![Page 61: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/61.jpg)
Slide 61Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za učinkovito podajanje informacije
Hierarhija
![Page 62: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/62.jpg)
Slide 62Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za učinkovito podajanje informacije
Poravnava:
Identificiraj glavne poravnalne linije danega polja in poskusi poravnati z njimi ustrezne elemente.Za elemente in polja, ki so skoraj poravnani, poskušaj doseči njihovo poravnavo s spreminjanjem njihove velikosti in pozicije.Poišči samostojno ležeče elemente in jih poravnaj s kakšno od obstoječih linij poravnave.Če obstaja element, ki ga ne moreš poravnati z nobeno od obstoječih linij poravnav, ga postavi v položaj, ki ustreza regularni razdelitvi prostora danega dizajna.
![Page 63: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/63.jpg)
Slide 63Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za učinkovito podajanje informacije
Poravnava:
![Page 64: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/64.jpg)
Slide 64Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Kako preveriti, če ustreznost zasnove?
![Page 65: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/65.jpg)
Slide 65Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
(pripomoček)
Test neizostrenega pogleda (angl. squint test)
Uporabljamo ga za sprotno preverjanje vizualnega zaznavanja dizajna.Zakrijemo eno oko, z drugim bežno (neizostreno) pogledamo kompozicijo na zaslonu.Vse tisto, česar nismo opazili z neizostrenim pogledom, tudi ne bo takoj na prvi pogled (at a glance) opazno na končnem dizajnu.
![Page 66: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/66.jpg)
Slide 66Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
(pripomoček)
primer: izostreno
![Page 67: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/67.jpg)
Slide 67Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
(pripomoček)
primer: izostreno
![Page 68: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/68.jpg)
Slide 68Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
(pripomoček)
primer: izostreno
![Page 69: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/69.jpg)
Slide 69Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
(pripomoček)
primer: izostreno
![Page 70: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/70.jpg)
Slide 70Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti
Stopnja kompleksnosti
Nariši pravokotnik okrog vsakega elementa na zaslonu.Preštej število elementov. (22)Preštej število vertikalnih poravnalnih linij. (6)Preštej število horizonlalnih poravnalnih linij. (20)
22 + 6 + 20 = 48
![Page 71: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/71.jpg)
Slide 71Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti
Stopnja kompleksnosti
Nariši pravokotnik okrog vsakega elementa na zaslonu.Preštej število elementov.Preštej število vertikalnih poravnalnih linij.Preštej število horizonlalnih poravnalnih linij.
18 + 6 + 8 = 32
![Page 72: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/72.jpg)
Slide 72Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti
Stopnja kompleksnosti
Nariši pravokotnik okrog vsakega elementa na zaslonu.Preštej število elementov. (18)Preštej število vertikalnih poravnalnih linij. (6)Preštej število horizonlalnih poravnalnih linij. (8)
18 + 6 + 8 = 32
![Page 73: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/73.jpg)
Slide 73Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
![Page 74: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/74.jpg)
Slide 74Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
![Page 75: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/75.jpg)
Slide 75Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
število elementov: 27
![Page 76: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/76.jpg)
Slide 76Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
![Page 77: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/77.jpg)
Slide 77Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
število vertikalnih poravnav: 6
![Page 78: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/78.jpg)
Slide 78Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
![Page 79: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/79.jpg)
Slide 79Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
število horizontalnih poravnav: 20
![Page 80: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/80.jpg)
Slide 80Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
stopnja kompleksnosti: 27 + 6 + 20 = 53
![Page 81: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/81.jpg)
Slide 81Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kaj tvori grupo
Kako je sploh grupa vizualno zaznana?
Poveži s črto vse znake, ki niso medseboj oddaljeni več kot en presledek v horizontalni smeri in brez prazne vrsticev verikalni smeri.
Povezani elementi tvorijo grupo.
![Page 82: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/82.jpg)
Slide 82Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kaj tvori grupo
Kako je sploh grupa vizualno zaznana?
Poveži s črto vse znake, ki niso medseboj oddaljeni več kot en presledek v horizontalni smeri in brez prazne vrsticev verikalni smeri.
Povezani elementi tvorijo grupo.
![Page 83: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/83.jpg)
Slide 83Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kaj tvori grupo
Kako je sploh grupa vizualno zaznana?
Poveži s črto vse znake, ki niso medseboj oddaljeni več kot en presledek v horizontalni smeri in brez prazne vrsticev verikalni smeri.
Povezani elementi tvorijo grupo.
![Page 84: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/84.jpg)
Slide 84Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kaj tvori grupo
![Page 85: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/85.jpg)
Slide 85Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kaj tvori grupo
![Page 86: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/86.jpg)
Slide 86Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kaj tvori grupo
![Page 87: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/87.jpg)
Slide 87Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kaj tvori grupo
![Page 88: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/88.jpg)
Slide 88Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kaj tvori grupo
zakaj so tukaj večji presledki?
![Page 89: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/89.jpg)
Slide 89Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
načini grupiranjaGrupiranje z izrabo prazne površine
S pomočjo praznih površin omogoči dovolj prostora za ločevanje med elementi. Pri spletnih straneh skrbno oceni obseg uporabe praznega prostora. Možno je, da ima za posledico potrebo pomikanja strani (page scrolling).
![Page 90: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/90.jpg)
Slide 90Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
načini grupiranjaGrupiranje z izrabo prazne površine
![Page 91: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/91.jpg)
Slide 91Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
načini grupiranjaGrupiranje z robovi
Uporabi robove za poudarjanje grupiranja. Uporabljaj standardno hierarhijo za parametre uporabljenih linij (debelina, vzorec, ...)Puščaj dovolj praznega prostora okrog teksta.Poravnaj robove levo, desno, zgoraj in spodaj. Pri spletnih straneh uporabljaj horizontalne linije s preudarkom: rezerviraj jih za situacije, ko želiš poudariti razliko med prostorom nad in pod linijo.
![Page 92: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/92.jpg)
Slide 92Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
načini grupiranjaGrupiranje z robovi
![Page 93: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/93.jpg)
Slide 93Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
načini grupiranjaGrupiranje z ozadji
Grupiranje z ozadji uporablja kontrast s preostalim delom zaslona.Pogosto imajo ozadja preveč nasičene barve. Priporočljiva je uporaba okrog 25% barvne nasičenosti (angl. saturation).Za sorodno informacijo uporabi enako ozadje.Uporabi večji kontrast za komponente zaslona, ki jim namenjaš večjo pozornost.Pogosto barva ne zadostuje za grupiranje, ampak je treba dodati še robno linijo.
![Page 94: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/94.jpg)
Slide 94Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
načini grupiranjaGrupiranje z ozadji
![Page 95: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/95.jpg)
Slide 95Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kako beremo
Čitljivost (legibility) je zmožnost razpoznavanja črk uporabljene pisave. Informacija naj bo zaznavna in razločljiva.Berljivost (readability) je zmožnost branja in dojemanja besedila. Dosežemo jo z ustrezno izbiro besed, dolžino stavkov. Informacija naj bo taka, da jo bo možno interpretirati; naj bo privlačna.
![Page 96: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/96.jpg)
Slide 96Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kako beremo
Kako beremo spletne strani?
preskakujemo velike odstavke tekstaneradi premikamo strani (page scrolling)
![Page 97: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/97.jpg)
Slide 97Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kako beremo
![Page 98: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/98.jpg)
Slide 98Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kako beremo
![Page 99: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/99.jpg)
Slide 99Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
kako beremo
![Page 100: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/100.jpg)
Slide 100Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
velikost prikaza na straneh
Premikanje (scrolling):
Minimiziraj vertikalno premikanje.Če pa je vertikalno pomikanje potrebno,• razporedi znotraj strani namige, da del informacije leži “spodaj”.• organiziraj informacijo tako, da bo uporabniku logično, da je del
informacije še zakrite (n.pr. abecedni razpored).• restriktivno uporabljaj horizontalne linije, da ne bi uporabnik mislil,
da je prišel do dna strani.• olajšaj premikanje na pomembne dele z njihovim poudarjanjem.• preskrbi enovito in konsistentno oznako za konec straniRazmisli, če je možno uporabiti menjavanje strani (angl. paging).Izogibaj se horizontalnemu premikanju.
![Page 101: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/101.jpg)
Slide 101Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
restriktivno uporabljaj horizontalne linije
![Page 102: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/102.jpg)
Slide 102Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
izogibaj se horizontalnemu premikanju
![Page 103: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/103.jpg)
Slide 103Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
začetna točka
Študije so pokazale, da na straneh z informacijsko vsebino ljudje najprej pogledajo tekst, šele nato pa slike.Večji tekst prevlada manjšega: tekst normalne velikosti, četudi poudarjen ali kot hiperlink redko igra vlogo začetne točke.Ljudje pogosto berejo spletne strani po vzorcu F: pogled v smeri dveh horizontalnih linij, nato pa v vertikalni smeri.
![Page 104: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/104.jpg)
Slide 104Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
začetna točka
![Page 105: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/105.jpg)
Slide 105Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
začetna točka
![Page 106: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/106.jpg)
Slide 106Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
začetna točka
![Page 107: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/107.jpg)
Slide 107Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
začetna točka
![Page 108: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/108.jpg)
Slide 108Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
začetna točka
![Page 109: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/109.jpg)
Slide 109Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
začetna točka
Napotki:pripravi očitno začetno točko v zgornjem levem kotu zaslona.usmeri uporabnikovo pozornost na najpomembnejše dele zaslona oziroma spletne strani.
Več o metodi sledenja oči (angl. eyetracking):
http://www.useit.com/eyetracking/methodology/
![Page 110: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/110.jpg)
Slide 110Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
razvrščanje informacije na spletnih straneh
Napotki:Določi nivoje pomembnosti informacij. Razvrsti informacije na več nivojev glede na pomembnost. Postavi kritične informacije pri vrhu spletne strani. Postavi pomembne enote na vrh spletne strani. Sem spada tudi navigacija.Organiziraj informacijo na jasen način. Struktura naj bo logična in jasna, odraža naj uporabniške zahteve in cilje.Olajšaj pregledovanje strani. Študije so pokazale, da 80% ljudi vizualno preleti nove strani, le okrog 16% jih bere besedo-za-besedo.
![Page 111: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/111.jpg)
Slide 111Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
razvrščanje informacije na spletnih straneh
![Page 112: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/112.jpg)
Slide 112Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
razvrščanje informacije na spletnih straneh
![Page 113: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/113.jpg)
Slide 113Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
navigacija
Upoštevaj naravne smeri in zaporedja premikanja oči. Oči stremijo k premikanju
od temnejših površin k svetlejšim,od velikih objektov k manjšim,od neobičajnih oblik k običajnim,od nasičenih barv k umirjenim barvam.
![Page 114: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/114.jpg)
Slide 114Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
navigacija (nadaljevanje)
Oči lahko vodimo tudi s pomočjo okvirjev. Robovi okvirjev lahko odigrajo vlogo vizualne usmeritve. Oči stremijo k temu, da ostanejo znotraj okvira pri izvajanju določenega opravila.
![Page 115: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/115.jpg)
Slide 115Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
navigacija (nadaljevanje)
![Page 116: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/116.jpg)
Slide 116Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
navigacija (nadaljevanje)
Minimiziraj razdalje premikov kazalca miši in oči.Lociraj zgoraj levo najpomembnejše in najpogosteje uporabljene elemente in ukaze.Po vrsti usmerjaj pozornost na enote, ki so kritične, pomembne, manj pomembne...
![Page 117: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/117.jpg)
Slide 117Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
navigacija (nadaljevanje)
![Page 118: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/118.jpg)
Slide 118Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
navigacija (nadaljevanje)
![Page 119: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/119.jpg)
Slide 119Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
navigacija (nadaljevanje)
Zagotovi informacijski tok z vrha proti dnu in z leve proti desni iz naslednjih razlogov:• premiki oči med posameznimi enotami bodo krajši,• ukazni tok (control movements) med posameznimi enotami bo krajši,• grupiranja elementov bodo bolj očitno zaznana.
![Page 120: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/120.jpg)
Slide 120Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
vizualni stil dizajna spletnih strani
Napotki:Vzdržuj konsistenten in enoten vizualni stil vseh strani spletnega naslova.Vse strani naj imajo enotne vizualne karakteristike z vidika uporabljenih barv, tipografije, slik, oblike elementov dizajna zaslona.
Enotnost in konsistenca pomagata uporabnikom pri navigaciji.
Vizualni elementi, vključno s tlorisom strani, izbiro barv in fontov vplivajo nakredibilnost spletne strani in njen rating.
![Page 121: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/121.jpg)
Slide 121Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
primer konsistentnega dizajna
![Page 122: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/122.jpg)
Slide 122Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
primer konsistentnega dizajna
![Page 123: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/123.jpg)
Slide 123Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
primer konsistentnega dizajna
![Page 124: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/124.jpg)
Slide 124Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
primer konsistentnega dizajna
![Page 125: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne](https://reader033.vdocuments.pub/reader033/viewer/2022042619/5a75696e7f8b9aa3618c708f/html5/thumbnails/125.jpg)
Slide 125Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
primer konsistentnega dizajna