![Page 1: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/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-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/2.jpg)
Slide 2Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
primer slabega dizajna
![Page 3: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/3.jpg)
Slide 3Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
osnovna izhodišča
Kdaj vključiti dizajn v razvoju nekega produkta?
![Page 4: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/4.jpg)
Slide 4Interakcija č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 5: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/5.jpg)
Slide 5Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
eleganca in enostavnost
Henry C. Beck, 1933
![Page 6: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/6.jpg)
Slide 6Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
eleganca in enostavnost
London Underground's Victoria Line
![Page 7: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/7.jpg)
Slide 7Interakcija č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; 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 8: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/8.jpg)
Slide 8Interakcija č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 9: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/9.jpg)
Slide 9Interakcija č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 10: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/10.jpg)
Slide 10Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
primer :
regularne oblike
![Page 11: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/11.jpg)
Slide 11Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
primer:
poenotenje oblik elementov
![Page 12: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/12.jpg)
Slide 12Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
primer :
omejitev nabora pisav
![Page 13: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/13.jpg)
Slide 13Interakcija č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 14: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/14.jpg)
Slide 14Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
Primer večkratne funkcionalnosti iz vsakdanjega življenja
![Page 15: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/15.jpg)
Slide 15Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
tehnike za doseganje elegance in enostavnosti
Primer večkratne funkcionalnosti
![Page 16: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/16.jpg)
Slide 16Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
vizualni dizajn
Kako predstaviti informacije?
Kako vzbuditi pozornost?
Kako ponuditi estetski užitek?
![Page 17: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/17.jpg)
Slide 17Interakcija č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 (harmonija) - tipičen primer: zlati rez.
![Page 18: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/18.jpg)
Slide 18Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
razmerje
![Page 19: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/19.jpg)
Slide 19Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
kontrast
linija
![Page 20: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/20.jpg)
Slide 20Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
kontrast
oblika
![Page 21: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/21.jpg)
Slide 21Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
kontrast
velikost
![Page 22: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/22.jpg)
Slide 22Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
kontrast
barva
![Page 23: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/23.jpg)
Slide 23Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
kontrast
barva
![Page 24: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/24.jpg)
Slide 24Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
kontrast
tekstura
![Page 25: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/25.jpg)
Slide 25Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
kontrast
tipografija
![Page 26: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/26.jpg)
Slide 26Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
kontrast
sprememba smeri
![Page 27: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/27.jpg)
Slide 27Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
skladnost
Harmonija
Zlati rez
![Page 28: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/28.jpg)
Slide 28Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
skladnost
Zlati rez
![Page 29: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/29.jpg)
Slide 29Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
skladnost
Zlati rez
![Page 30: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/30.jpg)
Slide 30Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
skladnost
koren od 2
![Page 31: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/31.jpg)
Slide 31Interakcija č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 32: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/32.jpg)
Slide 32Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Jasnost (angl. clarity)
![Page 33: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/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-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/34.jpg)
Slide 34Interakcija č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 35: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/35.jpg)
Slide 35Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Simetrija:
![Page 36: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/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-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/37.jpg)
Slide 37Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
uravnoteženost
![Page 38: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/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-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/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-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/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-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/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-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/42.jpg)
Slide 42Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajna
Bela okolica:
slab dizajn
![Page 43: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/43.jpg)
Slide 43Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
principi dobrega dizajnaBela okolica:
dober dizajn
![Page 44: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/44.jpg)
Slide 44Interakcija č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 45: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/45.jpg)
Slide 45Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
posredovanje informacije
• Pri snovanju uporabniškega vmesnika je cilj minimizirati število podatkov, ki jih mora uporabnik hraniti v kratkoročnem spominu.
• To dosežemo, če je informacija logična in smiselna.
![Page 46: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/46.jpg)
Slide 46Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
posredovanje informacije
• Pri snovanju uporabniškega vmesnika ali spletnih strani je cilj minimizirati število podatkov, 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 47: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/47.jpg)
Slide 47Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
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 48: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/48.jpg)
Slide 48Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
grupiranje
![Page 49: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/49.jpg)
Slide 49Interakcija č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 50: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/50.jpg)
Slide 50Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
načini grupiranjaGrupiranje z izrabo prazne površine
![Page 51: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/51.jpg)
Slide 51Interakcija č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 52: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/52.jpg)
Slide 52Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
načini grupiranjaGrupiranje z robovi
![Page 53: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/53.jpg)
Slide 53Interakcija č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.
• Običajno barva ne zadostuje za grupiranje, ampak je treba dodati še robno linijo.
![Page 54: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/54.jpg)
Slide 54Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
načini grupiranjaGrupiranje z ozadji
![Page 55: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/55.jpg)
Slide 55Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
izražanje hierarhije
![Page 56: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/56.jpg)
Slide 56Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
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 57: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/57.jpg)
Slide 57Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
poravnava
![Page 58: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/58.jpg)
Slide 58Interakcija č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.
![Page 59: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/59.jpg)
Slide 59Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
![Page 60: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/60.jpg)
Slide 60Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
![Page 61: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/61.jpg)
Slide 61Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
število elementov: 28
![Page 62: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/62.jpg)
Slide 62Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
![Page 63: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/63.jpg)
Slide 63Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
število vertikalnih poravnav: 6
![Page 64: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/64.jpg)
Slide 64Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
![Page 65: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/65.jpg)
Slide 65Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
število horizontalnih poravnav: 21
![Page 66: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/66.jpg)
Slide 66Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
stopnja kompleksnosti (primer)
stopnja kompleksnosti: 28 + 6 + 21 = 55
![Page 67: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/67.jpg)
Slide 67Interakcija č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 strani
• Razmisli, če je možno uporabiti menjavanje strani (angl. paging).• Izogibaj se horizontalnemu premikanju.
![Page 68: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/68.jpg)
Slide 68Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
restriktivno uporabljaj horizontalne linije
Povzeto po: Health and Human Services Dept.: Research-Based Web Design & Usability Guidelines, 2006
![Page 69: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/69.jpg)
Slide 69Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
izogibaj se horizontalnemu premikanju
Povzeto po: Health and Human Services Dept.: Research-Based Web Design & Usability Guidelines, 2006
![Page 70: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/70.jpg)
Slide 70Interakcija č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 71: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/71.jpg)
Slide 71Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
začetna točka
![Page 72: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/72.jpg)
Slide 72Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
začetna točka
![Page 73: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/73.jpg)
Slide 73Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
začetna točka
![Page 74: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/74.jpg)
Slide 74Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
začetna točka
![Page 75: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/75.jpg)
Slide 75Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
začetna točka
![Page 76: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/76.jpg)
Slide 76Interakcija č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 77: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/77.jpg)
Slide 77Interakcija č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 78: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/78.jpg)
Slide 78Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
razvrščanje informacije na spletnih straneh
![Page 79: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/79.jpg)
Slide 79Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
razvrščanje informacije na spletnih straneh
![Page 80: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/80.jpg)
Slide 80Interakcija č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 81: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/81.jpg)
Slide 81Interakcija č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 82: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/82.jpg)
Slide 82Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
navigacija (nadaljevanje)
![Page 83: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/83.jpg)
Slide 83Interakcija č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 84: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/84.jpg)
Slide 84Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
navigacija (nadaljevanje)
![Page 85: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/85.jpg)
Slide 85Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
navigacija (nadaljevanje)
![Page 86: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/86.jpg)
Slide 86Interakcija č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 87: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/87.jpg)
Slide 87Interakcija č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 88: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/88.jpg)
Slide 88Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
primer konsistentnega dizajna
![Page 89: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/89.jpg)
Slide 89Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
primer konsistentnega dizajna
![Page 90: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/90.jpg)
Slide 90Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
primer konsistentnega dizajna
![Page 91: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/91.jpg)
Slide 91Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
primer konsistentnega dizajna
![Page 92: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/92.jpg)
Slide 92Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
primer konsistentnega dizajna
![Page 93: Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-08-osnovne tehnike vizualne... · Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)](https://reader030.vdocuments.pub/reader030/viewer/2022020203/5a75696e7f8b9aa3618c707e/html5/thumbnails/93.jpg)
Slide 93Interakcija človek-računalnik (Osnovne tehnike vizualne komunikacije)
literatura