1 / 46

Oblikovanje uporabniških vmesnikov

Oblikovanje uporabniških vmesnikov. Napotki in tehnike. Oblikovanje uporabniških vmesnikov. 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

shaw
Download Presentation

Oblikovanje uporabniških vmesnikov

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Oblikovanje uporabniških vmesnikov Napotki in tehnike

  2. Oblikovanje uporabniških vmesnikov 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, ...

  3. Oblikovanje uporabniških vmesnikov 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

  4. Oblikovanje uporabniških vmesnikov 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

  5. Oblikovanje uporabniških vmesnikov 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)

  6. Oblikovanje uporabniških vmesnikov • 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)

  7. Oblikovanje uporabniških vmesnikov 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

  8. Oblikovanje uporabniških vmesnikov 2. Postavitestandarde 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

  9. Oblikovanje uporabniških vmesnikov 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)

  10. Oblikovanje uporabniških vmesnikov 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

  11. Oblikovanje uporabniških vmesnikov 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

  12. Oblikovanje uporabniških vmesnikov 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

  13. Oblikovanje uporabniških vmesnikov 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

  14. Oblikovanje uporabniških vmesnikov 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

  15. Oblikovanje uporabniških vmesnikov 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

  16. Oblikovanje uporabniških vmesnikov 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

  17. Oblikovanje uporabniških vmesnikov • Primer slabe kombinacije barv:

  18. Oblikovanje uporabniških vmesnikov • Drug primer:

  19. Oblikovanje uporabniških vmesnikov 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.

  20. Oblikovanje uporabniških vmesnikov 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

  21. Oblikovanje uporabniških vmesnikov 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

  22. Oblikovanje uporabniških vmesnikov 15. Poravnajte polja za vnos podatkov

  23. Oblikovanje uporabniških vmesnikov

  24. Oblikovanje uporabniških vmesnikov 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

  25. Oblikovanje uporabniških vmesnikov Splošno pravilo glede poravnavanja: • cela števila poravnana na desno • decimalna števila naj bodo poravnana na decimalno vejico • besedila (tekstovni podatki) poravnana na levo

  26. Oblikovanje uporabniških vmesnikov 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

  27. Oblikovanje uporabniških vmesnikov • Oblikovanje uporabniških vmesnikov

  28. 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)

  29. Oblikovanje uporabniških vmesnikov 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

  30. Oblikovanje uporabniških vmesnikov 21. Ikone Ikone uporabljamo, da enostavno in zelo učinkovito predstavimo različne objekte - akcije, predmete, ljudi, ideje, organizacije, države, … N .pr.

  31. Oblikovanje uporabniških vmesnikov 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

  32. Oblikovanje uporabniških vmesnikov 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

  33. Oblikovanje uporabniških vmesnikov 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

  34. Oblikovanje uporabniških vmesnikov 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

  35. Oblikovanje uporabniških vmesnikov 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)

  36. Oblikovanje uporabniških vmesnikov 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”

  37. Oblikovanje uporabniških vmesnikov 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)

  38. Oblikovanje uporabniških vmesnikov 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

  39. Oblikovanje uporabniških vmesnikov 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

  40. Oblikovanje uporabniških vmesnikov 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, ...

  41. Oblikovanje uporabniških vmesnikov 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)

  42. Oblikovanje uporabniških vmesnikov 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

  43. Oblikovanje uporabniških vmesnikov 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

  44. Oblikovanje uporabniških vmesnikov 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

  45. Oblikovanje uporabniških vmesnikov 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

  46. Oblikovanje uporabniških vmesnikov 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

More Related