Principi dobrog web dizajna

Upotrebljivost i korisnost, a ne vizualni dizajn, određuju uspjeh ili neuspjeh web stranice. Budući da je posjetitelj stranice jedina osoba koja klikne mišem i samim time odlučuje o svemu, korisnički orijentirani dizajn etablirao se kao standardni pristup uspješnom i profitno orijentiranom web dizajnu. Uostalom, ako korisnici ne mogu koristiti značajku, ona bi mogla i ne postojati.

Upotrebljivost i korisnost, a ne vizualni dizajn, određuju uspjeh ili neuspjeh web stranice. Budući da je posjetitelj stranice jedina osoba koja klikne mišem i stoga odlučuje o svemu, korisnički usmjeren dizajn postao je standardni pristup uspješnom i profitabilnom web dizajnu. Uostalom, ako korisnici ne mogu koristiti značajku, ona bi mogla i ne postojati.

Nećemo raspravljati o detaljima implementacije dizajna (npr. gdje treba postaviti okvir za pretraživanje) jer je to već učinjeno u brojnim člancima; umjesto toga fokusiramo se na glavne principe, heuristiku i pristupe za učinkovit web dizajn — pristupe koji, ako se pravilno koriste, mogu dovesti do sofisticiranijih dizajnerskih odluka i pojednostaviti proces percipiranja prezentiranih informacija.

Načela dobrog dizajna web stranice i smjernice za učinkovit web dizajn

Kako bismo pravilno koristili načela, prvo moramo razumjeti kako korisnici komuniciraju s web stranicama, kako razmišljaju i koji su osnovni obrasci ponašanja korisnika.

Kako razmišljaju korisnici?

Uglavnom, navike korisnika na webu nisu toliko različite od navika kupaca u trgovini. Posjetitelji pogledaju svaku novu stranicu, skeniraju dio teksta i kliknu na prvu poveznicu koja ih zainteresira ili nejasno podsjeća na stvar koju traže. Zapravo, postoje veliki dijelovi stranice koje ni ne pogledaju.

Većina korisnika traži nešto zanimljivo (ili korisno) i kliknuti; čim se pronađu neki obećavajući kandidati, korisnici kliknu. Ako nova stranica ne ispunjava očekivanja korisnika, klikne se gumb Natrag i proces pretraživanja se nastavlja.

• Korisnici cijene kvalitetu i vjerodostojnost. Ako stranica pruža korisnicima visokokvalitetan sadržaj, oni su spremni ugroziti sadržaj reklamama i dizajnom stranice. To je razlog zašto ne tako dobro dizajnirane web stranice s visokokvalitetnim sadržajem tijekom godina dobivaju velik promet. Sadržaj je važniji od dizajna koji ga podržava.
• Korisnici ne čitaju, oni skeniraju. Analizirajući web-stranicu, korisnici traže neke fiksne točke ili sidra koja bi ih vodila kroz sadržaj stranice.

• Korisnici ne čitaju, oni skeniraju. Primijetite kako su “vruća” područja nagla usred rečenica. To je tipično za proces skeniranja.
• Korisnici weba su nestrpljivi i inzistiraju na trenutnom zadovoljstvu. Vrlo jednostavan princip: ako web stranica nije u stanju ispuniti očekivanja korisnika, dizajner nije uspio obaviti svoj posao kako treba i tvrtka gubi novac. Što je veće kognitivno opterećenje i manje intuitivna navigacija, korisnici su spremniji napustiti web stranicu i tražiti alternative. 
• Korisnici ne donose optimalne izbore. Korisnici ne traže najbrži način da pronađu informacije koje traže. Ne skeniraju niti linearno web stranicu, idući uzastopno od jednog odjeljka web-mjesta do drugog. Umjesto toga korisnici zadovoljavaju; biraju prvu razumnu opciju. Čim pronađu poveznicu za koju se čini da bi mogla dovesti do cilja, postoji velika šansa da će se odmah kliknuti. Optimizacija je teška i dugo traje. Zadovoljstvo je učinkovitije. 

• Sekvencijski tijek čitanja ne radi na webu. Desna snimka zaslona na slici pri dnu opisuje put skeniranja dane stranice.
• Korisnici slijede svoju intuiciju. U većini slučajeva korisnici se petljaju umjesto da čitaju informacije koje je dao dizajner. Prema Steveu Krugu, osnovni razlog za to je što korisnicima nije stalo. “Ako pronađemo nešto što funkcionira, toga se držimo. Nije nam važno razumijemo li kako stvari funkcioniraju, sve dok ih možemo koristiti. Ako će se vaša publika ponašati kao da dizajnirate jumbo plakate, dizajnirajte sjajne jumbo plakate.”
• Korisnici žele imati kontrolu. Korisnici žele moći kontrolirati svoj preglednik i oslanjati se na dosljedan prikaz podataka na cijeloj web stranici. Npr. ne žele da novi prozori iskaču neočekivano i žele se moći vratiti pomoću gumba “Natrag” na stranicu na kojoj su bili prije: stoga je dobra praksa nikada ne otvarati veze u novim prozorima preglednika .

1. Ne tjerajte korisnike na razmišljanje

Prema Krugovom prvom zakonu upotrebljivosti, web-stranica bi trebala biti očita i sama po sebi razumljiva . Kada stvarate web stranicu, vaš je posao riješiti se upitnika — odluka koje korisnici moraju donijeti svjesno, uzimajući u obzir prednosti, nedostatke i alternative.

Ako navigacija i arhitektura stranice nisu intuitivne, broj upitnika raste i korisnicima otežava razumijevanje kako sustav funkcionira i kako doći od točke A do točke B. Jasna struktura, umjereni vizualni tragovi i lako prepoznatljivi linkovi mogu pomoći korisnicima da pronađu svoj put do svog cilja.

Pogledajmo primjer. Beyondis.co.uk tvrdi da je “izvan kanala, izvan proizvoda, izvan distribucije”. Što to znači ? Budući da korisnici obično istražuju web stranice prema “F” uzorku, ove tri izjave bile bi prvi elementi koje će korisnici vidjeti na stranici nakon što se učita.

Iako je sam dizajn jednostavan i intuitivan, korisnik mora potražiti odgovor kako bi razumio o čemu je stranica. To je ono što je nepotreban upitnik . Zadatak dizajnera je osigurati da broj upitnika bude blizu 0. Vizualno objašnjenje nalazi se s desne strane. Samo zamjena oba bloka povećala bi upotrebljivost.

ExpressionEngine koristi istu strukturu kao Beyondis, ali izbjegava nepotrebne upitnike. Nadalje, slogan postaje funkcionalan jer se korisnicima pruža mogućnost isprobavanja usluge i preuzimanja besplatne verzije.

Smanjenjem kognitivnog opterećenja posjetiteljima olakšavate shvaćanje ideje koja stoji iza sustava. Nakon što to postignete, možete komunicirati zašto je sustav koristan i kako korisnici mogu imati koristi od njega. Ljudi neće koristiti vašu web stranicu ako se ne mogu snaći na njoj.

2. Ne rasipajte strpljenje korisnika

U svakom projektu kada ćete svojim posjetiteljima ponuditi neku uslugu ili alat, nastojte da zahtjevi korisnika budu minimalni. Što je manje radnje potrebno od korisnika za testiranje usluge, veća je vjerojatnost da će je slučajni posjetitelj stvarno isprobati. Posjetitelji koji prvi put dolaze voljni su se igrati s uslugom , a ne ispunjavati dugačke web obrasce za račun koji možda nikada neće koristiti u budućnosti. Dopustite korisnicima da istraže web-mjesto i otkriju vaše usluge bez prisiljavanja da dijele privatne podatke. Nije razumno prisiljavati korisnike da unesu adresu e-pošte kako bi testirali značajku.

Korisnici bi vjerojatno bili željni dati adresu e-pošte ako bi je zamolili nakon što su vidjeli da značajka radi, tako da su imali neku ideju o tome što će dobiti za uzvrat.

Očigledno, Mite zahtijeva više. Međutim, registracija se može obaviti za manje od 30 sekundi — budući da je obrazac vodoravno usmjeren, korisnik ne mora niti pomicati stranicu.

U idealnom slučaju uklonite sve prepreke , ne zahtijevajte pretplate ili registracije. Sama registracija korisnika dovoljna je prepreka navigaciji korisnika kako bi se smanjio dolazni promet.

3. Upravljajte za fokusiranje pažnje korisnika

Budući da web stranice pružaju i statički i dinamički sadržaj, neki aspekti korisničkog sučelja privlače pažnju više od drugih. Očito, slike upadljivije od teksta – baš kao što su rečenice označene podebljanima privlačnije od običnog teksta.

Ljudsko oko je vrlo nelinearan uređaj, a korisnici weba mogu odmah prepoznati rubove, uzorke i pokrete . Zato su video oglasi iznimno neugodni i ometajući, ali iz marketinške perspektive savršeno odrađuju posao privlačenja pažnje korisnika.

Humanized savršeno koristi princip fokusa. Jedini element koji je izravno vidljiv korisnicima je riječ “besplatno” koja djeluje atraktivno i privlačno, ali ipak mirno i čisto informativno. Suptilni nagovještaji pružaju korisnicima dovoljno informacija o tome kako pronaći više o “besplatnom” proizvodu.

Usmjeravanje pažnje korisnika na određena područja stranice uz umjerenu upotrebu vizualnih elemenata može pomoći vašim posjetiteljima da stignu od točke A do točke B bez razmišljanja o tome kako bi se to zapravo trebalo učiniti. Što manje upitnika posjetitelji imaju, to imaju bolji osjećaj orijentacije i više povjerenja mogu razviti prema tvrtki koju stranica predstavlja. Drugim riječima: što se manje razmišljanja treba događati iza kulisa, to je bolje korisničko iskustvo što je prije svega cilj upotrebljivosti.

4. Težite ekspoziciji značajki

Moderni web dizajni obično su kritizirani zbog njihovog pristupa vođenja korisnika vizualno privlačnim 1-2-3-gotovim koracima, velikim gumbima s vizualnim efektima itd. Ali iz perspektive dizajna ovi elementi zapravo i nisu loša stvar. Naprotiv, takve su smjernice iznimno učinkovite jer vode posjetitelje kroz sadržaj stranice na vrlo jednostavan i korisniku prikladan način.

Dibusoft kombinira vizualnu privlačnost s jasnom strukturom stranice. Stranica ima 9 glavnih navigacijskih opcija koje su vidljive na prvi pogled. Ipak, izbor boja može biti presvijetli.

Omogućavanje korisniku da jasno vidi koje su funkcije dostupne temeljno je načelo uspješnog dizajna korisničkog sučelja. Nije bitno kako se to postiže. Ono što je važno je da je sadržaj dobro shvaćen i da se posjetitelji osjećaju ugodno s načinom na koji komuniciraju sa sustavom.

5. Iskoristite učinkovito pisanje

Kako se web razlikuje od tiskanog, potrebno je prilagoditi stil pisanja korisničkim preferencijama i navikama pregledavanja. Promotivni tekst se neće čitati. Dugi blokovi teksta bez slika i ključnih riječi označenih podebljanim ili kurzivom bit će preskočeni. Pretjerani jezik bit će zanemaren.

Pričajte o poslu. Izbjegavajte slatka ili pametna imena, marketinški potaknuta imena, nazive specifične za tvrtke i nepoznata tehnička imena. Na primjer, ako opisujete uslugu i želite da korisnici stvore račun, “prijavite se” je bolje nego “počnite odmah!” što je opet bolje od “istraživanja naših usluga”.

Optimalno rješenje za učinkovito pisanje je da

• koristite kratke i sažete fraze (dođite do točke što je prije moguće),
• koristiti izgled koji se može skenirati (kategorizirati sadržaj, koristiti više razina naslova, koristiti vizualne elemente i popise s grafičkim oznakama koji prekidaju tok ujednačenih tekstualnih blokova),
• koristite jasan i objektivan jezik (promocija ne mora zvučati kao reklama; dajte svojim korisnicima razuman i objektivan razlog zašto bi trebali koristiti vašu uslugu ili ostati na vašoj web stranici)

6. Težite jednostavnosti

Primarni cilj dizajna web-mjesta trebao bi biti princip “neka bude jednostavno”. Korisnici su rijetko na stranici kako bi uživali u dizajnu; nadalje, u većini slučajeva traže informacije unatoč dizajnu. Težite jednostavnosti umjesto složenosti.

Sa stajališta posjetitelja, najbolji dizajn web stranice je čisti tekst, bez ikakvih reklama ili daljnjih blokova sadržaja koji točno odgovaraju upitu koji su posjetitelji koristili ili sadržaju koji su tražili. To je jedan od razloga zašto je za dobro korisničko iskustvo neophodna ispisna verzija web stranica.

7. Ne bojte se bijelog prostora na web stranici

Zapravo je jako teško precijeniti važnost bijelog prostora. Ne samo da pomaže u smanjenju kognitivnog opterećenja posjetitelja, već omogućuje percepciju informacija prikazanih na ekranu. Kada novi posjetitelj pristupi izgledu dizajna, prva stvar koju on/ona pokušava učiniti je skenirati stranicu i podijeliti područje sadržaja na probavljive dijelove informacija.

Složene strukture teže je čitati, skenirati, analizirati i raditi s njima. Ako imate izbor između razdvajanja dva segmenta dizajna vidljivom linijom ili razmakom, obično je bolje koristiti rješenje za razmak. Hijerarhijske strukture smanjuju složenost: što bolje uspijete korisnicima pružiti osjećaj vizualne hijerarhije, to će vaš sadržaj biti lakše percipirati.

Bijeli prostor je dobar. Cameron.io koristi bijeli prostor kao primarni element dizajna. Rezultat je izgled koji se može dobro skenirati i koji sadržaju daje dominantnu poziciju koju zaslužuje.

8. Učinkovito komunicirajte

U svojim radovima o učinkovitoj vizualnoj komunikaciji, Aaron Marcus navodi tri temeljna principa uključena u korištenje takozvanog “vidljivog jezika” – sadržaja koji korisnici vide na ekranu.

• Organizirajte : pružite korisniku jasnu i dosljednu konceptualnu strukturu. Dosljednost, izgled zaslona, ​​odnosi i navigacija važni su koncepti organizacije. Na sve elemente treba primijeniti iste konvencije i pravila.
• Uštedite : učinite najviše s najmanjom količinom znakova i vizualnih elemenata. Četiri glavne točke koje treba uzeti u obzir: jednostavnost, jasnoća, osebujnost i naglasak. Jednostavnost uključuje samo one elemente koji su najvažniji za komunikaciju. Jasnoća : sve komponente trebaju biti dizajnirane tako da njihovo značenje nije dvosmisleno. Posebnost : važna svojstva potrebnih elemenata trebaju se razlikovati. Naglasak : najvažnije elemente treba lako uočiti.
• Komunicirajte : uskladite prezentaciju sa mogućnostima korisnika. Korisničko sučelje mora održavati u ravnoteži čitljivost, čitljivost, tipografiju, simboliku, višestruke prikaze i boju ili teksturu kako bi uspješno komuniciralo. Koristite maks. 3 slova u maksimalno 3 veličine — najviše 18 riječi ili 50-80 znakova po retku teksta.

9. Konvencionalan dizajn

Konvencionalni dizajn elemenata stranice ne rezultira dosadnim web stranicama. Zapravo, konvencije su vrlo korisne jer smanjuju krivulju učenja, potrebu da se shvati kako stvari funkcioniraju. Na primjer, bila bi noćna mora upotrebljivosti kada bi sve web stranice imale različit vizualni prikaz RSS-savoda. To se ne razlikuje toliko od našeg uobičajenog života u kojem se obično navikavamo na osnovne principe kako organiziramo podatke (mape) ili obavljamo kupovinu (plasiranje proizvoda).

Uz konvencije možete steći povjerenje, povjerenje, pouzdanost korisnika i dokazati svoju vjerodostojnost. Slijedite očekivanja korisnika — razumite što očekuju od navigacije web-mjestom, strukture teksta, položaja u pretraživanju itd.

Tipičan primjer iz sesija upotrebljivosti je prevođenje stranice na japanski (pod pretpostavkom da vaši web korisnici ne znaju japanski, npr. s Babelfishom) i davanje vašim testerima upotrebljivosti zadatak da pronađu nešto na stranici na drugom jeziku. Ako se konvencije dobro primjenjuju, korisnici će moći postići ne previše specifičan cilj, čak i ako ne mogu razumjeti niti jednu riječ.

Steve Krug sugerira da je bolje inovirati samo kada znate da stvarno imate bolju ideju , ali iskoristite prednosti konvencija kada je nemate.

10. Testirajte rano i često

Ovaj takozvani TETO princip trebao bi se primijeniti na svaki projekt web dizajna jer testovi upotrebljivosti često daju ključne uvide u značajne probleme i probleme vezane uz određeni izgled.

Testirajte ne prekasno, ne premalo i ne iz pogrešnih razloga. U potonjem slučaju potrebno je razumjeti da je većina odluka o dizajnu lokalna; to znači da ne možete univerzalno odgovoriti je li neki izgled bolji od drugog jer ga trebate analizirati s vrlo specifične točke gledišta (s obzirom na zahtjeve, dionike, proračun itd.).

Neke važne točke koje treba imati na umu:

• testiranje jednog korisnika je 100% bolje od testiranja nijednog , a testiranje jednog korisnika na početku projekta bolje je od testiranja 50 pri kraju. Greške su najčešće tijekom zahtjeva i projektnih aktivnosti i to su skuplje što se kasnije otklone.
• testiranje je iterativni proces . To znači da nešto dizajnirate, testirate, popravite i onda ponovno testirate. Možda postoje problemi koji nisu pronađeni tijekom prvog kruga jer su korisnici praktički blokirani drugim problemima.
• testovi upotrebljivosti uvijek daju korisne rezultate . Ili će vam biti ukazano na probleme koje imate ili će vam se ukazati na odsutnost velikih nedostataka u dizajnu što je u oba slučaja koristan uvid za vaš projekt.
• programer nije prikladan za testiranje svog koda . To vrijedi i za dizajnere. Nakon što ste radili na stranici nekoliko tjedana, više je ne možete promatrati iz nove perspektive. Znate kako je izgrađen i stoga točno znate kako funkcionira — imate mudrosti koju neovisni testeri i posjetitelji vaše stranice ne bi imali.

Zaključak: ako želite sjajnu stranicu, morate testirati.