+ 381 64 17 39 157 office@cyclopdesign.com

Kako primeniti najbolje iz prakse na dizajn vašeg web korisničkog interfejsa

Kris Benk iz UXPin – the wireframing & prototyping app – objašnjava neke od najvažnijih principa web UI (user interface – korisnički interfejs) dizajna. Analiza UI primera preko 33 kompanije dostupna je na Web UI Best Practices.

Potrebno je daleko više za dizajn web interfejsa od jednostavnog ubacivanja imena vašeg brenda u odličan algoritam i klika na „submit“. Ne postoji krajnji šablon za sva rešenja, ne postoji definitivni set univerzalnih pravila. Postoje samo uopšteni principi, instrukcije, teorija i dobri stari prijateljski saveti.

web-dizajn-sajta

web-dizajn-sajta izvor

U skladu sa tim ovo poglavlje će obrađivati neke opšte i specifične principe koji su dokazano bili od pomoći UI sistemima u prošlosti. Prihvatanje ovih informacija pomoći će vam da primenite vizuelne tehnike i šablone o kojima je reč. Biće razmotrena suština interfejsa, najbolji primeri iz prakse za specifične komponente, i razlozi zbog kojih je potrebno imati MAYA princip na umu.

 

SUŠTINA INTERFEJSA

Kao prvo da razjasnimo šta je to korisnički interfejs uopšte.  Interfejs može označavati veoma širok i složen pojam, pokušaćemo da obuhvatimo sve njegove aspekte. Rajan Singer, product menadžer u Basecamp-u, savetuje da ne mislimo o interfejsu kao „ekranu, dugmićima ili pikselima“, što je iskušenje za dizajnere, već pre kao o kolekciji poslova, od kojih svaki ima početak, sredinu i kraj.

download

Recimo da razvijate interfejs za Facebook homepage, prvo pitanje koje bi sebi trebalo da postavite je: „Koju vrstu posla ljudi ovde žele da obave?“ Budući da je u pitanju Facebook, odgovor se sastoji u deljenju novosti, slika, slanju poruka, slanju i primanju poziva itd.

Svaka od ovih radnji zahteva početak, sredinu i kraj. Ukoliko korisnik želi da postuje novost o bebi u porodici, ili o svom ljubimcu, prvo mora da klikne na „update status“ box (ovo je početak). To otvara message window i omogućava mu da otkuca svoju poruku (sredina), a kada završi sa kucanjem i klikne „Post“ pojaviće mu se novi Status update na ekranu i znaće da je zvanično uspeo u svojoj nameri (ovo je kraj).

 

KONTROLA INPUT-a

Interfejs bi mogao da bude samo „fejs“ bez interakcije, što u velikoj meri zavisi od kontrole input-a. Međutim postoji paradoks vezan za kontrolu, očitava se u tome što korisnici žele više opcija, ali svaka nova kontrola usložnjava UI i zagušuje ekran. Najbolji način za postizanje savršene ravnoteže prema Dmitri Fadejevu, Usaura osnivaču, je uvođenje kontrola na zahtev – controls on demand.

dizajn-web-sajta

dizajn-web-sajta

Sakrivanjem kontrola, dok vam ne ustrebaju, štedite prostor na ekranu bez žrtvovanja drugih opcija. Ovo je win-win rešenje i zbog toga je usvojeno od strane većine high-profile sajtova u ovom trenutku. Skrivene kontrole mogu biti otkrivene hovering-om preko željenog sadržaja (Pinterest), izvučene iz dropdown menija preko tabova (Google Docs) ili spoj ova dva kao u navedenom Collab Finder primeru.

Još jedna neophodna kontrola inputa odvija se u polju za tekst. Ovo je UI element koji se često uzima zdravo za gotovo, i mnogi dizajneri se zadovoljavaju korišćenjem generičkih formi tekst polja, zaboravljajući da ona uopšte i postoje. Ipak kastomizovano input polje može dodati posebnu crtu ličnosti vašem sajtu, i čak izbeći nesrećni sudar kolorita proistekao iz generičkog dizajna. Fadejev ovde nudi pomoć: Fadeyev offers some help with the coding.

google-strana

Ukoliko je vaš sajt fokusiran na određeno polje inputa , ili ako je input neophodan prvi korak, trebalo bi da primenite autofokus na to polje, tako da kursor automatski startuje odatle. Najbolji primer za ovo je Google, gde nakon ulaska na sajt korisnik može da otpočne sa ukucavanjem pretrage bilo gde. Fadejev ovde daje dodatna objašnjenja: Fadeyev helps explain the technical details behind this UI technique.

Google takođe uključuje autocomplete i default values, što značajno ubrzava korisničku akciju i pomaže mu da istraži dodatne teme.

google-sorce

NAVIGACIJA

Teško je imati dobro mišljenje o sajtu na kome ste se izgubili, zbog čega je navigacija obavezna tema za diskusiju kada govorimo o UI dizajnu.

adobe-web-dizajn

adobe-web-dizajn

Envatov koosnivač, Kolis Taiid citira dva glavna pravila navigacije:

1. Korisnik mora uvek znati svoje trenutno mesto na sajtu. Poznato kao orijentacija, ovo sredstvo pomaže korisnicima da im na vašem sajtu bude udobno, vodeći ih ka cilju. Načini da to postignete uključuju hajlajtovanje mnogih stavki, ostavljanje tragova (breadcrumb trails) i upotrebu naslova.

2. Navigacioni sistem mora biti dosledan. Drugim rečima ne pomerajte svoj menu bar naokolo. Zamislite koliko je frustrirajuće biti izgubljen u gradu u kome su putokazi sakriveni između stubova, zidova zgrada itd.

Da biste osigurali da vaš sadržaj bude dosledan, navigacija mora da odgovara njegovom toku uz odgovarajuće pozicioniranje.

 

I – SADRŽAJ

Budite sigurni da je sadržaj sajta potpun pre nego što se prihvatite posla oko navigacije. Ukoliko je sadržaj nekompletan čak i najbolja navigacija neće spasiti vaš sajt. Navigacija mora da podržava sadržaj.

  1. Meniji – Izbor po default-u za korisnike pri nalaženju sadržaja sajta
  2. Breadcrumbs (mrvice hleba) – Mnogi korisnici ne snađu se odmah, tako da je orijentacija veoma bitna. Tragovi u breadcrumbs obliku obezbeđuju referentne tačke
  3. Filteri – Oni su ti koji čine sajtove sa teškim sadržajem upotrebljivim
  4. Linkovi – Pomažu korisnicima da shvate vezu između srodnih sadržaja

navigacija-web-sajta

Kao što se vidi iz primera Google Maps API, navigacija mora da otkriva sadržaj. Jednostavan horizontalni menu obezbeđuje osnovnu navigaciju, dok je sekundarnoj navigaciji dat niži značaj stavljanjem na desnu stranu. Sadržaj zapravo zauzima najveći deo prostora na sajtu. Primarna navigacija je prigušena malim fontom i svetlim bojama, što dozvoljava sadržaju da govori sam za sebe.

 

II – POSTAVLJANJE (PLACEMENT)

Želite li da korisnik klikće ili da skroluje? Da unosi podatke ili da klikne na back button? Navigacija je serija izbora a korisnik mora da odluči bez gledanja šta mu je sledeći korak. Najvidljivija mesta za navigacione menije nalaze se horizontalno i vertikalno.

navigacija-web-strane

Kao primer minimalističke horizontalno postavljene navigacije, sajt REI 1440 koristi meni sa tri opcije, manji čak i od kompanijskog logotipa. Celokupna navigacija je postavljena horizontalno dozvoljavajući sadržaju da teče sa leva na desno. Navigacija otkriva sadržaj.

Sa druge strane, vertikalna navigacija je savršena za pričanje priča, posebno za linearne sadržaje. Uparena sa parallax animacijom vertikalna navigacija čini single-page sajtove visoko funkcionalnim.

navigacija-web-stranica

Skullcandy-jev Supreme Sound site upotrebio je neočekivano rešenje za uobičajeno vertikalno skrolovanje stranicom. Ekran se rotira dok pratite kabl slušalica ka dnu stranice, dok vertikalna navigacija desnom rukom omogućava korisniku da se orijentiše i obezbeđuje linkove ka relevantnom sadržaju.

Više primera horizontalne i vertikalne navigacije možete videti ovde: collection of navigation UI patterns.

 

ANIMACIJE

Ovde nema sumnje: animacija znači zabavu. U stvari one su toliko zabavne da ljudi često zaborave da su i korisne, kao i da mogu krišom da dodaju mnogo vašem UI dizajnu, bez bojazni da će korisnik to da primeti.

web-animacija

web-animacija

Val Hed, dizajner koji vodi radionice o animaciji, nabraja tri odlična razloga za upotrebu animacije u UI dizajnu.

1. Pokret privlači oko. Ovo je naučno potvrđeno i može biti upotrebljeno kao vaša prednost. Animirana ikona će korisniku signalizirati promenu daleko efektnije i manje neskladno nego što bi to uradila obična flet promena.

2. Uspostavljanje veza. Animacije prave odlične prelaze, što čini upotrebu sajta koherentnijom, pogotovo kada se mnoštvo zahteva rešava odjednom. Uzmimo na primer kliknutu ikonu koja ekspandira da bi se otvorila, u odnosu na obično pojavljivanje novog prozora. Ovi mali prelazi mogu da načine mnogo razlike kada uhvate korisnikovu pažnju, takođe pomažu stvaranju emotivne povezanosti. (Vidi i ovo: animations help make emotional connections.)

3. Nagoveštaji i tragovi. Animacija je odlično sredstvo za signaliziranje da je određeni zadatak izvršen, a shodno prethodnom razlogu takođe može i da ukaže na vezu između dva srodna zadatka. Dobro promišljena animacija može čak i navesti korisnika na neku akciju – ukoliko je stavka dodata na pametan način, korisnik će pomisliti da je to dobar put, inače ona ne bi ni bila tu.

Na nekoliko primera ćemo pokazati kako animacija može dodati život navigaciji, pozadini sajta i prelazu između stranica.

 

I – MENIJI SA PERJANICOM

Iako mogu biti komplikovane za primenu na navigacionim menijima, animacije svojim detaljima mogu dodati ključni vizuelni udar interfejsu. Vodite računa da brzina bude dovoljna da privuče pažnju, ali ne i prevelika da ne bi izazvala dezorijentisanost. Linkovima bi trebalo da bude omogućen lak prilaz, uz dovoljno mesta za kliktanje.

animacija

Design Sensory, na primer, koristi top-level meni zajedno sa pod-meni linkovima. Tokom hoveringa preko svakog od top linkova, novi pod-meniji se pojavljuju ispod. Ovo dozvoljava brz pristup svim meni linkovima, uz dovoljno životnog prostora ostavljenog za nesmetano kliktanje. Jedino korisnici sa slabijim vidom mogu da imaju problem pri čitanju manjih veličina fontova, ali i ovo može biti rešeno poigravanjem sa veličinom ispisa.

download (2)

Cabedge, web dizajn firma, koristi dropdown animaciju koja se savršeno uklapa u papirnatu teksturu sajta. U gornjoj traci hovering mišom preko bilo kog od linkova aktivira brzi hover efekat. Ukoliko zadržite kursor na linku 1-2 sekunde, pod-meni se otvara animiranim padom nadole. Ovaj efekat čini da interfejs bude zabavan i predstavlja više sadržaja bez nagomilavanja.

 

II- POZADINSKO PARALLAX SKROLOVANJE

Parallax sajtovi obično imaju slike u pozadini koje se menjaju dok skrolujete naniže, stvarajući tako 3D efekat kretanja, dok statični elementi stranice prate korisnika na tom putu.

interfejs

interfejs

U primeru  Atlantis World Fair, putanja lifta prati vaše skrolovanje nadole i skreće pažnju na određene činjenice. Ovaj efekat animacije ohrabruje interakciju sa sadržajem jer skrolovanje u stvari stvara formu vizuelnog pripovedanja. Za više primera proverite sledeći link: collection of 50 sites

 

III – PRELAZAK IZMEĐU WEB STRANICA

Animacija tranzicije između stranica čini iskustvo korišćenja sajta slično prijateljski vođenom turističkom obilasku. Takođe obezbeđuje i vizuelni feedback vašem interfejsu. Animirani prelazi mogu pratiti tooltip-ove, blokove sa sadržajem ili slajding panele.

transakcija

Kao što primer dizajna firme Mustache pokazuje, animirane tranzicije mogu biti izvedene sa lepim Ajax efektom koji ne primorava na refrešovanje stranice. Imajte na umu da bi trebalo da ugradite i backup opciju za korisnike koji nemaju Javascript.

U UXPin-u je lako dodati interakcije i animacije. Bilo koji element vašeg vajerfrejma ili prototipa može da izazove interakciju ili animaciju selekcijom iz drag and drop menija. (primer: selecting from a drag and drop menu)

 

SETOVANJE PO DEFAULT-u

Statistički posmatrano korisnici će retko menjati default settings, čak iako su im dostupne opcije za kastomizaciju. To znači da je na vama da taj posao uradite valjano na vreme. Kao UI dizajner imate odgovornost da predvidite kako će korisnik želeti da setovanje sajta bude podešeno i pre nego što ga poseti. Postoji i prednost u ovome: možete iskoristiti default settings da bi naveli korisnika na akcije koje vam odgovaraju. Living Social imaju mudar pristup čineći „svakoga“ default publikom za email, što ohrabruje korisnike da ponude forvarduju ljudima drugog pola.

download (4)

Znači budite ljubazni i dozvolite korisnicima da promene svoj default setting. Pravljenje zamršene putanje, kojom ćete zadržati korisnika na vašem default setting-u, će ga samo frustrirati i oterati dalje od vašeg sajta. Nakon svega, ne žele baš sve žene da dobijaju ponudu za mušku odeću u svoj inbox.

Budite sigurni da ste default settings iskoristili samo u slučajevima kada znate da će korisnik imati benefit od toga. Kada se radi o inputima, ne koristite default settings za bilo šta što zahteva razmišljanje (npr prijavljivanje za newsletters ili prihvatanje uslova korišćenja). Više primera default setting-a pogledajte ovde: here.

 

VOĐENE AKCIJE

Ljudi su, ukupno posmatrano, otvoreni za sugestije. Ovo je dobra novost, budući da ih možete ohrabriti da se dublje angažuju, interaguju, pa čak i da dobijete feedback – dokle god akcija koju im predlažete ima smisla.

Jasan primer propisne upotrebe vođene akcije je LinkedIn. Kada god korisnik otvori stranicu, obično ga dočekaju pozivi na akciju, na primer: predstavljanje vaših veština u povezivanju. Ljudi vole da pomažu svojim prijateljima, pa predlaganje ovakvih akcija nailazi na odziv, jer je to nešto što oni inače žele da rade, ali mnogi se toga nisu sami setili (uz to, ovo stvara dublju povezanost sa sajtom koji im je to ponudio).

download (1)

Dmitri Fadejev ističe da vođena akcija može biti iskorišćena na suptilnijem nivou, naglašavajući ključne funkcije, kontrole i dugmiće (emphasizing key functions, controls, and buttons). Pogledajte koliko žarko Spotify želi da ih downloadujete.

Više primera vođene akcije pogledajte na Web UI Patterns 2014

 

VIZUELNA I JEZIČKA JASNOĆA

Iako bi ovo trebalo da govori samo za sebe, podsetićemo vas da i o tome moramo voditi računa. Jedno od obeležja lošeg UI je konfuzija, najčešće proizašla iz loše objašnjenih kontrola, funkcija i ostalih elemenata.

interfejs-izgled

Uočite razliku između user-friendly upload menija za fotografije na sajtu Imgur, u odnosu na onaj koji koristi Stack Exchange. Funkcionalni su podjednako, ipak intuitivnost je prednost onog prvog. Ovo je posledica pravilne upotrebe jezika, kolora, kontrasta i patern lejauta prilagođenog desnom oku.

Ukoliko vaš korisnik nešto ne razume on će to ignorisati. Ako želite da izvučete maksimum iz svog UI, budite sigurni da je sve kristalno jasno. Ovo su osnovne smernice za jasnoću:

– Jednostavnost je ključ. Ne zasipajte korisnika sa previše funkcija ili kontrola

– Proverite svoje reči. Jasan govor rešava probleme konfuzije, dok ih nejasan stvara.

– Izbegavajte kontradiktornost. Kao što smo videli na primeru Stack Exchange-a, ako na dugmencetu piše „Choose file“, ne smatrajte da to znači „click browse“. Koristite konzistentne pojmove i jezik.

– Izbegavajte preterivanje. Budite sažeti, preterano objašnjavanje može proizvesti suprotno od željenog cilja.

– Hover-ujte objašnjenja. Ne postoji bolji način da raščistite konfuziju među ikonama bez pretrpavanja ekrana. Gmail je dobar primer kako ova tehnika može razjasniti razliku između donekle dvosmislenih ikona.

Kada se radi o jasnoći, budite sigurni da vaš sajt omogućava feedback korisnika (provides user feedback), kao i da komplikovane akcije razbija na sitnije jednostavne korake. Gmail na primer obezbeđuje notifikaciju svake akcije, naročito za „learn more“ i „undo“ akcije (ovo čini da ljudi osete da imaju više kontrole, a sam sajt im izgleda pouzdanijim). Interesantan je i gornji primer u kome je forma na desnoj strani daleko jasnija. Ljudi radije obavljaju 10 manjih nego jedan veliki zadatak.

maya-princip

„MAYA“ PRINCIP

Vaš cilj kao UI dizajnera je da kreirate najveći, najnoviji i originalni interfejs koji seže daleko iznad najdivljijih snova prosečnih korisnika, zar ne? Pa i ne baš. Dok usvajate savete za stvaranje UI, uglađenog i strimabilnog do krajnjih mogućnosti, veoma je važno imati MAYA princip na umu kao metodologiju provere i uravnoteženja. Čuveni industrijski dizajner Raymond Loewy stvorio je izraz „Most Advanced Yet Acceptable“ – MAYA (najviše unapređen, ipak prihvatljiv) da bi objasnio kako javnost najčešće pruža otpor promenama, i da neće prihvatiti radikalno nove inovacije, čak iako predstavljaju bolje rešenje.

doba

Brzim koracima ka modernim vremenima. UI/UX konsalting firma Above the Fold objašnjava kako mudrost MAYA principa utiče na web dizajn (explains how the wisdom of the MAYA principle applies to web design), preporučujući da uključite reference na iskustva sa kojima su korisnici već familijarni. Ovo ne znači da veb dizajn ne bi trebalo da bude inovativan i da ne treba da pomera granice. Svakako da mu je to cilj, ali uz to mora da uključuje i ove tri stvari:

1. Prepoznatljive vizuelne metafore. Akcije na vašem sajtu bi trebalo da budu ukorenjene u zadacima sa kojima su korisnici već upoznati. Na primer, korisnici su prihvatili skrolovanje i slajder funkcije kada su im predstavljene, zato što su ih podsećale na listanje stranica beležnica. Bukvalno primenjen ovaj koncept je poznat kao skeuomorfizam.

2. Tradicionalne Fallback opcije. Različiti korisnici će imati različite nivoe udobnog korišćenja. Nuđenje tradicionalne opcije, kao dodatka novoj i različitoj, će dati korisniku osećaj sigurnosti, čak iako je nikada ne iskoristi. Na primer, Etsy ima animiranu „search by color“ opciju upozpunjenu tradicionalnim search bar-om (animated “search by color” option complemented by a traditional search bar).

3. Razumni okviri. Drugim rečima ne otkrivajte toplu vodu. Bespotrebni dodaci kao što su „novo“, „bolje“ ili „poboljšano“ samo frustriraju korisnika. Ako već ulažete napor da stvorite nešto zadivljujuće budite sigurni da ste to stvarno postigli.

 

Na kraju, jedan od najvažnijih činilaca novog i različitog dizajna je odgovarajući ritam. Ponekad je bolje svoju briljantnu ideju otkrivati deo po deo, u malim dozama, umesto je izneti odjednom. Da li bi Twitter bio toliko uspešan da mu nisu prethodili Myspace i Facebook?

POENTA PRIČE

Interfejs je više od lepih vizuala, to je medij kroz koji korisnik može da ostvari svoje ciljeve na vašem sajtu. Pravilno izvedene input kontrole mogu dodati zabavu i interakciju uobičajeno dosadnom procesu. Navigacija bi trebalo da bude oblikovana u skladu sa sadržajem, poput prijatnog bulevara koji vodi korisnike do odredišta. Animacija oživljava interfejs, a vođena akcija i default settings pomažu čitanju korisnikovih misli bez primene invazivnih metoda. Konačno, možda i najbitnije, primena MAYA principa osigurava jasnoću služeći kao ispit zrelosti vašeg interfejsa.

Share this:

Pin It on Pinterest

Share This