Opšti interfejsni obrasci: 1.Unos podataka (Formulari, Objašnjavanje procesa, Vođeni zajednicom)

1. Interfejsni obrasci
Obrasci dizajna korisničkog interfejsa su rešenja koja rešavaju uobičajene probleme dizajna.
Dizajnerski obrasci su ponavljajuće standardne referentne tačke za iskusnog dizajnera korisničkog
interfejsa.
Dizajnerski obrasci pružaju zajednički jezik između dizajnera. Oni omogućavaju debatu o
alternativama, gde samo pominjanje imena šablona dizajna implicitno nosi mnogo više značenja nego
samo ime.
Obrazac ili šablon je ponavljajuće rešenje problema u kontekstu. Šablon ima strukturu i može se lako
koristiti da pomogne da rešite problem brže nego da gradite od nule.
Imaju konzistentan i prepoznatljiv oblik, kao i metod referenciranja, kao što je ime koje se pamti.
Generalno, imamo opšte interfejsne obrasce i ubeđujuće (persuasive) interfejsne obrasce.
Opšte interfejsne obrasce možemo da podelimo u sledeće velike grupe:
1. Unos podataka (Getting input)
2. Navigacija (Navigation)
3. Rad sa podacima (Dealing with data)
4. Uključivanje novog korisnika (Onboarding)
5. Društveni (Social)
6. Ostalo
Ubeđujuće (persuasive) interfejsne obrasce možemo da podelimo u sledeće grupe:
1. Spoznaja (Cognition)
2. Mehanika igre (Game mechanics)
3. Percepcija i pamćenje (Perception and memory)
4. Povratna informacija (Feedback)
5. Društveni (Social)
Opšti interfejsni obrasci
1. Unos podataka (Formulari, Objašnjavanje procesa, Vođeni
zajednicom)
Obezbeđivanje ulaznih informacija od korisnika. Cilj je navesti korisnika da unese podatke i to je
zadatak koji treba da bude prilagođen kontekstu korišćenja.
Formulari
 Merač snage lozinke
 Structured Format
 Captcha
 Graditelj pravila
 Prečice na tastaturi

2.  Inplace Editor
 Pregled
 Prevuci i otpusti
 Proširivi ulaz
 Popuniti praznine
 Podešavanja
 VISIVIG
 Input Feedback
 Birač kalendara
 Morphing Controls
 Good Defaults
 Poništi
 Autosave
 Input Prompt
 Forgiving Format
Objašnjavanje procesa
 Čarobnjak
 Merač kompletnosti
 Inline kutija za pomoć
 Steps Left

Zajednicom vođeni
 Ocenite sadržaj
 Glasajte za promociju
 Viki
 Plati za promociju
 Označavanje i izveštavanje

3. 1.1. Formulari
1.1.1. Merač snage lozinke (Password Strength Meter)
Rezime problema
Želite da budete sigurni da su lozinke vaših korisnika dovoljno jake da biste sprečili zlonamerne
napade.
Primer
https://ui-patterns.com/patterns/PasswordStrengthMeter/examples
Upotreba
 Koristite kada želite da vaši korisnici izaberu lozinke za svoje korisničke naloge koje je teško
razbiti ili pogoditi bilo ljudskom snagom ili uz pomoć računara.
 Koristite kada želite da povećate složenost korisničkih lozinki i podignete barijeru za
napadače koji bi da napadnu vaš sistem.
 Koristite kada želite da budete sigurni da vaši korisnici znaju šta je dobra lozinka i da njihova
izabrana lozinka prati takve smernice.
Rešenje
Jačina lozinke se meri prema unapred definisanim pravilima i prikazuje se pomoću horizontalne skale
pored polja za unos. Ako je lozinka slaba, samo mali deo horizontalne trake je istaknut. Što je veća
jačina lozinke, više je istaknuta horizontalna traka.
Jačina lozinke je takođe na odgovarajući način naznačena bojenjem trake u boju asocijativnu sa
dobrim ili lošim: zelena označava jaku lozinku i crvena označava slabu lozinku.
Šta je jaka lozinka?
Imajući na umu gore navedeno, treba naglasiti da dovoljno jaka lozinka ne mora nužno da ispunjava
sva dole navedena pravila, već samo nekoliko njih:
 Ima više od 8 znakova
 Sadrži i mala i velika slova
 Sadrži najmanje jedan numerički znak
 Sadrži posebne znakove
 Ima više od 12 znakova

4. Morate da odredite jačinu i složenost lozinke prema onome što želite da zaštitite. Morate negde da
povučete liniju. Za 99% sadržaja koji postoji, lako se može tvrditi da će samo prva 2 ili 3 gore
pomenuta pravila biti dovoljna.
Opšte smernice za izbor lozinke
 Koristite lozinku od naizgled slučajnog izbora slova i brojeva
 Koristite lozinku koju možete da unesete a da ne morate da gledate u tastaturu (smanjuje
mogućnost da ljudi ukradu vašu lozinku)
 Redovno menjajte lozinku
 Ne koristite svoj ID mreže u bilo kom obliku (velikim slovom, obrnuto, udvostručeno, itd.)
 Ne koristite svoje ime, srednje ime ili prezime ili bilo kog drugog u bilo kom obliku.
 Nemojte koristiti svoje inicijale ili bilo koje nadimke koje vi ili neko drugi možda imate.
 Nemojte koristiti reč sadržanu u bilo kom rečniku (engleskom ili stranom), spisku pravopisa,
listi skraćenica itd.
 Nemojte koristiti informacije koje ljudi lako mogu dobiti o vama (registrske tablice, ime
ljubimca, datum rođenja, brojevi telefona)
 Ne koristite lozinku samo od abecednih znakova ili samo numeričkih znakova – pomešajte ih.
 Nemojte koristiti sekvence na tastaturi (na primer kverti ili asdf)
Obrazloženje
Prikazivanjem merača jačine lozinke pored polja za lozinku, korisnik je primoran da razmisli o
korišćenju lozinke odgovarajuće jačine. Postavljanjem minimalnog nivoa jačine lozinke, čak možete
da koristite merač jačine lozinke da biste pojačali bezbednost vaše veb lokacije.
Korišćenjem indikatora jačine lozinke na veb lokaciji, dodaje se još jedan nivo bezbednosti sajtu. Ovo
ne samo da čini da se trenutni korisnici sajta osećaju sigurnije, već bi potencijalni klijenti to mogli da
iskoriste kao uslov kada odluče da posluju sa kompanijom.
1.1.2. Strukturirani format
Rezime problema
Korisnik treba brzo da unese podatke u sistem, ali format podataka mora da se pridržava unapred
definisane strukture.
Primer
Upotreba

5.  Koristite kada eksplicitniji elementi obrasca kao što su polja za izbor, radio dugmad i polja za
potvrdu čine unos podataka za svakodnevne zadatke previše komplikovanim procesom
 Koristite kada vreme koje je potrebno da se izvrši zadatak proporcionalno prevazilazi važnost
cilja koji korisnik želi da postigne.
 Koristite kada je ulaz koji želite da prikupite određeni tip podataka. Na primer, poštanski broj,
datum ili vreme, broj telefona.
 Koristite kada očekivani korisnički unos prati određeni format koji se lako može protumačiti
pomoću računarskog programa.
 Ne koristite za unose koji se mogu tumačiti na mnogo načina. U tu svrhu pogledajte obrazac
„Forgiving Format“.
Rešenje
Predstavite polja za unos na način koji jasno usmerava ili ograničava korisnika u pogledu toga koji
format unosa da koristi.
Polje za unos je predstavljeno sa pratećom oznakom koja opisuje unos koji se očekuje u polju. Oznaka
opisuje specifičnu strukturu koju korisnik mora da prati da bi uneo ispravnu vrednost.
U nekim slučajevima korisniku se pruža mogućnost da koristi pomoćne mehanizme kao što je
kalendar za odabir datuma kako bi na ispravan način popunio polje za unos. Kada korisnik to uradi
više puta, polako uči kako je unos formatiran, tako da može samostalno da kopira isti format.
Obrazloženje
Postavite jasna očekivanja definisanjem polja za unos u strukturiranom formatu: naznačite
korisnicima kakav se unos traži. Deleći velika polja za unos u manje, greške u unosu podataka mogu
se dramatično smanjiti. Lakše je prepisati ili zapamtiti dugi broj kada se razbije na delove.
Strukturirani format prikladan za predvidljiv unos, Forgiving format je pogodan za otvorene unose.
Korišćenje strukturiranog formata u poljima za unos štedi vreme za korisnika, kada se od njega
zahteva da više puta popuni isto polje za unos kao deo čestog zadatka. Obrazac strukturiranih
podataka pomaže korisniku kroz pojednostavljene i kontrolisane unose, što zauzvrat ubrzava zadatke
prikupljanja podataka.
1.1.3. „Kapča“ (Captcha)
Rezime problema
Aplikacija treba da potvrdi da podaci koji su poslati potiču od stvarnog čoveka, a ne od robota.
Primer:

6. https://ui-patterns.com/patterns/Captcha/examples
Upotreba
Veb lokacije koje imaju mogućnost da posetioci komentarišu, registruju se kao korisnik ili na drugi
način aktivno objavljuju sadržaj na veb lokaciji često su izloženi napadima robota za neželjenu poštu
(spam). Sadržaj koji postavljaju takvi spam roboti se može uporediti sa neželjenom poštom poslanom
e-poštom. Glavna svrha spam robota na vebu je da kreiraju i šire linkove ka određenom veb sajtu,
kako bi povećali ocenu pretrage veb lokacija na pretraživačima kao što je google.com. Ovi neželjeni
postovi retko imaju bilo kakve veze sa temom veb stranice, pa otuda i kategorizacija neželjene pošte.
Da bi se izbegla ovakva neželjena pošta, uvode se captchas. Cela ideja iza Captchas-a je da se stvori
način za razlikovanje stvarnih ljudskih bića od automatizovanih robota.
 Koristite kada vaša veb aplikacija doživi napade zlonamernih veb robota koji pokušavaju da
objave neželjeni sadržaj na vašoj veb lokaciji
 Koristite da zaštitite svoju veb lokaciju od automatizovanih robota
 Koristite kada mogućnost postavljanja sadržaja na vašu veb lokaciju nije blokirana potrebom
da se prijavite. Uključeni su procesi registracije.
Rešenje
Najpopularniji oblik Captcha su slike koje predstavljaju slova i brojeve. Od korisnika se traži da napiše
u posebno polje obrasca ono što slika predstavlja. Da bi se sprečilo da spam sistemi koriste OCR
softver za čitanje slike, slikom se manipuliše na različite načine, što otežava mašinsko prepoznavanje,
a istovremeno održava čitljivost za ljude.
Ako korisnik uspe da otkuca ono što slika kaže, njegov sadržaj se postavlja na veb lokaciju. Ako ne,
radnja će biti odbijena. Uobičajeno je da se dozvoli nekoliko pokušaja da unesete captcha tekst, jer su
neke captcha slike čak i ljudima nečitljive zbog jake manipulacije slikama kojoj su bile izložene.
Obrazloženje
Captchas je skraćenica od „Completely Automated Public Turing test to tell Computers and Humans
Apart“ (Potpuno automatizovani javni Tjuringov test da razlikuje računare i ljude). Cela ideja koja stoji
iza Captchas-a je da se ljudi razlikuju od računara dozvoljavajući korisniku da izvrši radnju koju
računar ne može. Captcha je jednostavan Tjuringov test.

7. Tanka je granica između toga da captcha postane neprepoznatljiva za OCR skenere i da je i dalje
čitljiva za ljudska bića. Čitljivost za čoveka mora biti na prvom mestu. Drugi problemi sa
implementacijom captcha za zaštitu veb lokacije uključuju i isključivanje korisnika sa oštećenim
vidom jer ne mogu da koriste glasovni softver da govore ono što captcha čita.
Drugi oblici zaštite od zlonamernih pošiljalaca neželjene pošte su postavljanje pitanja poput „koliko je
2 + 3“ ili „koliko je dva plus tri“ ili korišćenje glasovnih captcha.
1.1.4. Graditelj pravila (Rule builder)
Rezime problema
Korisnik treba da, često više puta, sprovede upit za pretragu na osnovu prilagođenog skupa pravila
Primer
https://ui-patterns.com/patterns/rule-builder/examples
Upotreba
 Koristite za pravljenje upita za pretragu na osnovu nekoliko uslova
 Koristite za čuvanje segmenta umesto statičkog izbora
 Koristite da biste pomogli korisnicima da naprave dinamičke liste, čineći izabrana pravila
statičnim, a ne stvarnim rezultatom pretrage
 Koristi se kada upit za pretragu uključuje nepoznat broj nedefinisanih uslova
 Nemojte koristiti kada korisnici mogu da pronađu ono što im treba koristeći samo unos
teksta.
 Nemojte koristiti kada tip upita za pretragu zahteva da se isti tip promenljivih bira svaki put.
Rešenje

8. Dozvolite korisniku da napravi dinamičku listu pravila kako bi suzio rezultate koji se podudaraju iz
skupa podataka. Svako pravilo je predstavljeno posebnom linijom ili poljem i podeljeno jedno od
drugog vertikalno.
 Bilo koji ili sve. Korisnik mora da navede da li je pravilo potrebno (I) ili je opciono (ILI).
Uobičajeni pristup da se pojednostavi implementacija ovog obrasca je da se obezbedi
mogućnost izbora da li sva izabrana pravila treba da se podudaraju – ili samo jedno od
pravila.
Iznijansiraniji pristup je dozvoliti da svako pravilo bude obavezno ili samo opciono
podudaranje.
 Tretirati svaki tip pravila drugačije? Kako korisnik bira vrstu pravila koju želi da nametne, ta
pravila mogu imati veoma različite uticaje na to koje odgovarajuće podatke treba uneti da bi
pravilo dalo značenje.
Zbog toga mnogi kreatori pravila obezbeđuju pametne mini-obrasce koji se razlikuju u
zavisnosti od toga koja je vrsta pravila izabrana. Jedno pravilo može nametnuti pretragu
teksta, pri čemu opcije poput „sadrži“, „ne sadrži“, „podudaraju se“ ili „ne podudaraju“ imaju
smisla. Druga pravila mogu biti da izaberete opciju sa dinamičke liste ili da obezbedite
numeričke ili opsege unosa.
 Dodavanje i uklanjanje pravila. Najpametniji kreatori pravila funkcije je da dinamički dodaju i
uklanjaju pravila.
Dugme „Dodaj“ se obično nalazi ili direktno ispod pravila i ostaje tako kako se nova pravila
dodaju ili uklanjaju, ili se nalazi pored dugmeta za uklanjanje pravila. U slučaju poslednjeg,
ovo omogućava da se nova pravila umetnu direktno ispod željenog pravila.
Uklanjanje pravila je najčešće dozvoljeno na početku ili na kraju reda na kome je pravilo
predstavljeno.
Obrazloženje
Kreator pravila omogućava korisniku da odredi jedinstvene uslove za otkrivanje i grupisanje stavki u
jednom ili više skupova podataka.
Rezultati koje vraća aktivno pravilo mogu biti dinamičke prirode jer se srodni skupovi podataka
menjaju tokom vremena. Aktivno pravilo može pokrenuti skup radnji koje treba izvršiti kada su
ispunjeni uslovi, kriterijumi i vrednosti pravila. Skupovi pravila mogu biti grupisani u diskretne
jedinice i povezani zajedno sa logikom uslova da bi se stvorili veoma složeni uslovi pravila.
1.1.5. Prečice na tastaturi (Keyboard Shortcuts)
Rezime problema
Korisnik želi brže da obavlja zadatke koji se ponavljaju
Primer

9. ▲ Informacije o dostupnim prečicama na tastaturi za veb interfejs Dropbox.com se prikazuju
pritiskom na „?".
https://ui-patterns.com/patterns/keyboard-shortcuts/examples
Upotreba
Koristite kada vaša aplikacija sadrži zadatke koji se ponavljaju koji uključuju prebacivanje režima sa
tastature na miša.
Rešenje
Omogućite korisnicima da brže pokreću radnje pomoću komandi sa tastature.
Tipično se prave prečice na tastaturi za komande koje su deo čestih ili ponavljajućih korisničkih
zadataka.
Kada dodajete prečice svojoj aplikaciji, izbegavajte korišćenje postojećih sistemskih prečica ili prečica
koje su već korišćene negde drugde u drugom kontekstu u istoj aplikaciji. Izbegavajte prenamenu
prečica koje su korisnici već prilagodili svom toku rada.
Razmislite o dodavanju informacija o prečicama u stavke menija i savete za dugmad i ikone, ako su
dostupni.
Obrazloženje
Olakšajte pristup zadacima koji se ponavljaju pružajući veštim korisnicima prečice na tastaturi do
njihovih povezanih radnji. Smanjite ukupno utrošeno vreme, potrebne korake i izgubljenu mentalnu
energiju da biste završili zadatak, a da ne otežate početnicima.
Prečice na tastaturi ubrzavaju izlaganje funkcija programa korisnicima pritiskom na tastere umesto
klikova mišem. Ovo može u velikoj meri pomoći da se ubrza vreme završetka zadatka jer korisnik ne
mora da menja režime sa korišćenja tastature na miša; ruke mogu ostati na tastaturi1.
1.1.6. Editor na licu mesta (Inplace editor)

10. Rezime problema
Korisnik treba brzo i lako da uredi vrednost na stranici
Primer
https://ui-patterns.com/patterns/InplaceEditor/examples
Upotreba
 Koristite kada korisnik treba da izmeni samo jednu vrednost (ili veoma malo), a ne mnogo
polja.
 Koristite kada je vrednost koju korisnik treba da izmeni jednostavnog formata, tj. tekstualni
niz, ili vrednost u padajućem meniju.
 Koristite ako želite da korisnik može da izmeni vrednost bez odlaska na stranicu
administracije, ali tako što će ostati na istoj stranici.
Rešenje
Dozvolite korisnicima da uređuju vrednosti na istom mestu gde su prikazane. Omogućite jednostavan
način da dozvolite korisnicima da uređuju delove stranice bez potrebe da budu preusmereni na
stranicu za uređivanje. Obično se hover efekti koriste za poziv na uređivanje.
Obrazac „Inplace Editor“ omogućava lokalizovano uređivanje elemenata u hodu. Šablon omogućava
jednostavno uređivanje postavljanjem kontrola odmah pored elemenata na koje utiču.
Na primer, kada je u režimu za uređivanje aplikacije, element naslova stranice će prikazati kontrole za
uređivanje kada korisnik pređe mišem preko njega. Boja pozadine elemenata je istaknuta i prikazano
je objašnjenje koje traži od korisnika da klikne na element kako bi ga uredio. Kada korisnik klikne na
element, on se transformiše u polje za unos (tekst, padajući meni, itd.). Takođe se prikazuju dugme
za snimanje i dugme za otkazivanje. Često se polje za unos poklapa sa stilom originalnog elementa.
Obrazloženje
Uređivač (editor) na licu mesta pruža jednostavan način da dozvolite korisniku da uređuje delove
stranice bez potrebe da bude preusmeren na stranicu za uređivanje. Umesto toga, korisnik može
samo da klikne na stranicu i uredi elemente koje želi da promeni – bez ponovnog učitavanja stranice.
1.1.7. Pregled (Preview)
Rezime problema
Korisnik želi da proveri kako promene u poljima formulara utiču na krajnji rezultat što je pre moguće.
Primer

11. https://ui-patterns.com/patterns/LivePreview/examples
Upotreba
 Koristite kada želite da pružite korisniku pregled u realnom vremenu onoga što on ili ona
kreira
 Koristite kada je korisniku teško da shvati kakav će biti konačni rezultat bez pregleda za
referencu
 Ne koristite kada je ulaz jednostavan i rezultujući izlaz ne zavisi od specifičnog rasporeda
Rešenje
Dozvolite korisnicima da pregledaju posledice neke radnje pre nego što se obavežu na nju.
Ažurirajte pregled onoga što će modifikacija obrasca rezultirati tokom čitave interakcije sa obrascem.
Umesto da čekate da korisnik pošalje obrazac, promene se odmah prikazuju u pregledu. Svaki
korisnički događaj od značaja rezultira obradom na strani pretraživača.
Obrazloženje
Pregledi olakšavaju korisnicima da odluče da li da se obavežu na promenu ili ne i tako pozivaju na
istraživanje i kreativnost. Odmah pokažite povratne informacije u pregledima uživo da biste dodatno
podstakli zabavu, igru i istraživanje. Rezultat je povećana interaktivnost. Korisnik ne mora da čeka
ponovno učitavanje stranice na obrascu da bi saznao da li su podaci ispravno uneti u obrazac.
Povratna informacija je trenutna.
1.1.8. Prevuci i otpusti (Drag and drop)
Rezime problema
Korisnik treba da izvrši operacije na jednom ili više objekata premeštajući ih sa jednog mesta na
drugo.

12. Primer
stampsandsons.com
▲ Prevucite i ispustite u Stamps and Sons
Upotreba
 Koristite kada želite da dozvolite korisnicima da obavljaju složenije zadatke putem direktne
manipulacije – putem pristupa Šta-vidiš-je-šta-dobiješ (VISIVIG).
 Koristite kada želite da izbegnete prisiljavanje korisnika da ode na drugu stranicu kako bi
ponovo uredio izgled
Rešenje
Omogućite korisnicima da pokupe i preurede sadržaj prevlačenjem preko ekrana
Obrazloženje
Instinktivno, mnogi korisnici pokušavaju da prevlače i ispuštaju objekte u korisničkim interfejsima.
Ova konceptualna metafora sa jasnim vezama sa fizičkim svetom pruža nivo direktne manipulacije sa
kojim se malo metoda može meriti. Smatra se jednim od najefikasnijih načina za preuređivanje stavki
na listi, premeštanje objekata sa jednog mesta na drugo ili čak otpremanje datoteka.
Diskusija
Pošto prevlačenje i ispuštanje nije uvek moguće, razmislite o podršci alternativnim načinima za
preuređivanje modula sadržaja.
1.1.9. Proširivi ulaz (Expandable Input)
Rezime problema
Korisnik želi da iskusi glavni interfejs sa što više prostora na ekranu i sa minimumom ometanja
Primer

13. tvitter.com
▲ Tvitter.com je postavio veliku oblast za unos, privlačeći pažnju - sa nagoveštajem za unos, na vrhu
ekrana. Kada kliknete na polje za unos, ono se proširuje – čuvajući dragoceni prostor iznad preloma
za sadržaj.
Upotreba
 Koristite kada želite da glavni fokus bude na glavnom interfejsu, a ne na njegovim kontrolama
za unos
 Koristite kada želite da nema ometanja pažnje u glavnom interfejsu
Rešenje
Proširite veličinu polja za unos kako budu u fokusu ili su ispunjena sadržajem
Dizajnirajte svoje kontrole u dva režima: prošireni i skupljeni. Kako korisnik klikne na kontrolu, ona se
proširuje na svoju veću veličinu. Ovo može pomoći da se sekundarne funkcije drže dalje dok korisniku
ne zatrebaju.
Obrazloženje
Proširivi ulazi mogu pomoći u rasterećenju korisničkih interfejsa tako što će velika polja za unos ostati
van fokusa dok ne budu potrebna. Za višenamenske korisničke interfejse, može biti od pomoći da
opcione radnje kao što su pretraživanje, postavljanje ili komentarisanje privuku minimum pažnje.
1.1.10. Popuni praznine (Fill in the Blanks)

14. Rezime problema
Korisnik treba da unese podatke u sistem
Primer
https://ui-patterns.com/patterns/FillInTheBlanks/examples
Upotreba
 Koristite kada treba da pravite oznake za polja za unos koje ne objašnjavaju dovoljno o čemu
se radi u polju za unos.
 Koristite kada teba da pravite dugačke i komplikovane oznake za polja za unos, što otežava
razumevanje od strane korisnika.
 Koristite kada možete da izrazite kontekst polja za unos tako što ćete ga staviti u rečenicu.
 Koristite kada popunjavate polje za unos koje je obavezno.
 Koristite kada imate relativno mali skup polja za unos da postavite kao deo rečenice. Ako
imate mnogo polja za unos, to može izgledati zamorno za korisnika, jer struktura rečenice
primorava korisnika da pročita sve rečenice i stavi sva polja za unos u kontekst tih rečenica.
 Ne koristite ako imate mnogo polja koja nije potrebno popuniti.
Rešenje
Kreirajte polja za unos u obliku rečenice sa poljima za unos kao praznim prostorima koje treba da
popuni korisnik. Napišite rečenicu i pustite korisnika da popuni prazna mesta u rečenici birajući ili
popunjavajući polja za unos koja su na mestu reči.
Kada polje za unos nije umetnuto na kraj ili početak rečenice, važno je za opštu čitljivost i
razumljivost interfejsa da polja za unos ne zauzimaju više prostora od visine jednog tekstualnog reda.
Tekstualni okviri za unos i padajuće liste se mogu koristiti u ove svrhe.
Obrazac se često vidi u aplikacijama koje filtriraju velike liste prema uslovima.
Najveći nedostatak obrasca je njegova slaba sposobnost da se lokalizuje na različite jezike jer će
položaj svakog unosa možda morati da se preuredi da bi odgovarao gramatici svakog jezika.

15. Korišćenje „Popuni praznine“ na ovaj način onemogućava trenutnu konverziju korisničkog interfejsa
na druge jezike.
Obrazloženje
Svi znamo kako da završimo rečenicu. Umetanjem polja za unos u rečenicu reči, korisnički interfejs
postaje razumljiv sam po sebi, mogući nesporazumi se minimiziraju, a kontekst se jasnije razume.
Ponekad može biti teško pronaći opisnu oznaku za unos koji ne udaljava korisnika od sistema.
„Popunite praznine“ čini interfejs donekle razumljivim. Naše semantičke sposobnosti kao ljudskih
bića nam omogućavaju da popunimo delove rečenice koji nedostaju.
1.1.11. Podešavanja (Settings)
Rezime problema
Korisniku je potrebno centralno mesto za definisanje načina kako aplikacija treba da se ponaša
Primer
pinterest.com
▲ Pinterest je grupisao svoja podešavanja u delove kojima se može upravljati, što omogućava
korisniku da prilagodi iskustvo svojim specifikacijama.
https://ui-patterns.com/patterns/settings/examples
Upotreba
 Stavite podešavanja u oblast Podešavanja kada ih koristi većina korisnika
 Stavite postavke u oblast Podešavanja kada ih koristi manjina korisnika, ali su od suštinskog
značaja za ispunjavanje njihovih potreba.
 Koristite da biste obezbedili mesto za podešavanja kojima se retko pristupa.
 Koristite za snimanje korisničkih preferencija
 Ne koristite podešavanja za radnje kojima se često pristupa. Premestite ih na traku sa
alatkama.
Rešenje

16. Dozvolite korisnicima da navedu svoje preferencije za to kako proizvod treba da se ponaša.
Obezbedite centralno mesto korisnicima da prilagode proizvod svojim specifikacijama. Obezbedite da
opcije koje se mogu konfigurisati budu dobro organizovane, predvidljive i upravljive. Grupišite i
premestite manje važna podešavanja na sopstvene ekrane.
 Obezbedite pregled. Omogućite korisniku da brzo razume sva dostupna podešavanja i
njihove trenutne vrednosti. Ako postoji mnogo podešavanja za razumevanje, dajte prioritet
onima koji će najverovatnije zanimati korisnike. Grupišite i premestite manje važna
podešavanja na odvojene ekrane.
 Obezbedite dobre podrazumevane vrednosti (Good Defaults). Razmotrite dobre početne
vrednosti za postavke – izaberite podrazumevanu vrednost koju bi većina korisnika izabrala i
budite neutralni.
 Kada grupisati. Da biste izbegli sveobuhvatne liste podešavanja, razmislite o grupisanju
podešavanja u više kraćih lista. Dobra heuristika je:
o 7 ili manje preferencija: Uopšte nemojte grupisati.
o 9 do 16: Grupišite povezana podešavanja u dva ili više razdeljena odeljka.
o 16 ili više: Razmislite o izradi podekrana, ali imajte na umu doslednu terminologiju -
uverite se da naslovi podekrana odgovaraju oznaci podešavanja koja ih otvara.
1.1.12. „Što vidiš to i dobiješ“ (WYSIWYG)
Rezime problema
Korisnik želi da kreira sadržaj bogat medijima i formatirani tekst, ali nema znanja ili vremena za
pisanje HTML-a.
Primer
Upotreba
 Koristite kada želite da date korisniku jasnu naznaku kako će njegov sadržaj izgledati kada
bude objavljen. WYSIWYG je akronim za ono što vidite je ono što dobijate.
 Koristite kada se korisnicima sajta ne sviđa formatiranje teksta pomoću HTML kodova ili
jezika za označavanje.
 Koristite da biste smanjili prepreke šta dopuštate korisnicima da dodaju na vašu veb lokaciju.

17.  Koristite kada želite da na jednostavan način integrišete medije (slike, video...) u formatirani
sadržaj vašeg sajta koji ne zahteva HTML ili bilo koje drugo znanje.
 Koristite kada je korisnik sklon da troši vreme na ispravljanje malih detalja na svom sadržaju.
WYSIWYG omogućava korisnicima da vide formatirane rezultate dok uređuju, što povećava
njihovo samopouzdanje i omogućava brze i dobre rezultate.
 Ne koristite ako želite da HTML sintaksa bude čista. Poznato je da mnogi WYSIWYG uređivači
proizvode preopširan i neuredan HTML kod.
 Ne koristite ako želite da uređivač funkcioniše u svim veb čitačima. WYSIWYG uređivači retko
podržavaju sve veb čitače, a ako i podržavaju, to su često samo najnovija izdanja
pretraživača.
Rešenje
Postoji mnogo javascript biblioteka dostupnih na mreži koje će pretvoriti <tektarea/> HTML element
u potpuno funkcionalan WYSIWYG editor. Uređivač prikazuje radnu oblast koja je i ulaz i konačni
formatirani izlaz. Sadržaj se čuva kao HTML.
Editori se mogu prilagoditi potrebama korisnika. Možete onemogućiti nepotrebne funkcije. Možete
izabrati da ne dozvolite umetanje slika, menjanje boje ili veličine fonta – ili čak da naterate korisnika
da koristi samo unapred definisanu listu CSS klasa.
Obrazloženje
WYSIWYG (Ono što vidite je ono što dobijate) je prvobitno uveden u procesore teksta kao što su
WordPerfect i Microsoft Word. Tada je to bio revolucionaran način pisanja dokumenata, gde je
urednik na ekranu imitirao rezultat kao u štampi.
1.1.13. Ulazna povratna reakcija (Input feedback)
Rezime problema
Korisnik je uneo podatke u sistem i očekuje da dobije povratnu informaciju o rezultatu tog unošenja.
Primer

18. ▲ Kada se registrujete na tviteru, odmah, dok kucate, dobijate povratne informacije o tome šta ste
otkucali.
https://ui-patterns.com/patterns/InputFeedback/examples
Upotreba
 Koristite kada želite da pružite povratne informacije korisniku nakon slanja sadržaja na vašu
veb stranu.
 Koristite kada želite da obavestite svoje korisnike o greškama koje su se desile tokom slanja
obrasca.
 Koristite kada želite da obavestite svoje korisnike da je sve prošlo po planu nakon slanja
sadržaja.
Rešenje
Kada korisnici šalju sadržaj na vašu veb lokaciju putem formulara, greške će se s vremena na vreme
dešavati. Cilj ovog obrasca je da poboljša korisničko iskustvo minimiziranjem grešaka u unosu.
Paradigma koja se zove validacija podataka je veoma pogodna za hvatanje grešaka u trenutku
podnošenja obrasca. Uobičajeni način da se utvrdi da li su podaci validni je postavljanje pravila za
svako polje za unos u obrascu. Uneti podaci moraju da prođu ova pravila da bi se smatrali validnim.
Takva pravila validacije mogu biti:
 Potvrdite prisustvo sadržaja – mora se uneti bar neki sadržaj
 Potvrdite izuzimanje sadržaja – zabranjene vrednosti – na primer, ubacivanje „admin“ kao
korisničko ime
 Potvrdite uključivanje sadržaja – podaci moraju da sadrže određene podatke ili moraju biti
unutar određenog opsega
 Potvrdite prihvatanje (na primer, uslove korišćenja usluge) – često pomoću polja za potvrdu
 Potvrda validacije – dva polja za unos moraju da se poklapaju – koja se vidi sa, na primer,
lozinkama

19.  Format za potvrdu – e-pošta, na primer, mora da ima znak „@“ i nekoliko tačaka ili na primer
da korisnik mora biti stariji od 18 godina.
 Potvrda dužine – Lozinka u mnogim slučajevima mora imati najmanje 6 znakova.
 Proveri jedinstvenost – Mnogi sistemi dozvoljavaju samo jednog korisnika sa datim
korisničkim imenom
Ako su podaci koje je korisnik dostavio u redu, dobra je praksa da obavestite korisnika da je sve
prošlo kako je planirano. Još bolje, preusmerite korisnika na stranicu, gde on ili ona mogu da vide
novoposlati sadržaj u kontekstu.
Međutim, ako se podacima koje je korisnik dostavio ne potvrdi valjanost, korisniku treba prikazati
poruku o grešci koja objašnjava kako da ispravi podatke i zahteva ponovno podnošenje. Takva poruka
o grešci treba da objasni sledeće:
 Došlo je do greške. Okvir za prikaz na vrhu stranice (tako da korisnik ne mora da skroluje
stranicu da bi otkrio da je došlo do greške), poželjno crveno obojen da signalizira grešku.
 Gde je došlo do greške. Ovo se može uraditi navođenjem polja koja su izazvala grešku u
poruci o grešci, kao i isticanjem polja (promenom njihovih boja) koja su izazvala grešku.
 Kako se greška može popraviti. Navedite informacije o tome šta treba da bude drugačije da bi
polje bilo validno. Ovo može biti navedeno u gornjem polju za grešku ili direktno pored polja
koje uzrokuje grešku.
Vizuelni prikaz ulazne povratne informacije treba da odgovara poruci koju želite da date. Ako je
podnošenje prošlo uspešno, razmislite o tome da obavestite korisnika u zelenom polju. Ako je poruka
neutralna, često se koristi žuta boja. Ako je nešto pošlo po zlu, često se koristi crvena.
Obrazloženje
Dok korisnik popunjava obrazac na veb stranici, on ili ona sprovode proces pretvaranja mentalnih
podataka strukturiranih na jedan način u pisani oblik strukturiran na drugi način. Pošto svi ljudi ne
razmišljaju isto, obavezni smo da unosimo podatke na različite načine dok pokušavamo da
konvertujemo naše individualno strukturirane podatke u zajedničku strukturu koju definiše sistem.
Podaci uneseni u veb formulare mogu imatii greške, na šta moramo biti spremni u našem dizajnu.
Korisnik mora biti svestan činjenice da uneseni podaci ne odgovaraju strukturi koju smo dizajnirali.
Koristeći vizuelno različita obaveštenja o povratnim informacijama, korisnik će biti obavešten o
takvim greškama i kako da ih ispravi.
Diskusija
Može se reći i da bi trebalo više da se usredsredite na sprečavanje grešaka pre nego što korisnik
podnese svoje podatke nego na pružanje dobre poruke o grešci nakon slanja podataka. Razmislite o
ograničavanju unosa pomoću polja za izbor.
Uzmite u obzir jezik vaših poruka o grešci, jer one mogu imati emocionalni efekat na vaše korisnike.
Koji je ton poruke prikladan za vaše korisnike?
Dajte jasne povratne informacije nakon svake akcije.
Korisnici će se osećati sigurnije i informisanije kada dobiju povratne informacije od sistema. Povratne
informacije uključuju obaveštenja, dijaloške okvire za poruke, obojena ili onemogućena dugmad,
animacije učitavanja, ugrađena upozorenja, opise alata, efekte lebdenja i tako dalje. Premostite jaz
stvoren između izvođenja radnje i evaluacije sistema nakon akcije.

20. 1.1.14. Birač datuma (Calendar Picker)
Rezime problema
Korisnik želi da pronađe ili pošalje informacije na osnovu datuma ili perioda
Primer
▲ Birač datuma u kalendaru na everiblock.com.
https://ui-patterns.com/patterns/CalendarPicker/examples
Upotreba
 Koristite kada korisnik želi lako da izabere datum ili period da bi poslao, pratio, sortirao ili
filtrirao podatke.
 Nemojte koristiti izolovano, kada je korisnik bolje upoznat i efikasniji sa drugim načinom
unosa datuma. Neki korisnici više vole da unose datum preko tekstualnog polja.
 Nemojte koristiti kada se datum koji treba uneti lakše uneti pisanjem datuma kao teksta –
primer je rođendan (pre 18, 30, 50 ili 70 godina – potrebno je mnogo klikova za izbor)
Rešenje
Birač datuma se aktivira na različite načine:
 Kada kliknete na vezu koja traži da izaberete datum
 Prilikom izbora polja za unos datuma
 Kada kliknete na ikonu kalendara, najčešće se postavlja pored polja za unos datuma
Prilikom aktivacije, okvir sa mesečnim kalendarom se prikazuje na trenutnoj stranici, tražeći od
korisnika da izabere datum u okviru. Najčešće se prikazuje samo jedan mesec, ali neki interfejsi
prikazuju kalendare za 3 meseca jedan pored drugog kako bi se olakšalo opterećenje klikova korisnika
i pružio bolji pregled.
Prečice

21. Kalendar sa mesečnim okvirom dolazi sa nekoliko različitih prečica:
 Izaberite datum
 Idi na prethodni/sledeći mesec
 Idi na prethodnu/sledeću godinu
 Idi na danas (naročito važno kada današnji datum nije podrazumevani)
 Zatvorite birač kalendara
Zaključavanje perioda selekcije
Za neke interfejse, ima smisla ne dozvoliti izbor određenih datuma. Primer koji se često koristi je da
se omogući samo odabir bankarskih dana, dana u budućnosti ili dana u nekoliko narednih meseci.
Dva načina unosa podataka: brz i lak
Prilikom dizajniranja za efikasnost u veb aplikaciji, oblast kojoj se često posvećuje malo pažnje je
kontekst unosa. Na većini desktop računara najčešći način unosa podataka je preko tastature ili miša.
Na mobilnim uređajima dodir, tastatura i kamera su najčešći načini unosa.
Korišćenje birača datuma je jednostavan način za unos datuma. Ali uzmite u obzir i brz i lak način da
unesete datum – na primer, korisnik ne mora da se prebacuje između ulaznih uređaja, već može da
izvrši svoj zadatak pomoću jednog uređaja za unos.
Dobra podrazumevana podešavanja
Koristite obrazac „Dobre podrazumevane vrednosti“ da biste postigli bolje podatke i tačnost
pravopisa na unosu tako što ćete unapred izabrati odgovarajuće datume.
Podrazumevane vrednosti koje unapred izaberete zavisiće od konteksta, ali će najčešće biti trenutni
datum ili vreme. Međutim, ako ste dizajnirali planer ruta javnog prevoza, mogli biste da odredite
vreme početka na pola sata od sada, jer većina putnika neće započeti svoje putovanje odmah kada
traže kartu.
Proverite validnost perioda
Ako korisnik bira period, dobra je praksa da nikada ne dozvolite da krajnji datum bude pre datuma
početka. To znači da pratite početni datum.
Prikažite cele nedelje
Prikažite cele nedelje, čak i kada mesec ne počinje na kraju nedelje. Zasivite vidljive datume iz
prethodnih i narednih meseci, ali budite sigurni da ih je još uvek moguće izabrati.
Učinite ciljne linkove velikim
Uverite se da su ciljni linkovi dovoljno veliki i da ih je lako kliknuti.
Obrazloženje
Birač datuma je poznati deo grafičkog interfejsa koji je poznat korisnicima. Pomaže korisniku da lako
odabere datum ili period u podnošenju informacija ili filtriranju podataka.
Diskusija
Međunarodni obziri

22. U nekim zemljama je tipično da se prikazuje kalendar sa nedeljom kao prvim danom u nedelji, dok se
u mnogim evropskim i azijskim zemljama ponedeljak obično prikazuje kao prvi dan u nedelji.
Neke zemlje (npr. Nemačka i skandinavske zemlje) koriste brojeve nedelja za opšte planiranje. U
ovim zemljama, korišćenje broja nedelje je skoro jednako uobičajeno kao i korišćenje naziva meseca
za opisivanje perioda. Razmislite o prikazivanju broja nedelje za svaki red nedelje.
1.1.15. Promena izgleda kontrola (Morphing Controls)
Rezime problema
Korisnik želi da mu budu prikazane samo kontrole dostupne u datom trenutku
Primer
tvitter.com
▲ Kada odaberete da kliknete na svetlo dugme „Prati“ na tviter profilu, dugme se pretvara u „Pratiti“
i sada ima tamnu pozadinu sa belim tekstom.
Upotreba
 Koristite kada neke kontrole ne moraju da se prikazuju u isto vreme
 Koristite kada želite da očistite ekran od nepotrebnih i nedostupnih kontrola
 Koristite kada vaše korisničko iskustvo sadrži nekoliko režima (reprodukcija/pauza,
uključivanje/isključivanje)
Rešenje
Prikazane informacije i radnje dostupne u elementu korisničkog interfejsa zavise od njegovog režima.
Na primer, kada je video pauziran, komanda za reprodukciju je dostupna, ali pauza nije.
Obavezno održavajte dosledan izgled između svakog stanja kontrole koja se menja. Veličina fonta i
teksta treba da ostanu isti, ali boje se mogu razlikovati.
Kontrole za preoblikovanje dobro funkcionišu sa binarnim radnjama, kao što su:

23.  On/Off
 Sviđa mi se/Ne sviđa mi se
 Pratite/Opozovite praćenje
1.1.16. Dobre podrazumevane vrednosti (Good Defaults)
Rezime problema
Korisnik treba da unese podatke u sistem, gde će se neke ulazne vrednosti najverovatnije podudarati
sa podrazumevanim vrednostima.
Primer
momondo.com
▲ Tipična upotreba šablona dizajna Good Defaults je na sajtovima za putovanja. Ovde su podaci kao
što su datumi, tip putovanja i raspon cena unapred izabrani u odnosu na ono što većina drugih
korisnika obično bira. Dobra podrazumevana podešavanja omogućavaju jednostavno korišćenje i brz
početak traženja vašeg sledećeg putovanja.
https://ui-patterns.com/patterns/GoodDefaults/examples
Upotreba
 Koristite kada korisnik mora da bira između mnogih opcija, gde će se neke najverovatnije
podudarati sa podrazumevanim vrednostima koje su odabrali drugi korisnici.
 Koristite kada je moguće da sistem napravi kvalifikovana nagađanja o tome šta bi korisnik
mogao da izabere.
 Koristite kada se čini komplikovanim zadatak popunjavanje obrasca bez podrazumevanog:
kada broj potrebnih izbora ometa korisnika da dovrši popunjavanje obrasca.
 Ne koristite za polja za unos koja su važna da korisnik o njima razmisli. Na primer, za
prijavljivanje na bilten ili prihvatanje uslova i ugovora veb-sajta.
Rešenje
Unapred popunite polja obrasca sa najboljim nagađanjima šta korisnik želi.

24. Padajući okviri i tekstualna polja su unapred popunjeni ili unapred izabrani razumnim
podrazumevanim vrednostima. Podrazumevane vrednosti su inteligentna nagađanja o tome šta bi
korisnik eventualno izabrao.
Kada je prikladno, smanjite kognitivno opterećenje korisnika tako što ćete unapred popuniti obrasce
sa podrazumevanim vrednostima. Koristite kontekstualne informacije da biste inteligentno
pretpostavili šta bi korisnik najverovatnije izabrao. Uradite to samo kada ste razumno sigurni da će se
vaši korisnici složiti sa vašim podrazumevanim vrednostima – u suprotnom ćete napraviti dodatni
posao. Kontrole prethodnog popunjene kako vama odgovara, a ne korisniku najčešće će imati
negativan efekat.
Obrazloženje
Pružajući podrazumevane vrednosti u često složenim formularima sa mnogo opcija izbora, štitite
korisnika od muke oko biranja između svih relevantnih izbora. Popunjavanje dugačkog obrasca
ponekad može biti dovoljan razlog da korisnik ode negde drugde, gde je proces lakši.
Podrazumevane vrednosti možda nisu tačne, ali ste barem dali korisniku primer koji može da
promeni sa toliko truda koliko bi uložio da nema primera.
1.1.17. Poništi (Undo)
Rezime problema
Korisnik želi da vrati nazad pogrešan unos
Primer
pinterest.com
▲ Nakon što kažete svoje želje, nova početna stranica je napravljena za vas na Pinterest-u. Ako vam
se ne sviđa rezultat, možete poništiti akciju.

25. Upotreba
 Koristite kada želite da korisnicima pružite više samopouzdanja i spremnosti da se poigraju
 Što je skuplji gubitak podataka, to je važnije obezbediti opoziv.
 Kad god postoji mogućnost da se to što je urađeno, program treba da dozvoli radnje
poništavanja.
 Nikada ne koristite upozorenje kada mislite da poništite akciju.
Rešenje
Omogućite korisnicima da lako preokrenu sopstvene radnje
Obrazloženje
Korisnici nisu savršeni - imaju tendenciju da prave greške.
Promovišite bezbedno istraživanje i razigranost pružanjem poverenja da greške nisu trajne.
Poništavanje na više nivoa omogućava korisnicima da brzo i lako postepeno konstruišu i istražuju
radne putanje. Što je skuplji gubitak podataka, to je važnije pružiti mogućnost za poništavanje.
Diskusija
Odličan uzgredni efekat korišćenja obrasca „Poništi“ je to što korisnicima pruža više samopouzdanja i
više mogućnosti da isprobaju nove i drugačije stvari. Promovisanjem pokušaja i grešaka, korisnici
mogu brže da nauče i savladaju vašu aplikaciju.
1.1.18. Automatsko snimanje (Autosave)
Rezime problema
Korisnik želi da sačuva svoje podatke bezbedno i snimi ih dok se fokusira na rad, a da ne mora da se
seti da to uradi.
Primer
Upotreba
Koristite kada želite da pomognete korisniku da se fokusira na proizvodnju sadržaja bez brige o tome
da li su njihovi podaci bezbedni i sačuvani.
Rešenje
Sprečite slučajni gubitak podataka automatskim čuvanjem korisničkih unosa u fiksnim intervalima ili
u događajima od interesa.

26. Razmislite sa kojom učestanošću ima smisla automatski čuvati uneti sadržaj i na kojim događajima
ima smisla pokrenuti automatsko čuvanje. Najočigledniji događaj je klik na dugme za čuvanje, ali
događaj pomeranja fokusa na drugo polje takođe može biti od interesa.
Dugme za čuvanje
Da biste bolje obavestili korisnike o tome u kom se stanju nalazi njihov dokument, razmislite o
promeni oznake dugmeta za čuvanje sa „Sačuvaj“, kada formular sadrži neregistrovane promene u
„Sačuvano“ kada trenutno stanje formulara predstavlja ono što je sačuvano.
Obrazloženje
Neka korisnici brinu o stvaranju sadržaja, a ne o tome da ga izgube. Uklanjanje dugmeta za čuvanje u
potpunosti može izazvati strah, pa razmislite o tome da ga zadržite kako bi se korisnici osećali
bezbedno. Ostavite nenametljiv trag o sprovedenim radnjama korisnika i razmislite o dopuni sa
šablonom Undo.
Diskusija
Kada implementirate funkciju automatskog čuvanja, razmislite o tome da ne uklanjate dugme
„Sačuvaj“. Korisnici su skloni panici kada ne postoji dugme „Sačuvaj i zatvori“. Iako dugme „Sačuvaj“
ne radi ništa ili samo zatvara prozor, ono pruža poverenje i sigurnost korisnicima da su njihovi podaci
bezbedni. To je pitanje poverenja. Da li me je sistem čuo? Da li sam siguran da sam siguran?
1.1.19. Prompt unosa (Input prompt)
Rezime problema
Korisnik treba da unese podatke u sistem
Primer
https://ui-patterns.com/patterns/InputPrompt/examples
Upotreba
 Koristite kada oznaka polja za unos ne objašnjava u potpunosti šta treba popuniti ili kada
upotreba takve oznake izgleda kao da previše objašnjavate interfejs.
 Koristite kada primer teksta ili pitanja odgovara na ono što treba da se popuni u polje za
unos, kao i oznaka.
 Koristite kada želite da uštedite prostor koji oznaka inače zauzima.
 Koristite u kombinaciji sa oznakom da biste dodatno objasnili koja vrsta unosa je potrebna.
Rešenje
Polje za unos je unapred popunjeno primerom teksta ili pitanjem koje od korisnika traži šta da uradi
ili unese.

27. Obrazac „Input Prompt“ se najuspešnije koristi sa padajućim listama i tekstualnim poljima. Pošto
padajuće liste imaju fiksni skup izbora, reči poput Select ili Choose se koriste za upite. Za tekstualna
polja, string za podsticanje često počinje pozivom na akciju: Enter, Tipe, Search. Završite niz
imenicom koju unos opisuje, na primer Unesite grad ili Unesite adresu.
Kada korisnik uđe u polje za unos da bi uneo sadržaj, tekst zahteva se uklanja i zamenjuje praznim,
tako da je polje za unos slobodno za korisnika da ga popuni.
Obrazloženje
Kada korisnik popuni formular najčešće je sa ciljem da ga što brže popuni kako bi nastavio sa
ponuđenom uslugom. Zbog toga korisnik često samo skenira polja obrasca i oznake bez usmeravajna
punog pogleda na oznake. Koristeći upite za unos, odmah se skreće pažnja na ono što korisnik treba
da popuni. Korisnik to ne može propustiti.
Prompt za unos se često koristi za male obrasce koji su ključni za osnovnu funkcionalnost sajta jer
umetanje oznake unutar samog tekstualnog polja pomaže u uštedi prostora. Za detaljnije obrasce,
često postoji više nego dovoljno prostora da se objasni svako polje za unos.
1.1.20. Opraštajući format (Forgiving Format)
Rezime problema
Korisnik treba brzo da unese podatke u sistem, koji zatim tumači unos korisnika.
Primer
https://ui-patterns.com/patterns/ForgivingFormat/examples
Upotreba
 Koristite kada eksplicitnija polja za izbor, radio dugmad i polja za potvrdu čine unos podataka
suviše komplikovanim procesom da bi korisnik mogao da se time bavi.
 Koristite kada vreme koje je potrebno da se izvrši zadatak unosa proporcionalno prevazilazi
važnost cilja koji korisnik želi da postigne.
 Koristite kada se unos koji želite da prikupite odnosi na jednu temu. Na primer, fizička
lokacija ili događaj sa datim vremenom početka.
 Koristite kada se očekivani korisnički unos može donekle lako protumačiti pomoću
računarskog programa.
 Nemojte koristiti kada korisnik može bilo šta da pita ili unese. Koristite samo za usko
definisane svrhe.

28. Rešenje
Dozvolite korisnicima da unose tekst u sopstvenom formatu i sintaksi i pustite sistemu da ga
inteligentno tumači
Omogućite korisnicima da se usredsrede na to da stvari urade, a ne da ih pravilno kucaju. Smanjite
barijeru za interakciju korisnika tako što ćete dozvoliti unošenje širokog spektra formata i sintakse.
Razmislite o podsticanju korisnika da pruže informacije koje se lakše tumače obraćajući pažnju na to
kako tražite unos.
Prenesite problem unosa podataka sa problema korisničkog interfejsa na problem programiranja. Iza
kulisa, program neka proverava različite obrasce reči i pretvara ih u formatiranu vrednost.
Obrazloženje
Korišćenje šablona formata koji oprašta štedi prostor i smanjuje barijeru za korisnika da komunicira
sa sistemom.
U zavisnosti od toga koliko je široko definisana tema unosa, pozadinskom programu može biti sve
teže da protumači polje za unos. Uspeh ovog obrasca ima mnogo veze sa načinom na koji se traže
informacije – kako se korisnik traži.

29. 1.2. Objašnjavanje procesa (Explaining the process)
1.2.1. Čarobnjak (Wizard)
Rezime problema
Korisnik želi da postigne jedan cilj koji se može podeliti na povezane podzadatke.
Primer
homesite.com
▲ Čarobnjak koji se koristi za dobijanje ponude za osiguranje na homesite.com koristi istaknutu
karticu u meniju da saopšti svrhu čarobnjaka, koristi dobar podrazumevani obrazac za izbor opcija,
ima jasnu informaciju o dužini čarobnjaka kao i o tome koliko daleko korisnik je otišao, koristi veliku
dugmad za navigaciju, ima sav svoj sadržaj iznad preloma i još nudi i alternativu čarobnjaku tako što
dozvoljava korisniku da traži pomoć i razgovara sa osobom iz stvarnog života.
https://ui-patterns.com/patterns/Wizard/examples
Upotreba
 Koristite kada korisnik treba da izvrši zadatak ili cilj koji zahteva više od jednog koraka.
o Primer je dodavanje slike na veb lokaciju što može uključivati postavljanje slike i
isecanje slike; slika se ne može iseći pre nego što se otpremi na server.
 Koristite kada korisnik treba da izvrši složen zadatak koji se sastoji od nekoliko zavisnih
podzadataka.
 Koristi se kada korisnik treba da unese složene podatke u sistem, ali se zadatak lakše postiže
podelom procesa na niz manjih i jednostavnijih koraka.

30.  Koristite kada je korisniku potrebna uputstvo: korisnik želi da postigne opšti cilj, ali možda
nije upoznat sa koracima potrebnim za postizanje cilja.
 Koristite kada se koraci potrebni za postizanje konačnog cilja mogu razlikovati zbog odluka
donetih u prethodnim fazama.
 Koristite kada korisniku nedostaje neophodno znanje o domenu.
 Koristi se kada korisnik mora da dovrši korake određenim redosledom.
Rešenje
Podielite jedan cilj na zavisne podzadatke.
Zadatak unosa podataka u sistem podeljen je u više koraka. Svaki korak je predstavljen korisniku
jedan po jedan.
Korisniku treba predstaviti informacije o koracima koji postoje, napredovanju kroz proces i koji su
koraci završeni.
Obrazac čarobnjaka je veoma sličan obrascu „Steps Left“. Razlika između njih je fokus. Tamo gde se
„Steps Left“ fokusiraju samo na objašnjavanje koraka procesa, obrazac čarobnjaka se odnosi na
razdvajanje pouzdanih podzadataka potrebnih za obavljanje složenog cilja u zasebne korake.
Obrazac čarobnjaka se takođe razlikuje od šablona „Steps Left“ po tome što koraci potrebni za
postizanje cilja mogu da variraju u zavisnosti od informacija unetih u ranijim fazama. Na ovaj način,
obrazac čarobnjaka se odvaja od toga da bude samo vidljivo pomoćno sredstvo za korisnika.
Dugmad
U osnovi, čarobnjak je niz ekrana ili okvira za dijalog koji vode korisnike od početka do završetka.
Svaki ekran traži od korisnika da unese informacije bilo izborom ili popunjavanjem polja. Nakon
unosa podataka, korisnici se kreću kroz čarobnjak klikom na opcije navigacije kao što su „Prethodno“
i „Sledeće“. U poslednjem koraku korisnici kliknu na „Završi“ umesto na „Dalje“, što ukazuje na
završetak čarobnjaka.
Takođe je dobra praksa uključiti dugme „Otkaži“ na svim ekranima koje će korisnika vratiti tamo
odakle je došao. Tipično, dugme „Otkaži“ se nalazi u blizini drugih dugmadi za navigaciju, ali na
poziciji koja jasno razdvaja dugme od dugmadi „Prethodno“ i „Sledeće“. Štaviše, takođe je dobra
praksa da date upozorenje ako će podaci uneti do te tačke biti izgubljeni klikom na dugme „Otkaži“.
Pošteno je pretpostaviti da korisnik očekuje da se kasnije može vratiti čarobnjaku i početi odakle je
stao. Da ne bi frustrirali korisnika više nego što je potrebno, trebalo bi saopštiti posledice izlaska iz
čarobnjaka.
Čarobnjaci su zamišljeni da budu brzi i laki. Iz tog razloga, dobra je ideja da sadržaj ekrana kao i
njegovu navigaciju držite iznad preloma.
Neka svrha bude jasna: objasni
Neka svrha čarobnjaka bude jasna na svakom ekranu tako što ćete postaviti jasnu i sažetu oznaku na
svaki ekran. Opciono propratite oznaku kratkim objašnjenjem svrhe čarobnjaka na prvom ekranu.
Ovo će pomoći korisnicima da se sete zašto su uopšte ušli u čarobnjak i kakve će koristi imati od
završetka čarobnjaka.
Koristite jednostavan jezik

31. Korisnici čarobnjaka nisu nužno stručnjaci, zbog čega bi trebalo da se uzdržite od korišćenja tehničkog
žargona da biste podstakli korisnike. Jezik koji se koristi treba da se uklopi u referentni okvir
korisnika.
Sumirajte izbore
Dobra je praksa da se pri kraju čarobnjaka korisniku predstavi rezime izbora napravljenih u celom
čarobnjaku. Ovo će omogućiti korisniku da pregleda i još jednom proveri unete podatke pre nego što
se klikne na poslednje dugme „Završi“. U slučaju da korisnik želi da promeni unete podatke, trebalo bi
da ima mogućnost da se vrati na datu stranicu na kojoj je datum unet. Ako je broj koraka u
čarobnjaku veći od 8-10, dobra je ideja da obezbedite veze direktno do ekrana za unos podataka.
Dobra podrazumevana podešavanja
Čarobnjak je savršeno mesto za korišćenje dobrih podrazumevanih vrednosti. Većina korisnika
čarobnjaka nije upoznata sa zadatkom koji obavljaju i stoga nisu upoznati sa vrednostima za izbore
od kojih se traži da naprave.
Obrazloženje
Podelom složenog zadatka na niz delova, možete efikasno da pojednostavite zadatak. Svaki komad
predstavlja poseban mentalni prostor, kojim se lakše baviti nego celinom. Za razliku od obrasca
„Steps Left“, koraci potrebni za postizanje cilja mogu varirati u zavisnosti od informacija unetih u
ranijim fazama.
Odvajanjem složenih zadataka potrebnih za postizanje cilja u nekoliko koraka, proces unosa podataka
može da ide u nekoliko različitih pravaca u zavisnosti od toga koji se unos unosi.
Složen zadatak unosa velike količine zavisnihpodataka može se prilagoditi i pojednostaviti tako da
odgovara odlukama korisnika tokom celog procesa. U kontekstu odluka koje korisnik donosi u
svakom koraku, nepotrebni koraci mogu biti isključeni i važni koraci mogu ući u fokus.
U sistemu sa mnogo varijabli, korisnik može postići svoje ciljeve manipulisanjem ovim promenljivim
na različite načine. Obrazac čarobnjaka se može koristiti za grupisanje takvih promenljivih u zasebne
ciljeve. Ovo će pretvoriti zadatak dovršavanja složenog cilja iz više različitih akcija u koherentan
proces.
Kada su korisnici primorani da prate skup unapred definisanih koraka, manja je verovatnoća da će
propustiti važne aspekte procesa i da će na taj način načiniti manje grešaka.
Minimum obuke
Čarobnjaci se često prave za neobučene korisnike. Iz tog razloga, uverite se da vaš čarobnjak može da
se završi bez obuke. Razlog za korišćenje čarobnjaka je izbegavanje obuke za retke ili zastrašujuće
zadatke – a ne razvijanje stručnosti.
Diskusija
Korišćenje obrasca čarobnjaka pomaže korisniku da izvrši složen zadatak, ali u isto vreme može
uticati na vreme izvođenja zadatka.
Efikasan čarobnjak deli složene zadatke na podzadatke i eventualno pod-podzadatke. Podzadaci su
poređani na način koji je poznat i udoban za korisnika koristeći analizu zadataka. Analiza zadatka se
sprovodi pre nego što počne dizajn ekrana i najbolje je posmatrati stvarne korisnike koji obavljaju

32. zadatak u sopstvenom radnom okruženju. Rezultat analize zadatka je nacrt i arhitektura informacija
za čarobnjaka.
Držite malu količinu ekrana
Ako se zadatak podeli na previše ekrana, postoji šansa da dezorijentišete korisnika. Ako je potrebno
predugo da se završi čarobnjak, korisnik se može iznervirati i možda napustiti čarobnjaka pre nego
što ga završi.
Pazite da svaki korak ne bude predugačak
Iako bi količina ekrana trebalo da bude ograničena, ne bi trebalo uvek da smanjite količinu ekrana na
minimum. Kada ekran koraka u vašem čarobnjaku naraste do visine koja se ne uklapa u standardno
rešenje za ekran, postoji rizik da uznemirite korisnika i učinite čarobnjaka zamornim jer primorava
korisnika da skroluje da bi uneo podatke i kretao se napred-nazad. Razmislite o tome da takve korake
podelite na dva ili više ekrana.
Da biste saznali da li ste postigli pravi balans između malog broja ekrana i kratke visine ekrana,
prođite kroz čarobnjaka i uradite test upotrebljivosti..
Dozvolite alternative korišćenju čarobnjaka
Čarobnjak podržava korisnike koji izvršavaju zadatak spuštanjem krive učenja. Upotreba čarobnjaka
navodno povećava performanse korisnika, za mnogo kraće vreme nego bez upotrebe čarobnjaka.
Međutim, to dolazi po ceni „zaglupljivanja“ dok korisnici obavljaju zadatke bez potpunog
razumevanja i svesti o osnovnim odlukama. Rezultat je da korisnici ne mogu da izvrše zadatak ako
čarobnjak nije dostupan, kao i da nisu u mogućnosti da fino podese odluke donete manipulisanjem
drugim delovima sistema.
Čarobnjak ne bi trebalo da bude jedini način na koji korisnici mogu da dovrše zadatak, već samo
alternativa drugom komplikovanijem metodu dovršavanja istog zadatka. Koristite čarobnjak da biste
omogućili neobučenom korisniku da brzo započne i dozvolite iskusnijim korisnicima, koji više vole
fleksibilnost nego što čarobnjak dozvoljava, da koriste komplikovaniji metod.
1.2.2. Merač kompletnosti (Completeness meter)
Rezime problema
Korisnik želi da dovrši cilj, ali mu je potrebno uputstvo kada je postignut i kako da ga postigne.
Primer

33. udemi.com
▲ Merač kompletnosti na udemi.com pokazuje vaš napredak u završavanju onlajn kursa.
https://ui-patterns.com/patterns/CompletenessMeter/examples
Upotreba
Koristite kada želite da zadržite korisnika na pravom putu kada ispunjava određeni cilj.
Koristite kada želite da osigurate da vaši korisnici obave skup minimalnih zadataka.
Ne koristite kada krajnji cilj zavisi od niza uzastopnih zadataka.
Ne koristite za kritične ciljeve, već za ciljeve do kojih bi bilo lepo doći. Ideja ovog obrasca je da natera
korisnika da izvrši nekoliko zadataka više nego što bi inače uradio.
Rešenje
Omogućite korisnicima da procene napredak ka postizanju krajnjeg cilja. Podelite krajnji cilj na manje
podzadatke i povećajte procenat završenosti kako se svaki zadatak završi.
Podelite i postavite krajnji cilj na nekoliko podzadataka. Krajnji cilj se može proizvoljno definisati, kao
što je „Kompletnost vašeg profila“ ili „Elitni član“. Kako je svaki podzadatak završen, procenat
završenih zadataka raste – dostižući 100% kada je cilj završen.
Često se može videti da se uz navođenje napretka cilja (na primer: „34% urađeno“) daje i jedna ili više
veza ili nagoveštaja o tome kako se napredak može poboljšati. Ovo će pomoći korisniku da bude na
pravom putu i a odmah pređe na sledeći zadatak kada se jedan završi.
Postoji nekoliko pristupa predstavljanju i proslavi stanja krajnjeg cilja. Jedna opcija je jednostavno
naznačiti da su svi zadaci završeni (kao u „Vaš profil je završen!“) zajedno sa oznakom „100%“. Drugi
je da nagradite korisnika kolekcionarskim dostignućem: značkom, peharom ili sličnom nagradom
kojom on ili ona može da ukrasi svoj lični profil i da se pokaže pred svojim prijateljima.

34. Treći način da proslavite ispunjenje cilja i njegovih podzadataka je da to objavite u fidu njegovog ili
njenog profila, ili čak na centralizovanom fidu na celom sajtu.
Obrazloženje
Eksterno motivišite korisnike tako što ćete pokrenuti njihovu želju za postignućem, radoznalošću i
završetkom pružanjem povratne sprege koja omogućava korisnicima da procene njihov napredak ka
postizanju krajnjeg cilja.
Ovaj obrazac koristi skup psiholoških pokretača koji guraju korisnika da napreduje ka krajnjem cilju.
Jedna je radoznalost. Radoznali smo da saznamo šta se dešava kada dostignemo 100%. Da li ću biti
nagrađen ili će moj profil izgledati drugačije?
Druga je povratna sprega. Kako korisnik ispunjava podzadatke, njegov ili njen napredak se kreće ka
100%. Uspostavljena je jasna veza između izvršavanja zadataka i postizanja krajnjeg cilja.
Diskusija
Kao ljudi, osećamo da smo skloni da ostvarimo ciljeve koje smo odlučili da započnemo. Najčešće
biramo ciljeve za sebe na osnovu toga na šta želimo da potrošimo svoje vreme, a zatim se u to
upustimo.
Obrazac merača kompletnosti je pokušaj da se korisniku predstavi takav cilj kako bi on ili ona odlučila
da ga ispuni. Predstavljanjem lako završenih podzadataka moguće je ubediti korisnika da provede
vreme koje u drugim okolnostima ne bi imao.
1.2.3. Okvir za pomoć u liniji (Inline Help Box)
Rezime problema
Korisniku su potrebne pomoćne informacije koje se nalaze u blizini interakcije koju će obaviti.
Primer

35. https://ui-patterns.com/patterns/InlineHelpBox/examples
Upotreba
 Koristite kada interakcija sa vašom veb lokacijom nije nužno intuitivna i sama po sebi
razumljiva.
 Koristite ugrađene savete da dokumentujete svoj interfejs
 Koristite kada želite da motivišete korisnika da počne da koristi sistem.
 Koristite kada želite da pomognete korisniku da počne da koristi vašu veb aplikaciju.
 Koristite kada želite da usmerite korisnika da dobro počne sa svojom veb aplikacijom.
 Koristite da nežno predstavite funkcionalnost novom i neobučenom korisniku.
 Koristite funkciju „sakrij“ da biste izbegli frustraciju iskusnog i obučenog korisnika.
Rešenje
Dokumentujte svoj interfejs u liniji sa opisnim blokovima pomoći. Ako korisniku treba saopštiti važne
informacije, to se može lako objasniti umetnutim okvirom za pomoć koji se nalazi iznad ili ispod
glavnog sadržaja ekrana.
Ugrađeni okvir za pomoć treba da se razlikuje od normalnog sadržaja. Kako sam okvir za pomoć nije
deo glavne funkcionalnosti, dobra je ideja da joj dodate stil koji vizuelno odvaja okvir za pomoć od te
funkcionalnosti. Jednostavan način da to uradite je primenom druge boje pozadine i fonta na okvir za
pomoć́.
Pored toga, da biste izbegli nezadovoljstvo korisnika okvirom za pomoć, odlična karakteristika okvira
za pomoć je da ima funkciju „sakrij ovaj okvir“. Kada korisnik klikne na ovu vezu, okvir pomoći mu se
više nikada neće prikazati.
Obrazloženje
Pružanje pomoćnih informacija vašim korisnicima, koje se nalaze u blizini interakcije, čini pristup i
korišćenje instruktivnih informacija jednostavnim i lakim. In Line okviri za pomoć su mnogo
zanimljiviji od čitanja čestih pitanja ili odeljaka pomoći koji nisu povezani.
Omogućavajući korisniku da lako zatvori/sakrije svaki okvir za pomoć, korisnik se ne zamara
nepotrebnim informacijama nakon što ih shvati.
1.2.4. Preostali koraci (Steps Left)
Rezime problema
Korisnik treba da prođe kroz proces popunjavanja podataka u nekoliko koraka i trebaju mu uputstva.
Primer

36. facebook.com
▲ Facebook koristi obrazac Steps Left da naznači vreme čekanja prilikom pregleda dostavljene
oglasne kampanje.
https://ui-patterns.com/patterns/StepsLeft/examples
Upotreba
 Koristite kada se cilj korisnika može podeliti na niz manjih koraka koji se lakše prikazuju na
odvojenim ekranima.
 Koristite kada su koraci procesa toliko dugi da korisnik može steći utisak da će se nastaviti
zauvek bez uputstva koraka.
 Ne koristite kada postoji samo 1 ili 2 koraka u unošenju podataka.
 Ne koristite kada je proces popunjavanja podataka lako predvidljiv.
Rešenje
Dodajte blok za navigaciju koji opisuje korake uključene u podnošenje podataka sistemu. Blok treba
uvek da se pojavljuje na stranici. Kako korisnik napreduje kroz proces, navigacioni blok se ažurira u
skladu sa tim. Aktuelni korak je istaknut, dajući jasnu indikaciju korisniku dokle su stigli i koliko dalje
ima da ide.
Uklonite nepotrebne smetnje kao što su dodatna navigacija, reklame i slično.
Obrazloženje
Šablon „Steps Left“ se koristi kada je ključno da se zadrži fokus korisnika tokom procesa popunjavanja
podataka u sistem. Ovo je, na primer, kritično na veb lokacijama za e-trgovinu, gde se proces plaćanja
često vodi ovim obrascem. Na veb lokacijama za e-trgovinu, proces naplate je najkritičniji deo sajta,
jer je to deo koji prikuplja novac kupca. Šablon „Steps Left“ pruža korisniku odličan pregled koliko je
daleko u procesu korisnik otišao: pruža vidljiv kraj procesa, na koji korisnik može da cilja.

37. Ovaj obrazac je sličan obrascu čarobnjaka koji se najčešće nalazi u desktop aplikacijama, koji korak po
korak vodi korisnika.

38. 1.3. Obrasci vođeni zajednicom (Community driven)
1.3.1. Oceni sadržaj (Rate Content)
Rezime problema
Korisnik želi da promoviše određeni deo sadržaja kako bi demokratski pomogao da se odluči koji
sadržaj je kvalitetniji.
Primer
kelkoo.com
▲ U kelkoo-u se pregledavaju i proizvodi i prodavci. Ocena prodavaca je prikazana pored njihove
cene za dati proizvod i tekstualnog opisa svake ponude za svakog prodavca.
https://ui-patterns.com/patterns/RateContent/examples
Upotreba

39.  Koristite kada želite da postoji mehanizam za upravljanje rizikom za vaše korisnike: to je
stavka sadržaja na koju vredi potrošiti vreme i/ili novac.
 Koristite kada želite da pomoć vaših korisnika da demokratski odluče koji je sadržaj višeg
kvaliteta.
 Koristite kada želite da dozvolite da glas vaših korisnika vodi druge korisnike u tome šta je
dobro, a šta loše.
 Koristite kada vaša veb lokacija ima veliku korisničku bazu.
 Koristite kada smatrate da možete da verujete subjektivnom mišljenju svojih korisnika o
tome koje stavke su kvalitetnije od drugih.
 Ne koristite kada vaša veb lokacija ima malu zajednicu. Velika baza korisnika i jaka zajednica
su važni za generisanje dovoljno glasova i zauzvrat da bi poređenje između stavki postalo
smisleno.
Rešenje
Dozvolite korisnicima da ocenjuju sadržaj kako bi demokratski pomogli da se odluči šta je kvalitetnije.
Ocene korisnika deluju kao mehanizam za rešavanje rizika za vaše korisnike: da li je nešto na šta je
vredno trošiti vreme ili novac? Promovišite učešće zajednice dopuštajući korisnicima da demokratski
odluče šta je kvalitetnije. Razmislite o popratnim kvantitativnim ocenama, kvalitativnim komentarima
ili recenzijama.
Ovaj obrazac je veoma sličan obrascu „Vote To Promote“. Razlikuje se od obrasca „Vote To Promote“
po tome što ima drugačiji ishod. Ishod je da se omogući korisnicima da vode druge korisnike o tome
šta je dobro, a šta loše, a ne da promovišu ono što je zanimljivo.
Obrazac se sastoji od niza mehanizama koji rade zajedno:
 Mehanizam glasanja. Omogućite svojim korisnicima mehanizam da ocenjuju stavku na
numeričkoj skali. Najpopularnija skala je 1-5, gde je ocena od jedan lošija od ocene 5. Korisnik
dobija jedan glas i eventualno uz ocenu može dodati komentar sa objašnjenjem. Kada
korisnik oceni stavku, povratnu informaciju treba vratiti korisniku i obavestiti ga da je ocena
zabeležena.
 Prikažite prosečnu ocenu koju je stavka dobila. Prosek svih ocena koje je stavka dobila
pokazuje uočeni kvalitet stavke i vodiće nove korisnike da li je stavka vredna pažnje.
 Prikažite komentare sa objašnjenjima od korisnika koji ocenjuju stavku. Stavka se često može
oceniti nisko ili visoko iz više različitih razloga koji potiču iz različitih subjektivnih mišljenja
korisnika. Uočena mana od strane jednog korisnika nije nužno uočena mana drugog. Da biste
dodali više kvaliteta i dubine datim ocenama, dozvolite korisnicima da pregledaju stavku tako
što ćete im dozvoliti da se objasne slobodnim tekstom.
 Prikaži najbolje ocenjene stavke. Sumirajte najbolje ocenjene stavke na listama na glavnoj
stranici.
 Dajte prednost kvalitetnim artiklima. Dajte prednost artiklima visoko ocenjenim u rezultatima
pretrage, kada pregledate oznake i prikazujete povezane informacije.
 Povezani predmeti. Kada prikazujete jednu stavku, prikažite njenu ocenu. Pored toga,
koristite ljude koji su takođe visoko ocenili stavku da biste napravili listu srodnih stavki, tako
što ćete pokazati druge slične stavke koje su ti ljudi visoko ocenili.
Obrazloženje

40. Obrazac „Oceni sadržaj“ promoviše učešće zajednice i može vam pomoći da odvojite kvalitetan
sadržaj od sadržaja lošeg kvaliteta. Ovo je posebno korisno kada se vaša veb lokacija oslanja na
sadržaj koji su poslali korisnici.
Ocenjivanje sadržaja se odnosi na rukovanje rizikom sa stanovišta korisnika. Da li će me korisnik na
eBay-u prevariti ili je knjiga na Amazonu vredna mog vremena i novca?
Diskusija
Glavni razlog za korišćenje ovog šablona je pomoć korisniku u upravljanju rizikom. Primeri takvog
rizika su trošenje novca na kupovinu proizvoda ili ulaganje vremena u drugog korisnika.
Kada implementirate sistem ocenjivanja, morate da uzmete u obzir nekoliko stvari u vezi sa za šta
treba da se koristi i kako treba da se saopšti:
 Ko radi rejting
 Šta se ocenjuje
 Kakvo ponašanje pokušavamo da ohrabrimo ili obeshrabrimo?
Ko radi rejting
Kada čitate recenzije o artiklu i gledate kako drugi korisnici ocenjuju datu stavku, korisnik će sigurno
imati brojne nedoumice: „Da li je ocena i recenzija iskrena i autentična?“, „Da li korisnici koji su
ocenili datu stavku isti kao i ja?“, i „Da li recenzenti poseduju relevantnu kompetenciju da pregledaju
dotični proizvod ili uslugu?“.
Amazon i Netfliks su rešili ovaj problem tako što su dozvolili ljudima da ocene: da li vam je ova
recenzija bila od pomoći?
Šta se ocenjuje
Budite jasni kada saopštavate šta se ocenjuje i uverite se da korisnik tačno zna šta ocenjuje. Ako ono
što se ocenjuje deluje dvosmisleno, vrednost recenzije za druge korisnike se smanjuje. Na primer, ako
veb lokacija prikuplja dobre računarske ponude koje korisnici veb-sajta mogu oceniti, da li se ocenjuje
pouzdanost prodavca, proizvoda ili cena?
Razmislite o tome da svoj sistem ocenjivanja učinite višedimenzionalnim ili jednostavno budite jasni o
tome šta se ocenjuje.
Kakvo ponašanje pokušavamo da ohrabrimo ili obeshrabrimo?
Kao i kod sličnih obrazaca vođenih zajednicom, nekoliko zamki može uticati na uspeh šablona „Oceni
sadržaj“. Da li neki korisnici pokušavaju da promovišu ili smanje određene stavke? – možda njihov
sopstveni ili proizvod konkurencije – možda njihovi prijatelji ili neprijatelji. Možda ćete želeti da
podesite brojne mere da sprečite korisnike da zloupotrebe sistem, kao što je ograničavanje
maksimalne aktivnosti korisnika, pazite na zlonamerne aktivnosti ili promovišete pouzdane ključne
korisnike da se računaju više od drugih
Dizajnirajte svoj sistem ocenjivanja tako da podstičete ponašanje koje želite. Učinite vaš sistem
ocenjivanja višedimenzionalnim razbijanjem cele ocene na poddelove koji svojim naslovom
objašnjavaju tačno šta želite da se meri (ocenjuje), jedan je od načina rešavanja ovog problema.
1.3.2. Glasaj da promovišeš (Vote to Promote)

41. Rezime problema
Korisnik želi da promoviše određeni deo sadržaja kako bi pomogao da se odluči koji je sadržaj
popularniji.
Primer
stackoverflov.com
▲ Na stackoverflov.com možete postavljati tehnička pitanja i odgovore. Čitaoci zatim glasaju za date
odgovore sa rezultatom da će najkorisniji odgovori biti na vrhu najbliži pitanju.
Upotreba
 Koristite kada želite da vaši korisnici demokratski odluče šta je zanimljiv sadržaj.
 Koristite kada želite da vaši korisnici demokratski šalju sadržaj na vašu veb lokaciju.
 Koristite kada želite da verujete subjektivnom mišljenju korisnika

42.  Ne koristite kada vaša veb lokacija ima malu zajednicu. Velika baza korisnika i jaka zajednica
su važni kako bi se mogla generisati dovoljna količina glasova i napraviti smislena poređenja.
Rešenje
Dozvolite korisnicima da učestvuju u održavanju sadržaja tako što ćete im dozvoliti da promovišu
kvalitetan sadržaj.
Iskoristite moć svoje zajednice da pomogne u određivanju onoga što je popularnije. Prikažite
mehanizam glasanja pored svake stavke kandidata. Kad korisnici kliknu, njihov glas se računa u korist
promocije te stavke. Razmislite o tome da obezbedite ugradivi i samostalni mehanizam glasanja koji
nezavisni izdavači mogu da uključe na svoj sajt.
Mehanizmi koji rade zajedno
Ovaj obrazac se sastoji od niza mehanizama koji rade zajedno:
 Mehanizam glasanja. Obezbedite mehanizam u kome korisnici mogu da glasaju za ili protiv
svake stavke sadržaja na vašoj veb lokaciji. Korisnik dobija jedan glas i može kasnije da
promeni taj glas. Kada korisnik glasa za stavku, ove informacije treba vratiti korisniku kao
povratnu informaciju. Neka korisnik vidi svoje prethodne glasove i u nekim slučajevima
dozvoli korisniku da promeni te glasove.
 Prikaži broj glasova koje je stavka dobila. Ovo će vašim posetiocima dati jasnu indikaciju
koliko je neki predmet popularan i omogućiti poređenje sa drugim stavkama.
 Sumirajte popularne stavke. Navedite liste popularnog sadržaja sažete na glavnoj stranici.
 Dajte prednost popularnim člancima. Dajte prednost popularnim člancima u rezultatima
pretrage, kada pregledate oznake i prikazujete povezane informacije.
 Mehanizam podnošenja sadržaja. Možete dozvoliti korisnicima da šalju sadržaj na nekoliko
načina.
Neka korisnici pošalju
Obezbedite veb stranicu sa formularom za slanje sadržaja. Najosnovniji i tradicionalni način da
dozvolite svojim korisnicima da šalju sadržaj je putem obrasca na veb stranici koju hostujete. Nakon
što je sadržaj poslat, vaši korisnici mogu slobodno da glasaju o kvalitetu poslatog sadržaja.
Učinite glasanje ugradivim
Obezbedite vidžet koji korisnik može da postavi na svoju veb lokaciju. U zavisnosti od tipa sadržaja
koji vaši korisnici šalju, možete da obezbedite vidžet svojim korisnicima koji će postaviti na njihovu
veb lokaciju. Ovo će omogućiti nezavisnim izdavačima da šalju sadržaj direktno sa svoje veb stranice.
Obrazloženje
Obrazac „Glasajte za promociju“ promoviše učešće zajednice i potencijalno može pomoći u
prikupljanju i promovisanju najnovijeg i najaktuelnijeg sadržaja. Koristeći svoju zajednicu da
procenite šta je popularnije, izbegavate potrebu da angažujete plaćene profesionalne recenzente.
Diskusija
Korišćenje obrasca „Vote To Promote“ na vašoj veb lokaciji dovodi korisnika u centar vaše veb
lokacije. Koristi se za sprovođenje demokratske kontrole nad sadržajem vaše veb stranice sa sledećim
prednostima i nedostacima:

43.  Da li je demokratska kontrola najbolji mehanizam promocije ako svi korisnici ne dele isto
mišljenje među sobom
 Da li je demokratska kontrola najbolji mehanizam za promociju ako svi korisnici ne dele isto
mišljenje kao vaš sajt ili proizvod
 Da li je demokratska kontrola najbolji mehanizam promocije ako svi korisnici ne poseduju
ono za šta verujete da je dobar ukus.
 Svaki korisnik glasa iz svoje perspektive onoga što definiše dobar kvalitet: njihovo mišljenje je
subjektivno. Ovo postavlja pitanje da li se broj glasova za svaku stavku zaista može uporediti i
da li je stvar sa najviše pozitivnih glasova zaista najkvalitetnija.
 Ova dilema postavlja pitanje da li neki korisnici treba da imaju veća ovlašćenja od drugih: da li
glasovi nekih korisnika treba da se računaju više od glasova drugih korisnika. Ovo bi moglo
biti neophodno ako želite da vaša veb lokacija zadrži definiciju kvaliteta koja vam se sviđa.
Popularan sadržaj nije nužno isto što i kvalitetan sadržaj.
Razmotrite brojne mere da sprečite korisnike da zloupotrebe sistem:
 Ograničite aktivnost korisnika. Ograničite broj glasova koje korisnik može dati za određeni
vremenski period.
 Pazite na zlonamerne aktivnosti protiv određenih korisnika. Korisnik može biti u
zlonamernom raspoloženju i početi da degradira sadržaj drugog korisnika. Ograničite koliko
puta korisnik može da degradira sadržaj drugog korisnika.
 Neki glasovi se računaju više od drugih. Razmislite o davanju glasova korisnika njihovim
prijateljima manje vrednosti nego strancima.
 Neki sadržaji su važniji od drugih. Razmislite o promovisanju originalnog sadržaja umesto
citiranja sadržaja.
Mudrost gomile
Kada je količina dostavljenog sadržaja svake sekunde veća od onoga što vaše osoblje može da
podnese, moraćete da se oslonite na ono što se naziva „mudrošću gomile“ da biste odlučili šta je
dobar sadržaj, a šta nije (neželjena pošta, neistinite priče, „jadne stvari“, loše kategorizacije, itd.).
Ovo bi možda moglo da funkcioniše ako bi svaki korisnik procenio kvalitet stavke sadržaja izolovanog
od onoga što su drugi korisnici već glasali.
Međutim, nije uvek slučaj da se glasa izolovano. Umesto toga, članovi gomile komuniciraju i utiču na
međusobno kvalitativno prosuđivanje prema najnižem zajedničkom imenitelju mišljenja. Razlog za to
je mešanje korišćenja merljivih vrednosti prilikom procene kvaliteta. Gomila nema mudrosti: na nju
će uvek uticati najmanji zajednički imenitelj onoga što su drugi glasali.
1.3.3. Wiki
Rezime problema
Želite da napravite repozitorijum informacija za svoju veb lokaciju ili aplikaciju gde korisnici mogu da
proizvode i upravljaju informacijama dok sarađuju na javnom sadržaju.
Primer

44. https://ui-patterns.com/patterns/Wiki/examples
Upotreba
 Koristite kada želite da korisnik može da doprinese stranici dodavanjem ili izmenama sadržaja
veb lokacije.
 Koristite kada imate kolekciju dokumenata koju želite da ažurirate tokom vremena.
 Ne koristite pri objavljivanju uredničkog sadržaja: sadržaj koji potiče od izdavača stranice koji
niko drugi ne sme da menja. Na primer, uslovi i ugovori veb-sajta ili druge pravne
informacije.
 Nemojte koristiti za sadržaj koji stari – koji je relevantan samo za određeni vremenski period
(vesti, postovi na blogu, itd.)
Rešenje
Viki je sam koncept stranice, a ne samo obrazac koji funkcioniše kao deo veb stranice. Međutim,
format sam po sebi predstavlja dovoljnu vrednost da predstavlja obrazac dizajna, a ne samo koncept
stranice.
Viki stranicu može da uređuje svako. Svako može da menja informacije i dodaje nove stranice u
kolekciju dokumenata. Sve stranice su pod kontrolom verzija i lako se mogu vratiti na ranije verzije.
Viki omogućava korisnicima da lako kreiraju, uređuju i povezuju veb stranice.
Viki omogućava da se dokumenti pišu zajedno, na jednostavnom jeziku za označavanje pomoću veb
pregledača. Jedna stranica na vikiju se naziva „viki stranica“, dok je čitavo telo stranica, koje su
obično veoma međusobno povezane preko hiperlinkova, „viki“. Viki je u suštini baza podataka za
kreiranje, pregledanje i pretraživanje informacija. [Vikipedia.org]
Obrazloženje

45. Vikiji se često koriste za kreiranje veb-sajtova za saradnju, pokretanja veb-sajtova zajednica, a
preduzeća ih sve više instaliraju kako bi obezbedila pristupačne i efektivne intranete ili za korišćenje u
upravljanju znanjem. [Vikipedia.org]
1.3.4. Plati za promociju (Pay to Promote)
Rezime problema
Korisnik želi da plati da bi dao prioritet sopstvenom sadržaju iznad redovnog fida sadržaja kako bi
dobio veći doseg i privlačnost.
Primer
okcupid.com
▲ Sajt za upoznavanje OKCupid će povećati broj ljudi koji gledaju vaš profil uz naknadu
https://ui-patterns.com/patterns/pay-to-promote/examples
Upotreba
Koristite kada želite da korisnicima i preduzećima pružite priliku da preskoče algoritam za
određivanje prioriteta sadržaja kako bi došli pred željenu publiku.
Koristite kada želite da korisnicima pružite priliku da uz naknadu unaprede sadržaj u fidovima
Rešenje
Dozvolite korisnicima da plate da promovišu svoj sadržaj
Na društvenim platformama kao što su Kuora, Tvitter, OKCupid i LinkedIn, korisnici mogu da
postavljaju sadržaj. Omogućite korisnicima da povećaju vidljivost sopstvenog sadržaja plaćanjem
novca. Ovaj oblik oglašavanja omogućava korisnicima da steknu privlačnost, a da pritom zadrže izgled
i osećaj koji je prirodan na datoj platformi.

46. Sajtovi kao što su Kuora i Facebook omogućavaju korisnicima da pojačaju svoje postove plaćanjem
novca, što im zauzvrat daje veću vidljivost u fidu sadržaja iznad redovnog neplaćenog sadržaja.
Sajtovi za upoznavanje poput OKCupid omogućavaju korisnicima da povećaju svoj profil u
pregledima. LinkedIn radi isto, iako kao deo plana plaćenog članstva, a ne kao pojedinačni sadržaj kao
na Facebooku.
Diskusija
Obrazac „Pay to Promote“ je deo koncepta izvornog oglašavanja, koji spaja običan sadržaj sa
plaćenim sadržajem. Ova dva izgledaju isto sa jedinom razlikom što se plaćaju sa oznakom
„Sponzorisano“ ili „Oglasi“.
1.3.5. Označavanje i prijavljivanje (Flagging & Reporting)
Rezime problema
Korisnik želi da označi neprikladan sadržaj za moderiranje
Primer
zootool.com
Upotreba
Koristite kada je vaša veb lokacija zasnovana na sadržaju koji su generisali korisnici gde ne možete
sami da moderirate sve zbog ogromnog broja ažuriranja.
Rešenje
Dozvolite korisnicima da prijave sadržaj radi moderiranja
Obrazloženje
Za sajtove zasnovane na sadržaju koji generiše korisnik i interakciji korisnika, označavanje i
izveštavanje su vitalni obrazac dizajna. Omogućite korisnicima da pomognu u otkrivanju sadržaja koji

47. je administratorima neophodan za pregled radi uklanjanja ili kategorizacije. Korisnici najčešće rado
pomažu u ogromnom zadatku nadgledanja i upravljanja sadržajem koji su kreirali korisnici u zajednici.