UX Flashcards

1
Q

Koje su tri faze izrade web stranice?

A
  1. Planiranje 2. Dizajn 3. Razvoj

Detaljni procesi svake faze uključuju analizu potreba, definiranje ciljeva, oblikovanje navigacije i testiranje korisnosti.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Što uključuje faza planiranja u izradi web stranice?

A

Analiza potreba, analiza konkurencije, definiranje ciljeva, izrada persona, scenariji, arhitektura informacija, izrada wireframe-a

Ova faza se fokusira na razumijevanje korisničkih potreba i ciljeva web stranice.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Što je UX dizajn?

A

Oblikovanje korisničkog iskustva kroz istraživanje, analizu i testiranje

UX dizajn se fokusira na stvaranje proizvoda koji pružaju pozitivno iskustvo korisnicima.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Što su persone u UX dizajnu?

A

Imaginarni i detaljno definirani predstavnici ciljane skupine

Persone pomažu u razumijevanju potreba i problema korisnika.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Što su scenariji i čemu služe?

A

Opis situacije kada korisnik koristi web stranicu; pomažu oblikovati sadržaj i funkcionalnosti

Scenariji definiraju kako korisnici žele ostvariti svoje ciljeve na web stranici.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Što je mapa empatije?

A

Kolaborativna vizualizacija koja definira znanje o korisnicima

Mapa empatije pomaže timovima u razumijevanju korisničkih potreba i donošenju odluka.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Koja je razlika između ciljeva i ishoda web stranice?

A

Ciljevi su željeni rezultati, dok su ishodi konkretni zadaci koje korisnik želi ispuniti

Ciljevi proizlaze iz svrhe stranice i trebaju biti precizno definirani.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Što je arhitektura informacija?

A

Znanost organiziranja i strukturiranja sadržaja web stranica i aplikacija

AI pomaže korisnicima da lako pronađu informacije koje traže.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Koje su komponente arhitekture informacija?

A

Sustavi organizacije, označavanja, navigacije, pretrage

Ove komponente pomažu u strukturiranju sadržaja i navigaciji na web stranici.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Koje su glavne komponente dobrog web dizajna?

A

Uporabljivost, estetika

Uporabljivost se odnosi na funkcionalnost, dok se estetika odnosi na vizualnu privlačnost.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Što je above the fold?

A

Prostor ekrana koji sadrži informacije prije nego korisnik skrola

Mora sadržavati navigaciju, logotip i call to action.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Čemu služi izrada žičanog modela?

A

Vizualni vodič koji predstavlja kostur web sjedišta

Fokusira se na funkcionalnost i prioritet sadržaja, a ne na estetiku.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Što sve mora biti definirano prije izrade žičanog modela?

A

Arhitektura informacija, ciljana publika, ciljevi stranice

Ove informacije pomažu u oblikovanju wireframe-a.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Što je tipografska mreža?

A

Dvodimenzionalna struktura horizontalnih i vertikalnih linija za organizaciju elemenata

Mreža daje ritam i logiku dizajnu stranice.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Kako se koriste omjeri u mreži?

A

Za dizajn mreže i postizanje estetskog i funkcionalnog rezultata

Upoznatost s omjerima poput zlatnog reza može poboljšati dizajn.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Što je sustav mreže?

A

Dizajn mreže koji se može koristiti na različite načine bez mijenjanja svoje forme.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Koja je osnovna jedinica mreže?

A

Jedinica je osnovni komad iz kojeg se ostatak mreže derivira.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Kako se mreža može kalkulirati u tisku?

A

Iz tipografske jedinice četverca pisma, npr. 12pt.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Koje su prednosti korištenja mreže?

A
  • Red
  • Slijed
  • Harmonija prezentaciji informacija
  • Predvidljivost informacija
  • Olakšavanje dodavanja novih sadržaja
  • Omogućavanje kolaboracije
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Što je fleksibilni layout?

A

Layout koji se prilagođava veličinom prema rezoluciji i prozoru browsera.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Koje su ključne komponente prilagodljive mreže?

A
  • Elementi mreže se prilagođavaju promjenama korisnika
  • Mreža mora zadržati originalne proporcije
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Što je globalna navigacija web stranice?

A

Dizajn navigacije koji omogućava korisnicima navigaciju kroz web stranicu.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Koja su pravila kreiranja navigacije?

A
  • Uočljivost
  • Očekivano mjesto
  • Klikabilni elementi
  • Maksimalno 7 elemenata
  • Adekvatan kontrast
  • Uspostavljena hijerarhija
  • Deskriptivne oznake
  • Posebna pažnja na prazan prostor
  • Mobilna varijanta
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Što predstavlja primarna navigacija?

A

Sadržaj koji je korisnicima najzanimljiviji.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Što je sekundarna navigacija?
Sadržaj koji je manje bitan korisniku, ali koji bi korisnici mogli htjeti.
26
Koje su metode organizacije navigacije?
* Sortiranje kartica * Otvoreno sortiranje * Zatvoreno sortiranje
27
Koje su vrste navigacije?
* Vertikalna (sidebar) * Horizontalna na vrhu * Hamburger menu * Sticky navigacija * Tabovi * Breadcrumbs * Tagovi (cloud) * Search * Fly-out / drop-down * Vođena * Footer * Floating action button * Paginacija * Karusel
28
Čemu služi tipografija?
Omogućava preciznu i efektivnu komunikaciju.
29
Koji faktori utječu na čitljivost?
* Verzali * Kontrast slova i pozadine * Duljina redka * Visina redka * Vrsta pisma
30
Koja je optimalna duljina retka?
Između 45 i 75 znakova, optimalno 66 znakova.
31
Koja je optimalna visina retka?
Oko 1.2 - 1.8 em za paragrafe.
32
Koje mjere se koriste na webu?
* pt * pc * cm * mm * in * Relativne ključne riječi (xx-small, small, medium, large, x-large, xx-large)
33
Koje vrste bjelina postoje?
* Makro bjeline * Mikro bjeline
34
Opišite pojam hijerarhije u tipografiji.
Omogućava čitljivost pružajući jasne vizualne odnose struktura i organizacije teksta.
35
Koja je osnovna klasifikacija pisama?
* Serifna * Sans serifna * Humanistička * Geometrijska * Slab serifna * Skriptna * Monospaced
36
Na koje 3 stvari se pazi prilikom odabira pisma za paragrafe?
* x-height * Kontrast * Oblik slova
37
Koje su vrste poravnavanja teksta?
* Lijevo * Desno * Centrirano * Puni format
38
Zašto je važan odabir boja?
Jer je pitanje estetike, identiteta i uporabljivosti.
39
Što je psihologija boja?
Znanost koja analizira emocionalne i behavioralne efekte boja i kombinacije boja.
40
Koje su asocijacije crvene boje?
Agresija, strast, uzbudljiva, dramatična, ljubav.
41
Koje su asocijacije narančaste boje?
Aktivna, sreća, entuzijazam, kreativnost, apetit.
42
Koje su asocijacije žute boje?
Aktivna, sreća, upadljiva.
43
Koje su asocijacije zelene boje?
Priroda, smirujuća, rast, svježina.
44
Koje su generalne asocijacije crvene boje?
Agresija, strast, uzbudljivost, dramatičnost, ljubav
45
Koje asocijacije ima narančasta boja?
Aktivna, sreća, entuzijazam, kreativnost, apetit
46
Što simbolizira žuta boja?
Aktivnost, sreću, upadljivost
47
Koje asocijacije ima zelena boja?
Priroda, smirenost, rast, svježina, nada, bogatstvo, edukacija
48
Koje su karakteristike plave boje?
Otvorenost, inteligencija, vjera, smanjuje apetit, stabilnost, jasnoća, svrha
49
Što označava ljubičasta boja?
Bogatsvo, ekstravagancija, drago kamenje i vino
50
Koje su asocijacije bijele boje?
Čistoća, savršenstvo, svjetlo
51
Koje asocijacije ima crna boja?
Smrt, zlo, snaga, elegancija
52
Što je kotač boja?
Tradicionalni kotač se sastoji od 12 dijelova uključujući primarne, sekundarne i tercijarne boje
53
Koje su primarne boje?
Crvena, žuta, plava
54
Kako se dobivaju sekundarne boje?
Miješanjem dvije primarne boje
55
Koje su tercijarne boje?
Crvenonarančasta, žutonarančasta, žutozelena, plavozelena, plavoljubičasta, magenta
56
Definirajte tople boje.
Sve od crvene do žute, uključujući narančastu, rozu, smeđu i bordo
57
Koje su karakteristike hladnih boja?
Smirujuće, smanjuju napetosti, idealne za pozadine
58
Koje su tri glavne komponente boje?
Ton, svjetlina, zasićenost
59
Što je monokromatski sistem?
Sistem koji se sastoji od samo jedne boje, raznih tonova
60
Što su analogne boje?
Sistem boja koji se sastoji od rubnih boja na kotaču boja
61
Koje su komplementarne boje?
Boje koje se nalaze nasuprot jedna drugoj na kotaču boja
62
Što su dvojni komplementi?
Boje koje se nalaze odmah pored komplementarne
63
Definirajte trijadne boje.
Boje koje su jednako udaljene na kotaču boja
64
Što su tetradne boje?
Boje čije komplemente spajamo, dvije boje i njihovi komplementi
65
Zašto je kontrast boja važan?
Dobar kontrast između pozadine i teksta je esencijalan za interaktivni dizajn
66
Koje su tri glavne karakteristike slika?
Relevantnost, zanimljivost, privlačnost
67
Na koji način se mogu nabaviti fotografije?
Kreirati sami, kupiti stock fotografiju, zaposliti profesionalca, pronaći besplatnu kvalitetnu fotografiju
68
Koji su osnovni formati slika na webu?
APNG, AVIF, WebP, GIF, JPEG, PNG, SVG
69
Koje su prednosti AVIF i WebP formata?
Bolje performanse, manja veličina datoteke
70
Koje su karakteristike JPEG formata?
Podržava puno boja, smanjuje veličinu slike uz gubitak kvalitete
71
Zašto su PNG i SVG dobri za logotipove?
Nema gubitka kvalitete pri povećanju, podržava transparentnost
72
Što je hero slika?
Velika slika u zaglavlju web stranice, prva stvar koju korisnici vide
73
Koje su stvari koje treba izbjegavati prilikom odabira slika?
Dekorativne fotografije, slike loše kvalitete, generičke stock fotografije
74
Za što se koriste fotografije na webu?
Predstavljanje proizvoda/usluge, emotivna privlačnost, vizualna podrška tekstu
75
Koje su vrste pozadina na webu?
Puni ton, gradijent, slika, video, ilustracija, tekstura, uzorak
76
Što označava pojam teksture u web dizajnu?
Efekte koji daju doživljaj površine dizajnu ili predmetu
77
Kako se koriste uzorci?
Da razlikuju objekte, dodaju interes, dubinu i osjećaj realnosti
78
Koje su osnovne karakteristike točke u grafičkom dizajnu?
Osnovni grafički element, mjesto fokusa, može se koristiti za izgradnju drugih elemenata
79
Kako se definira linija?
Spoj dvije ili više točaka, ima duljinu i povezuje elemente
80
Što je oblik u grafičkom dizajnu?
Bilo koji pozitivni element na stranici
81
Koje su tri osnovna oblika?
Kružnica, trokut, pravokutnik
82
Što su organski oblici?
Apstraktni oblici koji se sastoje od negeometrijskih krivulja i nepravilnih linija
83
Kako se postiže dojam volumena?
Sjenom, svjetlom, gradijentom, nagibom, perspektivom
84
Zašto je dizajn formi bitan?
Omogućuje upravljanje informacijama i poboljšava iskustvo korisnika
85
Koji je princip dizajna formi?
Manje je više, reducirati količinu polja i tražiti samo neophodne informacije
86
Što su forme u kontekstu web dizajna?
Forme su stepenica između potreba i ciljeva, omogućuju poslovanje, socijaliziranje i produktivnost na webu ## Footnote Ljudi žele upravljati vlastitim informacijama na ugodan način i sa osjećajem sigurnosti, posebno osobnih podataka.
87
Koji je princip dizajna formi?
Manje je više ## Footnote Reducirajte količinu polja i tražite samo one informacije koje su vam neophodne za akciju.
88
Kada je obavezno odvajanje i grupiranje podataka u formama?
Kada postoji više od 7 pitanja ## Footnote Korisnicima je prenaporno imati previše informacija odjednom.
89
Koje vrste inputa postoje u formama?
* button * checkbox * color * date * email * number * password * radio * range * reset * search * submit * tel * text * time * url ## Footnote Ove vrste inputa omogućuju različite načine interakcije korisnika s formama.
90
Kako se pomaže pri ispunjavanju formi?
* vrstom inputa * auto popunjavanjem * porukom s primjerom * placeholderom * porukom o počinjenoj pogrešci * poravnanjem * jasnoćom upita ## Footnote Ove metode olakšavaju korisnicima popunjavanje formi.
91
Koje su HTML5 funkcije formi?
* novi input tipovi (npr. color, email, password, search) * placeholder text * autofocus * validacija formi * required ## Footnote Ove funkcije poboljšavaju korisničko iskustvo i funkcionalnost formi.
92
Što je sklad u dizajnu?
Ideja sklada je kreiranje elemenata koji se međusobno podupiru i zajedno rade ka zajedničkom cilju ## Footnote Sklad izbjegava zbunjujuće poruke.
93
Koje su dvije vrste sklada?
* vizualni * konceptualni ## Footnote Vizualni sklad se odnosi na grupu elemenata poravnatih po zajedničkoj osi, dok konceptualni sklad obuhvaća ideje koje se međusobno podupiru.
94
Što je kontrast u dizajnu?
Kontrast dodaje raznolikost, kreira interes i privlači oko ## Footnote Pomaže jasno razlikovati jedan element od drugog.
95
Kako postižemo ravnotežu u dizajnu?
Ravnotežu postižemo distribucijom elemenata u layoutu ## Footnote Koristimo simetriju i asimetriju za kreiranje estetike i kontrasta.
96
Koje su tri vrste ravnoteže?
* simetrična * asimetrična * radijalna ## Footnote Svaka vrsta ravnoteže pruža različit vizualni dojam.
97
Što znači dominacija u dizajnu?
Dominacija naglaskom jednog ili više elemenata kreira fokalnu točku dizajna ## Footnote Pomaže usmjeriti pažnju gledatelja.
98
Koji su osnovni principi dizajna prema Dieteru Ramsu?
* inovativan * koristan * estetski * razumljiv * nenametljiv * iskren * dugotrajan * temeljit * zelen * što manje dizajna ## Footnote Ovi principi vode ka kvalitetnom dizajnu.
99
Što je ritam u dizajnu?
Ritam se kreira jednostavno ponavljajući elemente u predvidljivom uzorku ## Footnote Postoje različiti načini kako kreirati vizualni ritam.
100
Koje su tri glavne metode za kreiranje ritma?
* regularni ritam * progresivni ritam * tečni ritam ## Footnote Svaka metoda ima jedinstvene karakteristike u ponavljanju elemenata.
101
Što je prazni prostor u web dizajnu?
Prazni prostor je prostor koji obavija elemente na web stranici ## Footnote Važan je element u web dizajnu i ne smije se gledati kao pasivna pozadina.