Referenca 2011/2013: Fudbalski klub [internet marketing, SEO, blog- admin]

Web prezentacija

1. ΠΑΕ ΡΟΥΒΑΣ - ΝΕΡΑ ΡΟΥΒΑΣ /  blog / 

2. ΠΑΕ ΡΟΥΒΑΣ  / YouTube Channel  / + video 

3. twitter profile

Referenca: Butik za osobe punijeg stasa i trudnice

Web prezentacija butika

PLAN PRUŽANJA USLUGA

• ANALIZA LOKACIJE

Makrolokacija

Lokal se nalazi u užem centru grada u tržnom centru Florijan.

U okolini se nalaze: Autobuska stanica, Tržni centar, SUP Pančevo, Opšta bolnica, gradski stadion.

Veoma frekventna zona u toku radnog vremena od 8h do 16h. U to vreme se potencijalni kupci

iz navedenih tačaka kreću ulicom u kojoj se nalazi t.c. Florijan.

Da bi potencijalni kupci dočli u lokal, potrebno je da znaju da lokal postioji na tom mestu.

Dakle  potencijalni kupac dolazi sa  namerom.

Referenca: Festival digitalne umetnosti

Treći festival digitalne umetnosti, čiji je organizator i generalni sponzor kompanija Božić i sinovi, održan je pod nazivom: XPOSE - FESTIVAL DIGITALNE UMETNOSTI.

Referenca: PR i Direktor marketinga

OSVRT  

Kratak osvrt na najznačajnije događaje u prethodnoj godini. Detaljne izveštaje mođete pročitati u mom registru IZVEŠTAJI O RADU, koji se nalazi u kancelariji  marketinga.

Usvojen novi logo firme.

Stvoren vizuelni identitet firme.

Pokrenut festival digitalne umetnosti  (jedinstven na ovoj teritoriji).
Odrzana su u 2002. godini 2 festivala

Ziriranje radova na Festivalu digitalne umetnosti II

Referenca : Altena - marketing direktor

Logo je stvorio izuzetni  Nenad Vilimanovic

Flash site

Za vreme rada u Alteni - direktor marketinga.

Referenca: taxi udruzenje [ bredniranje i organizacija nagradne igre]

Meni jedan od najdrazih prokjekata koji smo odradili u nasoj staroj firmi Bozic i sonovi.
Pogedajte od cega smo posli i zahvaljujuci sjajnoj saradnji sa vlasnicima Laguna taksija dokle smo dosli i odradili ceo projekat po predvidjenom planu.
Fantasticno iskustvo!

Klijenti su dosli sa letkom i zatrazili od nas uslugu 

Napisala sam skicu medija plana i nadala se da se nece uvrediti , jer sam imala ideju da im promenim vizuelni identitet POTPUNO!

MEDIJA PLAN  - LAGUNA TAXI

Nagradna igra se najavljuje putem :

q  Bilborda

q  Radia

q  Novina

q  Letaka

Kampanja traje (februar, mart, april, maj, juni), pet meseci.

Ispitivanje tržišta se vrši mesečno, informacijama koje daju zaposleni na telefonskim jedinicama.

Stvorili smo novi logo 

Logo –

 treba promeniti zato što maskota ne navodi klijenta na asocijaciju ni sa imenom, ni sa uslugom.

Naš predlog sadrži LOGO koji asocira na ime. Jednostavan je za pamćenje i veoma zahvalan za štampu.

Referenca: izgradnja vizuelnog identiteta sprotskog kluba

Grb

 Idejna resenja za

• grb
• web prezentaciju, sajt
• zahvalnicu
• vizit kartu
• stampani reklamni materijal [vez i/ili stampa  na kacketima, zastavicama, majicama ]
• memorandu
• naslovna strana za stampana izdanja

Web prezentacija

Referenca: izrada vizuelnog identiteta firme

Referenca: proizvodjac cajeva

Idejno resenje i priprema za stampu  pakovanja za caj 

Priprema za stampu: prednja strana pakovanja

Priprema za stampu

Referenca: srednja skola

Referenca: web prezentacija pisca za decu - Saša Božović

Referenca: prizvodjac betonske galanterije

[prethodni izgled sajta, obrada fotografija, intenet marketing , vizit karta, tekst na sajtu]

UPOTREBLJIVOST I ESTETIKA WEB APLIKACIJE , Tatjana Dimitrijevic [Diplomski rad]

U radu  „Upotrebljivost i estetika Web aplikacije’’  je obrađena tematika upotrebljivosti i estetskih karakteristika Web stranica. Analizom karakteristika i primenom testova na konkretnim primerima smo ukazali na važnost estetskih karakteristika i karakteristika upotrebljivosti. Deskripcijom smo naveli najvažnije karakteristike upotrebljivosti i estetike kvalitetnih Web sajtova, a konkretnom analizom smo  utvrdili  realno stanje u oblasti Web sajtova u Srbiji.

            U ovom radu smo dali kratak uvod u istoriju interneta i objasnili koncept  World Wide Web-a, dali i definiciju i opštu podelu Web sajtova, kao i namenu Web sajtova. Definisali smo pojmam upotrebljivosti, nabrojali tehničke karaktreristike upotrebljivog Web sajta  i razmotrili odnos korisnika prema upotrebljivim stranicama na internetu.

Ucesce na YU Info 2011 i ICIST 2011
Programska oblast:E-DRUŠTVO
Tema: ANALIZA UPOTREBLJIVOSTI WEB APLIKACIJA

Ucesce na YU Info 2011 i ICIST 2011

SADRŽAJ

Glava I  - UVOD 

1.1   UVOD   ...........................................................................................................................................       3

1.2.    OD ARPANET-A DO INTERNETA  ................................................................................................              4

1.2.    IDEJA  WEBA   .......................................................................................................................................              5

1.4.    INTERNET    ...........................................................................................................................................              6

1.5.    WWW, World Wide Web ili Web    ...............................................................................................              6

1.6.    WEB STRANICE ( WEB SAJT)   .......................................................................................................             6

1.7.    OSNOVNE VRSTE WEB LOKACIJA NA INTERNETU   ..........................................................              7

1.8.    SVRHA WEB PREZENTACIJA   .......................................................................................................              8

Glava II  - UPOTREBLJIVOST WEB APLIKACIJE

2.1.    UPOTREBLJIVOST   ............................................................................................................................              10

2.2.    DEFINISANJE UPOTREBLJIVOSTI WEB APLIKACIJE   ...................................................                  10

2.3.    NEOPHODNE KARAKTERISTIKE UPOTREBLJIVE WEB APLIKACIJE   ...................                 11

2.4.   TEHNIČKE KARAKTERISTIKE WEB DIZAJNA   ..................................................................                   19

2.5.   KORISNICI I WEB STRANICE   ...................................................................................................                    23

2.6.   KAKO POBOLJŠATI UPOTREBLJIVOST WEB APLIKACIJE   ..........................................                  24

2.7.   TEST UPOTREBLJIVOSTI – IMPLEMENTACIJA   ...............................................................                  26

2.7.1.  News portal    ..................................................................................................................                    26

2.7.2.  Prezentacija on- line časopisa    ..............................................................................                    29

2.7.3.  Web prezentacija vladine institucije     ..................................................................                  32

2.7.4.  Web prezentacija korporacije    ................................................................................                  35

2.7.5.  Poslovna porezentacija    .............................................................................................                  38

2.8.  PREPORUKE ZA POBOLJŠANJE UPOTREBLJIVOSTI WEB APLIKACIJE    ....                   41

Glava III -  ESTETIKA WEB APLIKACIJE

3.1.   DIZAJN  ................................................................................................................................................. 44 

3.2.   WEB DIZAJN   ........................................................................................................................................               44

3.3.   ZAKONI I PRINCIPI ESTETIKE   ....................................................................................................               45

3.5.   ELEMENTI WEB DIZAJNA    ............................................................................................................               49

3.6.   TEST ESTETIKE – IMPLEMENTACIJA   .....................................................................................               57

3.6.1. Elektronska prodaja suvenira  ................................................................................              57           3.6.2.  Informativni turistički protal    .......................................................................................    60

3.6.3.  Web prezentacija firme     ...............................................................................................              63

3.6.4.  Obrazovanje i zabava     ....................................................................................................              66

3.6.5.  Prezentacija obrazovne institucije    ..........................................................................              69

3.7.  PREPORUKE ZA POBOLJŠANJE DIZAJNA WEB APLIKACIJE    .....................................................  72

Glava IV – ZAKLJUČAK

4.1.  ZAKLJUČAK   ...............................................................................................................................................            76

GLAVA I - UVOD

1.1.           UVOD

U ranim danima interneta za većinu ljudi je korišćenje sajtova bilo teško, te su se sturčnjaci borili sa time – kako da učine interfejs lakšim za upotrebu prosečnom koriniku. Mnogo znanja iskustva i testiranja je doprinelo da se to  uspešno ostvari. Zatim se vremenom povela rasprava na temu „dizajn/uptrebljivost’’ sa različitim tvrđenjima da je jedno važnije od drugog. Ti argumenti su doneli više buke nego koristi i bili su zasnovani na ideji da su dizajn i korisnost – dve sukobljene strane. Odvajanje upotrebljivosti od dizajna nije  pomoglo.

 Danas se ne postavlja pitanje „Šta je najvažnije?’’, već „Kako ćemo isporučiti ono što je najvažnije?"

Godine 1896, arhitekt Louis Sullivan Henri (Sullivan, Louis (1924). Autobiography of an Idea. New York City: Press of the American institute of Architects, Inc.. p. 325. ) je rekao, „oblik sledi funkciju uvek".  Njegova rečenica se ne odnosi toliko na važnost funkcije nad formom, nego da su funkcija i forma zamršeno isprepletene i nerazdvojne. Ista ideja se može primeniti na bilo koju vrstu dizajna, bilo da je industrijski, Web, štampni ili dizaj proizvoda. Problem je da većina dizajnera ne useva da izvuče  suštinu iz Sullivan-ovih reči.

            U radu „Upotrebljivost i estetika Web aplikacija” razmatramo pitanje upotrebljivosti i estetike Web aplikacija. Pre pisanja rada pokušali smo da pronađemo radove na temu upotrebljivosti, korisnosti, funkcionalnosti i estetskog aspekta Web dizajna, pisane na srpskom jeziku.  Međutim, koliko je razvijena svest o važnosti interneta i prezentovanja rada na internetu u Srbiji, toliko je i radova prevedeno i napisano. Nakon višednevnog lutanja i otvorenih na hiljade web stranica, odustali smo od ideje da materijal za učenje tražimo na stranicama srpskog interneta. Na polju svetske mreže može se naći veliki izbor materijala na temu upotrebljivosti Web stranica, a naročito na polju Web dizajna i estetike.

            Koncepciju  smo razvili na sledećem principu. Rad je podeljen u četiri glave. U prvom poglaviju  postavljamo temu u širem konceptu. Prva tačka nas uvodi u pojam interneta, istoriju, od nastanka ideje svetske mreže do njenog i  definisanja. Projekat World Wide Web-a i njegova definicija su dati u tački četiri, prve glave. Od pojma Web stranice (Web sajta) preko podele Web prezentacija dolazimo i do razmatranja svrhe Web prezentacija.

            Druga glava je posvećena upotrebljivosti Web aplikacija.  U njoj definišemo opšti pojam upotrebljivosti, objašnjavamo pojam dobre upotrebljivosti i definišemo upotrebljivost, konkretno, Web aplikacije. Definisanje upotrebljivosti je objašnjeno kroz pet komponenti koje definišu kvalitet upotrebljivosti. U desetoj tački, druge glave su date neophodne karakteristike upotrebljive Web aplikacije. U ovoj glavi objašnjavamo važnost upotrebljivosti kao jedne od neophodnih kvaliteta Web stranica. Vreme preuzimanja, raspored elemenata, kompatibilnost sa pregledačima, važnost zaglavlja i navigacije, isticanje sadržaja i jednostavnosti kao i važnost prilagođavanja Web aplikacija pojednicima sa posebnim potrebama.

            Upotrebljivost se postiže i primenom tehničkih znanja Web dizajnera, te se u nastavku rada osvrćemo i na taj aspekt dizajniranja. Svaka od nabrojanih karakteristika je opisana u ovom delu.

            Kako su Web stranice namenjene korisnicima, u dvanaestoj tački je dat kratak osvrt na ponašanje korisnika i pri tom je korišćen materijal iz istraživanja Jakoba Nielsen-a,  svetskog gurua kada je reč o upotrebljivosti Web aplikacija. Kako poboljšati upotrebljivost Web aplikacije, je naredna tačka druge glave.

            Nakon opšteg upoznavanja sa temom i konkretnog navođenja karakteristika koje podrazumeva uspešna Web aplikacija, pristupamo analizi konkretnih Web stranica koje potiču iz Srbije i namenjene su srpskom korisniku. Uz testove su priložene i slike koje ilustruju pojedine konkretne stranice. Nakon ilustracija i test tabele, može se pročitati osvrt i analiza pojedinih lokacija i mišljenje o kvalitetu konkretnih stranica.

            Poslednja tačka druge glave predstavlja svojevrsni podsetnik, razvojnom timu, a naročito Web dizajnerima, šta bi i šta ne bi trebalo primeniti, upotrebiti, izbegavati pri razvijanju Web aplikacija.

            Treća glava ima za cilj da čitaoca upozna sa pojmom dizajna, web dizajna i estetike.  Preko zakona estetike (simetrije, ritma, proporcije, dominacije i jedinstva) i njenih načela objašnjavamo značaj dizajna i estetike za korsnika. Sa osnovnim elementima dizajna upoznajemo se u devetnaestoj tački treće glave, gde se može pročitati opis, važnost i funkcija svakog navedenog elementa (tačka, linija, oblik i forma, tekstura, boja).

            U nastavku rada su opisani dodatni koncepti koji se odnose na elemente dizajna (izbor fonta, beline, ponavljanje elemenata,  poravnanje teksta, raspored na stranicama).

            Dvadeseta tačka, treće glave predstavlja istaživanje srpskih Web prezentacija na temu estetike i njihovu ocenu. Kao i pri istraživanju kvaliteta upotrebljivosti,  na osnovu slučajnog uzorka,  tako se i ovde mogu pronaći slike stranica  kao i ocene estetike konkretnih sjatova, u tabelama i na kraju komentar i zaključak o svakom analiziranom sajtu.

            Nakon istraživanja u poslednjoj tački treće glave pišemo mali podsetnik aktivnosti na koje bi razvojni tim i Web dizajneri trebali da obrate pažnju prilikom izrade Web prezentacija. U četvrtoj glavi se nalazi sažetak rada i odgovor na pitanje da li je i šta je važno ili važnije kod jedne Web aplikacije. U ovom delu se  stavlja u odnos  estetika, naspram upotrebljivosti, kao dve razmatrane osobine Web aplikacije. 

1.2.           OD ARPANET-A DO INTERNETA

Istorija    Weba   ili  tačnije  World  Wide  Weba   (WWW)   nije jednaka   istoriji Interneta. Internet je postojao duže, ali je Web ono što ga je učinilo ovim što je sada. Krajem 50-ih godina prošlog veka se počelo razmišljati o komunikacijskoj mreži u koju bi bilo spojeno više računara s ciljem međusobne komunikacije i razmene podataka. Prvi konkretan predlog o tome izradio je u avgustu 1962. godine J.C.R.  Licklider i nazvao to Galactic Network Concept. Osnovne postavke tog koncepta se do danas nisu previše promenile i današnji internet sadrži većinu njih.[1]

Predak interneta zove se Advanced Research Projects Agency Network (ARPANET), a razvila ga je agencija ARPA američkog Ministarstva obrane. Ključna osoba bio je Robert Taylor, iz Odeljenja obrade podataka Agencije, koji je odlučio da oformi račnarsku mrežu po Lickliderovom predlogu. Tehničku stranu projekta prepustio je stručnjaku Larryju Robertsu i 21. decembra 1969. godine prvi računari umreženi su u ARPANET. Bili su to računari University of California iz Los Angelesa i Stanford Research Institute. Dve nedelje nakon toga, mreži su pridruženi računari University of Utah i University of California iz Santa Barbare. Novi računari u ARPANET priključivani su u proseku svakih dvadesetak dana, pa ih je do početka 80-ih bilo preko 200.

1977. kada su Bob Kahn i Vint Cerf predstavili Transmission Control Protocol (TCP), a godinu dana kasnije dodan mu je i Internet Protocol, koji je odgovoran za usmeravanje (routing) podataka i poruka u mreži. TCP/IP je službeno usvojen u ARPANET-u 1983. godine, kada se polako počeo spominjati termin internet kao oznaka za mrežu koja koristi TCP/IP  protokol. ARPANET je tako postao ishodište interneta, a još jedan u nizu ključnih trenutaka koji su doveli da internet danas postane ovo što je dogodio se koju godinu ranije.

1.3.           IDEJA  WEBA

1980-e godine je Tim Berners-Lee, saradnik CERN-a (Evropske organizacije za nuklearna istraživanja ili Organisation Européenne pour la Recherche Nucléaire) stvorio ENQUIRE, bazu podataka temeljenu na hipertekstu u kojoj je svaki novi podatak koji je unešen u ENQUIRE morao imati link na već postojeće stranice u bazi.

Četiri godine kasnije Berners-Lee je predložio upravo takav način unošenja i pristupa podacima, kao rešenje tada gorućeg problema CERN-a. Naime, istraživači i fizičari iz celog sveta želeli su da podele svoje podatke, metode i rezultate istraživanja, ali nisu imali odgovarajući jednostavan način da to učine. Predlog nije dobio posebnu pažnju ni tada, ali ni 1989. kada je Berners-Lee ponovo predložio izgradnju velike hipertekst baze sa linkovima.

Iako taj predlog nije pobudio veći interes, Berners-Lee je ipak dobio dozvolu da ga implementira u, tada novu NeXT, radnu stanicu u CERN-u. Kada je počeo rad na toj implementaciji, Berners-Lee je imao niz ideja kako da svoju tvorevinu nazove, da bi se na kraju odlučio za WWW ili World Wide Web. Berners-Lee udružio je snage sa Robertom Cailliau-om, ali nisu imali puno koristi. Caillau je pripremio predlog za finansiranje World Wide Weba od strane CERN-a, ali bez uspeha.

Dok je svet slavio Božić 1990.godine, Berners-Lee je završavao sve potrebno da bi Web dobio punu funkcionalnost:

·         prvi Web pregledač ili browser, nazvan simbolično WorldWideWeb, koji je proširio s mogućnošću izrade Web stranica,

·         pripremio je i prvi Web server na adresi info.cern.ch,

·         izradio i Web stranicu na toj adresi na kojoj je izložio sve informacije o Webu uopšte.

Jedina mana mu je bila činjenica da je browser funkcionisao samo na spomenutoj NeXT računarskoj stanici. Stoga je još jedan entuzijast, Nicola Pellow stvorio novi, jednostavan   browser  koji je  funkcionisao  na  gotovo  svim  računarima.   Novi   pokušaj dobijanja sredstava od CERN-a bila je izrada Web telefonskog imenika CERN-a, ali bez uspeha.

Dok su Berners-Lee i Cailliau tražili novac za svoj projekt WWW po Evropi, Web je oduševio Amerikance. Poseta Paula Kunza sa Stanford Linear Accelerator Center (SLAC) švajcarskom CERN-u odredila je novi put razvoja Weba. Kunz se oduševio Webom, te je predstavio projekat bibliotekarki u SLAC-u, Louise Addis, koja ga je iskoristila za predstavljanje SLAC-ovih dokumenata online. Bio je to prvi Web server izvan CERN-a. Uskoro je postalo jasno da Web čeka velika budućnost.  6. avgusta 1991. Berners-Lee predstavio je široj javnosti svoj projekat WorldWideWeb na news grupi alt.hypertext. Taj se datum vodi i kao prvo pojavljivanje Weba kao javno dostupne usluge na Internetu. Berners-Lee je celu filozofiju Weba na kraju sveo u jednu vrlo jednostavnu rečenicu, koju možemo i danas primeniti u objašnjenju Weba:  „Cilj projekta WorldWideWeb (WWW) je stvaranje linkova na sve dostupne informacije".

Godinu dana kasnije još je jedna bibliotekarka, Jean Armour Polly "promenila" svet Weba i Interneta kada je prvi put iskoristila termin surfovanje u naslovu svoje knjige Surfing the Internet, što joj je, uz ostali rad, na kraju donelo i nadimaka Net-mom ili Mama Interneta. Nakon toga, 1993. i 1994. godine, CERN donosi odluku da će Web biti besplatan za sve, a Marc Andreessen predstavio je prvi grafički browser Mosaic (Andressen je kasnije postao i suosnivač Netscapea).

1.4.           INTERNET

Internet je javno dostupna globalna paketna mreža podataka koja zajedno povezuje računare i računarske mreže korišćenjem istoimenog protokola (internet protokol=IP). To je "mreža svih mreža" koja se sastoji od miliona kućnih, akademskih, poslovnih i vladinih mreža koje međusobno razmenjuju informacije i usluge kao što su elektronska pošta, chat i prenos datoteka, povezane stranice i dokumente World Wide Weba. Za povezivanje se koriste: telefonske mreže, ISDN, ADSL, optički kablovi, satelitske veze, etar...

Svaki računar spojen na internet ima svoju IP adresu, ali se kod korišćenja usluga, na primer u Web pretraživaču, uglavnom koriste imena koja se u adrese prevode pomoću DNS -a.

1.5.           WWW, World Wide Web ili Web

Mnogi ljudi koriste pojmove interneta i World Wide Web (skraćeno Web) kao sinonim, ali u stvari  ta dva pojma nisu sinonimi. Internet i Web su dve odvojene, ali

srodne stvari.

              Internet je globalna mreža podataka, mrežne infrastrukture. Ona povezuje milione računara širom sveta  koji zajedno čine mrežu u kojoj bilo koji računar može komunicirati s bilo kojim drugim računarom.

World Wide Web, ili jednostavno Web je način pristupa informacijama preko medija interneta. Web koristi HTTP protokol, samo jedan od jezika koji se govori preko interneta, za prenos podataka. Web usluge, koje koriste HTTP (engl. HyperText Transfer Protocol) je glavna i najčešća metoda prenosa informacija na Webu. Osnovna namena ovog protokola je omogućavanje objavljivanja i prezentacije HTML dokumenata, tj. web stranica.[2] World Wide Web predstavlja, dakle, skup dokumenata objavljenih na internetu, a koji se prikazuju na računaru korisnika pomoću pretraživača.

1.6.           WEB STRANICE ( WEB SAJT)

Web stranice ili Web sajt se sastoje od niza HTML/XHTML dokumenata kojima se može pristupiti uz pomoć Web pregledača (browser). Web sajt (site) je skup smisleno povezanih Web stranica koje se nalaze na nekom Web serveru.[3]

Na Web stranici se osim teksta mogu prikazati i multimedijski elementi (resursi) kao što su slike u digitalnom formatu (jpg, jpeg, gif, png, bmp, ...), flash i shockwave animacije, zvuk i slično.

Web stranice (Web site) su kolekcija internetskih resursa - HTML dokumenata, multimedijskih sadržaja, podataka i skripti. Dokumentima unutar Web stranica se pristupa preko zajedničkog korenskog URL-a, odnosno  Web adrese, koja se često naziva i ulazna stranica (homepage). Svi dokumenti su najčešće spremljeni na istom Web serveru. Hiperlinkovi unutar HTML dokumenata povezuju dokumente u uređenu hijerarhijsku strukturu i time određuju način na koji posetilac doživljava sadržaj stranica.

Korenska Web adresa, koja se najčešće naziva internet domen, čini vrednu karakteristiku svakog sajta.

Složeniji sistemi Web stranica (npr. Web shop) čine Web aplikaciju baziranu na posebnom hardveru i softveru. Složenije Web stranice koriste Web aplikacije napisane u nekom od programskih jezika (PHP, ASP, JSP, ...) za stvaranje sadržaja spajanjem pripremljenih grafičkih predložaka i sadržaja iz baze podataka (na serverskoj strani) i neki skriptni jezik poput JavaScripta ili VBScripta (na klijentskoj strani).[4]

1.7.           OSNOVNE VRSTE WEB LOKACIJA NA INTERNETU

Poslovna Web aplikacija (Web sajt) -   Svrha ovih  Web stranica je prodaja proizvoda ili usluga. Poslovne Web stranice se koriste za promovisanje firme, usluge ili proizvoda. Poslovna Web aplikacija je  najčešći tip Web aplikacija na internetu. Internetska adresa često završava - .com.

Lična (personalna) Web  aplikacija - Svrha ovog tipa Web stranica je pružanje informacija o pojedincu ili grupi. Ovaj tip Web aplikacija uglavnom služi za predstavljanje pojedinca ili male grupe (npr. porodice) koja sadrži informacije ili bilo kojeg sadržaja koji pojedinac želi da postavi. Internet adresa je niz nastavaka.

Organizacijska Web aplikacija  -  Svrha ovog tipa Web stranica je da se predstave organizacije (obično nevladine) sa sopstvenim idejama i programima. Na ovim Web sajtovima osobe sa sličnim interesima i interesovanjima komuniciraju jedne s drugima, obično putem chat ili foruma. Internetska adresa često završava - .org.

Obrazovna Web aplikacija  -  Svrha ovog tipa Web stranice je pružanje informacija o obrazovnoj ustanovi ili prezentacija informacija u vezi obrazovanja ili obrazovnog materijala. Internet adresa završava na -  .edu.

Zabavne Web aplikacije - Svrha ovog tipa Web sajtova je da pružaju zabavu. Internetska adresa često završava - .com.

Web stranica Novosti (News) -   Svrha ovog tipa Web stranice je pružanje informacija o aktuelnim događajima, posvećena vestima i komentarima. Internetska adresa često završava - .com.

Blog -  Web stranicu koja se koristi za vođenje online dnevnika, može uključivati raspravu forume ili chat sobe. Internet adresa je niz nastavaka.

Hibridna Web aplikacija  -  Mnoge Web aplikacije imaju više karakteristika tj. mešavina su raznih tipova Web stranica. Na primer, poslovni Web sajtovi mogu sadržati informacije o proizvodima ili uslugama, ali mogu isto tako davati informativne dokumente, kao što su bele stranice ili  vesti o kroporaciji ili novosti iz poslovanja firme.

Ova podela Web aplikacija  nije  konačna, ipak, može se reći da su ovo osnovni oblici Web sajtova.

1.8.          SVRHA WEB PREZENTACIJA

             Web dizajn predstavlja dizajniranje i grafičko predstavljanje sadržaja na internetu u formi Web sajta i ostalih Web aplikacija korišćenjem različitih medijskih formi izražavanja. Prostor koji se oblikuje egzistira virtuelno i pritom je interaktivan sa korisnikom.

Svaki čovek ima svoj identitet i nešto što ga razlikuje od drugog čoveka. Na Webu ima milijarde Web prezentacija koje takođe imaju svoj identitet, skup osobina koje ih razlikuju od ostalih. Vlasnici Web prezentacija, kao i njihovi dizajneri imaju jedinstveni cilj, a to je stvaranje identiteta i prepoznatljivosti njihovog rada.  Stvoriti Web aplikaciju koja se razlikuje od ostalih, koja dosledno prezentuje interese vlasnika i od posetioca stvara korisnika, je proces koji počinje samom idejom stvaranja svog mesta na internetu, preko stvaranja tima i realizacije ideje do premanentnog održavanja Web lokacije i sadržaja na njoj.

Da bi projekat izrade Web prezentacije bio uspešan potrebno je jasno definisati ciljeve izrade Web lokacije. To je ujedno i prvi korak u realizaciji projekta izrade Web prezentacije. Potrebno je definisati namenu lokacije, definisati broj posetilaca, zatim profil korisnika, ciljne grupe. Treba definisati šta Web sajt treba zapravo da radi, koje informacije treba da pruži, na koji način treba da vrši interakciju sa posetiocima. Najbitnija stavka je da Web sajt treba da odgovori na pitanje koja je njegova svrha, kome i za šta je namenjen i to mora da bude očigledno kako na početnoj stranici tako i na svim ostalim stranicama Web sajta.

            Da bi se stvorila preoznatljiva Web prezentacija koja živi i koja je aktivna treba joj dati neke specifiče osobine koje se tiču specifičnog, kvalitetnog sadržaja i prihvatljivog dizajna. U čitavom životu Web aplikacije ne treba izgubiti iz vida osnovno pitanje:        „Da li su zadovoljene želje korisnika?“

Primer:  Upoređivanjem  pretraživača Weba možemo dobiti konkretan primer kvalitethnih osobina i zadovoljavanja korisničkih poreba. Dok su ostali pretraživači halapljivo izmišljali nove i nove načine da iscede i najmanju paru iz svakog posetioca, Google se izdiferencirao po tome što im je pružio najbolje rešenje njihovog problema. Tražite informacijuž? Google vam neće dati najnoviji horoskop, finansijski savet, čet ili šta još. Google je samo i jedino globalni pretraživač, i to najbolji.[5]

Ne treba zaboraviti da posećenost sajta, kao i ocena njegovog kvaliteta zavisi od oka posmatrača tj. kakvu percepciju imaju korisnici.

Za posetioce kvalitetna Web stranica je stranica koja je urednog dizajna, nudi lako čitljiv sadržaj koji posetilac traži, lako se pronađe i svakom posetiocu (bez obzira koji internet pregledač koristi) se prikazuje jednako.

            Za Web programere kvalitetna Web stranica osim svih kriterijuma korisnika mora poštovati i najnovije standarde pisanja koda i tehnike pozicioniranja elemenata kako bi je po potrebi lakše izmenili.

Web dizajn je postao sinonim izraza izrade web sajtova što je, kardinalna greška. Ljudi koji malo više poznaju ovaj deo IT industrije znaju da je web dizajn samo jedna karika u lancu do krajnjeg proizvoda web prezentacije, popularno nazvanog Web sajta. Na našim prostorima je uobičajena praksa da jedna osoba pravi, kreira web sajtove pa čak i složene web aplikacije pa njega obično zovu Web dizajner.

Izrada Web sajtova je složen proces koji se sastoji iz sledećih oblasti:

·         web dizajn (grafički identitet sajta, boje, razmaci, fontovi, slike i donekle raspored),

·         projektovanje web sajtova (oblasti – pod sekcije koje će sam Web sajt sadržati, odabir materijala za upotrebu, “layout” – raspored elemenata na web stranama…),

·         tehnička izrada web sajta (pisanje samih kodova u script jezicima HTML, XHTML sa CSS-om u kombinaciji sa nekim od dinamičkih “script” jezika kao što su PHP, ASP ili Java),

·         projektovanje baza podataka (samo pod uslovom da se radi o kompleksnim web aplikacijama, SQL, PERL ili MySQL) i

·         SEO konsalting (SEO-Search Engine Optimisation ili optimizacija sajtova za pretraživače, internet marketing, internet promocije, promocije web sajtova...).

Uspešan Web sajt podrazumeva zajedničku saradnju i koordinaciju svih oblasti. Cilj svake Web prezentacije je konverzija ili pretvaranje zadovoljnog posetioca u zadovoljnog korisnika, kupca ili registrovanog korisnka. Upotrebljivost i estetika Web prezentacije su kavliteti čijim zadovoljavanjem se obezbeđuje dugo i uspešno postojanje i trajanje na Webu[6] i stvaranje uspešnog Web sajta.

GLAVA II - UPOTREBLJIVOST WEB APLIKACIJE

2.1.           UPOTREBLJIVOST

 „Veličina Weba je u njegovoj univerzalnosti.

 Dostupnost svima, bez obzira na smetnje, je esencijalan aspekt.“

Tim Berners-Lee; Osivač World Wide Weba; Direktor W3C

’’Dobra upotrebljivost  je kada koristimo nešto gotovo ne primećujući da smo uspeli da napravimo ili uradimo ono što smo želeli. Slaba upotrebljivost  je kada smo koristeći nešto  pokušali da nešto uradimo osetili frustraciju, a tehničke karakteristike ili primenjeni dizajn izgledaju kao barijera ostvarivanju korisničkog cilja.’’[7]  Ova definicija korisnosti (upotrebljivosti) se može primeniti na gotovo sve. To uključuje softver i Web stranice.

Bez obzira na ciljne tačke, kada se ocenjuje upotrebljivost trebalo bi uzeti u obzir sledeće aspekte:

·         Može li bilo ko (dakle, svaki član populacije ciljnih korisnika) da koristi stavke predviđene nameni?

·         Može li se koristiti sa lakoćom?

·         Da li to usporava (glavnu) delatnost ili negativno utiče na funkcionalnost na neki drugi način?

·         Da li „pristup upotrebljivosti“ doprinosi (glavnoj) nameni na svaki način?[8]

Stiv Krug  (Steve Krug) opisuje upotrebljivost kao nešto što se zasniva na temeljima zdravog razuma.  „Upotrebljivost znači osigurati  da nešto dobro radi i da osoba prosečnih sposobnosti ili iskustva to  može iskoristiti za nameravanu svrhu, bez osećanja frustracije i beznađa.’’[9]

2.2.           DEFINISANJE UPOTREBLJIVOSTI WEB APLIKACIJE

Upotrebljivost je proces izrade Web sajta za jednostavnu korisničku upotrebu. Web stranica je korisna ako, korisnici mogu da se jednostavno upotrebljavaju i da ostvare zadatke zbog kojih se nalaze na njoj.[10]

Upotrebljivost je atribut kvaliteta kojim se  procenjuje koliko je korisnički interfjes  jednostavan za upotrebu[11]  i obavljanje specifičnih zadataka u specifičnom okruženju.[12] Tokom procesa projektovanja reč upotrebljivost se koristi u aktivnostima poboljšanja jednostavnosti koje se sprovode u procesu projektovanja.

Kvalitet upotrebljivost je definisan sa  pet  komponenti[13]:

·         Jednostavnost učenja: Koliko je lako korisniku koji se prvi put nalazi na Web stranici da izvrši željene zadatke?

·         Efikasnost: Kada su korisnici jednom naučili raspored i funkcije Web stranice,        koliko mogu brzo da izvršavaju zadatke?

·         Memorabilnost (Pamtljivost): Nakon perioda nekorišćenja, kada se krisnici vrate na stranicu, koliko lako mogu da koriste stečena znanja/veštine na Web stranici?

·         Minimiziranje greškaka: Koliko grešaka prave korisnici, koliko su česte greške, da li lako mogu da se „oporave’’ od grešaka i da nastave sa korišćenjem aplikacije?

·         Zadovoljstvo: Koliko je dizajn Web aplikacije prijatan za upotrebu?

Međunarodna organizacija za standardizaciju (ISO) dala je definiciju upotrebljivosti : „Efektivnost, efikasnost i zadovoljstvo s kojim je zadati korisnik u stanju da obavi zadate zadatke u određenom okruženju.“[14]

·         Efektivnost – je obeležje sistema koji može da izvrši zadatke koje mu  zada korisnik.

·         Efikasnost – je obeležje kojim se uključuje vreme u definiciju upotrebljivosti. Efikasnija je aplikacija koja za kraće vreme izvršava zadatke date od strane korisnika.

·         Zadovoljstvo korisnika sistemom -  je komplikovano pitanje koje se može odnositi na razne aspekte sistema, ali se može meriti. Za sada, zadovoljstvo korisnika definisaćemo kao ono što korisnika opredeljuje za jedan od dva sistema pod uslovom da su sistemi u svim drugim aspektima jednaki.

Slabost ISO definicije je što ona ne uključuje pojam jednostavnosti učenja, mada se može pretpostaviti da je ona deo pojma efikasnosti ili zadovoljstva.

Još jedna korisna definicija upotrebljivosti je ona koju je dao Shackel, a koja se obično obeležava skraćenicom LEAF: Learnability (jednostavnost učenja korišćenja), Effectiveness (efektivnost), Attitude (stav korisnika prema sistemu), Flexibility (fleksibilnost).

Treba obratiti pažnju prilikom definisanja i merenja upotrebljivosti jedne Web aplikacije, jer problemi o kojima se govori, mogu varirati od jednog do drugog korisnika; takođe, broj različitih načina na koje korisnici mogu koristiti sistem i zadataka koje njime mogu obavljati su skoro beskonačni; i okruženje u kojima se ovi zadaci obavljaju može uticati na njihovo obavljanje na najrazličitije načine. Postoji mnogo atributa kojima se upotrebljivost može meriti. Svi oni daju odgovor na jedno, osnovno pitanje: Da li Web aplikacija radi ono što je korisnicima potrebno?

Komunikacija aplikacije sa korisnikom je veoma važna, jer je uzaludno ako je aplikacija jednostavna, ali korisnik ne može da dođe do rezultata, ili ako aplikacija može hipotetički da odgovori na zahteve korisnika, ali je u stvarnosti to teško ili nemoguće, jer je korisnički interfejs težak za upotrebu.

Možemo zaključiti da je upotrebljivost:  proučavanje efikasnosti određene Web lokacije sa ciljem  zadovoljavanja ciljeva korisnika, obezbeđivanja dobrog funkcionisanja aplikacije i olakšavanja interakcije sa korsnicima. To je interdisciplinarna oblast istraživanja koja obuhvata oblasti inetrakcije čovek-računar, ljudski faktor, inženjering, projektovanje i mnoge druge. U poslednjih nekoliko godina, upotrebljivost je postao reper koncept, koji se odnosi direktno na sveukupni uspeh mnogih Web aplikacija.

2.3.           NEOPHODNE KARAKTERISTIKE UPOTREBLJIVE WEB APLIKACIJE

Važnost upotrebljivosti

Upotrebljivost je neophodan uslov opstanka na globalnoj mreži. Ako je Web aplikacija teška i nerazumljiva za korišćenje - korisnici će je napustiti. Ako je prva stranica aplikacije (homepage) nejasna, ako ne daje informacije šta organizacija ili pojedinac  nude i šta se može uraditi na sajtu, ako ne daje odgovore na korisnička pitanja – korisnici odlaze. Ako je sadržaj nejasan, navigacija komplikovana, nerazumljiv i predugačak tekst – korisnici odlaze. Korisnici koji su nezadovoljni retko se kada vraćaju na „beskorisnu“  Web lokaciju.

Ako Web aplikacija nema korisnike, onda ne ostavruje svoj osnovni cilj postojanja (npr. aplikacije sa temom e–poslovnanja, imaju za cilj navođenje posetilaca na kupovinu,    korporativne aplikacije su stvorene sa ciljem da predstave korporaciju, pronađu potencijalne klijente, radnike, saradnike, cilj lične prezentacije je predstavljanje pojedinca, njegovih interesovanja i/ili poslovnih aktivnosti itd). 

Zato  je potrebno, na samom početku razvoja, specificirati sadržaj Web aplikacije i odgovoriti na početna pitanja koja se tiču procesa dizajniranja Web aplikacije. Korisne Web stranice su intuitivne i transparentne za korisnika. One omogućavaju korisnicima da svoje ciljeve ostvare brzo, efikasno, sa lakoćom i sa zadovoljstvom.

Da bi Web aplikacija bila korisna potrebno je voditi računa o sledećem karakteristikama:

·         vreme preuzimanja,

·         raspored elementa na stranici,

·         komatibilnost sa Web pregledačima,

·         zaglavlja,

·         navigacija,

·         funkcija pretraživanja,

·         statična mapa sajta,

·         sadržaj,

·         jednostavnost,

·         omogućavanje korišćenja osobama sa posebnim potrebama.

Vreme preuzimanja 

 

 Potrebno vreme preuzimanja sadržaja Web stranica sa interneta, od strane klijenta je veliki problem, čak i danas. Činjenica je da je sve više informacija dostupno ljudima i udaljeno od njih na samo „jedan klik“. Ako  Web aplikacija ne daje odgovor (odmah) na korisnikove potrebe, sve je verovatnije da će se naći druga Web aplikacija koja će to brže i jasnije ponuditi. Potencijalni posetilac će otići na aplikaciju koja je brža, a da prvu aplikaciju nije ni pogledao. Brzina preuzimanja zavisi od toga da li su slike odgovarajuće veličine i optimizovane za internet, da li su audio i video zapisi u odgovarajućem formatu i da li se pokreću automatski pri učitavanju (što usporava učitavanje).

Kako bi ubrzali učitavanje Web dizajneri i programeri primenjuju: čist kod, optimizaciju slike, kaskadni opis stilova (CSS), spoljni JavaScript, povećanje protoka.

Čist kod - Web programeri i Web dizajneri koji su neiskusni, prilikom izrade Web aplikacije mogu koristiti mnogo više koda nego što je to potrebno. Višak koda opterećuje i usporava učitavanje aplikacije. Ponekad je to posledica nedovoljno razvijenog HTML koda  ili slabo izgrađenog sistema za upravljanje sadržajem ili oboje. Sajtovi mogu lepo izgledati u pregledaču, ali u pozadini može biti haos. Razvoj čistog, minimalističkikog koda je odličan način da se smanji veličina datoteka i tom prilikom kreira manje podataka koji treba da budu interpretirani od strane pregledača kada posetilac učitava stranice.

Optimizacija slike  -  Postoji mnogo mogućnosti da se smanji veličina slike, a da se ne smanji njen kvalitet. To ne mora biti tema za sajtove sa samo nekoliko slika, ali mora se voditi računa prilikom izrade aplikacija koje su prepune slika, posebno e-commerce aplikacija koje treba da prikažu red po red proizvoda.

CSS – kaskadni opis stilova  -   Postoji mnogo prednosti u dizajniranju sajtova pomoću kaskadnog opisa stila  ili CSS-a.  Samo jedan od tih je činjenica da se može značajno smanjiti veličina datoteke stranice (time i preuzimanje) pomeranjem fonta i rasporeda na stranicama van stranice u posebnom CSS dokumentu. Najbolja stvar u vezi sa korišćenjem CSS je da kada pretraživač povlači verziju fajla iz download-a na prvoj strani, datoteka se zadržava i ne mora se preuzimati svaki put kada se korisnik kreće od stranice do stranice. Ovo je alat koji donosi veliki uštedu vremena. Upotreba CSS-a može značajno pomoći da se smanji čekanje na preuzimanje aplikacije. CSS takođe ubrzava vreme uloženo u izradu i kasnije izmene na aplikaciji.

Spoljni JavaScript  -  Kao CSS, JavaScript se takođe premešta na posebnu stranicu. Na taj način kao i kod  korišćenja eksternih CSS dokumenata, JavaScript kod će se samo jednom preuzeti od strane korisničkog računara, dok se korisnik kreće kroz sajt.

Povećanje protoka  -   Baš kao grad koji gradi nove ulice zbog gustog saobraćaja,  sajtovi koji imaju povećan saobraćaj moraju da razmatraju povećanje Web hosting paketa, da bi obezbedili sebi veći propusni opseg. Ako nema dovoljno dozvoljenog propusnog opsega, posetioci mogu da dožive zastoj ili čak kolaps.  Ali kada je u pitanju očekivanje korisnika, ne može se pogrešiti kada se ubrza sajt. Ne može se impresionirati posetilac sa kvalitetom informacija ili proizvoda, ako se izubi zbog sporog vremena potrebnog za preuzimanje sadržaja.[15]

* http://www.numion.com/Calculators/Time.html* Na ovoj adresi se nalazi kalkulator koji će izračunati potrebno vreme preuzimanja određene datoteke.

Raspored elementa na stranici  (osnovni elementi Web stranice)

Kontejner -  Svaka Web stranica ima kontejner (Slika1.). Bez neke vrste kontejnera, ne bi bilo mesta da se stavi sadržaja naših stranica. Elementi bi besciljno plutali van granica prozora. Širina kontejnera može biti plutajuća, što znači da se stranica proširuje u zavisnosti od širine prozora pregledača ili fiksna, tako da je prikazani sadržaj iste širine bez obzira na veličinu prozora.

Slika 1. Anatomija Web stranice

Logo -  Identitet blok koji se pojavljuje na sajtu treba da sadrži logotip kompanije ili ime i postavlja se na vrh svake stranice sajta.  Zbog identifikovanja stranice kod pretraživača, najbolja pozicija za logo je gornji levi ugao sajta. Zaglavlje i interfejs korporativnog sajta podrazumevaju implementaciju kompanijskog logotipa u levom uglu i pozadinsku boju kompanije, koja čini zaglavlje i centralni navigacioni sistem.  Logotip kompanije je vruća tačka, link  koji prema konvenciji na Webu vraća korisnika na početnu stranu.

Navigacija -  Za korisnika je neophodno da navigaciju sajta  lako pronađe i koristi. Korisnici očekuju da vide pravu navigaciju na vrhu stranice. Bez obzira da li se  koriste horizontalni meniji uz gornju stranu stranice, ili vertikalni meniji duž leve ili desne ivice stranice, navigacija treba da bude što bliže vrhu. Na dnu stranice na više nedavno redizajniranih sajtova, vidi se  zanimljiv novi trend. Umesto da koristi podnožje za glavne linkove i obaveštenja o autorskim pravima, mnogi sajtovi u footeru imaju informacije u vezi proširene navigacije ili dodatnog sadržaja. 

Sadržaj -  Sadržaj je kralj. Tipičan Web sajt posetilac, će ući i napustiti Web sajt u roku od tri sekunde, ako ne može da pronađe ono što traži, on će sigurno zatvoriti pregledač ili će preći na drugu stranu. Važno je da se glavni blok sadržaja postavi u fokus strane, tako da dragoceni sekundi nisu izgubljeni, kada posetilac skenira okom stranicu u potrazi za informacijama koje su mu potrebne.

Podnožje (Footer)  -    Footer se nalazi na dnu stranice i  obično sadrži autorska prava, kontakt i pravne informacije, kao i nekoliko linkova na glavnoj sekciji sajta. Razdvajanjem sadržaja od dna prozora pregledača footerom, ukazujemo korisnicima da su na dnu stranice. Ako je stranica veća od jednog ekrana, obavezno treba postaviti dugme čijim će pritiskom korisnik moći da se vrati na vrh strane.

 

Kompatibilnost sa Web pregledačima

 

Kompatibilnost pregledača je i dalje veliki problem, uprkos mnogim naporima da se Web standardizuje. To znači da će jedan Web pregledač prikazati Web aplikaciju tačno onakvom kakva jeste, drugi će je prikazati u izmenjenom obliku, a treći je upošte neće prikazati. To je razlog zašto bi Web sajtovi trebali biti razvijani imajući u vidu  cross-browser kompatibilnost i testirani u više pregledača. Različiti računarski sistemi, veličina ekrana, rezolucija ekrana i dubina boja igraju ulogu u korisničkom iskustvu.

Web dizajn stranice treba da bude prilagođen različitim veličinama monitora (17’’ incha, 19’’ incha), različitim vrstama operativnih sistema (Windows XP, Win Vista, Linux, Mac), različitim Web pregledačima (Internet Explorer, Mozilla Firefox, Opera), različitim tipovima i profilima internet korisnika (slabovidi, stari), različitim alternativnim uređajima i preglednicima („smart phones’’, GSM, printeri ). Testiranje je od suštinske važnosti.

Google analytics  (http://www.google.com/analytics)  daje mnoštvo podataka koji se tiču pregledača. Koliko je posetilaca aplikacije pristupilo koristeći određeni pregledač, koji operativni sistem koristi i sl. Testirati aplikaciju na rad u različitim preglednicima, pratiti statistiku i prilagođavati se korisnicima je imperativ dobrog i korisnog Web sajta.

Treba imati na umu da najveći broj korisnika nema najnovije verzije programa ili pretraživača, te u skladu sa tim i na Web aplikaciji koju razvijamo ne treba primenjivati najnovije verzije programa.

 

Zaglavlja

 

Zaglavlje stranice obično sadrži logo kompanije ili ime vlasnika aplikacije, jednu rečenicu ili pasus kojim se opisuje ono šta se nudi na sajtu ili moto. Imati bold naslov i logo u zaglavlju je  važno jer posetioci uglavnom ne čitaju sadržaj stranice, već ga skeniraju, te se boldovanjem i naglašavanjem skereće i zadržava  korisnikov pogled i pažnja.

Navigacija

 

Navigacija je jedna od najvažnijih eksperimentalnih oblasti Web dizajna. Navigacija može biti dinamična i eksperimentalna, ali je osnovni preduslov da se očuva njena jednostavnost i upotrebljivost. Pravilo dobre navigacije nalaže da korisnik dođe do željene stranice ili informacije sa najviše tri klika od ulazne stranice (homepage). Korisnik treba da brzo i efikasno pronađe određene informacije na stranici koristeći jednostavnu, jasnu, konzistentnu navigaciju. Istraživanja su pokazala da su korisnici najzadovoljniji i najefikasniji u radu, kada je navigacija u gornjem levom uglu ili na vrhu stranica.

Funkcija pretraživanja

 

Pretpostavlja se da korisnici nemaju strpljenja. Uzimajući ovu karaklteristiku posetilaca na Web aplikaciju treba postaviti objekat za pretragu sajta. Ovaj objekat omogućava pretragu cele lokacije prema ključnim rečima ili sadržaju i time ubrzava i olakšava pronalaženje potrebnih  informacija. Objekat za pretragu treba da ima polje za upis dovoljno široko da u njega može biti napisano oko 18 karaktera.

Statička HTML Mapa sajta

 

Statička HTML mapa sajta je odlično rešenje, jer omogućava lako pretraživanje  indeksa svih datoteka koje se nalaze u aplikaciji. Omogućava brzi pregled datoteka.

Sadržaj

 

Prvo što posetioca može da zadrži na stranici je dobar dizajn elemenata, ali ono što obezbeđuje ostanak i povratak posetioca i pretvaranje u korisnika aplikacije, jeste njen sadržaj. Ako sadržaj nije čitljiv posetilac će se razočarati i napustiti stranicu i aplikaciju frustriran.

Efikasna upotreba kaskadnog opisa stila tj. CSS-a je odlična pri stvaranju izgleda sajta. Sadržaj je čitljiviji ako je napisan  Sans Serif fontovima (Ariel, Verdana, Tahoma).  Interesantan je podatak da je za velika slova potrebno 50% manje vremena za čitanje. Mali pasusi su takođe mnogo čitljiji od nenaglašenog tetksta.

„User  friendly’’ stranice - Web aplikacija prilagođena korisniku treba da ponudi jasan i nedvosmislen odgovor na pitanja: Gde se nalazim? O čemu se radi na stranici? Šta može da se uradi na ovoj stranici? Koje sadržaje mogu pronaći na stranici? Kako mogu pronaći željene informacije?

 

Tekst kao  sadržaj Web aplikacije

     Pod sadržajem Web aplikacija (u ovom delu) se podrazumeva  tekst na stranicama, a koji su namenjeni za prikazivanje na Web pregledačima (Internet Explorer, Mozilla Firefox, Opera, Safari, Chrome i dr).

Ako posetilac Web aplikacije ne pronađe njemu koristan i zanimljiv sadržaj on će, kao što je rečeno ranije, napustiti lokaciju bez mnogo razmišljanja. Kako bi posetilac postao korisnik aplikacije, potrebno je ponuditi mu razlog za ostanak na istoj. Razlog zbog koga će ostati je korisnost sadržaja aplikacije.

Sadržaj aplikacije treba da bude gramatički i pravopisno ispravan , u suprotnom će aplikacija delovati neozboljno i nevažno. Ako je potrebno može se tekst odneti na liekturu.  Sadržaj treba da bude istinit i ažuran – što podrazumeva iskrenost prema posetiocima i njihovo poštovanje. Takođe je potrebno objavljivati pravovremene informacije, a zastarele treba ukloniti u arhivu ili izbrisati. Jasnoća sadržaja je kao i jasnoća cele prezentacije. Ako posetiocu nije na prvi pogled jasno gde  se nalazi, ako ne može da se snađe zbog prenatrpanosti kako vizuelnim efektima, tako i samim podacima (tekstom), ako je tekst predugačak i bez istaknutih reči on će se okrenuti drugim Web lokacijama na internetu.

            Jakob Nielsen sa saradnicima iz Nielsen Norman Group-a dokazao da 70% ispitanika uvek skenira svaku novu stranicu na koju naiđe, a samo je 16% ispitanika čita doslovce. Rečenice trebaju biti sažete, bez suvišnog rogobatnog teksta i razumljive.  Osim sažetošću i naglašavanjem ključnih reči, pretraživosti sadržaja pomažu i liste sa brojevima ili buletima i linkovi.

            Zanimljiv sadržaj je taj koji privlači nove posetioce i zadržava korisnike. Ako se uvek ponudi nešto novo i konkretno na aplikaciji, ona će uvek naići na zainteresovanost korisnika. Sadržaj treba da bude interaktivan. Tekst koji je pisan za Web se zove hipertekst i njega možemo povezivati sa drugim sadržajem na aplikaciji ili na drugim aplikacijama, pomoću linkova. Linkovi su aktivni delovi teksta i može se reći , temelj Weba.

Inetraktvnost sadržaja se postiže i omogućavanjem ostavljanja komentara korisnika na pojedinim stranicama, otvaranjem stranica foruma, ankete i upitnici, kao i omogućavanje RSS-a (metode za jednostavnu distribuciju Web sadržaja).

Multimedijalni sadržaj - Multimedijalni sadržaj se na početku svodio samo na fotografije i animirane ikonice, danas ga čine video klipovi i audio materijal. Ajax aplikacije i Flash animacije čine dinamiku aplikacija izuzetnio zanimljivom. Sa upotrebom multimedijalnog sadržaja treba biti oprezan, jer je ovaj sadržaj znatno usporava  učitavanje stranice i često je suvišan (postavljen kako bi impresionirao posetioce, a ne kako bi bio od koristi).

Bez obzira koji program za uređivanje fotografija se koristi, za pripremu slika za Web treba znati osnove o nekoliko standardnih formata datoteka sa slikama i kada treba da se koristi koji. Preporuka je da se .GIF format koristi za ikone, a .JPG za skenirane slike u istom ili nekom drugom katalogu. Treba biti umeren oko broja i veličine slika jer znatno utiču na brzinu učitavanja sajta. 

Široko podržani formati slika od strane Web pretraživača su:

·         JPG / JPEG - "komprimovani" slikovni format izveden iz bitmape. Najčešće korišćen format u normalnom radu sa slikama. Zbog skromnih memorijskih potreba prikladan kako za arhiviranje, tako i za razmenu putem informatičkih mreža ili elektronske pošte. Praktično svi programi i foto-oprema podržava ovaj format i svi omogućuJu konvertiranje (tzv. "izvoz") svojih formata u JPG.

Nedostatak formata čine dosta izražene nepravilnosti slike, posebno rubne nepravilnosti i šum, koje se na štetu oštrine slike i/ili bogatstva nijansi i finih detalja, mogu umanjiti zamućivanjem ili primenom raznih filtera u fotoeditorima. Ne podržava prozirnost.

·         GIF - (Compuserve GIF) je "komprimovani" slikovni format kome je broj nijansi sveden na 256 boja, ali je u paletu uključena i prozirna. Uz JPG, takođe često korišćen format u mrežnim aplikacijama i razmeni preko interneta. Osiromašenje palete može biti vrlo izrazito, pa GIF treba koristiti samo ako nam je važna prozirnost, što je na primer slučaj kod raznih animacija, foto i grafičkih montaža i slično.

·         PNG (Portable Network Graphics) - je kvalitetniji slikovni format koji takođe podržava prozirnost, znatno većih memorijskih potreba od GIF-a.

·         TIF i TIFF - Memorijski vrlo zahtevan slikovni format za profesionalnu upotrebu i metarske dimenzije (postere, izložbene i plakate, tehničke fotografije s najfinijim razlaganjem detalja i dr.) koji bolje ocrtava sitne detalje. Odlikuje se manje izraženim nepravilnostima slike. Zbog velikog zauzeća memorije ne treba ga koristiti ako za to nema stvarne potrebe.

Animacije i video datoteke se čuvaju u formatima:

Animacije: Autodesk animaciJe (.fli/.flc); Animirani GIF; Macromedia Flash (.swf); MNG (Multiple-Image Network Graphics); Scalable Vector Graphics (.svg); Windows Animated Cursor (.ani)

Video datoteke: AAF (Advanced Authoring Format); ASF (Advanced Streaming Format); Bink (.bik); FILM (.cpk); Matroska (.mkv); MPEG; MXF (Material eXchange Format); NUT; NuppelVideo; NSV (Nullsoft Streaming Video); Ogg (za Tarkin i Theora); OGM (Ogg Media Stream); QuickTime (.mov, .qt); PVA; RealMedia; RIFF-AVI ; RoQ; VIVO; yuv4mpeg

Lista popularnih softverskih alata  za stvaranje multimedijalnog sadržaja, koje timovi za razvoj Web aplikacija koriste:

• Slike/ grafika:  Macromedia Flash; Adobe Photoshop; Macromedia Fireworks
• Zvuk:  Cubase (audio and midi); Soundforge; CoolEdit (PC); Peak (Mac); Goldwave (PC) MakingWaves (PC) – audio and midi; Sound Studio (Mac)
• Video:  Final Cut Pro (Mac); Adobe Premiere; VideoWave (PC); movie (Mac)
• Animacija:  Flash; Director; Gif animators

Treba naći dobru meru između vrste i količine sadržaja, jednostavnosti priloženog i zanimljivog vizuelnog prikaza Web aplikacije. Pre zvaničnog objavljivanja Web sajta neophodno je proveriti funkcionisanje multimedijalnih fajova u različitim pretraživačima.[16]

 

Jednostavnost

 

Dobra metoda za stvaranje Web aplikacije je   KISS = "Keep it simple, Stupid!". Držeći se principa jednostavnosti, ne skrećemo pažnju posetiocu od glavnog sadržaja, niti ga zbunjujemo.  

Omogućavanje korišćenja Web aplikacija  osobama sa posebnim potrebama

Osobe sa posebnim potrebama čine  15%  svetske populacije. Uzimajući ovo u obzir dobro je prilagoditi i učiniti Web aplikaciju dostupnom ovom velikom delu tržišta. Kada se govori o pristupačnosti Web sajta, ne misli se samo na osobe sa problemima sa sluhom, vidom, neurološkim problemima već i na starije ljude, manje pismene, osobe sa manje internet iskustva, onima koji imaju starije tehnologije, osobama koje su povremeno lošijeg zdravlja. Dobar dizajn koristi ALT tagove za sve slike, a najviše za navigaciju koja je napravljena u slikama. Tako je ostavljena mogućnost da se u sličaju da se slika ne učita korisnik zna šta se nalazi na tom mestu. Opisom svake slike, se omogućava osobama sa posebnim potrebama ili onim kod kojih je opcija učitavanja slika onemogućena da dođu do informacija o slici koja bi trebalo da bude na toj Web stranici.

Vrednost ALT atributa će biti koristi u sledećim slučajevima:

·         ekranski čitač će tu vrednost pročitati naglas ili poslati brajevom displeju;

·         biće prikazana umesto slike u grafičkom pretraživaču, u slučaju da slika nije pronađena na zadatoj lokaciji;

·         biće prikazana umesto slike u grafičkom pretraživaču ako je učitavanje slika isključeno;

·         ALT tekst koriste Web spajderi, pri indeksiranju sajta, što može doprineti boljem rangu na pretraživačima. [17]

Transkriptovanjem zvučnog sadržaja, upotrebom heading tagova u prvim redovima i prvim kolonama, upotrebom jakog kontrasta teksta i pozadine, ne upotrebljavanjem blinkajućeg teksta se takođe  povećava pristupačnost Web stranica.

Ostale karakteristike

    Ostale karakteristike na koje treba obratiti pažnju prilikom stvaranja korisne aplikacije su:  

·      preglednost (potrebno je poravnati sve elemente na stranici (navigacija, logo, tekst, tabele...),

·      jasno prezentovanje najvažnijih sadržaja stranice (na uvodnoj strani podatke i sadržaj treba prezentovati jasno, čitko i kvalitetno, ako je aplikacija obimna potrebno je postavljanje mape sajta kako bi se omogućilo brže kretanje i jasnoća pregleda sadržaja),  

·      konzistentnost elemenata (postavka logoa, navigacije, tekst boksova, podnožja stranice, pretraživača na istom mestu na svim stranicama),

·      čitljivost teksta  (pronalaženje informacije je jedan od osnovnih razloga posetiočevog ulaska na Web aplikaciju, ako je tekst pisan nečitkim fontom, na nejasnoj pozadini, sitnim slovima, onda je korisnost Web sajta na veoma niskom nivou),

·      jezik pisanja (posetioci Web aplikacije mogu biti različite starosne dobi, kulture, pola, stepena obrazovanja. Sadržaj treba da bude napisan jasnim i jednostavnim jezikom. Izražavanje treba da je čisto i nedvosmisleno.),

·      podloga stranice (jednostavna i jasna podloga stranice omogućava bolju čitljivotst),

·      Web standardi ( pri izradi aplikacije treba se pridržavati Web standarda - XHTML, CSS, DOM, XML, Jscript),

·      jasna navigacija (korisniku treba omogućiti da uvek tačno zna sa koje stranice je došao, na kojoj stranici se nalazi, koje je stranice posetio),

·      upotreba head tagova (pojačanim, naglašenim  naslovima se naznačava jasna hijerarhija tema na stranici – od najbitnijeg ka manje bitnom.),

·      materijal za štampu (omogućavanjem preuzimanja materijala za štampu, omogućuje se korisniku veća dostupnost sadržaja).[18]

2.4.           TEHNIČKE KARAKTERISTIKE WEB DIZAJNA

Po svojoj prirodi Web je vrtuelni medij kome pristupamo preko perifernih uređaja (računara, monitora, miša i sl.). Dizajneri su ograničeni kvalitetom i mogućnostima tehnologije koje se menjaju i napreduju donoseći nove mogućnosti velikom brzinom.

Web dizajn nije samo dizajniranje lepe stranice, već njega čini i kvalitetan tehnički aspekt dizajniranja. Naime, Web dizajneri osim znanja iz oblasti dizajna moraju da veoma dobro poznaju tehničke mogućnosti i ograničenja svog radnog okruženja (brzina protoka u mreži, računara, alata za programiranje, tehničkih uređaja i sl.).

U narednom izlaganju su date neke od tehničkih karakteristika  na koje programeri trebaju da obrate pažnju prilikom izrade aplikacija:

• rezolucija,
• projektovanje za pregledače,
• grafička kompresija,
• sigurna paleta boja,
• tekst,
• pristupačnost.

Rezolucija

Rezolucija  se koristi da označi različite stvari. Kada govorimo o rezoluciji obično se misli na rezoluciju ekrana i rezoluciju slike.

Rezolucija ekrana -  Skoro svi računarski ekrani imaju  ekvivalent od 72-96 PPI (piksela po inču).  Ali, kada se govori o rezoluciji ekrana uglavnom se misli na veličinu ekrana ili broj piksela koji se prikazuju na ekranu u bilo koje vreme. Veličina ekrana tačno odražava količinu prostora koji korisnici imaju na svojim ekranima, a samim tim i koliko informacija može da se  prikaže odjednom. Postoji nekoliko stvari koje treba razmotriti prilikom odabira ciljne veličine ekrana za dizajn sajta. Ali, kao što ćemo videti malo kasnije, ovo nisu samo brojevi koje treba uzeti u obzir prilikom dizajniranja za Web.

Rezolucija slike  -  Rezolucija slike je ukupna veličina i integritet slike  na ekranu i van njega. Obično se definiše u pikselima i dimenzijama prostorne rezolucije, koji  zajedno stvaraju  opštu rezoluciju slike.

• Pikseli -  u računarskoj grafici označava najmanju (osnovnu) jedinicu od koje je slika sastavljena. Ovaj pojam je u uskoj vezi s pojmom tačke u geometriji i likovnoj umetnosti. Dimenzije slike su broj piksela koji čine sliku.  Megapiksel je jedan milion piksela i može se izračunati kao (širina × visina / 1.000.000).

·         Prostorna rezolucija - je rezolucija slike koja se računa prema broju piksela po inču. Prostorna rezolucija sadrži 72 piksela po inču (rezolucija ekrana) do 300 piksela po inču (rezolucija štampe).[19]

Uz neke jednostavne matematičke formule možemo videti kako broj  i prostorna rezolucija utiču jedna na drugu (Tabela1.). U tabeli je predstavljena približna korelacija između brojeva.

Tabela1. Korelacija piksela i prostorne rezolucije

Širina i visina	Megapiksela	72 ppi	230 ppi	300 ppi
1735 x 1157	2MP	24 ’’ x 16’’	7,5 ’’ x  5 ’’	5,8 ’’ x  3,9’’
2450 x 1633	4MP	34 ’’x22,7’’	10,6 ’’x 7,1’’	8,2 ’’ x 5,4’’
3000 x 2000	6 MP	41,5 x  27,8	13’’ x 8,7’’	10’’ x 6,7’’

Projektovanje za pregledače

Pregledač ima interfejs koji se koristi za interakciju korisnika sa informacijama na Webu. On pruža okvir za prikazivanje informacija i navigacione alatke za interakciju na različitim nivoima. Kada se dizajnira za Web, to  se činiti za prikazivanje u okviru pregledača. Pošto postoji mnogo različitih pregledača na raspolaganju, dizajneru je potrebno da zna  koji od njih podržavaju koje funkcije određenog programa, za izradu aplikacija. Postoje suptilne (a ponekad i ne-tako-suptilne) razlike u načinu na koji pojedini pregledači prikazuju dizajn, baziran na tome kako pregledač tumači kod koji je napisan da iznese dizajn. Podešavanjem koda ili koristeći standarde kao što su Cascading Stile Sheets (CSS) često se prevazilaze  mnoge razlike. Dominantni pregledač na Internetu danas je Mozilla Firefox,  zatim Internet Explorer, Chrome, Opera, Safari, pa ostali (Tabela2.). Generalno, smatra se da je dobra praksa testirati bilo koji dizajn u  različitim pregledačima (verzijama i platformama) u što većem broju.  To će dati tačniju sliku o tome kako izgledaju dizajna i funkcije.

Tabela2.  Trenutni trendovi korišćenja pregledača[20]

	Internet Explorer	Firefox	Chrome	Safari	Opera
2010	30.7 %	45.8%	17.0%	3.5%	2.3%
2009	37.2 %	46.4%	9.8%	3.6%	2.3%
2008	46.0 %	44.4%	3.6%	2.7%	2.4%

Veličina ekrana korisnika određuje koliko će  informacija biti prikazano u jednom trenutku. Međutim, kada je u pitanju  dizajn za Web ne mogu se koristiti „sirovi" brojevi da bi se utvrdilo kolika bi stranica trebalo da bude. Moramo uzeti u obzir prostor  koji zauzima sam pregledač i oduzeti ga od ukupne veličine ekrana da bi se dobila preciznija slika. Dakle, koliko prostora interfejs pregledača zauzima? To zavisi od pretraživača i podrazumevane postavke.

Naredni brojevi (Tabela3.) prikazuju približno koliko prostora je ostalo na stranici nakon oduzimanja veličine interfejsa. U obzir se uzma podrazumevana instalacija (meni datoteka, standardna dugmad, trake za adresu, statusna traka i traka za pomeranje).

Tabela3.  Slobodni prostor interfejsa preraživača

Veličina ekrana	IE 6	MozilaFirefox	Opera	Netscape
800 x 600	779 x 400	781 x 434	777 x 427	781 x 389
1024 x 768	1003 x 568	1005 x 602	1003 x 558	1005 x 557

Drugi način da se Web stranice prilagode varijacijama veličine prostora na pretraživačima je - upotreba „tekuće’’ ili prilagodljive širine izražene u procentima (liquid width). Ovo omogućava dizajniranje u skladu sa raspoloživim prostorom, bez obzira na pretraživače i veličinu ekrana. Zbog promenljive prirode izgleda, važno je da se planira gde i na koji način će se određene sekcije protezati. Upotrebom ovog načina gradnje stranica postiže se automatsko prilagođavanje svim rezolucijama monitora, smanjuje potreba za „skrolovanjem’’. Izbor načina kodiranja širine Web stranica zavisi od specifičnosti svakog projekta posebno, od ciljane publike, od faktora i ciljeva upotrebljivosti i jednostavnosti.

Grafička kompresija

Grafička kompresija se koristi za optimizaciju slika za Web, kako bi bili sigurni da su odgovarajuće boje, veličine i formati bili prikazani na pravi način na pregledačima. Kompresovanje grafike za Web može biti komplikovano i često je teško znati koju i kada koristiti.

Postoje tri opcije:

GIF (Graphics Interchange Format)

GIF- je najbolje koristiti za rasterske slike, umetničke linije i slike za velike područjima jednobojne površine.

• Dubina boja je od 1-bit (2 boje) do 8-bita (256 boja),
• podržava transparentnost,
• podržava ograničene animacije,
• veličina dokumenta je  obično 20% -90% od originalne veličine.

JPEG (Joint Photographic Ekperts Group)

JPEG  format je najbolje koristiti sa složenijim foto-realističnim slika i kolor šemama.

• Dubina boja 8-bita (256 boja) ili 24-bita (16.777.216 boja),
• omogućava  kontrolu kvaliteta u  procentima,
• veličina dokumeta je  5% -20% od originalne veličine.

PNG (Portable Netvork Graphics)

PNG   format je razvijen kao naslednik GIF i trebalo je da ga zameni. Međutim, njegovo usvajanje je sporo i sve njegove funkcije nisu podržane od strane svih pretraživača.

• Dubina boja je 8-bita (256 boja) ili 24-bita (16.777.216 boja),
• podržava  za cross-platforma gama korekcija,
• obično kompresuje slike 5% - 25% bolji od GIF.

Sigurna paleta boja

Kod većine HTML elemenata (body, font, hr, table, itd) postoji atribut koji se odnosi na boju prikaza elementa ili pozadine. Mnogi grafički programi za obradu slika koriste RGB paletu boja, a većina browsera koristi WEB paletu od 216 boja tzv. WEB SAFE COLORS. Sigurna paleta boja kod Weba, su boje koje većina Web browsera, a i monitora može da prikaže. Potrebno je koristiti tu paletu boja prilikom obrade slika i dizajniranja Web strana, da  strana ne bi zavisila od pretraživača ili monitora u kom se prikazuje. Ali to ne znači da treba do koristiti svih 216 boja, maksimalno 5 boja treba odabrati. Najteže je među tim bojama pronaći pravu. Boje u HTML se unose kao heksadecimalne vrednosti kojima prethodi znak #. Prva dva heksadecimlna broja se odnose na crvenu, druga dva na zelenu i zadnja dva na plavu (npr. crvena boja je #FF0000 ). 

Tekst

Da bi font bio ispravno prikazan u pregledaču on mora biti dostupan tj. postojati na računaru korisnika.  Zato se kombinacije, fontova koji se nazivaju sistemski fontovi nalaze na svim računarima. Korišćenje ovih unapred definisanih porodica  fontova obezbeđuje se doslednost  i predvidivost  prikaza informacija. Pretraživač će koristiti prvi slobodan font u navedenoj kombinaciji i prikazaće podrazumevani font u pregledaču, ako nijedan od navedenih fontova nije su dostupan (najčešće Times, Times New Roman, ili Courier).

Sledi spisak najčešćih kombinacija fonta:

• Arial, Helvetica, sans-serif:
• Tahoma, Geneva, sans-serif;
• Courier New, Courier, monospace;
• Georgia, Times New Roman, Times, serif:
• Verdana, Arial, Helvetica, sans-serif;
• Geneva, Arial, Helvetica, sans-serif.

Pristupačnost

Pristupačnost se odnosi na podršku za tehnologije i uređaje koji se koriste za poboljšanje iskustva ljudi sa oštećenjima (fizički, vizuelni, auditivni) ili imaju druge teškoće u pristupu informacijama na Webu. Opšte je uverenje da informacije na internetu trebaji da budu na raspolaganju svima. To je tema od velikog značaja treba je uzeti u obzir pri izradi dizajna Web alikacije.  W3C je program pod nazivom Inicijativa Za Pristup Webu (Web Accessibility Initiative)  postavlja međunarodne standarde za Web pristupačnost. WAI je postavio prioritete i kontrolne punktove kako bi se osiguralo da sajt zadovoljava neophodne standarde, uključujući: obezbeđivanje tekstualnog  ekvivalenti za ne-tekstualne elemente u obliku alt ili longdesc oznaka, obezbeđivanje da informacije koje su obeležene  bojom mogu  da se čitaju bez boje ili su  dostupne bez boje, jasno utvrđivanje reda i kolone u okviru zaglavlja tabele strukture za lakšu navigaciju.

2.5.           KORISNICI I WEB STRANICE

U suštini, navike Web korisnika se ne razlikuju mnogo od navike kupaca  u prodavnici. Posetioci pogledaju na svaku novu stranicu, skeniraju [21] jedan deo teksta, a zatim kliknu na prvi link koji im se čini interesantnim ili je sličan stvari koju traže. U stvari, postoje veliki delovi stranice koje nije  ni pogledao. Najviše korisnika je  u potrazi za nečim zanimljivim ili korisnim, kada pronađe nešto za šta pretpostavljaju da će im pomoći  ili dati odgovor na neko pitanje oni kliknu. Ako se nova stranica ne ispunjava očekivanja korisnika, pritiskaju dugme za povratak i nastavljaju potragu.

Korisnici cene kvalitet i kredibilitet. Ako stranica nudi korisnicima sadržaj visokog kvaliteta, oni su spremni na kompromis sadržaja i dizajna sajta. To je razlog zašto ne tako dobro dizajnirane Web  aplikacije sa visoko kvalitetnim sadržajem imaju puno saobraćaja tokom godina. Sadržaj je bitniji od dizajna koji podržava. Korisnici ne čitaju, oni  skeniraju (Slika2.). Analizom Web stranica, korisnik je u potrazi za nekom fiksnom tačkom ili sidrom koja će ga voditi kroz sadržaj stranice.

Slika 2. Korisnici ne čitaju, oni skeniraju.  ’’Vruće" oblasti naginju ka  sredini rečenice. To je tipično za proces skeniranja.

Web korisnici su nestrpljivi i insistiraju na brzom zadovoljenju. Veoma jednostavan princip: ako Web aplikacija nije u stanju da ispuni očekivanja korisnika, onda dizajner nije uspeo da svoj posao odradi  ispravno i kompanija gubi novac. Korisnici prave  optimalan izbor.[22] Korisnici  tragaju za najbržim načinom da pronađu informacije koje traže. Oni ne skeniraju Web stranice u linearnom modu (Slika3.), ne idu redom sa jednog mesta na drugi deo. Umesto toga, korisnici biraju prvu razumnu opciju. Čim su pronašli link koji izgleda kao da ih  dovesti do cilja, postoji veoma velika šansa da će odmah kliknuti.

Slika 3. Put skeniranja Web stranice

Možemo izvesti tri glavna zaključka po pitanju odnosa korisnik - sadržaj dobijena nakon četvorogodišnjeg istraživanja ponašanja korisnika:  

-  korisnici ne čitaju na Webu, umesto toga oni skeniraju stranice, pokušavajući da pokupe u par sekuni, nekoliko reči ili čak delova rešenica;  

-  korisnici ne vole dugo, listanje stranica: oni vole tekst koji je kratak i podeljen po tačkama;  

- korisnici vole tačne i konkretne informacije, bez mnogo marketinškog samohvalisanja.[23]

2.6.           KAKO POBOLJŠATI UPOTREBLJIVOST WEB APLIKACIJE

 

Postoji mnogo metoda za proučavanje upotrebljivosti, ali većina osnovnih i korisnih je korisničko testiranje, koje ima tri komponente:

• testiranje aplikacije na uzorku budućih korisnika (kao što su klijenti za e-trgovinu sajtu ili radnika na internim mrežama. Oni bi trebalo da rade izvan odeljenja za razvoj aplikacije);
• davanje zataka u kojima bi  korisnici trebali da  izvrše u interakciji sa Web aplikacijom;
• posmatranje šta korisnici rade, gde su uspeli, gde imaju problema sa korisničkim interfejsom.

Najčešće je potrebno 5 korisnika, da se kvalitetno  identifikuju najvažniji problemi dizajna.[24]  Veoma je bitno da se pri ovakvom načinu testiranja korisnici testiraju pojedinačno i da sve probleme pokušaju da reše sami. Pomoć učesnicima testiranja (direktna ili bilo kakvo skretanje pažnje) od strane članova razvojnog tima će dati „kontaminirane“ rezulate. To nije skup poduhvat i ne zahteva mnogo ulaganja, a da daje odlične rezultate, pritom je potrebno da se  poštuje princip interakcije i samostalnog rada na relaciji korisnik, korisnički interfejs. Takođe, je mnogo bolje i korisnije sa finanskijskog aspekta, češće  testiranje u toku samog procesa razvoja aplikacije, nego test nakon završetka i pre neposrednog puštanja u aplikacije rad.

Drugi način je testiranje fokus grupa, koje pruža skromne rezulate u otkrivanju  grešaka koje se tiču upotrebljivosti aplikacije. Fokus grupe su odlične pri istraživanju tržišta, ali se u procenjivanju upotrebljivosti dobijaju šturi i nepotpuni  rezultati.  Prilikom svakog testiranja je mnogo važnije za razvojni tim da gleda šta korisnici rade, nego da sluša šta korisnici kažu. [25]  Jedini način da visokog kvaliteta testiranja je početi korisnička testiranja u ranoj fazi razvoja projekta i obavljati testiranje nakon završetka svake faze razvoja.

Studija Jakoba Nielsena o idealnom broju korisnika koje treba uključiti u testiranje upotrebljivosti je pokazala da test sa samo 5 korisnika može da otkrije 85% problema koje imate na sajtu. Rešenje će biti podjedanko ako u testiranje uključite 15 ljudi. Najveći problemi su obično otkriveni od strane prva dva korisnika, a preostali testeri potvrde navode prvih i pronađu manje probleme. Samo dva korisnika bi pronašla polovinu problema na sajtu. Ovo znači da testiranje ne mora da bude veliko ili preskupo da bi imalo dobre rezultate. Najveći dobitak se ostvaruje prelaskom sa 0 test korisnika na jednog tako da se ne treba plašiti da testiranja malog broja korisnika. Bilo kakvo testiranje je bolje od nikakvog.

2.7.           2.1.           TEST UPOTREBLJIVOSTI – IMPLEMENTACIJA

2.1.1.     News portal

2.7Site Naslov:    B92                                                    URL: http://www.b92.net

1. Brzina
A. Početno učitavanje efikasno	*
2. Elementi web stranice
A. Logo – u levom gornjem uglu	*
B. Navigacija – jasna i uočljiva	*
C. Sadržaj - preglednost	*
E.  Footer – sadrži važne linkove	*
3. Stranice
A. Početna stranica je atraktivna	*
B.  Jasan naslov, opisi , naslovi slika	*
C.  Mapa sajta ili neki drugi jasan pokazatelj sadržaja sajta.	*
D.  Tekst je jasan i poravnat	*
E.  Kontakt informacije su lako dostupne	*
F.  Tekst je pisan adekvatnim fontom i čitljiv	*
G. Konzistentnost stranica	*
4. Jednostavnost navigacije
A.  Korisnik je u mogućnosti da se krećete po stranici sa lakoćom	*
B.  Postoji uputstvo za korišćenje sajta  pod uslovom ako je potrebno	*
C.  Uputstva su jasna i jednostavna za praćenje	*
D.  Linkovi ka drugim stranicama u okviru sajta su korisne i odgovarajući	*
E.   Unutrašnje i spoljašnje veze su ispravne (nema ćorsokaka, pogrešnih linkova, itd)	*
F. Navigacija je jasna, uočljiva, konzistentna	*
5. Upotreba multimedija
A. Svaki grafički, audio datoteke, video fajl, itd, služi jasnom cilju	*
B.  Grafike, animacije, audio i video zapisi ... daju značajan doprinos sajtu	*
6. Kompatibilnost pregledača
A. Sajt je jednako efikasan sa različitim browser-ima kao što su MozilaFirefox, Internet Eksplorer, Chrome, Opera.	*
7. Sadržaj prezentacije
A. Postoji dovoljno informacija da sajt vredi posetiti	*
B. Informacije jasno označene i dobro organizovane	*
C. Isti osnovni format je korišćen dosledno na celom web sajtu	*
D. Informacija je lako naći (ne više od tri klika, na primer)	*
E. Liste linkova su dobro organizovane i jednostavan za upotrebu	*
F. Iskačući prozori su korišćeni	*
8.   Valuta
A. Datum poslednje revizije je jasno označen	*
B. Suvišni (zastareli) od materijal je uklonjen	*
9. Dostupnost više informacija
A. Postoji aktivni link kojim se lako može stupiti u kontakt sa licem za kontakt ili adresa za dodatne informacije	*
B. Linkovi na druge korisne Web lokacije postoje i aktivni su	*
C. Alt tagovi postoje i efikasni su		*
D. Postoje stranice za štampu ili u PDF formatu	*
F. Prilagođenost ljudima s posebnim potrebama		*

Ukupna  vrednost -  Oldična  funkcionalnost

Upotrebljivost  stranica B92.NET

Na internet adresi  http://www.b92.net/ se nalazi inernet portal  na kome se mogu naći informacije iz većeg broja izvora i pristupiti brojnim aplikacijama. Od samog početka ovaj portal je bio najbolji primer kako treba postaviti kvalitetnu, dobro organizovanu Web aplikaciju. Neverovatan broj informacija koje su dobro i funkcionalno organizovane, su primer kako se obiman sadržaj može prezentovati.

Početno učitavanje stranica je efikasno. Logo je u levom gornjem uglu i predstavlja link ka početnoj stranici. Navigacija se nalazi u gornjem uglu, linearna je, bez padajućih menja. Sadržaj je se nalazi duž leve ivice  stranice, a duž desne ivice su  linkovi (unutrašnji i spoljni) koji su povezani sa tematikom strane ili baneri. U footer-u se nalaze linkovi ka stranicama sa osnovnim informacijama i sajtu (marketing, pravila korišćenja, kontakt). Početna stranica je atraktivna i aktuelna sa jasnim rasporedom elemenata. Na bilo kojoj stranici da se korisnik nalazi, jasno se uočava lokacija na kojoj je. Kontakt informacije su dostupne na svakoj stranici. Tekst je čitljiv (crna slova na beloj pozadini), naslovi su jasno izdvojeni i oni su linkovi ka tekstu. Kada korisnik ode na bilo koju od stranica, uvek mu je jsano da se nalazi na Web lokaciji b92.net, jer su stranice konzistentne.

Korisnik se lako kreće po stranicama. Mapa sajta ne postoji, ali zato se pretraživačem sajta može pronaći ciljana tematika. Postoje uputstva za praćenje sajta (RSS) kao i uputsvo za povezivanje preko mobilnog telefona.  Linkovi ka drugim stranicama sajta su korisni, smisleni i ispravni  kao i spoljašnji linkovi. Korisnik u svakom trenutku zna kuda će ga odvesti klik na link ili baner. Navigacija je jasna, uočljiva konzistentna i pregledna.  Svaki grafički i audio prilog je adekvatno postavljen i ilustruje tekst koji prati. Video zapisi se brzo učitavaju, jasna je njihova uloga, a (audio matrejial) radio B92 se sa lakoćom može slušati direktno preko protala. Grafike i animacije daju značajan doprinos sajtu, nisu napadne i ne dekoncentrišu korisnika. Sajt je jednako efikasan u svim pregledačima.

Informacije su za portal ključne. Na stranicama ovog protala se nalazi veliki broj korisnih informacija kako iz oblasti informisanja, tako i iz oblasti poslovnih sadržaja,  zabave, sporta, medicine, nauke, putovanja... Forum je sastavni deo protala, kao i blog. Svaka od ovih oblasti je jasno označena na ulaznoj stranici, a svaka oblast je odvojena posebnom bojom (na primer stranice o zdravlju imaju za osnovnu – zelenu boju), a konzistentnost vizuelnih elmenata je dosledna.

Informacije je lako naći u ovom odlično organizovanom sadržaju. Liste linkova su dobro organizovane, jer svaka pod oblast ima podhorizontalni meni u  odgovarajućoj boji. Podnaslovi su vidljivo izdvojeni bojom. Inteligentna integracija i pristup sadržajima, aplikacijama i raznim informacijama i omogućenost da korisnici budu u interakciji sa sjatom kao i međusobno daju aktuelnost i besprekornu korisnost. Ažurnost je očigledna i svaki tekst ima oznaku datuma postavljanja.

Alt tekstovi postoje i korisni su, a tekstualni opis ne postoji na svim fotografijama i banerima, ali to ne umanjuje izvanrednu funkcionalnost i upotrebljivost ovog portala.

Web prezentacija onih koji treba da prezentuju druge

            Marketing agencija Triple–m je napravila sajt upotrebivši Flash platformu i audio efekte i na svom primeru pokazala, šta znači neprofesionalnost.

            Početno učitavanje je izuzetno sporo i otežano zbog učitavanja Flash animacije i audio fajla.  Logo je postavljen na sredini stranice uz levu ivicu i nije link. Navigacija se nalazi samo na prvoj strani. Sadržaj postoji ali ga ne možete pročitati, jer se neprijatan zvuk non-stop ponavlja, a korisniku nije ostavljena mogućnost da ga isključi. Footer ne postoji.

            Početna stranica je stranica koja ne služi ničemu. Obaveštava korsnika da se sajt učitava, a ikonice za koje se očekuje da budu linkovi su ne funckionalne. Ne može se reći na kojoj ste strani i odakle ste došli. Ne postoji indeks sadržaja, tekst je nečitak i isuviše kratak, a grafički elementi koji su postavljeni uz tekst i za koji korisnik očekuje da bude link ka širem objašnjenju, ne služe ničemu, ček nemaju ni Alt tag , niti tekstualni opis.

           

            Sajt vredi posetiti, jedino da bi se naučila lekcija kako ne treba jedna Web prezentacija da izgleda. Kako se grafički elementi, audio fajlovi i Flash animacije nepravilno koriste. Informacije je teško pronaći ili ih upošte nema.

            Opšti utisak je da korsnik želi što pre da napusti lokaciju, ugasi računar i pobegne iz kuće negde u planinu - na rehabilitaciju.

2.8.          PREPORUKE ZA POBOLJŠANJE UPOTREBLJIVOSTI WEB APLIKACIJE

Postoji nekoliko lista grešaka koje ne treba učiniti prilikom stvaranja Web aplikacije. U ovom delu je opisano na šta bi tim za razvoj Web aplikacije  trebalo da obrati posebnu pažnju ako želi da Web aplikacija u najvećoj meri zadovoljava uslove upotrebljivosti.

§  Korisnik mora da zna na kojoj je lokaciji  u roku od  nekoliko sekundi.  Pažnja je jedna od najvrednijih valuta na internetu. Ukoliko posetilac ne može da shvati šta je na sajtu za nekoliko sekundi, verovatno će ga napustiti i otići na neku drugu lokaciju. Sajt treba da komunicira sa posetiocem i da mu pruži početne informacije i to odmah.

§  Proveriti ’’brzim skeniranjem’’ čitljivost sadržaja.  Nepotrebno je praviti velike blokove teksta na Web stranicama. Korisnici, verovatno posećuju sajt dok rade i na drugim poslovima, pa ne žele gubiti vreme čitajući nepregledne i duge stranice. Ako ne mogu da uoče odmah numerisana poglavlja, zaglavlja, liste oni gube strpljenje.

§  Ne koristiti ’’fensi’’ fontove koji nisu čitljivi.  Naravno postoje neki fontovi koji će dati sofisticirani izgled vašoj aplikaciji. Ipak, treba voditi računa o njihovoj čitljivosti. Ako je tekts ono što doprinosi korisnosti aplikacije – onda bi tekst trebao da bude prijatan za oko čitaoca.

§  Ne koristiti male fontove. Udobno čitanje sadržaja je preduslov dobre komunikacije aplikacije sa korisnikom, zbog toga ne treba koristi mali font. Ako je potrebno da korinik upotrebi funkciju zumiranja na svom računaru, verovatno će to biti poslednji put da poseti tu Web stranicu.

§  Ne otvarati nove prozore.  Korisnik ne želi da bude kontrolisan od strane neke Web aplikacije, zato mu se ostavlja mogućnost da (ako to želi) sam otvori narednu stranicu vaše aplikacije u drugom prozoru.

§  Ne menjati veličinu prozora pretraživača korisnika.  Korisnik treba da bude u mogućnosti da kontroliše svoj pretraživač. Ako aplikacija promeni izgled korisnikovog pretraživača, može se desiti da se stvori zbrka i da se izgubi kredibilitet kod korisnika.

§  Ne zahtevati registraciju, osim ako je to neophodno.  Korisnik koji pretražuje internet želi da dobije  informaciju, a ne obrnuto. Nemojte silom da tražite od korisnika da se  registruje i ostavlja svoju e-adresu i ostale detalje, osim ako to nije apsolutno neophodno (ponuda nekog naprednog sadržaja npr.).

§  Nikada ne pretplaćivati posetioca za nešto, bez njegovog pristanka.  Nije dobro da se korisnik automatski (bez svog znanja i odobrenja) ubacuje u e-mailing listu ili pretplaćuje za bilten i novosti. Slajne neželjene pošte je najboji način da se kod potencijalnog korisnika stvori averzija prema pošiljaocu.

§  Ne preterivati sa Flash-om. Pored povećanja vremena učitavanja sajta, prekomernom upotrebom Flash-a može se dosađivati posetiocima. Koristite ga samo za funkcije koje nisu podržane od strane statičke stranice.

§  Ako mora da postoji audio datoteka pustite korisnika da je  pokrene sam.  U nekim situacijama ponuda na sajtu može zahtevati audio fajl. Možda se mora korisniku mora „isporučiti’’ uputstvo, objašnjenje i slično. Tada treba ponuditi mogućnost korisniku da sam odabere kada će slušati ponuđeni audio materijal, pritiskom na dugme (play).

§  Ne praviti zbrku od banera na sajtu.  Mreža banera doprinosi da sajt izgleda neprofesionalno. Čak i ako govorimo o nagradama i priznanjima baneri bi trebali da budu postavljeni na stranici ’’O nama’’.

§  Ne koristiti početnu stranicu koja jedino što radi , jeste da  pokreće "pravi" sajt.  Što je manji broj koraka potrebnih da korisnik pristupi sadržaju, to je bolje.

§  Uveriti se da postije  kontakt podaci.  Ne postoji ništa gore nego sajt koji nema nikakve kontakt detalje. To nije loše samo za posetioce, već i vlasnike aplikacije.

§  Aktivno dugme "nazad".  Ovo je jedan od osnovnih uslova upotrebljivosti.

§  Nemojte koristiti trepćući tekst. Agresivan i dekoncentričući sadržaj je kontraproduktivan.

§  Izbegavati složene strukture URL adresa.   Jednostavno, na osnovu ključne reči URL struktura ne samo da će poboljšati rangiranje kod pretraživača, ona će takođe olakšati čitaocu da identifikuje sadržaj vaše stranice pre nego što ih bude posetio.

§  Koristiti CSS umesto HTML tabela.  HTML tabele su korišćene za kreiranje izgleda stranica. Sa pojavom CSS-a, međutim, nema razloga da se držimo njih. CSS je brži, pouzdaniji i nudi mnogo više funkcija.

§  Izbegavati padajući meni.  Korisnik treba da bude u mogućnosti da vidi sve opcije za navigaciju odmah. Korišćenje padajućeg menija može zbuniti i sakriti informacije koje čitalac tražiti.

§  Koristiti tekst navigaciju.  Tekst navigacija nije samo brža, već je i pouzdanija. Neki korisnici, na primer, opciju sa slikama pri  pretraživanju interneta  isključe.

§  Korišćenje  PDF datoteka treba da je jasno naznačeno.  Eksplicitne veze koje upućuju na PDF datoteke postaviti na vidnom mestu, tako da korisnici mogu da ih upotrebe.

§  Ne treba zbunjivati  posetioca sa mnogim verzijama.  Izbegavajte zbunjivanje posetioca sa previše verzija vašeg Web sajta. Koji propusni opseg žele? 56kbps? 128Kbps? Flash ili HTML? Korisnici žele samo sadržaj!

§  Ne stavljati oglase sa unutar sadržaja.  Ubacivanje oglašavanja (kao što su AdSense jedinice) unutar sadržaja možu povećati broj  „klikova’’ na kratak rok. Međutim na  duge staze, to će smanjiti bazu čitalaca Web aplikacije.

§  Koristite jednostavne strukture za navigaciju.  Manje je više. Uverite se da vaš sajt ima jednu, jasnu navigacionu strukturu. Ne treba buniti  čitaoca kada traži informaciju  gde treba da ide kako bi  pronašao  informaciju koju traži.

§  Izbegavati „predstavljanje".  Ne treba silom terati korisnika da, pre nego što ode na stranicu sa sadržajim koji traži, pregleda sadržaj koji nije tražio. To je obično, veoma dosadno i za korisnika predstavlja gubljenje vremena.

§  Postarajte se da vaš sajt kompatibilan sa svim pretraživačima.  Nisu svi preglednici jednaki i ne tumače svi jednako CSS i ostale programe na isti način. Treba proveriti da li je Web aplikacija kompatibilna sa najčešće korišćenim pregledačima, inače se čitaoci gube na dugi rok.

§  Uveriti se u ispravnost „sidro’’ (anchor) linkova.  „Kliknite ovde’’ nije efikasno kao link postavljen u samom tekstu. Kada naiđe na link u tekstu korisnik će znati da li želi da pročita više o temi.

§  Proveriti vidljivost linkova.   Posetilac bi trebalo da bude u stanju da lako prepozna šta je link, a šta nije. Linkovi su obično dati u plavoj boji ili u kontrastnoj boji.

§  Ne podvlačiti ili bojiti normalan tekst.   Ne podvlačiti normalan tekst ukoliko to nije apsolutno neophodno. Baš kao što korisnici treba da lako prepoznaju veze, oni ne bi trebalo da dobiju ideju da nešto kliknu, a da to ustvari ne predstavlja vezu ka drugom dokumentu.

§  Kliknom na link, on treba da promeni boju.  Ova tačka je veoma važna za upotrebljivost Web sajta. Veze koje su već bile otvorene i koje promene boju, pomažu pri lakšem snalaženju.

§  Ne koristiti animirani GIF.  Ako sajt ima reklamne banere koji zahtevaju animaciju, izbegavati animirane GIF-ove. Oni čine da sajt izgledati neprofesionalno i odvlače pažnju od sadržaja.

§  Uveriti se da je korišćen ALT i TITLE atribut za slike.  Pored toga što je koristan u  SEO-u. ALT i TITLE atributa za slike će igrati važnu ulogu za korisnike sa invaliditetom.

§  Ne koristiti jake boje.  Dizajn paleta boja ne treba da odvlači pažnju sa sadržaja niti da stvara neprijatnost kosniku pri gledanju u stranicu.

§  Ne koristiti iskačuće prozore.  Ova tačka odnosi se na iskačuće prozore bilo koje vrste.

§  Postaviti funkcionalne veze u podnožju.  Ako nisu pronašli korisnu informaciju na stranici, korisnici se kreću ka podnožju. Najbolje je postaviti jednostavnu (slovnu) navigaciju, koja je jednaka onoj početnoj.

§  Izbegavati duge strane.  Korisnici, uglavnom, ne čitaju sve što je napisano na stranici, već je skeniraju pogledom. Zato treba izbegavati duge stranice.

§  Ne postavljati horizontalno ili vertikalno pomeranje stranice (skrolovanje). Najviše korišćena rezolucija ekrana je danas 1024 k 768 piksela, pa Web aplikacija treba da se uklopi u te dimenzije.

§  Nema pravopisnih ili gramatičkih grešaka.  Ovo nije dizajn greška, ali to je jedan od najvažnijih faktora koji utiču na ukupni kvalitet Web aplikacije. Proveriti da linkovi i tekstovi ne sadrže pravopisne ili gramatičke greške.

§  Ako koristite CAPTION filter, proverite da li su slova čitljiva.   CAPTION filteri se koriste kao zaštita od neželjene pošte ili komenatara. Postoji samo jedan problem sa njim -  korisnik uglavnom treba da izdvoji mnogo vremena da dešifruje pismo.

§  Iznervirani posetilac je izgubljeni  posetilac.

GLAVA III - ESTETIKA WEB APLIKACIJE

3.1.      DIZAJN

“It seems that perfection is reached not when there is nothing left to add,

but when there is nothing left to take away.”

Antoine de Saint-Exupéry; Terre des hommes, 1939

Dizajn je trodimenzionalni ili dvodimenzionalni izgled celog proizvoda, ili njegovog dela, koji je određen njegovim vizuelnim karakteristikama, posebno linijama, konturama, bojama, oblikom, teksturom i materijalima od kojih je proizvod sačinjen, ili kojima je ukrašen, kao i njihovom kombinacijom.[26] Dizajn je umetničko oblikovanje predmeta za upotrebu.

U načelu se i likovna umetnost i dizajn, pa tako i Web dizajn,  kao primenjena umetnička disciplina bave organizacijom vizuelnih elementa (linija, boja, oblik, i sl.) na dvodimenzionalnoj ravni (grafički dizajn, Web dizajn) ili u trodimenzionalnom prostoru

(arhitektonski dizajn, grafički dizajn, industrijski dizajn)[27].

3.2.          WEB DIZAJN

„Web dizajn je dvosmisleni  trermin. Web profesionalci ga definišu različito.  Iako bi se moglo definisati kao programiranje pozadinske funkcionalnosti  stranica,   dizajn se još može definisati kao razvoj interfejsa i stvaranje slike (utiska, imidža)  o određenoj organizaciju ili pojedincu.’’[28] 

Web dizajn kao disciplina se može svrstati u oblast primenjenog dizajna (grafičkog, industrijskog, dizajna enterijera), ali se može posamtrati i kao polje umetnost (slika, ilustracija, skulptura). Kako bi se mesto Web dizajna u celokupnoj oblasti dizajna, sagledalo, trebalo bi imati u vidu da u Web dizajnu ima nasledstva iz drugih umetničkih formi (litografija, tipografija, slika/ilustracija, industrijski dizajn....)

Web dizajn je proces izrade i razvoja Web aplikacije u kome učestvuju (Web dizajner, Web programer, stručnjaci iz oblasti marketinga, umetnički direktori i drugi). Ovaj proces uključuje planiranje, koncepciju, izradu, testiranje, održavanje Web aplikacije.

Funkcije Web dizajna

·         Dizajn Web aplikacije bi trebalo da bude atraktivan i privlačan ciljnoj grupi kojoj se obraća.

·         Dobar Web dizajn podrazumeva prepoznavanje svake stranice kao jedne celine i  intuitivno kretanje kroz aplikaciju.

·         Web dizajn treba maksimalno da iskoristi načela, principe i zakone Web upotrebljivosti i vizuelnog dizajna.

·         Web aplikacija koja je dobro dizajnirana je spona između korisnika i same aplikacije.

3.3.          ZAKONI I PRINCIPI ESTETIKE

Ako želimo da pišemo o estetici, pa i o estetici Web aplikacija, potrebno je da se upoznamo sa osnovama  i prinicpima dizajna uopšteno. Primarna načela su jednaka za sve oblasti u kojima se dizajn primenjuje i ograničena su jedino ograničenjima različitih medija. [29]

Možemo grupisati  sve osnovne principe dizajna u dve kategorije: zakoni i elementi. Univerzalni principi dizajna su sveobuhvatne istine profesije. Oni predstavljaju osnovne pretpostavke dizajna u praksi  i utiču na raspored objekata u sastavu.

Zakoni estetike

• Zakon simetrije, 
• Zakon ritma,
• Zakon proporcije,
• Zakon dominacije,
• Zakon jedinstva.

Balans ili  Ravnoteža

Figurativno rečeno, koncept vizuelne ravnoteže je sličan konceptu fizičke ravnoteže. Baš kao što fizički predmeti imaju težinu, tako i elementi dizajna imaju raspored koji korisnik oseća kao vizuelnu težinu. Postoje dva glavna oblika vizuelnog stanja: simetrično i asimetrično. Simetrična ravnoteža, ili formalna ravnoteža, nastaje kada su elementi kompozicije postavljeni  oko  zamišljene osne linije (vertikalne ili horizontalne). Asimetrična ravnoteža, ili neformalni balans je malo apstraktniji i često vizuelno zanimljiviji, nego elementi postavljeni u  simetričnoj ravnoteži. Za razliku od simetrične ravnoteže, asimetrični balans je veoma raznovrstan i kao takav, on  se primenjuje mnogo češće pri izradi Web stranica.

Simetričan balans  -  Kada je težina kompozicije ravnotežno raspoređena oko centralne horizontalne ili vertikalne ose, tada nastaje simetrično stanje ili simetrija. Simetriju poznajemo iz geometrije. Za simetriju su nam potrebna najmanje dva oblika koji zadržavaju udaljenosti među tačkama. Približna simetrija je kada se elementi postave prema sličnim, ali ne i identičnim obrascima. Pod simetrijom se pod normalnim okolnostima podrazumeva jednaka postavka elemenata na obe strane. Ako su elementi postavljeni oko centralne tačke onda se postiže radijalna simetrija. Simetričan bilans je poznat kao formalna ravnoteža.

Asimetričan balans - Asimetrična ravnoteža se javlja kada težina kompozicije nije ravnomerno raspoređena po centralnoj osi. Asimetričnost podrazumeva uređenje objekata različite veličine tako da su ravnotežni jedni u odnosu na druge sa svojim vizuelnim tegovima. U principu, asimetrične kompozicije imaju tendenciju da donose veći osećaj vizuelne napetosti. Asimetrija nastaje upotrebom elemenata nejednake veličine i težine. Asimetrični balans je takođe poznat kao neformalna ravnoteža.

  Slika 14. Primer vertikalne ravnoteže na Web stranici

ZAKON SIMETRIJE – temelji se na načelu da su delovi leve i desne strane u ravnoteži u odnosu na središnju osu; to je odnos međusobnih težina u kojoj je težina leve strane jednaka težini desne; ona postavlja odnose veličina u vodoravnom položaju; u likovnosti predstavlja zaustavni element, statičnost, koheziju, povezivanje; ravnoteža slike se postiže veličinom oblika, tonskom gradacijom i bojom. [30]

Ritam

Ritam je ponavljanje ili smenjivanje elemenata, često u definisanim intervalima između njih. Ritam je pravilna izmena ili ponavljanje elemenata. Pravilnost se očitava u prepoznatljivom i izmerljivom algoritmu, načinu odabranom da se promena izvrši. Promenu i izmenu osećamo kao novi stimulans za čula. Ritam može stvoriti osećaj pokreta. Postoje  različite vrste ritma:

·         Pravilan ritam nastaje kada su intervali između elemenata, slične veličine ili dužine.

·         Tečni ritam (lagani ritam) daje osećaj kretanja i često je više organski po prirodi.

·         Progresivni ritam kroz progresiju koraka pokazuje deo forme.

  Slika 15. Primer primene pravilnog ritma u dizajnu Web stranice

ZAKON RITMA – osnova pokretljivosti, dinamike, života; osnovna linija ritmičkog pokreta je dijagonala; ritam se postiže gradacijom ravni, suprostavljanjem linija, sukobom svetlo – senka (barok), i nanosom boje (toplo – hladno; impresionizam); predstavlja izmenu elemenata i njihovih intervala – suprotan je simetriji.[31]

Proporcija

Proporcija je poređenje dimenzija ili raspodela formi. Proporcija je  veza proporcionalnosti između dva elementa, ili između celog predmeta i nekog negovog dela. Različite proporcije u okviru kompozicije mogu biti povezane sa različitim vrstama balansa ili simetrije, te mogu pomoći da se uspostavi vizuelna težina i dubina. Zanimljiv način stavljanja naglaska na strani  je pomoću proporcije. Proporcija je princip dizajna koji ima veze sa razlikama u nivoima objekata. Ova razlika u odnosu privlači pažnju gledalaca na objekat koji želimo izdvojiti.

 Jedno od najstarijih pravila skladnosti je proporcija zvana "zlatni rez" koji glasi:

‚‚ Manji deo prema većem, odnosi se kao veći deo prema celini.“

Pravilom zlatnog reza služili su se Egipćani i Grci (Partenon) pri oblikovanju svojih hramova. Matematički prikaz proporcije  "zlatni rez":        

M : m = M : (M + m)

    

Slika 16. Primena zakona proporcije na Web stranici

ZAKON PROPORCIJE – usklađuje veličinu i položaj oblika prema strmom položaju; predstavlja idealnu kombinatoriku između simetrije i ritma.[32]

Dominacija

Dominacija se odnosi na različite stepene naglašavanja u dizajnu. Dominacijom se određuje vizuelna težina kompozicije, utvrđuje prostor i perspektiva i često odlučuje o tome šta prvo privlači pažnju oka, kada posmatra rezultat dizajna. Postoje tri faze dominacije, svaka je povezana sa težinom određenog predmeta u okviru kompozicije.

·         Dominantna faza:  Objektu se daje najviše vizuelne težine, element sa najvećim naglasakom je u prvom planu u kompoziciji.

• Pod-dominantna faza:  Naglasak u kompoziciji je na sekundarnom elementu, ili na elementima koji su u  sredini.
• Podređena faza:  Objekat kome je data najmanja vizuelna težina, elemenat tercijarne naglašenosti koji je u zadnjem planu kompozicije .[33]

  Slika 17.primena zakona dominacije na Web stranici

Primenom zakona dominacije naglašava se određeni element kako bi skrenuo pažnju posmatrača. Pri dizajnu Web stranice, često se identifikuje stavka u sadržaju, ili samom rasporedu koja  se želi izdvojiti. Jedna metoda postizanja takvog naglašavnja je stavljanje tog elementa u fokus. Ključna tačka  je naglašena na stani, tako da privlači pogled i odskače od celine stranice ili  se ne „meša’’ sa okolinom. Na primer, to može biti dugme koje korisnici treba da pritisnu ili poruka o grešci koju treba pročitati.

            Kao i kod jedinstva, postoji nekoliko načina za grafičko naglašavanje: kontrastom (bojom, oblikom), odstupanjem od kontinuiteta sadržaja, izolacijom određenog grafičkog objekta.

ZAKON DOMINACIJE – hijerarhija po važnosti delova u formi; manja stranica u odnosu na veću, odnosi se kao veća naspram celine; povezuje zakone simetrije, ritma i proporcije; potavlja dinamički odnos ravnoteže. [34]

Jedinstvo

Zakon jedinstva opisuje odnos između pojedinih delova i cele kompozicije. Različiti elementi kompozicije su u međusobnoj interakciji. Ovaj koncept istražuje aspekte datog dizajna koji su neophodni da da bi se stvorila jedinstvena komozicija, da bi se pružio osećaj celovitosti ili da se razdvoje smislene celine. Jedinstvo u dizajnu je koncept koji potiče od Geštalt teorije vizuelne percepcije i psihologije, posebno se bavi pitanjem kako ljudski um organizuje vizuelne informacije u kategorije ili grupe.

Geštalt efekt se odnosi na sposobnost formiranja obrazaca, naših čula, posebno u pogledu vizuelnog prepoznavanjJa likova i cele forme umesto samo zbirke jednostavnih linija i krivih. Izraz  „Celina je veća od sabiranih delova“  se često koristi kao  sažeto objašnjenje Geštalt teorije. Kada posmatramo Web aplikaciju zakon jedinstva se odnosi na konzistentnost elmenata koja omogućava percepciju pripadnosti elemenata Web lokaciji (npr. navigacija uvek treba da se nalazi na istom mestu na svakoj Web stranici).

Teorija dizajna opisuje jedinstvo kao  način na koji su različiti elementi kompozicije u interakciji jedni sa drugima. Važno je da jedinstvo postoji ne samo unutar svakog elementa Web stranice, već na celoj stranici, sama stranica mora činiti celinu. Stavljanje predmeta blizu jedno drugomu zavisnosti od sadržaja, stvara žarište prema kojem će oko gravitirati.

Estetska načela

Estetska načela – su estetski oblici koji usklađuju međusobne odnose unutar kompozicije. To su odnosi koji se temelje na optičkom momentu razrađivanja ravni, na detaljima koji su u međusobnoj zavisnosti i posmatranoj celinu, s psihološkom porukom.

·         Harmonija – predstavlja kombinaciju istih ili sličnih elmenata u celini; mirnoću, nenaglašen ritam, mir i slaganje; sličnost može biti postignuta oblikom, veličinom i bojom. Web dizajner će postići harmoniju celokupnog Web sajta pored navedenog i vodeći računa o poravnanjima gornjih, donjih, bočnih ili centralnih delova svih grafičkih i tekstualnih elemenata na stranicama.

·         Kontrast – predstavlja sadržaj suprotnog, maksimiranje razlika veličina i iznenađenje novog elementa; kontrast je prekid i pauza, a može se postići razmakom oblika, tamno - svetlo, razlikom u jačini  boje, odnosom horizontalnih i vertikalnih linija. Web dizajn primenjuje kotrast kako bi nizanjem i postavljanjem grafičkih i tekstualnih elemenata naglasio  nešto iz sadržaja Web stranice.

·         Beline - u grafičkom dizajnu izraz beline (ili negativan prostor) bukvalno se odnosi na bilo koju oblast stranice koja nije pokrivena tekstom  ili ilustracijama. Iako mnogi Web dizajneri (i većina klijenata) osećaju potrebu da popune svaki pedalj Web stranice sa slikama, tekstom, tabelama i podacima, prazan prostor na stranici je važan kao što je važan sadržaj. Bez pažljivo planirane beline, dizajn će biti ugušen, kao prepuna soba. Beline pomažu dizajnu da  diše.

·         Ponavljanje - ponavljanje boja, oblika, tekstura, ili sličnih objekata pomaže povezanosti dizajna Web stranica, tako da se oseća kohezivna celina čitave Web aplikacije.

·         Obim i dubina - obim i dubina nekog elementa u Web dizajnu su određeni perspektivom, proporcijom, pozicijom svetla i senki.[35]

·         Pravilo trećine - je jedna od kompozicijskih tehnika u fotografiji i drugoj vizuelnoj umetnosti poput slikarstva. Prema pravilu, slika (ekran) je podeljena u devet jednakih delova, i to sa dve horizontalne i dve vertikalne crte jednako razmaknute. Time nastaju četiri preseka u koja se obično smešta glavni objekat na slici (ekranu).

Ovakva kompozicija slici daje više energije, interesa i veću napetost, od jednostavnog smeštanja objekta u centar, što može delovati monumentalno, nepokretno i eventualno neinteresantno.[36]

3.5.           ELEMENTI WEB DIZAJNA

Elementi Web dizajna su nasleđeni iz veće oblasti dizajna.  Kada govorimo o estetici moramo se osvrnuti i na elmente koji su osnova vizuelne umetnosti, dizajna, a samim tim i osnova estetike. Elementi dizajna su osnovne komponente koje se koriste za stvaranje bilo koje vizuelne kompozicije.

Tačka - Piksel

   Slika 18.Piksel kao osnovi element slike

Tačka je oblik bez ijedne naglašene dimenzije: ni visine, ni širine, ni dužine. Time je tačka gotovo apstraktan, nedefinisan oblik koji je osnova, polazište za sve druge vizuelne oblike: kretanjem i ostavljanjem traga stvara liniju, a proširenjem u određenom trenutku nastaje ravan, kao i zgušnjavanjem mnoštva tačaka.  

Uprkos toj neuhvatljivosti, tačka je vrlo jasna likovna i optička vrednost kojom možemo graditi, varirati i kombinovati. Tačke možemo nizati ili njima teksturirati oblike pravilnim i nepravilnim grupisanjem. Možemo  oponašati i različite strukture, npr. peska ili brusnog papira.

U Web dizajnu je tačka  - piksel. Piksel (engl. pixel skraćeno px, skraćeno od picture element, deo slike) je u rasterskoj grafici najmanji deo digitalne slike kojem se mogu dati boja i druge osobine, ili koji se može obrađivati. [37] U računarstvu, slika sastavljena od piksela je poznat kao slika sastavljena od tačaka ili rasterska slika.
             Piksel je takođe najmanja adresibilna tačka koju monitor može da predstavi. Kod monitora sa katodnom cevi jedan piksel čine tri jako bliske tačke redom crvene, zelene i plave boje (RGB). Menjanjem intenziteta boje svake od ove tri tačke menja se ukupna boja celog piksela. Kod TFT ili LCD ekrana pikseli su unapred čvrsto definisani kao mali kvadrati ili pravougaonici. Svaki od njih je podeljen na još tri površine koje se zovu subpikseli i takođe su crvene, zelene, odnosno plave boje .

 

Linija

Linija je prirodni nastavak tačke, a istovremeno karakteršu je dužina i smer. Matematičkim jezikom liniju možemo definisati kao skup tačaka u ravni. Istina koju lako možemo dokazati nižući tačke gusto poređane jednu uz drugu. Još bolje iskustvo steći ćemo na ekranu računara zatamnjujući pixele jednog za drugim.

Linija može stvoriti obrise i oblik, perspektive i nastavak, a grupisanjem  može stvoriti osećaj vrednosti, gustine i teksture. Linija je najčešći element grafičkog dizajna. Prilikom dizajniranja Web sajtova, većina ljudi samo misli o linijama kao CSS granicama ili hipervezama (donja linija) , ali se može koristiti na mnogo drugih načina kako bi se stvorila kvalitetna i zanimljiva Web kreacija.

Kada je linija dijagonalna, to izaziva osećaj pokreta i uzbuđenja. Kao domino koji je usred pada. Dijagonalne linije imaju potencijal energije. Korišćenjem modela horizontalne linije kao pozadine elementa obezbeđuje se tekstura i interesantan  dizajn, ali koristeći obrazac dijagonalne linije učiniće da korisnici  stranicu osećaju malo više „na ivici", izazivajući oči korisnika da se stalno pokreću.

 

Oblik  i  forma

   Slika  19. Oblik i forma

Najdenostavnija definicija oblika je da je to zatvorena kontura, elemenat definisan svojim parametrima. Postoje tri  osnovna oblika: krug, pravougaonik (kvadrat) i trougao. Oblik nam daje osećaj trodimenzionalnosti. Pojam forma i oblik se često koriste kao sinonimi. U stvarnosti forma je izvedena iz tačaka, linija i oblika.

Tekstura

Teksture su kompleksna kombinacija oblika, obrisa, linija i likova.  Tekstura se koristi za kreiranje izgleda površine.[38] Tekstura je i vizuelni i taktilni fenomen. U vizuelnoj  umetnost, tekstura je percepirana karakteristika  površine delova umetničkog dela. Element dvodimenzionalnog i trodimenzionalnog dizajniranja i odlikuje ga doživljaj dvodimenzionalnosti ili trodimenzionalnosti kompozicije. Kombinovanjem tekstura,  drugim elementima dizajna, mogu se preneti različite poruke i emocije.

Teksture i šare se koriste češće nego što možda izgleda. Razlog što ih mi ne vidimo  je zato što obično ostaju u pozadini i daju podršku celokupnom dizajnu stranice, zamenjuju  standardne boje pozadine i stvaraju atmosferu. Teksture se  gotovo nikada ne ističu. Koriste se prvenstveno za pozadinske slike. Funkcija tekstura i šara je omogućavanje boljeg uočavanja sadržaja Web stranice.

        Slika  20. Gruba i organska tekstura

Boja

Boja je odgovor oka na različite talasne dužine zračenja u okviru vidljivog spektra. Vidljiv spektar je ono što mi opažamo kao svetlost. To je deo elektromagnetnog spektra koji možemo da vidimo. Tipično ljudsko oko reaguje na talasne dužine od 400-700 nanometara (nm), sa crvenom kao na jednom kraju (700 Nm), ljubičasta na drugom (400 Nm) i svaka druga boja između ova dve.

Sastavni deo vizuelnog identiteta Web aplikacije je kompanijska boja. Psihologija boja je oblast istraživanja posvećena analizi emocionalnih i bihevioralnih efekata koje  proizvode boje i/ili kombinacije boja. Na primer, vlasnici e-prodavnica koriste psihologiju boja kako bi saznali  koja boja će  inicirati posetioce da potroše više novca.

Tabela 4. pokazuje kratak presek asocijacija koje ljudi imaju kada vide određenu boju.

Tabela 4. Značenje i simbolizam boja[39]

    Razvojem tehnologije nastali su različiti načini mešanja boja. Pojavili su se novi modeli (režimi) boja. U štamparstvu se pojavio model boja CMYK (cyan, magenta, yellow, and key, or black). Kao primarne boje uzete su ove ove tri boje i crna sa kojom se vrši nijansiranje, a iz kojih se mogu proizvesti sve ostale boje.  Razvojem elektronike nastao je model boja RGB (Red Green BlueBlue). Ovaj kolor model se koristi na raznim elektronskim uređajima kao što su televizori, monitori, projektori itd.  Razlika između RGB i CMYK  je u tome što se u RGB modelu mešaju obojene svetlosti različitog inteziteta, a ne same boje i na taj način proizvode sve ostale boje iz spektra.

   Slika  21. Točak boja

RGB model

            RGB je skraćenica početnih slova osnovnih boja na engleskom tj. od reči Red, Green i Blue, a predstavlja aditvni kolorni model koji se koristi kod monitora i televizora.[40]

   Slika 22. RGB model

Kod televizora i monitora (kao i kod novina) slike su podeljene na veliki broj mali obojenih tačaka koje imaju mogućnost da ljudskom mozgu saopšte kopletnu sliku. Kod monitora te tačke se nazivaju pikseli (pixel). Standardna rezolucija kod današnih korisnika interneta je oko 800x600 piksela.  Jedan piksel se sastoji iz tri dela, jedna je crvena tačka ili fosfor, druga je zeleni fosfor i plavi fosfor. Crveni piksel se dobija uključivanje crvenog fosfora, dok ostala dva bivaju isključena. Međutim nije potrebno samo uključivati i isključivati fosfore u pikselu da bi se dobila boja. Potrebno je i odrediti intezitet svake komponente, na taj način dobijamo osvetljenje. Različiti inteziteti ova tri dela u pikselu proizvode različite boje. Računari mogu da generišu po 256 zasebnih nivoa crvene boje, tako i zelene i plave. Ljudsko oko nije u stanju da razlikuje susedne nivoe koji su mnogo blizu jedan drugog.

CMYK model

   Slika 23.  CMYK model

Mešanjem cijana sa žutom proizvodi plavu itd. povećanjem količine svake komponente krećemo se u pravcu crne, dok odsustvo svih komponenata stvara belu. 

CMYK model koristi se kod štampanja. Mešanjem tri primarne boje cijan, magenta i žuta ne proizvodi se puna crna boja, pa je ovom modelu dodata i crna kao četvrta boja. Npr. da bi dobili ljubičastu unećete  5% cijana, 56% magente, 0% žute, i 39% crne boje.

Zbog tehničkih razlika u uređajima za predstavljanje boje kao što su skeneri, štampači i monitori, postoje različito definsani takozvani  gamut, tj. opseg boja koje mogu da se proizvedu na tim uređajima sa običnom izvornom svetlosti. Kod RGB boja gamut iznosi oko 70% svih boja. Kod CMYK modela gamut je mnogo manji oko 20%.

HSV model

HSV je skraćenica od prvih slova engleskih reči Hue, Saturation, i Value, a koriste se za opisivanje boja. Ovaj sistem je poznat kao Munsell Color System, koji nazvan po američkom slikaru Albert H. Munsell, ( 1858-1918) koji je radio u timu od pet umetnika na organizovanju sistema boja za njihovo bolje razumevanje. Munsell Color System usvojen je od strane američkog odseka za standarde i poznat je kao Inter-Society Color Council- National Bureau of standards (ISCC NBS) system. Ovaj model se koristi kod  većine  grafičkih programa. 

  

U HSV sistemu svaka boja rastavlja se po tri ose: 

• Hue - nijansa se može opisati kao predstavljanje pozicije boje u točku boja, u kome su osnovne, sekundarne boje i njihove kombinacije. To su boje iz spektra boja kao što su crvena, plava, zelena, žuta itd. - čista dugina boja sa točka boja. Heksadecimalna vrednost boje na HSV točku boja predstavlja istu boju u heksadecimalnom formatu za RGB sistem boja.
• Saturation - predstavlja intezitet boje, tj. odnosi se na dominaciju nijanse u boji takoreći zasićenost - odnos čiste boje i bezbojne sive.
• Value - govori nam koliko će boja biti tamna ili svetla, intezitet osvetljenja odnosno, ukupna svetloća boje. Da bi podesili svetlu boju, pomeša se boja sa belom (TINT), a ako se želi dobiti tamnjija pomeša se boja sa crnom (SHADE). Boju pomešanu i sa crnom i sa belom prpoznajemo kao ton. Bela, crna i siva su neutralne boje.[41]

Da bi se dobila mogućnost kreiranja boja polazi se od osnovnih boja tj. crvene, plave i žute. Mešanjem osnovnih boja dobijamo sekundarne boje: narandžastu (crvena i žuza), ljubičastu (crvena i plava), zelenu (plava i žuta).

Šeme boja

Šeme boja su osnovne formule za stvaranje harmonične i efikasne kombinacije boja. Klasične šeme boja su:

·         Monohromatska šema boja -  sastoji od jedne bazne boje i bilo kog broja nijanse te boje.

·         Analogna šema boja -  sadrži boje koje su u blizini jedna drugoj na točku boja.

·         Šema komplementarnih boja -  sastoji se od boja koje se nalaze nasuprot jedna drugoj na krugu boja, kao što su zelena i crvena, žuta i ljubičasta ili narandžaste i plave.

Glavna boja pozadine

Kada se biraju ostale boje sa palete, prvi uslov je  da postoje bar dve boje koje imaju dovoljno kontrasta da se koriste kao pozadina i boja teksta. Pošto je pravi kontrast između teksta i pozadine od suštinskog značaja za interaktivnost dizajna (bez nje, neki ljudi možda neće moći da čitaju aplikaciju) Web dizajneri noraju biti upoznati sa osnovnim osobinama boja.

’’Kod upotrebe boja na Webu prvenstveno treba voditi računa o kakvoj se Web stranici radi. Naravno da ista pravilane važe za korporativne aplikacije ili Web trgovine i na lične ili umetničke stranice. No, jedna stvar je jedinstvena za obe navedene grupe: svako preterivanje u boji, bilo u kolicini ili u kontrastima dovodi do kiča (osim ako nisu stranice o baštenskim patuljcima). Tako da možete napraviti i crno belu stranicu, no ako je odabir boje fonta loš stranica će doslovno biti odbojna za oči. O stranicama napadnih boja i „lepih šarenih" dugmića mislim da ne vredi ni raspravljati.’’

Denis Slagar, direktor i dizajner, DSD

Srodni koncepti

Postoji i mnogo dodatnih koncepata koji se odnose na elemente dizajna. Oni mogu da sadrže određene termine i / ili tehnike koje se oslanjaju, na neki način, na osnovu jedne ili više gore navedenih ideja. U kolekciju kompozicionih alata na raspolaganju za korišćenje od strane dizajnera se dodaju: anatomija slova, beline oko teksta, font,  poravnanje teksta, raspored na stranici, olakšano snalaženje, efekat korisnosti, pokret ...

Anatomija slova i adekvatan izbor fonta  -  Tipografija se bavi izborom i organizaciJom oblika slova i drugih grafičkih karakteristika štampane strane. Ona se bavi svim pitanjima koja utiču na izgled strane i doprinose efikasnosti štampane poruke: oblikom i veličinom slova, znacima interpunkcije, dijakritičkim znacima i specijalnim simbolima; razmakom između slova i reči; razmicanjem redova; dužinom redova; veličinom margina; količinom i mestom ilustracija; izborom naslova i podnaslova; korišćenjem boje i svim ostalim pitanjima prostorne organizacije ili „konfiguracije“.

Vrsta, rez i karakter pisma moraju odgovarati sadržaju teksta. Svako pismo izaziva određene asocijacije i može da bude meko ili strogo, emocionalno ili racionalno. Dizajner ima tu ulogu da izabere vrstu pisma, pri čemu uvek treba voditi računa da se izabere pismo koje je po određenoj meri čitaoca i naravno koja je vrsta čitaoca. Za lepotu stranice pismo ima veliki uticaj. Preporuka je da se ne koristi više od tri različita tipa fonta za jednu prezentaciju.[42]

Beline oko teksta  - Beline oko teksta su petrebne kako bi tekst bio čitak i uočljiv. Ako je tekst „zbijen’’ i nema slobodnog prostora korisnik će se osetiti nelagodno i neće moći da se skoncentriše na tekst.

Ponavljanje elemenata  -  Ponavljanje boja, oblika, tekstura, ili sličnih objekata pomaže povezanosti dizajna Web stranica, tako da se oseća kohezivna celina čitave Web aplikacije.[43]

Poravnanje teksta  -  Poravnanje elemenata na stranici (alignment) – odnosi se na poravnavanje gornjih, donjih, bočnih ili centralnih delova svih grafičkih i/ili tekstualnih elemenata na stranici; poravnavanje levih ivica elemenata npr. naslova, podnaslova i tekstova na stranici doprinosi boljoj percepciji povezanosti elemenata i preglednijoj i čitljivijoj vizuelnoj strukturi stranice.

Raspored na stranici  -  Izgled stranice je važan jer ljudi očekuju da se stvari nalaze na određenom mestu na Web sajtu. Dizajneri Web stranica obično žele da eksperimentišu sa najnovijim trendovima Web dizajna i grafike, ali je za  pri dizajniranju najvećeg broja Web aplikacija važno držati se  konvencija. To znači: sadržaj u sredini stranice, zaglavlja na vrhu, navigacija na vrhu ili uz levu ivicu, naslov stranice, logotip u gornjem levom uglu i neke druge karakteristike dizajna koje čine da stranica izgleda atraktivno.

Olakšano snalaženje - Multimedijani sadržaji na Web sajtu trebaju da imaju opravdanost u vidu olakšanog snalaženja i objašnjenja teme koja se obrađuje na stranici (usluge,robe, vesti, umetnost). Uvek treba ostaviti mogućnost da korisnik bira da li će „iskoristiti’’ ponuđeni materijal i alternativni opis tog materijala u tekstualnom obliku.

Efekat korisnosti  -   Postaviti multimedijalni materijal koji znatno usporava učitavanje Web sajta, je greška koju često čine početnici u želji da ostave utisak. Vizuelni elementi izgledaju kao da su naknadno prikačeni, a sam interfejs često zbunjuje. Ponekad se na takvim lokacijjama primenjuje koncept „novogodišnje jelke". Kada se jasno definiše  namena lokacije, smanjuje se  mogućnost da se „promaši tema’’ i dobija se odgovor na pitanje da li je multimedijjalni sadržaj  uopšte vredno postavljati.

3.6.           TEST ESTETIKE – IMPLEMENTACIJA

3.6.1.     Elektronska prodaja suvenira

Slika 24. Naslovna stranica Web prezentacije Suveniri Srbije – gornji ekran

Slčika 25.  Naslovna stranica Web prezentacije Suveniri Srbije - donji ekran

Site Naslov:   Suveniri Srbije             URL:     http://www.suvenirisrbije.com

1. Anatomija web aplikacije
A. Logo	*
B. Navigacija	*
C.Sadržaj	*
E. Footer	*
G. Konzistentnost elemenata	*
2. Zakoni estetike
A. Balans (ravnoteža)	*
B.  Ritam	*
C. Proporcija među elementima	*
D. Dominacija i naglašavanje sadržaja i elementata	*
H. Jedinstvo elemenata  na stranici	*
3. Estetska načela
A. Harmonija	*
B. Kontrast	*
C. Ponavnanje	*
D. Pravilo trećine	*
E.  Vizuelna buka	*
4. Boje
A. Boja logo-a ili proizvoda je dominantna boja	*
B. Šema boja je odgovarajuća sadržaju sajta	*
C. Glavna boja pozadine	*
D. Boja pozadine i taksta je adekvatna	*
E.  Tekstuta	*
5. Tipografija
A. Adekvatan izbor fonta	*
B. Beline (prazni prostor) oko elemenata	*
C. Poravnanje teksta	*
D. Adekvatna boja tekstualnih elemenata	*
E. Raspored na stranici olakšav asnalaženje i konzistetnat je
6. Multumedijalni sadržaj
A.Da li olakšava snalaženje	*
B. Da li ostavlja efekat korisnosti	*
D. Upotreba Flash animacija ima svrhu	*
E. Da li postoji ``Alt`` tekst koji objašnjava sliku	*
F. Prilagođenost osobama sa posebnim potrebama	*

Ukupna    vrednost:  Izvanredan  i  besprekorno estetski i  funkcionalno dizajniran sajt

Web prodavnica Suveniri Srbije

            Suveniri Srbije je Web prezentacija koja zadovoljava sve kriterijume estetike, ali i fuknkcionalnosti.  Vizuelni prikaz protpuno odgovara tematici kojom se sajt bavi.

            Logo je u gornjem levom uglu nenametljiv, ali upečatljiv u obliku poštanske markice sa pečatom. Osnovna navigacija nas vodi po delovima Srbije, a navigacija sa uz levu ivicu stranice nam omogućava da odaberemo vrstu suvenira koju želimo da vidimo i eventualno naručimo. Sadžaj sa nalazi u glavnom bloku koji je u centralnom delu stranice sa veoma interesantnim i adekvatnim grafičkim detaljima.

Pošto je sajt dizajniran po najnovijim trendovima Web2.0. U gornjem bloku se nalazi Flash animacija koja vizuelno objašnjava tematiku sajta. Pravilo trećine je upotrebljeno i kada posmatramo vertikalni poredak stranice (Flash animacija, sadržaj, podnožje sajta), ali i kada posmatramo horizontalni poredak navigacija, sadržaj, linkovi ka aktuelnotima ili banerima).

            Svi elementi čine kompoziciju koja zadovoljava osnovne principe i zakone estetike. Elelenti kompozicije su postavljeni u ravnoteži oko središne ose. Vertikalnom asimetrijom je dizajner bacio težište na animaciju u gornjem delu stranice, koja bez reči objašnjava kakvi se suveniri nude u ovoj e-prodavnici. Elementi se smenjuju u zavisnosti od toga koja vrsta artikla se nudi, ali se na primer ramovi za slike proizvoda ponavljaju u istom ritmu. U dizajniranju ovog sajta je primenjena pravilna ravnoteža, gde se su intervali između elemenata slične ili iste dužine, jednaki. Proporcijom se naglašavaju bitni elementi nastranici, i to: na vrhu stranice je glavna animacija, u centralnom delu je galerija sa proizvodima, dok su u donjem delu linkovi ka informacijama bitnim za konkretna pitanja o samom sajtu, kao i linkovi ka drugim relevantnim Web lokacijama.

            Stranicama dominira gornji deo, u kome se nalaze fotografija proizvoda koji se mogu naći na pojedinim stranicama (suveniri koji se prodaju). A na stranicama sa konkretnim proivodima težište je postavljeno na galerije slika i opis proizvoda.

            Mironća i nenaglašen ritam, sličnost oblika i poravnanja elemenata čine ovaj sajt  veoma harmoničnim. Kontrast se postiže bojom ramova fotogravija i belina pozadine, kao i različitim linijama i bojama primenjenim pri izradi banera. Ponavljanjem grafičkih elementata dizajneri su sačinili kohezivnu celinu. Primenjene boje su boje iz tzv. palete zemljanih boja, što govorio prirodnim materijalima od kojih su suveniri izrađeni.

Tekstura u pozadini sajta je nenametljiva sa šarama koje potsećaju na šare kojima su se nekada ukrašavali zidovi srpskih kuća. Glavna boja pozadine u kontejneru je bela, čime se postiže isticanje važnih elemenata. Font je čitljiv i korisnik jasno može da razlikuje boje fonta koje su linkovi, tekst koji je opis. Beline oko elemenata su upotrebljene za stavljanje sadržaja u fokus korisnikovog interesovanja.

Multimedijalni sadržaj je u službi  tekstualnog sadržaja kao i u službi funkcije za koju je sajt namenjen (prodaja ponuđenih suvenira). Svaka fotografija ima Alt tekst koji objašnjava sliku i tekst u slučaju da korisnik ima isključenu opciju prikaza slika na pregledaču.

3.7.           PREPORUKE ZA POBOLJŠANJE DIZAJNA WEB APLIKACIJE

Neka bude jednostavno – je princip koga se treba pridržavati u svim dimenzijama Web aplikacije, pa i u dizajnu. Korisnici retko kada uživaju u dizajnu, naime u većini slučajeva oni su u potrazi za informacijama, uprkos dizajnu.  Korisnk će zastati na kratko da se divi zanimljivoj primeni boja ili grafike, ali ono što će ga naterati da se vrati – jeste zapravo sadržaj i kvalitetne informacije sa stranice.

Da bi se principi dobrog Web dizajna koristili  pravilno, potrebno je razumeti način na koji korisnici komuniciraju sa Web aplikacijama, kako oni razmišljaju i kakvi su njihovi obrasci ponašanja na internetu.  U narednom prilogu su nabrojani neke od aktivnosti na koje treba obrtatiti pažnju prilikom izrade Web aplikacije, a koje se tiču Web dizajna.

§  Web dizajn podrazumeva i upoznavanje publike kojoj je aplikacija namenjena. Različite kulture reaguju različito na boje. Slično je i sa različitim demografskim segmentima i godinama starosti. Na primer, mladi ljudi će bolje reagovati na zasićene boje, dok stariji uglavnom više vole pastelne i zagasite boje.

§  Steve Krug je primetio da korisnicima ne treba ostaviti mogućnost da misle.[44] Steve Krug smatra da Web stranica treba da bude očigledna razumljiva sama po sebi. Ako navigacija i arhitektura aplikacije nije intuitivna, broj upita od strane korisnika raste i otežava im da shvate kako sistem funkcioniše. Umereno vizuelno izdvojeni linkovi, prepoznatljive stranice, jasno istaknuta navigacija mogu da pomognu korisnicima da lako nađu put do svog ciljja.

§  Fokusiranje pažnje korisnika na određene delove stranice sa umerenom upotrebom vizuelnih elementa daje osećaj orijentacije. 

§  Moderni Web dizajn je kritikovan zbog ’’1-2-3-uradi koraka’’.  Naime, dizajneri koriste velike tastere sa vizuelnim efektima koji navode korisnika na akciju. Međutim, ovakav pristup olakšava davanje uputstava i veoma je efikasan, jer umesto dugog teksta koji objašnjava neku akciju, korisnik sledi kratke rečenice koje su objašnjene slikom. To je dobar i user-friendly način komunikacije sa Web aplikacijom jer korisnik odmah jasno vidi šta mu je na raspolaganju.

§  Tekst treba da je efikasno raspoređen na stranici. Treba koristiti kartko i sažeto izražavanje. Raspored teksta treba da bude čitljiv pri brzom skeniranju pogledom.

§  Ne treba izbegavati beli prostor (beline) ili prazan prostor između paragrafa, slika, dugmića u drugih elemenata na strani, jer on pomaže smanjenju kongnitivnog opterećenja posetioca i omogućava odličnu vidljivost informacija na ekranu. Ako se postavi pitanje, prilikom dizajniranja sajta, da li upitrebiti liniju  ili beli prostor, kako bi se razdvojio sadržaj, bez sumlje treba se dolučiti za upotrebu belina.

• Koristiti beli prostor jer je studija sprovedena 2004-te godina je pokazala da dobra upotreba belog prostora u paragrafu kao i u levoj i desnoj margini može da poboljša rezonovanje za 20%. Čitaocu je lakše da se fokusira na sadržaj sa lepim razmakom. [45]

§  Koristiti hijerarhijsku strukturu kako bi se smanjila kompleksnost stranice. Vizuelna hijerarhija pomaže korisnicima da lakše sagledaju sadržaj stranice.

§  Efikasna komunicija sa "vidljivim jezikom"[46]. Aron Markus ističe da je potrebno držati se tri principa za formiranje ’’vidljivog jezika’’ aplikacije:

Organizovanje - pruža jasanu i doslednu konceptualnu strukturu.

Štedljivost – podrazumeva da se sa najmanjim brojem znakova i vizuelnih elemenata učini najviše. Četiri glavne tačke koje pri tom treba razmotriti su: jednostavnost (postaviti samo one elemente koji su bitni za komunikaciju); jasnoća (komponente treba da su dizajnirane tao da je njihovo značenje nedvosmisleno); posebnost (svojstva elmenata jasno treba da se razlikuju); naglašavanje (najbitniji elementi treba da budu lako vidljivi).

Komunikacija – Web stranica treba da ima ravnotežu čitljivosti, tipografije, simbolizma, boja, tekstura kako bi uspešno komunicirala sa korisnikom. Pri pisanju teksta najbolje je pisati maksimalno 18 reči ili 50-80 karaktera po liniji teksta.

§  Pri korišćenju boja treba biti obazriv i koristiti mali broj boja u paleti. Četiri ili pet boja (i razlčiti tonovi), uz dodatak bele i crne, će biti dovoljne za dobar dizajn. Previše boja stvara nesklad i ometa korisnika.

§  Veći kontrast se koristi za povećanje čitljivosti. Boje sličnih vrednosti smanjuju čitljivost, a crna slova na beloj pozadini pružaju najveću čitljivost.
Konveniconalni dizajn je ono što korisnici očekuju od stranice. Stiv Krug „sugeriše da je bolje inovirati samo kada se zna da je to stvarno  bolja ideja od konveniconalne’’.

§  Pop-up ili iskačući prozori su elment dizajna koji svakako treba zaboraviti. Skoro svi pretraživači danas imaju opciju blokiranja ovih ’ „iskačućih’’ elemenata i ovu opciju ne uključuju samo oni koji ne znaju da postoji.

§  Nevidljive veze. Posetioci moraju da znaju gde su, gde su bili i gde  mogu da idu. Ako dizajneri ne predstave informaciju na odgovarajući način, posetioci mogu da imaju ozbiljne probleme sa kretanjem po aplikaciji. Tekst koji je link ka određenoj stranici je podvučen i nakon posete, menja boju, ako postoji podvučeni tekst koji nije link, posetilac je zbunjen. Ako treba naglasiti neki deo teksta, onda je najbolje to uraditi ispisom debljim slovima (bold ).

§  Vizuelna buka.  Često - manje  je više. Vizuelna buka je tipičan problem sa kojim se nose dizajneri velikih Web aplikacija. Mnogo vizuelnih detalja na stranici je karakteristika e-prodavnica. Korisniku se nudi mnogo fotografija proizvoda, sa cenama i podacima. U ovom slučaju važi: ’’Manje je često – više.’’

§   Padajući meniji su korisni Web dizajnerima, jer štede vertikalni  prostor na stranici, ali gotovo uvek nerviraju korisnike. Često korisnici ne mogu da fokusiraju miša na tačno onaj deo menija i otvoriti stranicu koju žele. Ako je rastojanje između različitih nivoa navigacije preveliko korisnici moraju da dodatno miša „prevuku ’’ horizontalno,  pri tom se često dešava da pomere miša u isto vreme i vertikalno i da odu na potpuno drugu stranicu. Frustrirajuće.

§  Korisnici popunjavaju formu od vrha ka dnu.  Zato je najbolja pozicija labele u formi, iznad polja koje objašnjava. Ravnanje labele na levo čini formu preglednijom, ali je teško povezati koja labela se odnosi na koje polje. Ravnanje desno radi suprotno, forma je manje pregledna, ali bolje povezuje te elemente. Labele iznad polja su najbolje rešenje u oba slučaja.[47]

• Otvaranje veza u istom prozoru. Posetioci žele da imaju kontrolu nad svim onim što se dešava u njihovom pretraživaču. Ako oni žele da otvore link u novom prozoru oni će to sami učiniti.
• Treba se dosledno držati strukture Web stranica na celom sajtu. Različita postavka navigacije, na primer, gde dugmad za navigaciju menjaju mesta od jedne do druge stranice dovodi do gubljenja konzistentnosti sajta i korisnike usporava u ostvarivanju njihovih ciljeva. Korisnici vole doslednost.
• Koristiti  standardne stilove za dizajn navigacije. Velike kompanije su potrošile mnogo novca u istraživanja, koja se tiču ove tematike i zaključak je da su korisnici navikli da se navigacija nalazi u gornjem levom uglu ili u gornjoj traci za navigaciju. Eksperimentisanja sa navigacijom poređanom u krugu ili u obliku 3D kocke su suvišna.
• Ne menjati automatski veličinu prozora pretraživača na posetiočevoj strani. Neki će dizajneri imati ideju da korišćenjem JavaSkript-a menjaju veličinu korisničkog ekrana. Ta ideja nije dobra, jer kosrisnik želi da bude gospodar svog radnog prostora i postaviće svoje pregledače na onu veličinu prozora koja je njima odgvarajuća.
• Dizajnirati Web stranice vidljivu u 800 x 600 rezoluciji. Mnogi Web dizajneri koriste velike rezolucijje ekrana i dizajniraju stranice tako da se uklope u rezolucije 1024 x 768 ili 1280 x 1024. Listanje stranice vertikalno je u redu, sve dok stranica nema više od dve dužine ekrana, ali horizontalno skrolovanje ekrana je veoma loše, zamorno  i dosadno za posetioce. Danas još uvek 40% korisnika interneta kotisti ekran rezolucije 800 x 600.
• Većina korisnika ne skroluje stranice pri prvom otvaranju, njih čak 77%. U drugom otvaranju Web sajta skroluje samo 16% posetilaca. Ovo je važno znati kada se pravi raspored sadržaja. Najvažnije informacije treba rasporediti u prvom delu stranice koristeći beline i grupisanja.[48]
• Kreirati sopstvenu 404 stranicu. Stranica 404 nam govori posetiocu da tražena stranica nije pornađena. Kako ne bi izgubili posetioca, Web dizajneri mogu kreirati stranicu 404, na svojoj Web lokaciji. Sopstveno kreirana 404 stranica omogućava korisniku da vidi da je na pravoj lokaciji, ali da stranica koju je tražio ne postoji.
• JavaScript opcija je isključena ili se ne može pokrenuti  kod 10% korisnika. To ne znači da treba izbaciti kodove JavaScripta, već da treba obezbediti alternativne tekstualne linkove ili link na mapi sajta, tako da i korisnici sa isključenom opcijom JavaScript, mogu da se kreću kroz Web sajt.

§  Većina korisnika slepo za ad banere. Korisnici koji traže neku konkretnu informaciju ili su preokupirani sadržajem ne primećuju banere. Korisnik ignoriše reklamu i sve u dizjanu što liči na nju (na primer jako stilizovana navugacija).

• Ne postavljati brojač poseta na stranicama. Brojač poseta ne radi ništa, osim što čini da stranica izgleda amaterski. Ako Web tim zaista želi informacije o posećenosti sajta, može koristiti aplikacije koje se danas nide na tržištu (npr. GooleAnalytics), a koji su vidljivi samo onima koji razvijaju i održavaju Web lokaciju.
• Blinkajući (treperavi tekst) je odavno „demode’’ i retko se može naći na nekom sajtu. On odvlači pažnju posmatrača i deluje veoma napadno.
• Jedan od osnovnih atributa Web stranice je njen naslov. U kodu je potrebno navesti naslov strance koji jasno govori posetiocu gde se nalazi. Naslovi se odnose na sadržaj stranice i olakšavaju snalaženje na Web sajtu.

§  Flash uvod je možda način da dizajneri prikažu svoju inovativnost, ali korisnici ga ne vole. Danas je  dugme „skip intro’’ (preskoči uvod) drugo  najčešće kliknuto dugme na internetu. Flash treba koristiti samo u posebnim situacijama. Flash na početnoj stranici je samo gubljenje vremena, kako dizajnerovog tako i posetiočevog.

§  Stranica u izgradnji. Ako ne postoji stranica ili još nije spremna, onda je bolje zaboraviti na nju i onemogućiti linkove ka toj stranici, sve dok ne bude spremna i postavljena na sajt.

§  Korišćenje slika (JPEG, GIF, PNG)  kao pozadine, može da izgleda prihvatljivo, ako je slika prozirna i nije „bučna’’, ali korišćenje slike punog kolora je ono što stranicu čini nečitljivom.

§  Korišćenje velikih slova u celom tekstu je kao da vičete na posetioca. Ako se želi naglasiti neka reč u tekstu, bolje je to učiniti podebljanim ili kurziv slovima.

§  Korišćenje kurziv slova u celom tekstu je takođe ne prihvatljivo, jer je tekst tako napisan veoma nečitak i zamarajući.

• Previše boja na sajtu odvlači pažnju i dekoncentriše korisnika. Treba se držati šeme boja koja je ograničena na nekoliko boja ili nijansi.[49]
• Pri razvoju Web aplikacije primenjivati TETO princip. Testirati u ranim fazama dizajna i razvoja i testirati često je od presudnog značaja za uvid u moguće probleme i pitanja vezana za raspored elementata, upotrebu boja i drugih vizuelnih i estetskih karakteristika. Pošto je dizajn Web aplikacije iterativan proces, znači da se svaka faza u dizajnu treba tesirati. Prema Steve Krug-u , testiranje jednog korisnika, na početku je 100% bolje, nego ne testirati upošte.[50]  Greške koje se ne otkriju na početku procesa je kasnije mnogo skuplje ispravljati, nego što košta testiranje makar 5 korisnika, nakon svake faze izrade paplikacije.

Jedan interesantan zaključak studija o Web aplikacijama je da ljudi zapravo procenjuju knjigu po njenim koricama tj. u našem slučaj Web sajt po njegovom dizajnu. Elementi kao što su layout, konzistentnost, tipografija, boja i stil utiču na to kako posetilac vidi sajt i kakvu sliku projektuje Web aplikacija na posetioca. Sajt ne treba samo da projektuje dobru sliku, već i onu koja je prava za posetioca. Drugi faktori koji utiču na kredibilitet su: kvalitet sadržaja, količina grešaka, učestalost update-a, lakoća upotrebe i pouzdanost autora. [51]

GLAVA IV - ZAKLJUČAK

4.1.          ZAKLJUČAK

U radu  „Upotrebljivost i estetika Web aplikacije’’  je obrađena tematika upotrebljivosti i estetskih karakteristika Web stranica. Analizom karakteristika i primenom testova na konkretnim primerima smo ukazali na važnost estetskih karakteristika i karakteristika upotrebljivosti. Deskripcijom smo naveli najvažnije karakteristike upotrebljivosti i estetike kvalitetnih Web sajtova, a konkretnom analizom smo  utvrdili  realno stanje u oblasti Web sajtova u Srbiji.

            U ovom radu smo dali kratak uvod u istoriju interneta i objasnili koncept  World Wide Web-a, dali i definiciju i opštu podelu Web sajtova, kao i namenu Web sajtova. Definisali smo pojmam upotrebljivosti, nabrojali tehničke karaktreristike upotrebljivog Web sajta  i razmotrili odnos korisnika prema upotrebljivim stranicama na internetu.

            Testom  upotrebljivosti, konkretnih Web prezentacija smo utvrdili konkretno stanje na internet pozornici Srbije. Govorili smo  o bitnim činjenicama o kojima treba voditi računa pri izradi upotrebljive, korisne Web prezentacije. Opisali smo univerzalne principe (zakone i karakteristike) estetike i nabrojali osnovne elemente dizajna. Analizirali smo estetiku pojam  i primenu estetskih principa na konkretnim primerima domaćih sajtova. U radu smo i naveli liste aktivnosti koje bi dizajneri trebali da primene prilikom izgradnje estetski kvalitetne Web prezentacije.

U radu smo pošli od hipoteze : ’’Dobra upotrebljivost i estetika su bitne odlike kvalitetne Web aplikacije.’’ Metodoligija rada, podrazumeva prikupljanje teoretskih znanja kao i već obavljenih istraživanja, od strane eminentnih stručnjaka iz oblasti Web dizajna, izrada testa, testiranja, analiza rezultata. Osim deskripcije primenili smo i istraživanje na konkretnim primerima, po principu slučajnog uzorka.  U radu je dokazana hipoteza da su upotrebljivost i estetika nesumljivo karakteristike koje bitne za nastanak, razvoj i opstanak jedne Web prezentacije. Prilikom testiranja smo dokazali i da se na srpskom Web sazvežđu mora mnogo raditi na svim aspektima dobre Web komunikacije kvalitetnog i upotrebljivog sadržaja i stvaranja lojalnih korisnika i naprednog društva koje koristi sve prednosti civilizacijskuh tekovina.

Na osnovu urađenog istraživanja zaključujemo da postoji nekoliko karakterističnih grešaka kada je u pitanju izgradnja Web prezentacija i to :

a)     Na srpskoj Web sceni postoje mnoge Web stranice urađene bez ikakvog truda oko dizajna i bezoblične ili neuspele  kada je u pitanju funkcija. Ne govorimo samo o ličnim Web stranicama ili onima koje se mogu pronaći na besplatnim serverima, već i o ekstravagandnim korporativnim stranicama pretrpanim Flash animacijama i hvalospevima,  Web protalima koji su napravljeni sa ciljem da nam pruže informacije širokog spektra, a ustvari su pravi izvor konfuzije i po pitanju upotrebljovisti i po pitanju estetike.

b)     Male lične stranice su često pretrpane oblicima. Iako postoje pokušaji neke funkconalnosti, dizajner često više brine o vizuelnom aspektu stranice. Tu se mogu naći jeftine animacije ili  slike postavljene na stranice samo da bi bile animacije, bez ikakve korisne funkcije. Lične stranice često predstavljaju galerije i portfolio ili biografije i priče. Dizajn ovih stranica ima tendenciju da bude u stilu onoga što se često naziva „bombona za oko". To se često svodi na princip: „činiti sve što se može kako bi korisnicima zadržala pažnja".

c)      Uočili smo da je kod  obe vrste Web sajtova, napravljen previd glavnog faktora: ne može postojati oblik bez neke vrste funkcije. Ako Web stranice izgledaju dobro, ali niko ne može da shvati kako (iskoristiti) pristupiti informacijama ili umetnosti, kako se onda mogu smatrati uspešnim? Ipak, tu se ne može funkcionisati bez neke koncepcije obliku. Suština funkcije se oslanja na dizajn, tj. dugmad i navigacioni elementi i ostali elmenti dizajna, treba da budu tako oblikovani da intuitivno navode posetioca da shvati  razlog postojanja tih elemenata, njihovu svrhu i funkciju. Isto se može reći i o strukturi Web stranice.

d)     Veliki korporacijski  sajtovi su često stvoreni  kao funkcionalni (gde se obično mogu pronaći sve potrebne informacije o njima, ali ne retko zastarele). Primećeno je većina korporativnih Web stranica nema nimalo estetskih principa u sebi. Dizajnirane su tako da imaju tendenciju da se svrstaju  u kategoriju onoga što bi mogli svesti pod pojomom  „siguran" dizajn. Orijentacija je na levoj strani, imaju zaglavlja i podnožja, sadržaj ostaje unutar 640 piksela  i tekst čini većinu stranice. To je jednostavno i to je zajedničko - te dve stvari dizajn sajta čine  „sigurnim".  U suštini, ne mora se ponovno izumeti točak i ustanoviti kako  ove stranice rade, jer je korisnik naviknut na izgled i funkcionalnost.

e)     Mnogim Web stranicama na internetu nedostaju funkcionalnost i svrha. Razlog tome je uglavnom to što  - dizajner(i) nisu potpuno sigurni šta bi tačno trebala da bude svrha. Važno za razvoj svake uspešne Web stranice je to da imaju snažnu svrhu tj. poentu i da se ona  sledi do kraja. Nekoliko važnih pitanja na koje bi trebalo odgovoriti: Šta će sajt raditi i kako će funkcionisati? Ko će ga koristiti? Uz pretpostavku da stranice funkcionišu onako kako smo zamislili, šta će krajnji rezultat biti? Koje tehnologije će se koristiti za proizvodnju i da  li postoje ograničenja funkcionalnosti tih tehnologija? Hoće li svako biti u mogućnosti da pristupi i razume prezentovani materijal i primenjenu tehnlogiju?

U toku našeg istraživanja iskristalisalo se nekoliko koraka stvaranja dobrog dizajna i funkcionalnost web aplikacija i to :

a)     Ključ za dobro građene stranice ne leži toliko u tome koliko je šaren dizajn ili koliko je funkcionalna. Ključ je uspeha je solidan balans između funkcije i dizajna, kako bi se prenela predviđena ideja i stvorilo idealno korisničko iskustvo. Prvi korak u razvoju dobrog balansa je jasno razumeti kome je sajt  namenjen, šta se želi postići prezentacijom materijala. Drugim rečima, funkcija Web stranice treba da bude jasno prepoznata pre nego što se počne sa razvojem oblika, odnosno, dizajnom sajta.

b)     Ono što većina dizajnera gleda, kada su diskutuje na temu „dizajn prema upotrebljivosti“ je ustvari diskusija na temu „grafičke umetnosti naspram dizajna“. Argument uglavnom vrti oko relativne zasluge estetike i funkcije („izgleda“ zbog „dela“). Umetnost ima svoje mesto i to može biti deo velike Web stranice, ali stvaranje uspešne Web stranice je - pronalaženje najboljih rješenja za rešavanje problema komunikacije. Web stranica može biti oboje vizuelno privlačna i jednostavna za korištenje.

c)      Nakon utvrđivanja svrhe sajta i shvatanja funkcionalnost, treba pristupiti izradi obrasca. Ovaj korak se obično sastoji od dizajna, kao izgleda i utiska koji će sajt ostaviti, takođe se razmatraju stvari kao što su struktura i organizacija, koje se uklapaju negde između oblika i funkcije. Glavna stavka koju treba uzeti u obzir pri projektovanju oblika sajta je - znati publiku. Povremeno, dobro testiranje upotrebljivosti igra važnu ulogu u pronalaženju suštine i kvaliteta interaktivnosti na relaciji sajt – korisnik. Nekoliko važnih pitanja na koja bi trebalo odgovoriti: Šta korisnici misle o konceptu sajta? Koje boje bi sugerisali korisnici? Koliko sadržaja treba da bude na nekoj stranici i kako bi ga trebalo rasporediti? Da li  navigacijski elementi trebaju da budu na levoj ili desnoj strani stranice? Da li dizajn omogućava lakšu navigaciju i kretanje kroz Web lokaciju?

d)     „Savršenu" ravnotežu oblika i funkcije nije lako i jednostavno pronaći. Neki dizajneri provedu godine i decenije rada na pronalaženju savršene ravnoteže oblika i funkcije, to je često razvojni proces pun promena, jer se menja dizajnerovo iskustvo, primenjena tehnologija, trendovi u dizajnu, kao i odnos prema onome što bi trebalo da podrazumeva pojam „savršena" ravnoteža. Nakon uspešnog pronalaženja ravnoteže forme i funkcije na zadovoljavajućem nivou, vreme je utvrditi nekoliko ključnih indikatora u dizajnu.  Ključna stavka je: funkcionalnost stranica je usklađena sa korisničkim iskustvom. Korisnik se ne „bori’’ sa interfejsom i navigacijom ili pitanjima kao što su  struktura i organizacija sajta. Korisnik će videti samo poruku, bilo da se radi o  dokumentaciji, umetnost, književnost, muzici, videu ili bilo čemu drugom - sve bi trebalo da je transparentno za korisnika. Druga indikacija je da forma sajta odgovara sadržaju, ona nije konfuzna niti zbunjujuća za korisnika. Korisničko iskustvo je ono što je važno za Web dizajn, a ne samo pogled iz ugla dizajnera.

e)     Treba uvek  imati na umu  je da dizajn komunicira sa korisnicima. Ako se kreira Web sajt koji radi i pruža informacije, ali izgleda ružno niko neće želeti da ga koristi. Slično tome, ako je sajt lep, a  ne može se koristiti i nije pristupačan, ljudi možda neće umeti da ga koriste i izgubiće interesovanje za njega. Znači elementi funkcionalnosti i etetike Web dizajna bi trebalo da čine kao kohezionu celinu. Uzimajući u obzir ravnotežu oblika i funkcije treba težiti ostvarenju krajnjeg cilja: idealnog korisničkog doživljaja koji doprinosi kosnosti i vlasniku Web sajta i korisniku istog.

f)       Danas je potpuno jasno da je prevaziđena doskusija oko toga da li je i šta je važnije za korisnika – korisnost ili dizajn. Svrha vizuelnog dizajna je da olakša komunikaciju. Prilikom dizajniranja proizvoda koji imaju komunikacijsku funkciju, upotrebljiv dizajn je jednostavno bolji dizajn, jer stvara situaciju da proizvod bude još bolji u svom poslu.

g)     Upotrebljivost je centralni element za uspešan dizajn. Ne postoji ili / ili. Lideri dizajna su pokazali da Web sajtovi mogu biti i korisni i lepi, ali još uvek nedostaje rečnik za ovakve standarde.

LITERATURA

[ 1]         Lawrence Dave, Tavakol Soheyla: Optimising Aesthetics, Usability and Purpose; Softcover; 2007; ISBN: 978-1-84628-518-9;

[ 2]         Steve Krug:  Don’t Make Me Think!; New Riders Publishing, Berkley; 2006; ISBN 0-321-34475-8;

[ 3]         Joel Sklar: Principles of Web Design; Course Technology; Boston; 2009; ISBN 10: 1-4239-0194-0

[ 4]         Jennifer Niederst Robbins: Web Design in a Nutshell; O'Reilly Media; 2006; ISBN 0-596-00987-9

[ 5]         Jakob Nielsen, Morgan Kaufmann: Usability Engineering; San Francisco; 1993; ISBN 0-12-518406-9

[ 6]         June Coehn: Unusualy Useful Books; New Riders Publishing; 2003; ISBN 0-7557-1206-9

[ 7]         Jakob Nielsen: Prioritizing Web usability; New Riders, 2006; ISBN 0-3213-5031-6

[ 8]         Dave Lawrence, Soheyla Tavakol: Balanced Website Design: Optimising Aesthetic Usability and Purpose; Springer- Vergal Limited; 2007; ISBN 1 -84628-518-6

[ 9]         Claude Ghaoui; Usability evaluation of online learning programs; Idea Group Inc (IGI), 2003; ISBN 1591401054

[10]       Jennifer Niederst Robbins: Learning web design; O’Relly Media; North Sebastopol; 2007; ISBN 978-0-596-52752-5

[11]       Jeremy Vest, Shannon Pochran, William Crowson: Exploring Web design; Cengage Learning, 2005; ISBN 1-4018-7838-5

[12]       Nico Macdonald: What is Web Design; A Roto Vision Book; ISBN 2-88046-686-5

[13]       Claude Ghaoui: Usability Evaluation of Online Learning Programs; Claude Ghaoui; Information Science Publishing; 2003; 1-59149-105-4

[14]       Rudolf F. Graf; Modern Dictionary of Electronics; Oxford: Newnes; 1999, ISBN 0-7506-43315

[15]       David A. Lauer, Stephen Pentak: Design Basics‎;  Cengage Learning;  2007;ISBN 0 -4955-0086-0

[16]       Jakob Nielsen, Kara Pernice: Eyetracking Web Usability; New Riders, 2009; ISBN 0-3214-9836-4

[17]       Tom Brinck, Darren Gergle, Scott D. Wood, Morgan Kaufmann; Designing Web sites that work: usability for the Web;  2002; ISBN1558606580

[18]       Jared M. Spool; Morgan Kaufmann; Web site usability: a designer's guide;  1999; ISBN155860569X

[19]       http://www.webopedia.com/DidYouKnow/Internet/2002/Web_vs_Internet.asp

[20]       http://hr.wikipedia.org/wiki/Web_stranice

[21]       http://www.poslovnaznanja.com/objavljeni-autorski-tekstovi/e-magazin/22-jak-identitet-kvalitetne-karakterne-osobine-brenda.htm

[22]       http://www.useit.caom/alertbox/20030825

[23]       http://www.searchengineguide.com/stoney-degeyter/losing-wait-5-s.php

[24]       http://svezaweb.dzaba.com/Kreiranje/html4/htmlmultimedija.htm/

[25].      http://www.theseofiles.co.uk/usability-check-list.php#browser

[25]       http://www.w3schools.com/browsers/browsers_stats.asp

[26]       http://www.useit.com/alertbox/20030825.html

[27]       http://www.autorskaagencija.com/srp/pitanja/?conid=40

[29]       http://hr.wikipedia.org/wiki/Dizajn

[30]       www.skriptarnica.net/skripte/doc_download/10-skripta-iz-dizajna.html

[31]       http://www.digital-web.com/articles/principles_of_design/

[32]       http://sr.wikipedia.org/sr/pravilotrecine

[33]       http://w ww.thehistoryof.net/history-of-web-hosting.html

[34]       http://www.diskusije.net/filozofija-zivota/boje-i-njihov-uticaj-na-nas-goethe-ova-teorija-boja-gde-ste-vi-2931

[35]       http://www.useit.com/prioritizing/

[36]       http://www.killersites.com/articles/articles_dosAndDontsWebDesign.htm

[37]        www.masternewmedia.org/news/2004/11/16/form_vs_function_why_you.htm

[38]       http://www.snook.ca/technical/colour_contrast/colour.html

[39]       http://www.colorcombos.com/

[40]       http://arhiva.elitesecurity.org/t9073-Obavezno-stivo-za-dizajnere

[41]       http://www.devx.com/projectcool/developer/gzone/color/index.html

[42]       http://www.mundidesign.com/presentation/index2.html

[43]       http://www.w3.org/WAI/ER/existingtools.html

[45]       http://www.smartpixel.net/chromoweb/uks/indexgb.html

[46]       http://builder.cnet.com/webbuilding/0-3883-8-6309338-1.html

[47]       http://www.logit.hr/blog/susjedov-mali-izrada-web-stranica-najgori-izbor/

 

---

[1] http://www.thehistoryof.net/history-of-web-hosting.html

[2] http://hr.wikipedia.org/wiki/HTTP

[3] http://www.webopedia.com/DidYouKnow/Internet/2002/Web_vs_Internet.asp

[4] http://hr.wikipedia.org/wiki/Web_stranice

[5] http://www.poslovnaznanja.com/objavljeni-autorski-tekstovi/e-magazin/22-jak-identitet-kvalitetne-karakterne-osobine-brenda.htm

[6] http://www.logit.hr/blog/susjedov-mali-izrada-web-stranica-najgori-izbor/

[7]Optimising Aesthetics, Usability and Purpose; Lawrence Dave, Tavakol Soheyla; Softcover; 2007;ISBN: 978-1-84628-518-9;

[8] Optimising Aesthetics, Usability and Purpose; Lawrence, Dave, Tavakol, Soheyla; Softcover; 2007;ISBN: 978-1-84628-518-9;

[9] Don’t Make Me Think!;Steve Krug; 2006, New Riders Publishing, Berkley; 2006; ISBN 0-321-34475-8;

[10] Usability Engineering, Jakob Nielsen, published by Morgan Kaufmann, San Francisco, 1994

[11] Usability Engineering, Jakob Nielsen, published by Morgan Kaufmann, San Francisco, 1994

[12] Usability – Context, Framework, Definition, Design and Evaluation; Shackel B.;Cambrige University Press; 1991

[13] Usability Engineering, Jakob Nielsen, published by Morgan Kaufmann, San Francisco, 1994

[14] http://www.useit.caom/alertbox/20030825

[15] http://www.searchengineguide.com/stoney-degeyter/losing-wait-5-s.php

[16] Principles of Web Design; Joel Sklar; Course Technology; Boston; 2009:ISBN 10: 1-4239-0194-0

[17] http://svezaweb.dzaba.com/Kreiranje/html4/htmlmultimedija.htm/

[18] http://www.theseofiles.co.uk/usability-check-list.php#browser

[19] Web Design in a Nutshell, Jennifer Niederst Robbins; O'Reilly Media; 2006; ISBN 0-596-00987-9

[20] http://www.w3schools.com/browsers/browsers_stats.asp

[21] Eyetracking Web Usability; Jakob Nielsen, Kara Pernice; New Riders, 2009; ISBN 0-3214-9836-4

[22] Eyetracking Web Usability; Jakob Nielsen, Kara Pernice; New Riders, 2009; ISBN 0-3214-9836-4

[23] Usability Engineering; .Jakob Nielsen, Morgan Kaufmann, San Francisco, 1993. ISBN 0-12-518406-9

[24] http://www.useit.com/alertbox/20030825.html

[25] http://www.useit.com/alertbox/20030825.html

[26] http://www.autorskaagencija.com/srp/pitanja/?conid=40

[27] http://hr.wikipedia.org/wiki/Dizajn

[28] By Clint Eccher, Eric Hunley, imas knjigu u library

[29]  Exploring web design; Jeremy Vest, William Crowson,Shannon Pochran ; Thomson  Dema Learning, NY,2005, ISBN 1-4018-7838-5

[30] www.skriptarnica.net/skripte/doc_download/10-skripta-iz-dizajna.html

[31] www.skriptarnica.net/skripte/doc_download/10-skripta-iz-dizajna.html

[32] www.skriptarnica.net/skripte/doc_download/10-skripta-iz-dizajna.html

[33] http://www.digital-web.com/articles/principles_of_design/

[34] www.skriptarnica.net/skripte/doc_download/10-skripta-iz-dizajna.html

[35] Design Basics;David A Lauer, Stephen Pentak. Wadsworth Publishing Company, 2007 ISBN: 0495500860

[36] http://sr.wikipedia.org/sr/pravilotrecine

[37] Modern Dictionary of Electronics; Rudolf F. Graf; Oxford: Newnes; 1999, ISBN 0-7506-43315

[38] Design Basics‎; David A. Lauer, Stephen Pentak;  Cengage Learning;  2007;ISBN 0 -4955-0086-0

[39] http://www.diskusije.net/filozofija-zivota/boje-i-njihov-uticaj-na-nas-goethe-ova-teorija-boja-gde-ste-vi-2931

[40] Design Basics‎; David A. Lauer, Stephen Pentak;  Cengage Learning;  2007;ISBN 0 -4955-0086-0

[41] Unusualy Useful Books; June Coehn; New Riders Publishing; 2003; ISBN 0-7557-1206-9

[42] Principles of Web Design; Joel Sklar; Cengage Learning Inc.; 2008;  ISBN 1-4239-0194-0

[43] Principles of Web Design; Joel Sklar; Cengage Learning Inc.; 2008;  ISBN 1-4239-0194-0

[44] Don’t Make Me Think!;Steve Krug; 2006, New Riders Publishing, Berkley; ISBN 0-321-34475-8; 2006

[45] http://www.useit.com/prioritizing/

[46] A visible language analysis of user-interface: design components and culture dimensions; Aaron Marcus, Valentina Johanna Baumgartner, Byron Hamann; Rhode Island School of Design, 2004

[47] Prioritizing Web usability; Jakob Nielsen; New Riders, 2006; ISBN 0-3213-5031-6

[48] Prioritizing Web usability; Jakob Nielsen; New Riders, 2006; ISBN 0-3213-5031-6

[49] http://www.killersites.com/articles/articles_dosAndDontsWebDesign.htm

[50] Don’t Make Me Think!;Steve Krug; 2006, New Riders Publishing, Berkley; ISBN 0-321-34475-8; 2006

[51] Prioritizing Web usability; Jakob Nielsen; New Riders, 2006; ISBN 0-3213-5031-6