Pages
▼
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’’.
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.
[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
[7] Don’t Make Me Think!;Steve Krug; 2006, New Riders
Publishing, Berkley; ISBN 0-321-34475-8; 2006
2.8. PREPORUKE ZA POBOLJŠANJE UPOTREBLJIVOSTI WEB APLIKACIJE
UPOTREBLJIVOST I ESTETIKA WEB APLIKACIJE , Tatjana Dimitrijevic [Diplomski rad]
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.