SlideShare a Scribd company logo
1 of 18
Opšti interfejsni obrasci
4. Uključivanje korisnika (Onboarding) – Vođenje, Registracija
Korisnik treba da stekne neophodna znanja, veštine i ponašanja da bi postao efikasan.
Vođenje korisnika (Guidance)
 Uputstva za rad (Coachmarks)
 Igranje (Playthrough)
 Linijski nagoveštaj (Inline Hint)
 Vođeni obilazak (Guided Tour)
 Šetnja (Walkthrough)
 Prazna tabla (Blank Slate)
Regiostracija korisnika
 Spora registracija (Lazy Registration)
 Pretplata (Paywall)
 Registracija naloga (Account Registration)
4.1. Vođenje korisnika (Guidance)
4.1.1. Uputstva za rad (Coachmarks)
Rezime problema
Korisniku je potrebna pomoć da razume složen korisnički interfejs
Primer
jkrowling.co.uk
▲ Kada prvi put uđete na veb lokaciju autora JK Rowling, pojavljuje se lejer preko stranice koji daje
uputstva objašnjavajući šta sve možete da radite.
https://ui-patterns.com/patterns/coachmarks/examples
Rešenje
Prikažite tekst, strelice i slike u obliku modalnog sloja koji objašnjava funkciju interfejsa.
Ovakva uputsva predstavljaju višestruke balone za pomoć koji se pojavljuju na providnom sloju koji
prekriva glavnu stranu. Koristeći tekst i često strelice i slike, oni ukazuju na delove i objašnjavaju
funkcionalnost korisničkog interfejsa.
Obrazloženje
Uputstva za rad (Coachmarks) mogu pomoći korisnicima da se objasne suviše komplikovani ili novi
korisnički interfejsi, ali ne pomažu u rešavanju osnovnih problema loše sastavljenih interfejsa.
Razmislite i o drugim obrascima uključivanja korisnika pre nego što se odlučite za ovaj.
Diskusija
Korišćenje coachmarka dodaje još jedan modalni ekran (ili sloj) vašem korisničkom interfejsu. Time se
ometa interakcija sa elementima koje treba da objasne. Ako su korisnici usred zadatka, ova uputstvaa
se mogu doživeti kao prepreka, koju će možda korisnici želeti brzo da odbace bez čitanja.
Ovo čini da je ovaj obrazac granični kao anti-obrazac: oni ne rešavaju osnovne probleme zbunjujućeg
korisničkog interfejsa. Dodavanje novog nivoa složenosti da bi se objasnio ionako složen interfejs
tretira simptome, a ne osnovni uzrok.
Štaviše, pažnja se skreće sa jednog saveta kako da se pojediančni problem reši na objašnjenje celog
korisničkog interfejsa. Vi u suštini tražite od korisnika da zapamti ne samo kako da reši zadatak koji
mu je pri ruci, već i sve druge zadatke koji mogu da se pojave. Višestruka uputstva povećavaju
kognitivno opterećenje – posebno u kratkotrajnoj memoriji.
Prvo se pozabavite osnovnim problemima
Pre nego što se odlučite za korišćenje Coachmarks-a, pokušajte prvo da vidite da li možete da rešite
problem na druge načine. Pozabavite se svim osnovnim problemima korisničkog interfejsa pre nego
što uvedete Coachmarks. Razmislite o obrascima „Playthrough“ ili „Guided Tour“, koji korisnicima
omogućavaju bezuslovnu pomoć kad stupe u interakciju sa elementima o kojima dobijaju uputstva.
Ako morate da koristite Coachmarks, budite svesni kognitivnog opterećenje korisnika. Možemo da se
setimo samo 3-4 stvari odjednom. Postavite markere na čitljiv način i lake za pregled. Umesto da
samo prikazujete snimak ekrana, pokušajte da postavite oznake preko normalnog pogleda korisnika
na korisnički interfejs.
4.1.2. Igranje (Playthrough)
Rezime problema
Korisnik želi da zna kako da koristi različite funkcije aplikacije.
Primer
tumblr.com
▲ Kada se prijavite za novi Tumblr blog, vaš nalog je popunjen sadržajem tako da možete početi da
istražujete sve detalje. Dok pretražujete okolo, interfejs je objašnjen umetnutim okvirima pomoći.
https://ui-patterns.com/patterns/playthrough/examples
Upotreba
 Koristite kada želite da predstavite osnovne interakcije korisniku nego što mu dozvolite da
uđu u ceo proizvod
 Koristite kada želite da omogućite korisnicima da nauče i istraže osnovne veštine potrebne za
korišćenje proizvoda
 Koristite kada želite da dozvolite bezuslovnu pomoć
 Koristite kada želite da omogućite korisnicima da uđu u svet proizvoda bez da dožive
neuspeh
 Koristite kada želite da omogućite korisnicima da uče kroz rad
 Koristite kada želite da stvorite prostor bez rizika za korisnike da izgrade veštine i steknu neka
početna dostignuća
 Koristite kada želite da korisnici razviju skup osnovnih kompetencija koje im pomažu da
pređu na napredne radnje
 Koristite kada želite da ostavite pozitivan prvi utisak tako što ćete korisniku omogućiti rani
uspeh
 Nemojte koristiti kada postoji šansa da će korisnici osetiti da dajete previše. Omogućite
preskakanje.
Rešenje
Autentičan prostor namenjen korisnicima gde početnici mogu bezbedno da istražuju i uče osnovne
veštine.
Poštedite korisnike neuspeha tako što ćete ih upoznati sa osnovnim interakcijama. Omogućite
korisnicima da nauče i steknu osnovne veštine pre nego što uđu u potpuno iskustvo proizvoda.
Obezbedite tekstualnu pomoć i osnovne ciljeve kako bi mogli da se igraju interfejsom, ali i da uče
kako interfejs radi dok se igraju.
Ovaj obrazac je nešto što pružate korisniku pre nego što mu dozvolite da uđe u potpuno iskustvo
proizvoda, što ga upoznaje sa osnovnim interakcijama i omogućava mu da nauči i istraži te osnovne
veštine. Ovaj obrazac je poznat iz igara, gde se novi igrači podstiču da isprobaju početni nivo, gde
dobijaju tekstualnu pomoć i neke osnovne ciljeve, tako da mogu da igraju igru, ali i da uče igru dok je
igraju.
Neka korisnici uče kroz stvarne zadatke
Tražeći od korisnika da naprave svoj prvi korak u aplikaciji, aplikacija može da angažuje korisnike
odmah. Ovo je uobičajeno u aplikacijama koje zavise od održavanja od strane korisnika da bi
aplikacija radila.
Neprimetno nastavite iskustvo u celom proizvodu
Prenesite sva dostignuća koja je korisnik stekao u obrascu u potpuno i normalno iskustvo proizvoda.
Učinite prelazak sa obrasca na normalno iskustvo sa proizvodom što je lakše moguće.
Omogućite opciju preskakanja
Neki ljudi samo da zarone u proizvod od samog početka. Uvek dozvolite izbegavanje ovog obrasca
tako što ćete omogućiti korisniku da ga preskoči.
Nemojte razzvlačiti upotebu ovog obrasca
Ograničite upotebu obrasca na relevantne osnovne zadatke i testirajte ga kako biste saznali koja
dužina je ugodna za korisnike. Neki korisnici bi mogli da vole duže igranje sa obrascem od drugih, pa
budite sigurni da steomogućili da se izbegne korišćenje ako korisnik to želi.
Obrazloženje
Omogućavajući korisnicima da rano i bezbedno iskorače u ceo svet proizvoda, možete sprečiti
korisnike da se suoče sa neuspehom ako nisu imali uvodna uputstva.
4.1.3. Linijski nagoveštaj (Inline Hint)
Rezime problema
Korisnik želi da sazna o novim ili nepoznatim karakteristikama interfejsa na nenametljiv način
Primer
klout.com
▲ Na Klout.com, Inline Hint je kombinovan sa šablonom dizajna Blank Slate.
https://ui-patterns.com/patterns/inline-hints/examples
Upotreba
 Koristite kada želite da poboljšate čitljivost vođene pomoći, pošto su ugrađeni nagoveštaji
formatirani u skladu sa drugim sadržajem.
 Koristite kada ne želite da prekinete ili pokvarite doživljaj sadržaja.
 Koristite za pružanje korisnih informacija u kombinaciji sa obrascem „Blank Slates“.
 Nemojte koristiti kada želite da budete potpuno sigurni da su korisnici videli vaš nagoveštaj,
jer je suptilan izgled u riziku da bude ignorisan.
 Ne koristite za prenošenje kritičnih instrukcija.
Rešenje
Kombinujte savete i podučavanje sa sadržajem za besprekorno iskustvo.
Koristite postojeći izgled da biste se neprimetno uklopili kako savete tako i druge oblike podučavanja.
Integrisano iskustvo korišćenja oblika normalnog i svakodnevnog sadržaja omogućava čitljiviji i
relevantniji oblik instrukcija koji ne prekida i ne kvari doživljaj sadržaja.
Nagoveštaji (saveti) su neprimetno integrisani u izgled okolnog sadržaja tako da ne ometaju ili
prekidaju interakciju korisnika. Ugrađeni nagoveštaji ne moraju da se odbacuju i zatvaraju nakon što
su pročitani ili da nestanu nakon upotrebe.
Nemojte koristiti ovaj obrazac ako želite da budete potpuno sigurni da su korisnici videli vaš
nagoveštaj, jer zbog suptilnog izgleda postoji rizik da bude ignorisan. Koristite umetnute savete da
pojačate druga uputstva koja se nalaze na drugom mestu u interfejsu.
Kako se ugrađeni saveti stapaju sa ostatkom sadržaja, korisnici se lako zbune ako informacije saveta
nisu relevantne za sadržaj koji ga okružuje. Nemojte ih preterano koristiti; uverite se da su relevantni
i da ne preopterećuju doživljaj primarnog sadržaja.
Obrazloženje
Budući da ugrađeni nagoveštaji dobijaju oblik normalnog, svakodnevnog sadržaja, dizajneri se nadaju
da će biti lakše čitljivi i relevantniji od drugih oblika instrukcija.
4.1.4. Vođeni obilazak (Guided Tour)
Rezime problema
Korisnik želi da sazna o novim ili nepoznatim karakteristikama interfejsa.
Primer
livejournal.com
▲ Dok se spremate da ažurirate svoj post na blogu, pokreće se pravovremeno uputstvo da vas
obavesti o novoj funkciji
https://ui-patterns.com/patterns/Guided-tour/examples
Upotreba
 Koristite kada želite da pomognete korisnicima da se naviknu na vaš korisnički interfejs.
 Koristite kada želite da obavestite svoje korisnike o novim ili nepoznatim funkcijama
 Koristite kada vaš korisnički interfejs nije sam po sebi razumljiv
Rešenje
Navođenje „Tačno na vreme“ se pokreće onako kako korisnik istražuje.
Omogućite korisnicima da uče sopstvenim tempom koristeći opise alata, ekrane, modele i upozorenja
koja nagoveštavaju optimalnu upotrebu interfejsa u kontekstu svakodnevne upotrebe.
Napravite niz pojedinačnih nagoveštaja koji se progresivno pojavljuju tokom prve upotrebe proizvoda
ili interfejsa. Saveti mogu biti bilo šta, od opisa alatki, preklapanja do modalnih upozorenja.
Neki korisnici cene pomoć, a drugi ne. Budite sigurni da uvek dozvolite korisniku da odbacite ovaj
obrazac ako mu nijepotreban.
Vođeno proizvodom u odnosu na korisničko vođenje.
Odlučite da li želite da obilazak bude vođen proizvodom ili korisnikom. U obilasku vođenom
proizvodom, nagoveštaji napreduju u linearnom nizu, dok se nagoveštaji u obilasku koje vodi korisnik
pokreću kada korisnik dostigne odgovarajuće tačke u svom radu. Za obilaske koje vodi korisnik, saveti
se mogu pojaviti različitim redosledom za različite korisnike.
4.1.5. Šetnja (Walkthrough)
Rezime problema
Korisnik želi da nauči o proizvodima i uslugama koje nudite kako bi doneo odluku da naruči uslugu ili
kupi proizvod.
Primer
slack.com
▲ Kada prvi put uđete u softver za onlajn ćaskanje Slack, dočekaće vas kratak obilazak proizvoda.
https://ui-patterns.com/patterns/Tour/examples
Upotreba
Koristite da biste korisnicima pružili uvid u to šta je vaša ponuda pre nego što potroše vreme ili novac
na to.
Koristite da biste prodali svoj proizvod.
Koristite da biste omogućili korisnicima da donesu „informisanu“ odluku o kupovini.
Koristite za uputstva korisnika kako da rešavaju uobičajene zadatke.
Koristite za podučavanje korisnika o svom proizvodu i šta on može da uradi.
Koristite za podučavanje korisnika o posebnim karakteristikama proizvoda.
Koristite za podučavanje korisnika o pitanjima koja nisu vezana za veb sajt.
Rešenje
Predstavite glavne karakteristike vašeg proizvoda pre nego što korisnik počne da ga koristi.
Predstavite svoj proizvod i/ili ponudu pre nego što počne pravo korisničko iskustvo. Uputstva se
često predstavljaju kao statična ili animirana projekcija slajdova ili pomoću video zapisa. Neka bude
kratko i precizno jer korisnici to često preskaču kako bi započeli korišćenje sajta.
Uputstvo objašnjava proizvod ili uslugu u smislu karakteristika, prednosti i uopšte šta vam proizvod ili
usluga omogućavaju. Najčešće je podeljen na više od jednog odeljka, koji se ponekad stavljaju na
zasebne stranice.
Imajući ovo na umu, evo nekoliko principa koje treba imati na umu kada razvijate ovaj obrazac.
Fokusirajte se na zadatke korisnika
Bez obzira da li je vodič isključivo marketinški alat ili alat za podučavanje, važan je fokus na zadatke
korisnika. Kako im možete pomoći? Ciljajte na dobru ravnotežu između opisivanja osnovnih stvari i
objašnjavanja svega. Samo opisivanje osnovnih stvari možda neće korisnicima dati dovoljno širok
pogled na vaš proizvod da bi im pomogao u odluci. Ako ste previše opširni, s druge strane, mogli biste
uplašiti i oterati korisnika.
Oduprite se porivu da pokažete najnovije i najbolje karakteristike – najvažnije je da ubedite svoje
korisnike da će im vaš proizvod pomoći u njihovim osnovnim problemima. Nove korisnike ne
zanimaju vaša samoreklamiranja; oni samo žele da ostvare svoje ciljeve.
Obezbedite vizuelne reference
Nemojte samo pisati o svom proizvodu i njegovim karakteristikama. Uključite snimke ekrana,
ilustracije, pa čak i video snimke o tome kako se koristi vaš proizvod.
Ovo će omogućiti vašim korisnicima da steknu bolji osećaj gde tačno da kliknu – ali i koliko je vaš
proizvod zapravo jednostavan – kako je trebalo da funkcioniše i da se koristi.
Uključite direktne veze
Dok korisnici koriste uputstva da bi saznali više o vašem proizvodu ili usluzi, oni će ići napred-nazad
između uputstava i proizvoda. To je njihova referentna tačka, pa im olakšajte da prelaze između njih
dvoje. Navedite direktne veze, ako je moguće, do odeljaka koje objašnjavate.
Rešite probleme ili brige unapred
Pozabavite se glavnim problemima koje vaši korisnici mogu imati kada pokušavaju da odluče da li da
koriste vaš proizvod ili ne. „Da li je bezbedno“, „Mogu li lako da uvezem svoje podatke?“, „Mogu li da
izvezem svoje podatke ako odlučim da se preselim?“..
Obrazloženje
Pregled vašeg proizvoda ili usluge pomaže u informisanju korisnika o tome:
 Šta vaš proizvod može da uradi
 Da li je vaš proizvod ono što su tražili
 Da li će vaš proizvod pomoći da ostvare svoje zadatke
 Da li treba da prihvate vašu uslugu ili da plate za vaš proizvod
Kupovina proizvoda ili usluge može biti skupa i korisnicima će biti potrebna značajna količina
ubeđivanja i ohrabrenja pre kupovine. Uputstvaa omogućavaju korisnicima da dobiju uvid u vaš
proizvod bez potrebe da se prijave.
4.1.6. Prazna tabla (Blank Slate)
Rezime problema
Korisnik želi da počne da koristi aplikaciju, ali mu je potrebno uputstvo u vidu primera kako će
aplikacija izgledati, osećati se i ponašati se kada je u punoj funkciji i ispunjena podacima.
Primer
upwork.com
▲ Prazna tabla u Upwork-u ima dve svrhe: da omogući korisnicima da kreiraju nove poslove ili da
počnu da traže slobodnjake za kontakt.
https://ui-patterns.com/patterns/BlankSlate/examples
Upotreba
Koristite kada je vaša aplikacija prazna i beživotna pre nego što korisnik počne da unosi podatke u
sistem.
Koristite kada želite da motivišete korisnika da počne da koristi sistem.
Koristite kada želite da pomognete korisniku da počne da koristi vašu veb aplikaciju.
Koristite kada želite da prikažete najbolje prakse korišćenja vaše veb aplikacije.
Koristite kada želite da usmerite korisnika da dobro počne sa svojom veb aplikacijom.
Rešenje
Opustite, vodite ili ohrabrujte korisnike kada nema sadržaja za prikaz.
Iako prazne table nisu tipične, one su važna prilika za dobar dizajn kako bi se izbeglo razočarenje ili
zabuna korisnika. Uverite se da se korisnici osećaju bezbedno i da znaju šta sledeće treba da urade
kada prvi put koriste vaš proizvod ili kada obrišu sav sadržaj.
Dajte korisniku utisak o tome kako će sistem izgledati kada se napuni podacima – ili ga vodite i
ohrabrite da počne da ga popunjava podacima. Možete da predstavite korisniku nekoliko vrsta
korisnih informacija na praznoj tabli:
 Prikažite primer snimka ekrana kako će stranica izgledati kada se napuni sadržajem,
 Ubacite brze vodiče i tekstove pomoći,
 Objasnite najbolje načine za početak,
 Postavljajte pitanja koja će prvi put postaviti korisnik: Šta je ovo? Šta da radim sada?, i
 Postavite očekivanja koja će pomoći u smanjenju frustracije, zastrašivanja i opšte konfuzije.
Obrazloženje
Prazan list je generalno prvi ekran koji se korisniku prikazuje kada započne nešto novo u aplikaciji. To
može biti ekran na koji su usmereni nakon kreiranja naloga ili prvi ekran koji vide kada koriste deo
aplikacije koju ranije nisu koristili. Prazan list govori korisniku kako će izgledati stranica na kojoj se
nalazi, kada se na kraju popuni sadržajem. Kreiranje praznog lista postavlja očekivanja korisnika.
Novi korisnici su često zastrašeni praznim ekranima sa malo ili bez uputstva. Usmeravanje korisnika
sa unapred popunjenim početnim stanjem je najbolji način da se uspostavi poverenje i stekne
razumevanje.
Uverite se da je prvi utisak koji korisnik dobije o vašoj aplikaciji pozitivan. Neka znaju zašto treba tu
da ostanu.
4.2. Registracija (Registration)
4.2.1. Spora registracija (Lazy Registration)
Rezime problema
Korisnik želi da odmah koristi i isproba vašu veb lokaciju bez prethodne formalne registracije
Primer
moqups.com
▲ Kada odete na Moqups, odmah ćete biti prebačeni u aplikaciju u punom izgledu. Otvoreno je na
radnom dokumentu koji objašnjava kako sve funkcioniše.
https://ui-patterns.com/patterns/LazyRegistration/examples
Upotreba
 Koristite kada je ključno za vašu veb lokaciju da omogućite korisniku da pregleda i komunicira
sa vašom veb lokacijom pre nego što zaista registruje nalog.
 Korišćenje prilikom davanja ličnih podataka potrebnih za formalnu registraciju naloga je veliki
korak za vaše korisnike.
 Koristite kada želite da omogućite korisnicima da isprobaju vašu veb lokaciju (i zauzvrat je
uporede sa alternativama) pre nego što donesu odluku da registruju nalog na vašoj veb
lokaciji.
 Koristite kada se pri registraciji naloga zahteva razmena novca, zbog čega bi korisnik možda
želeo da prvo „pretraži” vaš proizvod kako bi doneo odluku.
 Koristite kada ne želite da prisilite svoje korisnike da se registruju na početku - kada ne želite
da vršite preveliki pritisak na svoje korisnike
 Koristite da bi vaši korisnici odmah počeli da unose podatke u vaš sistem. Kada su već uložili
vreme u vaš sistem, korak do registracije naloga je manji nego ako nije uloženo vreme.
Rešenje
Dozvolite korisnicima da pristupe ograničenom skupu funkcija, funkcionalnosti ili sadržaja pre ili bez
registracije.
Omogućite korisnicima da imaju dovoljno interakcije sa vašim sistemom tako da stvarna registracija
bude samo još jedan mali korak u većem procesu: mali korak, a ne obaveza.
Lagana verzija ovog obrasca je korpa za kupovinu sajta za e-trgovinu, gde korisnik može da akumulira
relevantne proizvode u korpi, a zatim da registruje nalog ako odluči da obavi kupovinu.
U težoj verziji ovog obrasca, anonimni korisnički nalog se odmah kreira za korisnika – pun sa
automatski generisanim ID-om baze podataka i dodatnim kolačićem sa ID-om naloga koji će
obezbediti da podaci o korisniku i informacije koje je on ili ona uneo ostanu upamćeni prilikom
sledeće posete. U odgovarajućim intervalima, neaktivni anonimni nalozi se brišu iz baze podataka
kako ne bi zatrpali sajt.
Kako korisnik komunicira sa sistemom, podaci se akumuliraju na nalogu. Dok neki podaci možda neće
biti prikazani korisniku, druge vrste podataka hoće. Poslednji podataci će učiniti da se korisnik
registruje – vidljivi dokaz da je korisnik uložio energiju u korišćenje sistema. Pametan način za
prikupljanje takvih podataka je otkrivanje rupa u podacima koje korisnik može popuniti. Dve takve
rupe su korisničko ime i lozinka.
Obrazloženje
Isporučite vrednost pre nego što zatražite konverziju. Korpa za kupovinu je klasičan obrazac koji se
zasniva i na ovom obrascu: korisnici mogu da pretražuju i biraju proizvode, ali samo moraju da se
registruju kada nastave sa odjavom.k
Šablon omogućava korisnicima da koriste vaš sistem i preduzmu akciju pre ili bez registracije. Ideja je
da omogućite korisnicima da imaju dovoljno interakcije sa vašim sistemom, tako da stvarna
registracija bude samo još jedan mali korak u širem procesu. To je mali korak nije obaveza. Klasični
obrazac „Korpa za kupovinu“ je dobar primer spore registracije: korisnici mogu da pretražuju i biraju
proizvode i moraju da se registruju tek kada se odluče da kupe.
Da bi ovaj obrazac funkcionisao, morate da podstaknete korisnike da vam daju podatke za
registraciju koje tražite. Morate da pružite vrednu uslugu svojim korisnicima kako bi vam oni zauzvrat
vratili svoje podatke. Želite da koristite klasičnu motivaciju tipa „šargarepu i štap“. Ako su podaci o
registraciji koje tražite kod korisnika osetljivi, morate biti u mogućnosti da uverite svoje korisnike da
će njihovi podaci biti bezbedni i bezbedni.
Diskusija
Pitanja koja treba postaviti kada planirate svoju sporu registraciju
 Razmislite kako možete izbjeći obrasce za prijavu u korist postepenijeg angažmana.
 Ako odlučite da koristite obrazac „Spora registracija“, uverite se da se fokusirate na to da
pokažete kakopotencijalni klijenti mogu da koriste vašu uslugu i zašto bi im to bilo bitno.
 Automatski generisani nalozi su odlični, ali ako odlučite da ih koristite, onda se pobrinite da
dizajnirate jasan način za korisnike da pristupe svojim nalozima. Šanse su da će ljudi ili
ignorisati ili neće videti mejlove o kreiranju vašeg naloga – i mogu biti nesigurni da li uopšte
imaju nalog ili ne.
4.2.2. Pretplata (Paywall)
Rezime problema
Korisnik treba da plati da bi dobio pristup ograničenom području na veb lokaciji.
Primer
▲ U zemljama EU, Facebook (Meta) daje korisnicima izbor da koriste njihovu uslugu besplatno dok
prikazuju oglase, ili putem mesečne pretplate – bez oglasa.
https://ui-patterns.com/patterns/Paywall/examples
Upotreba
 Koristite kada vam je potreban način da direktno zaradite novac na sadržaju koji proizvodite.
 Koristite kada su vaši korisnici spremni da plate za sadržaj koji proizvodite.
 Koristite kada je percipirana vrednost vašeg sadržaja veća od iznosa novca koji tražite za
njega.
 Nemojte koristiti kada vaša veb lokacija zavisi isključivo od zarade na prikazima banera, jer je
najveći mogući broj prikaza stranice tada najvažniji.
Rešenje
Omogućite pristup samo korisnicima koji su platili.
Postoje razne strategije pretplate koje se danas koriste. Neke strategije blokiraju sav sadržaj dok se
ne izvrši plaćanje, neke vas mame i traže novac nakon što pogledate više članaka, druge veb stranice
biraju sadržaj koji nije besplatan za sve. Ispod je pregled glavnih varijacija.
Strategije
 Paywall: Sav sadržaj je iza jednog velikog sistema pretplate koji okružuje ceo sajt. Primer je
The Times
 Freemium: U freemium modelu, neki sadržaji su besplatni za sve, a neki su pod pretplatom.
Primeri su The Vallstreet Journal, Berlingske, Aftonbladet, a kod nas NIN, Vreme...
 Taksimetar: Prvih nekoliko članaka možete besplatno pogledati nakon što se aktivira „platni
zid“. Primeri su The Nev Iork Times, Financial Times
 Vremenska ograničenja: Kupujete dnevnu, nedeljnu, mesečnu ili godišnju propusnicu ili
pristup arhivi na više dana. Primeri su The Observer, The Guardian
 Prodaja na veliko: Preprodaja i prodaja kompanijama. Primeri su Financial Times i
Mediawatch
 Prodaja na komad: Kupovina pojedinačnih priča i usluga.
Plaćanje ne mora biti novčano
Većina pretplataa uključuje novčanu razmenu, međutim postoji nekoliko načina na koje korisnik
može platiti da bi došao iza „platnog zida“:
Novčana razmena: Tradicionalna pretplata uključuje neku vrstu novčane razmene - može se platiti za
jednu informaciju ili putem pretplate
Pretplata na štampane medije: Umesto da kupujete pretplatu samo za korišćenje veb lokacije,
zahtevajte od korisnika da poseduju pretplatu na štampano izdanje medija kako biste ostvarili oba
toka prihoda: onlajn i oflajn.
Dozvola: Dozvolite vašim korisnicima da vam daju dozvolu da ih pozovete, pošaljete im e-poštu, da
dobijete informacije sa facebook-a, da kontaktirate prijatelje, itd. Dobijanje dozvole za izgradnju
dugoročne veze ponekad može biti vrednije od obične novčane razmene .
Potencijalni klijent: Takođe možete dozvoliti korisnicima da daju dozvolu da ih oglašivač ili treća
strana kontaktira.
Vreme: Dozvolite svojim korisnicima da popune upitnik – da li želite da znate o profilu svojih
korisnika i njihovom ponašanju – ili bi oglašivač ili treća strana mogla biti zainteresovana da sazna o
vašim korisnicima? Takođe možete da dozvolite svojim korisnicima da gledaju video reklamu od
oglašivača ili na drugi način da troše svoje dragoceno vreme.
Deljenje na društvenim mrežama: Omogućite korisnicima da dobiju pristup sadržaju tako što prvo
podele vezu na društvenim mrežama. Neke veb stranice i aplikacije koriste usluge „plati tvitom“ i
„plati lajkom“.
Obrazloženje
Pretplata se danas koristi kao alternativni izvor prihoda za veb stranice, dok je ranije oglašavanje
preko banera bio tradicionalni izvor prihoda. Kako korisnici menjaju svoje navike sa štampe na
internet, medijskim kompanijama je sve teže da baziraju svoje poslovanje samo na prihodima od
oglašavanja. Pretplata je naširoko uvedena da bi se nadoknadio izgubljeni prihod.
4.2.3. Registracija naloga (Account Registration)
Rezime problema
Želite da znate ko je aktivni korisnik da biste pružili personalizovani sadržaj ili mogućnosti za
kupovinu.
Primer
myspace.com
▲ Kada odlučite da se registrujete sa svojom e-poštom (a ne drugom društvenom uslugom) na
MySpace.com, ovako izgleda obrazac za registraciju.
https://ui-patterns.com/patterns/AccountRegistration/examples
Upotreba
 Koristite kada želite da ograničite pristup određenom sadržaju.
 Koristite kada želite da kontrolišete koji korisnici imaju pristup sadržaju.
 Koristite kada kontekstualne informacije moraju biti predstavljene korisniku. Kontekst može
zavisiti od geografskog položaja korisnika, vremenske zone, uzrasta, interesovanja, pa čak i
od ranije interakcije korisnika sa vašom veb lokacijom (dodati prijatelji, poslat sadržaj itd.)
 Koristite kada želite da zaštitite informacije korisnika.
Rešenje
Zatražite od korisnika da se registruju i otvore nalog kako bi im pružili personalizovano iskustvo.
Dozvolite korisnicima da registruju nalog kako bi im omogućili čuvanje informacija, pružili
personalizovano iskustvo ili omogućili pristup ograničenim resursima.
Uobičajene mane dizajna za funkcije registracije i prijavljivanja uključuju:
 Vidljivost: uverite se da su dugmad „Registracija“ i „Prijava“ jasni, da se lako vide i da im je
lako pristupiti. Ne sakrivajte dugme „Prijava“.
 Poziv na akciju: Skrenite pažnju na ključne operacije kao što su „Registrujte novi nalog“,
„Prijava“ i „Zaboravio sam lozinku“. Uverite se da su vaša dugmad za akciju privlačna i
podstaknite nove korisnike da se pridruže.
 Podsticaj: Iskoristite priliku za registraciju na ključnim lokacijama, nemojte se oslanjati samo
na jednu tačku akcije.
 Redundantnost: Obezbedite više dugmadi „Prijava“ na ključnim lokacijama. Korisnici često
čekaju do poslednjeg trenutka da se prijave. Ključne lokacije su tačke akcije; na primer kada
korisnik želi da doda komentar na blog post.
 Komplikovano: Ne frustrirajte korisnike komplikovanim zahtevima za lozinku. Jačina lozinke
koja vam je potrebna mora da odgovara potrebi za zaštitom. Politika lozinki koja je previše
stroga može ometati registraciju i obeshrabriti potencijalne korisnike.
Možete olakšati registraciju naloga svojim korisnicima:
 Navedite jednostavan i razumljiv opis zahteva za korisnička imena i lozinke.
 Pored toga, možda biste želeli da obezbedite merač jačine lozinke da biste pružili trenutnu
povratnu informaciju o tome koliko dobro uneta lozinka ispunjava zahteve umesto da
prikažete poruku o grešci nakon što korisnik klikne na dugme za slanje.
 Slično tome, možda ćete želeti da proverite dostupnost korisničkog imena pri svakom pritisku
na taster, tako da korisnik ne mora da šalje ceo obrazac nekoliko puta pre nego što mu se
dozvoli ulazak.
 Kada se prijavi, vratite se na stranicu sa koje je korisnik došao. Ako je poenta radnje bila
slanje komentara na post na blogu, preusmerite korisnika na obrazac za komentare nakon
prijave.
 Razmislite o ugrađivanju opcija društvenog prijavljivanja kao što je „Prijava na Facebook“ u
svoju veb lokaciju/aplikaciju i u potpunosti izbegnite celu novu priču oko lozinki.
Obrazloženje
Registracija naloga omogućava da personalizovani i kontekstualni sadržaji budu predstavljeni
autentifikovanim korisnicima.
Registracija naloga omogućava pamćenje detalja o korisniku; liste želja proizvoda, preferencije,
interesovanja, adrese za isporuku i fakturisanje, PDV broj za potrebe obračuna i još mnogo toga.
Prednosti omogućavanja korisnicima da registruju nalog na vašoj veb lokaciji uključuju i to da:
 Znate ko koristi vaš sistem
 Znate koliko često posećuju
 Znate šta rade na vašem sajtu.
 Možete da skladištite informacije koje bi vašim korisnicima mogle zatrebati kasnije, kao što
su informacije o obračunu ili liste želja za buduće kupovine.
 Možete koristiti registraciju naloga da rezervišete poseban sadržaj svojim redovnim
korisnicima.
 Možete razlikovati cene, prikazane informacije i prava pristupa u zavisnosti od toga ko je
prijavljen korisnik.
Diskusija
Da li je potrebna registracija naloga i kada?
Kupci ne vole da se identifikuju dok im to zaista nije potrebno. Moraju tek onda kada on ili ona
odluče da preduzmu akciju – na primer da kupe proizvod. Do tada, ne želite da blokirate korisnike da
preduzmu radnju ili pregledavs vašu veb lokaciju. Uopšteno govoreći, želite da zaštitite samo stranice
za koje je potrebno da znate identitet korisnika. Korisnici mrze kad moraju da registruju nalog da bi
uradili nešto jednostavno. Primer preranog prijavljivanja bi bio primoravanje korisnika da se prijave
pre nego što mogu da pregledaju proizvode vaše onlajn prodavnice. Korisnici žele da dobiju
predstavu o tome šta se nudi pre nego što se obavežu na kreiranje naloga, a ne obrnuto.
Kakav sajt vodite? Da li je zaista potrebno razviti odnos sa svojim klijentima (ili korisnicima) ili je
tipično ponašanje vaše vrste kupaca da ostanu anonimni? U poslednjem slučaju, možda biste želeli da
razmislite o tome da uopšte ne zahtevate registraciju naloga – čak i kada korisnik kupuje proizvod.
Zašto bi se korisnik registrovao?
Morate jasno navesti koje će koristi korisnik imati od registracije naloga na vašoj veb lokaciji jer ovaj
korak predstavlja opterećenje za korisnika. Jedan od načina da to uradite je da direktno saopštite
prednosti u pisanim rečenicama kao što su „Pratite svoju porudžbinu“, „Promenite svoju rezervaciju
kasnije“ ili „Primite naš bilten“ (Da, ovo je zapravo korist za neke ljude) .
Drugi način da se saopšte prednosti registracije naloga je blokiranje tačaka akcije. Primeri za to su
slanje komentara ili sadržaja na sajt.
Postavljanje previše (nepotrebnih) pitanja
Poznavanje vaših korisnika je važno, ali želja da ih poznajete previše dobro može ometati registraciju
naloga. Iako vaše marketinško odeljenje želi da sazna tačna interesovanja, broj telefona ili čak
veličinu godišnje plate vaših korisnika, pitati ih ovo nije uvek dobra ideja. Pošto su neželjene e-poruke
uobičajena pojava, prosečan korisnik interneta će vam nerado poveriti takve podatke.
U određenim slučajevima možete zahtevati lične podatke od korisnika, a da biste zadržali poverenje,
morate izjaviti zašto su vam potrebni. Jednostavna izjava „U slučaju da treba da vas kontaktiramo,
navedite broj telefona“ će biti dovoljna.
Izrada korisničkog imena i smišljanje nove lozinke su već veliki zadaci za korisnika. Činjenica da
korisnik treba da razmisli i odluči o ovim stvarima znači da je korisnikov fokus pomeren sa zadatka
koji je radio.

More Related Content

More from AleksandarSpasic5

More from AleksandarSpasic5 (20)

OIR-V11.pptx
OIR-V11.pptxOIR-V11.pptx
OIR-V11.pptx
 
OIR-V10.pptx
OIR-V10.pptxOIR-V10.pptx
OIR-V10.pptx
 
OIR12-L3.pptx
OIR12-L3.pptxOIR12-L3.pptx
OIR12-L3.pptx
 
OIR12-L2.pptx
OIR12-L2.pptxOIR12-L2.pptx
OIR12-L2.pptx
 
OIR12-L1.pptx
OIR12-L1.pptxOIR12-L1.pptx
OIR12-L1.pptx
 
OIR-V9.pptx
OIR-V9.pptxOIR-V9.pptx
OIR-V9.pptx
 
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
 

Interfejsni obrasci - Opsti-4-Korisnik.pdf

  • 1. Opšti interfejsni obrasci 4. Uključivanje korisnika (Onboarding) – Vođenje, Registracija Korisnik treba da stekne neophodna znanja, veštine i ponašanja da bi postao efikasan. Vođenje korisnika (Guidance)  Uputstva za rad (Coachmarks)  Igranje (Playthrough)  Linijski nagoveštaj (Inline Hint)  Vođeni obilazak (Guided Tour)  Šetnja (Walkthrough)  Prazna tabla (Blank Slate) Regiostracija korisnika  Spora registracija (Lazy Registration)  Pretplata (Paywall)  Registracija naloga (Account Registration) 4.1. Vođenje korisnika (Guidance) 4.1.1. Uputstva za rad (Coachmarks) Rezime problema Korisniku je potrebna pomoć da razume složen korisnički interfejs Primer jkrowling.co.uk
  • 2. ▲ Kada prvi put uđete na veb lokaciju autora JK Rowling, pojavljuje se lejer preko stranice koji daje uputstva objašnjavajući šta sve možete da radite. https://ui-patterns.com/patterns/coachmarks/examples Rešenje Prikažite tekst, strelice i slike u obliku modalnog sloja koji objašnjava funkciju interfejsa. Ovakva uputsva predstavljaju višestruke balone za pomoć koji se pojavljuju na providnom sloju koji prekriva glavnu stranu. Koristeći tekst i često strelice i slike, oni ukazuju na delove i objašnjavaju funkcionalnost korisničkog interfejsa. Obrazloženje Uputstva za rad (Coachmarks) mogu pomoći korisnicima da se objasne suviše komplikovani ili novi korisnički interfejsi, ali ne pomažu u rešavanju osnovnih problema loše sastavljenih interfejsa. Razmislite i o drugim obrascima uključivanja korisnika pre nego što se odlučite za ovaj. Diskusija Korišćenje coachmarka dodaje još jedan modalni ekran (ili sloj) vašem korisničkom interfejsu. Time se ometa interakcija sa elementima koje treba da objasne. Ako su korisnici usred zadatka, ova uputstvaa se mogu doživeti kao prepreka, koju će možda korisnici želeti brzo da odbace bez čitanja. Ovo čini da je ovaj obrazac granični kao anti-obrazac: oni ne rešavaju osnovne probleme zbunjujućeg korisničkog interfejsa. Dodavanje novog nivoa složenosti da bi se objasnio ionako složen interfejs tretira simptome, a ne osnovni uzrok. Štaviše, pažnja se skreće sa jednog saveta kako da se pojediančni problem reši na objašnjenje celog korisničkog interfejsa. Vi u suštini tražite od korisnika da zapamti ne samo kako da reši zadatak koji mu je pri ruci, već i sve druge zadatke koji mogu da se pojave. Višestruka uputstva povećavaju kognitivno opterećenje – posebno u kratkotrajnoj memoriji. Prvo se pozabavite osnovnim problemima Pre nego što se odlučite za korišćenje Coachmarks-a, pokušajte prvo da vidite da li možete da rešite problem na druge načine. Pozabavite se svim osnovnim problemima korisničkog interfejsa pre nego što uvedete Coachmarks. Razmislite o obrascima „Playthrough“ ili „Guided Tour“, koji korisnicima omogućavaju bezuslovnu pomoć kad stupe u interakciju sa elementima o kojima dobijaju uputstva. Ako morate da koristite Coachmarks, budite svesni kognitivnog opterećenje korisnika. Možemo da se setimo samo 3-4 stvari odjednom. Postavite markere na čitljiv način i lake za pregled. Umesto da samo prikazujete snimak ekrana, pokušajte da postavite oznake preko normalnog pogleda korisnika na korisnički interfejs. 4.1.2. Igranje (Playthrough) Rezime problema Korisnik želi da zna kako da koristi različite funkcije aplikacije.
  • 3. Primer tumblr.com ▲ Kada se prijavite za novi Tumblr blog, vaš nalog je popunjen sadržajem tako da možete početi da istražujete sve detalje. Dok pretražujete okolo, interfejs je objašnjen umetnutim okvirima pomoći. https://ui-patterns.com/patterns/playthrough/examples Upotreba  Koristite kada želite da predstavite osnovne interakcije korisniku nego što mu dozvolite da uđu u ceo proizvod  Koristite kada želite da omogućite korisnicima da nauče i istraže osnovne veštine potrebne za korišćenje proizvoda  Koristite kada želite da dozvolite bezuslovnu pomoć  Koristite kada želite da omogućite korisnicima da uđu u svet proizvoda bez da dožive neuspeh  Koristite kada želite da omogućite korisnicima da uče kroz rad  Koristite kada želite da stvorite prostor bez rizika za korisnike da izgrade veštine i steknu neka početna dostignuća  Koristite kada želite da korisnici razviju skup osnovnih kompetencija koje im pomažu da pređu na napredne radnje  Koristite kada želite da ostavite pozitivan prvi utisak tako što ćete korisniku omogućiti rani uspeh  Nemojte koristiti kada postoji šansa da će korisnici osetiti da dajete previše. Omogućite preskakanje. Rešenje Autentičan prostor namenjen korisnicima gde početnici mogu bezbedno da istražuju i uče osnovne veštine. Poštedite korisnike neuspeha tako što ćete ih upoznati sa osnovnim interakcijama. Omogućite korisnicima da nauče i steknu osnovne veštine pre nego što uđu u potpuno iskustvo proizvoda.
  • 4. Obezbedite tekstualnu pomoć i osnovne ciljeve kako bi mogli da se igraju interfejsom, ali i da uče kako interfejs radi dok se igraju. Ovaj obrazac je nešto što pružate korisniku pre nego što mu dozvolite da uđe u potpuno iskustvo proizvoda, što ga upoznaje sa osnovnim interakcijama i omogućava mu da nauči i istraži te osnovne veštine. Ovaj obrazac je poznat iz igara, gde se novi igrači podstiču da isprobaju početni nivo, gde dobijaju tekstualnu pomoć i neke osnovne ciljeve, tako da mogu da igraju igru, ali i da uče igru dok je igraju. Neka korisnici uče kroz stvarne zadatke Tražeći od korisnika da naprave svoj prvi korak u aplikaciji, aplikacija može da angažuje korisnike odmah. Ovo je uobičajeno u aplikacijama koje zavise od održavanja od strane korisnika da bi aplikacija radila. Neprimetno nastavite iskustvo u celom proizvodu Prenesite sva dostignuća koja je korisnik stekao u obrascu u potpuno i normalno iskustvo proizvoda. Učinite prelazak sa obrasca na normalno iskustvo sa proizvodom što je lakše moguće. Omogućite opciju preskakanja Neki ljudi samo da zarone u proizvod od samog početka. Uvek dozvolite izbegavanje ovog obrasca tako što ćete omogućiti korisniku da ga preskoči. Nemojte razzvlačiti upotebu ovog obrasca Ograničite upotebu obrasca na relevantne osnovne zadatke i testirajte ga kako biste saznali koja dužina je ugodna za korisnike. Neki korisnici bi mogli da vole duže igranje sa obrascem od drugih, pa budite sigurni da steomogućili da se izbegne korišćenje ako korisnik to želi. Obrazloženje Omogućavajući korisnicima da rano i bezbedno iskorače u ceo svet proizvoda, možete sprečiti korisnike da se suoče sa neuspehom ako nisu imali uvodna uputstva. 4.1.3. Linijski nagoveštaj (Inline Hint) Rezime problema Korisnik želi da sazna o novim ili nepoznatim karakteristikama interfejsa na nenametljiv način Primer
  • 5. klout.com ▲ Na Klout.com, Inline Hint je kombinovan sa šablonom dizajna Blank Slate. https://ui-patterns.com/patterns/inline-hints/examples Upotreba  Koristite kada želite da poboljšate čitljivost vođene pomoći, pošto su ugrađeni nagoveštaji formatirani u skladu sa drugim sadržajem.  Koristite kada ne želite da prekinete ili pokvarite doživljaj sadržaja.  Koristite za pružanje korisnih informacija u kombinaciji sa obrascem „Blank Slates“.  Nemojte koristiti kada želite da budete potpuno sigurni da su korisnici videli vaš nagoveštaj, jer je suptilan izgled u riziku da bude ignorisan.  Ne koristite za prenošenje kritičnih instrukcija. Rešenje Kombinujte savete i podučavanje sa sadržajem za besprekorno iskustvo. Koristite postojeći izgled da biste se neprimetno uklopili kako savete tako i druge oblike podučavanja. Integrisano iskustvo korišćenja oblika normalnog i svakodnevnog sadržaja omogućava čitljiviji i relevantniji oblik instrukcija koji ne prekida i ne kvari doživljaj sadržaja. Nagoveštaji (saveti) su neprimetno integrisani u izgled okolnog sadržaja tako da ne ometaju ili prekidaju interakciju korisnika. Ugrađeni nagoveštaji ne moraju da se odbacuju i zatvaraju nakon što su pročitani ili da nestanu nakon upotrebe. Nemojte koristiti ovaj obrazac ako želite da budete potpuno sigurni da su korisnici videli vaš nagoveštaj, jer zbog suptilnog izgleda postoji rizik da bude ignorisan. Koristite umetnute savete da pojačate druga uputstva koja se nalaze na drugom mestu u interfejsu. Kako se ugrađeni saveti stapaju sa ostatkom sadržaja, korisnici se lako zbune ako informacije saveta nisu relevantne za sadržaj koji ga okružuje. Nemojte ih preterano koristiti; uverite se da su relevantni i da ne preopterećuju doživljaj primarnog sadržaja.
  • 6. Obrazloženje Budući da ugrađeni nagoveštaji dobijaju oblik normalnog, svakodnevnog sadržaja, dizajneri se nadaju da će biti lakše čitljivi i relevantniji od drugih oblika instrukcija. 4.1.4. Vođeni obilazak (Guided Tour) Rezime problema Korisnik želi da sazna o novim ili nepoznatim karakteristikama interfejsa. Primer livejournal.com ▲ Dok se spremate da ažurirate svoj post na blogu, pokreće se pravovremeno uputstvo da vas obavesti o novoj funkciji https://ui-patterns.com/patterns/Guided-tour/examples Upotreba  Koristite kada želite da pomognete korisnicima da se naviknu na vaš korisnički interfejs.  Koristite kada želite da obavestite svoje korisnike o novim ili nepoznatim funkcijama  Koristite kada vaš korisnički interfejs nije sam po sebi razumljiv Rešenje Navođenje „Tačno na vreme“ se pokreće onako kako korisnik istražuje.
  • 7. Omogućite korisnicima da uče sopstvenim tempom koristeći opise alata, ekrane, modele i upozorenja koja nagoveštavaju optimalnu upotrebu interfejsa u kontekstu svakodnevne upotrebe. Napravite niz pojedinačnih nagoveštaja koji se progresivno pojavljuju tokom prve upotrebe proizvoda ili interfejsa. Saveti mogu biti bilo šta, od opisa alatki, preklapanja do modalnih upozorenja. Neki korisnici cene pomoć, a drugi ne. Budite sigurni da uvek dozvolite korisniku da odbacite ovaj obrazac ako mu nijepotreban. Vođeno proizvodom u odnosu na korisničko vođenje. Odlučite da li želite da obilazak bude vođen proizvodom ili korisnikom. U obilasku vođenom proizvodom, nagoveštaji napreduju u linearnom nizu, dok se nagoveštaji u obilasku koje vodi korisnik pokreću kada korisnik dostigne odgovarajuće tačke u svom radu. Za obilaske koje vodi korisnik, saveti se mogu pojaviti različitim redosledom za različite korisnike. 4.1.5. Šetnja (Walkthrough) Rezime problema Korisnik želi da nauči o proizvodima i uslugama koje nudite kako bi doneo odluku da naruči uslugu ili kupi proizvod. Primer slack.com ▲ Kada prvi put uđete u softver za onlajn ćaskanje Slack, dočekaće vas kratak obilazak proizvoda. https://ui-patterns.com/patterns/Tour/examples
  • 8. Upotreba Koristite da biste korisnicima pružili uvid u to šta je vaša ponuda pre nego što potroše vreme ili novac na to. Koristite da biste prodali svoj proizvod. Koristite da biste omogućili korisnicima da donesu „informisanu“ odluku o kupovini. Koristite za uputstva korisnika kako da rešavaju uobičajene zadatke. Koristite za podučavanje korisnika o svom proizvodu i šta on može da uradi. Koristite za podučavanje korisnika o posebnim karakteristikama proizvoda. Koristite za podučavanje korisnika o pitanjima koja nisu vezana za veb sajt. Rešenje Predstavite glavne karakteristike vašeg proizvoda pre nego što korisnik počne da ga koristi. Predstavite svoj proizvod i/ili ponudu pre nego što počne pravo korisničko iskustvo. Uputstva se često predstavljaju kao statična ili animirana projekcija slajdova ili pomoću video zapisa. Neka bude kratko i precizno jer korisnici to često preskaču kako bi započeli korišćenje sajta. Uputstvo objašnjava proizvod ili uslugu u smislu karakteristika, prednosti i uopšte šta vam proizvod ili usluga omogućavaju. Najčešće je podeljen na više od jednog odeljka, koji se ponekad stavljaju na zasebne stranice. Imajući ovo na umu, evo nekoliko principa koje treba imati na umu kada razvijate ovaj obrazac. Fokusirajte se na zadatke korisnika Bez obzira da li je vodič isključivo marketinški alat ili alat za podučavanje, važan je fokus na zadatke korisnika. Kako im možete pomoći? Ciljajte na dobru ravnotežu između opisivanja osnovnih stvari i objašnjavanja svega. Samo opisivanje osnovnih stvari možda neće korisnicima dati dovoljno širok pogled na vaš proizvod da bi im pomogao u odluci. Ako ste previše opširni, s druge strane, mogli biste uplašiti i oterati korisnika. Oduprite se porivu da pokažete najnovije i najbolje karakteristike – najvažnije je da ubedite svoje korisnike da će im vaš proizvod pomoći u njihovim osnovnim problemima. Nove korisnike ne zanimaju vaša samoreklamiranja; oni samo žele da ostvare svoje ciljeve. Obezbedite vizuelne reference Nemojte samo pisati o svom proizvodu i njegovim karakteristikama. Uključite snimke ekrana, ilustracije, pa čak i video snimke o tome kako se koristi vaš proizvod. Ovo će omogućiti vašim korisnicima da steknu bolji osećaj gde tačno da kliknu – ali i koliko je vaš proizvod zapravo jednostavan – kako je trebalo da funkcioniše i da se koristi. Uključite direktne veze
  • 9. Dok korisnici koriste uputstva da bi saznali više o vašem proizvodu ili usluzi, oni će ići napred-nazad između uputstava i proizvoda. To je njihova referentna tačka, pa im olakšajte da prelaze između njih dvoje. Navedite direktne veze, ako je moguće, do odeljaka koje objašnjavate. Rešite probleme ili brige unapred Pozabavite se glavnim problemima koje vaši korisnici mogu imati kada pokušavaju da odluče da li da koriste vaš proizvod ili ne. „Da li je bezbedno“, „Mogu li lako da uvezem svoje podatke?“, „Mogu li da izvezem svoje podatke ako odlučim da se preselim?“.. Obrazloženje Pregled vašeg proizvoda ili usluge pomaže u informisanju korisnika o tome:  Šta vaš proizvod može da uradi  Da li je vaš proizvod ono što su tražili  Da li će vaš proizvod pomoći da ostvare svoje zadatke  Da li treba da prihvate vašu uslugu ili da plate za vaš proizvod Kupovina proizvoda ili usluge može biti skupa i korisnicima će biti potrebna značajna količina ubeđivanja i ohrabrenja pre kupovine. Uputstvaa omogućavaju korisnicima da dobiju uvid u vaš proizvod bez potrebe da se prijave. 4.1.6. Prazna tabla (Blank Slate) Rezime problema Korisnik želi da počne da koristi aplikaciju, ali mu je potrebno uputstvo u vidu primera kako će aplikacija izgledati, osećati se i ponašati se kada je u punoj funkciji i ispunjena podacima. Primer
  • 10. upwork.com ▲ Prazna tabla u Upwork-u ima dve svrhe: da omogući korisnicima da kreiraju nove poslove ili da počnu da traže slobodnjake za kontakt. https://ui-patterns.com/patterns/BlankSlate/examples Upotreba Koristite kada je vaša aplikacija prazna i beživotna pre nego što korisnik počne da unosi podatke u sistem. Koristite kada želite da motivišete korisnika da počne da koristi sistem. Koristite kada želite da pomognete korisniku da počne da koristi vašu veb aplikaciju. Koristite kada želite da prikažete najbolje prakse korišćenja vaše veb aplikacije. Koristite kada želite da usmerite korisnika da dobro počne sa svojom veb aplikacijom. Rešenje Opustite, vodite ili ohrabrujte korisnike kada nema sadržaja za prikaz. Iako prazne table nisu tipične, one su važna prilika za dobar dizajn kako bi se izbeglo razočarenje ili zabuna korisnika. Uverite se da se korisnici osećaju bezbedno i da znaju šta sledeće treba da urade kada prvi put koriste vaš proizvod ili kada obrišu sav sadržaj. Dajte korisniku utisak o tome kako će sistem izgledati kada se napuni podacima – ili ga vodite i ohrabrite da počne da ga popunjava podacima. Možete da predstavite korisniku nekoliko vrsta korisnih informacija na praznoj tabli:  Prikažite primer snimka ekrana kako će stranica izgledati kada se napuni sadržajem,  Ubacite brze vodiče i tekstove pomoći,  Objasnite najbolje načine za početak,  Postavljajte pitanja koja će prvi put postaviti korisnik: Šta je ovo? Šta da radim sada?, i  Postavite očekivanja koja će pomoći u smanjenju frustracije, zastrašivanja i opšte konfuzije. Obrazloženje Prazan list je generalno prvi ekran koji se korisniku prikazuje kada započne nešto novo u aplikaciji. To može biti ekran na koji su usmereni nakon kreiranja naloga ili prvi ekran koji vide kada koriste deo aplikacije koju ranije nisu koristili. Prazan list govori korisniku kako će izgledati stranica na kojoj se nalazi, kada se na kraju popuni sadržajem. Kreiranje praznog lista postavlja očekivanja korisnika. Novi korisnici su često zastrašeni praznim ekranima sa malo ili bez uputstva. Usmeravanje korisnika sa unapred popunjenim početnim stanjem je najbolji način da se uspostavi poverenje i stekne razumevanje. Uverite se da je prvi utisak koji korisnik dobije o vašoj aplikaciji pozitivan. Neka znaju zašto treba tu da ostanu.
  • 11. 4.2. Registracija (Registration) 4.2.1. Spora registracija (Lazy Registration) Rezime problema Korisnik želi da odmah koristi i isproba vašu veb lokaciju bez prethodne formalne registracije Primer moqups.com ▲ Kada odete na Moqups, odmah ćete biti prebačeni u aplikaciju u punom izgledu. Otvoreno je na radnom dokumentu koji objašnjava kako sve funkcioniše. https://ui-patterns.com/patterns/LazyRegistration/examples Upotreba  Koristite kada je ključno za vašu veb lokaciju da omogućite korisniku da pregleda i komunicira sa vašom veb lokacijom pre nego što zaista registruje nalog.  Korišćenje prilikom davanja ličnih podataka potrebnih za formalnu registraciju naloga je veliki korak za vaše korisnike.  Koristite kada želite da omogućite korisnicima da isprobaju vašu veb lokaciju (i zauzvrat je uporede sa alternativama) pre nego što donesu odluku da registruju nalog na vašoj veb lokaciji.  Koristite kada se pri registraciji naloga zahteva razmena novca, zbog čega bi korisnik možda želeo da prvo „pretraži” vaš proizvod kako bi doneo odluku.
  • 12.  Koristite kada ne želite da prisilite svoje korisnike da se registruju na početku - kada ne želite da vršite preveliki pritisak na svoje korisnike  Koristite da bi vaši korisnici odmah počeli da unose podatke u vaš sistem. Kada su već uložili vreme u vaš sistem, korak do registracije naloga je manji nego ako nije uloženo vreme. Rešenje Dozvolite korisnicima da pristupe ograničenom skupu funkcija, funkcionalnosti ili sadržaja pre ili bez registracije. Omogućite korisnicima da imaju dovoljno interakcije sa vašim sistemom tako da stvarna registracija bude samo još jedan mali korak u većem procesu: mali korak, a ne obaveza. Lagana verzija ovog obrasca je korpa za kupovinu sajta za e-trgovinu, gde korisnik može da akumulira relevantne proizvode u korpi, a zatim da registruje nalog ako odluči da obavi kupovinu. U težoj verziji ovog obrasca, anonimni korisnički nalog se odmah kreira za korisnika – pun sa automatski generisanim ID-om baze podataka i dodatnim kolačićem sa ID-om naloga koji će obezbediti da podaci o korisniku i informacije koje je on ili ona uneo ostanu upamćeni prilikom sledeće posete. U odgovarajućim intervalima, neaktivni anonimni nalozi se brišu iz baze podataka kako ne bi zatrpali sajt. Kako korisnik komunicira sa sistemom, podaci se akumuliraju na nalogu. Dok neki podaci možda neće biti prikazani korisniku, druge vrste podataka hoće. Poslednji podataci će učiniti da se korisnik registruje – vidljivi dokaz da je korisnik uložio energiju u korišćenje sistema. Pametan način za prikupljanje takvih podataka je otkrivanje rupa u podacima koje korisnik može popuniti. Dve takve rupe su korisničko ime i lozinka. Obrazloženje Isporučite vrednost pre nego što zatražite konverziju. Korpa za kupovinu je klasičan obrazac koji se zasniva i na ovom obrascu: korisnici mogu da pretražuju i biraju proizvode, ali samo moraju da se registruju kada nastave sa odjavom.k Šablon omogućava korisnicima da koriste vaš sistem i preduzmu akciju pre ili bez registracije. Ideja je da omogućite korisnicima da imaju dovoljno interakcije sa vašim sistemom, tako da stvarna registracija bude samo još jedan mali korak u širem procesu. To je mali korak nije obaveza. Klasični obrazac „Korpa za kupovinu“ je dobar primer spore registracije: korisnici mogu da pretražuju i biraju proizvode i moraju da se registruju tek kada se odluče da kupe. Da bi ovaj obrazac funkcionisao, morate da podstaknete korisnike da vam daju podatke za registraciju koje tražite. Morate da pružite vrednu uslugu svojim korisnicima kako bi vam oni zauzvrat vratili svoje podatke. Želite da koristite klasičnu motivaciju tipa „šargarepu i štap“. Ako su podaci o registraciji koje tražite kod korisnika osetljivi, morate biti u mogućnosti da uverite svoje korisnike da će njihovi podaci biti bezbedni i bezbedni. Diskusija Pitanja koja treba postaviti kada planirate svoju sporu registraciju
  • 13.  Razmislite kako možete izbjeći obrasce za prijavu u korist postepenijeg angažmana.  Ako odlučite da koristite obrazac „Spora registracija“, uverite se da se fokusirate na to da pokažete kakopotencijalni klijenti mogu da koriste vašu uslugu i zašto bi im to bilo bitno.  Automatski generisani nalozi su odlični, ali ako odlučite da ih koristite, onda se pobrinite da dizajnirate jasan način za korisnike da pristupe svojim nalozima. Šanse su da će ljudi ili ignorisati ili neće videti mejlove o kreiranju vašeg naloga – i mogu biti nesigurni da li uopšte imaju nalog ili ne. 4.2.2. Pretplata (Paywall) Rezime problema Korisnik treba da plati da bi dobio pristup ograničenom području na veb lokaciji. Primer ▲ U zemljama EU, Facebook (Meta) daje korisnicima izbor da koriste njihovu uslugu besplatno dok prikazuju oglase, ili putem mesečne pretplate – bez oglasa. https://ui-patterns.com/patterns/Paywall/examples Upotreba
  • 14.  Koristite kada vam je potreban način da direktno zaradite novac na sadržaju koji proizvodite.  Koristite kada su vaši korisnici spremni da plate za sadržaj koji proizvodite.  Koristite kada je percipirana vrednost vašeg sadržaja veća od iznosa novca koji tražite za njega.  Nemojte koristiti kada vaša veb lokacija zavisi isključivo od zarade na prikazima banera, jer je najveći mogući broj prikaza stranice tada najvažniji. Rešenje Omogućite pristup samo korisnicima koji su platili. Postoje razne strategije pretplate koje se danas koriste. Neke strategije blokiraju sav sadržaj dok se ne izvrši plaćanje, neke vas mame i traže novac nakon što pogledate više članaka, druge veb stranice biraju sadržaj koji nije besplatan za sve. Ispod je pregled glavnih varijacija. Strategije  Paywall: Sav sadržaj je iza jednog velikog sistema pretplate koji okružuje ceo sajt. Primer je The Times  Freemium: U freemium modelu, neki sadržaji su besplatni za sve, a neki su pod pretplatom. Primeri su The Vallstreet Journal, Berlingske, Aftonbladet, a kod nas NIN, Vreme...  Taksimetar: Prvih nekoliko članaka možete besplatno pogledati nakon što se aktivira „platni zid“. Primeri su The Nev Iork Times, Financial Times  Vremenska ograničenja: Kupujete dnevnu, nedeljnu, mesečnu ili godišnju propusnicu ili pristup arhivi na više dana. Primeri su The Observer, The Guardian  Prodaja na veliko: Preprodaja i prodaja kompanijama. Primeri su Financial Times i Mediawatch  Prodaja na komad: Kupovina pojedinačnih priča i usluga. Plaćanje ne mora biti novčano Većina pretplataa uključuje novčanu razmenu, međutim postoji nekoliko načina na koje korisnik može platiti da bi došao iza „platnog zida“: Novčana razmena: Tradicionalna pretplata uključuje neku vrstu novčane razmene - može se platiti za jednu informaciju ili putem pretplate Pretplata na štampane medije: Umesto da kupujete pretplatu samo za korišćenje veb lokacije, zahtevajte od korisnika da poseduju pretplatu na štampano izdanje medija kako biste ostvarili oba toka prihoda: onlajn i oflajn. Dozvola: Dozvolite vašim korisnicima da vam daju dozvolu da ih pozovete, pošaljete im e-poštu, da dobijete informacije sa facebook-a, da kontaktirate prijatelje, itd. Dobijanje dozvole za izgradnju dugoročne veze ponekad može biti vrednije od obične novčane razmene . Potencijalni klijent: Takođe možete dozvoliti korisnicima da daju dozvolu da ih oglašivač ili treća strana kontaktira. Vreme: Dozvolite svojim korisnicima da popune upitnik – da li želite da znate o profilu svojih korisnika i njihovom ponašanju – ili bi oglašivač ili treća strana mogla biti zainteresovana da sazna o
  • 15. vašim korisnicima? Takođe možete da dozvolite svojim korisnicima da gledaju video reklamu od oglašivača ili na drugi način da troše svoje dragoceno vreme. Deljenje na društvenim mrežama: Omogućite korisnicima da dobiju pristup sadržaju tako što prvo podele vezu na društvenim mrežama. Neke veb stranice i aplikacije koriste usluge „plati tvitom“ i „plati lajkom“. Obrazloženje Pretplata se danas koristi kao alternativni izvor prihoda za veb stranice, dok je ranije oglašavanje preko banera bio tradicionalni izvor prihoda. Kako korisnici menjaju svoje navike sa štampe na internet, medijskim kompanijama je sve teže da baziraju svoje poslovanje samo na prihodima od oglašavanja. Pretplata je naširoko uvedena da bi se nadoknadio izgubljeni prihod. 4.2.3. Registracija naloga (Account Registration) Rezime problema Želite da znate ko je aktivni korisnik da biste pružili personalizovani sadržaj ili mogućnosti za kupovinu. Primer myspace.com ▲ Kada odlučite da se registrujete sa svojom e-poštom (a ne drugom društvenom uslugom) na MySpace.com, ovako izgleda obrazac za registraciju. https://ui-patterns.com/patterns/AccountRegistration/examples
  • 16. Upotreba  Koristite kada želite da ograničite pristup određenom sadržaju.  Koristite kada želite da kontrolišete koji korisnici imaju pristup sadržaju.  Koristite kada kontekstualne informacije moraju biti predstavljene korisniku. Kontekst može zavisiti od geografskog položaja korisnika, vremenske zone, uzrasta, interesovanja, pa čak i od ranije interakcije korisnika sa vašom veb lokacijom (dodati prijatelji, poslat sadržaj itd.)  Koristite kada želite da zaštitite informacije korisnika. Rešenje Zatražite od korisnika da se registruju i otvore nalog kako bi im pružili personalizovano iskustvo. Dozvolite korisnicima da registruju nalog kako bi im omogućili čuvanje informacija, pružili personalizovano iskustvo ili omogućili pristup ograničenim resursima. Uobičajene mane dizajna za funkcije registracije i prijavljivanja uključuju:  Vidljivost: uverite se da su dugmad „Registracija“ i „Prijava“ jasni, da se lako vide i da im je lako pristupiti. Ne sakrivajte dugme „Prijava“.  Poziv na akciju: Skrenite pažnju na ključne operacije kao što su „Registrujte novi nalog“, „Prijava“ i „Zaboravio sam lozinku“. Uverite se da su vaša dugmad za akciju privlačna i podstaknite nove korisnike da se pridruže.  Podsticaj: Iskoristite priliku za registraciju na ključnim lokacijama, nemojte se oslanjati samo na jednu tačku akcije.  Redundantnost: Obezbedite više dugmadi „Prijava“ na ključnim lokacijama. Korisnici često čekaju do poslednjeg trenutka da se prijave. Ključne lokacije su tačke akcije; na primer kada korisnik želi da doda komentar na blog post.  Komplikovano: Ne frustrirajte korisnike komplikovanim zahtevima za lozinku. Jačina lozinke koja vam je potrebna mora da odgovara potrebi za zaštitom. Politika lozinki koja je previše stroga može ometati registraciju i obeshrabriti potencijalne korisnike. Možete olakšati registraciju naloga svojim korisnicima:  Navedite jednostavan i razumljiv opis zahteva za korisnička imena i lozinke.  Pored toga, možda biste želeli da obezbedite merač jačine lozinke da biste pružili trenutnu povratnu informaciju o tome koliko dobro uneta lozinka ispunjava zahteve umesto da prikažete poruku o grešci nakon što korisnik klikne na dugme za slanje.  Slično tome, možda ćete želeti da proverite dostupnost korisničkog imena pri svakom pritisku na taster, tako da korisnik ne mora da šalje ceo obrazac nekoliko puta pre nego što mu se dozvoli ulazak.  Kada se prijavi, vratite se na stranicu sa koje je korisnik došao. Ako je poenta radnje bila slanje komentara na post na blogu, preusmerite korisnika na obrazac za komentare nakon prijave.  Razmislite o ugrađivanju opcija društvenog prijavljivanja kao što je „Prijava na Facebook“ u svoju veb lokaciju/aplikaciju i u potpunosti izbegnite celu novu priču oko lozinki. Obrazloženje
  • 17. Registracija naloga omogućava da personalizovani i kontekstualni sadržaji budu predstavljeni autentifikovanim korisnicima. Registracija naloga omogućava pamćenje detalja o korisniku; liste želja proizvoda, preferencije, interesovanja, adrese za isporuku i fakturisanje, PDV broj za potrebe obračuna i još mnogo toga. Prednosti omogućavanja korisnicima da registruju nalog na vašoj veb lokaciji uključuju i to da:  Znate ko koristi vaš sistem  Znate koliko često posećuju  Znate šta rade na vašem sajtu.  Možete da skladištite informacije koje bi vašim korisnicima mogle zatrebati kasnije, kao što su informacije o obračunu ili liste želja za buduće kupovine.  Možete koristiti registraciju naloga da rezervišete poseban sadržaj svojim redovnim korisnicima.  Možete razlikovati cene, prikazane informacije i prava pristupa u zavisnosti od toga ko je prijavljen korisnik. Diskusija Da li je potrebna registracija naloga i kada? Kupci ne vole da se identifikuju dok im to zaista nije potrebno. Moraju tek onda kada on ili ona odluče da preduzmu akciju – na primer da kupe proizvod. Do tada, ne želite da blokirate korisnike da preduzmu radnju ili pregledavs vašu veb lokaciju. Uopšteno govoreći, želite da zaštitite samo stranice za koje je potrebno da znate identitet korisnika. Korisnici mrze kad moraju da registruju nalog da bi uradili nešto jednostavno. Primer preranog prijavljivanja bi bio primoravanje korisnika da se prijave pre nego što mogu da pregledaju proizvode vaše onlajn prodavnice. Korisnici žele da dobiju predstavu o tome šta se nudi pre nego što se obavežu na kreiranje naloga, a ne obrnuto. Kakav sajt vodite? Da li je zaista potrebno razviti odnos sa svojim klijentima (ili korisnicima) ili je tipično ponašanje vaše vrste kupaca da ostanu anonimni? U poslednjem slučaju, možda biste želeli da razmislite o tome da uopšte ne zahtevate registraciju naloga – čak i kada korisnik kupuje proizvod. Zašto bi se korisnik registrovao? Morate jasno navesti koje će koristi korisnik imati od registracije naloga na vašoj veb lokaciji jer ovaj korak predstavlja opterećenje za korisnika. Jedan od načina da to uradite je da direktno saopštite prednosti u pisanim rečenicama kao što su „Pratite svoju porudžbinu“, „Promenite svoju rezervaciju kasnije“ ili „Primite naš bilten“ (Da, ovo je zapravo korist za neke ljude) . Drugi način da se saopšte prednosti registracije naloga je blokiranje tačaka akcije. Primeri za to su slanje komentara ili sadržaja na sajt. Postavljanje previše (nepotrebnih) pitanja Poznavanje vaših korisnika je važno, ali želja da ih poznajete previše dobro može ometati registraciju naloga. Iako vaše marketinško odeljenje želi da sazna tačna interesovanja, broj telefona ili čak veličinu godišnje plate vaših korisnika, pitati ih ovo nije uvek dobra ideja. Pošto su neželjene e-poruke uobičajena pojava, prosečan korisnik interneta će vam nerado poveriti takve podatke.
  • 18. U određenim slučajevima možete zahtevati lične podatke od korisnika, a da biste zadržali poverenje, morate izjaviti zašto su vam potrebni. Jednostavna izjava „U slučaju da treba da vas kontaktiramo, navedite broj telefona“ će biti dovoljna. Izrada korisničkog imena i smišljanje nove lozinke su već veliki zadaci za korisnika. Činjenica da korisnik treba da razmisli i odluči o ovim stvarima znači da je korisnikov fokus pomeren sa zadatka koji je radio.