Interakcija človek - računalnik

Transcription

Interakcija človek - računalnik
(Izbira barv)
Franc Novak
Interakcija človek - računalnik (Izbira barv)
Slide 1/66
vsebina

uvod
zaznavanje barv
barvni modeli
mešanje barv
barvno kolo
uporaba barv
barvne konotacije
napotki za izbiro barv
Slide 2/66
uvod
Barvni zasloni omogočajo učinkovito uporabo barv za doseganje ciljev, ki si
jih postavimo pri snovanju uporabniškega vmesnika.
Pri tem se pogosto srečujemo z naslednjima osnovnima napakama:
ozadje je takšno, da privablja večjo pozornost kot sami podatki na zaslonu,
barve so predozirane.
Barva sama ima določen pomen. Če je predozirana, pride do tega, da skuša
uporabnik interpretirati njen pomen še preden prebere vsebino informacije na
zaslonu.
Slide 3/66
uvod
Slide 4/66
uvod
Preden navedemo napotke za ustrezno uporabo barv si oglejmo
nekaj osnovnih pojmov.

zaznavanje barv
barvni modeli
mešanje barv
barvno kolo
Slide 5/66
zaznavanje barv
Barva je način zaznavanja svetlobe v človeškem očesu.
Človeško oko zaznava svetlobo z valovno dolžino od približno 400 nm do
približno 700 nm.
(http://sl.wikipedia.org/wiki/Barva)
Slide 6/66
zaznavanje barv
Človeško oko lahko zazna kakih 10 miljonov barvnih odtenkov.
Oko vsebuje receptorje (paličice in
čepke) občutljive na svetlobo.
paličice so predvsem receptorji za
nočno zaznavanje.
obstajajo tri vrste čepkov, ki se
razlikujejo po občutljivosti na barve
(rdeča, modra, zelena)
(http://en.wikipedia.org/wiki/File:Eye-diagram_no_circles_border.svg)
Slide 7/66
zaznavanje barv
Pri zaznavanju barve razlikujemo naslednje fiziološke veličine:
barvni ton (angl. hue)
nasičenost (angl. saturation)
svetlost (angl. value ali lightness)
Slide 8/66
zaznavanje barv
barvni ton (angl. hue)
(http://en.wikipedia.org/wiki/Hue)
Slide 9/66
zaznavanje barv
barvni odtenek (angl. hue)
(http://en.wikipedia.org/wiki/Saturation_%28color_theory%29)
Slide 10/66
zaznavanje barv
barvni odtenek (angl. hue)
(http://en.wikipedia.org/wiki/Lightness_(color))
Slide 11/66
skupni prikaz
barvni ton
nasičenost
svetlost
Slide 12/66
barvni modeli
Za uporabo barv v računalniški grafiki in tiskarstvu je potrebno barve ustrezno
specificirati.
Obstajajo različni barvni modeli, v okviru katerih specificiramo barve, kot na
primer:
barvni model RGB
barvni model CMY
Slide 13/66
barvni modeli
Barvni model RGB.
Primarne barve tega modela so Red, Green, Blue.
Čepki v človeškem očesu so občutljivi na te tri barve.
Slide 14/66
barvni modeli
Barvni model RGB.
barvni ekran televizorja ali računalniškega monitorja
osnovni princip:
Slide 15/66
barvni modeli
Barvni model RGB.
barvni ekran televizorja ali računalniškega monitorja
osnovni princip:
Slide 16/66
barvni modeli
Prikaz mešanja rdeče in zelene barve:
Slide 17/66
barvni modeli
Barvni model RGB.
Primarne barve tega modela so
Red, Green, Blue.
Čepki v človeškem očesu so
občutljivi na te tri barve.
S seštevanjem svetlobe teh
barv v različnih razmerjih
dobimo ostale barvne odtenke
tega modela.
To je seštevalni model.
Ta model je primeren za
računalniško grafiko (barvni
prikazovalnik s katodno cevjo).
Slide 18/66
barvni modeli
Barvni model CMY.
Primarne barve tega modela so Cyan, Magenta, Yellow.
Ta model je primeren za ponazarjanje objektov, ki niso svetlobni izvori.
barvni tisk
Slide 19/66
barvni modeli
Barvni model CMY.
pigmenti selektivno absorbirajo svetlobo
odštevalni model.
Slide 20/66
barvni modeli
Odštevalni barvni model
bel premaz odbija vso svetlobo
Slide 21/66
barvni modeli
rdeč pigment odbija rdečo barvo, absorbira vse ostale
Slide 22/66
barvni modeli
če dodamo beli barvi rdeč in zelen pigment, dobimo črno barvo
(to je res le v teoriji, v praksi dobimo nekakšno umazano temno barvo –
ker pigmenti ne absorbirajo vse svetlobe)
Slide 23/66
barvni modeli
črno barvo naj bi dobili tudi če mešamo rdeč in moder pigment, ali pa če
mešamo zelen in moder pigment
Slide 24/66
barvni modeli
Barvni model CMY.
cyan:
kombinacija zelene
in modre barve,
magenta:
kombinacija rdeče in
modre,
rumena:
kombinacija rdeče in
zelene,
absorbira rdečo
absorbira zeleno
absorbira modro
Slide 25/66
barvni modeli
Barvni model CMY.
če mešamo pigmenta cyan in rumen
Slide 26/66
barvni modeli
Barvni model CMY.
če mešamo pigmenta cyan in magenta
Slide 27/66
barvni modeli
Barvni model CMY.
Primarne barve tega modela so
Cyan, Magenta, Yellow.
ponazarjanje objektov, ki niso
svetlobni izvori.
tiskarstvo.
Rdeč barvni pigment, na
primer, odbija rdečo barvno
svetlobo in absorbira zeleno in
modro.
To je odštevalni model.
Slide 28/66
mešanje barv
Osnovne pigmentne barve so rdeča, modra in rumena.
Slide 29/66
mešanje barv
Z mešanjem dveh osnovnih barv dobimo sekundarno barvo.
Slide 30/66
mešanje barv
Z mešanjem dveh osnovnih barv dobimo sekundarno barvo.
Z nadaljnjim mešanjem barv dobimo terciarne barve, itd.
Rezultat mešanja barv lahko ponazorimo z barvnim kolesom.
Barvno kolo lahko uporabimo za izbiro harmoničnih, človeku prijaznih
kombinacij barv.
Slide 31/66
pigmentno barvno kolo
Barvno kolo je vizuelna predstavitev barv razvrščenih glede na njihovo
barvno odvisnost.
Pigmentno barvno kolo konstruiramo na naslednji način:
osnovne barve
(povzeto po: http://www.worqx.com/color/color_wheel.htm)
Slide 32/66
barvno odvisnost.
osnovne barve
sekundarne barve
Slide 33/66
barvno odvisnost.
osnovne barve
sekundarne barve
terciarne barve
Slide 34/66
barvno odvisnost.
osnovne barve
sekundarne barve
terciarne barve
barvno kolo
Slide 35/66
barvna kolesa
procesno barvno kolo
(povzeto po: Edith Andreson Feisner: Color Studies, Laurence King Publ. 2006
Slide 36/66
barvna kolesa
svetlobno barvno kolo
Slide 37/66
barvna kolesa
Munsellovo barvno kolo
Slide 38/66
barvna kolesa
vizualno barvno kolo
Slide 39/66
uporaba barv
Z barvami lahko oblikujemo informacijo na zaslonu tako, da
povezujemo elemente v grupe,
ločujemo med seboj različne grupe,
povezujemo informacijo, ki je sicer razporejena na različnih mestih na
zaslonu,
poudarjamo tisto informacijo, za katero želimo opozoriti uporabnika (na
primer: razna opozorila).
Slide 40/66
uporaba barv
Slide 41/66
uporaba barv
Barva v vlogi vizualne kode
nakazuje, kakšne vrste informacija je prikazana,
omogoča hiter pregled zaslona in iskanje informacije, ki jo iščemo,
mora biti splošno uveljavljena in se mora dobro razlikovati od ostalih
uporabljenih barv.
Slide 42/66
uporaba barv
Barvno kodiranje:
Slide 43/66
uporaba barv
Nekateri problemi povezani z uporabo barv:
napačno vzbujanje pozornosti
• V primerih, ko so objekti na zaslonu sicer enake barve, vendar med
seboj nimajo logične povezave, lahko uporabnik naredi napačne
zaključke.
• Objekti enake barve lahko spodbudijo uporabnika, da skuša najti
vzročne povezave, ki v bistvu ne obstajajo.
težave z razpoznavanjem barv
• 8% moških in 0.4% žensk ima neke vrste “barvno slepoto”
• protanopija – težave z razpoznavanjem rdeče barve
• deuteronopija - težave z razpoznavanjem zelene barve
• tritanopija - težave z razpoznavanjem modre barve
Slide 44/66
barvne konotacije
barva
pozitiven pomen
negativen pomen
rdeča
aktivna
atraktivna
močna
agresivna
alarmantna
modra
harmonična
racionalna
čutna
misteriozna
agresivna
hladna
melanholična
zelena
blizu naravi
optimistična
osvežujoča
nežna
zavidljiva
ljubosumna
neizkušena
rumena
vesela
slikovita
živahna
mladostna
bojazljiva
pretirana
površna
jalova
Slide 45/66
barvne konotacije
Barve imajo v različnih socialnih okoljih in kulturah različne pomene.
Tako na primer pomeni modra barva v ameriški družbi:
finančnim menažerjem – kvaliteto in zanesljivost,
bolničarjem – smrt,
filmski javnosti – pornografijo.
Medkulturne razlike: rdeča barva na primer pomeni
v Združenih državah – nevarnost,
v Egiptu – smrt,
v Indiji – življenje.
Slide 46/66
Ko izbiramo barve na zaslonu, moramo upoštevati:

vizualni sistem človeka,
možne probleme, ki bi jih povzročila uporaba barv,
okolje, v katerem bo uporabljen zaslon,
naloge uporabnika,
kako bodo barve uporabljene,
na kakšni aparaturni opremi (zaslon) bodo barve predstavljene.
Primarni cilj uporabe barv je posredovanje informacije, ki je predstavljena na
zaslonu, uporabniku.
Slide 47/66
Če uporabnik išče
določeno vrsto
informacije na
zaslonu
Uporabimo
različne barvne tone
za
različne dele informacije
na zaslonu
Slide 48/66
Slide 49/66
Če se uporabnik
odloča na podlagi
statusa določene
vrste informacije na
zaslonu
Uporabimo
barvno kodiranje
z ustrezno izbiro
barve
Slide 50/66
Slide 51/66
Če gre za posredovanje
informacije
v določenem vrstnem redu
Uporabimo
barvni ton ali svetlost
za
ponazoritev vrstnega reda
Slide 52/66
Slide 53/66
.
Če gre za posredovanje
informacije na nabito polnem
zaslonu
Uporabimo
barvni ton
za grupiranje sorodne informacije
Slide 54/66
uporaba barv
Slide 55/66
Nikoli ne uporabljaj barv kot edinega sredstva za identificiranje elementov
na zaslonu, ker imajo uporabniki lahko barvno slepoto.
Pomagaj si z uporabo prostorskega formatiranja (grupiranja s praznim
prostorom, grupiranja z robovi), poudarjanja teksta in/ali dodatnih sporočil.
Slide 56/66
Uvodni napotki za učinkovito izbiro barv
najprej izdelaj monokromatsko verzijo uporabniškega vmesnika,
nato dodajaj barve le po potrebi,
ne uporabljaj barv, če je možno uporabiti druge načine identifikacije
objektov.
Slide 57/66
Človeško oko je sposobno razlikovati le med omejenim naborom barv.
Če se zahteva pomnenje barv in njihovo absolutno razpoznavanje (barva
mora biti pravilno razpoznana pri čemer v vidnem polju ni prisotnih drugih
barv):
izberemo največ štiri ali pet barv, ki so med seboj precej oddaljene v
barvnem kolesu.
dobra izbira so rdeča, rumena, zelena, modra in rjava.
dve dobri nasprotni barvi sta rdeča/zelena in rumena/modra.
če je treba uporabiti več kot pet barv, moramo njihov pomen pojasniti v
dodatni legendi.
Slide 58/66
Če uporabljamo primerjalno razlikovanje barv (barva mora biti pravilno
razpoznana ob prisotnosti ostalih barv v vidnem polju):
izberemo največ šest ali sedem barv, ki so med seboj precej oddaljene v
barvnem kolesu.
poleg prej omenjenih barv so primerne tudi oranžna, rumenozelena, cyan,
vijolična in magenta.
Slide 59/66
Barvna harmonija
Harmonične barve so tiste, ki si sledijo brez velikih kontrastov. Barvno
harmonijo najlažje dosežemo z monokromatsko paleto.
Harmonične barvne kombinacije v večbarvnem okolju je malo težje izbrati.
• izogibajmo se komplementarnim barvam v Munsellovem barvnem
kolesu.
• dobre izbire so ena barva in dve na njeni nasprotni strani, ali pa tri
barve na ekvidistančnih mestih barvnega kolesa.
Slide 60/66
Poudarek
Za povečanje pozornosti ali poudarjanje elementov na zaslonu uporabimo
svetlejše barve.
Za poudarjanje razlik uporabimo kontrastne barve (rdeča in zelena, modra
in rumena).
Za izražanje podobnosti izberemo podobne barve (oranžna in rumena,
modra in vijolična).
Slide 61/66
Splošni pomeni barv
Za označevanje nujnih akcij uporabimo tople barve (rdeča, oranžna,
rumena).
Za označevanje informacije o statusu uporabimo hladne barve (zelena,
modra, vijolična).
Uporabljaj že uveljavljene pomene. Nekaj primerov:
• rdeča - stop, ogenj, vroče, nevarnost
• rumena – previdno!, počasi!, test
• modra – mrzlo, voda, mir, nebo, nevtralnost
• siva, bela - nevtralnost
Slide 62/66
Če je treba razvrstiti barve, je najprimernejša razvrstitev glede na njihovo
spektralno pozicijo: Red, Orange, Yellow, Green, Blue, Indigo, Violet.
Razvrstitev si lahko zapomnimo kot “ROY G. BIV” oziroma s stavkom
"Richard Of York Gave Battle In Vain"
Slide 63/66
Ospredje (angl. foreground)
Izbiraj barve, ki so zelo kontrastne od barve ozadja.
Za tekst izberi:
• črno barvo na svetli podlagi (sivo-beli, krem, svetlo sivi)
• nenasičene barve ali barve s sredine spektra (bela, rumena, zelena)
na temni podlagi,
• toplejše, bolj aktivne barve.
Barve ospredja naj imajo enako nasičenost in svetlost.
Poudarjanje elementov se izvede s svetlejšo barvo ospredja.
Nepoudarjanje elementov se izvede s temnejšo barvo ospredja. Pri tem je
potrebno paziti, da ostaja zadovoljiv kontrast od barve ozadja.
Izogibati se je treba istočasnemu poudarjanju in nepoudarjanju.
Slide 64/66
Ozadje (angl. background)
Uporabi barve, ki ne konkurirajo barvam ospredja.
Barve ozadja naj imajo majhno svetlost (na primer neintenzivna bela ali
neintenzivna siva).
Barve ozadja naj bodo nenasičene.
Za temna ozadja uporabi hladne, temne barve. Modra barva je še posebno
primerna zaradi zmanjšane senzibilnosti v centralnem delu in povečane
senzibilnosti v perifernem delu človeškega očesa.
Slide 65/66
Pomembni napotki:

Najprej izberemo barvo ozadja, šele nato pa barve ospredja.
Istočasno naj bodo na zaslonu prisotne največ štiri barve.
V velikem številu primerov zadostujejo že tri barve ali pa celo samo dve.
V primeru snovanja spletnih strani izberi takšne barve, da jih bo možno
enostavno reproducirati v črno – beli tehniki.
Slide 66/66