Opšti interfejsni obrasci - 2. Navigacija (Kartice, Skakanje u hijerarhiji, Meniji, Sadržaj i Gestovi)

1. Opšti interfejsni obrasci
2. Navigacija (Kartice, Skakanje u hijerarhiji, Meniji, Sadržaj i
Gestovi)
Korisnik treba da locira specifične karakteristike i sadržaj i potrebna mu je navigacija da bi to
postigao.
Kartice (Tabs)
 Kartice za navigaciju (Navigation Tabs)
 Kartice modula (Module Tabs)
Skakanje u hijerarhiji (Jumping in Hierarchy)
 Hlebne mrvice (Breadcrumbs)
 Debelo podnožje (Fat Footer)
 Obaveštenja (Notifications)
 Modalni prozor (Modal)
 Padajući meni sa prečicama (Shortcut Dropdown)
 Link na početnu stranu (Home Link)
Meniji (Menus)
 Vertikalni padajući meni (Vertical Dropdown Menu)
 Harmonika meni (Accordion Menu)
 Horizontalni padajući meni (Horizontal Dropdown Menu)
Sadržaj (Content)
 Prilagodljivi izgled (Adaptable View)
 Lista članaka (Article List)
 Oblak sa tagovima (Tag Cloud)
 Obeležavanje strana (Pagination)
 Omiljeni (Favorites)
 Kartice (Cards)
 Vrteška (Carousel)
 Progresivno otkrivanje (Progressive Disclosure)
 Arhiva (Archive)
 Kontinuirano pomeranje (Continuous Scrolling)
 Sličica (Thumbnail)
 Kalendar događaja (Event Calendar)
 Označavanje (Tagging)
 Kategorizacija (Categorization)
Gestovi (Gestures)
 Povucite da biste osvežili (Pull to refresh)

2. 2.1. Kartice (Tabs)
2.1.1. Kartice za navigaciju (Navigation Tabs)
Rezime problema
Sadržaj treba da se razdvoi na odeljke i to tako da mu se može pristupiti pomoću navigacione
strukture koja jasno označava trenutnu lokaciju.
Primer
https://ui-patterns.com/patterns/NavigationTabs/examples
Upotreba
 Koristite kada postoji između od 2 do 9 sekcija sadržaja kojima je potreban fiksni režim
navigacije.
 Koristite kada su nazivi odeljaka relativno kratki
 Koristite kada želite da navigacija ispuni celu širinu stranice
 Koristite kada želite da navedete listu najviših dostupnih odeljaka/podsekcija veb lokacije
 Ne koristite kada želite da prikažete podatke specifične za sadržaj. Na primer za prikazivanje
najnovijih članaka
 Ne koristite kada nema potrebe da izdvajate trenutno izabranu opciju
 Ne koristite kada lista odeljaka ili kategorija zahteva vezu „više…“. U tom slučaju razmotrite
neki drugi obrazac navigacije.
Rešenje
Horizontalna traka sadrži različite odeljke ili kategorije vaše veb stranice.
Svaki odeljak ili kategorija je predstavljena karticom koja najčešće podseća na dugme. Zbog toga bi
trebalo da se klikne na celo dugme, a ne samo na tekst koji označava odeljak.
Opciono, traka ispod gornje trake može da sadrži podsekcije trenutno izabrane stavke na gornjoj traci
Kartica za navigaciju je stalna na svim stranicama na koje povezuju kartice.
Ista struktura (redosled) navigacionih kartica treba da se održava od stranice do stranice, tako da
korisnik može da poveže navigaciju različitih stranica jedna sa drugom.
Izabrana kartica treba da bude istaknuta da bi se označila trenutna lokacija.
Ako se koriste pododeljci (druga horizontalna traka ispod gornje trake), trebalo bi da postoji jasna
vizuelna veza između trenutno izabrane gornje kartice i trake ispod koja prikazuje podsekcije.
Obrazloženje

3. Uzorak kartica za navigaciju je proširenje metafore radne površine u kojoj su fizički objekti
predstavljeni kao elementi grafičkog korisničkog interfejsa. Kartice za navigaciju su izvedene iz ideje
fascikli u ormaru za dokumente i stoga su poznate krajnjem korisniku
Kartice za navigaciju pružaju jasnu vizuelnu indikaciju o tome koji sadržaj se može naći na veb lokaciji
i stavlja trenutnu lokaciju u kontekst tako što će je istaći.
2.1.2. Kartice modula (Module Tabs)
Rezime problema
Sadržaj treba da se razdvoji na odeljke i da mu se pristupa preko jedinstvene oblasti sadržaja koristeći
fiksnu strukturu navigacije koja ne osvežava stranicu kada je izabrana neka stavka.
Primer
https://ui-patterns.com/patterns/ModuleTabs/examples
Upotreba
 Koristite kada postoji ograničen vizuelni prostor i sadržaj treba da se razdvoji na odeljke
 Koristite kada postoji između 2 i 9 sekcija sadržaja kojima je potreban ravni režim navigacije.
 Koristite kada treba da zadržite pažnju korisnika tako što ćete zaobići osvežavanje stranice.
 Koristite kada su nazivi odeljaka relativno kratki
 Koristite kada sadržaj svake kartice može da se gleda odvojeno jedan od drugog, a ne u
kontekstu gde jedan zavisi od drugog.
 Koristite kada sadržaj svake kartice ima sličnu strukturu
 Koristite kada treba da pokažete koja kartica se trenutno prikazuje
 Nemojte koristiti kada bi sadržaj unutar svakog odeljka funkcionisao jednako dobro na svojoj
zasebnoj stranici.
Rešenje
Predstavite sadržaj jedne kartice unutar okvira (oblast sadržaja)

4. Postavite horizontalnu traku na vrh oblasti sadržaja sa vezama koje predstavljaju kartice
Uzdržite se od toga da imate više od jedne linije linkova u gornjoj horizontalnoj traci kartica
Koristite kodiranje bojama ili drugu vizuelnu podršku da biste naznačili koja kartica se trenutno gleda
Predstavite sadržaj svake kartice u istoj oblasti sadržaja
Samo jedna oblast sadržaja treba da bude vidljiva u jednom trenutku
Održavajte istu strukturu gornje horizontalne trake kartica nakon što se klikne na novu karticu
Samo oblast sadržaja kartica i horizontalna traka kartica treba da se menjaju kada korisnik klikne na
novu karticu
Ako je moguće, stranica se ne osvežava kada se klikne na karticu.
Nova stranica se ne učitava kada se klikne na karticu
Obrazloženje
Uzorak kartica za navigaciju je proširenje metafore radne površine u kojoj su fizički objekti
predstavljeni kao elementi grafičkog korisničkog interfejsa. Kartice za navigaciju su izvedene iz ideje
fascikli u ormaru za dokumente i stoga su poznate krajnjem korisniku.
Kartice modula pružaju jednostavan način za prikazivanje velikih količina sličnih strukturiranih
podataka podeljenih po kategorijama.
Kartice stvaraju kontekst za sadržaj, kada je kartica izabrana relevantan sadržaj se učitava unutar
oblasti sadržaja.
2.2. Skakanje u hijerarhiji
2.2.1. Hlebne mrvice (Breadcrumbs)
Rezime problema
Korisnik treba da zna svoju lokaciju u hijerarhijskoj strukturi veb sajta kako bi se eventualno vratio na
viši nivo u hijerarhiji.
Primer

5. linux.com
▲ „Hlebne mrvice“ na linux.com.
https://ui-patterns.com/patterns/Breadcrumbs/examples
Upotreba
 Koristite kada struktura veb sajta prati strogu hijerarhijsku strukturu slično formatiranog
sadržaja.
 Koristi se kada je struktura sajta podeljena na odeljke koji se mogu podeliti na više podsekcija
i tako dalje.
 Koristite kada je najverovatnije da je korisnik došao na stranicu iz spoljnog izvora (drugi sajt
sa dubokim linkom do predmetne veb stranice). Na primer sa bloga ili pretraživača.
 Koristite kada je dotična stranica postavljena prilično duboko u hijerarhiju stranica i kada
nijedan drugi oblik vizuelne navigacije ne može da prikaže detalje nivoa iste dubine.
 Koristite zajedno sa nekom vrstom glavne navigacije.
 Ne koristite na najvišem nivou hijerarhije (obično na stranici dobrodošlice)
 Ne koristite sami kao glavnu navigaciju na veb lokaciji.
Rešenje
Otkrijte hijerarhijsku lokaciju korisnika i obezbedite veze do viših nivoa.
 Prikažite oznake sekcija u hijerarhijskoj putanji koje vode do trenutne stranice koja se
prikazuje.
 Svaka oznaka je veza do odeljka.
 Oznaka trenutne stranice nalazi se na kraju putanje i nije link.
 Svaka oznaka je odvojena posebnim znakom. Popularni znakovi su » (&rakuo;) ili >.
 Znakovi za razdvajanje i razmaci između veza i oznaka nisu hiperlinkovi.
 Poželjno je da oznake svakog od odeljaka odgovaraju naslovima tih odeljaka.
Obrazloženje
„Hlebne mrvice“ služe kao efikasna vizuelna pomoć, ukazujući na lokaciju korisnika u hijerarhiji veb
sajta, što ih čini odličnim izvorom kontekstualnih informacija za odredišne stranice. Takođe, „mrvice“
omogućavaju laku navigaciju do stranica višeg nivoa.
 „Hlebne mrvice“ obaveštavaju korisnike o njihovoj lokaciji u odnosu na celu hijerarhiju sajta.
 Strukturu veb-sajta je lakše razumeti kada je predstavljena preko „mrvica“ nego ako je
stavljena u meni.
 „Hlebne mrvice“ zauzimaju minimalno prostora i iako ih ne koriste svi korisnici, one ipak
ukazuju na strukturu veb stranice i trenutnu lokaciju dotične stranice.
 Termin „hlebna mrvica“ nije potpuno tačan, jer zapravo pokazuje kako je korisnik došao do te
stranice, a ne gde se strania nalazi u hijerarhiji menija sajta. Neki drugi tačniji termin bi bolje
opisao mesto trenutne lokacije u hijerarhiji veb lokacije.
2.2.2. Debelo podnožje (Fat Footer)
Rezime problema

6. Korisnicima je potreban mehanizam koji će im omogućiti da brzo pristupe određenim delovima sajta
ili aplikacije zaobilazeći strukturu navigacije.
Primer
mint.com
▲ Debelo podnožje mint.com ima visok fokus na prenošenju osećaja poverenja u to da je usluga
sigurna.
https://ui-patterns.com/patterns/FatFooter/examples
Upotreba
Koristite za prečicu inače hijerarhijske strukture veb lokacije.
Koristite kada postoje određene stranice ili funkcije koje se češće koriste od drugih delova veb
lokacije. Koristite okvir za prečice da biste prikazali ove izbore kako biste skratili putanju za korisnike.
Koristite kada želite prečice do stranica koje se nalaze na različitim hijerarhijskim nivoima stranice.
Može se koristiti i kao navigacija kada nema dovoljno prostora, iako se ne preporučuje.
Rešenje
Završite stranicu pružanjem relevantnih veza do drugih delova vašeg sajta.
Dodajte isto podnožje na sve stranice veb stranice – sa istim izgledom u podnožju na svim
stranicama. Obično su ove stvari uključene u dizajn „debelog podnožja“:
 Link O nama: Link do vašeg odeljka „o nama“, koji zatim uključuje osnovne informacije o
vašoj kompaniji.
 Uslovi usluge: Ako pružate uslugu ili proizvod, postavljanje linka do njega u podnožje je
standardna lokacija, zbog čega korisnici očekuju da je tamo.
 Politika privatnosti: Kao i kod uslova korišćenja usluge, korisnici očekuju da će uvek moći da
pronađu politiku privatnosti u podnožju veb stranice.
 Mapa sajta: Obezbedite brze veze do najvažnijih stranica vaše veb stranice.
 Veza za kontaktiranje: Uverite se da vaši korisnici imaju način da vas dođu. Ako imate
stranicu „Kontaktirajte nas“, korisnici očekuju da će pronaći vezu do nje u podnožju. Ovo je

7. takođe kritična tačka u izgradnji pouzdanosti vaše veb lokacije jer prikazuje vašu fizičku
adresu.
 Adresa i broj telefona: Pokažite da ste stvarni. Ako imate fizički posao, nudite telefonsku
podršku ili imate razlog da vam ljudi šalju stvari, stavljanje tih informacija u podnožje je
očekivana i odgovarajuća lokacija.
 Linkovi ka društvenim mrežama: Link do bilo kojeg društvenog prisustva koje možda imate na
Facebooku, Tvitteru, Pinterestu, Instagramu i sličnim.
Obrazloženje
Zadržite posetioce na svom sajtu duže: završite jedno iskustvo tako što ćete započeti novo.
Obezbedite lake i prirodne načine za korisnike da nastave posetu sajtu. Dodavanjem prečice na
najčešće korišćene stranice i funkcije, putanja se može skratiti i smanjiti zabuna.
Diskusija
„Debelo podnožje“ nije prikladno za svaki sajt ili za svaku kompaniju. Razmislite o ovim pitanjima
kada pravite podnožje:
 Šta moj korisnik očekuje da vidi ovde?
 Koji je sledeći logičan korak na putu korisnika?
 Koja pitanja moji sekundarni ili tercijarni korisnici još uvek postavljaju na dnu sajta?
 Kako mogu da nastavim iskustvo korišćenja sajta posle sadržaja na ovoj stranici?1
2.2.3. Obaveštenja (Notifications)
Rezime problema
Korisnik želi da bude informisan o važnim ažuriranjima i porukama
Primer

8. meetup.com
▲ Obaveštenja na Meetup.com kombinuju nekoliko tipova sadržaja.
https://ui-patterns.com/patterns/notifications/examples
Upotreba
 Koristite kada želite da skrenete pažnju na važna ažuriranja ili poruke.
 Obaveštavajte korisnike o vremenski osetljivim informacijama koje su usmerene upravo ka
njima.
 Ne obaveštavajte korisnike o informacijama koje su trenutno na ekranu (npr. aktivni
razgovori u ćaskanju)
 Ne obaveštavajte korisnike o tehničkim operacijama koje ne zahtevaju učešće korisnika (kao
što je sinhronizacija)
 Ne obaveštavajte korisnike o porukama o grešci koje se mogu rešiti bez radnje korisnika
Rešenje
Informišite svoje korisnike o relevantnim i pravovremenim događajima.
Obavestite korisnike o važnim ažuriranjima dok su fokusirani na nešto drugo. Prilagodite stopu i
relevantnost obaveštenja na odgovarajući način, jer mogu da ometaju. Omogućite korisnicima da
onemoguće ili promene obaveštenja u svojim podešavanjima. Kreirajte personalizovana, sažeta i
blagovremena obaveštenja koja mogu poslužiti kao ulazne tačke za detaljnije informacije.
Koristite obaveštenja da biste skrenuli pažnju na važna ažuriranja: poruke prijatelja, nove zahteve za
prijateljstvo, relevantne ponude u blizini i još mnogo toga.
Preko više uređaja
Kada korisnik primi obaveštenje, on ili ona ne bi trebalo da ga ponovo vide. Slično tome, korisnici bi
trebalo da budu u mogućnosti da preuzmu već primljena obaveštenja i na drugom uređaju koji je
pogodniji za korišćenje sadržaja o kome je korisnik obavešten. Obaveštenja treba da se sinhronizuju
sa svim uređajima korisnika.
Minimizirajte prekid
Obaveštenja su po svojoj prirodi nametljiva i ometajuća. Koristi se za usmeravanje pažnje korisnika
na važne događaje dok je fokusiran na nešto drugo. Pažljivo razmislite o tome kada da prekinete
korisnike. Nemojte obaveštavati korisnike o informacijama koje su već na ekranu (npr. aktivni
razgovori u ćaskanju), tehničkim operacijama koje ne zahtevaju učešće korisnika i stanjima greške
koja se mogu rešiti bez radnje korisnika.
Dozvolite promene i onemogućavanje obaveštenja
Omogućite odbacivanje obaveštenja i omogućite korisnicima da onemoguće ili promene stopu
obaveštenja u podešavanjima.
Obezbedite sumarna obaveštenja

9. Kombinujte više obaveštenja istog tipa u jedno sažeto obaveštenje koje pokazuje koliko je
obaveštenja određene vrste na čekanju. Razmislite o proširenju obaveštenja, pružajući detaljne
informacije o sažetim obaveštenjima nakon klika.
Obezbedite akcije
Objedinite dugmad za akciju sa obaveštenjima, kako bi korisnici mogli brzo da obrađuju najčešće
zadatke za određeno obaveštenje, bez otvaranja početnog ekrana. Neka akcije budu jasne i
nedvosmislene i obezbedite ih samo ako ne dupliraju podrazumevanu radnju. Radnje treba da budu
smislene i vremenski osetljive, da odgovaraju sadržaju i da omoguće korisniku da izvrši zadatak.
2.2.4. Modalni prozor (Modal)
Rezime problema
Korisnik treba da preduzme neku radnju ili da je otkaže u preklapajućem prozoru kako bi mogao da
nastavi interakciju sa originalnom stranicom
Primer
blog.invisionapp.com
▲ Formular za prijavu na bilten predstavljen u modalnom prozoru na Invision blogu.
https://ui-patterns.com/patterns/modal-windows/examples
Upotreba
Koristite kada želite da prekinete trenutni zadatak korisnika da biste privukli njegovu punu pažnju na
nešto važnije.
Ne koristite za prikazivanje poruka o grešci, uspehu ili upozorenjima
Rešenje

10. Uvedite način rada u kome korisnici ne mogu da komuniciraju sa vašom aplikacijom dok se prozor ne
zatvori. Prekinite pažnju korisnika i zaustavite sve druge radnje dok se poruka ne obradi ili odbaci.
Podudarni naslovi
Usklađivanje teksta dugmeta sa naslovom modalnog prozora povećava osećaj bliskosti i . Kako modali
uvode režim ometanja, velike su šanse da korisnici neće povezati radnju koju su upravo izvršili sa
modalnim iskačućim efektom. Obezbedite da znaju odakle dolazi modal.
Dozvolite izlaz
Dozvolite korisnicima da izađu iz režima modalnog prozora tako što ćete im dozvoliti da zatvore
modalni prozor kada to žele. Popularne konvencije za dugmad za zatvaranje su ikona „X“ u gornjem
desnom uglu i/ili dugme „Zatvori“ ili „Otkaži“ na dnu modalnog prozora. Taster ESC je takođe često
uobičajena prečica na tastaturi za zatvaranje modala, kao i klik izvan modalnog prozora.
Obrazloženje
Iako je efikasno u fokusiranju pažnje, uvođenje više režima rada dovodi do rizika grešaka gde korisnik
zaboravlja stanje interfejsa i pokušava da izvrši radnje koje odgovaraju drugom režimu rada.
Diskusija
Modali se smatraju „anti-obrascem“ korisničkog interfejsa. Glavni razlog leži u definiciji modalnog
prozora: prozor koji sprečava korisnika da komunicira sa vašom aplikacijom dok ne se ne zatvori
prozor. Modalni prozori prekidaju korisnike i primoravaju ih da izvrše određenu radnju. U većini
slučajeva, nema potrebe da se primoravaju korisnici na određene radnje. Kao rezultat, modalni
prozori unose nepotrebne muke za vaše korisnike.
Alternativa su interfejsi bez modala. Interfejsi koji omogućavaju korisnicima da promene mišljenje u
bilo kom trenutku. Interfejsi koji ne primoravaju korisnike na određeni skup radnji.
Takođe, modali ne funkcionišu dobro na mobilnim uređajima jer zauzimaju prostor na ekranu i uvode
dodatne elemente korisničkog interfejsa.
2.2.5. Padajuća prečica (Shortcut Dropdown)
Rezime problema
Korisnik treba da pristupi određenom delu ili funkcionalnosti veb stranice na brz način, bez obzira na
hijerarhiju.
Primer
Upotreba

11.  Koristite kao prečicu za inače hijerarhijske strukture veb lokacije.
 Koristite kada postoje određene funkcije ili stranice koje se češće koriste od drugih delova
veb lokacije. Koristite okvir za prečice da biste prikazali ove izbore kako biste skratili putanju
za korisnike.
 Koristite kada želite prečice do stranica koje se nalaze na različitim hijerarhijskim nivoima od
stranice na kojoj ste.
 Može se koristiti i kao navigacija kada nema dovoljno prostora, iako se ne preporučuje.
Rešenje
Dodajte kombinovani okvir- combobox (<select> boks u HTML-u) da biste naveli broj fiksnih lokacija
ka jednoj ili više stranica. Kada se obrazac pošalje, korisnik se preusmerava na izabranu stranicu.
Alternativna verzija je preusmeravanje na izabranu stranicu čim korisnik izabere stavku iz
komboboksa, a ne kada pošalje obrazac.
Obrazloženje
Često hijerarhijska struktura veb-sajta može da ometa put do određene funkcionalnosti veb-sajta.
Dodavanjem prečice najčešće korišćenoj funkcionalnosti, putanja se može skratiti: broj klikova može
biti smanjen, kao i konfuzija korisnika
.
2.2.6. Link na početnu stranu (Home Link)
Rezime problema
Korisnik treba da se vrati na bezbednu početnu lokaciju sajta.
Primer
Upotreba
Koristite kada korisnici često ulaze na veb lokaciju preko stranice koja nije početna. Korisnik treba da
bude u mogućnosti da lako dođe do početne tačke ili naslovne strane veb sajta.
Rešenje
Napravite vezu ka početnoj tački ili naslovnoj strani veb sajta na logotipu sajta na svakoj stranici na
veb sajtu.
Ako sajt nema logo, onda napravite vezu do naslovne strane veb sajta pomoću teksta „Početna“.
Veza i/ili slike koje su link treba uvek da budu na istoj lokaciji na svim stranicama.

12. Ako veb sajt ima više od jedne početne strane, obavezno napravite razliku u povezivanju između
osnovne i lokalne strane.
Obrazloženje
Postalo je standard u veb dizajnu da je logo sajta uvek povezan sa sigurnom početnom lokacijom za
korisnika. Obično je ovo naslovna stranica sajta, ali može biti i naslovna stranica nekog odeljka na
sajtu ili neka druga sigurna početna lokacija za korisnika.
2.3. Meniji
2.3.1. Vertikalni padajući meni (Vertical Dropdown Menu)
Rezime problema
Korisnik treba da se kreće po delovima veb sajta, ali prostor za prikazivanje takve navigacije je
ograničen.
Primer
https://ui-patterns.com/patterns/VerticalDropdownMenu/examples
Upotreba
 Koristite kada postoji od 2 do 9 sekcija sadržaja kojima je potrebna hijerarhijska struktura
navigacije.
 Koristite kada želite da vaša funkcionalnost podseća na desktop aplikaciju. Imitirajte
metaforu standardne aplikacije.
 Ne koristite kada postoji potreba da se izdvoji lokacija trenutnog odeljka sajta. Za to koristite
kartice za navigaciju.
Rešenje

13. Lista glavnih sekcija (glavni meni) je navedena na horizontalnoj liniji. Kada korisnik postavi kursor
miša preko jedne od stavki liste, padajuća lista novih opcija se prikazuje ispod stavke liste na koju
kursor miša pokazuje. Korisnik zatim može da prati sada vertikalno proširenu stavku liste nadole, da
odabere stavku menija na koju želi da klikne.
Kada korisnik ukloni kursor iz okvira padajućih opcija, okvir nestaje. Zatim može staviti kursor miša na
drugu stavku liste, nakon čega proces počinje iznova.
Kao ljudi, ne ponašamo se uvek savršeno onako kako bi sistem želeo. Da biste se izborili sa ljudskim
greškama i da biste korisnike usmerili da postupaju onako kako želite, možete da primenite sledeće:
 Na događaje sklanjanja miša (kada korisnik odvoji miša od padajućeg okvira), odložite
skrivanja (zatvaranje) padajućeg okvira (obično 200-300 ms.)
 Neka oblast svake stavke menija bude šira od samog teksta stavke menija, tako da korisnik
ima više prostora da stavi kursor miša na njega.
 Promenite sliku kursora dok korisnik prelazi preko stavke liste.
Postoji mnogo različitih vrsta padajućih menija. Neki rade samo i izgrađeni su isključivo pomoću
javascript-a. Ove vrste padajućih menija ne funkcionišu dobro sa pretraživačima sadržaja. Da biste
omogućili pretraživačima da indeksiraju vašu stranicu, probajte da imate meni formatiran u HTML-u
od početka učitavanja stranice, umesto da ga pravite na javascipt klijentskoj strani nakon što se
stranica učita.
Obrazloženje
Padajući meniji štede prostor. Ovo je glavni razlog za njihovu upotrebu. Inače, padajući meniji se ne
smatraju tehnikom koja povećava upotrebljivost, jer često mogu biti teški za korišćenje.
Iskačući meniji omogućavaju trajno prikazivanje samo najviših nivoa hijerarhije stranice, dok se dublji
nivoi dobijaju opciono nakon prelaska miša preko stavke menija.
2.3.2. Harmonika meni (Accordion Menu)
Rezime problema
Korisnik treba da se kreće između glavnih delova veb sajta, a da i dalje može brzo da pregledava
pododeljke drugih delova.
Primer

14. https://ui-patterns.com/patterns/AccordionMenu/examples
Upotreba
 Koristite kada želite prednosti normalnog menija bočne trake, ali nemate prostora da
navedete sve opcije.
 Koristite kada postoji više od 2 glavna odeljka na veb lokaciji, svaki sa 2 ili više pododeljaka.
 Koristite kada imate manje od 10 glavnih odeljaka.
 Koristite kada imate samo dva nivoa za prikaz u glavnoj navigaciji.
Rešenje
Svaki naslov/odeljak ima panel, koji se nakon klika može proširiti vertikalno ili horizontalno u prikaz
njegovih pododeljaka. Vertikalni meniji harmonike su najčešće korišćeni.
Prelazak sa prikazivanja bez opcija podnaslova naslova na prikazivanje liste opcija podnaslova može
se izvršiti ili osvežavanjem stranice ili pomoću javascript DHTML animacije.
Kada se klikne na jedan panel, on se proširuje, dok se drugi paneli skupljaju.
Obrazloženje
Meniji harmonike se često koriste kao glavna navigacija veb stranice. Na ovaj način, deluje slično kao
kartice za navigaciju, jer se stavke menija skupljaju kada se klikne na novi panel. Tamo gde se kartice
za navigaciju najčešće koriste horizontalno, meniji harmonike se najčešće koriste vertikalno.
Meniji harmonike, međutim, takođe mogu da funkcionišu prilično dobro kao podnavigacija za
određeni deo veb stranice.
2.3.3. Horizontalni padajući meni (Horizontal Dropdown Menu)
Rezime problema
Korisnik treba da se kreće po odeljcima veb lokacije, ali prostor za prikazivanje takve navigacije je
ograničen.

15. Primer
https://ui-patterns.com/patterns/HorizontalDropdownMenu/examples
Upotreba
 Koristite kada postoji od 2 do 9 sekcija sadržaja kojima je potrebna hijerarhijska struktura
navigacije.
 Koristite kada vaša funkcionalnost podseća na desktop aplikaciju. Imitirajte metaforu.
 Ne koristite kada postoji potreba da se izdvoji lokacija trenutnog odeljka sajta. Za to koristite
kartice za navigaciju.
Rešenje
Lista glavnih sekcija se prikazuje kao hiperlinkovi u jednoj vertikalnoj traci. Kada korisnik pređe
kursorom preko stavke liste ili klikne na stavku liste, prikazuje se podlista (obično susedna –
horizontalno pored stavke i ispod). Korisnik zatim može da prati sada horizontalno proširenu stavku
liste nadole i da izabere pododeljak za koji je zainteresovan.
Tradicionalno, kada korisnikov kursor napusti padajući meni, meniji više nisu vidljivi i ovo je neumoljiv
metod interakcije.
Kao ljudi, ne ponašamo se uvek savršeno onako kako bi sistem želeo. Da biste se izborili sa ljudskim
greškama i da biste korisnika usmerili da postupa onako kako želite, možete da primenite sledeće:
 Na događaje napuštanja miša (kada korisnik odvoji miša od padajućeg okvira), dodajte
odlaganje pre skrivanja padajućeg okvira (obično 200-300 ms.)
 Neka oblast svake stavke menija bude šira od samog teksta stavke menija, tako da korisnik
ima više prostora da stavi kursor miša na njega.
 Promenite sliku kursora dok korisnik prelazi preko stavke liste.
Obrazloženje
Padajući meniji štede prostor organizovanjem i prikrivanjem informacija. Padajući meniji se ne
smatraju tehnikom koja povećava upotrebljivost, jer često mogu biti teški za korišćenje.

16. Iskačući meniji omogućavaju trajno prikazivanje samo najviših nivoa hijerarhije stranice, dok se dublji
nivoi dobijaju opciono nakon prelaska miša preko stavke menija.
2.4. Sadržaj (Content)
2.4.1. Prilagodljivi izgled (Adaptable View)
Rezime problema
Želite da dozvolite da prezentacija sadržaja sajta odgovara specifičnim potrebama korisnika.
Primer
▲ Povećajte veličinu fonta na stranici.
https://ui-patterns.com/patterns/AdaptableView/examples
Upotreba
 Koristite kada značajan deo vaših potencijalnih korisnika ima specifične tehničke potrebe u
vezi sa načinom na koji se sadržaj predstavlja. Primeri su mobilni pregledači, male rezolucije
ekrana i monohromatski monitori.
 Koristite kada značajan deo vaših potencijalnih korisnika ima specifične potrebe u pogledu
pristupačnosti i načina na koji se sadržaj predstavlja zbog invaliditeta. Primeri su slepilo za
boje ili slab vid.
 Koristite kada vaši korisnici moraju da kontrolišu veličinu fonta, ali možda ne znaju kako da
koriste ugrađena podešavanja za promenu veličine fonta u pregledaču.
 Koristite kada želite da date korisnicima mogućnost da prelaze sa mobilne verzije sajta na
verziju sa punim funkcijama. Na primer, svi korisnici iPhone-a ne vole da koriste prilagođene
iPhone verzije veb lokacija umesto verzije pregledača sa punim funkcijama.
Rešenje
Obezbedite mehanizam za promenu podrazumevanog stila stranice tako da odgovara specifičnim
potrebama korisnika.
Kada koristite alternativne pregledače kao što su pregledači na mobilnim telefonima, prikaz koji se
može automatski postaviti (responzivni dizajn sajta). U ovom slučaju, ručni mehanizam za promenu
stilova može izgledati zastarelo, ali je dobra praksa dozvoliti pristup svim prikazima sajta bez obzira
na to kako ga korisnik pregleda.
Obezbedite ručnu kontrolu kako biste omogućili korisnicima da menjaju/promene podrazumevani stil
stranice tako da bolje odgovara njihovim specifičnim potrebama. Na primer, nisu svi korisnici iPhone-

17. a oni koji zapravo vole da koriste prilagođene iPhone verzije veb lokacija umesto verzije pregledača
sa punim funkcijama.
Dobra je praksa da se omogući trajno postavljanje željene konfiguracije korisnika. Ovo će sprečiti da
korisnik mora da vrši isto podešavanje svaki put kada se stranica ponovo učitava.
Obrazloženje
Pružajući mehanizam za predstavljanje različitih pogleda na sadržaj korisnicima, prilagođavate
upotrebljivost i iskustvo koje želite da im pružite njihovim specifičnim potrebama.
Diskusija
U početku se može činiti da je podešavanje stila suvišna karakteristika koja nije na korak od
pokazivanja. Na kraju krajeva, zar korisnici već nemaju kontrolu nad prikazom sadržaja pomoću
korisničkih stilova i promene veličine fonta ugrađenog u pregledač? Pa ipak, samo zato što korisnik
ima mogućnost da koristi ove alate, ne znači da ima znanje ili spremnost da se bavi njima.
Unesite na strani podesivu kontrolu stila. Može veb dizajneru dati mogućnost da proširi podršku za
pristupačnost pregledača i pruži ih na mnogo pogodniji način.
Osim brige o pristupačnosti, prilagođavači stila takođe mogu da izleče neke od uobičajenih smetnji sa
kojima se skoro svi suočavaju. Jedan primer toga je kada sajt primorava korisnika da koristi mobilnu
verziju. Jednostavno dugme koje prebacuje sajt na verziju sa punim funkcijama je dovoljno da ublaži
osećaj zarobljenosti.
2.4.2. Lista članaka (Article List)
Rezime problema
Korisniku su potrebne smernice u pronalaženju uredničkog sadržaja koji ga interesuje, što sama
hijerarhijska navigacija ne može postići.
Primer

18. alistapart.com
▲ Svaki članak na alistapart.com dobija veliko zaglavlje i red autora nakon čega sledi uvodni tekst
napisan posebno za naslovnu stranu.
https://ui-patterns.com/patterns/ArticleList/examples
Upotreba
 Koristite kada želite da usmerite korisnika na sadržaj koji mu se sviđa ili mu je zanimljiv.
 Koristite kada je sadržaj vašeg sajta vremenski povezan za navigaciju, kao što je novinski
članak ili sezonski prilog, poput priče o božićnom kuvanju.
 Nemojte koristiti kada sadržaj na koji želite da usmerite korisnika nije prikladan da bude
predstavljen kao priča.
Rešenje
Spisak članaka je odlično sredstvo komunikacije. Omogućava korisniku da brzo skenira listu članaka
koji ga privlače ili zanimaju.

19. Kada se kreira dobrs lista članaka, treba uzeti u obzir nekoliko stvari. Razmotrite ove savete o dizajnu,
jer preterivanje sa njima može da vas navede u zamku da počinite neke od uobičajenih grešaka u
dizajnu koje su navedene kasnije u ovom obrascu.
Saveti za dizajniranje dobrih lista članaka
Nemojte previše dizajnirati: ispitivanje i skeniranje je glavna osobina
Glavna svrha liste članaka je da namami korisnike da kliknu na priču – neka pronađu onu koja im je
zanimljiva! Jedan od vaših najponosnijih ciljeva kao dizajnera treba da bude da se sklonite s puta i
pustite korisnika da izvrši svoj zadatak. Interfejs koji dizajnirate treba da omogući skeniranje i
ispitivanje tema članaka.
Previše ukrasa i drugih nepotrebnih elemenata dizajna ometa skeniranje.
Duže liste su dobre – kada se mogu skenirati
Paginacija je precenjena iz dva razloga:
1. Iz sveta sadržaja u svet navigacije. Svaki put kada korisnik treba da koristi paginaciju da vidi
više priča, on ili ona bivaju izvučeni iz sveta sadržajai ubačeni u svet navigacije. Korisnik tada
više ne razmišlja o tome koje priče treba da pročita, već o tome kako da pronađe više za
čitanje. Korišćenje paginacije stvara prirodnu pauzu koja omogućava korisniku da ponovo
proceni da li želi da nastavi ili da napusti sajt.
2. Brojevi paginacije nemaju značenje. Šta znači stranica 2, 3 ili 4? To je apstraktna konstrukcija
bez korena u bilo čemu stvarnom. Za korisnika, to što se nalazi na stranici 2, 3 ili 4 samo
ukazuje na nemogućnost da pronađe bilo šta zanimljivo na stranici 1. Biti na stranici 4
podseća na dugu posetu veb lokaciji bez pronalaženja bilo čega vrednog. Umesto toga,
pronađite smislen način da grupišete članke: po nedelji, mesecu, godini, kategoriji, oznaci ili
po abecedi. Duge liste nisu problem ako se mogu skenirati.
Duge liste nisu loše – sve dok možete da ih skenirate lako i bez napora.
Postavljanje scene sa oznakama kategorija
Oznake kategorija postavljaju scenu za ono što korisnik može očekivati. Oni saopštavaju ono što
naslov članka ponekad ne može, što pomaže u postavljanju konteksta naslova.
Članak sa naslovom „Chanel poludeo“ može imati nekoliko različitih značenja. Ako je članak o
Chanelovom poslednjem ekonomskom kvartalu, naslov verovatno prenosi rastuću krizu za
kompaniju, ali ako je članak o Chanelovoj novoj dizajnerskoj kolekciji, značenje naslova je potpuno
drugačije.
Na ovaj način, oznaka kategorije pomaže u postavljanju očekivanja korisnika o tome šta se nalazi iza
linka. Označavanjem priče sa „Moda“ ili „Finansijske vesti“, tačno je označen naslova.
Navođenje srodnih članaka
Na sajtovima sa vestima često postoji mnogo članaka o jednoj temi. Vesti se objavljuju u
fragmentima kako pristižu. Da bi se prilagodili tome, mnogi sajtovi sa vestima ne samo da prikazuju
glavni članak na naslovnoj strani, već i navode članke koji se odnose na temu u neposrednoj blizini
(najčešće ispod).

20. Postoji mnogo aspekata priče koje različiti ljudi smatraju zanimljivim. Ako glavna priča neće privući
pažnju određenog čitaoca, postoji velika šansa da će drugi članak na istu temu.
Takođe, lista članaka o istoj temi služi kao odlična polazna tačka za istraživanje cele priče, i na taj
način pruža dobru priliku za povećanje broja pregledanih stranica po poseti.
Komentari se računaju kao indikator zainteresovanosti
Ako je članak dobro komentarisan, navodi nas da verujemo da mora da bude zanimljiviji za čitanje od
članaka sa manje komentara. Ovaj efekat se naziva društveni dokaz (social proof). O popularnosti
nečega sudimo po postupcima drugih.
Ako imate veliku aktivnost komentara na svojoj veb lokaciji, broj komentara na listi može pomoći
ljudima da se tu zadrže jer misle da to mora da je zanimljiva lokacija pošto je ljudi komentarišu. Ako
vaš sajt ima malo ili nimalo komentara na članke, postižete suprotno tako što ćete prikazati broj
komentara na listama članaka.
Istaknite kao odavrani (featured) članak
Ako želite da privučete pažnju na članke za koje verujete da će zainteresovati mnoge ljude, ili u koje
ste uložili mnogo posla (prvi razlog je mnogo važniji), može biti dobra ideja da pronađete način da
istaknete članak.
Jedna vrsta isticanja je sa priloženom etiketom jarkih boja, druga je promena boje pozadine stavke
liste članaka. Treća opcija je pronaći istaknutu poziciju za članak: npr. na vrhu liste sa većom sličicom.
Zapamtite – poziv!
Ne zaboravite da pozovete na akciju! Mnogo je rečeno o starom pozivu na akciju „klikni ovde“, ali ko
god da ga je koristio bio je na pola istine. Loša stvar kod „klikni ovde“ je što ne postavlja očekivanja:
„šta će se desiti kada kliknem na njega?“. Dobra stvar kod „kliknite ovde“ je što ljudima govori šta
treba da rade. Poziva na akciju i ne zahteva od korisnika da razmišlja.
Da biste dobili pravi poziv, morate postaviti očekivanja. Ako je korisnik odveden da gleda video, onda
imajte hiperlink sa „pogledajte video“. Ako odštampate prvi pasus teksta, onda imate hiperlink na
kome piše „pročitajte više“.
Takođe možete uključiti pozive u delove tizera osim samo u tekstualnu vezu. Na video tizerima ikona
„reprodukcija“ postavljena preko sličice odlično funkcioniše.
Uobičajene zamke dizajna liste članaka:
Nema vizuelne razlike između naslova i podnaslova.
Vizuelna hijerarhija između elemenata tizera članka je važna. Za potrebe skeniranja, kraći naslov
omogućava bolje skeniranje od podnaslova. Kada je vidljiva razlika između zaglavlja i podzaglavlja
premala, korisnik mora da troši nepotrebnu energiju na dekodiranje šta je šta.
Zaboravljanje da sve treba bude link
Uverite se da korisnik može da klikne na bilo koji deo tizera članka da bi prešao na sam članak:
naslov, sliku, opis, broj komentara i poziv. Ljudi su navikli da mogu da kliknu bilo gde da odu gde žele.

21. Prikazuje se broj komentara kada ih nema
Ako vaš sajt nema mnogo komentara, prenosite poruku da imate dosadan sajt sa neangažovanim
korisnicima ako navedete broj komentara za gomilu članaka bez komentara.
Elementi jednog članka iz stavke liste članaka
Da bi lista članaka funkcionisala, morate da obezbedite niz informacija da bi bila korisna. Kao i uvek,
sve zavisi od konteksta. Ako su vaši članci ubedljivi i više urednički nego što su vesti, onda je autor
važan deo. Ako imate različite tipove sadržaja na svom sajtu (vesti, kvizovi, bitke, itd.), onda biste
želeli da označite svoje članke u skladu sa tim kako biste postavili očekivanja.
Bez obzira na kontekst, postoje neki detalji koji su uvek važni:
 Naslov članka
 Kratak opis
 Datum objavljivanja
 Poziv na akciju (pročitajte više, nastavite čitati, pogledajte više, itd.)
Niz detalja koji su uobičajeni, ali nisu prisutni na svim listama.
 Oznaka kategorije
 Sličica (Thumbnail image)
 Broj komentara
 Broj slika (u galeriji)
 Autor
Obrazloženje
Na veb lokaciji koja isporučuje urednički sadržaj, tizer članka je jedan od najvažnijih elemenata
dizajna pored samog dizajna članka. Tizer za članak je deo liste članaka i njegova glavna svrha je da
namami posetioce da nastave sa pregledavanjem.
Najčistiji oblik listi članaka se može videti na veb-sajtovima časopisa i vesti, ali je takođe relevantna za
sve druge sajtove koji pokušavaju da podstaknu posetioca da još jednom klikne.
Diskusija
Razmišljajte iz perspektive korisnika - ne iz svoje
Ne bi trebalo da se ustežete da se stavite u ulogu korisnika. Članak koji će dobiti mnogo pregleda ili
postati javno popularan kod vaše publike nije nužno onaj na kome provedete najviše vremena, niti
onaj koji smatrate zanimljivim. Stalno procenjujte vrednost članka iz perspektive čitaoca kada
odlučujete da ga istaknete ili ne.
Stavite se u kožu korisnika kada odlučite koje podatke želite da im predstavite. Da li želite da imate
različite vrste stavki na listi članaka – na primer jednu za galerije, jednu za postove na blogu, jednu za
događaje i jednu za članke? Možda ima smisla. Razmislite o tome kako možete olakšati korisniku i
prestanite da ga prisiljavate da razmišlja kao vi.
2.4.3. Oblak sa oznakama (Tag Cloud)
Rezime problema

22. Korisnik želi da pregleda sadržaj po popularnosti na vizuelno privlačan način.
Primer
https://ui-patterns.com/patterns/TagCloud/examples
Upotreba
 Koristite kada korisnici vaše veb lokacije mogu sami da dodaju sadržaj i oznake.
 Koristite kada vaša veb lokacija ima više od 10-20 različitih oznaka, svaka sa različitom
težinom u post-brojanju.
 Nemojte koristiti za prikazivanje kategorija stroge hijerarhijske strukture
Rešenje
Oblak oznaka je lista oznaka, gde je veličina slova svake oznake veća u zavisnosti od njene „težine“.
Težina u oblacima oznaka može se predstaviti na tri različita načina:
1. Veličina predstavlja broj koliko puta je oznaka primenjena na pojedinačnu stavku.
Ova vrsta oblaka oznaka može pomoći u definisanju načina raspodele kategorizacije stavke.
2. Veličina predstavlja broj stavki na koje je primenjena oznaka
Kao način predstavljanja popularnosti svake oznake.
3. Veličina predstavlja količinu stavki sadržaja u toj kategoriji
Oznake se koriste kao metoda kategorizacije za stavke sadržaja
Postoji nekoliko mišljenja o tome kako oznake treba naručiti. Primeri načina naručivanja oznaka su:
 Po abecednom redu
 Slučajno
 Prema težini
 U grupama semantički sličnih oznaka (slične oznake se pojavljuju jedna pored druge)
Obrazloženje
Oblaci oznaka pomažu u vizuelizaciji semantičkih polja; kako neke kategorije imaju veći značaj od
drugih.
Takođe može pomoći da se stekne utisak o tome koji sadržaj se nalazi na sajtu i na koje kategorije
sadržaja je sajt fokusiran.

23. 2.4.4. Obeležavanje strana (Pagination)
Rezime problema
Korisnik treba da vidi podskup sortiranih podataka u razumljivom obliku.
Primer
vebdesignledger.com
▲ Kreativni dizajn stranica na vebdesignledger.com
https://ui-patterns.com/patterns/Pagination/examples
Upotreba
 Koristite kada nije prikladno prikazati sve podatke na jednoj stranici/ekranu.
 Koristi se kada je skup podataka na neki način uređen.
 Ne koristite kada ne želite da korisnik pauzira zbog navigaciju na sledeću stranicu.
Rešenje
Razbijte kompletan skup podataka na manje uzastopne delove i obezbedite zasebne veze za svaki.
Obezbedite kontrolu označavanja strana za pretraživanje od stranice do stranice. Dozvolite korisniku
da pređe na prethodnu i sledeću stranicu tako što ćete dati veze do takvih radnji. Takođe, obezbedite
veze do apsolutnog početka i kraja skupa podataka (prvi i poslednji).
Ako skup podataka ima poznatu veličinu, pokažite vezu do poslednje stranice. Ako je veličina skupa
podataka promenljiva, nemojte prikazivati vezu do poslednje stranice.
Obrazloženje
Smanjite uočenu složenost razdvajanjem velikih skupova podataka na manje delove kojima je lakše
upravljati. Značajne tehničke performanse se mogu postići samo vraćanjem podskupova ukupnih
podataka.
Prvo i najvažnije, paginacija deli velike skupove podataka u manje grupe kojima se može upravljati
kako bi korisnik mogao da ih čita i da rukuje njima. Drugo, kontrole paginacije prenose informacije
korisniku o tome koliko je veliki skup podataka i koliko je ostalo za čitanje ili pregled i koliko je već
pregledao.
Paginacija pruža korisniku prirodnu pauzu od čitanja ili skeniranja sadržaja skupa podataka i
omogućava im da ponovo procene da li žele da nastave da pregledavaju više podataka ili da odu dalje
od stranice. Ovo je takođe razlog zašto se kontrole paginacije najčešće postavljaju ispod liste: da bi se
korisniku pružila opcija da nastavi da čita veći skup podataka.

24. 2.4.5. Omiljeni (Favorites)
Rezime problema
Korisnik želi da izabere artikle za kasniju upotrebu
pinterest.com
▲ Na Pinterest.com možete sačuvati „pribadače“ u kolekciji za kasniju upotrebu.
https://ui-patterns.com/patterns/favorites/examples
Upotreba
 Koristite da biste omogućili korisnicima da razlikuju velike količine stavki sadržaja.
 Nemojte koristiti oznake za omiljene članke da odabirate između više kategorija – u te svrhe
koristite oznake ili kategorije.
Rešenje
Omogućite korisnicima da kreiraju personalizovanu listu omiljenih stavki.
Omogućite korisnicima način da sačuvaju predmete od posebnog interesa za pravljenje sopstvene
zbirke i za kasniju upotrebu. Razmislite o tome da dozvolite označavanje ili dodavanje opisa ili drugih
metapodataka kako biste pomogli korisnicima da se kasnije sete stavki.
Obezbedite dugme za omiljeno, pored stavki u prikazu liste ili postavljeno u prikaz detalja. Dugme
obično ima oblik zvezde ili srca. Pored toga, razmislite o prikazu liste stavki koje je korisnik označio
kao omiljenu.

25. Odabir omiljenog sadržaja je tip izbora uključivanje/isključivanje. Ovaj obrazac ne dozvoljava
povezivanje metapodataka sa omiljenim sadržajem ili na drugi način kategorizaciju sadržaja.
Ovaj obrazac se fokusira na ličnu organizaciju, a ne na promociju sadržaja. Omogućava korisnicima da
javno ili privatno izaberu sadržaj, bilo gde u proizvodu, na koji bi možda želeli da se vrate kasnije. Za
razliku od lajkovanja ili deljenja, omiljene stavke se mogu koristiti za označavanje sadržaja za čitanje
kasnije kao i one koji bi mogli ponovo da budu korisni.
Obrazloženje
Označavanje omiljenih stavki može pomoći korisnicima da stvore osećaj o saržaju u ogromnim
skupovima podataka.
Dodeljivanje statusa „omiljeni“ je brz način razlikovanja željenog sadržaja od običnog sadržaja.
2.4.6. Kartice (Cards)
Rezime problema
Korisnik treba da pregleda sadržaje različitih tipova i dužine
Primer
pinterest.com
▲ Pinterest koristi kartice za grupisanje heterogenih stavki: svaka kartica se razlikuje po količini
informacija i zauzima različitu količinu vertikalnog prostora.
https://ui-patterns.com/patterns/cards/examples
Upotreba
 Koristite za prikaz sadržaja sastavljenog od različitih elemenata
 Koristite da biste prikazali elemente čija se veličina ili podržane radnje razlikuju – poput
fotografija sa natpisima promenljive dužine.

26.  Koristite kada prikazujete sadržaj koji…
o Kao kolekcija, sastoji se od više tipova podataka (slike, filmovi, tekst)
o Ne zahteva direktno poređenje
o Podržava sadržaj veoma promenljive dužine (naslove, komentare)
o Sadrži interaktivni sadržaj
 Koristite za vizuelno grupisanje manjih količina informacija koji pozivaju na akciju - kao što je
prihvatanje zahteva ili pristup višem nivou detalja.
 Koristite za prikupljanje različitih informacija o jednoj temi kako biste formirali jedan
koherentan deo sadržaja.
 Kartice su prikladnije kada korisnici pregledavaju informacije nego kada ih pretražuju.
 Kartice su najbolje za kolekcije heterogenih stavki (kada nije sav sadržaj istog osnovnog tipa).
Rešenje
Prikažite ulazne tačke za detaljan i raznolik sadržaj u sličnim oblicima. Kartica može da sadrži
fotografiju, tekst i vezu o jednoj temi.
Razmislite samo o pomeranju kolekcija karata u jednom pravcu: horizontalno ili vertikalno. Sadržaj
kartice koji premašuje maksimalnu visinu kartice (ako se pomerate vertikalno) ili širinu (ako se
pomerate horizontalno) je skraćen i ne pomera se, ali se može proširiti. Kada se jednom proširi,
kartica može premašiti maksimalnu visinu/širinu prikaza.
Kartica obično sadrži nekoliko različitih vrsta medija, kao što su slika, naslov, kratak rezime i dugme za
poziv na akciju.
Karticama se može manipulisati
Jedna od najvažnijih stvari u vezi sa karticama je njihova sposobnost da se njima može manipulisati
skoro do u beskraj. Mogu se okrenuti da bi otkrile još sadržaja, slagati jedna preko druge kako bi se
uštedelo na prostoru, preklapati za rezime – i proširiti za više detalja, sortirati i grupisati.
Možemo da nagovestimo šta je na poleđini ili da se kartica može rasklopiti. Sličnost karata sa fizičkim
svetom čini ih odličnom konceptualnom metaforom sa kojom lako možemo povezati sve vrste
manipulacija.
Obrazloženje
Pregledanje je veliki deo interakcije i korisnici žele da budu u mogućnosti da brzo skeniraju velike
delove sadržaja i zarone duboko u sadržaje prema svojim interesovanjima. Korisnici mogu iskusiti
poteškoće pri pregledavanju sajtova sa velikom količinom teksta jer prikazivanje dodatnih detalja za
svaku stavku može da zaguši ekran i tako spreči efikasno pregledavanje.
Kartice su odlične za prikazivanje agregiranih elemenata čija veličina ili podržane radnje variraju.
Svaka kartica služi kao ulazna tačka za detaljnije informacije, tako da ne bi trebalo da bude
preopterećena informacijama ili radnjama. One se mogu odbaciti, prevući, sortirati i filtrirati.
Kartice vam omogućavaju da prezentujete veliku količinu sadržaja na jednostavan i razumljiv način:
one dele sav dostupan sadržaj u smisaone odeljke, predstavljaju rezime i vezu do dodatnih detalja.
Jedna kartica je kontejner koji prikazuje različite delove povezanih informacija iz kojih korisnici mogu
dobiti dodatne informacije.
Zašto koristiti kartice?
Kartice pomažu da se podaci grupišu u sadržaj koji se lakše pregledava. Kartice su:

27. Intuitivne. Kartice izgledaju slično stvarnim opipljivim karticama pa korisnicima izgledaju poznato.
Pre nego što su kartice postale popularni elementi u mobilnim i veb aplikacijama, bile su svuda u
stvarnom životu: vizit karte, bejzbol kartice, lepljive beleške (stikeri). Kartice predstavljaju korisnu
vizuelnu metaforu koja omogućava našem mozgu da intuitivno poveže karticu sa delom sadržaja koji
ona predstavlja – baš kao u stvarnom životu.
Lake za razumevanje. Kartice ne zauzimaju mnogo prostora i primoravaju dizajnera da da prioritet
njihovom sadržaju i obliku. Zauzvrat, svaka kartica postaje lako svarljivi deo sadržaja kome se lako
pristupa i koji se lako analizira. Kartice olakšavaju korisnicima da pronađu sadržaj koji ih zanima –
zauzvrat, to im daje mogućnost da se angažuju na način koji žele.
Kartice su privlačne. Dizajn zasnovan na karticama se često u velikoj meri oslanja na vizuelne
elemente (naročito slike); svaka tekstualna informacija je obično sekundarna u odnosu na vizuelnu u
smislu arhitekture informacija. Naglasak na korišćenju slika može pomoći da dizajn zasnovan na
karticama bude privlačniji za korisnike nego isti sadržaja koji nije raspoređen u kartice.
Pogodne za responzivni dizajn. Karticama se gotovo beskonačno može manipulisati: pravougaoni
oblik se lako menja kako bi se uklopio u horizontalnu i vertikalnu orijentaciju različitih ekrana (lako
povećava ili smanjuje), što znači da korisnici dobijaju dosledno iskustvo korišćenja na svim uređajima.
Deljive. Kartice mogu podstaći korisnike da dele sadržaj na društvenim medijima, jer omogućavaju
korisnicima da lakše dele samo određeni deo sadržaja u poređenju sa celom stranicom.
Diskusija
Kao i kod bilo koje tehnike dizajna, interfejs u stilu kartice nije univerzalno rešenje za postizanje
savršene upotrebljivosti.
Kada koristiti kartice
Postoje slučajevi kada su kartice posebno primenljive:
 Pregledanje preko pretrage. Kartice su prikladnije kada korisnici pregledavaju informacije
nego kada pretražuju.
 Slični predmeti. Kartice najbolje rade za kolekcije heterogenih predmeta (kada nije sav
sadržaj istog osnovnog tipa).
Ovo je obično slučaj kada imate:
Tok događaja. Na primer, Facebook koristi kartice da predstavi brzi pregled nedavnih događaja u
svom feedu vesti. Facebook-ov feed vesti je beskonačan tok, dok su kartice individualne. Poenta
kartica je razvrstavanje: korisnici mogu da uzmu jedan događaj iz strima i podele ga.
Interfejs zasnovan na otkrivanju. Kartice omogućavaju da se relevantan sadržaj prirodno otkrije,
omogućavajući korisnicima da zarone duboko u svoja interesovanja. Dizajn zasnovan na karticama je
veoma pogodan način za predstavljanje tipa sadržaja kakav je kreativni rad.
Alat za tok posla i kada možete predstaviti jedan zadatak u toku kao karticu. Kartice se lako mogu
kategorisati za listu zadataka. Mogu se korišćenju interfejsu za kreiranje kontrolne table za korisnike,
gde svaka kartica predstavlja poseban zadatak. Kontrolne table obično prikazuju različite tipove

28. sadržaja istovremeno na istoj stranici. U takvim situacijama, metafora kartice može pomoći u
stvaranju očiglednijih razlika između stavki gde svaka kartica može da se prilagodi različitim ulogama.
Kada ne bi trebalo da koristite kartice
Postoje i slučajevi u kojima je bolje izabrati alternativno rešenje za kartice:
 Kada je sadržaj koji želite da predstavite već grupisan u veoma homogene stavke kao što su:
o Spisak sličnih proizvoda. Upotreba kartica će ometati traženje određenih stavki ili
upoređivanje različitih stavki. Standardni prikaz liste je relevantniji za takav slučaj jer
prikaz liste pruža bolju mogućnost skeniranja i zahteva manje prostora.
o Galerija slika. Upotreba kartica može odvući pažnju korisnika i sprečiti lako
skeniranje. Standardni prikaz mreže može biti bolji izbor jer omogućava ljudskom oku
da lakše skenira mrežu i njene stavke.
 Strogi red. Kada imate strogi redosled po kome želite da korisnici skeniraju sadržaj. Izgledi
kartica obično ne naglašavaju rangiranje sadržaja jer ne pružaju očigledne informacije o
redosledu kojim sadržaj treba da se gleda na stranici. Kao rezultat toga, postoji malo
hijerarhije u predstavljenim vizuelnim informacijama. Kartice mogu učiniti da sav sadržaj
izgleda slično, što može otežati (ili čak onemogućiti) korisnicima da lako razaznaju važnost
rangiranja sadržaja.
Problem vizuelnog preopterećenja
Najčešća zamka dizajna zasnovanog na karticama je opasnost od vizuelnog preopterećenja. Kako se
kartice često koriste u sajtovima koji sadrže veliku količinu informacija, mogu na kraju da proizvedu
osećaj zatrpanosti (posebno na velikim prozorima), što otežava vizuelno pregledavanje.
Kako poboljšati dizajn i interakciju sa karticama
Postoji nekoliko stvari koje mogu poboljšati dizajn kartice.
 Pridržavajte se pravila „jedna karta, jedan koncept“. Kartica može da sadrži nekoliko
različitih elemenata, ali svi bi trebalo da budu o jednoj temi. Ovo omogućava korisnicima da
odaberu deo sadržaja koji žele da konzumiraju, dele ili interaguju sa njim.
 Velikodušno koristite razmak. Kartice su često predstavljene veoma koherentnim
pojedinačnim sadržajem koji su za sebe mali blokovi „mini dizajna“. Zbog toga je od suštinske
važnosti da se svakoj pojedinačnoj kartici da prostor da se vidi, čita i razume. Dodajte dosta
razmaka oko svakog bloka da biste korisnicima pružili vreme i mir za vizuelno resetovanje dok
prelaze sa jedne kartice na drugu.
 Ograničite dužinu sadržaja. Kartica treba da sadrži samo bitne informacije i da nudi
povezanu ulaznu tačku za dalje detalje, a ne same potpune detalje. Kako dizajneri pokušavaju
da stave previše sadržaja na karticu, kartica može postati preširoka ili predugačka i zauzvrat
dovesti do gubitka prvobitne veze sa metaforom kartice jer više ne liči na karticu.
 Učinite karticu vizuelno prijatnom i jednostavnom u isto vreme. Slika je kralj dizajna kartica:
potrebna vam je sjajna slika da biste privukli korisnike na svaku pojedinačnu karticu. Odlučite
se za jednostavne i osnovne fontove (kao što je sans-serif sa normalnom težinom za telo
kartice), jer osnovna tipografija maksimizira čitljivost i pomaže pri pregledanju.

29.  Kreirajte hijerarhiju sadržaja. Hijerarhija unutar kartica pomaže da se pažnja korisnika
usmeri na najvažnije informacije. Postavite primarni sadržaj na vrh kartice i koristite
tipografiju da biste naglasili primarni sadržaj. Koristite razdelnike da odvojite oblasti sadržaja
kojima je potrebno jasnije vizuelno razdvajanje.
 Učinite da se klikne na celu karticu, a ne samo na određene delove. Ova veća zona
interakcije značajno poboljšava upotrebljivost i na uređajima sa ekranom osetljivim na dodir i
na uređajima zasnovanim na mišu (Fitsov zakon kaže da to čini interakciju korisnika
verovatnijom).
 Iskoristite prednosti animacije i kretanja. Koristite vizuelne povratne informacije i savete da
pomognete korisnicima da bolje razumeju kako da komuniciraju sa korisničkim interfejsom.
Na primer, možete koristiti animirani efekat na karticama kada kursor lebdi iznad njih, što
korisniku označava da se na karticu može kliknuti.
Dizajn karata i vizuelni označivači
Moderne digitalne kartice nisu čisti skeuomorfni (onaj koji liči na stvarni objekat) koncept, ali prilično
često, korišćenje doslednih metafora i principa pozajmljenih iz fizike pomaže korisnicima da shvate
interfejse i tumače vizuelne hijerarhije u sadržaju. U slučaju kartica postoji nekoliko stvari koje
možete da uradite:
 Koristite zaobljene uglove da bi kartica vizuelno ličila na stvarnu opipljivu karticu.
 Dodajte blagu senku da biste prikazali dubinu i označili da se na celu karticu može kliknuti.
2.4.7. Vrteška (Carousel)
Rezime problema
Korisnik treba da pregleda skup stavki i eventualno odabere jednu od njih
Primer
yahoo.com
https://ui-patterns.com/patterns/Carousel/examples

30. Upotreba
 Koristite kada imate veliki skup stavki za prikaz, ali želite da dozvolite korisniku da
koncentriše svoju pažnju samo na nekoliko odabranih stavki istovremeno
 Koristite kada želite da podstaknete korisnika tako što ćete mu dati do znanja da ima više
dostupnih stavki nego što je trenutno prikazano.
 Koristite kada nemate dovoljno prostora da prikažete sve stavke odjednom.
 Koristite kada imate vizuelno upečatljive stavke za prikaz, kao što su filmski posteri, omoti
albuma, proizvodi itd.
 Ne koristite kada su stavke „nevizuelne“, kao što su veze do tekstualnih članaka, PDF
dokumenata itd.
 Nemojte koristiti kada se sadržaj na koji se povezuje ne može odmah identifikovati po slici.
Rešenje
Rasporedite skup stavki na horizontalnu liniju gde je poželjno da svaka stavka ima priloženu sličicu (ili
je stavka predstavljena samo slikom). Iako je lista stavki dugačka, istovremeno se prikazuje samo 3-8
slika.
Ako korisnik želi da vidi ostale stavke na listi, mora da klikne na jednu od kontrola za navigaciju, kao
što je strelica koja pokazuje levo/desno ili gore/dole. Kada se klikne na jednu od strelica, učitava se
sledeći „prikaz“, prelazna animacija pomera traženu stavku u fokus. Na ovaj način korisnik može
kružno pretraživati listu stavki napred-nazad – otuda i naziv „Vrteška“.
Obrazloženje
Vrteška optimizuje prostor na ekranu tako što prikazuje samo podskup slika iz kolekcije slika u
cikličnom prikazu.
Kontrole za navigaciju na vrtešci predlažu dodatni sadržaj koji trenutno nije vidljiv, što podstiče
korisnika da nastavi da istražuje. Uzorak vrteške se na ovaj način može koristiti kao dodatni podsticaj
korisniku da pregleda sve stavke na listi, jer se mi kao ljudi ne osećamo prijatno kad nismo svesni
„potpune slike“.
Pošto je vrteška kružna, početak liste će biti prikazan nakon što korisnik dođe do kraja. Ovo
ponašanje podstiče korisnika da nastavi da pregledava listu.
2.4.8. Progresivno otkrivanje (Progressive Disclosure)
Rezime problema
Korisnik želi da se fokusira na zadatak koji je pred njim sa što manje ometanja, a da i dalje može da
istražuje dublje detalje ako je potrebno.
Primer

31. youtube.com
▲ Progresivno otkrivanje se koristi na nekoliko načina u dizajnu youtube komentara. Najrelevantniji
komentari su istaknuti, ali više se može prikazati na zahtev, ako se nit smatra zanimljivom. Slično,
korisnik može da pređe sa pregleda „Najbolji komentari“ ili „Prvo najnoviji“.
Upotreba
Koristite kada želite da kod korisnika smanjite osećaj preopterećenosti
Rešenje
Predstavite samo minimalne podatke potrebne za zadatak koji imate.
Premestite složene i manje često korišćene opcije iz glavnog interfejsa. Otkrijte samo bitne
informacije i pomozite u upravljanju složenošću tako što ćete progresivno otkrivati informacije i
opcije.
Primeri progresivnog obelodanjivanja su brojni. Jednostavna veza „Prikaži više“, koja otkriva više
informacija o nečemu, jedan je od najjednostavnijih oblika progresivnog otkrivanja.
Obrazloženje
Održavajte fokus i pažnju korisnika smanjenjem nereda, konfuzije i kognitivnog opterećenja.
Pojačavajte korisnikovo iskustvo, krećući se od jednostavnog ka složenom, od apstraktnog ka
specifičnom. Progresivno otkrivanje premešta napredne ili retko korišćene funkcije na sekundarni
ekran, smanjujući kognitivno opterećenje trenutnog zadatka. Ovo će pomoći da vaša aplikacija bude
lakša za učenje i manje podložna greškama zbog manje ometanja.
Prikazivanjem samo informacija ili karakteristika relevantnih za trenutnu aktivnost korisnika i
odlaganjem drugih informacija dok se ne zatraže, korisnik može da se fokusira na glavni zadatak koji
je pred njim. Sakrivanjem složenijih ili ređe korišćenih opcija, interfejs je oslobođen zatrpavanja
opcijama, otkrivajući ih samo onako kako su potrebne. Tako pomažete korisnicima da izvedu složen
proces u više koraka na jednoj stranici.

32. Iako želite da prikažete samo bitne informacije u prvom koraku, ipak pozovite korisnika da
preduzmete sledeći korak. Kada korisnik završi jedan korak, otkrijte informacije potrebne za sledeći
korak, držeći sve prethodne korake vidljivim. Održavanjem prethodnih koraka vidljivim, dozvoljavate
korisnicima da promene ono što je uneto. Kao u čarobnjaku, podaci uneti u trenutnom koraku mogu
uticati na ponašanje sledećeg.
2.4.9. Arhiva (Archive)
Rezime problema
Sve stavke u kolekciji moraju biti organizovane hronološkim redom.
Primer
https://ui-patterns.com/patterns/Archive/examples
Upotreba
 Koristite kada imate više od 10 do 20 stavki za prikaz
 Koristite kada imate skup podataka koji obuhvata duži vremenski okvir i želite da dozvolite
korisniku da pregleda stavke u skupu podataka hronološkim redosledom.
 Koristite kada prikazivanje svih stavki u skupu podataka zbunjuje korisnika, a ne daje dobar
pregled.
 Koristite kada ima smisla urediti stavke u skupu podataka po datumima.
 Koristite kada želite da obezbedite jednostavan način da pregledate celu bazu podataka
članaka.
Rešenje
Navedite stavke u vašem skupu podataka hronološkim redosledom i obezbedite odgovarajuće
naslove koji odgovaraju količini stavki. Ako, na primer, imate 10 stavki godišnje, nema mnogo smisla
deliti ovih 10 stavki na mesece. Ako imate 100 stavki godišnje, ali takođe imate mesece bez ikakvih
stavki, možda i tad nema smisla navoditi sve mesece.
Možete da obezbedite veze do stranica koje prikazuju sve stavke po vremenskom periodu, ili
jednostavno napravite listu veza do svake stavke direktno na glavnoj stranici arhive.
Obrazloženje

33. Koristite obrazac arhiviranja kada ima smisla da navedete stavke hronološkim redom. Navođenje
stavki u arhivskom formatu olakšava korisniku da istražuje kako je veb lokacija evoluirala tokom
vremena i šta je uticalo na najnovije stavke.
2.4.10. Kontinuirano pomeranje (Continuous Scrolling)
Rezime problema
Korisnik treba da vidi podskup podataka koji se ne može lako prikazati na jednoj stranici. Sadržaj
treba da bude predstavljen korisnicima kao podskup mnogo većeg naizgled beskrajnog skupa, na
način koji će im pomoći u konzumiranju sadržaja bez napora.
Primer
https://ui-patterns.com/patterns/ContinuousScrolling/examples

34. Upotreba
 Koristite kada ima više podataka za prikaz nego što bi stalo na normalnu stranicu
 Koristite kada navigacija do druge stranice podataka oduzima previše pažnje korisniku
Rešenje
Automatski učitajte sledeći skup podataka ili stranicu sadržaja kada korisnik dođe do dna trenutne
stranice
Za razliku od obrazaca paginacije, obrazac za kontinuirano pomeranje nema prirodni prekid. Kada
koristite obrasce paginacije, bira se da se prikazuje samo podskup podataka u jednom trenutku, a
zatim se dozvoli korisniku da zatraži još podataka ako to želi. Uz kontinuirano pomeranje, novi podaci
se automatski preuzimaju kako korisnik skroluje do dna stranice. Tako izgleda kao da stranica nema
kraja, jer će se više podataka učitati i ubaciti na stranicu svaki put kada korisnik skroluje do dna
stranice.
Obrazloženje
Eliminišite potrebu za klikom na „sledeću stranicu“ tako što ćete stvoriti efekat stranice koja se
beskonačno pomera tako što će se stalno učitavati novi sadržaj kad korisnik skroluje do dna stranice.
Iako odličan za korisničko iskustvo, ovaj obrazac uvodi probleme sa obeležavanjem.
Problem sa korišćenjem paginacije za pretraživanje između podskupova podataka je u tome što je
korisnik povučen iz sveta sadržaja u svet navigacije, pošto se od korisnika traži da klikne na sledeću
stranicu. Korisnik tada više ne razmišlja o tome šta čita, već o tome kako da pročita više. Ovo prekida
tok misli korisnika i primorava ga da prestane da čita. Korišćenje paginacije stvara prirodnu pauzu
koja omogućava korisniku da ponovo proceni da li želi da nastavi dalje ili da napusti sajt, što često i
čini.
Može se tvrditi da je Kontinuirano pomeranje frustrirajuće za korisnika, jer nema prirodne pauze.
Korisnik se može zapitati: Kada ću da završim sa čitanjem?
2.4.11. Sličica (Thumbnail)
Rezime problema
Korisnik treba da dobije pregled slika bez potrebe da preuzima svaku od slika u punoj veličini.
Primer

35. https://ui-patterns.com/patterns/Thumbnail/examples
Upotreba
 Koristite kada imate kolekciju slika koje želite da predstavite korisniku.
 Koristite kada preuzimanje verzija slika u punoj veličini zauzima mnogo propusnog opsega, ili
je potrebno mnogo vremena da korisnik preuzme sve takve slike.
 Koristite kada želite da omogućite korisniku da brzo pregleda kolekciju slika.
 Koristite kada želite da stvorite korisniku utisak o slici, filmu ili stranici pre nego što on ili ona
odluči da učita original.
Rešenje
Sličica je minijaturna verzija veće slike. Sličica može da ilustruje bilo šta grafički: sliku, film ili čak
snimak ekrana veb stranice.
Dimenzije (širina i visina) više sličica koje se pojavljuju jedna pored druge su potpuno iste. Da bi se
sačuvale iste proporcije u sličici kao što su pronađene na originalnoj slici, i promena veličine i isecanje
su deo procesa manipulacije slikom.
Uobičajene veličine sličica su:
dimenzija (širina x visina) Opis
48×48 Veoma mala
64×64 Mala
80×80 Srednja
96×96 Srednja

36. 128×128 Velika
144×144 Ekstra velika
160×160 Super velika
Obrazloženje
Korišćenje sličica pruža korisniku pregled nekoliko slika ili filmova na jednoj veb stranici. Štaviše,
sličice štede propusni opseg jer korisnik ne mora da klikne na sve slike da bi pronašao onu koju traži,
već može da se vodi na osnovu pregleda sličica.
2.4.12. Kalendar događaja (Event Calendar)
Rezime problema
Korisnik želi da pronađe događaje od interesa koji se dešavaju u određenom vremenskom periodu.
Događaji moraju biti predstavljeni korisnicima u vizuelno sažetom modelu koji apstrahuje datum i
vreme.
Primer
https://ui-patterns.com/patterns/EventCalendar/examples
Upotreba
 Koristite kada želite da omogućite svojim korisnicima da se kreću između stavki koje se
nalaze u određenom vremenskom periodu.
 Nemojte koristiti ako svaki sadržaj vaše veb stranice nema svoj koren u datom vremenskom
periodu ili vremenskoj oznaci.
Rešenje

37. Odvojite sadržaj u smislene segmente vremena. Organizujte događaje u grupe „večeras“, „sledeće
nedelje“, „sledećeg meseca“ ili samo u septembru ili oktobru. Prikažite više detalja o događaju koji se
danas približava i fokusirajte se na skeniranje i filtriranje što je sogađaj dalje.
Najčešći načini za pregledavanje kalendara događaja su ili preko tekstualne liste događaja, kroz
mesečnu tabelu ili kombinaciju oba.
Lista teksta je odlična za pružanje pregleda događaja za određeni vremenski period: za određeni dan,
nedelju, mesec ili jednostavno najbližu budućnost. Sa prepunim kalendarom, međutim, može biti
neodoljivo dobiti i pregledati sve.
Okvir kalendara (mesečna tabela) je dobar za pregledavanje između dana i za dobijanje pregleda
kada se radnja dešava. Međutim, izolovano, ne otkriva skoro nikakve informacije o događajima u
kalendaru. Štaviše, kalendar u okviru je skoro beskorisan bez podataka. Ako imate samo jedan ili dva
događaja mesečno, korisnost okvira kalendara postaje minimalna.
Kada se kombinuje, okvir kalendara se može koristiti kao uređaj za navigaciju kroz vremenske
periode, dok tekstualne liste mogu da prikazuju detalje
Elementi liste događaja
Da bi kalendar događaja funkcionisao, morate da obezbedite niz različitih vrsta informacija da bi bio
koristan. Sve zavisi od konteksta. Ako navodite koncertne događaje, tada su cene ulaznica,
dostupnost karata i ime benda važni. Za kalendar konferencije važni su prezenter, naziv prostorije,
naziv konferencijske sesije i trajanje izlaganja.
Bez obzira na kontekst, čini se da postoje neki detalji koji su uvek važni:
 Naslov događaja
 Datum događaja
 Početno vreme
 Lokacija
 Organizator
 Opis događaja
Obrazloženje
Kalendar događaja je lista vremenskih stavki. Njihova baza u vremenu je odličan alat za grupisanje,
filtriranje i sortiranje.
Diskusija
Porcije vremena
Kao ljudi, ne razmišljamo o datumima. Razmišljamo o „porcijama“ vremena: večeras, ovog vikenda,
sledeće nedelje, za nekoliko nedelja, sledećeg meseca ili ove godine.
Razdvajanje vaših događaja na porcije vremena koje imaju smisla za korisnika je odličan način da
korisniku pružite pregled. Podelite događaje u grupe „večeras“, „sledeće nedelje“ ili „sledećeg
meseca“.
Razmislite o eksperimentisanju sa različitim dizajnom za svako vreme. Korisnik bi mogao biti više
zainteresovan za detalje ove nedelje nego sledećeg meseca. Navođenje vremena početka na listi
događaja ove nedelje može imati više smisla nego navođenje za događaje sledećeg meseca. Sve je u

38. situaciji u kojoj se korisnik nalazi kada pregleda vaš kalendar. Odvojite trenutak da razmislite o
dizajnu iz perspektive korisnika.
Uobičajene zamke dizajna kalendara događaja
Najčešće greške u dizajnu kalendara događaja na koje najčešće nailazim su:
 Razmišljanje u kalendarima u okviru
Dizajneri koriste kalendare za planiranje dnevnog rasporeda i za planiranje narednih meseci
uz pomoć ovih kalendara. Za ovu svrhu, kalendari u okviru su odlični. Nažalost, mnogi
dizajneri zaboravljaju da su ovi tipovi dizajna kalendara napravljeni za svakodnevno
planiranje (za šta dobro funkcionišu) – nisu dizajnirani da pruže pregled predstojećih
događaja, što je glavna svrha kalendara događaja .
 Navođenje događaja bez vremena početka
Pregledavanje kalendara događaja odvija se u različitim kontekstima. Jedan kontekst je kada
želimo da saznamo da li se nešto zanimljivo dešava u narednih nekoliko nedelja ili u narednih
mesec dana. U tom kontekstu, ne zanima nas kada počinje događaj, već samo koji je datum.
Kada odlučimo da odem ona neki događaj, koristimo kalendar događaja u drugu svrhu: da
proverimo detalje – da li počinje u 19:00 ili 20:00?
 Nedostaju drugi relevantni podaci
Ako idem na koncert, mesto održavanja čini važnu razliku u mojoj odluci da idem ili ne. Želim
da znam da li će biti skučeno i intimno, veliko i smelo, ili će to biti ono mesto sa lošim
zvukom.
 Nemoguće skeniranje
Ne terajte korisnika da razmišlja. Olakšajte mu da skenira događaj na osnovu podataka koji su
važni za tipove događaja koje navodite. Ako je jedan događaj veći ili važniji od drugog,
obavestite korisnika tako što ćete ga istaći. Isto važi i za događaje koje je možda već proverio
ili još bolje – odlučio da prisustvuje.
Još jedan sjajan način da se istakne važan događaj je putem društvenih metrika kao što su
ocene, broj posećenosti itd. Prikazivanje ocene događaja kroz, na primer, zvezdice, olakšava
brzo skeniranje liste za događaj sa najvišim ocenama. Slično tome, veći broj poseta će se lako
uočavati. Takođe možete pokušati da se poigrate sa različitim veličinama fonta, bojama
teksta i pozadinama da biste istakli određene događaje.
 Ogromne liste
Lista koja se nastavlja i nastavlja bez ikakvog vizuelnog prioriteta ili grupisanja čini kalendar
beskorisnim. Ako je lista prevelika da bi se prikazala u nekoliko preklopa, razmislite o tome
kako možete da je podelite na osnovu vremenskih ograničenja ili drugih podataka kao što su
kategorija, mesto, žanr ili ocena.
 Nema opcija filtriranja
Omogućite korisniku da gleda samo događaje koji gs zanimaju. Ako voli fank muziku,
dozvolite mu da pregleda samo fank koncerte. Ako želi da vidim koji bendovi sviraju u
omiljenom lokalnom klubu, dozvolite mu da pregledam mesta. Ako ima vremena samo
sledećeg vikenda, dozvolite mu da ograničim pretragu na sledeći vikend.
2.4.13. Označavanje (Tagging)
Rezime problema

39. Stavke treba da budu označene, kategorisane i organizovane pomoću ključnih reči koje ih opisuju.
Primer
vimeo.com
▲ Kada dodajete oznake video snimku u Vimeou, oznake se odvajaju zarezima, a svaka oznaka se
nakon slanja dodaje u horizontalnu liniju ispod polja za unos. Svaka oznaka može se lako ukloniti
zasebno.
https://ui-patterns.com/patterns/Tag/examples
Upotreba
 Koristite kada je sadržaj na vašoj veb lokaciji možda u više kategorija i ne mora nužno da se
uklapa samo u jednu hijerarhijsku kategoriju.
 Koristite kada želite da korisnici dodaju podatke na vašu veb lokaciju i dozvolite im da sami
organizuju svoje podatke.
Rešenje
Dozvolite korisnicima da povežu više tema sa delom sadržaja. Dozvolite korisnicima da dodaju
odgovarajuće ključne reči kako bi kategorizovali sopstveni sadržaj na nehijerarhijski način.
Dozvolite da ključne reči budu povezane sa stavkama na veb lokaciji/aplikaciji kao što su članci na
blogu, proizvodi za e-trgovinu i mediji. Koristite termine koji kategorički opisuju ove stavke. Dozvolite
da se ove stavke pronađu u pretrazi koristeći ove ključne reči. Dozvolite onima koji dodaju
informacije na sajt da dodaju i ključne reči u sadržaj koji šalju. Ključne reči se mogu prikazati kao veze
koje pomažu u pronalaženju stavki sa odgovarajućim ključnim rečima.
Obrazloženje
Označavanje pomaže korisnicima da lakše pronađu sopstveni sadržaj.
Oznake su relevantne ključne reči povezane sa informacijom ili dodeljene njoj. Oznake se često
koriste na društvenim veb lokacijama, gde korisnici mogu da postavljaju sopstveni sadržaj. Ovde se
oznake koriste da bi se omogućilo korisnicima da organizuju i kategorizuju sopstvene podatke u
javnoj sferi. Na ovaj način, oznake se mogu posmatrati kao kategorizacija podataka odozdo prema
gore, a ne kao kategorizacija podataka odozgo nadole, gde kreatori sajta definišu hijerarhiju u kojoj
se podaci dostavljaju.

40. 2.4.14. Kategorizacija (Categorization)
Rezime problema
Korisnik želi da stvori osećaj o sadržaju tako što ga pregleda i grupiše u kategorije
Primer
buzzfeed.com
▲ Buzzfeed je organizovao svoj sadržaj u obe hijerarhijske kategorije odozgo nadole (Hrana, uradi
sam, kvizovi, itd.) i kroz oznake odozdo prema gore (LOL, omg, vin, cute, itd.)
Upotreba
Koristite kada se sadržaj na vašoj veb lokaciji urednički svodi na glavnu kategoriju ili odeljak
Rešenje
Dozvolite korisnicima da kategorišu sadržaj u hijerarhijski odeljak. Dozvolite korisnicima da izaberu
hijerarhijsku, a možda i ugneždenu kategoriju za svoj sadržaj koja odgovara hijerarhijskoj
kategorizaciji samog sajta.
Obrazloženje
Tamo gde označavanje funkcioniše da objasni male razlike i detalje u sadržaju, kategorije
predstavljaju šire i lakše objašnjene razlike.
Posedovanje više kategorija pomaže da se odvoje jedna od druge i da se sugeriše koji sadržaj treba
pronaći.
Kategorizacija je proces u kome se ideje i objekti prepoznaju, razlikuju i razumeju. Kategorije nam
pomažu da brže i lakše shvatimo sadržaj. Nastojimo da kategorizujemo sve što doživljavamo u
pokušaju da objasnimo kako svet funkcioniše – kako je naše znanje predstavljeno u stvarnom svetu.

41. 2.5. Gestovi (Gestures)
2.5.1. Povucite da biste osvežili (Pull to refresh)
Rezime problema
Korisnik želi da preuzme više podataka ili osveži već dostupan sadržaj na ekranu.
Primer
tvitter.com
▲ Kada korisnik skroluje do vrha strima tvitova, može da skroluje još malo da osveži strim.
https://ui-patterns.com/patterns/pull-to-refresh/examples
Upotreba
 Koristite za osvežavanje ili ažuriranje bilo kog sadržaja koji se može ažurirati kao što su liste,
tabele i kolekcije kartica koje su sortirane obrnutim hronološkim redosledom (kolekcija je
strogo sortirana po opadajućem datumu). Primeri:
o Fidovi sadržaja (Tvitter, RSS)
o Primljene poruke (e-poruke, tekstualne poruke)
 Koristite povlačenje da osvežite da biste osvežili celu stranicu ili vidžet. Primer:
o Kartica u pregledaču (Google Chrome)
 Koristite kada dizajnirate ekrane osetljive na dodir.
Rešenje

42. Dok korisnik prstom povlači ekran nadole, vizuelna povratna informacija (indikator osvežavanja) se
pojavljuje na vrhu liste koja pokazuje napredak ažuriranja sadržaja. Ako korisnik otpusti pre nego što
dostigne prag osvežavanja, osvežavanje se prekida i vizuelna povratna informacija nestaje.
Neposredna vizuelna povratna informacija nakon akcije
Vreme čekanja korisnika počinje u trenutku kada započne radnju (prevucite ekran za ažuriranje
sadržaja). Odmah nakon toga, aplikacija treba da pruži vizuelnu povratnu informaciju kako bi
saopštila da je primila zahtev. Pouzdanje korisnika u činjenicu da se osvežavanje dešava direktno je
povezano sa vizuelnim povratnim informacijama. Dozvolite da indikator osvežavanja nastavi da se
okreće dok se podaci ne učitaju kako biste angažovali korisnika i sprečili zabunu.
Indikator osvežavanja treba da se aktivira samo radnjom korisnika
Osvežavanje sadržaja bi trebalo da se pokrene samo ručno od strane korisnika, zbog čega bi se
indikator osvežavanja trebao pojaviti samo u kombinaciji sa pokretom za osvežavanje. Ako želite da
obavestite korisnike o automatskom ažuriranju sadržaja (sinhronizovanju), trebalo bi da se uzdržite
od korišćenja istog indikatora.
Smisleni prelazi stanja
Indikatori osvežavanja deluju kao posrednici između različitih stanja prikaza, pomažući korisnicima da
razumeju šta se dešava kako se ekran menja. Indikatori osvežavanja bi trebalo da ostanu vidljivi sve
dok se aktivnost osvežavanja ne završi i dok se novi sadržaj ne vidi ili korisnik ne ode sa ekrana.
Obrazloženje
Zašto se koristi povlačenje za osvežavanje?
Povlačenje za osvežavanje se ponekad smatra dodatnim nepotrebnim korakom za osvežavanje, jer
korisnik mora ručno da pokrene osvežavanje ili proces učitavanja sadržaja aplikacije. Pošto gest
povlačenja za osvežavanje označava ručni zahtev za ažuriranje, zahteva uključivanje korisnika u
proces i stvara površinski sloj između korisnika i njihovog sadržaja.
U većini slučajeva takve operacije se mogu izvršiti automatski koristeći proceduru auto-sinhronizacije,
bez učešća korisnika. Na primer, kada korisnici koriste Gmail u pregledaču na svojim računarima,
usluga im automatski prikazuje najnovije imejlove (i održava prijemno sanduče ažurno u pozadini). Pa
zašto bi se klijenti e-pošte na mobilnim uređajima ponašali drugačije?
Ručno osvežavanje pruža prednosti korisničkom interfejsu i može poslužiti kao odličan dodatak
sinhronizaciji:
 To je zgodno za korisnike jer su u mogućnosti da ažuriraju ekran kad god žele.
 To je prirodno za napredne korisnike. Obrazac povuci za osvežavanje postao je standard u
mobilnim aplikacijama. Gest povlačenja za osvežavanje je sada toliko univerzalan, da je
programerima teško da ga ignorišu jer iskusni korisnici očekuju da bude deo iskustva
aplikacije.
 To donosi kontekst i kontinuitet. Kada korisnici otvore Tvitter, aplikacija neće bacati korisnike
na nepoznato mesto u njihovoj vremenskoj liniji na Tvitteru. Umesto toga, aplikacija ih
dovodi do poslednjeg pročitanog tvita. Ako korisnici žele da učitaju nove tvitove, oni to rade
ručno povlačenjem za osvežavanje.
 Takođe štedi propusni opseg za klijente koji su svesni podataka.

43. Diskusija
Korišćenje obrasca „Povuci za osvežavanje“ pomaže korisniku da izvrši zadatak ažuriranja sadržaja, ali
ovaj obrazac nije univerzalno primenljiv i ima svoje nedostatke.
Vidljivo dugme „osveži“ naspram skrivenog pokreta za osvežavanje
Mnogi programeri razmatraju korišćenje „povuci za osvežavanje“ kao način da uštede prostor na
ekranu (uklonite nered u korisničkom interfejsu). Iako očigledno smanjuje broj kontrola na ekranu
(uopšte se ništa ne vidi na ekranu), korisnici moraju da znaju da je tu. Pokreti su skrivene kontrole.
Dakle, nije tako intuitivno kao vidljivo dugme „Osveži“. Vidljivo dugme za osvežavanje je lakše za
implementaciju za programera i za korišćenje za korisnika (pošto je uvek vidljivo i dostupno).
Kada treba da koristite vidljivo dugme „Osveži“ ili automatsko ažuriranje umesto Povuci za
osvežavanje
Možda biste želeli da razmislite o dugmetu za osvežavanje u situacijama:.
 Kada imate prikaz sa sadržajem koji se može pomerati (npr. mapa). Zato što takav prikaz
nema primarni pravac ili poreklo sadržaja iz kojih korisnici mogu da pretpostave da će poteći
pokret prevlačenja za osvežavanje.
 Kada se stavke liste sortiraju hronološkim redom. Za listu „prvo najstarije“, trebalo bi da
koristite dugme za osvežavanje, jer bi povlačenje nadole da biste dodali stavke na jednom
listu bilo nezgodno.
 Kada imate neuređenu listu stavki. Jer kada korisnik gleda na neuređeni prikaz liste na prvom
mestu, nema očekivanja da će povlačenje nadole učiniti nešto posebno, a povlačenje za
osvežavanje nije intuitivno. Aplikacije koje se odnose na fotografije koje prikazuju galerije i
kalendarske aplikacije su dobar primer za to.
 Kada aplikacija ne sadrži sadržaj koji obično treba često da se osvežava.
 Razmotrite opciju bez osvežavanja (ili automatsko osvežavanje) kad god se stvari menjaju
prebrzo (osveženo postaje zastarelo za minut ili manje). Primeri:
o Podaci o zalihama uživo
o Izvještavanje o aukcijama
Problem sa dosegom palca na iPad-u
Osvežavanje je prirodno na mobilnom uređaju, ali izgleda nekako čudno na iPad-u (naročito u
pejzažnom režimu). Gotovo je nemoguće ažurirati sadržaj korišćenjem interakcije sa jednim palcem
— potrebno je da ispružite palac ili da postavite uređaj na ravnu površinu da biste udobno radili sa
korisničkim interfejsom.
Prošireno povlačenje za osvežavanje
U aplikacijama Google Chrome, funkcionalnost interakcije povlačenja za osvežavanje je proširena
mogućnost obavljanja još dve radnje — otvaranje novih kartica ili zatvaranje trenutnih kartica. Poput
standardnog šablona dizajna povlačenjem i osvežavanjem, povlačenjem ekrana nadole, a zatim
otpuštanjem, samo ćete osvežiti ekran:
Prošireno povlačenje za osvežavanje u Chrome pregledaču
Međutim, kada korisnik povuče nadole i prevuče udesno, Chrome će zatvoriti trenutnu karticu.
Alternativno, prevlačenjem nalevo otvoriće se nova kartica. Ova proširena interakcija povlačenjem i
osvežavanjem daje korisnicima tri moguće radnje, umesto samo jedne. Otvaranje nove kartice sa

44. proširenom interakcijom „povuci za osvežavanje“ je mnogo efikasnije jer se može uraditi samo
jednim gladkim pokretom.