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.[1] 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. [2]

§  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"[3]. 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.[4]

• 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.[5]
• 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.[6]
• 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.[7]  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.

---

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

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

[3] 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

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

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

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

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