SlideShare a Scribd company logo
1 of 18
Opšti interfejsni obrasci
3. Rad sa podacima (Tabele, Formatiranje podataka, Slike,
Pretraga)
Podaci se mogu pretraživati, formatirati i pregledati na različite načine.
Tabele (Table)
 Tabelarni filter (Table Filter)
 Sortiraj po koloni (Sort by Column)
 Naizmenične boje redova (Alternating Row Colors)
Formatiranje podataka
 Često postavljana pitanja (Frequently Asked Questions - FAQ)
 Komandna tabla (Dashboard)
 Okvir za kopiranje (Copy Box)
Slike
 Galerija (Gallery)
 Slajder (Slideshow)
 Zumiranje slike (Image Zoom)
Pretraživanje (Search)
 Automatsko dovršavanje (Autocomplete)
 Filteri pretraživanja (Search Filters)
3.1. Tabele (Table)
3.1.1. Tabelarni filter (Table Filter)
Rezime problema
Korisnik treba da prema kategorijama filtrira podatke prikazane u tabelama po kolonama.
Primer
https://ui-patterns.com/patterns/TableFilter/examples
Upotreba
Koristite kada imate veoma veliki skup rezultata koji je prevelik da bi se prikazao na jednoj stranici
Koristi se kada se jedna ili više kolona tabele može lako sažeti u kategorije po kojima se filtriraju.
Rešenje
Obezbedite padajuće ulaze koji predstavljaju kategorije prema kojima korisnik može da filtrira skup
podataka. Kada korisnik odabere kategoriju i klikne na „Filter“ ili nešto slično (kada korisnik pošalje
obrazac), prikazuje se samo red koji pripada izabranoj kategoriji.
Opciono, može se dodati više filtera. Ako se odabere ovo rešenje, morate biti svesni da ažurirate
kategorije svakog padajućeg okvira u skladu sa tim kada se izabere jedna kategorija – pošto izbor
vrednosti u jednoj kategoriji može smanjiti preostale opcije u drugoj.
Obrazloženje
Dodavanje filtera u vaše tabele omogućava korisniku da smanji količinu prikazanih stavki. Filteri
pomažu da se suze rezultati pretrage, omogućavajući korisniku da pronađe tačnije rezultate.
3.1.2. Sortiraj po koloni (Sort By Column)
Rezime problema
Korisnik treba da bude u stanju da sortira podatke u tabeli prema vrednostima kolone.
Primer
https://ui-patterns.com/patterns/SortByColumn/examples
Upotreba
 Koristi se kada u tabeli ima mnogo redova (iznad 10), a teško je izdvojiti jedan red i njegovu
vezu sa drugim redovima.
 Koristite kada tabela koristi paginaciju i podaci obuhvataju više stranica.
 Koristite kada želite da možete da uporedite redove u tabeli – na primer brojeve.
 Ne koristite ako je broj redova mali i tabelu je lako pretraživati ili skenirati.
Rešenje
Proširite funkcionalnost tabele tako da svaki naslov kolone tabele bude veza. Kada se klikne na
naslov, redovi u tabeli su poređani uzlazno prema vrednostima određene kolone. Ako se ponovo
klikne na isti naslov oznake, redosled je obrnut: redovi u tabeli su poređani opadajući prema
vrednostima određene kolone.
Kada su redovi tabele sortirani prema određenoj koloni, strelica se često prikazuje pored zaglavlja
kolone koja označava pravac u kome su redovi sortirani. Naslov kolone je često predstavljen drugom
bojom fonta ili težinom fonta (podebljano/obično ) da označi da je naručivanje izvršeno.
Obrazloženje
Obrazac pruža jednostavan način za organizovanje i upoređivanje podataka u tabeli. Štaviše, obrazac
je takođe dobro poznat iz desktop aplikacija koje se bave redovima podataka.
3.1.3. Naizmenične boje redova (Alternating Row Colors)
Rezime problema
Korisnik treba da vizuelno odvoji redove sličnog izgleda u tabeli, kako bi mogao da prati vrednosti
svakog reda.
Primer
https://ui-patterns.com/patterns/AlternatingRowColors/examples
Upotreba
 Koristite kada imate nekoliko kolona u tabeli
 Koristite kada su sadržaji kolona često slične prirode
 Koristite kada postoji više linija za svaki red
 Koristite kada visina svakog reda varira
Rešenje
Da bi se redovi tabele razlikovali jedan od drugog, različita nijansa se koristi kao boja pozadine za
svaki drugi red. Smanjite razliku između dve boje na minimum da biste sačuvali nežan osećaj. Boje
treba da budu slične vrednosti i niske zasićenosti – jedna treba da bude nešto tamnija ili svetlija od
druge. Često se može videti da je jedna od dve boje boja pozadine same stranice.
Obrazloženje
Svrha senčenja u svakom drugom redu je samo da pruži vizuelnu pomoć svim korisnicima da prate
red s leva na desno i nazad – bez mešanja jednog reda sa drugim. Svrha nije da se drastično promeni
dizajn tabele.
Međutim, sporedni efekat senčenja svakog drugog reda naizmeničnom bojom je da će se tabela
izdvajati od ostatka stranice.
3.2. Formatiranje podataka (Formatting Data)
3.2.1. Često postavljana pitanja (Frequently Asked Questions - FAQ)
Rezime problema
Korisnik ima pitanja u vezi sa sajtom i uslugama koje sajt nudi
Primer
https://ui-patterns.com/patterns/frequently-asked-questions-faq/examples
Upotreba
 Koristite kada korisnici obično imaju iste brige i pitanja u vezi sa uslugom.
 Koristite za prikupljanje odgovora na uobičajena pitanja koje korisnici imaju i traže od
odeljenja za podršku ili da dobiju druge vrste povratnih informacija.
Rešenje
Obezbedite prostor gde korisnici mogu da dobiju odgovore na uobičajena pitanja.
Organizujte često postavljana pitanja (FAQ) u zaseban i rutinski održavan odeljak na vašem sajtu.
Neka pitanja budu kratka, ograničena, pregledna, pretraživa i dobro organizovana i neka koriste jezik
vaših korisnika. Omogućite korisnicima da brzo procene da li se odgovor odnosi na njihovu konkretnu
situaciju i pruže jasne akcije za početak rešavanja.
Fokusirajte se na informacije
Kada su u pitanju stranice sa čestim pitanjima, vaš krajnji cilj je da omogućite korisnicima da pronađu
što lakše i brže informacije koje traže. Glavni cilj dizajna je da predstavite sadržaj na najefikasniji
mogući način. Informacije su na prvom mestu – ne dozvolite da dizajn zaseni sadržaj.
Dizajniranje dužih često postavljanih pitanja
Što je duža vaša stranica sa čestim pitanjima, to vam treba više pažnje da olakšate korisnicima da
pronađu odgovore koje traže. Postoji nekoliko dostupnih alata:
 Organizujte pitanja u kategorije. Kategorije koje odaberete zavisi od vas, međutim, vaš cilj bi
trebalo da bude da olakšate korisnicima da pronađu informacije koje traže. Učinite ih
logičnim i neka ne sadrže previše pitanja. Razmislite o pronalaženju prave kategorizacije kroz
sortiranje kartica.
 Omogućite korisnicima da pretražuju pitanja. Omogućavanje korisnicima da pretražuju
pitanja pomoći će korisnicima da brzo pregledaju moguće stotine pitanja. Međutim, reči koje
vaši korisnici biraju možda nisu one koje ste sami izabrali. Pregledajte dnevnik pretrage na
stranici sa čestim pitanjima da biste otkrili koje reči koriste vaši korisnici i koje formulacije
ima smisla da koristite.
 Prvo odredite prioritete najčešće postavljanih pitanja. Pravilo 80/20 se obično primenjuje na
najčešća pitanja: na 80% upita može da se odgovori sa 20% vaših dokumentovanih odgovora.
Razvrstavanje kartica
Dobar alat koji će vam pomoći da pronađete kategorizaciju usmerenu na korisnika je sortiranje
kartica. Sortiranje kartica će pomoći u dizajniranju i proceni vaše arhitekture informacija tako što će
korisnicima omogućiti da organizuju teme u kategorije koje imaju smisla za njih, kao i da ih
označavaju.
Neka korisnici postavljaju nova pitanja
Ako korisnik ne može da pronađe odgovor na svoje pitanje u okviru vaših čestih pitanja, verovatno će
želeti da vas pita direktno. Obezbedite način da im dozvolite da postave pitanje u slobodnom tekstu i
budite sigurni da možete brzo da odgovorite na njih.
Malo ljudi ide direktno na naslovnu stranu sa čestim pitanjima
Većina ljudi traži svoj odgovor preko pretraživača poput Gugla. Dizajnirajte svaku stranicu odgovora
tako da uključite dovoljno konteksta kao da je odredišna stranica. Poravnajte reči i fraze korišćene u
odgovoru sa onim što ljudi mogu da pretražuju na Google-u. Uverite korisnike da su došli na pravu
stranicu koja će im pomoći da dobiju odgovore na svoja pitanja: postavite ključne reči koje će
podstaći korisnike da čitaju više dok prvo skeniraju stranicu.
3.2.2. Komandna tabla (Dashboard)
Rezime problema
Korisnik želi da pregleda podatke iz više izvora odjednom.
Primer
money.cnn.com
▲ CNN Money grupiše povezane podatke na svoju kontrolnu tablu kako bi uspostavio veze između
više tačaka podataka. Svi podaci su povezani oko naslova i povezani preko titlova.
https://ui-patterns.com/patterns/dashboard/examples
Upotreba
Koristite kada želite da pružite pregled podataka na visokom nivou koji vam omogućava da otkrijete
aktuelne trendove promena podataka.
Rešenje
Obezbedite uvid u realnom vremenu u trenutno stanje najvažnijih metrika sistema.
Dizajnirajte kontrolnu tablu oko jednog cilja i dajte prioritet tim podacima.
Vrste kontrolnih tabli
Postoje 3 uobičajena tipa kontrolne table, od kojih je svaka dizajnirana za svoju specifičnu svrhu.
 Operativne kontrolne table. Prikazuje podatke koji olakšavaju svakodnevno poslovanje
preduzeća. Uobičajeni ciljevi mogu biti praćenje vremena rada servera, dnevne prodaje,
dnevnih poziva ili zakazanih termina. Operativne kontrolne table postaju srce vašeg
poslovanja i često zahtevaju podatke u realnom vremenu ili skoro u realnom vremenu.
 Strateške i izvršne kontrolne table. Prikazuje važne ključne indikatore učinka (KPI), koje
izvršni timovi prate na periodičnoj osnovi – dnevno, nedeljno ili mesečno. Strateška
kontrolna tabla se fokusira na pružanje pregleda na visokom nivou o stanju poslovanja i bavi
se ključnim promenama koje poslovanje treba da kreira. Primeri uobičajenih KPI-a mogu biti
prihod (u poređenju sa prethodnim periodom), troškovi (u poređenju sa prethodnim
periodom), tok prodaje itd.
 Analitičke kontrolne table. Prikazuje operativne ili strateške podatke – ili oboje. Analitička
kontrolna tabla će ponuditi funkciju detaljnije analize, omogućavajući korisnicima da
detaljnije istraže podatke.
Nekim tipovima korisnika može biti potrebna ili jedna od ovih vrsta kontrolne table ili čak dve. Kada
je moguće, pokušajte da razdvojite kontrolne table u više prikaza, od kojih svaki ima svoju svrhu.
Obrazloženje
Omogućite korisnicima da donose trenutne i na informacijama zasnovane odluke tako što ćete im
dozvoliti da efikasno nadgledaju glavne funkcije sistema. Stavite stavke koje zahtevaju hitnu pažnju
na vrh i pomerite manje kritične statistike na dno. Dobra kontrolna tabla je jednostavna, dobro
komunicira, ima minimum skretanja pažnje korisnika, trudi se da ne zbuni i vizuelno predstavlja
informacije tako da se lako percipiraju.
3.2.3. Okvir za kopiranje (Copy Box)
Rezime problema
Korisnici treba da lako vide i kopiraju preformatirani tekst.
Primer
https://ui-patterns.com/patterns/CopyBox/examples
Upotreba
 Koristite kada želite da prikažete formatirani tekst, koji se lako može kopirati bez gubitka
formatiranja.
 Koristi se kada treba da se prikaže demo kod.
 Koristite kada želite da predstavite informacije koje korisnik treba da kopira (i kasnije nalepi u
drugu aplikaciju).
Rešenje
Napravite okvir koji ima svoj stil u pogledu boje fonta, stila fonta i boje pozadine koji se razlikuje od
ostatka stranice.
Da biste sačuvali uvlačenje i opšte formatiranje okvira za tekst tako da izgleda kao prozor terminala ili
uređivač teksta, koristite mono-space font: font koji ima fiksnu širinu (glifovi imaju istu širinu).
Kako se umetanje teksta u neobrađeni HTML prikazuje bez preloma redova i razmaka koji se
ponavljaju, potrebno je da stavite posebne oznake oko teksta sa kojim želite da sačuvate originalno
formatiranje. Jedno rešenje je da koristite <pre> oko teksta sa kojim želite da sačuvate formatiranje –
drugo je da stavite tekst unutar <textarea>.
Obrazloženje
Ako samo nalepite tekst formatiran u ascii formatu u HTML datoteku, pretraživač korisnika će
formatirati tekst i prikazati ga sve u jednom redu i bez obzira na to kako izgleda kod u HTML datoteci
jer se u HTML-u koriste posebne oznake za definisanje preloma redova ( <br>).
3.3. Slike
3.3.1. Galerija (Gallery)
Rezime problema
Korisnik treba da pregleda kolekciju slika visokog kvaliteta
Primer
https://ui-patterns.com/patterns/Gallery/examples
Upotreba
 Koristite kada korisnik treba da pregleda niz slika jednu za drugom.
 Koristite kada korisnik želi što je moguće više prostora na ekranu za prikazivanje slika u
visokoj rezoluciji.
 Ne koristite kada je svrha da korisniku pruži brz pregled više slika u isto vreme.
Rešenje
Galerija se sastoji od više slika koje se mogu pregledati jedna po jedna kretanjem između njih. U
jednom trenutku se prikazuje samo jedna slika. Često postoji više različitih opcija za navigaciju kroz
galeriju kako bi se omogućila različita ponašanja različitim vrstama korisnika koji pretražuju galeriju.
Uobičajeno je da galerija prikazuje poziciju trenutne slike i to se prikazuje kao „Slika 2 od 18 slika“,
kraće „2 od 18“ ili samo „2/18“.
Opcije navigacije često uključuju
 Dugme za prethodnu i sledeću sliku
 Serija sličica raspoređenih na jedan od sledećih načina:
o Prethodne i sledeće slike sa vezama do ovih slika
o 2 ili 3 najbliže slike (prethodne 2 ili 3 i sledeće 2 ili 3 slike) sa vezama do ovih slika
o Lista svih slika u galeriji raspoređenih u mreži – često sa 3, 4 ili 5 slika u svakom redu.
 Tekstualni link posle teksta naslova slike koji kaže „Sledeća slika“, „Sledeća“ ili naslov sledeće
slike.
 Kartice sa brojevima slika koje povezuju svaku sliku u galeriji.
 Sam klik na trenutnu sliku ima tendenciju da dobije jedan od dva efekta: (1) Zumiranje slike ili
(2) navigacija do sledeće slike
 Osluškivanje tastera sa strelicom na tastaturi: strelica nalevo pokreće događaj „prikaži
prethodnu sliku“, strelica nadesno pokreće događaj „prikaži sledeću sliku“.
Saveti za dizajn galerije
 Navedite sličice i brojeve
Sličice omogućavaju korisniku da sazna gde se on ili ona nalazi u galeriji: kontekst trenutne
slike. Sličice takođe pružaju odličan način da zadržite korisnika u toku prelaska na sledeću
sliku; ako se slika čini zanimljivom u režimu sličica, možda vredi kliknuti.
Navođenje slika iz galerije kao brojeva omogućava brzu navigaciju. Označite trenutnu sliku da
biste obavestili korisnika gde se nalazi u galeriji.
 Odlučite se za automatsko (slideshow) ili ručno (ili oboje) prikazivanje
Galerije (ili projekcije slajdova) funkcionišu na jedan od dva načina: ili se automatski
prebacuju sa slike na sliku nakon određenog vremenskog intervala, ili su dugmad i drugi
elementi za navigaciju obezbeđeni da bi omogućili korisniku da ručno pregleda slike. Neke
galerije pružaju dugmad za pauzu i na taj način pružaju mešavinu između njih.
 Ponovo učitajte celu stranicu ili promenite samo važne delove
Novije galerije su obično zasnovane na javascript-u gde se menjaju samo slika, njen kontekst,
natpisi i komentari, za razliku od toga da se kompletna stranica ponovo učitava svaki put
kada korisnik pregleda novu sliku. Ovaj javascript način pregledavanja omogućava mnogo
bržu navigaciju između slika i pruža mnogo glatkije i prijatnije iskustvo iz perspektive
korisnika.
Obrazloženje
Galerije su u velikoj meri korišćene od strane medijskih sajtova koji se oslanjaju na utiske banera za
život kako bi dobili što više prikaza stranica od korisnika. Galerija sa 20 slika koja se prikazuje u
odvojenim prikazima stranica donosi mnogo veći povraćaj u prikazima banera nego ako imate članak
sa 20 slika jedna ispod druge. Međutim, kako javascript galerije, gde se samo deo stranice ponovo
učitava, postaju sve popularnije, dani galerije sa odvojenim učitavanjima stranica izgledaju sve više i
više zastareli. Ako i dalje ciljate na što više utisaka banera, razmislite o tome da se i baneri menjaju
svaki put kada korisnik traži novu sliku.
3.3.2. Slajder (Slideshow)
Rezime problema
Kolekcija medija treba da bude prikazana u prezentaciji kao niz nepokretnih slika.
Primer
https://ui-patterns.com/patterns/Slideshow/examples
Upotreba
Koristite kada treba da privučete pažnju koristeći više priča i minimizirate zauzeće ekrana.
Koristite kada treba da usmerite pažnju korisnika na priče koje ste istakli.
Koristite kada želite da dozvolite korisnicima da prelete kroz nekoliko priča bez da skroluju, ili koriste
druge pokrete mišem ili koriste bilo koji drugi ulazni uređaj.
Ne koristite ako želite da korisnici gledaju sve priče u isto vreme.
Čuvajte se prekomerne upotrebe i kombinacije sa drugim animacijama, jer to može dovesti do toga
da veb lokacija izgleda previše napadno i da zahteva veću pažnju korinika.
Rešenje
Slajder prikazuje nekoliko priča sa slikama, jednu po jednu. Nakon određenog vremenskog intervala,
jedna priča se zamenjuje drugom – često sa animiranim prelazom.
Prelazi (tranzicije)
Prelazi između slika su najčešće il klizni efekat, ili „izbleđivanje“ (fade). Najvažnije kod izbora načina
prelaza je da to izgleda prirodno. Animacije nikada ne bi trebalo da se koriste kao sredstvo za
prikazivanje već su tu samo da podrže upotrebljivost i razumljivost korisničkog interfejsa.
Brojevi, oznake ili sličice
Koristite brojeve, znakove za nabrajanje, kvadrate ili sličice da biste predstavili sve slike u projekciji
slajdova. Oni obezbeđuju vizuelni mehanizam za navigaciju i služe kao indikatori za viđene slajdove i
slajdove koji tek treba da se vide. Brojevi, oznake i sličice pomažu da se postave očekivanja o tome
šta će doći.
Koristite brojeve ako je važno da korisniku sada omogućite da zna tačno koliko priča ima u slajderu.
Koristite oznake (bulets) ako to nije važno, i sličice ako želite da inspirišete korisnika da preskoči
redosled priča koji ste prethodno odabrali.
Fokusirajte pažnju
Slajderi kradu pažnju korinika, naročito ako su kombinovani sa animiranim prelazima. Ako više od
jednog elementa na ekranu traži pažnju, korisnik će se izgubiti. Ako imate više elemenata koji traže
pažnju osim projekcije slajdova, projekcija slajdova će samo pomoći da se rasprši pažnja korisnika
umesto da je fokusira.
Razmislite da li će vaša projekcija slajdova predstavljati glavne i najvažnije priče vašeg sajta – ako ne,
onda izostavite projekciju slajdova. Slider usmerava pažnju na sebe. Ne preterujte sa tim.
Dugmad i oblačići
Povećajte efikasnost svoje projekcije slajdova dodavanjem dugmadi za svaku priču koja poziva na
pažnju. Dugmad pomažu korisnicima da znaju na šta da kliknu. Međutim, pazite da ne upadnete u
uobičajenu zamku jednostavnog označavanja dugmeta sa „Pročitaj više“, osim ako je to zaista jedina
radnja koju korisnik može da uradi klikom na to dugme. Tekstovi poput „Podrška“, „Doniraj“,
„Kupite“ i „Pogledajte video“ su mnogo efikasniji u navođenju korisnika da kliknu i postavljaju
očekivanja šta će korisnik time dobiti.
Navigacija
Uobičajeni elementi navigacije uključuju:
 Dugmad „Prethodno“ i „Sledeće“
 Znakovi, brojevi ili sličice
 Dugmad za oblačiće
Da korisnik u početku ne bi imao previše opcija, razmislite o skrivanju navigacionih elemenata (kao
što su dugmad „prethodno“ i „sledeće“) dok korisnik ne pređu pokazivačem miša preko slike u
slajderu. Previše opcija u početku može zbuniti korisnike i naterati ih da napuste sajt pre nego što su i
počeli da ga koriste. Otkrijte opcije tek kad se izazove interesovanje.
Cela slika ili kartice sa naslovom
Slajderi obično spadaju u jednu od sledećih kategorija:
 Slika priče ispunjava celu projekciju slajdova. Trenutna priča je predstavljena velikom slikom
koja deluje kao pozadina sa tekstom na vrhu. Ova verzija pruža najveće senzorno iskustvo jer
se fokusira na što veće slike.
 Priče u projekciji slajdova su navedene ili horizontalno ili vertikalno sa strane ili ispod ili na
vrhu slike. Ova verzija se fokusira na prenošenje naslova i teksta više nego na vizuelno čulno
iskustvo. Koristite ovaj tip ako je naslov priče toliko važan da korisnik ne može čekati da se ta
priča objavi.
Obrazloženje
Slajderi ističu nekoliko različitih priča na istom ekranu. Omogućavaju korisnicima da brzo pregledaju
priče. Slideri privlače pažnju korisnika i zadržavaju pažnju jednostavnom navigacijom, zadivljujućim
sadržajem i pozivima na akciju. Oni oštro fokusiraju pažnju korisnika na sadržaj umesto na interakciju
sa pregledačem.
3.3.3. Zumiranje slike (Image Zoom)
Rezime problema
Korisnik želi da uveća sliku da bi video detalje u višoj rezoluciji slike.
Primer
▲ U online prodavnici apple.com, odabrani proizvodi su prikazani sa funkcijom zumiranja, koja vam
omogućava da uvećate sliku proizvoda da biste videli njene detalje u većoj rezoluciji.
https://ui-patterns.com/patterns/ImageZoom/examples
Upotreba
Koristite kada normalna prikazana veličina slike nije u dovoljno visokoj rezoluciji da bi korisnik mogao
da shvati detalje na slici.
Koristite kada preuzimate pune i detaljne verzije svih slika zahteva više propusnog opsega.
Koristite kada se prikazuje puna i detaljna verzija slike koja se ne uklapa u dizajn veb lokacije.
Koristite kada će prikaz pune veličine i detaljne verzije slike će sprečiti korisnika da dobije predstavu o
celini slike.
Koristite kada se pri preuzimanju pune veličine i detaljne verzije slike oduzima korisniku
neproporcionalno mnogo vremena u poređenju sa tim šta dobija. Prikažite slike u visokoj rezoluciji
samo kada su zatražene jer sve slike možda neće biti podjednako interesantne za korisnika.
Rešenje
Obezbedite mehanizam koji omogućava korisniku da zumira sliku da bi video njene detalje.
Sa stanovišta servera, važno je da se slike visoke rezolucije unapred ne učitavaju pre nego što se
zatraže. Ovo će pomoći u uštedi propusnog opsega.
Intuitivan način da se ovo uradi je da se omogući korisniku da klikne na tačku na datoj slici. Kako
korisnik klikne na sliku za zumiranje, unapred se učitava slika veće rezolucije.
Obezbedite grafiku ili tekst o zumiranju slike; gola slika sama po sebi neće sugerisati korisniku
funkcionalnost zumiranja.
Obrazloženje
Omogućavanje korisniku da uveća sliku omogućava istraživanje detalja slike. U zavisnosti od faktora
zumiranja, prikazivanje cele slike visoke rezolucije od početka neće pružiti korisniku pregled cele
slike.
Pružajući funkciju zumiranja, korisnik može da zumira samo jednu oblast slike koja ga zanima. Na taj
način korisniku ne smetaju ostali detalji.
3.4. Pretraživanje (Search)
3.4.1. Automatsko dovršavanje (Autocomplete)
Rezime problema
Korisniku je potrebna pomoć u pretrazi sa prepoznavanjem - kada obavlja zadatke pretrage koje je
teško zapamtiti ili lako pogrešno otkucati traženi pojam.
Primer
google.com
▲ Klasični predlozi za automatsko dovršavanje na google.com
https://ui-patterns.com/patterns/Autocomplete/examples
Upotreba
 Koristite za pomoć u rešavanju nejasnoća, kada se stavka može uneti na više načina
 Koristite kada se tip unetih informacija može lako upariti sa određenim informacijama u
sistemu. Na primer, korisnik se možda ne seća kako se piše „Amorfno“, ali može da unese
prva 3 slova i pronađe reč sa liste za automatsko dovršavanje.
 Koristite kada se predlozi za automatsko dovršavanje mogu izvući iz skupa podataka kojima je
moguće upravljati po veličini.
 Koristite kada je brzina unosa važan cilj.
 Koristite kada je tačnost unosa važan cilj.
 Koristite kada bi broj stavki bio prevelik ili nezgodan za prikaz u standardnom padajućem
okviru.
 Ne koristite ako želite da pružite korisniku pregled svih dostupnih opcija.
Rešenje
Predložite moguća podudaranja za pretragu dok korisnici kucaju.
Obrazac za automatsko dovršavanje je prediktivni mehanizam zasnovan na prepoznavanju koji se
koristi za pomoć korisnicima pri pretraživanju. Polje za pretragu za automatsko dovršavanje
predstavlja stavke koje odgovaraju unosu korisnika dok kucaju. Kako korisnik unese više teksta u
polje za pretragu, lista odgovarajućih stavki se sužava.
Lista odgovarajućih stavki mora omogućiti korisnicima da izaberu stavke pomoću uređaja za unos kao
što su navigacija sa strelicama na tastaturi, dodir i klik mišem. Ovo omogućava korisniku da brzo
izabere termin bez potrebe da ukuca ceo termin. Naziv šablona potiče od ideje da sistem završava
vašu pretragu. Ograničite broj odgovarajućih stavki za prikaz kada radite sa velikim skupom podataka.
Standardno ograničenje je 10 odgovarajućih stavki.
Poređajte odgovarajuće stavke prema relevantnosti sa najrelevantnijim ili najverovatnijim
podudaranjem na vrhu liste. Ovo će omogućiti korisniku da brzo odabere svoje podudaranje.
Neke implementacije automatskog dovršavanja grupišu odgovarajuće stavke u kategorije.
Detalji implementacije
Obrazac autodovršavanja se koristi u kombinaciji sa standardnim okvirom za unos teksta koji je
označen tako da odgovara korisnikovim očekivanjima o tome koje polje će se pretraživati.
Dok korisnik unosi podatke, prikazuje se lista predloženih stavki koje odgovaraju unesenim podacima.
Kako se unosi više teksta, prikazana lista se ažurira tako da odgovara upitu – sužavajući podudarne
stavke.
Lista predloženih stavki se najčešće prikazuje direktno ispod okvira za unos teksta i ima širinu koja
odgovara širini okvira za tekst.
Dozvolite korisniku da otkaže listu predloženih stavki pritiskom na taster ESC. Pritiskom na taster ESC
zatvara se lista predloženih stavki, ali ako unesete više znakova nakon pritiska tastera ESC ponovo će
pokrenuti ponašanje automatskog dovršavanja.
Obrazloženje
Obrazac za automatsko dovršavanje omogućava brži unos, smanjuje broj potrebnih pritisaka na
tastere, sprečava greške pri kucanju i pruža povratne informacije o validnosti onoga što se unosi.
Takođe omogućava dizajnerima da uključe duže liste koje korisnici mogu da biraju, a da ne zauzimaju
dodatni prostor na ekranu.
Smanjuje se broj pritisaka na tastere i time omogućava brži unos podataka. Zamorni, dugi i
komplikovani upiti, kao što su adrese e-pošte ili imena aerodroma, mogu se pronaći i izabrati sa samo
nekoliko pritisaka na taster.
Dodatno formatiranje predloga za pretragu može pomoći u uklanjanju dvosmislenosti. Ako tražim
aerodrom u Londonu, dodatno formatiranje mi može reći da li biram aerodrome Hitrou ili Standsted.
Automatsko dovršavanje obezbeđuje povratnu petlju koja neprekidno omogućava korisniku da suzi
unos ispravnog izbora.
Kognitivni opterećenje pamćenja tačne tekstualne fraze je olakšano, jer korisnik može da koristi
obrazac za autodovršavanje da bi uneo samo detalje koje on ili ona pamti. Ako korisnik traži imejl za
koji može da zapamti samo ime domena, on ili ona mogu jednostavno da unesu ime domena gde se
sve poruke e-pošte sa tim imenom domena prikazuju za izbor.
Obrazac autodovršavanja se oslanja na princip prepoznavanja umesto prisećanja. Umesto da mora da
se seti celog i tačnog tekstualnog upita, korisnik može da počne da kuca delove upita kojih se seća, i
da se zauzvrat osloni na prepoznavanje da bi izabrao najbolje podudaranje.
Diskusija
Prilikom uparivanja na velikim skupovima podataka, ključno je da prikazana podudaranja budu bliska
onome što korisnik traži.
Gugl rešava ovaj problem tako što rangira podudaranja prema broju puta pretraživanja svakog upita.
Apple rešava problem u Spotlight-u (aplikacija za radnu površinu za pretragu stavki na računaru)
rangiranjem odgovarajućih stavki prema broju puta kada je stavka izabrana kada je unet tačan upit.
3.4.2. Filteri pretraživanja (Search Filters)
Rezime problema
Korisnici treba da izvrše pretragu koristeći kontekstualne filtere koji sužavaju rezultate pretrage.
Primer
volksvagen.co.uk
▲ Volksvagen vam omogućava da precizirate pretragu kroz različite filtere za pretragu.
https://ui-patterns.com/patterns/LiveFilter/examples
Upotreba
Koristite kada su rezultati pretrage za neki upit veoma brojni i njihovo pregledavanje bi oduzelo
mnogo vremena.
Koristite kada se rezultati pretrage mogu kategorisati u filtere: pretraga mora biti kontekstualna.
Ne koristite kada vašu pretraga nije lako kategorisati u filtere.
Rešenje
Precizirajte rezultate pretrage u realnom vremenu koristeći jedan ili više filtera.
Predstavite sve što je dostupno, a zatim podstaknite korisnika da postepeno uklanja ono što mu nije
potrebno primenom jednog ili više filtera. Koristite ovaj obrazac samo kada pomaže da se
pojednostavi iskustvo pretrage.
Predstavite korisniku listu kategorije filtera i dozvolite korisniku da filtrira umetanjem unosa u okvire
za tekst, biranjem opcija u padajućim okvirima ili čak preko polja za potvrdu (checkbox) ili radio
dugmadi. Kad god korisnik izvrši promenu u bilo kom od polja za unos, rezultati se automatski
ažuriraju.
Obrazloženje
Sa običnom pretragom počinjete ni od čega, a potencijalno i završavate bez ičega. Nasuprot ovom
pristupu je filtriranje, gde predstavljamo sve što je dostupno, a zatim podstičemo korisnika da
progresivno uklanja ono što mu nije potrebno.
Korišćenje obrasca filtera pretrage pomera pretragu sa monologa na razgovor. Korisnik može
postepeno da uklanja ono što mu nije potrebno korak po korak i da odmah dobija povratnu
informaciju.
Kada procenjujete da li da koristite ovaj filter, razmislite da li obrazac komplikuje ili pojednostavljuje
pretragu. Ako radi bilo šta drugo osim što pojednostavljuje pronalaženje tačnog rezultata pretrage,
izaberite neko drugo rešenje.

More Related Content

Similar to Interfejsni obrasci - Opsti-3-Podaci.pdf

R2 MS Excel - Rad sa imenovanim grupama ćelija u Excel-u - Nikola Lazić
R2 MS Excel - Rad sa imenovanim grupama ćelija u Excel-u - Nikola LazićR2 MS Excel - Rad sa imenovanim grupama ćelija u Excel-u - Nikola Lazić
R2 MS Excel - Rad sa imenovanim grupama ćelija u Excel-u - Nikola LazićNašaŠkola.Net
 
Interfejsni obrasci - Opsti-1-Unos--.pdf
Interfejsni obrasci - Opsti-1-Unos--.pdfInterfejsni obrasci - Opsti-1-Unos--.pdf
Interfejsni obrasci - Opsti-1-Unos--.pdfAleksandarSpasic5
 
R4 DB - Kreiranje baze podataka u Access-u - Jelena Kričak
R4 DB - Kreiranje baze podataka u Access-u - Jelena KričakR4 DB - Kreiranje baze podataka u Access-u - Jelena Kričak
R4 DB - Kreiranje baze podataka u Access-u - Jelena KričakNašaŠkola.Net
 
Izvedene tabele Tamara Krsic
Izvedene tabele Tamara KrsicIzvedene tabele Tamara Krsic
Izvedene tabele Tamara KrsicDejan Pejčić
 
Nasa skola 2011: Baze podataka - Stefan Nikolic -Silvana Ivkovic
Nasa skola 2011: Baze podataka - Stefan Nikolic -Silvana IvkovicNasa skola 2011: Baze podataka - Stefan Nikolic -Silvana Ivkovic
Nasa skola 2011: Baze podataka - Stefan Nikolic -Silvana IvkovicNašaŠkola.Net
 
Akcioni upiti u Access-u - Stevan Savić - Dejan Pejčić
Akcioni upiti u Access-u - Stevan Savić - Dejan Pejčić  Akcioni upiti u Access-u - Stevan Savić - Dejan Pejčić
Akcioni upiti u Access-u - Stevan Savić - Dejan Pejčić nasaskolatakmicenja
 
Uputstvo access2007
Uputstvo access2007Uputstvo access2007
Uputstvo access2007damirdak
 
02 uvod u tabele
02 uvod u tabele02 uvod u tabele
02 uvod u tabeleradebp
 
R2 MS Excel - Izvedene tabele - Tamara Kršić
R2 MS Excel - Izvedene tabele - Tamara KršićR2 MS Excel - Izvedene tabele - Tamara Kršić
R2 MS Excel - Izvedene tabele - Tamara KršićNašaŠkola.Net
 
Excel 2010 promotivno_poglavlje
Excel 2010 promotivno_poglavljeExcel 2010 promotivno_poglavlje
Excel 2010 promotivno_poglavljeAntal Franyó
 
Графички приказ података
Графички приказ податакаГрафички приказ података
Графички приказ податакаstojanovicsuzana
 

Similar to Interfejsni obrasci - Opsti-3-Podaci.pdf (14)

R2 MS Excel - Rad sa imenovanim grupama ćelija u Excel-u - Nikola Lazić
R2 MS Excel - Rad sa imenovanim grupama ćelija u Excel-u - Nikola LazićR2 MS Excel - Rad sa imenovanim grupama ćelija u Excel-u - Nikola Lazić
R2 MS Excel - Rad sa imenovanim grupama ćelija u Excel-u - Nikola Lazić
 
Interfejsni obrasci - Opsti-1-Unos--.pdf
Interfejsni obrasci - Opsti-1-Unos--.pdfInterfejsni obrasci - Opsti-1-Unos--.pdf
Interfejsni obrasci - Opsti-1-Unos--.pdf
 
1.BAZE PODATAKA VIII
1.BAZE PODATAKA VIII1.BAZE PODATAKA VIII
1.BAZE PODATAKA VIII
 
R4 DB - Kreiranje baze podataka u Access-u - Jelena Kričak
R4 DB - Kreiranje baze podataka u Access-u - Jelena KričakR4 DB - Kreiranje baze podataka u Access-u - Jelena Kričak
R4 DB - Kreiranje baze podataka u Access-u - Jelena Kričak
 
Izvedene tabele Tamara Krsic
Izvedene tabele Tamara KrsicIzvedene tabele Tamara Krsic
Izvedene tabele Tamara Krsic
 
Nasa skola 2011: Baze podataka - Stefan Nikolic -Silvana Ivkovic
Nasa skola 2011: Baze podataka - Stefan Nikolic -Silvana IvkovicNasa skola 2011: Baze podataka - Stefan Nikolic -Silvana Ivkovic
Nasa skola 2011: Baze podataka - Stefan Nikolic -Silvana Ivkovic
 
Akcioni upiti u Access-u - Stevan Savić - Dejan Pejčić
Akcioni upiti u Access-u - Stevan Savić - Dejan Pejčić  Akcioni upiti u Access-u - Stevan Savić - Dejan Pejčić
Akcioni upiti u Access-u - Stevan Savić - Dejan Pejčić
 
Uputstvo access2007
Uputstvo access2007Uputstvo access2007
Uputstvo access2007
 
Stilovi u word_u
Stilovi u word_uStilovi u word_u
Stilovi u word_u
 
02 uvod u tabele
02 uvod u tabele02 uvod u tabele
02 uvod u tabele
 
R2 MS Excel - Izvedene tabele - Tamara Kršić
R2 MS Excel - Izvedene tabele - Tamara KršićR2 MS Excel - Izvedene tabele - Tamara Kršić
R2 MS Excel - Izvedene tabele - Tamara Kršić
 
Excel 2010 promotivno_poglavlje
Excel 2010 promotivno_poglavljeExcel 2010 promotivno_poglavlje
Excel 2010 promotivno_poglavlje
 
IT6-L6.pptx
IT6-L6.pptxIT6-L6.pptx
IT6-L6.pptx
 
Графички приказ података
Графички приказ податакаГрафички приказ података
Графички приказ података
 

More from AleksandarSpasic5 (20)

OIR11-L4.pptx
OIR11-L4.pptxOIR11-L4.pptx
OIR11-L4.pptx
 
OIR11-L3.pptx
OIR11-L3.pptxOIR11-L3.pptx
OIR11-L3.pptx
 
OIR11-L2.pptx
OIR11-L2.pptxOIR11-L2.pptx
OIR11-L2.pptx
 
OIR11-L1.pptx
OIR11-L1.pptxOIR11-L1.pptx
OIR11-L1.pptx
 
OIR-V8.pptx
OIR-V8.pptxOIR-V8.pptx
OIR-V8.pptx
 
OIR10-L5.pptx
OIR10-L5.pptxOIR10-L5.pptx
OIR10-L5.pptx
 
OIR10-L4.pptx
OIR10-L4.pptxOIR10-L4.pptx
OIR10-L4.pptx
 
OIR10-L3.pptx
OIR10-L3.pptxOIR10-L3.pptx
OIR10-L3.pptx
 
OIR10-L2.pptx
OIR10-L2.pptxOIR10-L2.pptx
OIR10-L2.pptx
 
OIR10-L1.pptx
OIR10-L1.pptxOIR10-L1.pptx
OIR10-L1.pptx
 
OIR-V7.pptx
OIR-V7.pptxOIR-V7.pptx
OIR-V7.pptx
 
OIR9-L3.pptx
OIR9-L3.pptxOIR9-L3.pptx
OIR9-L3.pptx
 
OIR9-L2.pptx
OIR9-L2.pptxOIR9-L2.pptx
OIR9-L2.pptx
 
OIR9-L1.pptx
OIR9-L1.pptxOIR9-L1.pptx
OIR9-L1.pptx
 
OIR-V6.pptx
OIR-V6.pptxOIR-V6.pptx
OIR-V6.pptx
 
OIR-V5.pptx
OIR-V5.pptxOIR-V5.pptx
OIR-V5.pptx
 
OIR8-L1.pptx
OIR8-L1.pptxOIR8-L1.pptx
OIR8-L1.pptx
 
OIR8-L2.pptx
OIR8-L2.pptxOIR8-L2.pptx
OIR8-L2.pptx
 
OIR8-L3.pptx
OIR8-L3.pptxOIR8-L3.pptx
OIR8-L3.pptx
 
OIR8-L4.pptx
OIR8-L4.pptxOIR8-L4.pptx
OIR8-L4.pptx
 

Interfejsni obrasci - Opsti-3-Podaci.pdf

  • 1. Opšti interfejsni obrasci 3. Rad sa podacima (Tabele, Formatiranje podataka, Slike, Pretraga) Podaci se mogu pretraživati, formatirati i pregledati na različite načine. Tabele (Table)  Tabelarni filter (Table Filter)  Sortiraj po koloni (Sort by Column)  Naizmenične boje redova (Alternating Row Colors) Formatiranje podataka  Često postavljana pitanja (Frequently Asked Questions - FAQ)  Komandna tabla (Dashboard)  Okvir za kopiranje (Copy Box) Slike  Galerija (Gallery)  Slajder (Slideshow)  Zumiranje slike (Image Zoom) Pretraživanje (Search)  Automatsko dovršavanje (Autocomplete)  Filteri pretraživanja (Search Filters) 3.1. Tabele (Table) 3.1.1. Tabelarni filter (Table Filter) Rezime problema Korisnik treba da prema kategorijama filtrira podatke prikazane u tabelama po kolonama. Primer
  • 2. https://ui-patterns.com/patterns/TableFilter/examples Upotreba Koristite kada imate veoma veliki skup rezultata koji je prevelik da bi se prikazao na jednoj stranici Koristi se kada se jedna ili više kolona tabele može lako sažeti u kategorije po kojima se filtriraju. Rešenje Obezbedite padajuće ulaze koji predstavljaju kategorije prema kojima korisnik može da filtrira skup podataka. Kada korisnik odabere kategoriju i klikne na „Filter“ ili nešto slično (kada korisnik pošalje obrazac), prikazuje se samo red koji pripada izabranoj kategoriji. Opciono, može se dodati više filtera. Ako se odabere ovo rešenje, morate biti svesni da ažurirate kategorije svakog padajućeg okvira u skladu sa tim kada se izabere jedna kategorija – pošto izbor vrednosti u jednoj kategoriji može smanjiti preostale opcije u drugoj. Obrazloženje Dodavanje filtera u vaše tabele omogućava korisniku da smanji količinu prikazanih stavki. Filteri pomažu da se suze rezultati pretrage, omogućavajući korisniku da pronađe tačnije rezultate. 3.1.2. Sortiraj po koloni (Sort By Column) Rezime problema Korisnik treba da bude u stanju da sortira podatke u tabeli prema vrednostima kolone. Primer
  • 3. https://ui-patterns.com/patterns/SortByColumn/examples Upotreba  Koristi se kada u tabeli ima mnogo redova (iznad 10), a teško je izdvojiti jedan red i njegovu vezu sa drugim redovima.  Koristite kada tabela koristi paginaciju i podaci obuhvataju više stranica.  Koristite kada želite da možete da uporedite redove u tabeli – na primer brojeve.  Ne koristite ako je broj redova mali i tabelu je lako pretraživati ili skenirati. Rešenje Proširite funkcionalnost tabele tako da svaki naslov kolone tabele bude veza. Kada se klikne na naslov, redovi u tabeli su poređani uzlazno prema vrednostima određene kolone. Ako se ponovo klikne na isti naslov oznake, redosled je obrnut: redovi u tabeli su poređani opadajući prema vrednostima određene kolone. Kada su redovi tabele sortirani prema određenoj koloni, strelica se često prikazuje pored zaglavlja kolone koja označava pravac u kome su redovi sortirani. Naslov kolone je često predstavljen drugom bojom fonta ili težinom fonta (podebljano/obično ) da označi da je naručivanje izvršeno. Obrazloženje Obrazac pruža jednostavan način za organizovanje i upoređivanje podataka u tabeli. Štaviše, obrazac je takođe dobro poznat iz desktop aplikacija koje se bave redovima podataka. 3.1.3. Naizmenične boje redova (Alternating Row Colors) Rezime problema Korisnik treba da vizuelno odvoji redove sličnog izgleda u tabeli, kako bi mogao da prati vrednosti svakog reda. Primer
  • 4. https://ui-patterns.com/patterns/AlternatingRowColors/examples Upotreba  Koristite kada imate nekoliko kolona u tabeli  Koristite kada su sadržaji kolona često slične prirode  Koristite kada postoji više linija za svaki red  Koristite kada visina svakog reda varira Rešenje Da bi se redovi tabele razlikovali jedan od drugog, različita nijansa se koristi kao boja pozadine za svaki drugi red. Smanjite razliku između dve boje na minimum da biste sačuvali nežan osećaj. Boje treba da budu slične vrednosti i niske zasićenosti – jedna treba da bude nešto tamnija ili svetlija od druge. Često se može videti da je jedna od dve boje boja pozadine same stranice. Obrazloženje Svrha senčenja u svakom drugom redu je samo da pruži vizuelnu pomoć svim korisnicima da prate red s leva na desno i nazad – bez mešanja jednog reda sa drugim. Svrha nije da se drastično promeni dizajn tabele. Međutim, sporedni efekat senčenja svakog drugog reda naizmeničnom bojom je da će se tabela izdvajati od ostatka stranice. 3.2. Formatiranje podataka (Formatting Data)
  • 5. 3.2.1. Često postavljana pitanja (Frequently Asked Questions - FAQ) Rezime problema Korisnik ima pitanja u vezi sa sajtom i uslugama koje sajt nudi Primer https://ui-patterns.com/patterns/frequently-asked-questions-faq/examples Upotreba  Koristite kada korisnici obično imaju iste brige i pitanja u vezi sa uslugom.  Koristite za prikupljanje odgovora na uobičajena pitanja koje korisnici imaju i traže od odeljenja za podršku ili da dobiju druge vrste povratnih informacija. Rešenje Obezbedite prostor gde korisnici mogu da dobiju odgovore na uobičajena pitanja. Organizujte često postavljana pitanja (FAQ) u zaseban i rutinski održavan odeljak na vašem sajtu. Neka pitanja budu kratka, ograničena, pregledna, pretraživa i dobro organizovana i neka koriste jezik vaših korisnika. Omogućite korisnicima da brzo procene da li se odgovor odnosi na njihovu konkretnu situaciju i pruže jasne akcije za početak rešavanja. Fokusirajte se na informacije Kada su u pitanju stranice sa čestim pitanjima, vaš krajnji cilj je da omogućite korisnicima da pronađu što lakše i brže informacije koje traže. Glavni cilj dizajna je da predstavite sadržaj na najefikasniji mogući način. Informacije su na prvom mestu – ne dozvolite da dizajn zaseni sadržaj. Dizajniranje dužih često postavljanih pitanja Što je duža vaša stranica sa čestim pitanjima, to vam treba više pažnje da olakšate korisnicima da pronađu odgovore koje traže. Postoji nekoliko dostupnih alata:
  • 6.  Organizujte pitanja u kategorije. Kategorije koje odaberete zavisi od vas, međutim, vaš cilj bi trebalo da bude da olakšate korisnicima da pronađu informacije koje traže. Učinite ih logičnim i neka ne sadrže previše pitanja. Razmislite o pronalaženju prave kategorizacije kroz sortiranje kartica.  Omogućite korisnicima da pretražuju pitanja. Omogućavanje korisnicima da pretražuju pitanja pomoći će korisnicima da brzo pregledaju moguće stotine pitanja. Međutim, reči koje vaši korisnici biraju možda nisu one koje ste sami izabrali. Pregledajte dnevnik pretrage na stranici sa čestim pitanjima da biste otkrili koje reči koriste vaši korisnici i koje formulacije ima smisla da koristite.  Prvo odredite prioritete najčešće postavljanih pitanja. Pravilo 80/20 se obično primenjuje na najčešća pitanja: na 80% upita može da se odgovori sa 20% vaših dokumentovanih odgovora. Razvrstavanje kartica Dobar alat koji će vam pomoći da pronađete kategorizaciju usmerenu na korisnika je sortiranje kartica. Sortiranje kartica će pomoći u dizajniranju i proceni vaše arhitekture informacija tako što će korisnicima omogućiti da organizuju teme u kategorije koje imaju smisla za njih, kao i da ih označavaju. Neka korisnici postavljaju nova pitanja Ako korisnik ne može da pronađe odgovor na svoje pitanje u okviru vaših čestih pitanja, verovatno će želeti da vas pita direktno. Obezbedite način da im dozvolite da postave pitanje u slobodnom tekstu i budite sigurni da možete brzo da odgovorite na njih. Malo ljudi ide direktno na naslovnu stranu sa čestim pitanjima Većina ljudi traži svoj odgovor preko pretraživača poput Gugla. Dizajnirajte svaku stranicu odgovora tako da uključite dovoljno konteksta kao da je odredišna stranica. Poravnajte reči i fraze korišćene u odgovoru sa onim što ljudi mogu da pretražuju na Google-u. Uverite korisnike da su došli na pravu stranicu koja će im pomoći da dobiju odgovore na svoja pitanja: postavite ključne reči koje će podstaći korisnike da čitaju više dok prvo skeniraju stranicu. 3.2.2. Komandna tabla (Dashboard) Rezime problema Korisnik želi da pregleda podatke iz više izvora odjednom. Primer
  • 7. money.cnn.com ▲ CNN Money grupiše povezane podatke na svoju kontrolnu tablu kako bi uspostavio veze između više tačaka podataka. Svi podaci su povezani oko naslova i povezani preko titlova. https://ui-patterns.com/patterns/dashboard/examples Upotreba Koristite kada želite da pružite pregled podataka na visokom nivou koji vam omogućava da otkrijete aktuelne trendove promena podataka. Rešenje Obezbedite uvid u realnom vremenu u trenutno stanje najvažnijih metrika sistema. Dizajnirajte kontrolnu tablu oko jednog cilja i dajte prioritet tim podacima. Vrste kontrolnih tabli Postoje 3 uobičajena tipa kontrolne table, od kojih je svaka dizajnirana za svoju specifičnu svrhu.  Operativne kontrolne table. Prikazuje podatke koji olakšavaju svakodnevno poslovanje preduzeća. Uobičajeni ciljevi mogu biti praćenje vremena rada servera, dnevne prodaje, dnevnih poziva ili zakazanih termina. Operativne kontrolne table postaju srce vašeg poslovanja i često zahtevaju podatke u realnom vremenu ili skoro u realnom vremenu.  Strateške i izvršne kontrolne table. Prikazuje važne ključne indikatore učinka (KPI), koje izvršni timovi prate na periodičnoj osnovi – dnevno, nedeljno ili mesečno. Strateška kontrolna tabla se fokusira na pružanje pregleda na visokom nivou o stanju poslovanja i bavi se ključnim promenama koje poslovanje treba da kreira. Primeri uobičajenih KPI-a mogu biti prihod (u poređenju sa prethodnim periodom), troškovi (u poređenju sa prethodnim periodom), tok prodaje itd.
  • 8.  Analitičke kontrolne table. Prikazuje operativne ili strateške podatke – ili oboje. Analitička kontrolna tabla će ponuditi funkciju detaljnije analize, omogućavajući korisnicima da detaljnije istraže podatke. Nekim tipovima korisnika može biti potrebna ili jedna od ovih vrsta kontrolne table ili čak dve. Kada je moguće, pokušajte da razdvojite kontrolne table u više prikaza, od kojih svaki ima svoju svrhu. Obrazloženje Omogućite korisnicima da donose trenutne i na informacijama zasnovane odluke tako što ćete im dozvoliti da efikasno nadgledaju glavne funkcije sistema. Stavite stavke koje zahtevaju hitnu pažnju na vrh i pomerite manje kritične statistike na dno. Dobra kontrolna tabla je jednostavna, dobro komunicira, ima minimum skretanja pažnje korisnika, trudi se da ne zbuni i vizuelno predstavlja informacije tako da se lako percipiraju. 3.2.3. Okvir za kopiranje (Copy Box) Rezime problema Korisnici treba da lako vide i kopiraju preformatirani tekst. Primer https://ui-patterns.com/patterns/CopyBox/examples Upotreba  Koristite kada želite da prikažete formatirani tekst, koji se lako može kopirati bez gubitka formatiranja.  Koristi se kada treba da se prikaže demo kod.  Koristite kada želite da predstavite informacije koje korisnik treba da kopira (i kasnije nalepi u drugu aplikaciju). Rešenje Napravite okvir koji ima svoj stil u pogledu boje fonta, stila fonta i boje pozadine koji se razlikuje od ostatka stranice.
  • 9. Da biste sačuvali uvlačenje i opšte formatiranje okvira za tekst tako da izgleda kao prozor terminala ili uređivač teksta, koristite mono-space font: font koji ima fiksnu širinu (glifovi imaju istu širinu). Kako se umetanje teksta u neobrađeni HTML prikazuje bez preloma redova i razmaka koji se ponavljaju, potrebno je da stavite posebne oznake oko teksta sa kojim želite da sačuvate originalno formatiranje. Jedno rešenje je da koristite <pre> oko teksta sa kojim želite da sačuvate formatiranje – drugo je da stavite tekst unutar <textarea>. Obrazloženje Ako samo nalepite tekst formatiran u ascii formatu u HTML datoteku, pretraživač korisnika će formatirati tekst i prikazati ga sve u jednom redu i bez obzira na to kako izgleda kod u HTML datoteci jer se u HTML-u koriste posebne oznake za definisanje preloma redova ( <br>). 3.3. Slike 3.3.1. Galerija (Gallery) Rezime problema Korisnik treba da pregleda kolekciju slika visokog kvaliteta Primer https://ui-patterns.com/patterns/Gallery/examples
  • 10. Upotreba  Koristite kada korisnik treba da pregleda niz slika jednu za drugom.  Koristite kada korisnik želi što je moguće više prostora na ekranu za prikazivanje slika u visokoj rezoluciji.  Ne koristite kada je svrha da korisniku pruži brz pregled više slika u isto vreme. Rešenje Galerija se sastoji od više slika koje se mogu pregledati jedna po jedna kretanjem između njih. U jednom trenutku se prikazuje samo jedna slika. Često postoji više različitih opcija za navigaciju kroz galeriju kako bi se omogućila različita ponašanja različitim vrstama korisnika koji pretražuju galeriju. Uobičajeno je da galerija prikazuje poziciju trenutne slike i to se prikazuje kao „Slika 2 od 18 slika“, kraće „2 od 18“ ili samo „2/18“. Opcije navigacije često uključuju  Dugme za prethodnu i sledeću sliku  Serija sličica raspoređenih na jedan od sledećih načina: o Prethodne i sledeće slike sa vezama do ovih slika o 2 ili 3 najbliže slike (prethodne 2 ili 3 i sledeće 2 ili 3 slike) sa vezama do ovih slika o Lista svih slika u galeriji raspoređenih u mreži – često sa 3, 4 ili 5 slika u svakom redu.  Tekstualni link posle teksta naslova slike koji kaže „Sledeća slika“, „Sledeća“ ili naslov sledeće slike.  Kartice sa brojevima slika koje povezuju svaku sliku u galeriji.  Sam klik na trenutnu sliku ima tendenciju da dobije jedan od dva efekta: (1) Zumiranje slike ili (2) navigacija do sledeće slike  Osluškivanje tastera sa strelicom na tastaturi: strelica nalevo pokreće događaj „prikaži prethodnu sliku“, strelica nadesno pokreće događaj „prikaži sledeću sliku“. Saveti za dizajn galerije  Navedite sličice i brojeve Sličice omogućavaju korisniku da sazna gde se on ili ona nalazi u galeriji: kontekst trenutne slike. Sličice takođe pružaju odličan način da zadržite korisnika u toku prelaska na sledeću sliku; ako se slika čini zanimljivom u režimu sličica, možda vredi kliknuti. Navođenje slika iz galerije kao brojeva omogućava brzu navigaciju. Označite trenutnu sliku da biste obavestili korisnika gde se nalazi u galeriji.  Odlučite se za automatsko (slideshow) ili ručno (ili oboje) prikazivanje Galerije (ili projekcije slajdova) funkcionišu na jedan od dva načina: ili se automatski prebacuju sa slike na sliku nakon određenog vremenskog intervala, ili su dugmad i drugi elementi za navigaciju obezbeđeni da bi omogućili korisniku da ručno pregleda slike. Neke galerije pružaju dugmad za pauzu i na taj način pružaju mešavinu između njih.  Ponovo učitajte celu stranicu ili promenite samo važne delove Novije galerije su obično zasnovane na javascript-u gde se menjaju samo slika, njen kontekst, natpisi i komentari, za razliku od toga da se kompletna stranica ponovo učitava svaki put kada korisnik pregleda novu sliku. Ovaj javascript način pregledavanja omogućava mnogo bržu navigaciju između slika i pruža mnogo glatkije i prijatnije iskustvo iz perspektive korisnika. Obrazloženje
  • 11. Galerije su u velikoj meri korišćene od strane medijskih sajtova koji se oslanjaju na utiske banera za život kako bi dobili što više prikaza stranica od korisnika. Galerija sa 20 slika koja se prikazuje u odvojenim prikazima stranica donosi mnogo veći povraćaj u prikazima banera nego ako imate članak sa 20 slika jedna ispod druge. Međutim, kako javascript galerije, gde se samo deo stranice ponovo učitava, postaju sve popularnije, dani galerije sa odvojenim učitavanjima stranica izgledaju sve više i više zastareli. Ako i dalje ciljate na što više utisaka banera, razmislite o tome da se i baneri menjaju svaki put kada korisnik traži novu sliku. 3.3.2. Slajder (Slideshow) Rezime problema Kolekcija medija treba da bude prikazana u prezentaciji kao niz nepokretnih slika. Primer https://ui-patterns.com/patterns/Slideshow/examples Upotreba Koristite kada treba da privučete pažnju koristeći više priča i minimizirate zauzeće ekrana. Koristite kada treba da usmerite pažnju korisnika na priče koje ste istakli. Koristite kada želite da dozvolite korisnicima da prelete kroz nekoliko priča bez da skroluju, ili koriste druge pokrete mišem ili koriste bilo koji drugi ulazni uređaj. Ne koristite ako želite da korisnici gledaju sve priče u isto vreme. Čuvajte se prekomerne upotrebe i kombinacije sa drugim animacijama, jer to može dovesti do toga da veb lokacija izgleda previše napadno i da zahteva veću pažnju korinika. Rešenje
  • 12. Slajder prikazuje nekoliko priča sa slikama, jednu po jednu. Nakon određenog vremenskog intervala, jedna priča se zamenjuje drugom – često sa animiranim prelazom. Prelazi (tranzicije) Prelazi između slika su najčešće il klizni efekat, ili „izbleđivanje“ (fade). Najvažnije kod izbora načina prelaza je da to izgleda prirodno. Animacije nikada ne bi trebalo da se koriste kao sredstvo za prikazivanje već su tu samo da podrže upotrebljivost i razumljivost korisničkog interfejsa. Brojevi, oznake ili sličice Koristite brojeve, znakove za nabrajanje, kvadrate ili sličice da biste predstavili sve slike u projekciji slajdova. Oni obezbeđuju vizuelni mehanizam za navigaciju i služe kao indikatori za viđene slajdove i slajdove koji tek treba da se vide. Brojevi, oznake i sličice pomažu da se postave očekivanja o tome šta će doći. Koristite brojeve ako je važno da korisniku sada omogućite da zna tačno koliko priča ima u slajderu. Koristite oznake (bulets) ako to nije važno, i sličice ako želite da inspirišete korisnika da preskoči redosled priča koji ste prethodno odabrali. Fokusirajte pažnju Slajderi kradu pažnju korinika, naročito ako su kombinovani sa animiranim prelazima. Ako više od jednog elementa na ekranu traži pažnju, korisnik će se izgubiti. Ako imate više elemenata koji traže pažnju osim projekcije slajdova, projekcija slajdova će samo pomoći da se rasprši pažnja korisnika umesto da je fokusira. Razmislite da li će vaša projekcija slajdova predstavljati glavne i najvažnije priče vašeg sajta – ako ne, onda izostavite projekciju slajdova. Slider usmerava pažnju na sebe. Ne preterujte sa tim. Dugmad i oblačići Povećajte efikasnost svoje projekcije slajdova dodavanjem dugmadi za svaku priču koja poziva na pažnju. Dugmad pomažu korisnicima da znaju na šta da kliknu. Međutim, pazite da ne upadnete u uobičajenu zamku jednostavnog označavanja dugmeta sa „Pročitaj više“, osim ako je to zaista jedina radnja koju korisnik može da uradi klikom na to dugme. Tekstovi poput „Podrška“, „Doniraj“, „Kupite“ i „Pogledajte video“ su mnogo efikasniji u navođenju korisnika da kliknu i postavljaju očekivanja šta će korisnik time dobiti. Navigacija Uobičajeni elementi navigacije uključuju:  Dugmad „Prethodno“ i „Sledeće“  Znakovi, brojevi ili sličice  Dugmad za oblačiće Da korisnik u početku ne bi imao previše opcija, razmislite o skrivanju navigacionih elemenata (kao što su dugmad „prethodno“ i „sledeće“) dok korisnik ne pređu pokazivačem miša preko slike u slajderu. Previše opcija u početku može zbuniti korisnike i naterati ih da napuste sajt pre nego što su i počeli da ga koriste. Otkrijte opcije tek kad se izazove interesovanje. Cela slika ili kartice sa naslovom Slajderi obično spadaju u jednu od sledećih kategorija:
  • 13.  Slika priče ispunjava celu projekciju slajdova. Trenutna priča je predstavljena velikom slikom koja deluje kao pozadina sa tekstom na vrhu. Ova verzija pruža najveće senzorno iskustvo jer se fokusira na što veće slike.  Priče u projekciji slajdova su navedene ili horizontalno ili vertikalno sa strane ili ispod ili na vrhu slike. Ova verzija se fokusira na prenošenje naslova i teksta više nego na vizuelno čulno iskustvo. Koristite ovaj tip ako je naslov priče toliko važan da korisnik ne može čekati da se ta priča objavi. Obrazloženje Slajderi ističu nekoliko različitih priča na istom ekranu. Omogućavaju korisnicima da brzo pregledaju priče. Slideri privlače pažnju korisnika i zadržavaju pažnju jednostavnom navigacijom, zadivljujućim sadržajem i pozivima na akciju. Oni oštro fokusiraju pažnju korisnika na sadržaj umesto na interakciju sa pregledačem. 3.3.3. Zumiranje slike (Image Zoom) Rezime problema Korisnik želi da uveća sliku da bi video detalje u višoj rezoluciji slike. Primer
  • 14. ▲ U online prodavnici apple.com, odabrani proizvodi su prikazani sa funkcijom zumiranja, koja vam omogućava da uvećate sliku proizvoda da biste videli njene detalje u većoj rezoluciji. https://ui-patterns.com/patterns/ImageZoom/examples Upotreba Koristite kada normalna prikazana veličina slike nije u dovoljno visokoj rezoluciji da bi korisnik mogao da shvati detalje na slici. Koristite kada preuzimate pune i detaljne verzije svih slika zahteva više propusnog opsega. Koristite kada se prikazuje puna i detaljna verzija slike koja se ne uklapa u dizajn veb lokacije. Koristite kada će prikaz pune veličine i detaljne verzije slike će sprečiti korisnika da dobije predstavu o celini slike. Koristite kada se pri preuzimanju pune veličine i detaljne verzije slike oduzima korisniku neproporcionalno mnogo vremena u poređenju sa tim šta dobija. Prikažite slike u visokoj rezoluciji samo kada su zatražene jer sve slike možda neće biti podjednako interesantne za korisnika. Rešenje Obezbedite mehanizam koji omogućava korisniku da zumira sliku da bi video njene detalje. Sa stanovišta servera, važno je da se slike visoke rezolucije unapred ne učitavaju pre nego što se zatraže. Ovo će pomoći u uštedi propusnog opsega. Intuitivan način da se ovo uradi je da se omogući korisniku da klikne na tačku na datoj slici. Kako korisnik klikne na sliku za zumiranje, unapred se učitava slika veće rezolucije. Obezbedite grafiku ili tekst o zumiranju slike; gola slika sama po sebi neće sugerisati korisniku funkcionalnost zumiranja. Obrazloženje Omogućavanje korisniku da uveća sliku omogućava istraživanje detalja slike. U zavisnosti od faktora zumiranja, prikazivanje cele slike visoke rezolucije od početka neće pružiti korisniku pregled cele slike. Pružajući funkciju zumiranja, korisnik može da zumira samo jednu oblast slike koja ga zanima. Na taj način korisniku ne smetaju ostali detalji. 3.4. Pretraživanje (Search) 3.4.1. Automatsko dovršavanje (Autocomplete) Rezime problema
  • 15. Korisniku je potrebna pomoć u pretrazi sa prepoznavanjem - kada obavlja zadatke pretrage koje je teško zapamtiti ili lako pogrešno otkucati traženi pojam. Primer google.com ▲ Klasični predlozi za automatsko dovršavanje na google.com https://ui-patterns.com/patterns/Autocomplete/examples Upotreba  Koristite za pomoć u rešavanju nejasnoća, kada se stavka može uneti na više načina  Koristite kada se tip unetih informacija može lako upariti sa određenim informacijama u sistemu. Na primer, korisnik se možda ne seća kako se piše „Amorfno“, ali može da unese prva 3 slova i pronađe reč sa liste za automatsko dovršavanje.  Koristite kada se predlozi za automatsko dovršavanje mogu izvući iz skupa podataka kojima je moguće upravljati po veličini.  Koristite kada je brzina unosa važan cilj.  Koristite kada je tačnost unosa važan cilj.  Koristite kada bi broj stavki bio prevelik ili nezgodan za prikaz u standardnom padajućem okviru.  Ne koristite ako želite da pružite korisniku pregled svih dostupnih opcija. Rešenje Predložite moguća podudaranja za pretragu dok korisnici kucaju. Obrazac za automatsko dovršavanje je prediktivni mehanizam zasnovan na prepoznavanju koji se koristi za pomoć korisnicima pri pretraživanju. Polje za pretragu za automatsko dovršavanje predstavlja stavke koje odgovaraju unosu korisnika dok kucaju. Kako korisnik unese više teksta u polje za pretragu, lista odgovarajućih stavki se sužava.
  • 16. Lista odgovarajućih stavki mora omogućiti korisnicima da izaberu stavke pomoću uređaja za unos kao što su navigacija sa strelicama na tastaturi, dodir i klik mišem. Ovo omogućava korisniku da brzo izabere termin bez potrebe da ukuca ceo termin. Naziv šablona potiče od ideje da sistem završava vašu pretragu. Ograničite broj odgovarajućih stavki za prikaz kada radite sa velikim skupom podataka. Standardno ograničenje je 10 odgovarajućih stavki. Poređajte odgovarajuće stavke prema relevantnosti sa najrelevantnijim ili najverovatnijim podudaranjem na vrhu liste. Ovo će omogućiti korisniku da brzo odabere svoje podudaranje. Neke implementacije automatskog dovršavanja grupišu odgovarajuće stavke u kategorije. Detalji implementacije Obrazac autodovršavanja se koristi u kombinaciji sa standardnim okvirom za unos teksta koji je označen tako da odgovara korisnikovim očekivanjima o tome koje polje će se pretraživati. Dok korisnik unosi podatke, prikazuje se lista predloženih stavki koje odgovaraju unesenim podacima. Kako se unosi više teksta, prikazana lista se ažurira tako da odgovara upitu – sužavajući podudarne stavke. Lista predloženih stavki se najčešće prikazuje direktno ispod okvira za unos teksta i ima širinu koja odgovara širini okvira za tekst. Dozvolite korisniku da otkaže listu predloženih stavki pritiskom na taster ESC. Pritiskom na taster ESC zatvara se lista predloženih stavki, ali ako unesete više znakova nakon pritiska tastera ESC ponovo će pokrenuti ponašanje automatskog dovršavanja. Obrazloženje Obrazac za automatsko dovršavanje omogućava brži unos, smanjuje broj potrebnih pritisaka na tastere, sprečava greške pri kucanju i pruža povratne informacije o validnosti onoga što se unosi. Takođe omogućava dizajnerima da uključe duže liste koje korisnici mogu da biraju, a da ne zauzimaju dodatni prostor na ekranu. Smanjuje se broj pritisaka na tastere i time omogućava brži unos podataka. Zamorni, dugi i komplikovani upiti, kao što su adrese e-pošte ili imena aerodroma, mogu se pronaći i izabrati sa samo nekoliko pritisaka na taster. Dodatno formatiranje predloga za pretragu može pomoći u uklanjanju dvosmislenosti. Ako tražim aerodrom u Londonu, dodatno formatiranje mi može reći da li biram aerodrome Hitrou ili Standsted. Automatsko dovršavanje obezbeđuje povratnu petlju koja neprekidno omogućava korisniku da suzi unos ispravnog izbora. Kognitivni opterećenje pamćenja tačne tekstualne fraze je olakšano, jer korisnik može da koristi obrazac za autodovršavanje da bi uneo samo detalje koje on ili ona pamti. Ako korisnik traži imejl za koji može da zapamti samo ime domena, on ili ona mogu jednostavno da unesu ime domena gde se sve poruke e-pošte sa tim imenom domena prikazuju za izbor. Obrazac autodovršavanja se oslanja na princip prepoznavanja umesto prisećanja. Umesto da mora da se seti celog i tačnog tekstualnog upita, korisnik može da počne da kuca delove upita kojih se seća, i da se zauzvrat osloni na prepoznavanje da bi izabrao najbolje podudaranje.
  • 17. Diskusija Prilikom uparivanja na velikim skupovima podataka, ključno je da prikazana podudaranja budu bliska onome što korisnik traži. Gugl rešava ovaj problem tako što rangira podudaranja prema broju puta pretraživanja svakog upita. Apple rešava problem u Spotlight-u (aplikacija za radnu površinu za pretragu stavki na računaru) rangiranjem odgovarajućih stavki prema broju puta kada je stavka izabrana kada je unet tačan upit. 3.4.2. Filteri pretraživanja (Search Filters) Rezime problema Korisnici treba da izvrše pretragu koristeći kontekstualne filtere koji sužavaju rezultate pretrage. Primer volksvagen.co.uk ▲ Volksvagen vam omogućava da precizirate pretragu kroz različite filtere za pretragu. https://ui-patterns.com/patterns/LiveFilter/examples Upotreba Koristite kada su rezultati pretrage za neki upit veoma brojni i njihovo pregledavanje bi oduzelo mnogo vremena. Koristite kada se rezultati pretrage mogu kategorisati u filtere: pretraga mora biti kontekstualna. Ne koristite kada vašu pretraga nije lako kategorisati u filtere. Rešenje
  • 18. Precizirajte rezultate pretrage u realnom vremenu koristeći jedan ili više filtera. Predstavite sve što je dostupno, a zatim podstaknite korisnika da postepeno uklanja ono što mu nije potrebno primenom jednog ili više filtera. Koristite ovaj obrazac samo kada pomaže da se pojednostavi iskustvo pretrage. Predstavite korisniku listu kategorije filtera i dozvolite korisniku da filtrira umetanjem unosa u okvire za tekst, biranjem opcija u padajućim okvirima ili čak preko polja za potvrdu (checkbox) ili radio dugmadi. Kad god korisnik izvrši promenu u bilo kom od polja za unos, rezultati se automatski ažuriraju. Obrazloženje Sa običnom pretragom počinjete ni od čega, a potencijalno i završavate bez ičega. Nasuprot ovom pristupu je filtriranje, gde predstavljamo sve što je dostupno, a zatim podstičemo korisnika da progresivno uklanja ono što mu nije potrebno. Korišćenje obrasca filtera pretrage pomera pretragu sa monologa na razgovor. Korisnik može postepeno da uklanja ono što mu nije potrebno korak po korak i da odmah dobija povratnu informaciju. Kada procenjujete da li da koristite ovaj filter, razmislite da li obrazac komplikuje ili pojednostavljuje pretragu. Ako radi bilo šta drugo osim što pojednostavljuje pronalaženje tačnog rezultata pretrage, izaberite neko drugo rešenje.