4 sile korisničkog iskustva

  • Vrijednost (Value) – koliko rješenje donosi stvarnu vrijednost korisniku i poslovanju.
  • Iskoristivost (Usability) – koliko je lako i učinkovito koristiti sustav.
  • Poželjnost (Desirability) – koliko je proizvod privlačan, emotivno ugodan i estetski prihvatljiv.
  • Mogućnost prihvaćanja (Adoptability / Viability) – koliko je lako da korisnici prihvate i usvoje proizvod, te koliko je održiv za organizaciju.

–

Inkluzivnost

Inkluzivnost u kontekstu korisničkog iskustva (UX/UI) znači da je proizvod, usluga ili sadržaj dostupan, razumljiv i ugodan što većem broju ljudi, bez obzira na njihove razlike – fizičke, kognitivne, kulturne, jezične ili društvene.

Ključne dimenzije inkluzivnosti:

  • Pristupačnost (accessibility) – omogućiti korištenje osobama s invaliditetom (npr. screen reader kompatibilnost, kontrast boja, titlovi, prilagodba fonta).
  • Jezik i ton – koristiti jednostavan, razumljiv i neutralan jezik, bez diskriminacije.
  • Kultura i kontekst – uzeti u obzir različite običaje, vrijednosti i očekivanja (npr. formati datuma, valuta, simboli).
  • Tehnološka dostupnost – aplikacija/web treba raditi i na sporijim uređajima ili lošijem internetu.
  • Raznolikost korisnika – dizajn ne pretpostavlja “idealnog” korisnika, nego se prilagođava različitim skupinama.

Ukratko: inkluzivnost znači dizajnirati za sve, ne samo za većinu.

–

Geštalt

Geštalt u dizajnu i psihologiji percepcije odnosi se na načelo da „cjelina nije samo zbroj dijelova“ – ljudski mozak prirodno organizira elemente u uzorke i strukture kako bi im dao smisao.

U UX/UI dizajnu Geštalt principi pomažu da korisničko sučelje bude razumljivije i intuitivnije.


Glavni principi su:

  • Sličnost (Similarity) – elementi koji izgledaju slično (boja, oblik, veličina) percipiraju se kao povezani.
  • Blizina (Proximity) – elementi koji su bliže jedni drugima djeluju kao grupa.
  • Zatvaranje (Closure) – mozak ima tendenciju „zatvoriti“ nepotpune oblike i prepoznati cijelinu.
  • Kontinuitet (Continuity) – elementi poredani u liniji ili krivulji percipiraju se kao povezani.
  • Figura–pozadina (Figure–ground) – odvajamo objekt (figuru) od pozadine.
  • Zajednički pokret (Common fate) – elementi koji se kreću u istom smjeru djeluju povezano.
  • Simetrija i red (Symmetry & order) – simetrični elementi djeluju kao jedna cjelina i lakše ih je razumjeti.

U praksi:

  • u webshopu proizvodi grupirani po kategorijama koriste blizinu i sličnost,
  • CTA gumb u kontrastnoj boji koristi figura–pozadina,
  • timeline u aplikaciji koristi kontinuitet da bi se pratio tijek procesa.

–

Narančasta boja – navesti 4 značenja

Narančasta boja u dizajnu i psihologiji boja nosi snažne asocijacije. Evo 4 česta značenja:

  • Energija i entuzijazam – povezuje se s aktivnošću, dinamikom i vitalnošću.
  • Toplina i prijateljstvo – djeluje toplo, vedro i poticajno, stvara osjećaj bliskosti.
  • Kreativnost i optimizam – potiče maštu i asocira na inovativnost i igru.
  • Poziv na akciju (call to action) – u marketingu i UX-u koristi se jer privlači pažnju i potiče korisnika da klikne, kupi ili se uključi.

–

Što od ponuđenih programa nije cms?

Figma (mislim da je to odgovor)

–

WCAG označava što?

WCAG označava Web Content Accessibility Guidelines – smjernice za pristupačnost web sadržaja. To je međunarodni standard koji definira kako učiniti web stranice, aplikacije i digitalne sadržaje pristupačnima osobama s invaliditetom (npr. slabovidne, gluhe, osobe s motoričkim poteškoćama, kognitivnim poteškoćama).

Glavne WCAG smjernice organizirane su oko 4 principa (skraćeno POUR):

  • Perceivable (Perceptibilno) – sadržaj mora biti prikazan na način da ga korisnici mogu doživjeti (npr. alt tekst za slike, titlovi za video).
  • Operable (Operabilno) – sve funkcije moraju biti dostupne putem tipkovnice, miša ili pomoćnih tehnologija.
  • Understandable (Razumljivo) – sadržaj i navigacija moraju biti jasni i predvidivi.
  • Robust (Robusno) – sadržaj mora biti kompatibilan s različitim preglednicima, uređajima i pomoćnim tehnologijama.

–

Don Norman

Don Norman je jedan od najvažnijih teoretičara i praktičara u području dizajna, ergonomije i korisničkog iskustva (UX).

–

Istraživanja mogu biti?

Primarna istraživanja

Prikupljanje novih, originalnih podataka direktno od korisnika.
Cilj: dobiti konkretne uvide iz prve ruke.
Primjeri metoda: intervjui, ankete, testiranje upotrebljivosti, promatranje.

Sekundarna istraživanja


Analiza već postojećih podataka i istraživanja.
Cilj: koristiti prethodno znanje za brže donošenje odluka.
Primjeri metoda: analiza literature, industrijskih izvještaja, analitika konkurencije, web statistike.

Generativna istraživanja (ponekad se kaže i „istraživačka“)


Fokus na otkrivanje potreba, problema i prilika prije nego što se dizajnira rješenje.
Cilj: razumjeti korisnike i njihov kontekst.
Primjeri metoda: etnografsko promatranje, intervjui, „day in the life“ studije, fokus grupe.

Formativna istraživanja


Provodi se tijekom razvoja dizajna, dok još ima prostora za izmjene.
Cilj: usmjeravati dizajn i otkrivati potencijalne probleme.
Primjeri metoda: testiranje prototipa, card sorting, tree testing.

–

Opisati razliku scruma i waterfalla

Waterfall = linearni, strogo planiran tok (slapni model)

  • Sekvencijalan proces – projekt ide korak po korak (analiza → dizajn → razvoj → testiranje → implementacija).
  • Rigidna struktura – jednom kada se faza završi, teško je vratiti se unazad.
  • Planiranje unaprijed – zahtjevi se definiraju na početku i malo se mijenjaju.

Prednosti: jasnoća, dobar za projekte s fiksnim zahtjevima i malim rizikom promjena.

Nedostaci: slaba fleksibilnost, problemi se često otkriju tek kasno (u testiranju).

Scrum = ciklički, fleksibilan tok s prilagodbama (agilni model)

  • Iterativan i inkrementalan proces – radi se u kratkim ciklusima (sprintovima, npr. 2 tjedna).
  • Fleksibilan pristup – zahtjevi se mogu mijenjati tijekom projekta.
  • Tim radi samostalno – naglasak na suradnji, transparentnosti i stalnom poboljšanju.

Prednosti: brza prilagodba promjenama, rani uvid u rezultate, kontinuirano testiranje i isporuka vrijednosti.

Nedostaci: zahtijeva disciplinu i visoku uključenost tima i klijenta.

–

Kako se nešto može naglasiti u hijerarhijskoj strukturi?

Nešto u hijerarhijskoj strukturi (npr. naslov, važna informacija, gumb) može se naglasiti pomoću različitih vizualnih i strukturnih sredstava. Evo glavnih načina:

Tipografija

  • Veći font u odnosu na body tekst.
  • Boldiranje ili italic.
  • Različita boja slova.
  • Različit font ili stil.

Boja i kontrast

  • Korištenje kontrastne boje u odnosu na ostatak sadržaja.
  • Upotreba naglašavajućih tonova (npr. narančasta za CTA gumb).

Prostor (white space)

  • Dodatni razmaci oko elementa.
  • Odvajanje od ostalih sadržaja tako da “diše”.

Vizualni elementi

  • Ikone ili ilustracije uz tekst.
  • Okviri, pozadinske boje ili highlight.
  • Animacija (npr. hover efekt, pulsiranje gumba).

Pozicija u strukturi

  • Smještanje na vrh stranice/ekrana.
  • Ponovljeno pojavljivanje na ključnim mjestima.

–

Objasniti na primjeru gumba važnost oblika

Pravokutni gumb s blago zaobljenim rubovima

  • Najprepoznatljiviji oblik gumba u digitalnim sučeljima.
  • Jasno signalizira „ovdje klikni“.
  • Korisnici ga instinktivno doživljavaju kao interaktivan element.

Potpuno kvadratni gumb bez zaobljenja

  • Može izgledati „hladno“ ili strogo, ponekad se doživljava kao dio layouta, a ne akcijski element.
  • Ako nema sjenu, kontrast ili hover efekt, korisnik ga može previdjeti.

Okrugli gumb

  • Privlači pažnju jer iskače iz standarda.
  • Dobar za „floating action button“ (npr. + za dodavanje u aplikacijama).
  • No, ako se koristi previše, može zbuniti korisnika jer nije uobičajen oblik za svaku radnju.

Predug ili premalen gumb

  • Ako je predug, gubi fokus i djeluje kao ukrasni element.
  • Ako je premalen, teško ga je kliknuti (posebno na mobilnim uređajima).

–

Što je arhitektura informacija

Arhitektura informacija (Information Architecture – IA) je disciplina u UX dizajnu koja se bavi strukturiranjem, organiziranjem i označavanjem informacija tako da korisnici: lako pronađu ono što traže, razumiju gdje se nalaze, i intuitivno znaju kamo mogu dalje ići.

–

Razlika intervjua i fokus grupa

Intervju (individualni)

  • 1 na 1 – istraživač razgovara s jednim ispitanikom.
  • Dubina – omogućuje detaljno istraživanje osobnog iskustva, stavova i motivacija.
  • Povjerljivost – ispitanik se često osjeća slobodnije podijeliti osjetljive informacije.
  • Fokus – koncentracija samo na jednog sudionika → nema utjecaja grupe.
  • Primjena: kada želimo osobne uvide, dublje razumjeti pojedinačne potrebe i ponašanja.


Fokus grupa

  • Grupni razgovor – obično 6–10 ljudi + moderator.
  • Širina – dobiva se više mišljenja u kraćem vremenu.
  • Dinamika grupe – sudionici mogu jedni druge inspirirati, ali i utjecati na iskrenost odgovora.
  • Interakcija – često otkriva društvene norme, zajedničke stavove i konflikte.
  • Primjena: kada želimo testirati ideje, reakcije na koncept ili razumjeti grupnu dinamiku.

Ukratko:
Intervju = dublje, individualno razumijevanje.
Fokus grupa = širi spektar mišljenja i interakcija među ljudima.

–

Pristranost

Pristranost (bias) znači sustavnu sklonost prema određenom ishodu, ideji ili skupini, koja može narušiti objektivnost i dovesti do pogrešnih zaključaka u istraživanju, dizajnu ili donošenju odluka.

–

Ikona

Ikona je mali grafički znak ili simbol koji vizualno predstavlja radnju, objekt, ideju ili funkcionalnost.

U kontekstu UX/UI dizajna ikone imaju ulogu da:

  • povećaju prepoznatljivost (npr. košarica = kupnja, povećalo = pretraga),
  • štede prostor (umjesto teksta koristi se vizual),
  • pomažu u hijerarhiji i bržem skeniranju sadržaja,
  • stvaraju vizualni identitet aplikacije ili brenda.

Primjeri:

  • Akcijske ikone → košarica, search, meni (hamburger), share.
  • Statusne ikone → notifikacija, signal, baterija.
  • Dekorativne ikone → upotpunjuju vizualni stil, ali nisu nužno funkcionalne.

Dobra ikona mora biti: jednostavna, jasna, konzistentna i univerzalno prepoznatljiva.

–

Što dizajneri cesto zaborave dizajnirat – navedi 4 primjera

Prazna stanja (empty states)

  • što korisnik vidi kad nema sadržaja (npr. prazna košarica, nema rezultata pretrage).
  • Ako se ne dizajniraju, korisnik ostaje zbunjen.

Stanja greške (error states)

  • poruke kada nešto pođe po zlu (npr. pogrešno unesena lozinka, greška u plaćanju).
  • Bez jasnog dizajna korisnik ne zna što dalje.

Mikrointerakcije i povratne informacije (feedback)

  • vizualne ili animacijske potvrde radnje (npr. klik na gumb, „dodano u košaricu“).
  • Ako ih nema, korisnik se pita je li aplikacija uopće reagirala.

404 / 500 stranice (error page design)

  • često ostanu generičke i neugledne, iako mogu biti prilika za humor, brandiranje ili navigaciju nazad.

–

S kojim još rolama dizajneri surađuju?

Unutar digitalnih timova

  • Product manageri – definiraju viziju proizvoda, prioritete i backlog.
  • Developeri (frontend i backend) – pretvaraju dizajn u funkcionalni kod.
  • QA testeri – provjeravaju radi li dizajn ispravno u praksi.
  • UX istraživači – donose uvide iz istraživanja korisnika.
  • Content dizajneri / UX writeri – oblikuju jasne i korisnički orijentirane tekstove.
  • Data analitičari – pomažu u razumijevanju ponašanja korisnika i donošenju odluka temeljenih na podacima.

U suradnji s poslovnom stranom

  • Marketing tim – usklađivanje vizualnog identiteta, kampanja i komunikacije.
  • Prodaja – prenosi feedback kupaca i tržišne potrebe.
  • Customer support – dijeli stvarne probleme i pitanja korisnika.
  • Stakeholderi / menadžment – donose strateške odluke i odobravaju smjer.

Specijalizirane uloge

  • Illustratori i grafički dizajneri – za brending i vizualne elemente.
  • Motion dizajneri – za animacije i mikrointerakcije.
  • Accessibility stručnjaci – osiguravaju da proizvod zadovoljava WCAG standarde.
  • Servis dizajneri – gledaju širu sliku korisničkog puta kroz sve dodirne točke.

–

Prototip se radi samo na papiru?

Papirnati prototip (low-fidelity)

  • Jednostavni crteži na papiru.
  • Brzi i jeftini za izradu.
  • Dobri za rane faze kada se istražuju ideje.

Digitalni prototip (mid- / high-fidelity)

  • Izrađeni u alatima poput Figma, Adobe XD, Sketch.
  • Mogu biti klikabilni (simuliraju interakciju).
  • Koriste se za testiranje toka, dizajna i detalja.

Interaktivni prototip

  • Gotovo realan doživljaj aplikacije ili web stranice.
  • Ponekad uključuje animacije, prijelaze i kompleksne funkcionalnosti.

Fizički prototip (kod proizvoda i hardvera)

  • 3D modeli, makete ili testne verzije fizičkih proizvoda.

–

Nalazite se kod klijenta, hoćete li prototip radit na papiru, u digitalnom obliku ili kroz neko sučelje?

Najbolja praksa: kod klijenta krenuti s papirnatim / low-fi prototipom (da brže iterirate), a zatim preći na digitalni kada treba prikazati ozbiljniji koncept.

–

Kanban metodologija

Kanban metodologija je agilni okvir za upravljanje radom koji se temelji na vizualizaciji zadataka i kontroli toka posla. Potječe iz Japana (Toyota, lean proizvodnja), a danas se koristi u IT-u, dizajnu i raznim industrijama.

Osnovna načela Kanbana:

  • Vizualiziraj rad – zadaci se prikazuju na Kanban ploči (fizička ili digitalna).
  • Ograniči rad u tijeku (WIP limits) – da se tim ne preoptereti i da se radi fokusirano.
  • Upravljaj tokom rada – prati kako zadaci prolaze od početka do kraja i uklanjaj blokade.
  • Stalno poboljšavaj – tim redovito optimizira procese.

Kako izgleda Kanban ploča (najčešće kolone su):

  • To do (za obaviti)
  • In progress (u tijeku)
  • Done (gotovo)

Svaki zadatak je kartica koja “putuje” kroz ploču dok se ne završi.

–

Cx je korisnicko iskustvo ali uz protok ….

vremena

–

Objasniti korisničko putovanje i mapu korisničkog putovanja

Korisničko putovanje (User Journey)

  • To je cijeli proces kroz koji korisnik prolazi dok pokušava ostvariti neki cilj s proizvodom ili uslugom.
  • Obuhvaća sve dodirne točke (touchpoints) – npr. oglasi, web stranica, aplikacija, korisnička podrška.
  • Uključuje emocije, motivacije i frustracije korisnika.
  • Cilj je razumjeti kako korisnik doživljava interakciju i gdje nastaju prepreke.

Primjer: korisničko putovanje kod online narudžbe pizze

  • Saznao za pizzeriju preko Instagrama.
  • Otvorio web stranicu.
  • Pregledao meni.
  • Dodao pizzu u košaricu.
  • Platio karticom.
  • Dobio pizzu na kućnu adresu.

  • Svaka faza uključuje i emocije (uzbuđenje, frustracija, zadovoljstvo).

Mapa korisničkog putovanja (User Journey Map / Customer Journey Map)

  • To je vizualni prikaz korisničkog putovanja kroz faze, dodirne točke i emocije.
    Najčešće je tablica ili dijagram.
  • Pokazuje korake korisnika, osjećaje, probleme i prilike za poboljšanje.
  • Pomaže timu da svi imaju zajedničku sliku korisničkog iskustva.

Faza: Saznaje, pretraživanje, kupovina, plaćanje, dostava

Radnja: vidio oglas na insta, gleda meni, dodaje pizzu u cart, plaća karticom, prima pizzu

Dodirna točka: Instagram, Web stranica, Web shop, Checkout, Dostavljač

Emocija: Zanimanje, Glad/uzbuđenje, neutralno, lagana nervoza, zadovoljstvo

Problemi: možda ne klikne na oglas, stranica spora, nejasna cijena dostave, plaćanje ne prolazi uvijek, kašnjenje
Prilike: bolje targetiranje, optimizirati web, jasnije prikazati troškove, dodati više opcija plaćanja, praćenje dostave u aplikaciji

–

3 razloga zašto su persone korisne

  • Fokus na stvarne korisnike, a ne na pretpostavkama
  • Persone pomažu timu da ne dizajnira za sebe, nego za ciljnu skupinu.
  • Olakšavaju razumijevanje potreba, ciljeva i frustracija korisnika.
  • Bolja komunikacija unutar tima i sa stakeholderima
  • Persona je „lice korisnika“ oko kojeg se tim lako usuglasi.
  • Pomaže da svi (dizajneri, developeri, menadžeri, marketing) govore o istim korisničkim tipovima.
  • Brže donošenje odluka u dizajnu i razvoju
  • Kad se pojavi dilema (npr. koja opcija je bolja), tim se može pitati: „Što bi naša persona izabrala?“
  • Time se smanjuje subjektivnost i ubrzava proces.

–

Metodologije za ispitivanje arhitekture informacija

Card Sorting, Tree Testing, (User Testing, Sitemap evaluacija)

–

Spoj osjećaja i akcija… dati odgovor što je

Korisnički doživljaj

–

Prepoznati neku IOS sliku

–

Kako se zove aplikacija koja je kombinacija web i mobile

hibridna aplikacija

–

Ciljevi moraju biti

SMART

S – Specific (Specifični)
Cilj mora biti jasan i konkretan.
npr. „Povećati broj registracija na web stranici“ (a ne „Poboljšati marketing“).

M – Measurable (Mjerljivi)
Mora postojati način da se mjeri napredak i uspjeh.
npr. „Povećati broj registracija za 20%“.

A – Achievable (Dostižni)
Cilj mora biti realan s obzirom na resurse i okolnosti.
npr. „Povećati registracije za 20% u 6 mjeseci“ (a ne 200% u tjedan dana).

R – Relevant (Relevantni)
Cilj mora imati smisla za širi kontekst poslovanja ili projekta.
npr. povećanje registracija doprinosi većoj prodaji.

T – Time-bound (Vremenski ograničeni)
Cilj mora imati rok.
npr. „do kraja Q3 2025“

–

Breakpoints

Breakpoints (točke prijeloma) u responsive web dizajnu označavaju širine ekrana na kojima se dizajn „lomi“ i prilagođava za bolje korisničko iskustvo.
Drugim riječima: kad web stranica prelazi određenu širinu (npr. s desktopa na tablet), CSS primjenjuje drugačija pravila (layout, veličina fonta, raspored elemenata).

Najčešći breakpoints (preporučeni, mogu varirati):
< 576 px → mobilni uređaji (portrait)
≥ 576 px → mobilni uređaji (landscape / veći mobiteli)
≥ 768 px → tableti
≥ 992 px → manji laptopi
≥ 1200 px → desktop monitori
≥ 1400 px → veći monitori

–

Što stoji iza mobile first načina rada (opisno)

Mobile first je pristup u dizajnu i razvoju u kojem se prvo osmišljava i izrađuje verzija za mobilne uređaje, a tek onda se dizajn „širi“ i prilagođava većim ekranima (tablet, desktop).

–

Nabroji barem 3 sučelja/alata koja koriste ux dizajneri

Figma, Sketch, Adobe XD, InVision…

–

Elementi čega mogu biti vizualni, navigacijski, unosni i informativni?

Elementi korisniškog sučelja (UI)

–

Prvi wireframing mora uvijek biti na papiru.

Netočno

–

Pitanje za web, ne sjećam se kako je bilo konstruirano

odgovor je bio HTML, CSS i JavaScript

–

Što je empatija i zašto je važna u ux dizajnu (opisno)

Empatija znači sposobnost da se stavimo u tuđe cipele – razumijemo osjećaje, potrebe, motive i perspektivu druge osobe.

  • U UX dizajnu empatija je ključna jer dizajner ne stvara proizvod za sebe, nego za korisnike.
  • Pomaže razumjeti što korisnici žele postići, s kojim se problemima susreću i kako se osjećaju dok koriste proizvod.
  • Omogućuje da rješenja budu prilagođena stvarnim ljudima, a ne pretpostavkama tima ili klijenta.
  • Smanjuje rizik da dizajn bude tehnički ispravan, ali neintuitivan ili frustrirajući.

–

Koja je razlika između style guidea i design systema (opisno)

Style guide

  • To je vizualni priručnik.
  • Sadrži osnovne pravila vizualnog identiteta: boje, tipografiju, logotip, ikone, stil fotografija, ton komunikacije.
  • Fokus je na dosljednosti izgleda i brenda.
  • Primjer: „Primarna boja je #FF6600, naslov je font Roboto Bold 24px, sekundarna tipografija je Open Sans Light 16px.“
  • Ukratko: style guide = vodič za vizualni stil.

Design system

  • To je širi, sveobuhvatni sustav koji uključuje style guide, ali ide daleko dalje.
  • Sadrži komponente i obrasce (npr. gumbi, forme, kartice, navigacija) + pravila interakcija + smjernice za korištenje.
  • Često uključuje i code snippet-e da developeri mogu odmah implementirati komponente.
  • Fokus je na skalabilnosti i ponovnoj upotrebi – timovi mogu graditi sučelje brže i konzistentnije.
  • Ukratko: design system = cijeli ekosustav dizajna i razvoja, dok je style guide samo njegov vizualni dio.