Kol 2 PDF Merge

Navodila načrtovanja
1
Vsebina
● spiralni model
● izbor naprav za interakcijo
● načrtovanje oken in menijev
● izbor grafičnih gradnikov za interakcijo
● aranžiranje grafičnih gradnikov za interakcijo
● izbor besedila, barv, slik in animacije
● povratna informacija in interakcije
2
Spiralni model
● načrtuj: razumevanje uporabnika in domene
● načrtuj: razumevanje dela in nalog (uporabnost)
● načrtuj: izbor naprav za interakcijo
● načrtuj: načrtovanje oken, menijev
● načrtuj: izbor gradnikov, aranžiranje gradnikov
● načrtuj: izbor besedila, barv, slik in animacije
● načrtuj: izbor in načrtovanje ikon
● načrtuj: načrtovanje povratne informacije in interakcij
● implementiraj: papirnati prototipi
● implementiraj: računalniški prototipi – orodja za načrtovanje
● vrednoti: hevristično vrednotenje
● vrednosti: testiranje uporabnikov (vrednotenje uporabnosti) 3
Miller, MIT OpenCourseWare, 6.831, UI Design and Implementation
Izbira naprav za interakcijo: vhodne in izhodne naprave
● diskretne vhodne naprave: tipkovnica, tipke, gumbi
– velikost, oblika, robustnost, občutje, razporeditev
4
● diskretne vhodne naprave: tipkovnica, tipke, gumbi
– velikost, oblika, robustnost, občutje, razporeditev
5
● zvezne vhodne naprave (direktne): (svetlobna) peresa in/ali zasloni na dotik
6
● zvezne vhodne naprave ((in)direktne): peresa in grafične tablice, podpis
7
● zvezne vhodne naprave (indirektne): miške, kroglice za sledenje
8
● zvezne vhodne naprave (indirektne): igralne palice (IP) → diskretne in
analogne
9
● druge vhodne naprave
– mikrofon
– kamera
– čitalec prstnih odtisov
(biometrične naprave)
– igralna konzola
– …
10
● večje objekte je lažje zadeti – Fittsov zakon
● faktorji izbora naprave za kazanje
– enostavnost učenja uporabe naprave
– točnost naprave
– čas uporabe naprave
– razpoložljivost prostora
– robustnost naprave
– omejitve uporabnika
11
Primerjava naprav za kazanje
1
Hitrost
4 Natančnost
Rang
Zaželenost
5
8 12
Zaslon na dotik Miška Tablica Sledilna krogla Izometrična IP IP na odmik Svetlobno pero
● alternativne naprave: sledenje očesu
13
● alternativne naprave: optično razpoznavanje znakov, razpoznavanje gest
14
● alternativne naprave: dvojni ročni vhod, več prostostnih stopenj, miza na
dotik, ...
15
● izhodne naprave: zasloni (LCD, CRT), zvočniki, naglavni zasloni
16
● faktorji, ki vplivajo na izbor zaslona
– kvaliteta prikaza slike: resolucija
– število barv potrebnih za prikaz: 24-bitna grafika
– velikost zaslona: 15, 17, 21, 25 … palcev
– prenosljivost zaslona
– razpoložljivi prostor (na mizi)
17
● faktorji, ki vplivajo na izbor zvočnikov
– kvaliteta podajanja zvoka
– izhodna moč
– prenosljivost
– cena
– cena in kakovost pogosto
nista povezani
18
● tipične vhodno/izhodne naprave namiznega računalnika
19
Načrtovanje oken
● kaj omogočajo okna:
– prikaz različnih vrst in nivojev informacije
– zaporednost opravil
– vzporednost opravil (več opravil hkrati)
– razbremenitev kratkotrajnega spomina
– preglednost
– večkratno predstavitev istega opravila
20
Načrtovanje oken
● komponente oken
– okvir (npr. Stage)
– naslov (npr. lastnost Title okvirja)
– sistemski meni (npr. »vrstica za dekoracije«)
– gumbi za povečanje, zmanjšanje ter razkroj okna
– vrstični meni (npr. MenuBar)
– orodna vrstica (npr. ToolBar)
– delovno področje (določi programer, npr. plošča)
– vrstice za status, za obvestila, za ukaze
– drsniki za pomikanje
– ločevalniki 21
Načrtovanje oken
22
Načrtovanje oken
● okna glede na vrsto opravila
– primarno okno: okno aplikacije,
aktivnosti vedno dostopne
– sekundarna okna: za razširitev
aplikacije, nima vrstičnega menija,
obravnava enega objekta
● dialogi: akcije z omejenim
kontekstom, različne vrste

dialogov
● sporočilna okna: obvestila
uporabnikom
23
Načrtovanje oken
● kompozicija oken
– prekrivajoča okna: več opravil, nepredvidljiva količina podatkov, večja
okna, poljubno število oken, težja manipulacija
– ne-prekrivajoča okna (eden poleg drugega): eno opravilo, predvidljiva
količina podatkov, omejeno število oken, lažja manipulacija
24
Schneiderman, Designing the User interfaace
Načrtovanje oken
● kompozicija oken
– po globini z menijem
– po globini z zavihki
– po vertikali s »harmoniko«
25
Načrtovanje menijev
● vrste menijev
– vrstični meni (»menu bar«)
– izvlečni meni (»pull-down menu«, »drop-down menu«
– kaskadni meni (»cascade menu«)
– dvižni (pojavni) meni (»pop-up menu«)
– meni s ponujeno izbiro (opcijski meni) (»option menu«)
– orodna vrstica (»tool bar«)
– meni z ikonami (»iconic menu«)
26
27
28
● izbor menija glede na število izbir, pogostost uporabe, pogostost sprememb
vsebine menija in prostora
– vrstični meni: pogoste akcije, skupne akcije za sekundarna okna
– izvlečni meni: pogoste akcije, akcije opisane z besedilom, redke spremembe, 5-10
končnih izbir
– kaskadni meni: preprostejši in preglednejši meni, končne izbire se medsebojno
izključujejo, 1-2 kaskadi
– dvižni (pojavni) meni: pogosta uporaba akcij v kontekstu, hitrejša uporaba, redke
spremembe, malo prostora, 5-10 končnih izbir
– meni s ponujeno izbiro (opcijski meni): pogosta raba ene akcije v kontekstu, druge
izbire so redke, malo prostora, 5-10 končnih izbir
– orodna vrstica: ikone, pogosto uporabljene končne izbire menijev
– meni z ikonami: izbira aplikacije, za dosego posebnih funkcij aplikacije 29
●
načrtovanje vsebine menijev
– prikaz končnih izbir: stalen, na zahtevo
– organizacija končnih izbir
●
v različne menije glede na vrsto opravil ali glede na podatkovni objekt
●
uporaba več nivojev
●
prikaz samo relevantnih končnih izbir na danem nivoju
●
omejeno število nivojev
●
neaktivne možnosti prikaži šibko
– grupiranje končnih izbir
●
po hierarhiji in glede na logičnost, različnost in medsebojno izključevanje
●
glede na možen destruktiven učinek
●
uporaba ločevalnikov
– vrstni red grup in končnih izbir znotraj grupe
●
po vrstnem redu uporabe
●
pogostosti
●
abecedi
●
glede na možen destruktiven učinek 30
●
relativen položaj glede na sorodne menije
● pri načrtovanju vključi v menije
– navigacijo: vnaprejšnje prikazovanje končnih izbir
– ločevanje izbora in aktivacije
– ekvivalentne aktivacije izbir preko tipkovnice: mnemoniki, pospeševalniki
– indikatorje naslednikov (npr. >, …) in ločevalnike
31
Načrtovanje menijev - primer
● prikaz končnih izbir? ●
alternative so predstavljene v natlačeni
● organizacija izbir? horizontalni seriji izbir
● grupiranje izbir? ●
ni nobenega grupiranja, abecedna urejenost pa
● vrstni red izbir? povzroči mešanje različnih funkcionalnosti
●
sicer je širina menija boljša, kot pretirana
globina, vendar je tu predstavljeno preveč
možnih izbir
32
● prikaz končnih izbir?
● organizacija izbir?
● grupiranje izbir?
● vrstni red izbir?
33
● prikaz končnih izbir?
● organizacija izbir?
● grupiranje izbir?
● vrstni red izbir?
●
mnogo boljši pristop
●
kreirani sta še možnosti
»Application« in »Tool« v
vrstičnem meniju
●
vse alternative v meniju zahtevajo
samo en dvižni meni
●
število korakov je minimizirano, pregledovanje je lažje
34
●
grupiranje je smiselno
Izbor gradnikov za interakcijo
● zakaj je pomembna pravilna izbira gradnikov za interakcijo?
● Dragi potniki, prosimo

ponovno si pripnite pasove
in se postavite v položaj za
strmoglavljenje. Spet sem
izbral napačno
stikalo.
35
Stone et al, 2005
● gradniki omogočajo uporabniku interakcijo z aplikacijo ter manipulacijo
podatkov
● osnovni deli gradnikov
– oznaka za identifikacijo
– vsebina: podatki, druga relevantna informacija
– lahko vsebuje gumbe za manipulacijo
36
● obstaja več vrst gradnikov:
– gumbi
– vnosna polja
– izbirna polja: stikala (ena ali več možnih izbir), palete
– seznami
– kombinirani seznami
– izvlečni ali dvižni seznami
– kombinirana polja za vnos ali izbiro: krožna polja
– drsniki za parametre (»slider«)
– drsniki (»scroll bar«)
37
● lastnosti gradnikov: gumbi
● uporaba: za ukaze, za prikaz menijev, za manipulacijo z okni
✔ vedno vidni
✔ hitre akcije
✔ razumljiv opis
✔ omogočajo ekvivalente z uporabo tipkovnice
✗ zasedejo veliko prostora
✗ veliko pomikov za dosego akcij
38
●
lastnosti gradnikov: vnosna polja
●
uporaba: vnos besedila z uporabo tipkovnice
✔ fleksibilnost
✔ malo prostora
✗ uporaba tipkovnice
39
● lastnosti gradnikov: stikala, ena izbira (stikala za izključujočo izbiro)
● uporaba: postavljanje/nastavljanje lastnost
✔ lahek dostop
✔ lahka primerjava
✔ razumljiv opis in uporaba
✗ omejeno število možnosti
40
● lastnosti gradnikov: stikala, več izbir
● uporaba: postavljanje/nastavljanje ene ali več lastnost
✔ lahek dostop
✔ lahka primerjava
✔ razumljiv opis in uporaba
✗ omejeno število možnosti
41
● lastnosti gradnikov: paleta
● uporaba: prikaz in izbira alternativ, grafični prikaz, ikone
✔ prijetno za uporabo
✔ enostavna primerjava
✔ lahko zahteva manj prostora kot besedilo
✗ zahteva izkušnje za primerno oziroma učinkovito
in atraktivno predstavitev
✗ omejeno število izbir
42
● lastnosti gradnikov: seznami
● uporaba: izbira ene ali več možnosti, stalen prikaz
✔ neomejeno število možnosti
✔ prepoznavanje
✔ stalen prikaz
✗ zasedajo veliko prostora
✗ zamudno iskanje možnosti
✗ potrebno privajanje
43
● lastnosti gradnikov: kombinirani seznami
● uporaba: izbira ene možnosti, stalen prikaz, vnos preko tipkovnice
✔ prepoznavanje
✔ stalen prikaz
✗ zasedajo veliko prostora
44
● lastnosti gradnikov: izvlečni in dvižni seznami
● uporaba: izbira ene ali več možnosti, prikaz na zahtevo
✔ prepoznavanje
✔ ne zasedejo veliko prostora
✗ dodaten korak za prikaz seznama
45
● lastnosti gradnikov: kombinirani izvlečni in dvižni seznami
● uporaba: izbira ene možnosti, prikaz na zahtevo, uporaba tipkovnice
✔ prepoznavanje
✗ dodaten korak za prikaz seznama
46
● lastnosti gradnikov: kombiniran polja za vnos ali izbiro (krožna polja)
● uporaba: izbira ene možnosti, možen vnos preko tipkovnice
✔ fleksibilno
✗ težka primerjava možnosti
✗ samo en tip podatkov
47
● lastnosti gradnikov: drsniki za parametre
● uporaba: zvezna in kvantitativna nastavitev parametrov
✔ prostorska predstavitev relativne nastavitve
✔ vizualna manipulacija
✗ težja natančna nastavitev kot ob uporabi tipkovnice
✗ zasede veliko prostora
48
● lastnosti gradnikov: drsniki
● uporaba: za prikaz in dostop do informacije, ki zasede več prostora, kot ga
je na razpolago
✔ prikaz neomejene količine podatkov
✗ prostor
49
● izbira gumbov ali menijev
● vidiki:
– število ukazov aplikacije
– kompleksnost ukazov
– pogostost ukazov
– povezanost ukaza z drugim ukazom
● lastnosti → izbira
– 7 ali več ukazov, hierarhija → vrstični meni, meniji, seznam
– manj kot 7, preprosta aplikacija → gumbi v oknu
– manj kot 7, pogosta uporaba → gumbi v oknu
– povezani z drugimi ukazi → gumbi v dialogu
50
– pogosta uporaba, dve stanji → stikala
● izbira polja za vnos ali pa polja za izbiro
– so podatki omejeni po količini in vsebini? NE → polje za vnos
DA
– so podatki znani in razumljivi? NE → polje za vnos
DA
– so mogoče tipkarske napake? DA → polje za izbiro
NE
– tipkanje zahteva manj dela kot
uporaba miške? NE → polje za izbiro
DA
polje za vnos
51
● izbira stikal ali menijev
– medsebojno izključevanje alternativ?
DA (NE)
– diskretni podatki?
DA
– najboljša tekstovna predstavitev?
DA
– 2 – 10 alternativ?
DA
– tipkani vhod ni potreben?
DA IN
– ni sprememb, dovolj prostora? DA → stikala, ena možnost
ALI (stikala, več možnosti)
– redke spremembe, ni dovolj prostora? DA → dvižni meni
ALI
52
– redke spremembe, dovolj prostora? DA → izvlečni meni
● izbira seznamov ali kombiniranih seznamov
– medsebojno izključevanje alternativ?
DA ali NE (DA)
– diskretni podatki?
DA
– najboljša tekstovna predstavitev?
DA
– 2 ali več alternativ?
DA
– pogoste spremembe
DA
– tipkani vhod potreben? NE (DA)
IN
– dovolj prostora? DA → seznam (kombiniran seznam)
ALI
– ni dovolj prostora? DA → izvlečni/dvižni seznam 53
(kombiniran izvlečni/dvižni seznam)
● paleta
– medsebojno izključevanje alternativ
– diskretni podatki
– najprimernejša grafična predstavitev, redke spremembe
● krožno polje
– znani, napovedljivi, zaporedni podatki
– tipkan vhod včasih zaželen
– ni dovolj prostora, redke spremembe, redka uporaba
● drsnik za parametre
– zvezni podatki omejenega obsega
– napovedljive spremembe
– prostorska predstavitev razširi razumljivost parametra 54
● primer izbire kombiniranega izvlečnega seznama
– medsebojno izključevanje alternativ? DA
– diskretni podatki? DA
– najboljša tekstovna predstavitev? DA
– 2 ali več alternativ? DA
– pogoste spremembe? NE
– tipkan vhod potreben? NE (DA)
– dovolj prostora? NE → izvlečni/dvižni seznam
(kombiniran izvlečni/dvižni seznam)
55
● primer izbire krožnega polja in seznamov
– zakaj gumbi?
– zakaj polje za vnos?
● alternativa?
– zakaj vnosni polji?
● alternativi?
56
● primer uporabe krožnega polja
– je to primerna uporaba?
– možna alternativa?
57
● primerjava nekaterih gradnikov s stališča vhodnega (»look«) in izhodnega
(»feel«) modela
– model »feel« se nanaša na manipulacijo s tekstom (dinamičnost)
– model »look« se nanaša na prikaz informacije (količino informacije)
● primerjajte naslednje gradnike:
– oznaka
– meni
– seznam
– besedilno območje
58
Aranžiranje grafičnih gradnikov za interakcijo
● zakaj je pomembno
dobro aranžiranje?
● Dragi potniki, prosimo

ponovno si pripnite pasove
in se postavite v položaj za
strmoglavljenje. Spet sem
izbral napačno
stikalo.
59
Stone et al, 2005
● Nielsenov 10. princip načrtovanja:
estetika in minimalistično načrtovanje
● princip dobrega aranžiranja
– manj je več, preprostost:
tehnike → redukcija, regularnost
– gradniki naj imajo večkratno vlogo → kombiniraj gradnike, gradniki naj služijo
več kot samo enemu namenu
– dobro grafično načrtuj → pravilno aranžiraj grafične gradnike za interakcijo
– uporabljaj kratek in jedrnat jezik
60
● pogosto pride do nasprotja med vizualno in funkcionalno preprostostjo
● visokemu nivoju kompleksnosti se včasih ne da izogniti
– planiranje množice akcij za izvršitev naloge (človekov cikel akcije) je lažji ob večji
funkcionalni preprostosti (ena kontrola za pogoste akcije), kar vodi v visoko
vizualno kompleksnost (veliko kontrol v vmesniku → izgleda kompleksno)
● dejansko imajo lahko samo preprosti vmesniki po en gradnik za vsako akcijo
61
Stone et al, 2005
● tehnike za dosego preprostosti
– redukcija
● odstrani nepomembne elemente
● odstrani nepomembne značilnosti v smislu funkcionalnosti
62
● tehnike za dosego preprostosti
– regularnost
● uporabljaj regularne vzorce
● omejuj nepomembne variacije med elementi: iste pisave, barve, debeline črt,
dimenzije, orientacijo
63
● večkratna vloga gradnikov
– kombiniraj gradnike
– za dani gradnik poišči način, na katerega lahko predstavlja več vlog
64
● pravilna predstavitev informacije in gradnikov v oknih je ključnega pomena za
lahko, hitro in učinkovito interakcijo med uporabnikom ter aplikacijo
● vidiki aranžiranja
– velikost in število oken
● le eno okno
– logična organiziranost
● organizacija gradnikov naj odraža organiziranost okolja realnega sveta, ki mu služi
aplikacija
– količina informacije
● zaznavna ločljivost gradnikov
● estetska prijaznost
● lega glede na pogostost uporabe
65
● navigacija
● navodila aranžiranja: za dosego estetike in uporabnosti
– enakomerna distribucija in simetrija
– grupiranje
● vidljivost in poudarjanje pomembnih gradnikov
● ločljivost trenutno aktivnih gradnikov
– orientacija in poravnavanje
● horizontalna
● vertikalna
66
● enakomerna distribucija
– enakomerna razporeditev gradnikov po oknu
● simetrija
– izberi os → ponavadi je to vertikalna
– razporedi gradnike enakomerno okoli osi glede na »maso« in obseg
67
● grupiranje
– gestalt principi grupiranja
– razlaga, kako se elementi v vidnem polju grupirajo v večje celote
– Gestalt school of psychologists, 1920
68
● grupiranje
– glede na
● tip gradnika
● kontekst interakcije
● kontekst podatkov
– zagotovi
– z uporabo
● belih presledkov
● okvirjev
● glave
● ločevalnikov
69
● oznak Miller, MIT OpenCourseWare, 6.831, UI Design and Implementation
● grupiranje
– glede na
● tip gradnika
● kontekst interakcije
● kontekst podatkov
– zagotovi
– z uporabo
● belih presledkov
● okvirjev
● glave
● ločevalnikov
70
● oznak
● grupiranje
– pomembnost belih presledkov je bila »razložena« z gestalt principi grupiranja
– beli presledki
● uporabljaj namesto črt
● uporabljaj prazen prostor okoli skupine gradnikov
● integriraj »skupino« in »okolico«
– velikost gradnikov ali skupine gradnikov naj bo sorazmerna okoliškemu praznemu
prostoru
● izogibaj se preveč »natlačenemu«
vmesniku
– lažji dostop in delo → Fittsov zakon
71
● grupiranje
– uporaba belih presledkov za redukcijo okvirjev, glav in oznak
72
● orientacija in poravnavanje
– kakšna je poravnava
izbir in gradnikov?
– kakšna je poravnava
izbir in gradnikov po
vertikali?
– kako so oznake poravnane
po vertikali?
– (v tem primeru so izbire vsa vnosna polja,
stikala, kombinirani izvlečni seznami, …)
73
– horizontalna orientacija gradnikov → gradniki in izbire so horizontalno
orientirani
– vertikalna poravnava gradnikov → gradniki so vertikalno levo poravnani, oznake
so vertikalno levo ali vertikalno desno poravnane
74
– vertikalna orientacija gradnikov → gradniki in izbire so vertikalno orientirani
– vertikalna poravnava gradnikov → gradniki so vertikalno levo in desno
poravnani, izbire so vertikalno levo poravnane, oznake so vertikalno levo
poravnane
75
● primer slabega aranžiranja ●
primer boljšega aranžiranja
– slaba poravnava – orientacija je vertikalna
– slabi beli presledki – beli presledki dobro ločijo alternative
– velikosti gumbov – velikosti gumbov je enaka
– položaj gumbov – položaj gumbov je spodaj
76
● primer slabega aranžiranja ●
primer dobrega aranžiranja
– slaba poravnava – debeli okvirji dobro definirata sekcije
– slabi beli presledki – okvirji okoli polj stikal naredijo ta polja dobro
– velikosti gumbov vidna in enake velikosti
– položaj gumbov – vnosna polja tudi boljše vidna
77
● dejanski primer aranžiranja ●
primer dobrega aranžiranja
– slaba poravnava – primerna poravnava
– polje za vnos imena nima pojasnila – polje za vnos imena ima pojasnilo
– polje za vnos datuma je daleč od pojasnila – enostavnejši vnos datuma, razlaga formata na koncu
– polja stikal grupirana z okvirjem
78
Izbor besedila, barv in animacije
● izbor besedila
– izbrane besede in besedila naj bodo preprosta, čista in vljudna
● besede: kratke, domače, cele (brez okr.), v pozitivnem smislu
● besedila: 40 – 60 znakov na vrstico, levo poravnani, zamikanja, prazne vrstice med
odstavki, poudarjanje za večji kontrast (okvirji, krepko), alineje
● slog pisanja: kratki stavki, manj kot 30 besed, kratki odstavki, uporaba aktiva in ne
pasiva, vključuj primere
79
●
aranžiranje besedila
– uporabi robove → izogibaj se »word-processor syndrome«, to je besedilu na
robu okna
80
Andrews, Human-Computer Interaction, Graz University of Technology
●
– uporabi mrežno razvrščanje,
ki zagotavlja konsistentnost
glede:
●
položaja in obsega
besedila
●
stolpcev
●
naslovov
●
ilustracij
81
●
– uporabi mrežno razvrščanje,
82
●
vizualne spremenljivke in kontrast
– kontrast kodira informacijo vzdolž vizualnih dimenzij
●
je informacija sprejeta na nivoju zaznavanja
●
nanaša se na zaznavne spremembe vzdolž vizualnih dimenzij
●
nepravilnost, ki posreduje informacijo/izpostavi element
●
večji kontrast zagotovi večjo ločljivost
– vizualne spremenljivke:
●
včasih tudi:
– nasičenje
– tekstura/zrnatost
– premikanje 83
●
karakteristike vizualnih spremenljivk
– skala → vrste možnih primerjav: način primerjave vzdolž vizualnih dimenzij
●
nominalna → primerjava mogoča le glede na enakost
●
urejena → primerjava glede na operatorje < in >
●
kvantitativna → primerjava mogoča glede na vrednost razlike
– dolžina → število ločljivih nivojev: dolžina skale
– asociativnost → zmožnost ignoriranja vrednost vzdolž dimenzije
– selektivnost → zmožnost izbire vrednosti dimenzije v vizualnem polju
intenziteta barva oblika položaj orientacija velikost
nominalna da da da da da da
urejena da ne ne da ne da
kvantitativna ne ne ne da ne da
84
dolžina ~10 ~10 dolga dolga ~4 ~10
●
karakteristike vizualnih spremenljivk
– barva ni niti urejena niti ni kvantitativna
85
●
tehnike za dosego dobrega kontrasta
– izberi primerne vizualne spremenljivke
– uporabi le toliko ločljivih nivojev, kolikor je potrebno
– povečuj razlike za lažje zaznavanje
●
uporabi multiplikativno skaliranje in ne aditivno (npr. krat 2 in ne plus 5)
●
redundantno kodiraj kjer je to potrebno (npr. besedilo predstavljeno krepko in
ležeče)
●
pretiravaj v razmerjih kjer je to potrebno (npr. pri ikonah)
– uporabi test »delnega pogleda«
86
●
besedila in kontrast
– katere vizualne spremenljivke so uporabljene za dosego kontrasta? → velikost,
položaj in intenziteta
– zakaj ne pisava (oblika)? → ohrani preprostost
87
●
problemi s kontrastom
– intenziteta ozadja: ista
– barva ozadja: le
malenkost drugačna
– intenziteta in barva
ospredja: ista
– oblika besedila, gradnikov:
ista, podobna
– položaj: podoben → naslovi, polja za vnos se začnejo na istem mestu, besedila poravnana
levo ali v sredini
– orientacija: horizontalna → ker beremo
– velikost gradnikov: zelo podobna ali ista 88
●
problemi s kontrastom
– kaj pravi test »delnega pogleda«
●
pomanjkanje kontrasta med dvema stanjema
●
pomanjkanje konsistentnosti (rdeča barva)
●
možna rešitev → različne barve za različna stanja
●
možna rešitev → odstranitev indikatorja napredka
89
●
izbor vizualnih spremenljivk za prikaz
– katere spremenljivke so izbrane
– kolikšna so števila nivojev
posameznih podatkovnih polj
●
prebrano → [intenziteta] (ikona) / dva nivoja (svetla
ali temnejša obroba)
[intenziteta celotne vrstice]/dva nivoja
●
priponka → [oblika, barva, intenziteta, velikost] (ikona/brez)
●
pomembno → [oblika, barva, intenziteta, velikost] (ikona/brez)
[barva celotne vrstice]/dva nivoja
●
From → [oblika] (besedilo) / v splošnem neskončno, verjetno ~ 100
●
Subject→ [oblika] (besedilo)/ v splošnem neskončno, verjetno ~ 100
90
●
Received → [oblika](besedilo) [velikost] (bližnji datumi krajši), [položaj] (sortirano) / v splošnem neskončno, verjetno ~ 10
● izbor barv
– pravilna uporaba barv
● poudarja logično organizacijo okna
● izboljša ločljivost komponent okna
● naredi prikaz atraktiven
● izboljša zmogljivost
● štiri do največ 10 barv (večja okna več barv)
– nepravilna uporaba povzroča
● neprijaznost
● vizualno utrujenost
● manjšo zmogljivost
91
●
barvni modeli
– rgb → red, green, blue
– cmy → cyan, magenta, yellow
92
● vrste barv
– hladne
– tople
● subtraktivne
barve
– primarne
– sekundarne:
dobljene z
mešanjem
treh primarnih
barv
– terciarne: dobljene z mešanjem primarnih in sekundarnih barv
93
● besedila in barve
– nekatere barvne kombinacije so težke za branje
– slab kontrast otežuje branje
– modra na rdeči lahko povzroči migetanje
94
Stone et al, 2005
● vsebovana
intenziteta
95
Stone et al, 2005
● vsebovana intenziteta
– dve barvi
– vsebovana intenziteta
– ni težav z barvno slepoto
– ni visokih intenzitet
– dober kontrast za besedila
– vsaka točka da:
● širino/dolžino
● morje/kopno
● globino/višino
96
Stone et al, 2005
● problem pri uporabi barv
– ista barva gradnikov, ki nimajo nič skupnega → zbeganost, zmešnjava, počasno
razpoznavanje
– več barv→ daljši reakcijski čas → večja verjetnost napake
– oko je manj občutljivo na modro in rdečo (zgornji in spodnji del spektra) kot na
rumeno in zeleno → daljši reakcijski čas → večja verjetnost napake
– uporaba samo modre in rdeče → problem usmerjanja pozornosti, utrujenost
– barvna slepota → 8%, 0.4 %: rdeče-zelena; redkeje: modro-rumena
– pomen barv glede na kulturo → rdeča: stop, nevarnost
97
● problemi pri uporabi barv
– ishihara krogi, test za rdeče-zeleno barvno slepoto: 7, 13, 16, 8, 12, 9, 74
98
● Izgled strani:
– poln barvni obseg,
– devteranopija
(rdeče-zelena barvna slepota),
– tritanopija
(modra barvna slepota)
99
● navodila za izbor barv
– upoštevaj omejitve človekovega vizualnega sistema → barvna slepota, uporaba
rdeče in modre kombinacije
– uporabi le nekaj barv
– izogibaj se nasičenim barvam
– upoštevaj konsistentnost in pričakovanja
100
● navodila za izbor in uporabo barv
– načrtuj okno črno-belo, nato dodajaj barve konzervativno
– ne uporabi ene same barve → poudarjanje, pozornost
– za harmonijo in dobro ločevanje (ni drugih barv v polju)→ 4-5 barv (R-G, Y-B)
– za harmonijo in komparativno ločevanje (v polju so druge barve) → 6-7 barv
(enakomerno s celega spektra)
– za poudarjanje in zbujanje pozornosti → svetle barve
– za poudarjanje in ločljivost → kontrastne barve
– za poudarjanje podobnosti → podobne barve
– za izražanje skupnega pomena
● nujne akcije → tople barve (rdeča, oranžna, rumena)
● informacije o statusu → hladne barve (zelena, modra, vijolična)
101
● izbor barv, alfa-numerični in grafični prikaz
– barve naj zadoščajo zahtevam po vidljivosti, kontrastu in harmoniji
● barve ospredja → tople, aktivne: svetle barve, različne od barv ozadja, z
medsebojno istim nasičenjem in intenziteto, nasičene barve…: bela, rumena,
zelena, sinja
● barve ozadja → hladne, pasivne: temne barve, nenasičene barve in barve zgornjega
dela spektra: črna, modra, sinja
102
● izbor barv
– barve ospredja in ozadja
103
● izbor barv
– barve ospredja in ozadja
– izogibaj se nasičenim barvam
104
● izbor slik
– zakaj slike?
● za motivacijo, pritegniti pozornost, zabavati ali prepričati uporabnika
● za posredovanje informacije, še posebej prostorske
● za premostitev jezikovnih ovir
● za podporo interakciji → metafore, ikone
– glavni tipi slik
● slike
● diagrami
● grafi in tabele
105
● izbor slik
– diagrami, grafi in tabele → numerična informacija
– navodila za izbor
● izberi primeren tip slike
● načrtuj sliko da doseže
zahteve danega opravila
● upoštevaj primerne
konvencije
● kombiniraj sliko z besedilom
● upoštevaj resolucijo pri
drobnih detajlih
● uporabi majhne velikosti datotek
106
● izbor animacije
– zakaj animacija?
● za ilustracijo gibanja
● za zagotovitev dinamične povratne informacije
● za pritegnitev pozornosti
● za prikaz danega statusa sistema
– zakaj kratki filmi?
● za posredovanje obnašanja in čustev
● za prikaz dogodkov, ki se jih ne da prikazati neposredno
● za motivacijo
● za dodatno kontekstualno informacijo
107
Povratna informacija in interakcije
● načrtovanje povratne informacije in interakcij
– odzivnost sistema naj bi bila prilagojena hitrosti in toku človekovih miselnih procesov
● človekova zavest → ~10 (5 – nekaj 10) sekund, 4±1 kosov
● kreativno delo → 400 – 900 ms, sicer nižja učinkovitost
● konstantne zakasnitve → ± 20, sicer nižja učinkovitost
● zahtevana zveznost razmišljanja, informacija je potrebna v zavesti preko več akcij → < 2
sekundi
● med zaključki opravil → 2 – 15 sekund
– delo s časovnimi zakasnitvami
● 1 – 5 sekund → signal, ikona
● > 5 sekund →
– indikator stanja procesa
– obvestilo o odstotku opravljenega dela
– obvestilo o potrebnem času za končanje opravila 108
● obvestila
– stil in ton
● direktni stavki, kratki in preprosti
● trdilni stavki ne nikalni → »complete before returning«
● aktiv → »pošljite sporočilo«
● kronologija besed → »dokončajte naslov in nadaljujte«
– izogibaj se
● avtoritarnosti → »pripravljen na naslednji ukaz«
● negativnemu prizvoku → »nelegalno«, »fatalno«
● antropomorfnosti → predstavitvi računalnika kot osebe
● pokroviteljstvu → »zelo dobro«, »naredil si pravilno«
● humorju in kazni → »poskusi drugi šport«
● izogibaj se negativnim predponam → ne- (in-, ir-, un-): »neprimerno«, »nepravilno«, 109
»nepredvidljivo« (»inapropriate«, »irregular«, »unpredictable«)
● zvok
– kdaj rabimo zvok?
● pri aplikacijah, kjer so pozornost in oči stran od zaslona
● pri aplikacijah, ki vključujejo nadzor nad procesom → zvok nakaže spremembo
stanja sistema
● pri aplikacijah namenjenih osebam s posebnimi potrebami (slepim in slabovidnim)
110
● zvok
– kategorije zvoka
● ambientni zvok in zvočni učinki → pri haptičnem zaznavanju, za ojačanje vizualne
komponente sistema, pri napakah, nepričakovanih dogodkih, potrebni takojšnji
pozornosti, po izvršitvi operacije ali procesa
– vedno povezan z vizualno indikacijo
– do šest različnih zvokov
– konsistentna uporaba
→ podobni zvoki za podoben kontekst
– nizke frekvence, do 1000 Hz
– možnost izklopa, nastavitve jakosti
● govor
– sintetizacija govora, spenjanje fonemov
● glasba
111
● dialogi
– aplikacije pogosto rabijo prehodna okna → dialogi ali tudi pogovorna okna
– struktura in izgled dialogov
● dvižno okno
● besedilo
● ikona
● gumbi za akcije
– vrste dialogov
● za obvestila
● za izbiro
112
● dialogi za obvestila
– kratko obvestilo
– gumbi: »Yes«, »OK«, »No«, »Cancel«, »Help«
– takojšnja uporaba, potem sledi razkroj dialoga
– dialogi za obvestila: obvestilo, potrditev, opozorilo (!), informacijo (i), napake in
kritične akcije (STOP), vprašanja (?), delovni dialog
– modalnost dialogov
● nemodalen
● modalnost okna
● modalnost aplikacije
● modalnost sistema
● zaporedje modalnih dialogov → čarovnik 113
– najboljše se je izogibati dialogom za napake
– poskusi odpraviti napake, če se to da
– nesmiselni vhodi se lahko ignorirajo
114
– dialog za potrditev lahko zmanjša učinkovitost sistema
– prepogosto pojavljanje izniči njegov namen, saj ga uporabnik ne bere, kar lahko
vodi v napake
– v splošnem je razveljavitev akcije boljša, kot pa dialog
● toda nekaterih akcij se ne da razveljaviti
115
– izogibaj se nepotrebnim dialogom
– izogibaj se dialogom z neuporabnimi obvestili
116
● dialogi za izbiro
– seznam alternativ
– gumbi »OK«, »Apply«, »Cancel«, »Help«
– periodična uporaba
– dialogi za izbiro, vnos, izbiro datoteke, izbiro barve, ukazni dialog
117
● kdo vodi dialog?
– vzorec čarovnika
– vzorec osrednjega dialoga
118
● kdo vodi dialog?
– omogoči izključitev dialoga → nikoli več me ne vprašaj
– omogoči privzete akcije za dialog → naredi to avtomatsko
119
Principi in navodila za načrtovanje
mobilnih aplikacij
1
Vsebina
● principi načrtovanja uporabniških vmesnikov
● principi univerzalnega načrtovanja
● principi načrtovanja mobilnih vmesnikov
● navodila načrtovanja mobilnih vmesnikov
2
Nielsenovi principi
1. prilagodi se realnemu svetu
2. konsistentnost in standardi
3. pomoč in dokumentacija
4. uporabnikov nadzor in svoboda
5. vidljivost statusa sistema
6. fleksibilnost in učinkovitost
7. izogibanje napakam
8. raje prepoznaj kot si zapomni
9. javljanje napak, diagnoza, reševanje
10.estetika in minimalistično načrtovanje 3
Principi univerzalnega načrtovanja
• pravična uporaba
• fleksibilnost uporabe
• preprosta in intuitivna uporaba
• zaznavna informacija
• toleranca na napake
• majhen fizični napor
• velikost in prostor za dostop in
uporabo
4
Mobilno je drugačno
● uporaba mobilnih naprav je velika in v porastu
– julija 2015 je internetni promet na mobilnih napravah presegel promet na namiznih napravah
– novembra 2022 je bilo 59.6 % prometa mobilnega, 92.1 % uporabnikov dostopa do interneta
preko telefonov
● pomembno vzeti mobilne naprave kot primarni cilj
– ne samo kot dopolnitev namizno-usmerjenega projekta
● namizni računalniki in mobilne naprave so računalniki, vendar se močno razlikujejo
– zaslon
– povezava in pasovna širina
– napajanje
– način uporabe
– …
– načrtovanje za mobilne naprave je drugačno kot za namizne 5
● faktor mobilnosti prinaša nekaj implikacij na
– obliko naprave
● majhen zaslon
● uporaba baterije
● brezžična povezava
● večnamenska
– uporabniški vmesnik
● eno-okenske aplikacije → težka delitev med aplikacijami
● vhodni mehanizmi (gumbi, prsti (geste), govor, kamera)
● izhodni mehanizmi (vizualni, auralni in taktilni izhod)
6
● velike razlike v resoluciji zaslonov naprav
● razlike med dejansko resolucijo (število
pikslov) in resolucijo prikaza (koliko dejanskih
pikslov se upodablja):
– 200 % DPI: 360x640 → 720x1280
– 300 % DPI: 360x640 → 1080x1920
7
Principi načrtovanja mobilnih vmesnikov
1. mobilna miselnost
2. mobilni kontekst
3. globalna navodila
4. navigacijski modeli
5. uporabniški vnos
6. geste
7. orientacija
8. komunikacija
9. začetek
10.prvi vtis 8
1. Mobilna miselnost
● zaradi razlik med mobilnimi in namiznimi napravami se je potrebno postaviti
v mobilno miselnost
– bodi osredotočen → več NI boljše
– bodi edinstven → poudari razlike,
ki jih aplikacija nudi
– bodi »šarmanten« → mobilne aplikacije
so izrazito osebne
– bodi obziren → načrtuj za uporabnika
in ne za sebe
9
2. Mobilni kontekst
● obstaja več kontekstov mobilnega računalništva, ki jih je potrebno
upoštevati
– zdolgočasenost → uporaba mobilnih naprav »na kavču doma«, velika verjetnost
prekinitev
– zaposlenost → uporaba mobilnih naprav med opravljanjem drugih stvari
– izgubljenost → uporaba mobilnih naprav v neznanem okolju
10
3. Globalna navodila
● različne aplikacije zahtevajo različne pristope, upoštevati je potrebno globalna
navodila
– odzivnost aplikacije
– dodelanost aplikacije
– načrtovanje za »palec«
– velike tarče
– izpostavljanje vsebine
– postavitev kontrolnih gradnikov
– izogibanje drsnikom
– omejeno število barv (5-6)
– malo grafike, čist vmesnik
● upočasni vmesnik
11
● obremeni povezavo
4. Navigacijski modeli
● različni navigacijski modeli za mobilne aplikacije
● izbere naj se najbolj smiseln model
– Primarni
● hierarhični (vrtanje v globino)
● persistentni
● zaporedni
● segmentirana kontrola (zavihki)
● razširljiv seznam (harmonika)
– Sekundarni
● iskanje
● indeksne strani
● hitre povezave
● drobtinice
● povezave 12
5. Uporabniški vnos
● tipkanje je težko tudi na najboljših napravah, potrebno ga je narediti čim
lažjega
– veliko različnih variacija tipkovnic → izberi primerno za izbrano vrsto vnosa
– avtomatsko popravljanje je lahko zelo frustrirajoče → za vsako vnosno polje
izberi primerne opcije
– če aplikacija zahteva veliko tipkanja zagotovi podporo »landscape« orientaciji
13
6. Geste
● vmesniki na dotik podpirajo interakcijo na podlagi gest vendar je potrebno
upoštevati da:
– so geste nevidne
– več-dotične geste zahtevajo dvoročne operacije
– so dobrodošle (a ne kritične)
– niso zamenjava
– v prihodnosti (verjetno) obvezne
14
7. Orientacija
● mobilne naprave omogočajo obračanje
● portret (vertikalno) je najpopularnejša orientacija
– po nekaterih raziskavah uporablja do 94 % uporabnikov to orientacijo
– optimiziraj najprej za to orientacijo
● če aplikacija zahteva veliko tipkanja omogoči tudi »landscape«
(horizontalno) orientacijo (glej 5. princip)
● nepričakovana sprememba orientacije je ....
… dezorientirajoča
– smiselno je zagotoviti zaklepanje orientacije
15
8. Komunikacija
● zagotovi povratno informacijo
– takojšen odziv za vsako interakcijo
● modalna opozorila
– zelo moteča
– samo če je res kaj hudi narobe
● potrditve
– manj moteče kot opozorila
– na podlagi uporabniške interakcije
16
9. Začetek
● zagonski zaslon aplikacije je lahko slika prazne aplikacije
– kar zgleda interaktivno bo povzročilo frustracije zaradi eventualnih neuspelih
interakcij
● izogibaj se blagovnim znamkam na zagonskem zaslonu
– mogoč je prikaz lastnega loga → logo podjetja, ki je razvilo aplikacijo,
logo aplikacije
● ponoven začetek aplikacije naj povzroči nadaljevanje operacij tam, kjer je
uporabnik zapustil aplikacijo
– iluzija hitrosti
– odzivnost aplikacije
17
10. Prvi vtis
● »You only have one chance to make the first impression«
● izbira ikone
– tekmovati mora v množici preostalih ikon
– predstavlja naj »poslovno kartico«
– uporabljal obrise in malo besedila
● prvi zagon je »naredi ali pa uniči« situacija

– če bo uporabnik zmeden bo aplikacijo takoj odstranil
18
Mobilno je drugačno?
● za učinkovit uporabniški vmesnik moramo upoštevati
– uporabnike
● poznaj uporabnika
– vidljivost
● poskrbeti za preprostost
● zmanjšati navlako
● povečati berljivost
– povratno informacijo in prilagodljivost
● zagotoviti mehanizme za stanje in status
● zagotoviti mehanizme za odgovor
19
Navodila za načrtovanje mobilnih aplikacij
● poznaj uporabnika
– razišči cilje, naloge, kontekst uporabe
● potrebno razumeti kako se sporazumevajo naprave in uporabniki
– večina uporabnikov se nauči samo stvari, ki jih rabi
– »Uporabniki ne ugotavljajo stvari temveč »packajo« skozi vmesnik.«
– »Uporabniki ne berejo. Uporabniki skenirajo«
20
Yelp Inc.
● ohrani preprostost in konsistentnost
– ustvari strukturo, ki spodbuja preprostost in konsistentnost
– naredi terminologijo, gumbe,
ikone in razvrščanje konsistentno,
kjer je potrebno
– načrtaj elemente vmesnika
uniformno vendar uporabi
nepravilnosti za poudarjanje
pomena in pomembnosti
Luis Meloni
21
Edvinas Tamosiunas
● zagotovi berljivost
– uporabi barvni kontrast za besedilo
– uporabi velikosti pisav primerne
za branje
– uporabi različne teže pisav
– dobro pisanje besedila je pomembno
22
Luis Meloni
● zmanjšaj navlako oziroma vizualno nasičenost
zaslona
– ne natlači preveč zaslona
– vključi samo nujno potrebno
– odstrani kar ni nujno
potrebno
– naredi enostavno za
uporabo z
dobro definiranimi Robert Kelly Software
točkami za
dotikanje na zaslonu
23
NASDAQ QMX, Inc
● zagotovi mehanizme za stanje in status
– zagotovi opozorila, ko se upravlja s pomembnimi podatki
– uporabi mehanizme za status (vizualne
in auralne) , da je uporabnik obveščen
– statusna informacija naj bo posodobljena
in lahko vidna
Facebook, Inc
24
● zagotovi dober odgovor
– upoštevaj človekove mentalne sposobnosti in zlivanje med zaznavanjem
● odziv znotraj 100 ms → odziv ni potreben,
● pritiski na gumb → vizualni, auralni odziv znotraj 1000 ms
● akcije, ki vzamejo od 1 do 5 sekund → indikator izvajanje akcije
● akcije, ki vzamejo več kot 1 do 5 sekund → indikator napredka
● zaključek dolge akcije → vizualna indikacija, na primer sporočilo
– upoštevaj, da so mobilne aplikacije pogosto skrite v žepih
● zagotovi zvočne indikacije za pomembne dogodke
25
● obstoječim navodilom za načrtovanje vmesnikov je potrebno dodati še
odgovore na nove izzive
– majhni zasloni (po velikosti, ne nujno tudi resoluciji)
– debeli prsti (slaba natančnost, uporaba palcev)
– težaven vnos besedila
– preprostost, preprostost, preprostost, ….
● sledi vzorcem načrta
● uporabljaj geste kjer je to mogoče
26
● različne resolucije in uporaba → različni vsebovalniki
– ne uporabijo celotnega zaslona
– uporabijo celoten zaslon a so nenavadno poravnani
– ne uporabijo celotnega zaslona in zahtevajo drsnike
27
● fiksno razvrščanje (fixed layout)
– opiše točen položaj in velikost vsake komponente
– zagotovi konsistenten načrt čez vse zaslone
– ni nujno, da je to pravi dizajn za vse zaslone
28
● tekoče razvrščanje (fluid layout)
– opiše vsebino relativno glede na velikost okna
– lastnosti za najmanjše in največje dimenzije za postavitev absolutnih meja
29
● elastično razvrščanje (elastic layout)
– relativno, ker je vse določeno glede na velikost pisave
– absolutno, ker je em fiksen glede na uporabnika
30
● plavajoče razvrščanje (floating layout)
– postavitev vsebine se prilagaja širini zaslona
– lahko uporablja v kombinaciji z drugimi razvrščanji
31
● možnost dotakni se za povečavo (»tap to zoom«) omogoča navidezno
resolucijo zaslona
● zgladi razlike med fiksnim (absolutno), tekočim in elastičnim razvrščanjem
32
Prilagajanje različnim napravam
● pravilna izbir razvrščevalnikov za različne resolucije zaslonov
● spletni vmesniki so lahko prilagojeni različnim napravam
33
● odzivno razvrščanje, značilno za spletne vmesnike → odzivni dizajn
– postavitev vsebine se prilagaja širini zaslona, ponavadi v treh korakih
– znotraj posameznega koraka se lahko uporablja tekoče razvrščanje
34
● odzivni dizajn (»responsive design«)
– za prilagoditev spletnih strani/aplikacij različnim napravam
– kaskadne slogovne predloge (CSS) in JavaScript, ki poskrbita za avtomatsko
prilagajanje razvrstitve strani velikosti zaslona
– uporablja semantično označevalno kodo z uporabo HTML5 in CSS razredov
– najbolj uporabljena knjižnica: Twitter Bootstrap
35
Android, GTK+
Uporabniški vmesniki
1
By Google - Own work and Andreas Nilsson
Vsebina
● hierarhija izvajanja na Android operacijskem sistemu
● hierarhija orodij za Android
● Android Studio
● hierarhija orodij za razvoj uporabniških vmesnikov
● knjižnice potrebne za GTK+ uporabniške vmesnike
● podatkovni tipi
● prevajanje aplikacije GTK+
● primer aplikacije GTK+
2
Android
● na Android OS je prikazovalni strežnik SurfaceFlinger for Android
● vse v Androidu se nariše na »površino«
● »površine« narišejo aplikacije in jih dajo
v vrsto, ki jo upravlja SurfaceFlinger
● kompozitno sestavljanje »površin« tudi
upravlja SurfaceFlinger preko OpenGL ES
● okenski sistem je sistemska storitev, ki upravlja
z okni; odloča, katera okna so vidna, in kje
prikazana, upravlja z animacijami in tranzicijami
● obstajajo razna, kot nadgradnja za sam sistem,
ki jih ne bomo uporabljali
3
Knjižnice
● Android ima kot osnovo za prikaz podatkov na voljo knjižnico standardnih
»pogledov« (View), ki omogočajo gradnjo preprostih vmesnikov
● aplikacije so napisane v Javi/Kotlinu in kličejo
Javanski API
● Dalvik VM omogoča optimizacijo aplikacij za
naprave z omejenimi zmožnostmi
● kompozitno sestavljanje »površin« tudi
upravlja SurfaceFlinger preko OpenGL ES
● osnovo za komunikacijo z napravo pa
predstavlja Linux jedro
4
Nabor orodij Android
● Seznam prikazuje (nerazvejano) hierarhijo
podob za razred widget
● nabor podob je obsežen, uporabljali bomo le manjši del
● podobe so primerne za uporabo tako na
mobilnih kot tudi na večjih napravah
5
● Android ima razvejan nabor gradnikov – prikazana je hierarhija osnovne
podobe View
6
● Android ima razvejan nabor
gradnikov – prikazana je
hierarhija podobe ViewGroup
7
Android Studio
● za razvoj Android aplikacij obstaja
IDE Android Studio
● dostopno za različne platforme
● omogoča razvoj in testiranje
● za testiranje aplikacij so na
voljo tudi različne naprave
v obliki navideznih računalnikov,
ki se lahko poženejo na testnem
računalniku in v katerih se lahko
testirajo razvite aplikacije
8
Android Studio
● podobe razdeljene v kategorije:
– Common
– Text
– Buttons
– Widgets
– Layouts
– Containers
– Google
– Legacy
9
GTK+
● na Unix/Linux operacijskih sistemih je pogosto osnova grafičnega sistema
okenski sistem X ali pa Wayland oziroma Quartz
● okenski sistem X ponuja osnovno funkcionalnost
● pri razvoju grafičnih aplikacij je potrebno
implementirati gradnike
● GTK+ omogoča enostavnejši razvoj aplikacij
● je prosto-dostopen in odprt sistem
● GTK+ omogoča razvoj in izvajanje na
različnih platformah
10
Hierarhija orodij za načrtovanje uporabniških vmesnikov
● GTK+ je nadgradnja knjižnice Xlib
● omogoča pozicijsko in strojno neodvisnost
● implementirana tudi za MS Windows platforme (GTK#)
● alternativa je knjižnica Qt
Surfaces: Graphical front-ends (GTK+): Graphical front-ends (Qt):
Hawaii-desktop-shell
GNOME Shell-integrated PA-front-end KDE Plasma-integrated volume-controller

GNOME Shell-integrated NM-front-end KDE Plasma-integrated NM-front-end
KDE Plasma 2
GNOME Shell
Unity-integrated NM-front-end Hawaii-PA-front-end

Cinnamon
Volume-controller for GNOME Panel Hawaii-NM-front-end

Unity
Volume-controller for Cinnamon Volume changer for Kicker

nm-applet KNetworkManager
GNOME Software KPackageKit
GNOME-packagekit Apper
transmission-gtk transmission-qt
... ...
Display server: System daemons: User daemons:
NetworkManager-
Transmission-
PulseAudio-
PackageKit-
NTP-client-
systemd
daemon
daemon
daemon
daemon
daemon
daemon
logind
D-Bus-
Wayland Compositor
Weston, Clayton, Mutter, KWin,

Enlightement, etc.
evdev kms drm kdbus?

(re-implemention of D-Bus within the Linux kernel,
Linux kernel a stand-alone device driver which creates a char device to do IPC)
11
Ethernet-NIC Bluetooth Soundcard/CODEC
Hardware 802.11-WNIC UMTS/CDMA/LTE-modem GPS-receiver
Knjižnice
● GIMP → GNU Image Manipulation Program
● GNU → GNU's Not Unix (rekurzivni akronim)
● GLib → GIMP Library
● GTK+ → GTK + GDK
– GTK → GIMP ToolKit
– GDK → GIMP Drawing Kit
● GNOME → GNU Network Object Model Environment
12
Knjižnice
● GLib
– knjižnica C z definiranimi konstrukti in rutinami
– novi, platformno neodvisni tipi
– zagotavlja prenosljivost, višje-nivojska uporaba C
● GTK+
– platformno neodvisna
– objektno usmerjena
– razvoj aplikacij v X (načeloma tudi druge platforme)
– GTK → osnovne podobe, vsebovalniki
– GDK → vmesnik do Xlib, lažje delo s klici v Xlib
13
Knjižnice
● libGnome
– osnovna knjižnica okenskega sistema GNOME
– zagotavlja storitve za povezavo z drugimi knjižnicami → delo z besedili,
internacionalizacija, …
● libGnomeUI
– knjižnica za gradnjo uporabniških vmesnikov
– sestavljene podobe, ki nadgrajujejo GTK+
14
Hierarhija knjižnic za aplikacije
by Shmuel Csaba Otto Traian; GNU FDL 1.3+ and CC-BY-SA 4.0 International; created 2014-03-23; modified by Matthew Raymond and others; last modified 2017-12-18
Wayland-client X11-client
protocol
libwayland-client and libX or libXCB 3D Game Engine
Aplikacija
rendering
libwayland-
direct
rendering XWayland
DIX
client
direct
DDX (hw/xwayland) Vulkan / rendering
Glamor OpenGL 4.5 /

OpenGL ES 3.2 Vulkan /
GNOME knjižnice
OpenGL-based 2D rendering acceleration library,
translates "X rendering" into OpenGL and EGL
OpenGL 4.6 /
EGL direct
rendering
OpenGL ES 3.2
OpenGL
EGL
or
direct
libwayland-server EGL
GTK
rendering
Wayland Compositor
Weston, Mutter, KWin, Enlightenment, ...
Free and open-source Proprietary

Wayland Window user mode graphics drivers user mode graphics drivers
X Window Manager (XWM)
GDK
Management (WWM)
Mesa 3D
libinput API config parsing
libGL-nvidia-glx
libinput libGL-amdgpu-pro-glx
pointer acceleration device discovery
pointer touchpad tablet
GLib (Xlib)
① ④ ioctl udev
libDRM
AMDGPU-PRO Only
user mode
kernel mode
event0
Operacijski sistem Strežnik
Linux kernel
event1
evdev event2 KMS DRM proprietary BLOB
event3
event4
CPU & main memory 15

USB, PS/2, ... Display controller framebuffer GPU & graphic memory
Podatkovni tipi v GLib
● »standardni« podatkovni tipi
– zagotavljajo prenosljivost GLib standardni C
– poenostavitev kode gshort short
– konsistentnost glong long
gint int
gint8, gint16,... 8-bitni, 16-bitni int
gfloat float
gdouble double
gboolean boolean
gpointer void*
16
Prevajanje
● uporaba GNU c prevajalnika → gcc
– gcc -o programcek programcek.c `pkg-config --cflags --libs gtk+-3.0`
● izvajanje
– ./programcek
● pkg-config → vrne meta informacijo o nameščenih knjižnicah
● pkg-config --cflags <knjižnica>
● pkg-config --libs <knjižnica>
● skripta com_gtk je tekstovna datoteka, ki omogoča lažje in enostavnejše

prevajanje
17
Programiranje GTK+ v C
● objektno usmerjena knjižnica napisana v C
● prvenstveno za X11 in Wayland,
deluje tudi na drugih platformah
● temelj vseh podob je razred
GObject
● GObject omogoča transparentno
kompatibilnost med jeziki
– je del knjižnice GLib
18
GTK+ okna
● osnovna komponenta je GObject
● osnovno okno je GtkWindow
● iz GtkWindow so izpeljana vsa druga okna
19
Primeri podob v GTK+
Oznaka:
GObject→GtkWidget→GtkMisc→GtkLabel
Polje za vnos:
GObject→GtkWidget→GtkEditable→GtkEntry
Gumb:
GObject→GtkWidget→GtkContainer→GtkBin→GtkButton
Vrstični menu:
GObject→GtkWidget→GtkContainer→GtkMenuShell→GtkMenuBar
Mrežni vsebovalnik:
GObject→GtkWidget→GtkContainer→GtkBox
Polje za risanje:
GObject→GtkWidget→GtkDrawingArea
Okno z drsniki:
GObject→GtkWidget→GtkContainer→GtkBin→GtkScrolledWindow
Dialog za izbiro datoteke:
GObject→GtkWidget→GtkContainer→GtkBin→GtkWindow→GtkFileSelection 20
Primer
#include <gtk/gtk.h>
/* Podobi doda gumb z doloceno oznako */

GtkWidget * AddButton ( GtkWidget * theWindow, const gchar * buttonText ){
GtkWidget * button;
button = gtk_button_new_with_label ( buttonText );
gtk_container_add ( GTK_CONTAINER ( theWindow ), button );
gtk_widget_show ( button );
return button;
}
/* Odzivne funkcije */
void ButtonClicked ( GtkButton * button, gpointer data ){
g_print ( "Hello world!\n" );
}
void StopTheApp ( GObject * object, gpointer data ){

gtk_main_quit ();
}
21
Primer
gint main ( gint argc, gchar * argv[] ){
GtkWidget * window, * button;
gtk_init ( &argc, &argv );

/* Zgradi okno z ustreznimi dimenzijami */
window = gtk_window_new ( GTK_WINDOW_TOPLEVEL );
gtk_window_set_default_size ( GTK_WINDOW ( window ), 160, 100 );
/* Nastavi sirino roba na 5 pikslov */
gtk_container_set_border_width ( GTK_CONTAINER ( window ), 5 );
button = AddButton ( window, "Pritisni za pozdrav!" );
/* Instaliraj signal za zaprtje aplikacije */
g_signal_connect ( G_OBJECT ( window ), "destroy", G_CALLBACK ( StopTheApp ), NULL );
/* Povezi signal gumba z odzivno funkcijo ButtonClicked */
g_signal_connect ( G_OBJECT ( button ), "pressed", G_CALLBACK ( ButtonClicked ), NULL );
/* Prikazi okno */
gtk_widget_show ( window );
/* GTK+ zanka dogodkov */
gtk_main ();
return 0;
22
}
Signali
● signali so način za klicanje seznama poimenovanih funkcij (metod)
● ko neka podoba odda »signal« se pregledajo in kličejo vse odzivne funkcije,
ki so povezane s tem signalom
● signali so lahko povezani z GTK+ podobami (»pressed«, »clicked«,
»released«, …)
● signali so lahko tudi povezani z objekti v GLib knjižnici (GObject, »destroy«)
● tip parametrov se v tem primeru razlikujejo
– GObject oziroma GtkButton
– lahko pa tudi posplošimo na GObject
23
Dogodki
/* Zaprtje aplikacija */
void CloseTheApp ( GObject * object, gpointer data ){ gtk_main_quit (); }
gboolean EventHandler ( GtkWidget * widget, GdkEvent *event, gpointer data){

switch ( event->type ){ /* Ugotovi vrsto dogodka */
case GDK_EXPOSE:
g_print ("The window contents were redrawn\n"); break;
case GDK_ENTER_NOTIFY:
g_print ("The mouse entered the window\n"); break;
case GDK_LEAVE_NOTIFY:
g_print ("The mouse left the window\n"); break;
case GDK_DELETE:
g_print ("The user killed the window\n"); break;
default:
g_print ("\n"); break;
}
return FALSE; // return TRUE;
24
}
Dogodki
gint main ( gint argc, gchar *argv[] ){
GtkWidget *window;

g_signal_connect (G_OBJECT (window), "event",
G_CALLBACK (EventHandler), NULL);
g_signal_connect (G_OBJECT (window), "destroy",
G_CALLBACK (CloseTheApp), NULL);
gtk_widget_show (window);
gtk_main ();
return 0;
}
25
Dogodki
● dogodki v GDK so strukture, ki so povezane z dogodki okenskega sistema

platforme
● lahko so podobni signalom, npr. dogodek ob pritisku gumba
– gumb sprejme dogodek okenskega sistema
– ob sprejemu mora nekaj narediti, ponavadi je to klic notranje funkcije (v
primeru gumba poskrbi za spremembo izgleda)
– včasih to zadostuje lahko pa se kliče še odzivna funkcija za signal, ki se sproži ob
dogodku
26
Signali in dogodki
● Signali
● GObject→ destroy
● GtkWidget → show, hide, draw, …
● GtkButton → pressed, released, …
● …
– parametri so podoba in uporabniški podatki
● Dogodki
● event, button press event,button release event, key press event, key release event,
configure event, expose event, enter notify event, delete event, ….
– parametri so podoba, dogodek in uporabniški podatki
27
Signali in dogodki
void CloseTheApp ( GObject * object, gpointer data ){ gtk_main_quit ();}
gboolean EventHandler ( GtkWidget * widget, GdkEvent *event, gpointer data){
switch ( event->type ){ /* Ugotovi vrsto dogodka */
case GDK_EXPOSE:
g_print ("The window contents were redrawn\n");
break;
case GDK_BUTTON_PRESS:
g_print ("Button pressed\n");
//return TRUE;
break;
default:
g_print ("\n");
break;
}
return FALSE; //return TRUE;
}
/* Odzivna funkcija za signal */
void ButtonClicked ( GtkButton * button, gpointer data ){ g_print ( "Hello world!\n" );}
28
Signali in dogodki
gint main ( gint argc, gchar * argv[] ){
GtkWidget * window, * button;

gtk_window_set_default_size ( GTK_WINDOW ( window ), 160, 100 );
gtk_container_set_border_width ( GTK_CONTAINER ( window ), 5 );
button = gtk_button_new_with_label ( "Pritisni za pozdrav!" );
gtk_container_add ( GTK_CONTAINER ( window ), button );
g_signal_connect (G_OBJECT ( button ), "event",

G_CALLBACK ( EventHandler ), NULL);
g_signal_connect (G_OBJECT ( button ), "pressed",
G_CALLBACK ( ButtonClicked ), NULL );
g_signal_connect (G_OBJECT (window), "destroy",
G_CALLBACK (CloseTheApp), NULL);
gtk_widget_show_all ( window );
gtk_main ();
return 0;
29
}
Vsebovalniki
GtkWidget * MakeEntryBox (){
GtkWidget * box, * widget;
box = gtk_box_new ( GTK_ORIENTATION_HORIZONTAL, 2 );
widget = gtk_label_new ( "Vpisite vase ime:" );
gtk_label_set_justify(GTK_LABEL(widget), GTK_JUSTIFY_LEFT);
gtk_label_set_xalign(GTK_LABEL(widget), 0.0);
gtk_box_pack_start ( GTK_BOX (box ), widget, FALSE, TRUE, 0 );
widget = gtk_entry_new ();
gtk_box_pack_start ( GTK_BOX (box ), widget, FALSE, TRUE, 0 );
gtk_box_set_homogeneous(GTK_BOX(box), TRUE);
return box;
}
GtkWidget * MakeButtons (){
GtkWidget * box, * button;
box = gtk_box_new ( GTK_ORIENTATION_HORIZONTAL, 2 );
button = gtk_button_new_with_label ( "OK" );
gtk_box_pack_start ( GTK_BOX (box ), button, FALSE, TRUE, 0 );
button = gtk_button_new_with_label ( "Cancel" );
gtk_box_pack_start ( GTK_BOX (box ), button, FALSE, TRUE, 0 );
gtk_box_set_homogeneous(GTK_BOX(box), TRUE);
return box; 30
}
Vsebovalniki #include <gtk/gtk.h>
/* Zaprtje aplikacija */
void StopTheApp ( GtkWidget * window, gpointer data ){gtk_main_quit ();}
GtkWidget * MakeWindow (){
GtkWidget * window;
gint main ( gint argc, gchar * argv[] ){ window = gtk_window_new ( GTK_WINDOW_TOPLEVEL );
GtkWidget * window; gtk_window_set_default_size ( GTK_WINDOW ( window ), 320, 80 );
GtkWidget * mainbox; gtk_container_set_border_width ( GTK_CONTAINER ( window ), 10 );
GtkWidget * entrybox; gtk_window_set_title ( GTK_WINDOW ( window ), "Upor. vmesnik" );
GtkWidget * buttonbox; g_signal_connect ( G_OBJECT ( window ), "destroy",
gtk_init( &argc, &argv ); G_CALLBACK ( StopTheApp ), NULL );
window = MakeWindow (); return window;
entrybox = MakeEntryBox (); }
buttonbox = MakeButtons ();
mainbox = gtk_box_new ( GTK_ORIENTATION_VERTICAL, 10 );
gtk_box_pack_start ( GTK_BOX (mainbox ), entrybox, FALSE, FALSE, 0 );
gtk_box_pack_start ( GTK_BOX (mainbox ), buttonbox, FALSE, FALSE, 0 );
gtk_container_add ( GTK_CONTAINER ( window ), mainbox );
gtk_widget_show_all ( window );
gtk_main ();
return 0;
31
}
Generator vmesnikov Glade
32
Armen Ghazaryan
Hevristično vrednotenje
Vsebina
● spiralni model
● hevristično vrednotenje
● grupiranje Nielsenovih principov
● zagotovi naučljivost, upoštevaj pričakovanja
● uporabnik je vodja
● izogibaj se napakam
● ohrani preprostost, dobro grafično načrtuj
● primer hevrističnega vrednotenja
● opisovanje problemov
2
Spiralni model
●
načrtuj: razumevanje uporabnika in domene
●
načrtuj: razumevanje dela in nalog (uporabnost)
●
načrtuj: izbor naprav za interakcijo
●
načrtuj: načrtovanje oken, menijev
●
načrtuj: izbor gradnikov, aranžiranje gradnikov
●
načrtuj: izbor besedila, barv, slik in animacije
●
načrtuj: izbor in načrtovanje ikon
●
načrtuj: načrtovanje povratne informacije in interakcij
●
implementiraj: papirnati prototipi
●
implementiraj: računalniški prototipi – orodja za načrtovanje
●
vrednoti: hevristično vrednotenje
●
vrednosti: testiranje uporabnikov (vrednotenje uporabnosti)
3
Uporabljate netestirano programsko opremo?
●
kdo je napisal program(e), ki ga(jih) uporabljajo drugi ljudje?
●
koliko vas je opazovalo uporabnike, ki uporabljajo vašo programsko opremo?
●
koliko vas je dejansko vrednotilo ali testiralo vaš vmesnik preden je bil uporabljen
●
večina razvijalcev ne izvede nobene vrste vrednotenja uporabnosti
– zaradi pričakovanih stroškov
– pomanjkanja časa
– pomanjkanja izkušenj
– nenaklonjenosti vrednotenju
– pomanjkanja tradicije
4
●
hevristično vrednotenje je metoda preiskovanja in ocenjevanja
●
temelji na analizi in presoji in ne na eksperimentu
●
izvršijo ga eksperti uporabnosti uporabniških vmesnikov
– eksperti, ki razumejo principe načrtovanja in so načrtovali veliko (dobrih)
vmesnikov
●
skupina načrtovalcev sistematično preiskuje
in preverja načrtani vmesnik uporabo
principov (hevristike) in sestavi seznam
potencialnih problemov
5
Armen Ghazaryan
●
izvršijo ga eksperti
●
deluje na
– skicah
– papirnatih prototipih → pozornost
na manjkajoče dialoge
– nepopolnih prototipih
– delovnih prototipih
– delujočih sistemih
●
koraki
– preiskuj in preverjaj uporabniški vmesnik
– primerjaj vmesnik s principi načrtovanja
– sestavi seznam problemov uporabnosti → vsak problem razloži in utemelji s principi 6
Grupiranje Nielsenovih principov
●
zagotovi naučljivost
1. prilagodi se realnemu svetu (2. razbremenjuj uporabnikov spomin)
2. konsistentnost in standardi (3. zagotovi konsistentnost)
3. pomoč in dokumentacija (1. zagotovi nadzor uporabnika)
• uporabnik je vodja (1. zagotovi nadzor uporabnika)
4. uporabnikov nadzor in svoboda
5. vidljivost statusa sistema
6. fleksibilnost in učinkovitost
• izogibaj se napakam (2. razbremenjuj uporabnikov spomin)
7. izogibanje napakam
8. raje prepoznaj kot si zapomni
9. javljanje napak, diagnoza, reševanje
• ohrani preprostost (1, 2,3)
7
10. estetika in minimalistično načrtovanje
Principi: zagotovi naučljivost, upoštevaj pričakovanja
●
prilagodi se realnemu svetu→ uporabljaj splošne besede, ne tehnični žargon
– sistem naj govori jezik uporabnikov, besede domače uporabniku, ne pa sistemski termini;
sledi konvencijam; informacija naj bo v naravnem in logičnem vrstnem redu
– prilagodi se mentalnemu modelu uporabnika, metafore
●
konsistentnost in standardi→ princip najmanjšega presenečenja
– uporabnik naj bo prepričan o tem da različne akcije, situacije, pomenijo isto stvar
– sledi konvencijam platform
●
pomoč in dokumentacija → uporabniki ne berejo priročnikov
– obvezno je potrebno zagotoviti pomoč, četudi je boljše če bi sistem uporabljali brez pomoči;
vsaka taka informacija naj bo lahko locirana; osredotočen naj bo na opravil uporabnika; naj
bo konkretna in ne predolga
8
– liberalno uporabljaj primere
Principi: uporabnik je vodja
●
uporabnikov nadzor in svoboda → dobro označeni izhodi (uporabnik naj ne bo ujetnik)
– uporabnik pogosto izbere napačno funkcijo, potrebuje jasno označen način zapustitve
neželenega stanja, brez uporabe razširjenega dialoga
– podpiraj »Razveljavi« in »Uveljavi«
●
vidljivost statusa sistema → iluzija napredka (uporabnik mora biti ves čas dobro
obveščen)
– sistem obvešča uporabnika o stanju s povratno informacijo znotraj razumnega časa
– oblika kurzorja (1s-5s), indikator napredka (>5s)
●
fleksibilnost in učinkovitost → zagotovi lahko naučljive bližnjice za pogoste operacije
– bližnjice pohitrijo delo;omogoči hitro delo s pogostimi akcijami
– okrajšave, ukazne tipke, urejanje in izvrševanje predhodnih ukazov 9
Principi: izogibaj se napakam
●
izogibanje napakam → izbira je manj podvržena napakam kot tipkanje
– pomembnejše je skrbno načrtovanje kot dobro obvestilo o napaki
– raje izberi datoteko iz menija, kot da jo tipkaš, potrjevanje »nevarnih« akcij, izogibaj se
ukazom s podobnimi imeni
●
raje prepoznaj kot si zapomni → uporabljaj menije in ne ukazni jezik
– objekti, akcije in opcije naj bodo vidni; uporabnik naj ne pomni informacije med
zaporednimi dialogi; navodila uporabe sistema naj bodo vidna ali lahko priklicana
– primeri, privzete vrednosti, enostavno prikazana navodila
●
javljanje napak, diagnoza reševanje → bodi natančen, daj dobro obvestilo o napaki
– obvestila naj bodo jasna brez kod, opišejo naj problem in predlagajo rešitev
– prijazen ton, več-nivojska obvestila, povezava na sistem za pomoč 10
Principi: ohrani preprostost, dobro grafično načrtuj
●
estetika in minimalistično načrtovanje → manj je več, gradniki naj imajo
večkratno vlogo, preprostost, dobro grafično načrtuj
– dialog naj ne vsebuje nepomembne ali nepotrebne informacije, vsaka
informacija tekmuje s koristno informacijo → zmanjšanje vidljivosti koristne
informacije
– dobro grafično načrtuj → konzervativno dodajaj barve, grupiraj z belimi
presledki, poravnavaj gradnike
11
Izvedba hevrističnega vrednotenja
●
vsak problem opiši z ustreznim principom
– preveč možnih izbir na strani → estetika in minimalistično načrtovanje
– premalo je »barve mi niso všeč«
●
opiši vsak problem
– tudi če ima element več problemov
●
preišči vmesnik vsaj dvakrat
– prvič za pridobitev občutka o sistemu
– drugič za osredotočanje na posamezne gradnike
●
ne omejuj se na Nielsenove principe
– Normanovi namigi: pomagljivost, oznake, vidljivost, …; zlivanje med zaznavanjem; Fittsov zakon; nalogo
vodenja; navodila načrtovanja;
– Nielsenove principe je lažje medsebojno primerjati 12
Primer hevrističnega vrednotenja ●
prilagodi se realnemu svetu;
●
obvestilo, ki se je pojavilo na strani Midwest Microwave ob
zahtevi kataloga produktov ●
konsistentnost in standardi:
●
obvestilo se je pojavilo pred katalogom; ●
pomoč in dokumentacija;
●
gre za popravek problemov uporabnosti;
●
uporabnikov nadzor in svoboda;
●
obvestilo samo ima mnogo problemov
●
vidljivost statusa sistema:
●
fleksibilnost in učinkovitost;
●
izogibanje napakam:
●
raje prepoznaj kot si zapomni;
●
javljanje napak, diagnoza reševanje:

●
estetika in minimalistično načrtovanje;
13
Primer hevrističnega vrednotenja
● prilagodi se realnemu svetu →
– NE, izraz »V.90 modem«, govori jezik uporabnika
● konsistentnost in standardi →
– DA
● pomoč in dokumentacija →
– NE, informacija je neuporabna in izven konteksta, dana je preden uporabnik vidi potrebna opravila
● uporabnikov nadzor in svoboda →
– NE, predolg odzivni čas (> 60 sekund)
● vidljivost statusa sistema →
– DA
● fleksibilnost in učinkovitost →
– NE, ni organiziranosti besedila po odsekih za lažje preiskovanje
● izogibanje napakam →
– DA
● raje prepoznaj kot si zapomni →
– NE, je modalni dialog, vsa informacija bo izgubljena, ko bo uporabnik »odprl« katalog
● javljanje napak, diagnoza reševanje →
– DA
● estetika in minimalistično načrtovanje → 14
– NE, ni odstavkov, alinej, belih presledkov;preveč podrobnosti, ni jasno, kaj je pomembno in kaj ne
15
● ikona »Shopping Cart« ni uravnotežena z ozadjem
→ estetika in minimalistično načrtovanje
● DOBRO: uporabnika pozdravi z imenom
→ vidljivost statusa sistema
● rdeča je uporabljena za obvestila o napakah in pomoč
→ konsistentnost in standardi, prilagodi se realnemu svetu
● »There is a problem with your order«, vendar ni nobenega pojasnila
→ javljanje napak, diagnoza, reševanje
● »ExtPrice« in »UnitPrice« sta čudni oznaki
→ prilagodi se realnemu svetu
● Gumb »Remove Hardware« ni konsistenten s stikalom »Remove«
→ konsistentnost in standardi 16
● »Click here« ni potreben
→ estetika in minimalistično načrtovanje
● manjka gumb »Continue Shopping«
→ uporabnikov nadzor in svoboda
● gumb »Recalculate« je zelo blizu gumba »Clear Cart«
→ izogibanje napakam
● gumb »Check Out« drugačen kot ostali gumbi
→ konsistentnost (notranja, zunanja)
● »Cart Title« in »Cart Name« uporabljeni za isti koncept
→ konsistentnost in standardi
● potrebno pomnjenje in tipkanje v »Cart Title« in »Cart Name«
→ raje prepoznaj kot si zapomni, izogibanje napakam, fleksibilnost in učinkovitost
17
Opisovanje problemov uporabnosti
● vključuj kritike kot tudi pozitivne komentarje
– »Dobro: ikone orodne vrstice so preproste z dobrim kontrastom in malo
barvami→ estetika in minimalistično načrtovanje
● bodi takten
– NE: »organizacija menijev je popolna zmešnjava«
– Boljše: »meniji niso organizirani po funkcijah«
● bodi specifičen
– NE: »Besedilo je nečitljivo«
– Boljše: »Besedilo je premajhno in ima slab kontrast (črna pisava na temno
zelenem ozadju)«
18
Opisovanje problemov uporabnosti
● dejavniki, ki vplivajo na prioriteto problema uporabnosti
– frekvenca → kako pogosto? (pogosto ali redko)
– učinek → kako lahko je zaobiti problem? (lahko ali težko)
● stopnje prioritete
– kozmetični popravki
– manj nujno
– nujno
– zelo nujno
19
Format poročila
● kaj naj vključuje format poročila?
– problem uporabnosti
– pripadajoči principi
– opis
– prioriteta problema
– priporočilo, če obstaja
– slika, če pomaga
● 22. Zelo nujno: uporabnik lahko zapre okno, ne da bi shranil podatke → izogibanje
napakam
Opis: če uporabnik naredi popravek in ne shrani
lahko zapusti aplikacijo z uporabo gumba »Close«,
pri tem pa se ne pokaže dialog za potrditev
Priporočilo: prikaži dialog za potrditev ali pa
shrani avtomatično 20
Napotki za boljše hevristično vrednotenje
● uporabi več ocenjevalcev
– različni ocenjevalci najdejo
različne probleme
● izmenično hevristično
vrednosti in testiraj
uporabnike
– vsaka metoda najde
različne probleme
– hevristično vrednotenje
je cenejše
21
Hevristično vrednotenje NI ISTO kot test uporabnosti
● ocenjevalec ni uporabnik
● analogija
– hevristično vrednotenje je pregledovanje
– testiranje uporabnikov je testiranje kode
● hevristično vrednotenje najde probleme, ki jih testiranje uporabnikov spregleda
– nekonsistentnost pisav
– Fittsov zakon
● testiranje uporabnikov je zlati standard za testiranje uporabnosti
– dražje
– časovno zamudnejše
– daje boljše rezultate 22
Testiranje uporabnikov
1
Vsebina
● spiralni model načrtovanja
● testiranje uporabnikov
● etika med testom
● vloge pri testiranju uporabnikov
● dimenzije uporabnosti
● faktorji uporabnosti
● mere zmogljivosti
Vikas Kalwani
2
Spiralni model
● vrednoti: testiranje uporabnikov (vrednotenje uporabnosti) 3
Testiranje uporabnosti
● kaj je test uporabnosti?
– ISO → test uporabnosti je postopek testiranja
uporabnikov, nalog in okolja z namenom
vrednotenja zmogljivosti vmesnika z oziroma
na uporabnikovo učinkovitost in zadovoljstvo
● kaj je test uporabnikov? https://geteasyqa.com/qa/usability-testing/
– je vrednotenje prototipov ali implementacij vmesnika v laboratoriju na izbranih

nalogah
● pomaga odkriti probleme uporabnosti vmesnika, ki se odpravijo v naslednji iteraciji
načrtovanja
● kvantitativna in kvalitativna opažanja → seznam problemov uporabnosti
4
● koraki testa:
– poišči primerne uporabnike
● uporabniki naj bodo reprezentativna ali ciljna množica uporabnikov vmesnika
● izbira naj temelji na analizi uporabnikov
– vsakemu uporabniku daj naloge
● naloge naj bodo reprezentativne ali pa pomembne naloge
● izbira nalog naj bo pogojena z analizo uporabnikovih nalog
– opazuj uporabnika pri izvrševanju njegovih nalog
5
https://www.netizenexperience.com/blog/user-research-cheatsheet-usability-testing/
● podobno kot testiranje intuitivnosti ikon
6
● podobno kot testiranje intuitivnosti ikon
7
Etika in pritiski na uporabnika
● med testom je treba spoštovati etična načela in poskušati minimizirati
pritiske na uporabnika
● etika
– uporabniki so človeška bitja, obnašaj se temu primerno
– obravnavaj uporabnike s spoštovanjem
● pritiski na uporabnika med testom
– trema
– občutek kot na testu IQ
– primerjanje z drugimi uporabniki
– občutek neumnosti pred opazovalci
– tekmovanje s preostalimi uporabniki 8
Spoštljivo obravnavaj uporabnike
● čas je dragocen
– ne zapravljaj ga za prazen nič
● udobje uporabnikov
– uporabniki bodo sproščeni, če jim bo udobno
● informiranje
– uporabnikom nudi čim več informacij
● zasebnost
– uporabnikovi podatki naj bodo dobro varovani
● nadzor uporabnika
– uporabnik lahko kadarkoli prekine in zapusti test 9
Spoštljivo obravnavaj uporabnike pred testom
– kar se le da pripravi vnaprej
● udobje
– uporabniki naj bodo sproščeni
● »Testiramo sistem, ne vas«
● »Kakršne koli težave boste imeli so posledica napak v sistemu. Potrebujemo vašo pomoč, da jih najdemo«
● informiranje
– o namenu študije
– načinih opazovanja → avdio/video snemanje, opazovalci
– odgovori na vsa vprašanja, ki ne škodujejo testu
● zasebnost
– »Rezultati vašega testa ne bodo prišli v javnost«
10
– »Kadarkoli lahko odstopite od testa«
Spoštljivo obravnavaj uporabnike med testom
– uporabnik naj rešuje le nujne naloge
● udobje
– sproščeno ozračje
– ne delaj »čudnih obrazov«, razočaranih
– uporabniku daj eno nalogo za drugo
– prve naloge naj bodo lahke → občutek uspeha
● informiranje
– odgovori na vsako vprašanje, ki ne škoduje testu
● zasebnost
– uporabnikov nadrejeni naj ne bo prisoten
– uporabnik lahko kadarkoli prekine nalogo in nadaljuje z naslednjo 11
Spoštljivo obravnavaj uporabnike po testu
● udobje
– razloži uporabniku, pri kakšnem projektu so pomagali
● informiranje
– odgovori na vprašanja, na katera prej ni bilo
mogoče odgovoriti
● zasebnost
– varuj osebne podatke
– ne prikazuj avdio in video posnetkov brez
privoljenja uporabnika
12
● testiranja uporabnikov uporablja večina »resnih« podjetij
● skica standardnega laboratorija za testiranje uporabnikov (Microsoft)
13
Vloge v testni skupini
● uporabnik
– dejanski reprezentativni predstavnik
ciljne skupine
● pomočnik, moderator
– raziskovale, ki pomaga uporabnikom pri
izdelavi nalog
● opazovalec
– raziskovalec, ki opazuje potek testiranja
14
Vloge: uporabnik
● uporabnik naj razmišlja na glas
– pove naj, kas misli, da se dejansko dogaja
– pove, kaj poskuša narediti
– pove, zakaj se je odločil za dano akcijo
● problemi
– počuti se nenavadno
– »glasno razmišljanje« lahko dejansko spremeni običajni
način interakcije
– zaradi motečih dejavnikov je manjša stopnja koncentracije
15
Vloge: pomočnik
● daje napotke uporabnikom
● daje naloge, ko uporabniki končajo ali prekinejo
prejšnjo nalogo
● vodi in pomaga uporabniku, da »razmišlja na glas« z
vprašanji, na primer:
– »Kaj razmišljate?«
– »Zakaj ste poskusili to?«
– »Kaj mislite, da ta gradnik naredi?«
● nadzoruje potek testa
16
Vloge: opazovalec
● je za razliko od pomočnika povsem tiho
– ne pomaga
– ne razlaga
– ne kaže na napake
– »sedi na svojih rokah«, če to pomaga
● dela zapiske
– zapisuje kritične dogodke, ki učinkujejo na zmogljivost
ali zadovoljstvo → napake, ponovni poskusi, opazke
17
Število potrebnih uporabnikov
● Landauer-Nielsenov model
– vsak uporabnik najde odstotek P problemov uporabnosti
● tipično P=31 %; študija vključevala 11 vmesnikov, uspešnost uporabnikov med 12 % in 60 %
– če so testi neodvisni, potem n uporabnikov najde
1-(1-P)^n problemov uporabnosti
– pet uporabnikov najde 85 % problemov
● kaj je bolje
– 15 uporabnikov, ki najdejo 99 % problemov v eni iteraciji
– 5 uporabnikov, ki najde 85 % problemov v vsaki izmed treh iteracij načrtovanja → boljše
● v primeru več ciljnih skupin vzemi po 3-5 uporabnikov iz vsake cijne skupine
● P je lahko mnogo manjši od 31 %
● ne da se zanesljivo ugotoviti potrebnega števila uporabnikov 18
Dimenzije uporabnosti
● dimenzije (principi) uporabnosti
– naučljivost → ali se je lahko za naučiti
– učinkovitost → potem, ko je naučeno ali
se da hitro uporabljati
– varnost → ali so napake redke
in popravljive
– (zadovoljstvo → ali je prijetno za uporabo)
19
Faktorji uporabnosti
● faktorji uporabnosti
– naučljivost → naučljivost →
ali se uporabniki naučijo vmesnika
– učinkovitost → učinkovitost →
kako uspešno uporabnik opravlja naloge
– varnost → varnost →
kako dobro se vmesnik rešuje iz napak
– (zadovoljstvo → zadovoljstvo →
uporabnikova ocena glede na
zadovoljstvo z uporabo)
20
Faktorji uporabnosti in cilji
● faktorji uporabnosti in cilji
– naučljivost → manj potrebnega učenja
– učinkovitost → vmesnik bo izboljšal uporabnikovo
uspešnost
– varnost → vmesnik bo uporabniku prijazen,
odpuščal bo potencialne napake
– (zadovoljstvo → uporabnik bo zadovoljen)
21
Mere zmogljivosti
● mere zmogljivosti merijo merljive cilje pri testiranju uporabnosti
faktorji kriterij pogoj zmogljivost
uporabnosti
naučljivost n% uporabnikov s po M urah učenja uspešno osvojijo znanje
predznanjem
učinkovitost n% uporabnikov v T po N danih nalogah uspešno izvrši nalogo
minutah
varnost n% uporabnikov da po N danih nalogah da oceno prijaznosti
oceno V
zadovoljstvo n% uporabnikov da po N danih nalogah da oceno zadovoljstva
oceno Z
22
Papirnati prototipi
1
Vsebina
● zakaj prototipi
● zakaj papirnati prototipi
● natančnost prototipov
● primeri
● kaj se lahko naučimo iz prototipa
2
Spiralni model
Prototipi
● zakaj prototipi?
– hitra in poceni povratna informacija
– omogočajo hitro/enostavno/poceni preizkušanje alternativnih izvedb
– lažje in ceneje zavreči
4
Papirnati prototipi
● zakaj papirnati prototipi?
– hitrejši razvoj
● skiciranje je hitrejše od programiranja
– lažje spreminjanje
● ni investicij v pisanje kode, ostane osnovna shema,
ostalo lahko zavržemo
● lažje spreminjanje med testi uporabnikov ali celo med testom uporabnikov
– pozornost je usmerjena na »veliko sliko«
● ni izgube časa v drobnih detajlih
● uporabniki imajo bolj kreativne predloge
– neprogramerji so lahko v pomoč
● predznanje ni potrebno 5
Natančnost prototipa
● natančnost prototipa je približek prototipa dejanskemu končnemu izgledu
izdelka
– nizka natančnost → ni detajlov, uporaba cenejših materialov, drugačne tehnike
interakcije
– visoka natančnost →
zelo podobno
končnemu izdelku
6
Dimenzije natančnosti
● natančnost prototipov ima več dimenzij
– širina → odstotek implementiranih značilnosti
● nizka natančnost: implementacija nujnih funkcionalnosti: npr. za urejevalnik besedil
→ ni tiskanja, črkovanja
– globina → stopnja funkcionalnosti (globina implementacije) implementiranih
značilnosti
● nizka natančnost: omejeno število izbir (npr. ni dvostranskega tiskanja), omejeni
(isti) odzivi, ni reševanja iz napak
7
Papirnati prototipi
● natančnost v smislu »look&feel«
– »look« → izgled prototipa, grafično načrtovanje
● skicirano, narisano z roko
– »feel« → vhodne metode
● kazanje in pisanje je po občutku drugačno od dela s tipkovnico
● je pa kazanje in pisanje podobno delu s tablico
8
Natančnost v smislu »look&feel«
9
Napotki za dobre papirnate prototipe
● naredi večje, kot bo sicer v resnici izgledalo
– večja razdalja gledanja kot pri končnem proizvodu
– lažja interakcija s prsti
● naredi prototipe črno-bele
– podrobnosti niso pomembne v tej fazi
– bolj pregleden vmesnik
● nadomesti težavno vizualno povratno informacijo z ustreznim opisom
– namigi
– povleci-spusti
– animacija
– indikator napredka
10
– ...
Papirnati prototipi - primera
● IBM eclipse, spletna stran v brskalniku
11
Papirnati prototipi - tipi
● skice
● »operabilni« prototipi
● računalniški okvirji
12
Papirnati prototipi - primer
● primer papirnatega prototipa za radijsko postajo
13
Sekvence povezanih slik vmesnika
● primer papirnatega prototipa za radijsko postajo
14
Kako testirati papirnati prototip?
● različne vloge razvijalcev
– »računalnik«
● simulira prototip
● zagotovi vsako računalnikovo povratno informacijo
– »pomočnik«
● predstavi vmesnik in naloge uporabniku
● spodbuja uporabnika, da misli na glas, tako da mu postavlja vprašanja
● povezuje delo
– »opazovalec«
● ocenjuje test
● je tiho, dela zapiske
15
Kaj se lahko naučimo iz papirnatega prototipa
● konceptualni model
– ali uporabnik razume vmesnik
(UV-input, uporabnik-Env, Odziv-Outc)
● funkcionalnosti
– vmesnik naredi, kar je potrebno?
– manjkajo značilnosti?
● tok navigacije nalog
– se uporabniki znajdejo?
– je dovolj informacije za uspešno delo?
● terminologije
– uporabnik razume oznake?
● vsebine za zaslon
16
– kaj mora biti prikazano?
Česa se ne moremo naučiti iz papirnatega prototipa?
● »look« → barv, oblik pisav, belih presledkov
● »feel« → učinkovitosti (impikacij Fittovega zakona)
● odzivnih časov
● ali bo uporabnik opažal majhne spremembe
– tudi najmanjše spremembe so vidne pri papirnatih prototipih,
ne pa če se jih avtomatsko pojavi več naenkrat → slepota sprememb
● ali bo uporabnik več preiskoval ali premišljal
– uporabniki pri papirnatih prototipih več razmišljajo in manj preiskujejo
17
Računalniški prototipi
1
Vsebina
● zakaj računalniški prototip
● sekvence slik
● generatorji vmesnikov
2
Spiralni model
Papirnati prototip
● nizka natančnost v smislu
– »look« → skicirano, narisano z roko
– »feel« → kazanje in pisanje je po občutku drugačno, kot delo z miško in
tipkovnico
– odzivnih časov
– opažanja drobnih sprememb
– dinamike → uporabniki manj preiskujejo in več razmišljajo
● uporabnik ne more preskušati modela brez pomoči razvijalcev
(»računalnik«, »pomočnik«, »opazovalec«)
4
Računalniški prototip
● interaktivna simulacija programske opreme
● visoka natančnost v smislu »look&feel«
– izgled zelo podoben končnemu
– interakcija z miško in tipkovnico
● nizka natančnost po globini
– implementacija funkcionalnosti →
pri papirnatem prototipu človek
(»računalnik«) simulira ozadje, pri računalniškem prototipu tega ni
– računalniški prototip je tipično horizontalen → pokriva večino značilnosti, ne pa
ozadja
5
Računalniški prototip
● kaj se naučimo iz računalniškega prototipa
– vse tisto, česar se ne naučimo iz papirnatega prototipa
● izgled na zaslonu → ali je vmesnik čist, prevelik, zapleten; se pomembni elementi
lahko najdejo
● barv, pisav, ikon, … → ali so dobro izbrani
● vprašanja učinkovitosti → Fittsov zakon; so elementi dovolj veliki; so preblizu
skupaj; so seznami pod drsniki predolgi;
● odzivnih časov
● dinamike → uporabniki manj razmišljajo in več preiskujejo
● interaktivne povratne informacije → ali uporabnik opazi in se odzove na
spremembe statusa, spremembe kurzorja; … majhne spremembe (slepota
sprememb)
6
Grafična razvojna orodja
● zakaj uporabljati grafična razvojna orodja za izdelavo prototipov
– hitrejše delo od kodiranja
– ni popravljanja kode
– lažje spremeniti in zavreči
– ne želimo, da generator sam
izvede aranžiranje gradnikov
7
Tehnike računalniških prototipov
● zaporedje slik vmesnika

● zaporedje povezanih slik vmesnika
● generatorji vmesnikov
– omogočajo gradnjo oken v katerih se nahajajo resnične podobe dane palete
podob
8
Orodja za delo s sekvencami slik
● PhotoShop, Gimp (slike)
● MS PowerPoint,
LibreOffice Impress
(slike)
● HTML
– klikabilne mape
(povezane slike)
9
Orodja za delo s sekvencami slik
● delovni prototip za »on-line« radijsko postajo
10
Prednosti in slabosti uporabe (sekvence) slik
✔ narisati se da karkoli
✗ ni polj za vnos
✗ podobe niso aktivne/interaktivne
✗ neuporabno za testiranje uporabnikov
✗ celo hevristično vrednotenje je boljše
11
Generatorji vmesnikov
● Javanski generatorji vmesnikov/integrirana razvojna okolja
– Oracle NetBeans → vgrajeno → Scene Builder
– Idea IntelliJ → GUI Designer → Scene Builder
– IBM Eclipse → WindowBuilder Pro → SceneBuilder
● drugi generatorji vmesnikov/integrirana razvojna okolja
– xdesginer (Motif, morda še dela?)
– Glade Interface Designer (GTK+)
– QtDesigner (Qt)
– VisualStudio (VisualBasic, Visual C#) za Windows → Windows Form Designer, Windows
Presentation Foundation
– Interface Builder za Mac OSX
● navodilo → ne dovoli, da generator sam izvede aranžiranje gradnikov; najprej uporabi 12
absolutno pozicioniranje
Dobre in slabe strani generatorjev vmesnikov
✔ dejanski, konkretni osnovni gradniki, ne le njihove slike
✔ možnost uporabe vnaprej zgrajenih sestavljenih podob
✗ omejen nabor standardnih podob
✗ obsežni grafični vmesniki zahtevajo veliko kode
13
Izhodni modeli
1
Vsebina
● izhodni modeli
● risanje
● barvni modeli
● rasterizacija
● barvanje poligonov
2
Interakcije
● narava interakcije človek računalnik
3
Interakcije
● trije izhodni modeli
– komponente (objekti)
● grafični objekti v drevesni hierarhiji z avtomatskim ponovnim izrisom
● primeri: meniji, seznami, oznake, gumbi
– osnovni grafični gradniki
● visoko-nivojski osnovni grafični gradniki: črte, oblike, krivulje, besedilo
● primer: drawText(), drawLine()
● poznano kot: vektorska grafika, strukturna grafika
– piksli – slikovna pika, slikovna točka
● dvodimenzionalno polje pikslov
● poznano kot: raster, slika, bitna slika, polje pikslov
4
Trije izhodni modeli
komponente (objekti)
risanje komponent
osnovni grafični gradniki

rasterizacija
piksli
5
Model komponent
● komponente ali objekti
– poznano kot:
● pogledi
● interaktorji
● podobe (widget)
● osnovni gradniki
– primeri
● meniji
● seznami
● oznake
● …
6
Model osnovnih grafičnih gradnikov
● risalna površina
– struktura za risanje: »drawable« (»Pixmap«, »Window«)
– zaslon, del pomnilnika, gonilnik za tiskalnik, oddaljen zaslon
● grafični kontekst
– hrani grafične lastnosti, uporabljene pri izrisu, ni potrebno ob vsakem klicu pošiljati
gradniku
– pisava, barve, debelina črte, polnitev, robovi,...
● koordinatni sistem
– izhodišče, skala, rotacija
● področje obrezovanja
● osnovni grafični gradniki
– črta, krog (lok, elipsa), pravokotnik, besedilo, poligon, oblike 7
Modeli pikslov
● piksli so v pravokotnem polju
– piksel je vektor (npr. RGB), polje je tridimenzionalno
● RGB barvne komponente imenujemo tudi kanali
● biti na piksel
– 1 bit na piksel: črno/bel
– 4-8 bitov na piksel: vsak piksel je indeks v iskalni tabeli
– 24 bitov na piksel: 8 bitov za vsako barvo (npr. RGB)
– 32 bitov na piksel: 8 bitov za vsako barvo, 8 bitov za alfa kanal
● piksli so lahko organizirani na več načinov
– v besede (RGBRGB...RGB) ali z izgubami (RGB- RGB-), soležno
– v ločene ravnine (samo R, samo G, samo B)
– od začetka proti koncu ali od konca proti začetku (npr. BMP) 8
Pretvorba osnovnih gradnikov v piksle
● rasterizacijski algoritmi
– za risanje črte
– za risanje kroga
– za glajenje osnovnih gradnikov
– za polnjenje/barvanje poligonov
9
Risanje komponent
● risanje poteka od vrha navzdol
– gradnik nariše samega sebe z uporabo grafičnih osnovnih gradnikov ali pikslov
– gradnik naroči neposredno vsebovanim gradnikom, da se narišejo
10
Risanje komponent
● določi področje rezanja kot presečišče med najvišjo podobo in področjem
obrezovanja
● nariši samega sebe
– nariši sebe v področju rezanja
– za vsakega naslednika
● če obstaja presečišče med področjem rezanja in naslednikom
– določi področje rezanja kot presečišče med naslednikom in področjem obrezovanja
– nariši samega sebe (rekurzija)
11
Risanje komponent-primer
● določi področje rezanja kot presečišče med najvišjo podobo in področjem obrezovanja
● nariši samega sebe
– nariši sebe v področju rezanja
– za vsakega naslednika
● če obstaja presečišče med področjem rezanja in naslednikom
– določi področje rezanja kot presečišče med naslednikom in področjem obrezovanja
– nariši samega sebe (rekurzija)
12
Naivni ponovni izris
● naivni ponovni izris ni primeren, saj povzroči učinek utripanja
● potrebno je risanje od vrha navzdol vseh objektov v hierarhiji pogleda
13
Dvoji pomnilnik
● dvojni pomnilnik reši problem utripanja
– risanje v pomnilnik je hitrejše kot regeneracija zaslona
– regeneracija pomeni, da zbrišemo gradnike
– kopiranje je hitrejše od regeneriranje drevesne strukture
– »poškodovani« objekti so zbrisani samo v pomnilniku
– statični gradniki, ki morajo biti regenerirani, niso nikoli zbrisani z zaslona
14
Vizualno zaznavanje
● človekovo oko sestavljeno iz foto-receptorjev: paličnice/paličice (svetlo/temno) in
čepnice/čepki (barve)
● frekvenca: 430 – 750 * 10^12 Hz
15
Foto-receptorji
● paličnice (vlakna): ~ 125 milijonov
– občutljiva na spremembe svetlobe
– bolj občutljiva
● čepnice (stožci): ~ 7 milijonov
– občutljivi na barve
– zelena in rdeča bolj občutljivo
– modra manj občutljivo
16
Brezbarvna svetloba
● atribut v fizikalnem smisli
– intenziteta: gostota moči ali energijskega toka, ki se izseva v prostorski kot
● atributi v fiziološkem smislu
– (svetilnost (»luminance«): mera svetlobne intenzitete preko področja in smeri)
– svetlost (»brightness«): sprejeta intenziteta brezbarvne svetlobe lastno svetlečih objektov
(zaznana »luminance«)
– svetlost (»lightness«): sprejeta intenziteta odbite brezbarvne svetlobe (zazna »brightness«)
– tudi (razlika med »lightness« in »brightness«) → »brightness« je sprejeta intenziteta,

medtem ko je »lightness« sprejeta intenziteta glede na neko povprečno vrednost, npr.
podobno osvetljeno področje, ki izgleda belo
17
Barvna svetloba
● atributi v fizikalnem smislu
– valovna dolžina (λ; ali frekvenca, f; λ*f = c)
– čistost: 100% čista barva je nasičena – brez bele
– intenziteta: gostota moči ali energijskega toka, ki se izseva v prostorski kot
● atributi v fiziološkem smislu
– barva
– nasičenje
– svetlost (»lightness«): sprejeta intenziteta
odbite svetlobe
– svetlost (»brightness«): sprejeta intenziteta
svetlobe lastno svetlečih objektov
18
Barvni modeli
● RGB kocka: rdeča (R), zelena (G), modra (B)
– pretežno uporabljen v računalništvu
● CMY: sinja (C), magenta (M), rumena (Y)
– uporabljen v tiskarstvu: pigmenti absorbirajo valovne dolžine
19
Barvni modeli
● HSV (ali HSB) stožec
– odtenek (»hue«): vrsta barve, predstavlja kot okoli stožca
– nasičenje (»saturation«): količina barve
0 % (siva) – 100 % (barva)
– intenziteta (»value«): 0 % (temna) – 100 % (svetla)
● HSL dvojni stožec
– odtenek (»hue«): vrsta barve, predstavlja kot okoli stožca
– nasičenje (»saturation«): količina barve
0 % (siva) – 100 % (barva)
– intenziteta (»value«): 0 % (temna) – 100 % (svetla)
– dvigne center HSV modela tako, da ima samo bela intenziteto 1.0, čiste barve
pa imajo intenziteto 0.5 20
Barvni modeli
21
Rasterizacija
● pretvorba osnovnih grafičnih gradnikov v piksle
– rasterizacijski algoritmi
● za risanje črt: linearna enačba
● osnovni algoritem
22
Foley et al, Computer Graphics: Principles and Practice
Rasterizacija
● pretvorba osnovnih
grafičnih gradnikov v piksle
● za risanje črt
● algoritem najbližje točke
23
Rasterizacija
● za risanje kroga
24
Rasterizacija
● za risanje kroga
25
Glajenje osnovnih gradnikov
26
● glajenje z neuteženim
prekrivanjem površine
27
● glajenje z neuteženim
– poišči intenziteto piksla z izračunom
področij prekrivanja vsakega piksla
znotraj objekta za prikaz
– gradnik nima učinka na
intenziteto če ni prekrivanja
– enako velika področja
prekrivanja prispevajo
enako intenziteto
ne glede na oddaljenost
28
● glajenje z uteženim
– bolj oddaljen piksel ima
manjšo intenziteto
– gradnik ima učinek na
intenziteto tudi če ni prekrivanja
(krog z radijem ena)
– enako velika področja
prekrivanja imajo večji
učinek, če so bližje središču
piksla
29
31
Barvanje poligonov
● prva ideja: rekurzija
– težave: hitro pride do porabe pomnilnika, počasno
● izboljšava: iterativni vrstični postopek barvanja
1. naključno izberi piksel (ključni piksel) v poligonu
2. barvaj levo in desno od piksla do robov poligona
3. v neobarvanih pikslih v vrstici zgoraj in nato spodaj izbiraj ključne piksle, ki
imajo na desni za soseda rob in jih shrani v sklad
4. iz sklada vzemi naslednji ključni piksel
5. če je ključni piksel obarvan skoči na točko 4, sicer pa na točko 2
32
Barvanje poligonov
33
Izbor in načrtovanje ikon
1
Vsebina
● kaj je ikona
● sestavni deli ikon
● principi načrtovanja ikon
● navodila načrtovanja ikon
● ikonski jezik
2
Spiralni model
Kaj sploh je ikona
● pri grafičnih računalniških vmesnikih je ikona slika, ki ponazarja aplikacijo,
zmožnost, ali kakšen drug objekt ali koncept, ki ima pomen za uporabnika
● na spletnih straneh je ikona pogosto grafična slika, ki predstavlja temo ali
informacijsko kategorijo neke druge spletne strani; pogosto so ikone
povezave na to spletno stran
● različne definicije ikon
– ikona je nekaj, kar zgleda tako kot tisto, kar naj bi predstavljal
– ikona je majhen vizualni simbol, lažje za prepoznati
4
Vizualno povezovanje
● ikone lahko povzročijo takojšnje vizualno povezovanje z določenim
podjetjem/izdelkom/... in posredujejo kak namig (poševni e)
● za katera podjetja oziroma izdelek gre?
5
Pomen in prepoznava ikon
● informacija se prenaša preko slik, zelo primerne so silhuete American
Pediatric
● slike imajo lahko hitro drug pomen v nekem kontekstu Center
– tako so lahko ikone in logotipi zabavni (a ne za nas)

Office of
● pomenijo nekaj povsem drugega, ne tisto kar smo načrtovali Govrnment
Commerce
● odvračajo potencialne uporabnike
● ne prenašajo pomena
A Style Locum DoughBoys Kudawara Mont-Sat Portland Trail 6

Pharmacy Blazers
Sestavni deli ikone
● standardno sestavljajo ikono
– okvir
– ozadje
– slika
– oznaka
7
Načrtovanje ikon
● načrtovanje
– določitev slik, ki najbolje predstavijo želeni koncept (objekt ali akcija)
– uporaba vsebovanih ikon danega sistema
– gradnja ikon z upoštevanjem navodil
– uporaba preprostih metafor in majhne množice konceptov
● dobro načrtane ikone Nedavno
– jih ločimo med sabo Namizje
Moji dokumenti
– se lahko razpoznajo in so razumljive Moj računalnik
Moje omrežje
– so vizualno preproste in informativne
– si jih je enostavno za zapomniti
– pomagajo k lažji internacionalizaciji vmesnika 8
Principi načrtovanja ikon
● skladnost (koherentnost)
– načrtuj množico ikon kot celoto
– množica ikon naj bo konsistentna v smislu velikosti, barv, metafor, nivoju
abstrakcije/realizma
– ikone v množici naj bodo vizualno uravnotežene
– vizualne razlike naj imajo pomen – nepomembne dekoracije motijo
● čitljivost
– v čim večji meri uporaba velikih objektov in debelih črt
– upoštevanje resolucije in razdalje gledanja
– zagotovitev kontrasta med ozadjem in ospredjem
– izogibanje lokom in nezveznim črtam
9
– obrisi prenašajo največ informacije
● uporabljaj prepoznavanje in ne pomnjenje
– uporaba metafor, ki so blizu uporabniku
– uporaba konkretnih objektov
● konkretni objekti uporabnika asociirajo na možnost uporabe
● abstraktne koncepte in akcije se težko prikaže
– zagotovi besedilne oznake, včasih so lahko ikone tudi dvoumne
– primer: dobra ikona za »Razveljavi« je okrogla puščica nazaj
● uporabljaj barve konzervativno
– načrtovanje črno-belih ikon, nato dodajanje barv konzervativno
– veliko barv je obremenjujočih, uporabljaj črno in belo barvo ter še eno do dve
barvi
10
● upoštevanje principa skladnosti ikon v risarskih
programih
– levo (paintbrush,
vizualno
neuravnotežene ikone,
zgornje vizualno težke,
spodnje preproste)
– desno (MS paint,
uravnotežene in
konsistentne)
11
● različni nivoji realizma pri ikonah in abstrakcija
– fotografija → risba → karikatura → skica → obris
– uporabljaj le en nivo realizma
– primer: foto-realistični ikoni ter abstraktni ikoni
12
– obris posreduje vso potrebno informacijo
13
– različni nivoji abstrakcije
14
● izgled ikone velikosti 30x30 točk pri tipičnih razdaljah gledanja na različnih
medijih pri različnih velikostih se lahko razlikuje
– tipične razdalje gledanja
● namizni računalnik: 60 cm
● papirnati dokument: 45 cm
● mobilni telefon: 36 cm (sporočila)/32 cm (brskanje)
● prenosni računalnik: 30 cm
– ikona bo izgledala veliko večja na razdalji 30 cm na 15 palčnem zaslonu resolucije
1366x768 (~104 ppi/dpi) kot na razdalji 60 cm na 25 palčnem zaslonu resolucije
1920x1080 (~88 dpi)
● 2.5 cm /104 ppi * 30 pts -> ~ 7 mm
pri razdalji 30 cm je zaznana velikost ~ 62 referenčnih točk
● 2.5 cm / 88 ppi * 30 pts -> ~ 8.5 mm
pri razdalji 60 cm je zaznana velikost ~ 38 referenčnih točk 15
● Uporabljaj znane in konkretne metafore
– princip prepoznavanja
16
– preveč kričeča izbira barv za ikone pri sistemu Windows 3.1
17
– načrtuj črno-belo, nato dodajaj barve konzervativno
– primer evolucije orodne vrstice programa MS Word
Miller, MIT OpenCourseWare, 6.831, UI Design and Implementation 18

● načrtuj množico ikon kot celoto
● zagotovi konsistentnost ikon glede velikosti, barv, nivoja abstrakcije,
realizma
19
Kulturni vidiki in internacionalizacija
● previdnost pri uporabi besedila in črk v ikonah
– besede v različnih jezikih so drugačne in se lahko drugače začnejo
– ne uporabljaj simbolov rok ali značilnosti obraza, saj se med kulturami lahko
razlikujejo
– pazljivo uporabi metafore, ki pripadajo neki kulturi
20
Uporaba ikon ni vedno primerna
● pri visoko abstraktnih konceptih in majhnih razlikah je primernejša uporaba
opisa oziroma besedila
21
Navodila za načrtovanje ikon
● uporabi standardne ikone danega sistema ali mednarodne
organizacije, npr. ISO
● delaj preproste in razumljive oblike, ki naj bodo uporabniku znane in
naj bodo konkretne
22
● gradi vizualno in konceptualno ločljive oblike
23
● objekti naj bodo predstavljeni brez detajlov
● ohranjaj konsistentnost metodologije pri načrtovanju skupine ikon →

upodobi objekte (»Datoteka«), akcije (»Razveljavi«), orodja za akcije
(»Nastavitve«), stanja pred in po akcijah (»Prazen/Poln Koš za smeti«)
● ohrani konsistentnost strukture in oblike skupine ikon → omejeno število
sprememb v kotih, debelinah črt, količini praznega prostora
24
● lastnosti ikon naj bodo izražene čim bolj jasno
● po potrebi vključuj pojasnila slabo dobro
● če je le mogoče vključuj
animacijo
25
● aranžiranje ikon
– število vrst ikon naj ne bo večje od 12
(pojasnilne, interaktivne, dekorativne, …)
– število vseh ikon naj ne bo večje od 20
– aranžiraj ikone tako, da odražajo
organizacijo objektov v realnem svetu
– aranžiraj ikone za objekte, akcije, orodja za
akcije, in ikone za stanje pred in po akcijah
v različne skupine
– omogoči uporabniku, da si sam razporedi
ikone (npr. namizje) in prikaz pojasnil
26
● gradi oblike, ki vizualno izražajo relacije med posameznimi ikonami →
uporabi jezik ikon
27
Življenjski cikel načrtovanja ikon
● zberi informacije in naredi analizo
● zamisli si ikonski jezik, če je to primerno
● načrtuj ikone → življenjski cikel načrtovanja ikon:
načrtuj → testiraj → ponovno načrtuj
– začni s črno-belo ročno narisano
skico na papirju (silhuete!)
– testiraj in ponovno načrtuj, dokler
osnovni simboli ne delujejo
– dodaj sivo in modro barvo; načrtuj
z računalnikom; tiskaj barvne verzije
v enaki velikosti
– testiraj prejšnji korak, dokler
ikone ne delujejo 28
● testiranje intuitivnosti ikon
– intuitivnost je zaželena lastnost ikon
– ni potrebno učenje in privajanje na uporabo ikon
– podobno kot testiranje vmesnika poteka tudi testiranje intuitivnosti ikon
29
● testiranje intuitivnosti ikon
– intuitivnost je zaželena lastnost ikon
– ni potrebno učenje in privajanje na uporabo ikon
– podobno kot testiranje vmesnika poteka tudi testiranje intuitivnosti ikon
30
Jezik ikon
● v primeru načrtovanje skupine ikon, ki so med sabo povezane, razvij jezik ikon
– osnovni koncepti/simboli →
● dokument
● povezava
● obiskano
● besedilo
● slika
– osnovne simbole kombiniraj v kompleksnejše simbole →
● besedilni dokument
● povezava na besedilni dokument
● povezava na obiskan besedilni dokument
● slikovni dokument
● … 31
● jezik ikon za MS Windows NT 4.0 sistem
Ikona = osnovni simbol + [tip dokumenta] + [aplikacija]
– osnovni simboli → dokument: pomočnik: predloga:
– tipi dokumentov → besedilni: preglednica: predstavitev: baza:
– aplikacije → Word: Excel: Powerpoint: Access:
– generirane ikone →
● Word: dokument: predloga: pomoč p.:
● Ppt.: predstavitev: predloga: pomoč p.

32
Primer cikla načrtovanja ikon
● koncept »Products and solutions« za Sun-ove spletne strani (1995)
33
● koncept »Sun on the net« za Sun-ove spletne strani (1995)
– 12 iteracij → od skice do končnega izdelka
34
● načrtovanje ikon za koncept »Technology and developers« na Sun-ovih spletnih
straneh
● ikona predviden pomen interpretacija
čip, CD-rom pretežko za prepoznati, bolj kot končan proizvod
računalnik, čip pretežko, končan proizvod
delavec negativna konotacija, v izdelavi 35

straneh
razvijalec, izdelava všečno, preveč poudarka na strojni opremi
razvijalec, moč všeč ideja brzdanja moči,

vzame se strela namesto ključa
razvijalec, računalnik
36
straneh
razvijalec, moč (slabo sprejetje) strela in grom, elektrika-boleče
izdelava tehnologija ubija, plesni stroj
→ odstrani se človek iz ikone
moč in zobata strela, ki je zadela stroj
kolesa → odstrani se strela, doda se CD-ROM
CD-ROM in zobata razvoj in inženiring

kolesa Andrews, Human-Computer Interaction, Graz University of Technology
37
https://www.webmastershall.com/things-to-consider-when-looking-for-the-best-web-design-company/
Navodila za načrtovanje
spletnih strani
1
Vsebina
● metafore
● principi načrtovanja
● navodila načrtovanja
● etika, morala, navade
● HTML in CSS
● odzivni dizajn
2
Metafore
● namizni računalniki → delovna miza
– uporabnik hrani strani v vsebovalnikih → mape, delovna področja, …
– briše stvari z metanjem v koš za smeti,
● svetovni splet → iskanje, brskanje, gledanje
– uporabnik išče, bere in pregleduje datoteke na
svetovnem spletu, ki so povezane med sabo
● računanje na svetovnem spletu → komunikacija
računalnik-računalnik
– konzumacija storitev
3
Kaj je svetovni splet
● svetovni splet je informacijski prostor
● vsebuje dokumente in druge resurse
● dokumenti in resursi so med sabo povezani preko hipertekstovnih povezav
● dostop do svetovnega spleta poteka preko Interneta
– svetovni splet ni Internet
– Internet vsebuje podporno infrastrukturo in druge tehnologije
– na svetovni splet pa lahko gledamo kot na komunikacijski model ki preko HTTP
omogoča izmenjavo informacij na Internetu
– na svetovni splet lahko tako tudi gledamo kot na komunikacijski medij
4
Posebnosti svetovnega spleta
● dostop do informacij
– televizija, časopisi, revije, … ponujajo izbrano informacijo
– svetovni splet omogoča dostop do katerekoli informacije na spletu
● možnost komunikacije z eno ali več osebami
– televizija, časopisi, revije, … ne omogočajo komunikacije
– svetovni splet omogoča komunikacijo vsakega z vsakim
● aktivna participacija
– televizija, časopisi, revije, … omogočajo minimalno sodelovanje (pisma bralcev, ipd)
– svetovni splet omogoča objavljanje vsakomur
● neodvisnost od komercialnih vsebin
– televizija, časopisi, revije, … vsiljujejo reklamo
5
– brskalniki za svetovni splet omogočajo blokiranje reklam (?Google?)
Principi načrtovanja spletnih strani
● ravnamo se po Mandelovih principih
– zagotovi nadzor uporabnika
– reduciraj obremenitev uporabnikovega spomina
– zagotovi konsistentnost
● namesto Mandelovih lahko uporabljamo tudi druge principe
– Nielsenova pravila
– Stoneova pravila
– Tognazinnijeva pravila
– Schneidermanova pravila
● ravnamo se tudi po drugih visoko-nivojskih konceptih (Normanovi namigi, ...)
6
Principi načrtovanja spletnih strani
● pri načrtovanju spletnih strani in zagotavljanju vsebin se držimo principa
»Home Run«
– »High quality content« → kvalitetna vsebina
– »Often updated« → pogosto posodobljeno
– »Minimal download time« → minimalen čas prenašanja
– »Ease of use« → enostavnost uporabe
– »Relevant to user's needs« → relevantno za uporabnika
● prilagodi se uporabnikovim potrebam
– »Unique to the online medium« → vsebina edinstvena za spletni medij
● spletne strani imajo neko dodano vrednost
– »Net-centric corporate culture« → mrežno usmerjena korporativna kultura
● izdelane spletne strani je potrebno podpirati 7
● vidiki načrtovanja spletnih strani
– uporabnik nima potrpljenja s slabo načrtanimi
in neuporabnimi spletnimi stranmi
● ob pojavitvi svetovnega spleta je bila vsaka stran vredna ogleda
● od srede 90ih let pa je strani že preveč
– uporabniki ne želijo uporabljati drsnikov pri »surfanju«
● tudi pri internetu obstaja »below the fold« in »above the fold«
– uporabniki na spletu nočejo zelo veliko brati
● pogosto se splet uporablja kot razvedrilo
● veliko uporabnikov prebere samo izvlečke, ki jih ponudi iskalnik
– prejšnji dve točki veljata le delno
● svetovni splet je lahko tudi dober vir poglobljenih informacij
– veliko uporabnikov uporablja mobilne naprave
8
● prilagoditi se jim je potrebno
● predvidevaj profil obiskovalcev
– novi obiskovalci → stran namenjena občasnim obiskovalcem
– obiskovalci z izkušnjami → stalni obiskovalci (dnevno, večkrat tedensko)
● definiraj uporabnikove naloge
– iskanje informacije → informacije naj bodo dostopne, omogoči iskanje po spletišču
– naročilo → če stran omogoča naročanje izdelkov, ..., naj bo to vidno in preprosto
izvedljivo
– kontaktiranje predstavnika → spletna stran naj ima vidno kontaktno informacijo
– tehnična pomoč → spletna stran naj ima vidno kontaktno informacijo
– zahtevana povratna informacija → stran naj omogoča pošiljanje povratne
informacije (»knjiga pripomb in pohval«)
– snemanje, kopiranje → če to stran omogoča, naj bo to vidno in preprosto 9
10
11
● pomagaj uporabnikom pri navigaciji in iskanju
– čista in intuitivna organizacija informacij → kazalo, indeksi, »what's new«
– razumljiva in vidna vizualna navigacijska shema → gradniki za interakcijo, besedila, slike
– omogočeno iskanje po temah, ključnih besedah, imenih, … → omogočanje ustreznih
filtrov v iskalniku
– pomoč za navigacijo na vsaki strani → iskalnik za vsako stran/sekcijo
– omogočen preskok na katerokoli stran → strani se ne tvorijo na podlagi zaporedja
obiskov (če to ni nujno potrebno, npr. plačevanje preko PayPal)
– označene slike, ki omogočajo navigacijo → povezave naj ne bodo skrite
– omogočena vrnitev na osnovno stran → »Home«
– uporaba standardnih barv in poudarjanje povezav → dobro vidne povezave zmanjšajo
zbeganost
12
– osveževanje povezav na druge strani → nedelujoče povezave so nadležne
13
14
● omogoči uporabnikom hitro delo
– zmanjševanje časa iskanja → omogoči iskanje po temah, ključnih besedah, …
– zmanjševanje časa nalaganja strani in slik → optimizacija grafike in animacije
– zagotovitev pregleda nad stranmi → »site map«
– izogibanje drsnikom → struktura strani, ki se prilagaja velikosti okna/zaslona
– domači in znani gradniki za interakcijo → gradniki kot na ostalih spletiščih
– omejitev števila izbir na nekem nivoju → grupiranje po nivojih (Hick-Hymanov zakon)
– logično grupiranje izbir → sorodni elementi sodijo skupaj
– omogočeno hitro delo za pogosta opravila → pogosta opravila naj bodo izpostavljena na vrhu
– hiter prikaz pomembne vsebine → pomembna vsebina na vrhu hierarhije
strani in na vrhu strani
– preprost kontekst → ena tema na eno stran
– uporaba primernega dizajna → ozadja, barve, pisave, beli presledki, velikosti besedila in
15
kontrasta z ozadjem
16
● zagotovi konsistentnost
– pisave
– barve
– izrazoslovje
– oznake
– oblike strani
– elementi za navigacijo
– povezave
– navigacijska imena in terminologija
– prikazuje naj se tudi druga informacija → URL, pravice, …
– strani naj bodo enake v različnih brskalnikih na različnih platformah 17
Etika, morala, navade
● domače strani so zaščitene → ne uporabljaj tujih materialov
– če uporabljaš tuje materiale, prosi za dovoljenje za uporabo
– obvezno navedi vir
– boljše: dodaj povezavo na tuj material
● izogibaj se besedilom, ki škodijo ugledu oseb
ali organizacij
● izogibaj se neprimernim materialom
– lahko zahteva preverjanje vsebine s strani administratorja portala
● privzemi, da so sklenjeni dogovori veljavni
– uporabljaj digitalni podpis
18
HTML
● HyperText Markup Language – označevalni jezik za opisovanje strukture in vsebine
dokumentov
● trenutna različica: 5.2, objavljena decembra 2017
– semantično strukturiranje besedila
– zmogljivejši elementi oblikovanja
– integracija multimedijskih vsebin
– animacija na slikarski površini → canvas
● dokumenti html pogosto niso sintaktično pravilni; potrebno jih je validirati in po
potrebi popraviti za pravilen prikaz v različnih brskalnikih
– http://validator.w3c.org/
19
Deli dokumenta HTML
● deklaracija dokumenta
<!DOCTYPE html>
● deklaracija vsebine dokumenta
<html>....</html>
vsebuje dva dela
– glavo: vsebuje meta informacijo o dokumentu in povezave na slogovne
predloge, ki določajo izgled dokumenta
<head>...</head>
– telo: vsebuje hierarhijo elementov, ki določa strukturo in vsebino dokumenta
<body>...</body>
● elementi v HTML imajo ponavadi začetek (<značka>) in konec (</značka>),
lahko pa so prazni (nimajo vsebine, npr. <img>), v tem primeru nimajo značke
za konec 20
Elementi HTML
● komentar: 
● naslovi: <h1> … <h6>
● odstavek: <p>
● prelom: <br>
● povezave <a href= …>
● slike <img src= …>
● seznami: <ul>, <ol>, <dt>; alineje <li>
● tabele: <table>, <tr>, <th>, <td>
● obrazci: <form>
● vnosna polja: <input type= …> (text, password, checkbox, …
● izbirni seznami: <select>, <option>
● multimedijske vsebine: <audio>, <video>
21
– različna podpora brskalnikov, alternativni formati
CSS
● HTML je prvenstveno zadolžen za strukturi in vsebino dokumenta
● HTML omogoča določanje izgleda, vendar naj se ne bi uporabljal za to
● kaskadne slogovne predloge (»Cascading Style Sheets«, CSS) so sintaktični
mehanizem za specifikacijo informacije o slogih
● je sintaksa ločena od HTML vendar je lahko vsebovana v dokumentu HTML
● CSS omogočajo
– enoten slog celotnega dokumenta ali množice dokumentov
– ločevanje dela razvijalcev in oblikovalcev
22
CSS
● kaskada treh nivojev definiranja sloga
– vrstične (»inline«) definicije:
določi slog za posamezen
element
– na nivoju dokumenta
(»document-level«): določi slog za
elemente znotraj enega dokumenta
– zunanje slogovne predloge
(»external«): določi slog za množico
dokumentov
● kadar je uporabljenih več nivojev
definicije sloga brskalnik uporabi bolj specifično: najprej vrstična, nato na nivoju
dokumenta, nazadnje zunanja definicija
● če slog elementa ni določen, potem uporabi brskalnik privzeti slog za ta element 23
Implementacije nivojev slogov
● vrstične definicije: atribut style
style= "lastnost1 : vrednost1; …."
– zameglijo prednost uporabe CSS
– ne ločijo predstavitve od vsebine
● na nivoju dokumenta: v znački <style> v glavi
<style type= "text/css"
em { lastnost1: vrednost1;}
</style>
● zunanje slogovne predloge
– seznam pravil v ločeni datoteki, lahko oddaljeni
– način podajanja pravil kot na nivoju dokumenta
– povezava na slogovno predlogo v glavi dokumenta
<link rel= "stylesheet" type= "text" href="stylesheet.css"> 24
Določanje slogovnih pravil
● s seznamom elementov
– h1, h3 {font-size: 20pt;}
● s seznamom elementov v kontekstu (gnezdenju)
– form em {font-size: 20pt;}
● s seznamom elementov v kontekstu (gnezdenju) – neposredni nasledniki
– form > p > em {font-size: 20pt;}
● z definiranjem razredov slogov za določene elemente
– p.warning {color: red;}
25
Določanje slogovnih pravil
● z definiranjem generičnega razreda sloga
– .warning {color: red;}
● za značko z določenim ID-jem
– #mojID {font-size: 20pt;}
● za vse elemente v dokumentu
– * {font-size: 20pt;}
● ob dogodkih nad elementi, sprememba sloga zato, ker se nad elementom nekaj zgodi
in ne zato, ker element je
– input:hover {color: red;} - ker je kurzor nad elementom
– p::first-letter {font-size: 40pt;} - ker je to prva črka
26
Vrste slogovnih pravil
● 60 lastnosti v (približno) sedmih kategorijah (CSS1):
– fonts (vrste pisav), lists (seznami), colours (barve), text alignment (poravnava besedila), margins
(robovi), borders (obrobe), background (ozadje)
● dodatnih 34 lastnosti v prejšnjih sedmih in dodatnih šestih kategorijah (CSS2):
– writing modes (načini pisanja), tables (tabele), basic user-interface (osnovni vmesnik),
multicolumn layout (večstolpična postavitev), paged media (ostranjeni mediji), generated content
for paged media (generirana vsebina za ostranjene medije
● dodatnih več kot 100 lastnosti v predhodnih kategorijah in dodatnih devetih
kategorijah (CSS3):
– animation (animacija), transform (transformacije) , transitions (prehodi), filter eff. (učinki
filtriranja), image vals. (slikovne vrednosti), speech (govor), ...
● vrednosti določamo s ključnimi besedami in vrednostmi (absolutnimi in relativnimi)
● barve z imenom ali paleto RGB
27
Slogovne predloge za različne medije
●
slogovna predloga, vezana na napravo, ki prikazuje stran (all, handheld, braille,
speech, print, screen, tv, projection, …)
●
definiramo jo z grupiranjem oblikovnih stavkov v @media _device_ {...}
<!DOCTYPE HTML>
<html>
<head> <title>Test CSS medijev</title>
<meta charset="utf-8" />
<style type="text/css" >
body { background-color: green; font-size: 15px; }
@media screen and (min-width: 480px) { body { background-color: yellow; } }
@media screen and (min-height: 300px) { body { font-size: 25px; } }
@media print{ body{ background-color: white; font-size: 40px; } }
</style>
</head>
<body>
<h1>Test CSS medijev</h1>
<p>Sedaj pa imamo tukaj neko besedilo, ki se bo prikazalo v brskalniku.
S spreminjanjem dimenzij okna, pa bomo lahko spreminjali velikost pisave.
</p>
</body> 28
</html>
Slogovne predloge za različne medije
● zaradi preglednosti je včasih dobro, da so slogovne pole ločene po različnih
datotekah, na primer za različne vrste naprav in podobno
●
slogovne pole je, poleg uporabe značke <style> možno uvoziti z direktivo @import
● direktive za uvoz morajo biti prve direktive v definiciji sloga za dokument
<!DOCTYPE HTML>
<html>
body {background-color: green;
<head> <title>Test CSS medijev</title> font-size: 15px; }
<meta charset="utf-8" />
<style type="text/css" > body { font-size: 25px; }
@import 'custom.css';
@import url('widescreen.css') screen and (min-width: 480px);
@import "highscreen.css" screen and (min-height: 300px); body { background-color: yellow; }
@import url("printing.css") print;
</style> body{ background-color: white;
</head>
font-size: 60px; }
<body>
<h1>Test CSS medijev</h1>
<p>Sedaj pa imamo tukaj neko besedilo, ki se bo prikazalo v brskalniku.
S spreminjanjem dimenzij okna, pa bomo lahko spreminjali velikost pisave.
</p>
</body> 29
</html>
Odzivni spletni dizajn
● odzivni spletni dizajn je dizajn, pri katerem se spletna stran avtomatsko
prilagodi tako, da izgleda dobro na vseh napravah, od majhnih telefonov do
velikih namiznih računalnikov
● pri odzivnem dizajnu se uporabljata HTML in CSS za avtomatsko prilagajanje
spletne strani napravi
● spletna stran naj bi izgledala dobro na vsaki napravi,
odzivne naj bi bile tudi slike, ki naj se prilagajajo
velikosti naprave, in besedilo, katerega velikost naj se
prilagaja velikosti
okna (»viewport«)
ali privzeti velikosti
pisave naprave
30
Izdelovanje spletnih strani za različne naprave z Bootstrap
● Bootstrap omogoča prilagajanje izgleda spletne strani različnim napravam in velikostim
zaslonov
● uporabimo ga tako, da se v dokumentu povežemo nanj
● lahko ga gostimo sami, lahko pa uporabimo CDN
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
● pri izdelavi moramo načrt implementirati najprej za mobilne naprave (majhne resolucije)
● temelji na mrežnem sistemu → 12 stolpcev
● elementi lahko zasedejo poljubno število stolpcev
● mreža je odzivna in se prilagodi glede na velikost zaslona, pri manjših zaslonih se stolpci
razporedijo v vrstice
31
● Bootstrap uporablja mrežni sistem, v katerega lahko vstavljamo vsebino
● vrstica je razdeljena na 12 delov, ki jih lahko poljubno sestavljamo v stolpce
32
● pravila uporabe mreže Bootstrap
– vrstice morajo biti v vsebovalniku .container ali .container-fluid
za pravilno poravnavo
– uporaba vrstic za kreiranje vodoravnih skupin stolpcev
– vsebina naj bo v stolpcih, samo stolpci so lahko neposredni otroci vrstic
– obstajajo preddefinirani razredi, ki omogočajo hitre postavitve mrež
(npr. .col-sm-4)
– stolpci ustvarjajo praznine z zapolnitvami
– stolpci mreže se ustvarijo z določitvijo števila stolpcev izmed 12 možnih,
preko katerih naj se raztezajo, npr. za tri enake stolpce bi uporabili tri
razrede .col-sm-4
33

Kol 2 PDF Merge

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Kol 2 PDF Merge

Uploaded by

Copyright:

Available Formats

Navodila načrtovanja

kontekstom, različne vrste

● Dragi potniki, prosimo

● Dragi potniki, prosimo

● prvi zagon je »naredi ali pa uniči« situacija

GNOME Shell-integrated PA-front-end KDE Plasma-integrated volume-controller

Unity-integrated NM-front-end Hawaii-PA-front-end

Volume-controller for GNOME Panel Hawaii-NM-front-end

Volume-controller for Cinnamon Volume changer for Kicker

Weston, Clayton, Mutter, KWin,

evdev kms drm kdbus?

Glamor OpenGL 4.5 /

Free and open-source Proprietary

CPU & main memory 15

● pkg-config --libs <knjižnica>

● skripta com_gtk je tekstovna datoteka, ki omogoča lažje in enostavnejše

/* Podobi doda gumb z doloceno oznako */

void StopTheApp ( GObject * object, gpointer data ){

gtk_init ( &argc, &argv );

gboolean EventHandler ( GtkWidget * widget, GdkEvent *event, gpointer data){

gtk_init ( &argc, &argv );

● dogodki v GDK so strukture, ki so povezane z dogodki okenskega sistema

gtk_init ( &argc, &argv );

g_signal_connect (G_OBJECT ( button ), "event",

Miller, MIT OpenCourseWare, 6.831, UI Design and Implementation

– je vrednotenje prototipov ali implementacij vmesnika v laboratoriju na izbranih

● zaporedje slik vmesnika

osnovni grafični gradniki

– tudi (razlika med »lightness« in »brightness«) → »brightness« je sprejeta intenziteta,

– tako so lahko ikone in logotipi zabavni (a ne za nas)

A Style Locum DoughBoys Kudawara Mont-Sat Portland Trail 6

– jih ločimo med sabo Namizje

Miller, MIT OpenCourseWare, 6.831, UI Design and Implementation 18

● ohranjaj konsistentnost metodologije pri načrtovanju skupine ikon →

– tipi dokumentov → besedilni: preglednica: predstavitev: baza:

– aplikacije → Word: Excel: Powerpoint: Access:

● Ppt.: predstavitev: predloga: pomoč p.

računalnik, čip pretežko, končan proizvod

delavec negativna konotacija, v izdelavi 35

razvijalec, moč všeč ideja brzdanja moči,

CD-ROM in zobata razvoj in inženiring

You might also like