60
Seminarski rad iz predmeta Ergonomija racunalne i programske opreme : Dizajn i upotreba ikona u korisnickom sucelju Igor Šipka Ukoliko cesto koristite racunala sigurno ste imali iskustva sa aplikacijama cija su sucelja nalikovala kontrolnoj ploci svemirskog broda sa planeta “Zorg”. Hrpa šarenih ikona u cije znacenje je upucen samo prvotni dizajner aplikacije uvijek me natjera da se zapitam dali sucelja moraju biti takva. Dizajn korisnickih sucelja pa tako i dizajn ikona nije nimalo jednostavan posao. Cesto iz najboljih namjera dizajnera nastaju sucelja koja naginju apstraktnoj umjetnosti. Takva loše izvedena sucelja uzrokuju gubitak krajnjih korisnika, cak i kod kvalitetnih aplikacija. U namjeri da se pozabavim problemom ispravne upotrebe i dizajna ikona odlucio sam se za ovu temu. Što je ikona ? Rijec ikona dolazi od grcke rijeci eikon u prijevodu slika ili lik, koja potice od glagola eikenai u prijevodu biti kao odn. pricinjavati se.

Seminarski KS 1

Embed Size (px)

DESCRIPTION

Korisnicka sucelja

Citation preview

Page 1: Seminarski KS 1

Seminarski rad iz predmeta Ergonomija racunalne i programske opreme:

Dizajn i upotreba ikona u korisnickom sucelju

Igor Šipka

Ukoliko cesto koristite racunala sigurno ste imali iskustva sa aplikacijama cija su sucelja nalikovala kontrolnoj ploci svemirskog broda sa planeta “Zorg”. Hrpa šarenih ikona u cije znacenje je upucen samo prvotni dizajner aplikacije uvijek me natjera da se zapitam dali sucelja moraju biti takva. Dizajn korisnickih sucelja pa tako i dizajn ikona nije nimalo jednostavan posao. Cesto iz najboljih namjera dizajnera nastaju sucelja koja naginju apstraktnoj umjetnosti. Takva loše izvedena sucelja uzrokuju gubitak krajnjih korisnika, cak i kod kvalitetnih aplikacija. U namjeri da se pozabavim problemom ispravne upotrebe i dizajna ikona odlucio sam se za ovu temu.

Što je ikona ? Rijec ikona dolazi od grcke rijeci eikon u prijevodu slika ili lik, koja potice od glagola eikenai u prijevodu biti kao odn. pricinjavati se.

Page 2: Seminarski KS 1

U racunalnom žargonu ikona je slika koja na ekranu predstavlja specificnu datoteku, direktorij, prozor, opciju, program ili bilo što drugo što možemo predstaviti u grafickom obliku. Ikone su graficka metafora te predstavljaju vizualnu sliku koju korisnik asocira sa odredenim znacenjem.

Pokušajte samo prebrojati ikone koje su vidljive na vašem ekranu (naravno ukoliko koristite sustav koji ima graficko sucelje i ne citate sa papira). Sama zastupljenost ikona u današnjim korisnickim suceljima govori o važnosti rada sa kvalitetnim ikonama. Pod kvalitetnim podrazumijevam one ikone koje korisniku jasno sugeriraju zadano znacenje.

Zašto koristiti ikone ? Upotrebljivost ikona u korisnickom sucelju daleko nadilazi upotrebljivost rijeci.

Evo i nekoliko razloga zašto:

1. Kad se od korisnika zahtjeva brzina rada i efikasnost, dobro dizajnirane ikone mu omogucuju shvacanje njihovog znacenja u jednom pogledu, cime ga rješava potrebe za citanjem i analizom znacenja teksta.

2. Rijeci i prirodni jezik nisu pogodni za opisivanje vizualnih predodžbi ili prostornih odnosa. Mnoge struke kao inženjeri, naucnici, arhitekti, dizajneri bave se i razmišljaju u vizualnim pojmovima.

3. Ikona svojom površinom štedi dragocjen prostor na ekranu. Tekstualni ekvivalenti su znacajno zahtjevniji po pitanju zauzetog prostora.

4. Ikonu za razliku od rijeci vrlo lako izdvajamo iz hrpe ikona npr. prema njenom obliku ili boji.

5. Ikone trenutno prepoznajemo tj. nije potrebno citati da bi shvatili što pojedina ikona predstavlja

6. Ikonu lako pamtimo. 7. Korisnik ne mora znati citati da bi se koristio suceljem. 8. Dosljedno korištenje ikona u sucelju dovodi do standardizacije

sucelja

Povijest upotrebe ikona U pocetku bijaše slika. Dugo prije nego što su se razni oblici glasova pretvorili u rijeci, naši preci komunicirali su izrazima lica i položajem

Page 3: Seminarski KS 1

tijela. Špiljska umjetnost je pretekla pisani jezik stotinama stoljeca, a i sama abeceda je evoluirala iz ranijih piktografskih znakova. Ironicno je da je upravo upotreba racunala u 20 stoljecu dovela do ponovnog otkrica ovog prapovijesnog oblika komunikacije. Upotreba ikona je jednako stara koliko je danas aktualna i važna.

Kratak pregled nekih podrucja upotrebe ikona odn. simbola u širem znacenju rijeci kroz povijest:

1. Špiljske slike i petroglifi (Altamira, Lescaux)

2. Piktografski jezici

3. Narodna dekorativna umjetnost

4. Okultni i religijski simboli

5. Oznake vlasništva i trademarkovi

6. Cestovne oznake

Page 4: Seminarski KS 1

Danas u modernom svijetu ikone i simboli prisutniji su nego ikad prije. Pogledajte samo bilo koju važniju ulicu bilo kojeg modernog grada i ugledati cete stotine simbola od kojih su neki postali tako uobicajeni da ih uopce ne primjecujemo kao simbole. Jedno je sigurno ikone i simboli danas više nego ikad postali su dio naše kulture.

Pogrešne predodžbe o ikonama

Kad se radi o ikonama ne vrijedi izreka da se o ukusima ne raspravlja. Svatko ima svoje mišljenje o upotrebi ikona, no velik broj ljudi ima pogrešne predodžbe o tome što ikona treba biti. Kako bi razbio neke pogrešne predodžbe o ikonama navodim nekoliko najcešcih.

1. Ikone u potpunosti zamjenjuju rijeci

POGREŠNO: Ukoliko koristite ikone u sucelju nije potrebno niti poželjno koristiti rijeci.

ISPRAVNO: Ovakvim pristupom dizajner propušta iskoristiti najbolje od oba svijeta rijeci i ikona. Rijeci pomažu korisniku da u pocetku poveže znacenje pojedine ikone.

2. Ikone nisu nimalo bolje od tekstualnih sucelja

POGREŠNO: Rad sa suceljem temeljenom na ikonama je neefikasan i nespretan, to sve mogu u tri linije koda natipkati.

ISPRAVNO: Iako je ova rasprava znatno složenija, pojednostavimo sve to na jedan argument. Prepustite odluku korisnicima, ponudite im oba nacina rada i prepustite njima da odaberu nacin rad koji im odgovara.

3. Ikone cine proizvod jednostavnijim za korištenje

POGREŠNO: Kako bi pojednostavili proizvod sve što trebam napraviti je zamijeniti komande i menije sa ikonama.

Page 5: Seminarski KS 1

ISPRAVNO: Ikone ne cine proizvod boljim ili jednostavnijim, to se postiže dobrim dizajnom.

4. Ikone moraju biti savršeno ocite

POGREŠNO: Odbaciti treba svaku ikonu koja nije odmah ocita svakome.

ISPRAVNO: Ustvari prvo prepoznavanje ikone zahtjeva od svakog korisnika odredeno vrijeme, no to vrijeme nije presudno ono što je važnije je vrijeme koje je korisniku potrebno za ponovno raspoznavanje ikone.

5. Ikone su slike

POGREŠNO: Najbolje ikone su umanjene realisticne slike ili ilustracije.

ISPRAVNO: Ikone nisu slike jer ih ne koristimo kako bi prepoznali kako nešto izgleda. Zapravo ako ikone moramo gledati izbliza da bi ih prepoznali one gube svrhu.

6. Dizajn ikona je cista umjetnost

POGREŠNO: Dizajn ikona je oblik samoizražavanja. O ukusima se ne raspravlja.

ISPRAVNO: Nitko ne preporuca korištenje ružne ikone ukoliko lijepa funkcionira jednako dobro, medutim ukoliko je funkcija zanemarena a ikone se koriste kao dekor korisnici su frustrirani.

Kako korisnik raspoznaje ikone ?

Iako možda djeluje malo suhoparno tematika medudjelovanja ikone i korisnika nikako ne smije biti zanemarena. Kako bi dizajnirali efektivne ikona potrebno je razumjeti kako ikone djeluju na korisnika odn. kako ikone “rade”.

Kako bi ikona bila efektivna korisnik s njom mora biti u mogucnosti napraviti cetiri postupka:

Page 6: Seminarski KS 1

a) dekodirati ikonu - ovo je u osnovi postupak dekompozicije (ukoliko je ikona složenija) ikone u jednostavnije simbole te dalje u osnovne graficke elemente.

b) prepoznati znacenje – jednom kad je ikona naucena korisnik ju mora prepoznati odn. povezati ikonu i njeno znacenje.

c) pronaci ikonu – mogucnost brzog pronalaženja ikona na pretrpanom sucelju je kljucna ukoliko težimo što produktivnijem radu sa aplikacijom. Brzina kojom je korisnik u stanju pronaci ikonu na ekranu ovisi vecinom o dvije komponente: dali korisnik zna kako izgleda ikona koju traži i dali se tražena ikona vizualno istice od drugih ikona.

d) aktivirati ikonu – jednom kad korisnik pronade ikonu potrebno ju je aktivirati. Taj proces obuhvaca dva koraka: selekciju koju ikonu želimo aktivirati (obicno pomicanjem grafickog pokazivaca iznad ikone ili pokazivanjem na ikonu preko ekrana osjetljivog na dodir) i “okidanje” koje može biti provedeno na niz nacina ovisno o tome koji je gumb na mišu pritisnut, koliko dugo je pritisnut itd...

Ponekad je potrebno napraviti kompromise izmedu ova cetiri postupka no sva cetiri su potrebna u odredenoj mjeri.

Za dizajnera ikona ova cetiri koraka ustvari znace:

a) konstruirajte jednostavnu ikonu koja je vec povezana s konceptom koji predstavljate ili ukoliko ovo nije moguce predstavite koncept kao jednostavnu kombinaciju poznatih elemenata.

b) Odaberite jasnu ikonu koja snažno asocira na sve koncepte koje predstavlja

c) Osigurajte da korisnik može predvidjeti vizualne karakteristike ikone kao što su oblik i boja ikone koju traže

d) Uspostavite i konzistentno upotrebljavajte jednostavan i jedinstven sustav aktiviranja ikona.

Jednadžba razumijevanja znacenja iz ikone je jednostavna:

IKONA + KONTEKST + KORISNIKOV UM = ZNACENJE IKONE

Varijacija bilo koje od ovih varijabli daje drugo znacenje ikoni.

Kontekst predstavlja situaciju u kojoj korisnik gleda ikonu. Sastoji se od drugih stvari unutar sucelja koje korisnik vidi (tekstualnih

Page 7: Seminarski KS 1

poruka, drugih ikona, prozora i sl.). Kontekst je sve ono što nas pokrece da interpretiramo ikonu na odreden nacin. Najcešci i najjace kontekstualno povezivanje je blizina drugih ikona npr.

samostalno postavljena ikona ima kontekst osobe, covjeka ili muškarca

medutim postavljena uz ikonu koja predstavlja žensku osobu naglašen je kontekst spola osobe odn. razlikovanje pojmova žena i muškarac

daljim dodavanjem moguce je dobiti kontekst obitelji i sl.

Korisnikov um dovršava znacenje ikone tako primjerice:

• ogranicenja percepcije filtriraju ulaz • interes i radoznalost kontroliraju pažnju • sjecanja upotpunjuju znacenje • emocije motiviraju itd...

Što jednadžba razumijevanja znacenja porucuje dizajneru ikona:

• ogranicite kontekst – kako je ne moguce ograniciti um korisnika (jer je vec ogranicen) te ukoliko je potrebno koristiti ikonu sa višestrukim znacenjem treba korisnika navoditi kroz kontekst

• testirajte na razlicitim korisnicima – jedini nacin da saznate dali su vaše ikone jasne je da provedete testiranje na više korisnika (ovo je osobito znacajno za ikone koje ovise o profesionalnom ili kulturnom predznanju)

• izbjegnite višeznacne ikone – ukoliko ikona ima višestruka znacenja izbjegavajte upotrebu

• Predvidite razmišljanje korisnika npr.

Koncept mjerenja predstavljamo:

korištenjem ikone ravnala za obicnog korisnika,

dok bi za inženjersku primjenu prikladnija bila pomicna mjerka ili nešto slicno.

Konacno ono što je vrlo bitno za dizajnera jest da se pri radu cešce postavlja kao krajnji korisnik nego kao dizajner.

Page 8: Seminarski KS 1

Pravila dobrog dizajna korisnickog sucelja

Važnost dobrog dizajna sucelja

Korisnost dizajna vaše aplikacije nije samo filozofski aspekt koji trebate razmatrati, to je kljucni element uspjeha vaše aplikacije. Ulaganje u dizajn vaše aplikacije pridonosi ne samo zadržavanju postojecih korisnika vec i proširenju vaše korisnicke baze. Dakle ulaganje u dizajn direktno utjece na financijski prinos od vaše aplikacije.

Dobar primjer uticanja na dizajn je Windows platforma proizvoda, bez obzira na njihove druge karakteristike. Cinjenica je da sa danas za Windows platformu proizvodi više aplikacija nego za bilo koju drugu aplikaciju. Dodatna podrška za lokalizaciju i podršku korisnicima sa poteškocama znaci da današnje apl ikacije dopiru do daleko šire baze korisnika. Nove inicijative na podrucju hardwarea i softwarea cine racunala lakšim za korištenje i boljim za krajnje korisnika. Široka rasprostranjenost opcija kao što su standardni dijalozi za razlicite funkcije dovodi do smanjenog vremena privikavanja korisnika na rad s aplikacijom.

Jednostavnost

Usprkos popularnoj podršci za Windows platformu, postoje i dalje znacajne prepreke u pružanju najboljeg iskustva korisniku pri radu s aplikacijom. Racunala su i dalje previše složena za upotrebu i troškovi pružanja podrške korisnicima su i dalje visoki. Korisnici se cesto žale na obim opcija koje se nalaze u današnjim aplikacijama, osobito na cinjenicu da ne mogu naci opcije koje traže, dok za opcije koje su im dostupne ne znaju primjenu. Mnogi korisnici od racunala ocekuju jednaku jednostavnost upotrebe i predvidivost u radu koju nalaze kod bijele tehnike. Ocekuju da racunala rade na nacin koji im je blizak. Dakle jednostavnost dizajna ukljucuje probleme koje mora prihvatiti svatko tko se odluci dizajnirati aplikacije za širu grupu korisnika (vecu od jednog korisnika).

Ovdje cu pokušati objasniti neke osnovna pravila koja su temelj pravilne uporabe ikona u korisnickom sucelju.

Dizajnirate za ljude

Page 9: Seminarski KS 1

Imajte na umu da je svrha svake aplikacije omoguciti odredenoj grupi ljudi da obavi zadani skup zadataka. Prva stvar koju trebate uciniti prilikom dizajna aplikacije je da ustanovite tko su vaši korisnici i koji skup zadataka im želite omoguciti da obavljaju. Primjerice razlikuju se pristupi potrebni dok dizajnirate aplikaciju koja bi trebala omoguciti inženjerima (softwarea, elektrotehnike ili strojarstva) da rade dijagrame ili aplikaciju koja djecu predškolskog uzrasta poducava matematiku.

Najvažnije je da poznajete vašu ciljnu grupu za koju razvijate dizajn aplikacije, kao i da razumijete njihove potrebe. Postoje dosta kvalitetne literature od strane profesionalnih dizajnera o metodama dizajna koje mogu pomoci u ovom procesu. Vecina ovih metoda uglavnom se svodi na specificne nacine razumijevanja vaših korisnika i zadataka u kojim im želite pomoci.

Proširite ciljnu grupu korisnika

Ukoliko dizajnirate aplikaciju koju ce koristiti inženjeri ili djeca ili sistemski administratori trebali biste se pobrinuti da aplikaciju mogu koristiti sve te tri grupe ukljucujuci prema mogucnostima i korisnike tih grupa s posebnim potrebama (invaliditet i sl.). Takoder se treba pobrinuti da je sucelje razumljivo i korisnicima koji ne vladaju vašim jezikom.

Dostupnost

Dostupnost podrazumijeva omogucavati korisnicima sa posebnim potrebama funkcionalno korištenje vašeg softwarea. Pri tome treba voditi racuna da vaš software može koristiti glasovna sucelja, citace ekrana, alternativne metode unosa i drugu tehnologiju za ispomoc. Vaš software bi trebali moci koristiti daltonisti što dijelom postižete izbjegavajuci upotrebu boje za prikaz kriticno važnih informacija. Isto tako korisnicima sa slušnim poteškocama izbjegavajuci korištenje samo zvucnih upozorenja.

Lokalizacija

Lokalizacija obuhvaca postupke dizajniranja softwarea koji može funkcionirati u razlicitim jezicnim okolinama. U stvarnosti to znaci prevodenje poruka, naziva i drugih elemenata sucelja aplikacije na drugi jezik.

Napravite vezu izmedu aplikacije i stvarnog svijeta

Page 10: Seminarski KS 1

Vaša aplikacija trebala bi uvijek koristiti korisnikov jezik, rijeci, recenice i koncepte koji su poznati korisniku. Isto tako pojmovi koje koristite trebaju biti vezani uz korisnikovo shvacanje zadataka koje mora izvršiti koristeci vašu aplikaciju npr. u medicini papirnata omotnica koja sadrži informacije o pacijentu naziva se karton. Dakle medicinska aplikacija bi mogla koristiti naziv pacijentov karton umjesto korištenja naziva pacijentov zapis u bazi podataka.

Cesto možete iskoristiti korisnikovo poznavanje stvari u stvarnom svijetu upotrebom metafora npr. korištenjem poznatog koncepta koša za smece kako bi predstavili ideju brisanja datoteka. Naravno pri korištenju metafora potrebno je paziti da ne shvatit metaforu previše doslovno ili da previše proširite njezinu upotrebu preko njezine logicne upotrebe. Konkretno u nekim operativnim sustavima povlacenje ikone CD ROM diska u koš za smece izaziva izbacivanje ladice CD ROM-a.

Aplikacija treba biti dosljedna

Vaša aplikacija trebala bi biti dosljedna sa sobom kao i sa drugim aplikacijama kako u sucelju tako i u odnosu prema korisniku. Ovo je jedan od najcešcih i najvažnijih nacela dizajna, ali nažalost i jedan od najcešce zloupotrebljavanih principa. Svrha dosljednog odnosa prema korisniku je da mu se pruži prilika da primjeni svoje postojece razumijevanje rada sa racunalom i drugim aplikacijama. Time se skracuje vrijeme privikavanja na novu aplikaciju i stvara osjecaj ugodnosti

Korisnici trebaju znati što se dešava

Vaša aplikacija mora se pobrinuti da korisnik zna što se zbiva kroz prikladne povratne informacije. Korisnik ne smije nagadati o statusu aplikacije u bilo kojem trenutku. Cim korisnik izvede operaciju aplikacija bi trebala prijaviti da je primila korisnikov unos te da radi s njim. Feedback može biti vizualni, audio ili oba npr. promjene oblika kursorom, animirani indikatori toka, Beepovi ili poruke o greškama. Poruke o greškama trebaju koristiti jednostavan jezik , jasno iznijeti problem i ponuditi moguca rješenja ukoliko je moguce.

Aplikacija treba biti jednostavna

Aplikacija treba korisniku omoguciti da što jednostavnije obavi ono što treba, ništa više niti manje. Zato vaša aplikacija treba prikazivati samo korisne i relevantne informacije. Svaka dodatna informacija troši korisnikovu pozornost sa važnim informacijama. Dakle ne preopterecujte vaše sucelje sa pretjeranom kolicinom

Page 11: Seminarski KS 1

nevažnih elemenata. Konacno bitno je da vaše sucelje bude estetski adekvatno napravljeno. Loše organizirano sucelje sa malim brojem elemenata može biti jednako loše kao i dobro organizirano sucelje sa prevelikom kolicinom informacija.

Korisnik treba imati kontrolu

Racunala postoje kako bi služila ljudima. Korisnik mora uvijek imati osjecaj kontrole nad racunalom. Ovo se osobito odnosi nad aplikacije koje znatno naprežu resurse racunala. Korisnik bi u bilo kojem trenutku trebao biti u mogucnosti prebacivati se izmedu razlicitih aplikacija. Takoder korisnik bi trebao biti u mogucnosti podešavati aplikaciju prema svojim osobnim potrebama, naravno i ovdje je bitno ne pretjerivati sa prevelikom slobodom prilagodbe.

Korisniku treba oprostiti grešku

Svi cinimo pogreške. Gdjegod je moguce korisnik bi trebao biti u mogucnosti jednostavno i lako da poništi svoje greške u radu s aplikacijom npr. korištenjem undo komande. U nekim slucajevima kad bi potencijalna akcija mogla biti opasna i ne postoji nacin za poništavanje ucinka komande, sucelje bi trebalo upozoriti korisnika i upitati ga za potvrdu komande. Ova vrsta potvrde može biti poprilicno iritantna za korisnika, do te mjere da ih korisnik pocne ignorirati, pa ju je poželjno koristiti samo u najekstremnijim slucajevima.

Pravila dobrog dizajna ikona Standardne ikone

Perspektiva i osvjetljenje

Traka sa ikonama i ikone na meniju bi trebale imate perspektivu postavljenu tako da ih promatramo od naprijed tj. kao da su ispred korisnika u visini ociju. Ovakva perspektiva daje traci sa ikonama plošni izgled. Osvjetljenje ukoliko je uopce potrebno trebalo bi dolaziti iz tocke iznad korisnikove glave bacajuci malu sjenku prema dolje.

Oblik

Page 12: Seminarski KS 1

Pobrinite se da ikone na traci sa ikonama lako medusobno razlikuju. Pokušajte promatrati siluetu vaše trake sa alatima i provjerite da su ikone koje koristite na njoj vizualno dovoljno razlicite.

Silueta trake sa

ikonama

Velicina

Ikona na traci sa ikonama trebala bi biti dimenzija 24x24 pixela, dok bi ikone na izborniku trebale biti 16x16 pixela.

Primjer ikona sa trake i ikone

sa menija

Ukoliko se bavite dizajnom aplikacija cesto cete sami dizajnirati ikone za trake. Upotrebljavajuci postojece ikone ne samo da smanjujete kolicinu posla vec uspostavljate konzistentan "jezik ikona" na koji se korisnici vaših aplikacija privikavaju. Ipak i ovdje treba paziti što stavljate na traku sa alatima da ne zbunite korisnika.

Ikone za aplikacije

Perspektiva i osvjetljenje

Ikone u aplikaciji trebale bi imati perspektivu kao da su postavljene na stol ispred korisnika. Svijetlo bi trebalo dolaziti iz gornjeg lijevog ugla, bacajuci sjenu na vrh imaginarnog stola.

Oblik

Ikone u aplikaciji trebale bi biti raznolikog oblika prije nego pravokutne ili kvadraticne kako bi bile vizualno što privlacnije.

Velicina

Ikone u aplikaciji trebale bi biti dimenzija 48x48 pixela, no provjerite i raspoznatljivost u manjim velicinama kako bi osigurali skalabilnost.

Primjer ikone za instalaciju aplikacije

Page 13: Seminarski KS 1

Ikone dokumenata

Perspektiva i osvjetljenje

Ikone dokumenata trebale bi imati perspektivu kao da su postavljene na stol ispred korisnika. Svijetlo bi trebalo dolaziti iz gornjeg lijevog ugla bacajuci sjenu na imaginarni stol.

Oblik

Ikone dokumenata nemaju nikakve specificne zahtjeve spram oblika. Kad dokument odgovara odredenoj aplikaciji, jedna mogucnost je da koristite kombinaciju papira i ikone aplikacije. Bolje rješenje je da direktno ikonom opišete tip dokumenta npr. ikona filmskog projektora za MPEG video format.

Velicina

Ikone dokumenata bi po mogucnosti trebale biti napravljene u barem tri velicine 24x24, 48x48 i 96x96 pixela.

Ikone imaju puno primjena. One mogu pomoci korisniku da analizira veliki broj objekata kako bi brzo pronašao traženi objekt. Osobito nakon što se korisnik priviknuo na odredeni izgled ikone tada ju nalazi lakše nego što bi pronašao njezin tekstualni naziv. Ikone mogu nadopuniti tekst npr. u izbornicima ili pružajuci vizualnu sugestiju za namjenu nekog objekta. Ikone pružaju kompaktno predstavljanje velikog broja funkcija osobito kada ja prostor oskudan. Ovo je osobito vidljivo u primjeni traka sa ikonama (toolbar).

Ikone bi trebale graficki biti visokog kontrasta i razlicite. NAPOMENA: Ponekad je dizajn ikona lakše zapoceti u jednom tonu, te dodavati boju kad ste zadovoljni sa dizajnom. Na ovaj nacin izbjegavate da ikone ovise o boji, što je bitno za korisnike koji imaju ogranicene mogucnosti prikaza boje ili možda slabije percipiraju neke boje.

Tipovi ikona

Ukoliko je moguce pri dizajnu ikona preporuca se korištenje funkcionalno sugestivnih ikona, ukoliko to nije moguce preporuca se korištenje ikona sugestivnih imenom, tek ukoliko ni to nije moguce koristite tekstualne ikone i druge ocajnicke alternative.

Funkcionalno sugestivne ikone

Page 14: Seminarski KS 1

Ikone bi ukoliko je to moguce trebale biti sugestivne prema funkcijama uz koje se vezuju. Najbolja ikona ce sugerirati korisniku njezinu primarnu svrhu bez potrebe za dodatnim opisom. Korisnici raspoznaju znacenje funkcionalno sugestivnih ikona brže od ostalih tipova ikona pošto njih direktno mogu asocirati uz odredeni objekt ili akciju.

Funkcionalno sugestivna ikona za tekst procesor

Funkcionalno sugestivna ikona za

funkciju podvlacenja

Ikone sa sugestivnim imenom

Neke ikone kao što je ikona Nautilusa ne sugeriraju funkciju programa, vec umjesto toga sugeriraju ime programa. Ovo je manje poželjno od funkcionalno sugestivnih ikona, pošto se dodaje dodatni stupanj apstrakcije (umjesto asociranja funkcije upravljanja sa datotekama, predstavlja se naziv aplikacije koja to obavlja sa slikom nautilusove školjke. Dodatna je poteškoca korisnicima koji ne poznaju naziv prikazane školjke ili naziv same aplikacije.

Imenom sugestivna ikona "Nautilus"

Tekstualne ikone

Ikone koje sadrže tekst naziva programa u sebi nazivamo tekstualnim ikonama. One ustvari ne sadrže nikakvu metaforu ili sliku koju bi korisnik mogao povezati sa namjenom te su zapravo teže za citanje od popratnog naziva. Obzirom da ikone privlace pogled korisnika ikona koju je teško prepoznati je potencijalno gora od nedostatka ikone. Dodatna poteškoca kod ikona sa tekstom je da ih je teško lokalizirati za neko drugo tržište obzirom da ovise o jeziku. Ukoliko vec morate koristiti tekst na ikoni pokušajte da ne koristite rijeci koje su teško prevodive na druge jezike.

Tekstualna ikona za Gedit tekstualni editor

Page 15: Seminarski KS 1

Slucajne ikone

Slucajne ikone nemaju nikakvu asocijaciju sa programom (izuzev možda neku cudnu vezu u glavi dizajnera). Ovakve ikone ne treba nikad koristiti, a ukoliko ih koristite najvjerojatnije ce samo zbunjivati i obeshrabriti korisnika. Uloga ikone nije da izgleda lijepo, ovo je ustvari samo vrlo poželjna osobina. Logo tvrtke Sodipodi je vjeverica koju koriste kao njihovu ikonu. Medutim pošto njihov logo nema nikakvu ocitu vezu sa korisnikom vjeverica predstavlja lošu ikonu. Pri oblikovanju ikone pobrinite se da ne koristite informacije koje korisnik ne zna.

Slucajna ikona za SodiPodi

Problemi sa ikonama

Preopterecenje sucelja

Zapamtite da je ekran racunala glavno radno podrucje za korisnika, to nije mjesto natjecanja za korisnikovu pažnju. Kada aplikacije neprikladno koriste standardne elemente Windows sucelja kao što je Start meni, desktop ili trake sa ikonama to postaje neprikladno korisniku i smanjuje korisnikovu produktivnost. Desktop je još jedno podrucje gdje vrijedi manje je više. Uz izuzetak vrlo važnih ikona opce primjene izbjegavajte kreiranje ikona na desktopu. Testovi korisnosti stalno pokazuju da korisnici smatraju desktop svojim podrucjem i negativno reagiraju na neocekivanu pojavu ikona na desktopu. Kad smo to razjasnili preporuka je da korisniku pružite opciju postavljanja ikone vaše aplikacije na desktop (zlatno pravilo racunalnog dizajna je: Prebacite odluku na korisnika.).

Preopterecenje informacijama

Ikone ce cesto biti prikazane u manjem formatu nego što ste predvidjeli. Previše informacija na ikoni cini ju necitkom, osobito kad se prikazuje u manjem formatu. Isto tako previše informacija na ikoni zbunjuje korisnika.

Primjerice u testovima korisnika za Evolution ikonu vecina korisnika je pretpostavila da ona pokrece tekst procesor. Zbunilo ih je pojavljivanje olovke i papira, koje se može smatrati dodatnom. ali i nepotrebnom informacijom obzirom da se implicitno može pretpostaviti da ce vam E-mail aplikacija pružati mogucnost pisanja poruka. Kvalitetnija ikona bi bila jednostavna omotnica. Primarno bi

Page 16: Seminarski KS 1

na umu dizajnera trebala biti jednostavnost i minimalna kolicina elemenata potrebna da se izrazi funkcija programa.

Preopterecenje ikone informacijama - ikona Evolution

Gnumeric ikona je izvrsna ikona izuzev dodatka vizualnog šuma u obliku dodatnog papira sa slovom g u pozadini. Taj dodatak ne pruža nikakvu dodatnu vrijednost ikoni, ali zato dodaje vizualnu distrakciju. U ovom je slucaju ucinak dodavanja ikoni uglavnom negativan, iako neznatno. Oduzimanjem tog dodatnog papira dobijemo jednostavniju ikonu te puno više prostora za uvecati postojeca dva vizualna elementa.

Dobar primjer višestruke informacije - ikona tablicnog kalkulatora

Korištenje dijelova tijela

Ukoliko planirate da se vaša aplikacija koristi drugdje u svijetu, potrebno je izbjegavati simboliku koja je potencijalno uvredljiva drugim kulturama. Najbrojniji uzroci uvredljive simbolike je korištenje razlicitih dijelova tijela. Osim uvredljivih gesta sa prstima ili rukama, dijelovi tijela koji se smatraju pristojnim u jednoj kulturi npr. oci smatrat ce se neukusnim ili nepristojnim drugim kulturama. Najcešce se dijelovi tijela koriste kao ispomoc lošim metaforama tako što pokazuju na odredeni dio ikone ili sugeriraju da korisnik nešto koristi tako da ih je uglavnom jednostavno ukloniti pravim izborom metafore. Korisnici ionako ikonu razumijevaju u odnosu prema njima npr. korisnik koji vidi ikonu neke alatke shvatiti ce to kao da on koristi tu alatku tako da je cesto nepotrebno takav odnos dodatno pojašnjavati. Primjer nepotrebnog korištenja dijelova tijela je ikona za odabir fonta koja se može popraviti jednostavnim uklanjanjem prsta i koncentriranjem metafore na odabir fonta..

Korištenje dijelova tijela - ikona za odabir fonta

Korištenje dijelova tijela - bolja verzija ikone za

odabir fonta

Ikone temeljene na igrama rijeci

Page 17: Seminarski KS 1

Igre rijecima treba izbjegavati po svaku cijenu iz više razloga. Jedan od ocitih razloga je da ih je nemoguce prevoditi npr. ikona koje predstavlja komad drveta (engl. log) koristi se kako bi predstavili dnevnik (takoder engl. logbook) sustava. Naravno ovo ikona ne znaci ništa nekome tko ne govori engleski. Dodatno vecina korisnika ne shvaca igre rijecima sve dok nije prekasno da bi im ikona pomogla, a i kad shvate takva asocijacija im ne pomaže u brzom ponovnom pronalaženju ikone obzirom da se moraju ponovno prisjetiti o kakvoj se igri rijeci radilo. Jedna od popularnijih ikona sredinom 90ih koja prikazuje taj problem je ikona paukove mreže koja je dugo korištena da predstavi pojam Interneta odn. World Wide Weba (engl. web znaci mreža).

Ikona temeljena na igri rijeci - ikona za

System log

Nasilne ikone

Kao što rijeci ubij ili uništi nisu prikladne u suceljima, ikone koje sadrže destruktivnu simboliku treba izbjegavati. "Shut down" ikona za gašenje operativnog sustava koristi prikaz detonatora eksplozivne naprave, vjerojatno u pokušaju da prenese ideju naglog završetka rada. Medutim ova ikona ce vrlo vjerojatno uplašiti mnoge korisnike koji ce ju izbjegavati iz straha od uništenja ili kvara nekog dijela sustava.

Destruktivna ikona - za gašenje operativnog sustava

Ovo su samo neka od pravila dobrog dizajna ikona. S vremenom razviti cete vlastiti stil dizajniranja ikona i vecinu ovih pravila primjenjivati cete bez razmišljanja.

Dizajn trake sa ikonama (toolbar-a)

Traka sa ikonama sadrži skup ikona sa cestim funkcijama kojima želimo olakšati pristup. Vecina traka sa ikonama sadrže iskljucivo

Page 18: Seminarski KS 1

ikone, no složenije aplikacije isto tako na trakama sadrže druge tipove kontrola (liste, dropdown kontrole itd...). Kvalitetan dizajn trake sa ikonama ubrzava korisnikov rad dajuci mu direktan pristup funkcijama koje bi inace bile skrivene unutar menija. Ipak potrebno je napomenuti da se na trake sa alatima stavljaju samo najvažnije funkcije. Isto tako prevelik broj traka sa ikonama smanjuje efikasnost i kolicinu prostora na ekranu.

Primjer tri trake sa ikonama koje koristi e-mail aplikacija, web preglednik i editor teksta.

Izgled i sadržaj

Efikasnost traka sa ikonama se povecava ukoliko održavamo njihovu konzistentnost izmedu razlicitih aplikacija. Traka sa ikonama je prva stvar koju ce korisnik ugledati pri pokretanju aplikacije, tako da ukoliko mu je traka sa ikonama vec poznata to mu odmah pruža dodatan osjecaj sigurnosti u korištenju aplikacije. Pri dizajniranju traka sa ikonama pratite ovdje navedena pravila i slijedite primjere vec postojecih kvalitetno dizajniranih aplikacija. Nacelno bi trebala postojati jedna glavna traka sa ikonama koja pruža pristup opcim funkcijama u aplikaciji. Velik broj ikona na ovoj traci ce biti isti na gotovo svim aplikacijama.

Primjerice glavna traka sa ikonama u uredskoj aplikaciji trebala bi gotovo uvijek sadržavati New, Open i Save as kao prve tri ikone na traci. Slicno tome prve ikone u web pretraživacu trebale bi biti ekvivalenti Back, Forward, Stop i Reload funkcija u tom redoslijedu.

Preporuke:

• postavljajte samo najcešce korištene funkcije aplikacije na traku sa ikonama. Nemojte samo dodavati ikone za svaku funkciju

Page 19: Seminarski KS 1

• Standardno bi se vaša traka sa ikonama trebala nalaziti ispod glavnog menija.

• Dopustite korisniku opciju uklanjanja traka sa ikonama. • Sve funkcije koje su na traci sa ikonama moraju biti dostupne

i preko menija. • Ikone na traci slažite istim redoslijedom kao i njihove

ekvivalente na menijima. Posebice grupirajte skupine ikona koje se medusobno iskljucuju npr. zoom in i zoom out ili cut i paste

• Ne stavljajte ikone sa Help ili Quit funkcijama pošto se one rijetko koriste i prostor je bolje iskoristiti korisnijim funkcijama.

• Pružite dodatne mogucnosti prikaza ikona na traci kao samo ikone, samo tekst ili ikone sa tekstualnim opisom.

• Dopustite korisnicima mogucnost konfiguracije trake sa ikonama u bilo kojem redoslijedu koji korisniku odgovara

• Pohranite konfiguraciju trake sa ikonama zajedno sa drugim postavkama vaše aplikacije tako da je i nakon reinstalacije aplikacije moguce koristiti iste postavke.

Upravljanje trakom sa ikonama

Za svaku traku sa ikonama u vašoj aplikaciji korisnik bi trebao moci odabrati dali ju želi prikazati ili ne, kao i na koji nacin ju želi prikazati (samo ikone, samo tekst ili ikone sa tekstualnim opisom).

Preporuke:

• Omogucite korisniku promjenu standardnih postavki trake sa ikonama odn. mogucnost konfiguriranja trake sa ikonama osobito:

o mogucnost odvojenog uklanjanja prikaza pojedinih traka sa ikonama

o odvojeni odabir nacina prikaza za svaku od traka o mogucnost povratka na standardne postavke za sve

trake • Ukoliko je moguce korisniku pružite mogucnost vizualnog drag

and drop konfiguriranja traka sa ikonama npr. mogucnost da mišem rucno premjesti pojedine ikone na traci ili mogucnost da sa menija povuce pojedine funkcije na traku sa ikonama.

Nazivi ikona

Velik broj ikona koje ce biti na traci sa ikonama zahtijevati ce tekstualni opis ispod ili pored ikone. Ovo bi uglavnom trebala biti jedna rijec koja opisuje funkciju koju vrši spomenuta ikona.

Page 20: Seminarski KS 1

Svaka ikona na traci trebala bi imati oblacic sa dodatnim pojašnjenjem funkcije (tooltip) te ikone bez obzira dali ikona ima tekstualni opis pored nje.

Preporuke:

• Ukoliko je traka sa ikonama postavljena da prikazuje nazive ispod ikone, prikažite nazive za svaku ikonu npr.

Primjer trake sa ikonama uz nazive ispod svih ikona

• Ukoliko je vaša traka sa ikonama konfigurirana da prikazuje nazive pored ikone, nemojte prikazivati nazive za svaku ikonu, vec samo za one najbitnije te dodajte separatore izmedu njih obzirom da uz ovakav nacin prikaza necete imati dovoljno mjesta na traci za sve nazive.

Primjer trake sa ikonama uz nazive pored važnijih ikona

• Pobrinite se da sve ikone imaju opis u oblacicu koji se javlja svaki put kad se pokazivac zaustavi duže iznad pojedine ikone. Za ikone koje imaju ekvivalente u menijima neka opis u oblacicu bude jednak onom na meniju.

• Za nazive i opise ikona na traci uvijek ucinite prvo slovo velikim, ovo pomaže kod razlikovanja ikona.

Standardizacija ikona Obzirom da su danas ikone postale kljucni djelic u ogromnoj industriji pojavila se potreba za uvodenjem standarda i u ovom podrucju. Problem standardizacije ikona je što one za korisnika predstavljaju svojevrstan jezik kojim komuniciraju sa aplikacijama i racunalom, tako da je za razlicita podrucja primjene potrebno koristiti potpuno razlicite rjecnike. Analogija sa jezikom je primjenjiva i sa strane velikih društvenih razlika u razumijevanju pojedinih simbola u

Page 21: Seminarski KS 1

razlicitim kulturama. Dodatno je situacija pogoršana kreiranjem proizvodackih ikona koje su u masovnoj upotrebi usprkos svojoj neupotrebljivosti i odstupanju od opcih nacela dizajna. Takvi proizvodacki "standardi" namecu se u upotrebi uglavnom širokom korisnickom bazom svojih proizvoda. Takav loš primjer predstavljaju ikone u operativnim sustavima Windows.

Moj zakljucak je da smo što se standardizacije ikona tice sve dalje od nekog opceg standarda, medutim u nekim podrucjima primjene standardizacija postaje nužna, pa se postupno i primjenjuje. Dobar primjer ovakve standardizacije je naveden standard ikona za primjenu u bibligrafskim bazama podataka.

ISO/IEC 11581 standard

Standard za funkcije simbola i ikona u korisnickim suceljima.

ISO/IEC 11581 primjenjuje se na uredske aplikacije applies za proizvodnju dokumenata, tisak i prijelom, financije itd. ISO/IEC 11581 odnosi se na proizvode za ljude koji su upuceni na uredski rad no trenutno nisu nužno upoznati sa radom na racunalu. ISO/IEC 11581 trebao bi služiti osobama koje su ukljucene u dizajn, implementaciju i procjenu ikona za graficka korisnicka sucelja na racunalnim aplikacijama.

Ovdje navodim dijelove odn. poglavlja ukljucena u standard ISO/IEC 11581:

1. Ikone - Opcenito 2. Ikone objekata 3. Pokazivaci 4. Kontrolne ikone 5. Ikone alata 6. Akcijske ikone

Ovdje možete skinuti PDF datoteku sa specifikacijom ISO/IEC 11581 standarda

ISO/IEC 13251 standard

Medunarodni standard koji skuplja u jednom dokumentu kolekciju postojecih simbola. Preko 370 simbola je ukljuceno u ISO/IEC 13251 standard, simboli su skupljeni iz izvora kao što su:

Page 22: Seminarski KS 1

• ISO/IEC 9995-7: 1994, Informacijska tehnologija - opisi izgleda tipkovnica za uredske sustave - opisuje simbole koji se koriste za opis funkcija u uredskim sustavima.

• ISO 7000: 1989, Graficki simboli za korištenje na uredskoj opremi - Indeks i sinopsis postojecih simbola

• ITU-T E121: 1996, Piktogrami i simboli za pomoc korisnicima telefonskih usluga

• ISO/IEC 6329: 1989, Duplikatori i kopirni uredaji - korišteni simboli (standard ce uskoro biti povucen)

• ISO 4062: 1977, Oprema za snimanje - korišteni simboli (standard ce uskoro biti povucen)

Konacni prijedlog medunarodnog standarda ili Final Draft International Standard (FDIS) za ISO/IEC 13251 je dovršen od strane ISO/IEC JTC 1/SC 35/WG 3 i uskoro ide na medunarodno izglasavanje.

ISO/IEC 18035 standard

Ovaj medunarodni standard ce definirati konzistentan set ikona za popratne funkcije multimedijalnih aplikacija na racunalnom ekranu. Ove kontrolne ikone tipicno predstavljaju akciju po asocijaciji sa konvencionalnim kontrolama na uredajima za reprodukciju razlicitih sadržaja (npr. video i CD uredaji).

Standard ce pružiti konzistentan skup kontrola za akcije kao: Play, Pause/Resume, Stop, Record, Skip back, Rewind, Fast forward, Skip forward, Preview, Volume control, Pan i Zoom. Ovaj standard bi trebao biti dodatak drugom dijelu ISO 14915 standarda koji opisuje ergonomiju softvera za multimedijlna sucelja.

ISO/IEC 18036 standard

Ovaj medunarodni standard ce definirati konzistentan skup ikona za popratne funkcije Web preglednika na racunalnim ekranima. Ove ikone obicno predstavljaju funkcije i akcije preko asocijacije sa objektima u stvarnosti.

Standard bi trebao pružiti konzistentan skup kontrola za funkcije kao što su: Back, Forward, Stop, Refresh/Reload, Home, Search, Favourites/Bookmarks, Guide, Print, Security, Download i History.

Prvi prijedlog radne skupine ili Committee Draft (CD) nije prihvacen. Drugi prijedlog ce biti uskoro pripremljen i dan na glasanje.

Page 23: Seminarski KS 1

Standardni skup ikona za primjenu u bibliografskim bazama podataka

Ovdje je naveden predloženi skup ikona za upotrebu u bibliografskim bazama podataka. Ove ikone su u javnom vlasništvu tako da su slobodne za korištenje za sve. Ukoliko želite ikone možete downloadati na ovom linku.

Kategorija : Akcije

Ikona Znacenje

Home - Kuci Povratak na glavnu stranicu ili ekran

Menu - Izbornik Prikaz glavnog izbornika

Change Language - Promjena jezika Promjena korištenog jezika (jezik predstavlja zastava unutar balona)

Information - Informacije Prikaz informacija o sustavu

Help - Pomoc Pomoc nad trenutnim zadatkom

Find - Traži Pretraživanje odredenog skupa dokumenata

Browse - Pregled Pregled odredenog indexa

Thesaurus - Rijecnik sinonima Prikaz rjecnika istoznacnih rijeci

Limit - Ogranicenje Ogranicava broj vracenih rezultata pretraživanja

Location - Lokacija Prikazuje informaciju o lokaciji traženog sadržaja (URL ili broj police)

Move to first record - Skoci na prvi zapis Pomice korisnika na prvi zapis u trenutnom skupu zapisa

Page 24: Seminarski KS 1

Move to last record - Skoci na zadnji zapis Pomice korisnika na zadnji zapis u trenutnom skupu zapisa

Forward - Naprijed Pomice korisnika na sljedeci zapis u trenutnom skupu zapisa

Back - Nazad Pomice korisnika na prethodni zapis u trenutnom skupu zapisa

Fast Forward - Preskoci unaprijed Preskace odredeni broj zapisa naprijed u trenutnom skupu zapisa

Fast Reverse - Preskoci unazad Preskace odredeni broj zapisa unazad u trenutnom skupu zapisa

Clear - Obriši Obriši trenutne informacije

Expand Display - Povecaj prikaz Proširuje trenutni prikaz npr. prikaz na cijelom ekranu

Contract Display - Smanji prikaz Smanjuje trenutni prikaz

Brief List - Kratka lista Prikaz kratke liste rezultata pretraživanja

Full record - Cjeli zapis Prikaz cjelokupnog zapisa o odredenom sadržaju

Show - Prikaži Prikazuje npr. rezultate pretrage obzirom da ih neki sustavi ne prikazuju odmah

Print - Ispiši Ispisuje trenutni prikaz na štampacu

Save - Pohrani Pohranjuje podatke na medij

Kategorija : Polja

Ikona Znacenje

Page 25: Seminarski KS 1

Author Autor

Bibliographic Database Bibliografska baza podataka

Citation / Journal Reference Citat / Referenca

ISBN International Standard Book Number

ISSN International Standard Serial Number

Keyword Kljucna rijec ili rijec za pretraživanje

Subject Tema

Title Naslov

Year Godina izdavanja

Kategorija : Operatori

Ikona Znacenje

Greater than Veci od

Less than Manji od

Less than or Equal to Manji ili jednak

Greater than or Equal to Veci ili jednak

Equal to Jednak

Page 26: Seminarski KS 1

NOT equal to Nije jednak

AND Logicki operator I

OR Logicki operator ILI

NOT Logicki operator negacije

Projekt standardizacije sucelja za rad sa bazama podataka je program u sklopu IFLA Section on Information Tech nology.

Dizajn ikona za operativni sustav Windows XP

U ovom dijelu pokušat cu ukratko prikazati proces dizajna i izrade ikona koje su namijenjene Windows XP operativnom sustavu odn. konzistentne su s novim suceljem ovog operativnog sustava.

Osnovne karakteristike Windows XP ikona

1. Bogate boje komplementarne sa izgledom Windows XP sucelja.

2. Kut i perspektiva su dinamicni tako da ikone izgledaju energicnije.

3. Rubovi i kutovi elemenata na ikoni su meki i blago zaobljeni. 4. Izvor svjetla dolazi iz gornjeg lijevog ugla uz dodatak

ambijentalnog svijetla koje osvjetljava druge dijelove ikone. 5. Upotreba gradijenta pruža osjecaj dimenzije i obogacuje

izgled ikone. 6. Bacena sjena daje kontrast i dimenzije ikoni. 7. Rubovi daju dodatnu jasnocu. 8. Svakodnevni predmeti imaju moderniji izgled npr. racunalo

Velicine ikona

Postoje 4 velicine Windows ikona 48x48, 32x32, 24x24 i 16x16 pixela.

Preporuka je da ikona sadrži ove 3 velicine: 48x48, 32x32 i 16x16 pixela.

Page 27: Seminarski KS 1

Ikone na desnoj strani Start menija su velicine 24x24 pa ovu velicinu nije nužno ukljuciti.

Ukoliko dizajnirate ikone za traku sa alatima odn. toolbar, standardne velicine su 24x24 i 16x16 pixela.

Dubina boja ikona

Windows XP podržava 32-bitne ikone koje su 24-bitne slike sa 8-bitnim alpha kanalom. Ovo omogucava prikaz sa mekanim rubovima koji se stapaju u bilo koju pozadinu.

Svaka Windows XP ikona trebala bi sadržavati ove 3 dubine boje kako bi bile podržane razliciti nacini prikaza na ekranu:

• 24-bit sa 8-bit alpha kanalom (32-bit) • 8-bit (256 boja) sa 1-bitnom transparencijom • 4-bit (16 boja) sa 1-bitnom transparencijom

Kut i grupiranje objekata

Page 28: Seminarski KS 1

Ovo je perspektivna projekcija koju koriste Windows XP ikone:

No svih objekti ne izgledaju dobro prikazani pod tim uglom u 16x16 dimenzijama pa se sljedeci objekti obicno prikazuju ravno:

1. Ikone dokumenata. 2. Ikone koje su simboli npr. upozorenja ili informacije. 3. Ikone koje nisu prepoznatljive pod tim uglom npr.

povecalo.

Ukoliko vaša ikona sadrži objekte koji se preklapaju, trebate i njih postaviti pod kutom uz izuzetke vec navedenih objekata koji neprikladno izgledaju prikazani pod uglom. Isto tako razmotrite kako ce vaše ikone izgledati kao skup te prema tome odlucite kako grupirati objekte na njima.

Sjene na ikonama

Windows XP ikone koriste efekt sjena kako bi pružili dodatnu dimenziju. Efekt se dodaje u Photoshopu kao Drop Shadow efekt nakon što ste u Photoshopu selektirali layer slike. Parametri su:

angle: 135 distance: 2

Page 29: Seminarski KS 1

size: 2 boja: black opacity: 75%

Postupak dizajna ikona za Windows XP

Korak 1. Koncept

Pri dizajnu novih ikona preporuca se skiciranje ideja na papir.

Ovdje se vidi primjer inicijalnog dizajna Windows XP ikone za My Pictures folder.

Napomene i savjeti za dizajn ikona:

1. Koristite vec utvrdene koncepte gdje je to moguce kako bi osigurali konzistentno znacenje ikone za korisnika tj. ne otkrivajte toplu vodu.

2. Razmotrite kako ce ikona izgledati u kontekstu vašeg korisnickog sucelja odn. kako ce funkcionirati sa drugim ikonama.

3. Razmotrite kulturne aspekte djelovanja ikone. U razlicitim kulturama javljaju se razna tumacenja simbola. Dobro pravilo je izbjegavati korištenje slova, rijeci, ruku ili lica na ikonama. Ljude pokušajte na ikonama dizajnirati što opcenitije.

4. Kad je ikona nešto složenija npr. kombinirana od više objekata, razmislite kako ce slika izgledati u manjim velicinama. Ukoliko je moguce ne koristite više od tri objekta po ikoni. Za velicinu 16x16 razmotrite mogucnost pojednostavljivanja ikone kako bi bila što prepoznatljiva.

Napomena: Samo ikone koje Microsoft distribuira sa svojim proizvodima smiju koristiti Windows logo sa zastavom. Ne koristite ga u svojim ikonama ili ...

Page 30: Seminarski KS 1

Najcešce ikone :

Najcešce ikone na toolbar-ovima :

Korak 2: Ilustracija

Za ilustraciju Windows XP ikona preporuka je da se koristi vektorski graficki alat npr. Freehand ili Illustrator. Pridržavajte se palete i karakteristika koje su navedene za Windows XP ikone.

1. Illustrirajte sliku koristeci Freehand ili Illustrator. 2. Napravite tri velicine slike, obzirom da ce se sjena dodavati

ikonama kasnije. Velicine bi trebale biti oko 46x46, 30x30 i 14x14 piksela.

Page 31: Seminarski KS 1

3. Prenesite (Copy/paste) vektorske slike u Photoshop.

Korak 3: Kreiranje 24-bitnih slika

Nakon što ste unijeli vektorske slike u Photoshop, sljedeci korak je da dovršite sliku.

1. Nakon što ste ubacili vaše 3 velicine u Photoshop, provjerite citljivost i rezoluciju vaših slika osobito na velicine 16x16. Ponekad je potrebno dorada ikona na nivou pixela. Ukoliko je 16x16 necitka moguce je pojednostavniti osnovni dizajn u Freehandu.

2. Dodajte drop shadow efekt vašim slikama dvostrukim klikom na sloj (layer) slike i odabirom opcije Drop Shadow. Nakon toga podesite kut na 135, udaljenost i velicinu na 2 te opacity na 75%.

3. Kako biste spojili drop shadow efekt i 24-bitne slike, kreirajte

novi prazan sloj te u Layers meniju, odaberite Merge Visible i tako spojite 3 postojeca sloja zajedno.

Page 32: Seminarski KS 1

4. Kreirajte 3 nove Phtotoshop datoteke, jednu za svaku

velicinu: 48x48, 32x32 i 16x16 pikela. Kopirajte i ubacite odgovarajuci dio glavne slike u otvorene. Ukoliko izgubite dio sjene na ikoni vratite se u Freehand i ponovite postupak.

5. Pohranite svaku datoteku kao .psd datoteku. Nikako nemojte stapati sliku sa Pozadina slojem.

Korak 4: Kreiranje 8-bitnih i 4-bitnih slika

Sada kada imate 24-bitne slike spremne da ih pretvorite u 32-bitne ikone, trebate napraviti 8-bitne verzije. 8-bitne ikone bit ce prikazane u svim nacinima prikaza koji su manje dubine od 32-bita.

8-bitne verzije nece imati 8-bit alfa kanal. Rubove ce im trebati ocistiti pošto nema anti-aliasinga tako da ce im rubovi biti nepravilni.

1. U Photoshopu, napravite kopiju vašeg 24-bitnog sloja slike i preimenujte sloj za 8-bitne slike.

2. Napravite novi prazan sloj i popunite ga sa tamnom bojom npr. plavom.

3. Spojite 8-bitni sloj slike sa novim slojem. 4. Pocistite rubove uklanjajuci anti-aliased piksele. Koristite

konzistentno stepenovanje ravnih rubova da se njihova nepravilnost što manje osjeti.

Page 33: Seminarski KS 1

5. Provjerite kao slika izgleda na svjetloj pozadini.

6. Napravite 3 nove Photoshop datoteke za svaku od velicina:

48x48, 32x32 i 16x16 piksela. Kopirajte i ubacite odgovarajuce velicine u datoteke.

7. Sljedece trebate napraviti indeks slika na 256 boja. 8-bitne ikone mogu imati višestruke palete boja.

1. Uzmite vašu 48x48 sliku i popunite pozadinsku boju sa nekom bojom koju ne koristite na slici. Windows XP ikone cesto koriste za to boju magenta (R255 G0 B255).

2. Idite na Image>Mode>Indexed Color i odaberite Flatten Layers.

3. U izborniku Palette, odaberite Custom. U Custom dijalogu, kliknite na OK. Kliknite na OK u Indexed Color dijalogu.

4. Pohranite datoteku sa ekstenzijom .psd 5. Pohranite druge dvije velicine koristeci istu boju

pozadine. 8. Pohranite svaku datoteku sa ekstenzijom .psd

Ukoliko želite da vaše ikone izgledaju dobro i na starijim verzijama Windowsa, napravite verzije ikona sa 16 boja.

1. Indeksirajte vaše 8-bitne slike na Windows paletu od 16 boja. 2. Ocistite vaše slike koristeci samo boje iz palette. 3. Koristite crni rub na donjem i desnom rubu slike. 4. Koristite tamno sivu ili tamnu boju ruba za lijevi i gornji rub

slike. 5. Pohranite tri velicine koristeci istu boju pozadine. Pobrinite se

da pozadinska boja nije na slici jer to ce biti transparentna boja.

Korak 5: Izrada .ico datoteka

Jednom kad ste napravili sve potrebne slike, vrijeme je da ih skupite u .ico datoteku. Da bi kreirali 32-bitne ikone, koristimo program Gif Movie Gear (GMG) koji možete skinuti sa stranica www.gamani.com/forikone.

Page 34: Seminarski KS 1

Ovi koraci vas vode kroz postupak kreiranja tipicne .ico datoteke koja sadrži 3 velicine ikona i 3 dubine boja.

1. Trebali biste imati ukupno 9 datoteka tj. 3 velicine po dubini: 48x48 na 24 bita 32x32 na 24 bita 16x16 at 24 bita 48x48 na 8 bita 32x32 na 8 bita 16x16 na 8 bita 48x48 na 4 bita 32x32 na 4 bita 16x16 na 4 bita

2. Otvorite Gif Movie Gear (GMG) i jednostavno povucite svaku od slika u prozor (ili koristite File>Insert Frames). Svaka slika ce postati jedan frame frame.

3. Kad povucete 24-bitne slike (ili bilo koju .psd datoteku sa više slojeva) u GMG pojaviti ce se sljedeci dijalog:

Provjerite da su postavke: Layers as multiple frames, No blending, i Keep background transparency ukljucene.

4. Pozadinski sloj svake od 24-bitnih slika ce se pojaviti kao frame. Uklonite ove suvišne frameove brišuci ih sa Delete tipkom.

5. Sada biste trebali imati ukupno 9 frameova. Ikone bi trebale biti poredane prema dubini boja i rezoluciji: prve tri su 4-bitne (16 boja), sljedece tri 8-bitne (256 boja), i posljednje tri su

Page 35: Seminarski KS 1

24-bitne sa 8-bitnim alfa kanalom (ukupno 32-bita).

6. Za 8-bitne i 4-bitne verzije, trebate naciniti pozadinu

prozirnom. GMG program koristi limun zelenu boju da bi predstavio nevidljivu boju iako ovu boju možete i sami promijeniti.

7. Da napravite 8-bitnu i 4-bitnu verziju ikona transparentnim: 1. Odaberite frame i kliknite na kapaljku na traci sa

alatima (Pick Transparency Color ikona).

2. Sa kapaljkom, kliknite na pozadinsku boju ikone. Ova

boja ce se promijeniti u limun zelenu (ili vec koju boju ste izabrali da predstavlja pozadinu).

3. Ponovite ovo za sve 4-bitne i 8-bitne frameove.

8. Pohranite ikonu. File>Save Icon As…

Kreiranje trake sa alatima (toolbar)

U Windowsima traka sa alatima sadrži ikone istog stila kao i druge osim što one ne koriste efekt bacanja sjene. Pošto su trake sa alatima relativno male velicine preporuka je da slike budu što jednostavnije. Ukoliko se pojednostavljuje izgled ikone možete dizajnirati bez perspektive.

Page 36: Seminarski KS 1

Windows traka sa alatima prikazuje 2velicine: 24x24 i 16x16 piksela. Pored toga postoje 2 stanja: default i hot (mouseover) stanje. Za hot state, blago povecamo nivo zasicenja boja (saturacije) slika.

Postupak kreiranja ikona za traku sa alatima je vrlo slican vec opisanim postupcima osim što se slike stavljaju u .bmp trake u osnovi ikone koje su poredane u jedan red.

1. Jednom kad ste ilustrirali ikone u Freehandu na svim velicinama prenesite ih u Photoshop. Stavite 24x24 bitne ikone na jedan sloj, a 16x16 bitne na drugi.

2. Nacrtajte jedan red kvadrata za svaku velicinu na odvojenom sloju. Dakle jedna red 16x16 kvadrata i drugi red 24x24 kvadrata.

3. Postavite svaku sliku u kvadrat po redu koji želite i provjerite

da se slike ne preklapaju.

4. Pohranite Photoshop datoteku. 5. Sljedece kreirate hot stanja ikona u Photoshopu.

1. Uzmite 24x24 i 16x16 slojeve i svaki od njih duplicirajte. Preimenujte nove slojeve tako da se vidi da su oni hot slojevi.

2. Za svaku hot verziju odaberite sloj i odaberite Slika>Adjust>Levels… te pomaknite središnju strelicu na 0.75. Kliknite na OK.

Page 37: Seminarski KS 1

6. Jednom kad ste kreirali hot slojeve, trebali biste imati 1 sloj po traci: 1 default 24x24, 1 hot 24x24, 1 default 16x16, i 1 hot 16x16.

7. Sljedece trebate svaku traku pohraniti u odvojenu datoteku. 1. Jedan nacin je korištenjem Crop alata kojim smanjite

sliku na dimenzije trake i zatim pohranite datoteku. 2. Svaku traku pohranite kao 24-bitnu .psd datoteku.

8. Kako bi pohranili traku u 32-bita, dovucite traku u GMG program. Uklonite prazne frameove. Kliknite na File>Export as>Filmstrip. Na Film Export dialogu, odaberite BMP/DIB i 24-bit with Alpha.

Nakon ovoga kratkog uputstva trebali bi imati osnovna znanja potrebna za izradu Windows XP ikona.

Testiranje funkcionalnosti ikona

U testiranje funkcionalnosti ikona razlikujemo dva postupka:

• Test intuitivnosti ikone - je test u kojem se ikona pokazuje maloj skupini korisnika (tipicno pet korisnika) bez naslova. Od korisnika se traži da iznesu svoje mišljenje oko toga što ikona predstavlja. Ovaj test procjenjuje stupanj uspjeha ikone da predstavi odredeni koncept.

• Standardni test korisnosti - je test u kojem se korisnicima predstavlja završeno sucelje i traži se od korisnika da razmišljaju naglas koristeci sucelje kako bi izveli zadane operacije. Ovaj test procjenjuje funkcionalnost ikone u kontekstu cjelovitog sucelja.

Inicijalna istraživanja provode se sa jednostavnim crno-bijelim skicama ikona na papiru. Za svaku ikonu razvija se nekoliko alternativnih koncepata od kojih se odabere onaj koji najviše obecava. Taj koncept se dalje razvija u ikonu u boji kroz iterativno ponavljanje koraka dizajna.

Page 38: Seminarski KS 1

Razvojni stupnjevi prijedloga za ikonu "Tehnologija i Razvoj"

Ove ikone trebale bi predstavljati koncept Tehnologije i Razvoja. Prve dvije ikone sa cipom i CD-ROM medijem su bile preteške za razumijevanje, osobito zato što su predstavljale više gotov proizvod nego ideju razvojnog postupka. Radnik koji kopa je dobra reprezentacija razvoja, no odbacen je zbog negativnih konotacija koje ovaj simbol ima u svojoj precestoj i nepotrebnoj upotrebi na WWW stranicama kao oznaka da su stranice "u razvoju" (što korisnici mrze vidjeti)

Drugi red ikona pokazuje sljedecu iteraciju pokušaja gdje je osoba korištena kako bi predocila ideju ljudi koji rade u razvoju (npr. programera). Prva ikona je bila najpopularnija, iako ona predstavlja hardverski više nego softverski aspekt razvoja. Isto tako mnogima se svida druga ikona koja sa munjom predstavlja koncept zauzdavanja snage.

Tako je za prvu ikonu odabrana kombinacija osobe odn. programera uz korištenje munje. Kroz testiranje korisnosti ikona se pokazala lošim izborom. Neki od problema su bili:

• munje asociraju na nesrecu • struja izgleda bolno • osobu ubija tehnologija • osoba izgleda kao da pleše

Page 39: Seminarski KS 1

• osoba na ikoni ima izbuljene oci

Ocito je da je trebalo ukloniti osobu sa ikone. Tako se na drugoj ikoni zadržala samo munja i zupcanici. Korisnici su se i dalje žalili da munja ima opet destruktivan izgled. Konacno je odluceno da se uklone sve reference na munju i elektricitet i u posljednjoj ikoni koncept razvoja predstavimo sa CD-ROM medijem. Zupcanici su se tijekom testiranja pokazali kao dobar nacin za predstavljanje tehnologije. Cesto zastarjela tehnologija može dobro funkcionirati kao stereotip koji prenosi koncept kroz ikonu.

Razvojni stupnjevi prijedloga za ikonu "Proizvodi i Rješenja"

Ikona racunala koji izlazi iz kutije je odbacen pošto je predstavljao samo hardverski element ne i softverski, kao ni ideju rješavanja problema krajnjih korisnika.

Nekim korisnicima se svidjela ikona sa osobom koja drži racunalo obzirom da prenosi ideju snage i sposobnosti. No ikona je bila pretrpana racunalima u zadnjem planu.

Ikonu sa guruom nitko od korisnika nije prihvatio, iako im se svidio koncept sa žaruljom. Neki korisnici su primijetili da je osoba koja drži racunalo u rukama ustvari muškarac. Ukratko je razmotrena mogucnost da se koriste i žena i muškarac no zbog kompleksnosti je odluceno izbaciti osobu iz ikone.

Kao što se može vidjeti sve verzije ikona u boji su bile u osnovi jednake od uvodenja koncepta racunala sa žaruljom koji je lako prepoznat od korisnika. Jedine promjene u ikonama su rezultirale od promjena u dizajnu web stranica kojima su ikone i namijenjene. Prvo su ikone nešto umanjene, a zatim su uredene da izgledaju više kao elementi sucelja.

Page 40: Seminarski KS 1

Razvojni stupnjevi prijedloga za ikonu "Sunova mreža"

U pocetku smo imali dvije razlicite ideje: server koji razgovara i medunarodna komunikacija. Vecina korisnika je uglavnom ikone koje su trebale predstavljati globus zamijenila sa nogometnom loptom. Nakon nekoliko propalih pokušaja shvatili smo da svijet mora biti okrugao.

Odbacili smo previše antropomorfne servere i u prvom kolor izdanju ikone u obzir uzeli metaforu servera koji poslužuje informaciju na pladnju. Nažalost korisnici su ovu ikonu interpretirali kao šešir isto tako interpretacija rijeci server eng. poslužitelj ne prolazi kao internacionalni koncept.

Nakon toga smo kombinirali ideju svijeta sa idejom balona tj. svijet koji nešto govori, no korisnicka interpretacija je bila probušeni balon. Sljedece dvije ikone su bile pokušaji nešto strožije ideje svijeta, no i one su bile krivo interpretirane od korisnika te su odbacene.

Konacna odabrana ikona je maksimalno pojednostavljena i funkcionalna.

Ikone i dizajn web stranica

Ovdje je dan prikaz postupka dizajna glavne web stranice za Sun World web portal. Unutar postupka razvoja same stranice lako je pratiti razvoj i promjene ikona odn. manjih grafickih elemenata.

Page 41: Seminarski KS 1

Ovakav postupak dizajna karakteristican je za ozbiljne narucitelje tj. velike tvrtke.

U samom postupku provedeno je preko 15 razlicitih promjena dizajna glavne stranice. Vecina tih prijedloga je bila ispitana od strane korisnika.

Kao što se da primijetiti dizajn ikona od pocetne do konacne verzije znatno se mijenja.

Prikaz važnijih modifikacija dizajna glavne stranice portala

Verzija A

Page 42: Seminarski KS 1

Ovo je bio prvi pokušaj izrade stranica koje bi bile u stilu novina. Nažalost korisnici nisu razumjeli da stranica predstavlja Sun-ove korporacijske stranice. Stranice su im slicile na Adobe-ove stranice i asocirale su ih na neovisne novine. Vecina korisnika je komentirala da su stranice vrlo natrpane i komplicirane te da im je otežano snalaženje na njima.

Iako je naziv mjeseca bio jasno istaknut, korisnici ga nisu primijetili tako da je jedna od glavnih prednosti dizajna u stilu novina, a to je ideja novih vremenski ovisnih informacija bila izgubljena. Nakon što je to korisnicima receno, pitali su se kako ce moci pristupiti sadržajima prošlih mjeseci. Kao rezultat toga dodana je mogucnost povratka na prethodne mjesece u daljnjem dizajnu.

Page 43: Seminarski KS 1

Korisnicima se svidio naziv "Entertainment for Propellerheads" (op.prev. "Zabava za štrebere") no odluceno je da ce biti uklonjen. Humor se cijeni u web dizajnu, no ne i na tako istaknutom mjestu. Korisnici su se takoder žalili na bombasticne fraze koje su korištene. Umjesto toga tražili su tehnicke specifikacije proizvoda i detaljne informacije.

Korisnici nisu razumjeli da mogu kliktati na glavni paragraf kako bi pristupili clanku i Adobe-u. Dizajn nije naglašavao mogucnost kliktanja.

Korisnicima se svidjela upotreba graduiranih boja u zaglavljima i konzistentna upotreba boja kroz sucelje. Neki korisnici komentirali su da snažna i pomalo gruba fotografija nije u skladu s korištenim bojama. Cinilo im se kao da postoje dva odvojena dizajna na stranici.

Verzija B

Page 44: Seminarski KS 1

Naziv mjeseca je sad nešto istaknutiji i bio je vidljiv i korisnicima. Isto tako su razumjeli da je "News and Commentary" dio klikabilan. Dodavanje plave oznake {MORE} glavnom paragrafu jasno je oznacilo da postoji još informacija.

Korisnici i dalje cesto nisu razumjeli namjenu stranice, cesto misleci da je to Adobe-ova stranica, a ne Sun-ova- Temeljem ovog opažanja odluceno je da Sun-ov logo bude istaknutiji u sljedecem dizajnu. Problem je u tome što clanak mjeseca cesto preuzima pozornost posjetitelja i dominira stranicom.

Korisnicima se opcenito svidio dizajn i osobito korištenje ljubicaste boje kao okvira stranice. Isto tako hvaljen je profesionalan i snažan izgled stranice. Korisnicima se svidjelo što stranica nije pretrpana mogucnostima i tekstom. Velik broj korisnika bio je izuzetno

Page 45: Seminarski KS 1

zadovoljan cinjenicom da je citava stranica vidljiva na jednom ekranu.

U usporedbi sa prvom verzijom neki problem su bili ispravljeni iako je mogucnost kliktanja na pojedine price i dalje bila umanjena.

Verzija C

Ova stranica je najrafiniraniji dizajn u seriji "SunWorld". Sun-ov logo je uvecan, medutim namjena stranice i dalje nije bila jasna korisnicima. U daljim verzijama predloženo je da se nastavi sa stranicom bez posebnog naziva kojom dominira Sun-ov logo i promjenjivi clanak mjeseca.

Verzija D

Page 46: Seminarski KS 1

Ovaj dizajn je ucinio Sun-ov logotip istaknutijim, cime je razrješio neke od problema korištenja stranice. Nažalost ovaj dizajn je korisnicima previše nalikovao na niz kutija bez osjecaja povezanosti izmedu njih. Sa druge strane dizajn je korisnike preplavio sa ikonama cime se krši osnovno pravilo da korisnik ne želi prevelik broj opcija pred sobom.

Razlicite vrste informacije su prikazana razlicitom grafikom no korištenjem istih ikona, cime se gubi prioritet pojedinih opcija.

Isto tak tijekom 1994 smatralo se dobrim stilom u dizajnu web stranica koristiti što više opcija obzirom da tada nije bilo dostupno puno sadržaja na samom web-u. 1995 to se promijenilo na taj nacin da se preferiralo isticanje važnijih opcija.

Verzija E

Page 47: Seminarski KS 1

Ovo je prvi dizajn koji je predložen nakon što je odlucen izbor clanka mjeseca za izlazak novog dizajna (Java tehnologija). Prethodni dizajn je ukljucivao clanak o PhotoShop-u na Sun-ovim radnim stanicama.

Za novi clanak o Javi potrebna je bila glavna ilustracija u nedostatku koje je izabrana maskota projekta Duke. Obzirom da je Duke dizajniran za prikaz kao mala figura na ikonama, uvecan on nije davao dojam napredne tehnologije.

Ovo je bio prvi dizajn sa razlicitim ikonama za svaku opciju. Isto tako neke ikone su vece i raznobojnije od drugih kako bi se istakla njihova važnost. Neke od ikona ipak nisu funkcionirale kako treba prema korisnicima:

• Sun on the Net ikona: probušeni balon, snjegovic, govoreci svijet, ideja koja izlazi iz globusa

Page 48: Seminarski KS 1

• What's happening ikona: parada, ljudi na Sun-ovoj konferenciji (ova ikona je kasnije izbacena)

• Sales and Service ikona: benzinska pumpa, restoran, javni WC, ducan Sun-ove opreme (što je i blizu pravog znacenja)

• Technology and Developers ikona: munje i gromovi, struja, osoba koju ubija struja, plesna mašina, Sun-ov inženjer sa izbuljenim ocima

Verzija F

Ovaj dizajn je uveo upotrebu šalice za kavu kao ilustracija za clanak o Javi. Ovaj dizajn je izabran kako bi omogucio lakšu izmjenu mjesecnog clanka bez izmjene sucelja ili glavnih elemenata stranice.

Page 49: Seminarski KS 1

Kako bi stranica izgledala jednostavnije, uklonjene su kutije oko clanaka pod kategorijom What's happening. Korištenje liste i plavih kljucnih rijeci je bilo dovoljno da se korisnicima pokaže mogucnost klika na pojedini clanak. Nažalost korisnici nisu shvatili da mogu kliknuti na "What's happening" kako bi dobili dužu listu clanaka.

U ovoj iteraciji dizajna nije bilo vremena za redizajn ikona.

Verzija G

Dodavanje trokuta na traku What's happening znatno je poboljšalo dojam korisnika o mogucnosti kliktanja. U prethodnom dizajnu korisnici nisu kliktali na traku, no sada su to cinili cesto. U ovom dizajnu trokut ne izgleda kao dio trake tako da je on u sljedecem dizajnu promijenjen kako bi izgledao utisnut u traku.

Page 50: Seminarski KS 1

Technology and Developers ikona cinila se i dalje problematicnom jer je munja asocirala na uništavanje. Konacno je odluceno da ce se munja izbaciti, tako da je u sljedecem dizajnu koncept razvoja predstavljen CD-ROM-om. Problem sa Corporate Overview ikonom je u tome da su ljudi mislili da zgrada na ikoni trpi oštecenja od potesa. Odluceno je da ce se ikona pojednostavniti uklanjanjem crvene linije cime ce ostati samo zgrada Sun- ovog sjedišta.

Iako je ovaj put ikona globus ucinjena okruglom doslovno predstavljanje svjetske mreže tom ikonom nije funkcioniralo. Velik broj korisnika nije prepoznavalo koncept te ikone, tako da je odluceno da se ikona što više poopci.

Verzija H

Page 51: Seminarski KS 1

Plamteca šalica kave je bila samo privremena ilustracija, sada je ona zamijenjena sa doradenijom verzijom.

Ovo je vec bilo blizu konacnog dizajna. Traku na What's happening traci je bio malo pretaman da bi izgledao kao udubljenje na traci. Isto tako je prva verzija nove ilustracije šalice izgledala slicno nuklearnoj eksploziji tako da je odluceno doraditi ju u malo prijatniju ilustraciju sa pjenom od kapucina umjesto nuklearnog oblaka iznad šalice.

Isto tako odluceno je da se gradacija boje iza šalice ukloni kako bi se smanjila slika i ucinila bržom za download. Neke dorade su bile potrebne i na bojama kako bi se stranice ucinile citljivijima na monitorima sa vecom zasicenosti prikaza boja.

Verzija I

Page 52: Seminarski KS 1

Konacno finalna verzija stranice.

Naravno, niti ova stranica nije savršena. Ispitivanja u više zemalja pokazala su da ljudi imaju poteškoce sa linkovima na slikama, obzirom da nisu tocno oznacene kao linkovi te pošto ne dobivaju povratnu informaciju o linkovima koje su vec posjetili. Java verzija stranice rješava prvi problem tako da osvjetli dijelove slika na koje je moguce kliktati.

Standardne Windows ikone Kad se radi o operativnim sustavima teško je govoriti o nekom standardnom skupu ikona, obzirom na kolicinu razlicitih funkcija koje operativni sustav izvršava te na kolicinu aplikacija na njemu.

Kad govorimo o Microsoft Windows operativnim sustavima još je teže naci neki zajednicki skup ikona obzirom da Microsoft sa svakim novim operativnim sustavom provodi najcešce i redizajn korisnickog sucelja.

Ovdje cu ukratko predstaviti 100-tinjak cestih ikona koje se koriste u operativnim sustavima Microsoft Windows.

Ikona: Funkcija:

Povecaj prozor preko ekrana

Smanji prozor

Vrati prozor na prethodnu velicinu

Novi dokument

Pošalji e-mailom

Otvori dokument

Pohrani dokument

Pregled prije ispisa

Ispis dokumenta

Slanje dokumenta faksom

Poništi prethodnu radnju

Ponovi poništenu radnju

Izreži dio dokumenta

Page 53: Seminarski KS 1

Kopiraj dio dokumenta

Nalijepi dio dokumenta

Postavke

Traži

Datum

Vrijeme

Ubaci tabelu

Zbroji

Sortiraj opadajuci

Sortiraj rastuci

Povratak na glavnu stranicu

Pretraživanje Interneta ili mreže

Nazad

Naprijed

Zaustavi radnju

Ponovno ucitaj dokument

Pomoc

Provjera pravopisa

Uvlacenje teksta

Izvlacenje teksta

Napravi numeriranu listu

Poravnaj na sredinu

Poravnaj ravnomjerno

Poravnaj lijevo

Podvuceni font

Ukošeni font

Masno otisnuti font

Superscript

Subscript

Crtaj ovalne oblike

Crtaj paralelogram

Crtaj pravokutnik

Page 54: Seminarski KS 1

Crtaj krivulju

Crtaj liniju

Ubaci sliku

Ubaci simbol

Ubaci formulu

Ubaci dijagram

Debljina linije

Boja linije

Boja oko fonta

Boja fonta

Pomoc

Pomoc oko odredene opcije

Ikona: Funkcija:

Dokument

Racunalo

Folder odn. direktorij

Folder odn. direktorij sa zvucnim sadržajem

Folder odn. direktorij sa video zapisima

Instalacija

Instalacija

Deinstalacija programa

Uspostava modemske veze

Smece odn. obrisane datoteke

Pomicanje dolje

Pomicanje gore

Page 55: Seminarski KS 1

Preskakivanje sadržaja

Prekid izvodenja sadržaja

Zaustavljanje izvodenja sadržaja

Izvodenje sadržaja

Snimanje

Lokalna mreža

Zvucni zapis

Video zapis

Pitanje korisniku

Sustav pomoci

Potvrda operacije

Negiranje operacije ili greška u radu

Prihvat ponudenog

Odbijanje ponudenog

Pristup floppy disku

Prijenosno racunalo

Šifriranje ili zaštita sadržaja

Upotreba telefona odn. modema

Popravak sustava ili pristup opcijama za podešavanje

Komunikacija portovima ili rad s portovima

Alarm

Pristup e-mailu

Autentikacija korisnika

Page 56: Seminarski KS 1

Traženje

Sustav pomoci

Miš

Opcije za korisnike s posebnim potrebama

Štampac

Skener

Kamera

Faks

Foto aparat

Zvucnik

Projekcija ili prezentacija

Upozorenje

Korisnici

MS DOS prompt

Tastatura

Aplikacija (obicno bez grafickog sucelja)

Koš za smece (prazan)

Koš za smece (pun)

Koš za smece (prazan)

Koš za smece (pun)

Mreža (ne samo LAN vec i šire)

Page 57: Seminarski KS 1

Pretraživanje dokumenta

Desktop odn. radna površina ekrana

Pristup floppy diskovima

Multimedijalni CD

Racunalo

Racunalo

Sustav pomoci

Komprimirana datoteka

Folder odn. direktorij sa fotografijama

Folder za podešavanje sustava

Gašenje racunala

Spajanje na Internet

Informacija

Paljenje racunala

E-mail poruka

Brisanje

Page 58: Seminarski KS 1

Podešavanje vremena

Kalendar

Software za izradu i repozitoriji ikona

Preporuceni software za izradu ikona

Microangelo - http://www.impactsoft.com/muangelo/muangelo.html Skup alata za kreiranje i editiranje ikona, kursora i animiranih ikona. Jedna od najboljih aplikacija za ovu namjenu.

IconForge - http://www.cursorarts.com/ca_if.html Paket sa svim potrebnim opcijama za editiranje ikona, kursora i animiranih kursora. Program sadrži alate za crtanje i animaciju ikona. Paket ima mogucnost ekstrakcije ikona iz EXE, DLL, ICO, ANI ili CUR formata datoteka.

Icon Searcher - http://www.yxhome.com/softplus/index.htm Program provodi brzo pretraživanje svih lokalnih diskova za ikonama. Program podržava velik broj formata datoteka DLL, EXE, ICO, ICL, OCX, SCR, CPL, BPL. Pronadene ikone smješta na vizualnu listu sa ikonama iz svake datoteke. Podržava Windows 95/98/ME/NT4/2000/XP.

Aha-soft Icon tools - http://www.aha-soft.com/ Proizvodac alata za editiranje, ekstrakciju, konverziju i upravljanje ikona. Proizvodi ArtCursors, CustomIcons, Icon to Any, IconUtils, IconXP, Any to Icon, i ArtIcons. Doadatno sadrži besplatne biblioteke ikona.

XemiComputers Ltd. - http://www.xemico.com/macico/ MacIco je prva besplatna aplikacija specificno dizajnirana za konverziju Macintosh ikona na PC format.

Axialis Software - http://axialis.com/products/index.html AX-Icons aplikacija kreira sve vrste ikona od 16x16 do 72x72, proizvoljnih velicina, crno-bijelih do 16,8 milliona boja.

Page 59: Seminarski KS 1

Icon Sucker - http://www.copseystrain.com/iconsucker/ Aplikacija za ekstrakciju ikona iz 16-bitnih i 32-bitnih aplikacija i biblioteka. Podržani formati su: BPL, CPL, DLL, DRV, EXE, ICL, ICO, OCX, SCR i VBX.

Icon Scanner - http://www.softspice.com/ Aplikacija koja pregledava datoteke, direktorije i diskove na racunalu te ekstrahira skrivene ikone i kursore sadržane u ICO, CUR, EXE, DLL datotekama. Probna verzija je dostupna za download.

IconXP - http://www.iconxp.com/ Editor ikona koji sadrži niz alatki za crtanje koje vam pomažu da editirate ikone standardnih ili proizvoljnih velicina.

Popis repozitorija ikona na Internetu

IconBAZAAR - http://www.iconbazaar.com/ Arhiva ikona namjenjena HTML developerima.

MediaBuilder Icon Library - http://www.mediabuilder.com/ds_icons_blocks_page_aa.html Prilicno dobro organizirana arhiva ikona..

Absolutely Free Icon Library - http://www.free-search.com/afil/ Besplatne ikone, clipartovi, animacije, fontovi itd...

Jeffery Zeldman's Icons - http://zeldman.com/icon.html Kolekcije ikona za web stranice i posebno pripremljeni paketi ikona za Mac, Windows ili Unix.

Anthony's Icon Archive - http://www.cit.gu.edu.au/images/Images.html Klasicna arhiva grafickih elemenata sa strelicama, kuglicama, dugmadi i velikim brojem standardnih ikona.

Buttonland – http://www.buttonland.com/ Besplatna dugmad za izradu web stranica.

Flip Flop Flyin' - http://www.flipflopflyin.com/minipops/index.html Hrpa ikona u GIF formatu.

Disability Graphics - http://www.lareau.org/disgraph.html Kolekcija racunalne grafike namijenjene invalidima.

NewSoftland - http://www.newsoftland.co.nz/newsoftland/webdesign_new_zealan

Page 60: Seminarski KS 1

d/icons.html Tvrtka koja se specijalizira u izradi i dizajnu ikona za sve tipove aplikacija.

AScom Icons Library - http://www.add-soft.com/icons/ Ogromna arhiva ikona za web stranice ili vaš desktop.

Fractus Icons - http://www.fractus.supanet.com/ Kolekcija fraktalno generiranih ikona. 32x32 piksela u GIF formatu.

The Email Icon Pages - http://www.geocities.com/SiliconValley/Network/8924/ Rastuca kolekcija staticnih i animiranih ikona za e-mail.

QBullets - http://www.matterform.com/qbullets/ Elegantne i male ikone namijenjene upotrebi na web stranicama.

Reference 1. William Horton, The icon Book, John Wiley & Sons, Inc. 2. Furnas, G. W., Landauer, T. K., Gomez, L. M., and Dumais, S.

T. (1987). The vocabulary problem in human-system communication. Communications of the ACM 30, 11 (November), 964-971.

3. Mullet, Kevin, and Sano, Darrell (1994). Designing Visual Interfaces: Communication Oriented Techniques. Sun Microsystems Press/Prentice Hall, New Jersey.

4. The American Heritage® Dictionary of the English Language, Fourth Edition

5. On-line rijecnik, http://www.dictionary.com 6. Sve o simbolima, http://www.symbols.net/ 7. Lana Arlov, Gui design for dummies

FER > ZPM > ERGONOMIJA > 2001/2002> Igor Šipka