SlideShare a Scribd company logo

ICK6-L8.pptx

P6: Projektovanje korisničkih interfejsa

1 of 9
6.8. Smernice za upotrebu boja
Primena boja u izradi korisničkih interfejsa je izuzetno značajna jer može
da znatno unapredi izvršenje zadataka. Sa druge strane, postoji velika
opasnost od pogrešne upotrebe boja zbog toga što boje mogu:
• prijati ili smetati očima,
• dati akcenat neinteresantnom prikazu,
• obezbediti suptilnu diskriminaciju u složenom prikazu,
• naglasiti logičku organizaciju prikaza,
• privući pažnju na upozorenja, kao i
• izazvati jaku emocionalnu reakciju radosti, uzbuđenja, straha ili
besa.
Principi koji su razvijeni u oblasti grafičkog dizajna za potrebe štampanih
medija mogu se primeniti i na korisničke interfejse računarskih sistema.
Lako upotrebu boja nije moguće ustrojiti po nekim striktnim pravilima,
sledeće smernice predstavljaju dobru osnovu za početak.
6.8. Smernice za upotrebu boja
1. Konzervativno koristiti boje
Tipična početnička greška je prekomerna upotreba boja u cilju da sve
“blješti”, što često može da izazove kontraproduktivan rezultat. Umesto da
boje naglašavaju logičke veze između celina, prekomernom upotrebom
boja, korisnik može doći u zabludu da traži vezu tamo gde je nema. Na
primer, meni sa 12 stavki gde je svaka obojena u posebnu boju je jako loše
rešenje. Ukoliko se izbor boja smanji na 4, stavke koje su isto obojene
mogu se smatrati sličnim, što najčešće na tom nivou nije slučaj. Bolja
strategija je da se jedna boja koristi za sve naslove, druga za sve stavke,
treća za instrukcije, a četvrta za greške. Međutim, i ovo rešenje može da
bude preterano šareno, pa je preporuka da se boja koristi samo za veliko
naglašavanje.
6.8. Smernice za upotrebu boja
2. Limitirati broj boja
Mnoge smernice za grafičke dizajnere savetuju da se broj različitih boja na
jednoj stranici (ekranu) limitira na 4, odnosno na 7 u celom interfejsu.
Iskusni grafički dizajneri mogu da koristi i veći broj boja, ali kod početnika
veći broj boja može da proizvede konfuziju. U ovom pogledu vredno je
pomenuti i interfejsni obrazac „malo boja — mnogo nijansi“ koji predviđa da
se paleta boja za interfejs pravi od nijansi svega 2 ili 3 osnovne boje.
3. Iskoristiti boju kao kodnu tehniku
Primena boja za kodiranje određenih vrednosti značajno ubrzava
prepoznavanje u odnosu na kodiranje tih istih vrednosti tekstom. Na primer,
ukoliko u nekoj knjigovodstvenoj aplikaciji obojimo u crveno stavke koje
označavaju osobe koje kasne sa uplatom više od 30 dana, one će biti jasno
izdvojene u odnosu na ostale stavke prikazane npr. crnom bojom. Naravno,
u skladu sa prvom smernicom, ovo sve ima smisla dok se izdvaja jedna
kategorija u odnosu na ostale. Ukoliko bi npr. 4 različite boje primenili za 4
različite kategorije, preglednost bi bila znatno smanjena.
6.8. Smernice za upotrebu boja
4. Osigurati da kodiranje bojom podržava zadatak
Bitno je imati u vidu da upotreba boja kao kodne tehnike može negativno da
utiče na obavljanje zadataka koji odstupaju od primenjene kodne šeme.
Ukoliko u pređašnjem primeru, gde se boje osobe sa kašnjenjem u uplati
većom od 30 dana, hoćemo da lociramo osobe čiji je saldo veči od neke
sume, jasno je da primenjena kodna šema otežava ovaj zadatak. Dizajneri
moraju da obezbede da kodiranje bojom bude tesno vezano sa zadacima
koje korisnici obavljaju, a po potrebi obezbede i mogućnost korisničkog
podešavanja.
5. Pojavljivanje kodiranja bojom uz minimalno učešće korisnika
U skladu sa prethodno iznetom konstatacijom o mogućnošću korisničkog
podešavanja, treba naglasiti da kodiranje bojom treba što Je moguće više
automatizovati, ali u skladu sa zadatkom koji korisnik trenutno obavlja. Na
primer, ukoliko korisnik aktivira opciju za pronalaženje neredovnih platiša,
ima smisla automatski primeniti prethodno navedeno kodiranje. Međutim,
kada se aktivira neka druga opcija, potrebno je ili ukloniti kodiranje bojom ili
ga prilagoditi izabranom zadatku.
6.8. Smernice za upotrebu boja
6. Obezbediti kodiranje bojom uz korisničku kontrolu
Kada je to prikladno, treba omogućiti korisnicima da mogu da uključe ili isključe
kodiranje bojom. Prisustvo visoko uočljive crvene boje predstavlja ometajući
faktor ukoliko se čita tekst.
7. Dizajnirati prvo za monohromatski prikaz
Primarni cilj dizajnera treba da bude raspoređivanje sadržaja u logičke celine.
Povezane stavke se mogu prikazivati kroz kontinuitet ili upotrebom sličnih
strukturnih šablona. Različite stvari treba razdvajati korišćenjem praznina, i to
jedna linija teksta po vertikali ili bar tri karaktera po horizontali. Dizajn koji je
prilagođen i monohromatskom prikazu je univerzalan, tj. ne zavisi od boje, ali je
dodavanje boje na njega, naravno, moguće.
8. Imati u vidu daltoniste
Jedan bitan aspekt na koji treba obratiti pažnju je čitljivost boja od strane
korisnika koji ne razlikuju neke boje (najčešće crvenu i zelenu). Daltonizam je
veoma učestala pojava i to naročito kod muškaraca (~8% u poređenju sa <1%
žena). Rešenje za ovaj problem je uvođenje alternativnog bojenja za
kombinaciju crvene i zelene korišćenjem plave i žute boje. Oslanjati se na
kombinacije crne i bele, pošto su prihvatljive za veliku većinu korisnika.
6.8. Smernice za upotrebu boja
9. Koristiti boju kao pomoć kod formatiranja
Kod gusto pakovanih interfejsa, gde je prostor dragocen, slične boje se
mogu koristiti za grupisanje povezanih stavki. Različite boje se mogu
koristiti da označe fizički bliske, ali logički različite stavke.
10. Biti konzistentan u kodiranju bojom
Konzistentnost je jako bitna osobina kod interfejsa, pa samim tim i kod
kodiranja bojom. Najbolje je uspostaviti pravila kodiranja na početku
projekta, a onda ih primenjivati, konzistentno, na ceo sistem koji se razvija.
Ukoliko se različite boje koriste od strane različitih dizajnera, korisnici će biti
zbunjeni ili će pogrešno interpretirati značenje pojedinih boja.

More Related Content

More from AleksandarSpasic5 (20)

OIR-P0.pptx
OIR-P0.pptxOIR-P0.pptx
OIR-P0.pptx
 
OIR1-L4.pptx
OIR1-L4.pptxOIR1-L4.pptx
OIR1-L4.pptx
 
OIR1-L3.pptx
OIR1-L3.pptxOIR1-L3.pptx
OIR1-L3.pptx
 
OIR1-L2.pptx
OIR1-L2.pptxOIR1-L2.pptx
OIR1-L2.pptx
 
OIR1-L1.pptx
OIR1-L1.pptxOIR1-L1.pptx
OIR1-L1.pptx
 
Interfejsni obrasci - Opsti-6-Ostali.pdf
Interfejsni obrasci - Opsti-6-Ostali.pdfInterfejsni obrasci - Opsti-6-Ostali.pdf
Interfejsni obrasci - Opsti-6-Ostali.pdf
 
Interfejsni obrasci - Opsti-5-Drustveni.pdf
Interfejsni obrasci - Opsti-5-Drustveni.pdfInterfejsni obrasci - Opsti-5-Drustveni.pdf
Interfejsni obrasci - Opsti-5-Drustveni.pdf
 
Interfejsni obrasci - Opsti-4-Korisnik.pdf
Interfejsni obrasci - Opsti-4-Korisnik.pdfInterfejsni obrasci - Opsti-4-Korisnik.pdf
Interfejsni obrasci - Opsti-4-Korisnik.pdf
 
Interfejsni obrasci - Opsti-3-Podaci.pdf
Interfejsni obrasci - Opsti-3-Podaci.pdfInterfejsni obrasci - Opsti-3-Podaci.pdf
Interfejsni obrasci - Opsti-3-Podaci.pdf
 
Interfejsni obrasci - Opsti-2-Navigacija.pdf
Interfejsni obrasci - Opsti-2-Navigacija.pdfInterfejsni obrasci - Opsti-2-Navigacija.pdf
Interfejsni obrasci - Opsti-2-Navigacija.pdf
 
Interfejsni obrasci - Opsti-1-Unos--.pdf
Interfejsni obrasci - Opsti-1-Unos--.pdfInterfejsni obrasci - Opsti-1-Unos--.pdf
Interfejsni obrasci - Opsti-1-Unos--.pdf
 
IT12-L1.pptx
IT12-L1.pptxIT12-L1.pptx
IT12-L1.pptx
 
IT12-L2.pptx
IT12-L2.pptxIT12-L2.pptx
IT12-L2.pptx
 
IT12-L3.pptx
IT12-L3.pptxIT12-L3.pptx
IT12-L3.pptx
 
IT12-L4.pptx
IT12-L4.pptxIT12-L4.pptx
IT12-L4.pptx
 
IT12-L5.pptx
IT12-L5.pptxIT12-L5.pptx
IT12-L5.pptx
 
IT12-L6.pptx
IT12-L6.pptxIT12-L6.pptx
IT12-L6.pptx
 
ICKV6-L1-3.pptx
ICKV6-L1-3.pptxICKV6-L1-3.pptx
ICKV6-L1-3.pptx
 
IT11-L1.pptx
IT11-L1.pptxIT11-L1.pptx
IT11-L1.pptx
 
IT11-L2.pptx
IT11-L2.pptxIT11-L2.pptx
IT11-L2.pptx
 

ICK6-L8.pptx

  • 1. 6.8. Smernice za upotrebu boja Primena boja u izradi korisničkih interfejsa je izuzetno značajna jer može da znatno unapredi izvršenje zadataka. Sa druge strane, postoji velika opasnost od pogrešne upotrebe boja zbog toga što boje mogu: • prijati ili smetati očima, • dati akcenat neinteresantnom prikazu, • obezbediti suptilnu diskriminaciju u složenom prikazu, • naglasiti logičku organizaciju prikaza, • privući pažnju na upozorenja, kao i • izazvati jaku emocionalnu reakciju radosti, uzbuđenja, straha ili besa. Principi koji su razvijeni u oblasti grafičkog dizajna za potrebe štampanih medija mogu se primeniti i na korisničke interfejse računarskih sistema. Lako upotrebu boja nije moguće ustrojiti po nekim striktnim pravilima, sledeće smernice predstavljaju dobru osnovu za početak.
  • 2. 6.8. Smernice za upotrebu boja 1. Konzervativno koristiti boje Tipična početnička greška je prekomerna upotreba boja u cilju da sve “blješti”, što često može da izazove kontraproduktivan rezultat. Umesto da boje naglašavaju logičke veze između celina, prekomernom upotrebom boja, korisnik može doći u zabludu da traži vezu tamo gde je nema. Na primer, meni sa 12 stavki gde je svaka obojena u posebnu boju je jako loše rešenje. Ukoliko se izbor boja smanji na 4, stavke koje su isto obojene mogu se smatrati sličnim, što najčešće na tom nivou nije slučaj. Bolja strategija je da se jedna boja koristi za sve naslove, druga za sve stavke, treća za instrukcije, a četvrta za greške. Međutim, i ovo rešenje može da bude preterano šareno, pa je preporuka da se boja koristi samo za veliko naglašavanje.
  • 3. 6.8. Smernice za upotrebu boja 2. Limitirati broj boja Mnoge smernice za grafičke dizajnere savetuju da se broj različitih boja na jednoj stranici (ekranu) limitira na 4, odnosno na 7 u celom interfejsu. Iskusni grafički dizajneri mogu da koristi i veći broj boja, ali kod početnika veći broj boja može da proizvede konfuziju. U ovom pogledu vredno je pomenuti i interfejsni obrazac „malo boja — mnogo nijansi“ koji predviđa da se paleta boja za interfejs pravi od nijansi svega 2 ili 3 osnovne boje. 3. Iskoristiti boju kao kodnu tehniku Primena boja za kodiranje određenih vrednosti značajno ubrzava prepoznavanje u odnosu na kodiranje tih istih vrednosti tekstom. Na primer, ukoliko u nekoj knjigovodstvenoj aplikaciji obojimo u crveno stavke koje označavaju osobe koje kasne sa uplatom više od 30 dana, one će biti jasno izdvojene u odnosu na ostale stavke prikazane npr. crnom bojom. Naravno, u skladu sa prvom smernicom, ovo sve ima smisla dok se izdvaja jedna kategorija u odnosu na ostale. Ukoliko bi npr. 4 različite boje primenili za 4 različite kategorije, preglednost bi bila znatno smanjena.
  • 4. 6.8. Smernice za upotrebu boja 4. Osigurati da kodiranje bojom podržava zadatak Bitno je imati u vidu da upotreba boja kao kodne tehnike može negativno da utiče na obavljanje zadataka koji odstupaju od primenjene kodne šeme. Ukoliko u pređašnjem primeru, gde se boje osobe sa kašnjenjem u uplati većom od 30 dana, hoćemo da lociramo osobe čiji je saldo veči od neke sume, jasno je da primenjena kodna šema otežava ovaj zadatak. Dizajneri moraju da obezbede da kodiranje bojom bude tesno vezano sa zadacima koje korisnici obavljaju, a po potrebi obezbede i mogućnost korisničkog podešavanja. 5. Pojavljivanje kodiranja bojom uz minimalno učešće korisnika U skladu sa prethodno iznetom konstatacijom o mogućnošću korisničkog podešavanja, treba naglasiti da kodiranje bojom treba što Je moguće više automatizovati, ali u skladu sa zadatkom koji korisnik trenutno obavlja. Na primer, ukoliko korisnik aktivira opciju za pronalaženje neredovnih platiša, ima smisla automatski primeniti prethodno navedeno kodiranje. Međutim, kada se aktivira neka druga opcija, potrebno je ili ukloniti kodiranje bojom ili ga prilagoditi izabranom zadatku.
  • 5. 6.8. Smernice za upotrebu boja 6. Obezbediti kodiranje bojom uz korisničku kontrolu Kada je to prikladno, treba omogućiti korisnicima da mogu da uključe ili isključe kodiranje bojom. Prisustvo visoko uočljive crvene boje predstavlja ometajući faktor ukoliko se čita tekst. 7. Dizajnirati prvo za monohromatski prikaz Primarni cilj dizajnera treba da bude raspoređivanje sadržaja u logičke celine. Povezane stavke se mogu prikazivati kroz kontinuitet ili upotrebom sličnih strukturnih šablona. Različite stvari treba razdvajati korišćenjem praznina, i to jedna linija teksta po vertikali ili bar tri karaktera po horizontali. Dizajn koji je prilagođen i monohromatskom prikazu je univerzalan, tj. ne zavisi od boje, ali je dodavanje boje na njega, naravno, moguće. 8. Imati u vidu daltoniste Jedan bitan aspekt na koji treba obratiti pažnju je čitljivost boja od strane korisnika koji ne razlikuju neke boje (najčešće crvenu i zelenu). Daltonizam je veoma učestala pojava i to naročito kod muškaraca (~8% u poređenju sa <1% žena). Rešenje za ovaj problem je uvođenje alternativnog bojenja za kombinaciju crvene i zelene korišćenjem plave i žute boje. Oslanjati se na kombinacije crne i bele, pošto su prihvatljive za veliku većinu korisnika.
  • 6. 6.8. Smernice za upotrebu boja 9. Koristiti boju kao pomoć kod formatiranja Kod gusto pakovanih interfejsa, gde je prostor dragocen, slične boje se mogu koristiti za grupisanje povezanih stavki. Različite boje se mogu koristiti da označe fizički bliske, ali logički različite stavke. 10. Biti konzistentan u kodiranju bojom Konzistentnost je jako bitna osobina kod interfejsa, pa samim tim i kod kodiranja bojom. Najbolje je uspostaviti pravila kodiranja na početku projekta, a onda ih primenjivati, konzistentno, na ceo sistem koji se razvija. Ukoliko se različite boje koriste od strane različitih dizajnera, korisnici će biti zbunjeni ili će pogrešno interpretirati značenje pojedinih boja.
  • 7. 6.8. Smernice za upotrebu boja 11. Biti svestan značenja boja u kodiranju Pri izboru boja za kodiranje potrebno je razgovarati sa korisnicima kako bi se ustanovilo njihovo značenje u odgovarajućem domenu. Na primer, kod saobraćaja, crvena boja označava zaustavljanje ili opasnost, žuta je upozorenje, dok zelena znači da se može krenuti. Kod finansija, crvena označava gubitak, a crna dobitak. Za hemičare, crvena označava nešto vruće, a plava nešto hladno. Za kartografe, plava označava vodene površine, zelena označava šume, a žuta pustinje. Ove različite konvencije mogu izazovu probleme, npr. ukoliko se iskoristi crvena da se označi da se motor zagrejao i dostigao radnu temperaturu, neko to može da protumači kao znak opasnosti. Zbog ovoga je poželjno, kad god je to moguće, označiti šta koja boja predstavlja ili na samom ekranu ili u korisničkom uputstvu.
  • 8. 6.8. Smernice za upotrebu boja 27.11.2023. 12. Biti svestan uparenosti boja Ukoliko se na stranici nađu u isto vreme zasićena crvena i plava boja, korisniku će biti otežano praćenje sadržaja. Razlog za ovo je to što su crvena i plava na suprotnim stranama spektra, pa će mišići koji kontrolišu oko biti napregnuti kako bi fokusirali obe ove boje u isto vreme. Plavi tekst na crvenoj pozadini je posebno naporan za čitanje. Isto važi i za druge kombinacije ovog tipa kao što su žuta na ljubičastoj i purpurnocrvena na zelenoj. Ukoliko je između boja premali kontrast (npr. žuta na beloj pozadini ili braon na crnoj) sadržaj će takođe biti nečitak. Na slici je prikazan točak boja sa naznačenim komplementarnim (a), analognim (b) i trijadičnim bojama (c). Komplementarne boje se nalaze na suprotnim stranama točka boja, analogne predstavljaju tri uzastopna segmenta na točku, dok su trijadične podjednako međusobno udaljene (primarne i sekundarne boje su primer trijade).
  • 9. 6.8. Smernice za upotrebu boja 13. Bojama ukazati na promenu stanja Boje se mogu efikasno koristiti da skrenu pažnju. Ova tehnika je posebno značajna kada imamo veliki broj parametara koje pratimo, a zanima nas situacija kada neki od njih izađe iz normalnog opsega. Na automobilu se na komandnoj tabli na ovaj način prikazuje status podsistema. Kod pregrevanja se npr. upali crvena lampica. 14.Upotreba boja na grafikonima Na grafikonima na kojima se prikazuju grafici više različitih veličina, boja može biti jako korisna da ukaže koja linija odgovara kojoj veličini. Alternativa bojama, kod crno-belih prikaza, je bilo korišćenje isprekidanih linija, ali su boje efikasnije. Primer ovakve primene boja su arhitekturni planovi gde se različite boje koriste za prikaz vodovodne, toplotne i električne instalacije.