Oblikovanje uporabniških vmesnikov

Oblikovanje uporabniških vmesnikov

Napotki in tehnike


Uporabniški vmesnik je za večino uporabnikov

predstavlja celo računalniško rešitev: hočejo

pač, da razvijalci izdelajo aplikacijo, ki:

– ustreza njihovim zahtevam in je obenem

– enostavna za uporabo

• ne zanima jih kakšna je struktura baze podatkov, kako elegantno kodo je napisal razvijalec, niti umetniški vtis kombinacije barv, ...

DOBER VMESNIK: ljudje, ki strokovno

obvladajo področje aplikacije, lahko

uporabljajo aplikacijo brez priročnika in brez

posebnega usposabljanja (v idealnem

primeru)

• Ko razvijalec načrtuje uporabniški vmesnik,

se mora postaviti v vlogo uporabnika


Zakaj je oblika vmesnika še pomembna?

• Bolj intuitiven in enostaven vmesnik pomeni

tudi cenejše in hitrejše uvajanje aplikacije, ker

– zahteva manj usposabljanja uporabnikov

– zahteva manj podpore uporabnikom

– uporabniki raje delajo z (uporabljajo) aplikacijo


Aplikacijo, ki jo je težko uporabljati, uporabniki enostavno ne bodo uporabljali, ne glede na to

• kako je tehnično dovršena in

• kako dobro v funkcionalnem oziru ustreza zahtevam in delu uporabnika

Dialog z računalnikom se mora kar najbolje skladati z običajnim načinom dela uporabnika in z njegovim mentalnim modelom (načinom, kako uporabnik vidi problem)


• Za oblikovanje vmesnikov ni nekih natančno definiranih metod, obstaja pa vrsta predvsem izkustvenih priporočil.

• Veliki proizvajalci programske opreme (Microsoft, IBM, …) so izdelali in objavili svoje standarde in priporočila za oblikovanje uporabniških vmesnikov

• Kot dober primer lahko služijo vmesniki uspešnih aplikacij (če bi imele slabe uporabniške vmesnike, ne bi bile uspešne)


1. Konsistentnost skozi celotno aplikacijo:– meniji, gumbi, …, z istim pomenom so vedno na istih

mestih, – konsistentni odzivni časi za posamezne funkcije– dvojni klik, funkcijske tipke , …, imajo iste funkcije v

vsej aplikaciji– ista pravila za uporabo barv

Konsistentnost vmesnika omogoča, – da si uporabnik naredi natančen mentalni model

(način, kako uporabnik vidi problem) aplikacije. – Dobri mentalni modeli močno olajšajo (in pocenijo)

usposabljanje in podporo uporabnikom


2. Postavite standarde in jih upoštevajte pri razvoju– edini način kako doseči konsistentnost znotraj

aplikacije (in med aplikacijami)– privzemite katerega od industrijskih standardov

(IBM, Microsoft, …), ki običajno pokriva 95-99% vsega kar potrebujete; dodajte ostalo.

– Na ta način izkoristite nekaj, kar so izdelali in izpopolnili drugi, in približate vašo aplikacijo drugim aplikacijam s katerimi delajo uporabniki


3. Uporabnikom razložite pravila: Če aplikacija dela konsistentno, je potrebno razložiti le pravila, ki veljajo za vso aplikacijo. To je mnogo laže, kot razlagati posamezne funkcije; uporabniki si tudi laže zapomnijo pravila.

4. Aplikacija naj podpira začetnike in izkušene uporabnike– Primer (iskanje literature): metafora s katalogom

(papirnatih kartic) je primerna za začetnike, a zelo neučinkovita za izkušene uporabnike (knjižničarje)


5. Navigacija znotraj zaslonov: levo, desno; zgoraj navzdol.– Navigacija med gradniki na zaslonu mora biti

takšna, da se sklada s potekom njegovega dela

6. Navigacija med zasloni: prehod iz enega zaslona v drugega mora biti enostaven in usklajen s potekom dela, ki ga mora opraviti uporabnik– Če je ista aplikacija namenjena več uporabnikom

z različnimi zahtevami (delom), mora biti potek dela prilagojen vsem


7. Pazite na formulacijo besedil na zaslonu:– Besedilo na zaslonu je najvažnejša informacija za

uporabnika– Uporabljamo cele besede (ne okrajšave) in cele

stavke– Sporočila naj bodo “pozitivna” vljudna in

informativna: n.pr. “Številka računa mora vsebovati osem cifer” ali “Ime osebe je obvezen podatek”

– Način izražanja naj bo konsistenten skozi vso aplikacijo, n. pr. sporočili: “Manjka ime osebe” in “Ime osebe je obvezen podatek” nista konsistentni


8. Dobro se seznanite z gradniki, ki jih predpisujejo (privzeti) standardi in navodila– uporabite vedno iste gradnike za isto nalogo– katere gradnike za kaj: proučiti morate standarde

9. Posnemajte vmesnike drugih aplikacij, če ste gotovi, da so dobri (n. pr. izdelani z doslednim upoštevanjem standardov)– pogosto se dogaja, da razvijalci kopirajo slabe

vmesnike


10. Barve uporabljajte previdno:

barva naj bo uporabljena le kot sekundarni indikator, n. pr. da opozori na izjeme ali akcije, ki lahko povzroče izgubo podatkov– uporabljajte barve konsistentno


Prednosti barv:– prijetno in pomirljivo deluje na oko (če je

kombinacija prava), naredi prikaz bolj privlačen– Olajša razumevanje zapletenih zaslonov– Poudari logično grupiranje informacij– Barvna opozorila bolj pritegnejo pozornost

Problemi z barvami:– del uporabnikov ne razločuje barv, zato naj barva

ne bo nikoli edini indikator– prenos aplikacije na drugo računalniško okolje

(platformo) lahko spremeni barve in/ali ločljivost– problemi pri tiskanju in prenosu na druge medije


Raziskave:

• barve imajo pozitiven učinek na delo uporabnika (hitreje, z manj napak) če ima uporabnik na razpolago omejen čas, da opravi neko delo

• omogočajo boljše razumevanje diagramov in drugih grafičnih prikazov

• če je informacija že predstavljena v neustreznem formatu, barve ne izboljšajo prestavitve


11. Pazite na barvne kontraste: – Pravilo: Temno besedilo na svetli podlagi ali

svetlo besedilo na temni podlagi– Nekatere kombinacije imajo za posledici

izredno slabo čitljivost (premalo kontrasta), n. pr.


Modro besedilo na rdeči podlagi

• Primer slabe kombinacije barv:


• Drug primer:


11. Pazite kako uporabljate pisave (vrste črk):– Uporabite največ tri različne pisave na istem

zaslonu– Različna pisava je, če spremenite vrsto črk,

velikost, poudarite, spremenite barvo, ...– Uporabljajte vrste črk konsistentno: n. pr. kurzivna

pisava naj ima vedno enak pomen (n. pr. opis izjeme)

– Izogibajte se eksotičnih pisav: črke kot Hettenschweiler ali Abadi MT condensed light so dobre za platnice leposlovne knjige, težko pa jih je brati na ekranu.


13. Gradniki, ki trenutno niso aktivni, naj ostanejo na ekranu, vendar zamegljeni– n. pr. Če ni možno brisanje, naj bo gumb za

brisanje zamegljen, ne sme manjkati – Uporabnik si mnogo laže izdela natančen mentalni

model delovanja aplikacije, če ve katere funkcije so v nekem trenutku na razpolago in katere niso


14. Uporabljajte nedestruktivne privzete nastavitve:– N. pr. Enter/Return naj ne bo privzeta (default)

nastavitev za brisanje– Uporabnik (ko hiti) včasih avtomatični pritisne

Enter/Return


15. Poravnajte polja za vnos podatkov



17. Pazite, da zasloni niso preveč polni:– Ugotovitve: “natlačeni” zasloni so težko razumljivi

in zato nerodni za uporabnika– Povprečna gostota naj ne bo večja od 42%– Lokalna gostota v delih zaslona (skupinah) naj ne

bo večja od 62%

Polja za vnos podatkov, naj bodo jasno označena


Splošno pravilo glede poravnavanja:

• cela števila poravnana na desno

• decimalna števila naj bodo poravnana na decimalno vejico

• besedila (tekstovni podatki) poravnana na levo


18. Pazite na ustrezno grupiranje gradnikov na zaslonu– Povezani gradniki skupaj, tisti ki nimajo nič

skupnega, narazen– skupine (grupiranje) lahko označimo z okvirji in

barvami



• Oblikovanje uporabniških vmesnikov

• 19. Okno naj se odpre na tistem delu zaslona kamor je usmerjena pozornost uporabnika – če dvojni klik na šifro partnerja pomeni, da se

odpre okno za vnos podatkov o novem poslovnem partnerju, naj se to okno odpre na mestu kjer je kazalec (nad šifro)


20. Ne skrivajte nekaterih funkcij aplikacije pred uporabnikom:– nikoli naj n. pr. klik na desno tipko miške na

določenem predelu zaslona ne odpre “pop-up” menu - in je to edini način kako uporabiti funkcije, ki se pokažejo v meniju

– zloraba “pop up” menijev je, če razvijalec skrije element na zaslonu, ki s klikom omogoča na pr. nastavitev nekaterih parametrov


21. Ikone

Ikone uporabljamo, da enostavno in zelo učinkovito predstavimo različne objekte - akcije, predmete, ljudi, ideje, organizacije, države, …

N .pr.


POROČILA: pregledi, seznami, dokumenti, … so tudi del uporabniškega vmesnika:

Pomenski naslovi

• Jasen in specifičen naslov, ki opisuje vsebino in namen poročila

• Datum, ki označuje starost poročila

• Datum ali številka verzije, ki označuje starost (ažurnost) podatkov, na osnovi katerih je oblikovano poročilo


Informacijska vsebina

• Prikazana naj bo le tista informacija, ki jo potrebuje uporabnik; če je prikazano kaj, kar ne rabi, to pomeni le obremenitev za uporabnika

• Podatki (informacije) v poročilu ali na zaslonu naj se ne ponavljajo

• Informacija (podatki) naj bo prikazana v obliki, da je uporabna brez preoblikovanja


Uravnotežena razporeditev– Informacije (v poročilu ali na zaslonu)naj bodo čim

bolj enakomerno razporejene – Pazite na ustrezen razmak med vrsticami in robove

Enostavna navigacija:– Jasno naj bo pokazano, kako se lahko premikamo

naprej in nazaj (v izpisu, ki obsega več zaslonov)– Razvidno naj bo, kje se uporabnik nahaja (n.pr.

Stran 3 od 7)– Uporabnik naj bo opozorjen, ko pride do zadnje

strani


Oblikovanje menujev

• Vsak menu naj ima pomensko ime

• Besede, ki predstavljajo izbire v menuju naj bodo jasne in enoumne: po možnosti glagol

• Uporabljajmo velike in male črke

• Izbire, ki imajo nekaj skupnega, naj bodo grupirane; ista izbira mora imeti natanko isto ime tudi, če se pojavi v različnih menujih

• Menu naj ne bo daljši od zaslona; če je potrebno uporabimo podmenuje


Oblikovanje menujev (nadaljevanje)

• Označeno naj bo, kaj so podmenuji

• Osvetljevanja in drugih oznak naj bo čim manj: zabrisane naj bodo trenutno nedostopne izbire, vidne naj bodo nastavitve (n. pr. kljukice)


Kako POUDARIMO:

• Utripanje (blinking) in zvočni signali

• Razlike v barvi in intenzivnosti barve

• Različna velikost (črk, okvirjev, ...)

• Okvirji

• Podčrtavanje

• Velike črke

• Zamiki

• “Reverse video”


Pravila:

• Poudarjanje uporabljajmo varčno!

• Poudarjamo sporočila, ki se nanašajo na možne probleme (n.pr. neobičajne vrednosti podatkov, manjka podatek, …)

• Poudarimo opozorilo na napake pri vnosu ali obdelavi podatkov

• Različne oblike črk (fonti, velike črke, …) razlikujejo podatke in besedila (oznake)


Pravila (nadaljevanje):

• Ko se uporabnik ustrezno odzove, naj poudarek izgine

• Poudarke je treba uporabljati konsistentno

• Preveriti moramo kako se poudarki pokažejo na različnih izhodnih enotah (monitorjih, tiskalnikih, …), ki bi jih lahko uporabljala aplikacija


Uporaba grafičnih prikazov

• Če morajo biti razvidne posamezne vrednosti, uporabimo tabelaričen prikaz

• V tabeli lahko prikažemo natančne vrednosti

• Grafični prikaz je ustrezen za:– Hiter prikaz sumarne informacije– Prikaz trendov – Prikaz napovedi– Kadar je iz večje količine podatkov treba prikazati

nekaj najbolj pomembnih dejstev


PROTOTIPNI RAZVOJ Razlog: uporabnik običajno laže pove, kaj

manjka in kaj je treba spremeniti na delujočem prototipu, kot opredeli svoje zahteve “na papirju”

Pristop:

1. Opredeli (ugotovi) potrebe uporabnikov:– Potrebe uporabnikov so gonilna sila za izdelavo

prototipa (aplikacije)– Viri informacij: razgovori, dokumenti, sestanki,

pomanjkljivosti obstoječe aplikacije, ...


2. Izdelaj prototipno aplikacijo– poudarek na uporabniškem vmesniku– ne trudimo se, da bi bila koda popolna; veliko je

možnosti, da bomo mora zavrgli in ali bistveno spremenili kodo

3. Oceni prototip– Cilj: ugotoviti v kolikšni meri ustreza zahtevam

uporabnika– Osnovne ugotovitve: kaj je pri prototipu dobro,

kaj je slabo (je treba spremeniti) in kaj manjka (je treba dodati)


4. Zaključi razvoj prototipa– Zaključimo takrat, ko ponovna ocena s strani

uporabnika ne prinese nobenih novih zahtev (ali so te nepomembne)

5. Odloči kaj storiti s prototipom


Napotki in tehnike za razvoj prototipov

1. Izhajajte iz dejanskih objektov: dokumentov, zaslonov, poročil obstoječih aplikacij, …, in ugotovi kako jih ljudje uporabljajo

2. Sodelujte z dejanskimi uporabniki, ki bodo dejansko delali z aplikacijo– oni bodo največ pridobili z aplikacijo– neposredni uporabniki poznajo svoje delo v

podrobnosti


3. Planirajte časovni potek razvoja prototipa In se držite plana)– Uporabniki pričakujejo, da naredite spremembe, ki jih

predlagajo, v dogovorjenem roku

4. Uporabite katero od orodij za prototipni razvoj– pomembno je, da hitro lahko izdelate uporabniške

vmesnike; lahko uporabite tudi drugo orodje (jezik) kot je predviden za končno verzijo aplikacije


5. Uporabniki naj sami delajo s prototipom– to pomeni, da uporabniki preskusijo aplikacijo

preden je razvita– tako navadno dokaj hitro lahko ugotovijo ali

prototip ustreza njihovim zahtevam– predlagajte jim, naj na prototipu preskusijo nek

dogodek ali scenarij z realnimi podatki


6. Poznati morate poslovni postopek, za katerega razvijate prototip (aplikacijo)– če bolje poznate (strokovno) delo uporabnika,

lahko razvijete boljši prototip

7. Ne porabite preveč časa, da bi izpopolnili (predvsem tehnične podrobnosti, kodo) prototip


Documents

Oblikovanje uporabniških vmesnikov