Vormid. Ekraani ja akna disain. - ut€¦ · Kui on tahe, on ka võimalus! Erkki Leego (8/32)...
Transcript of Vormid. Ekraani ja akna disain. - ut€¦ · Kui on tahe, on ka võimalus! Erkki Leego (8/32)...
Kui on tahe, on ka võimalus!
Erkki Leego
(1/32)
Vormid. Ekraani ja akna disain.
Erkki Leego
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(2/32)
Vormid
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(3/32)
Andmete sisestamine menüüde abil
• Vormide täitmine
– Kohane kui on vaja täita palju välju
– Kogu täitmine kasutajale jooksvalt näha
– Meenutab kasutajale tuttavat pabervormi
– Vähem juhiseid vaja
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(4/32)
Andmete sisestamine menüüde abil
• Kasutaja peab olema kursis:
– TAB klahvi liikumisega
– Vea paranduse võimalustega
– Väljade tähendustega
– Lahtri täitmise süntaksiga
– ENTER klahvi kasutamisega
• Formaadispetsiifilised väljad
– Telefoninumbrite esitus
– Isikukoodid ja passinumbrid
– Kellaajad
– Kuupäevad
– Valuuta kirjeldamine
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(5/32)
Vormide täitmise juhised
• Mõistlik pealkiri • Üksikasjalikud juhised • Väljade loogiline
grupeerimine ja järjekord
• Visuaalselt hea ülesehitus
• Tuttavad nimetused väljadele
• Ühtlane terminoloogia ja lühendid
• Sisestusväljadel nähtavad piirjooned
• Mugav kursori liikumine
• Veaparandus üksikutele sümbolitele ja tervetele väljadele
• Vigade ennetamine • Veateated
sobimatutele väärtustele
• Lisaväljad selgelt eristuvad
• Selgitavad teated väljadele
• Lõpetamise kohta selge märguanne
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(6/32)
Dialoogiaknad
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(7/32)
Dialoogiaknad
• Kombinatsioon menüüde ja vormitäitmise tehnikatest
• Kujunduse juhiseid: – Mõttekas pealkiri, ühtlane stiil
– Ülevalt-vasakule paremale-alla järjekord
– Tükeldamine ja esiletõst
– Ühtlane välimus (piirjooned, tühi ala, jooned, lahtrid)
– Ühtlane terminoloogia, font, suurtähtede kasutamine, paigutus
– Standardsed nupud (OK, Cancel)
– Vigade vältimine otsekäsitlusega
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(8/32)
Dialoogiaknad – väliste seoste haldus
• Sujuv ilmumine ja kadumine
• Eristatav kuid väike piirjoon
• Piisavalt väike ülekatmise vältimiseks
• Kuvatakse vastavate elementide lähedal
• Ei tohi üle katta vajalikke elemente
• Peab olema lihtne võimalus ärakaotamiseks
• Selge arusaam kuidas lõpetada või tühistada
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(9/32)
Menüüde eriliigid
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(10/32)
Menüüde juhtimise alternatiive
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(11/32)
Hääljuhtimisega menüüd
• Suulised küsimused ja valikute kirjeldused
• Sisend tavaliselt suuline või numbriklahvidelt
• Kuna pole püsiv, siis on vaja abi meeldejätmisel
• Kogenud kasutaja jaoks vaja võimalust sissejuhatus ja valikute kirjeldus vahele jätta
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(12/32)
Menüüd väikeste ekraanide jaoks
• Võtmeküsimus on õpitavus ja meeldejäetavus
• “Iga sõna on arvel”
• Funktsioonide valik ja nimetamine kriitiline
• Riistvaralised nupud olulisemate funktsioonide jaoks
• Ole valmis katkestusteks ja häireteks – vigade oht kõrge
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(13/32)
Ekraani ja akna disain
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(14/32)
Ekraani disain eesmärk
• Efektiivne ekraani disain peab esile tooma ülesannete läbiviimiseks kogu olulise info
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(15/32)
Mullet ja Sano: ekraani disaini põhimõtted
• Elegantsus ja lihtsus – Ühtsus, viimistlus, kohasus
• Mõõtkava, kontrastsus ja proportsioon – Selgus, harmoonia, aktiivsus ja vaoshoitus
• Organisatoorne ja visuaalne struktuur – Grupeerimine, hierarhia, vahekord ja tasakaal
• Moodulid ja programm – Fookus, paindlikkus ja ühtlane rakendamine
• Kujutis ja esitlus – Vahetus, üldisus, sidusus ja iseloomustus
• Stiil – Eristuvus, terviklus, kõigehõlmavus ja asjakohasus
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(16/32)
162 juhist (Smith ja Mosier, 1986)
• Tuleb tagada, et kõik kasutajale vajalikud andmed oleks igal transaktsiooni sammul kuvamiseks kättesaadavad.
• Kuvada andmed nii, et kasutaja ei peaks midagi enam konverteerima, vaid saaks kohe süsteemi kasutada.
• Kasutada sarnast formaati kõikidel ekraanidel. • Kasutada lühikesi, lihtsaid lauseid. • Kasutada pigem jaatavaid lauseid, kui eitavaid. • Panna paika loogilised printsiibid, kuidas järjestada liste (näiteks tähestiku järjekorras). • Tagada, et väljade nimetused oleks piisavalt lähedal selle väljaga seotud andmetele, et seos
nende vahel oleks selgelt mõistetav. Kindlasti aga peaks välja nimetuse ja väärtuse vahel olema vähemalt üks tühik.
• Veerud joondada vasakule ja sorteerida andmed tähestiku järjekorras, mis võimaldab andmeid kiiremini leida.
• Kui ekraanil on palju lehti, tuleks lehtedele anda nimetused, et näidata nendevahelisi seoseid. • Igal ekraanil näidata kõigepealt päist või pealkirja, mis kirjeldab sisu. Pealkirja ja sisu vahele
tuleks jätta vähemalt 1 tühi rida. • Fontide suurusel järgida põhimõtet, et suuremad sümbolid oleks 1,5 korda kõrgemad kui
järgneva suurusega sümbolid. • Kasutada erinevaid värve, juhul kui kasutajad peavad eristama erinevaid andmete kategooriad
(eriti kui andmed on ekraanil hajutatud). • Tabelid, mis ei mahu ekraanile ära, paigutada nii, et kasutaja näeks veergude ja ridade
nimetusi kõikides tabeli sektsioonides. • Kuna andmete kuvamise nõuded võivad muutuda, tuleb tagada vahendid, et kasutaja (või
süsteemi administraator) saaks teha vajalikud muudatused ekraani funktsionaalsuse säilitamiseks.
• ....
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(17/32)
Väljade paigutus
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(18/32)
Empiirilised järeldused
• Struktureeritud vorm parem kui jutustav
• Välja siltide ja grupeerimise parandamine, sobiliku taande ja allakriipsutamise kasutamine, numbriliste väärtuste joondamine suurendab efektiivsust
• Tihedamate ja vähemate ekraanide kasutamine ekspertkasutajate puhul parandab efektiivsust
• Ekraanide sisu peaks sisaldama ainult ülesande jaoks olulist informatsiooni
• Ühtlane asukoht, struktuur ja terminoloogia erinevatel ekraanidel oluline
• Sarnaste tööde jaoks peaks ekraanide järjestus olema süsteemis sarnane
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(19/32)
Ekraanikasutuse mõõtmine – Tullis (1997)
• Tärkandmete jaoks
• Üldtihedus – näitab mitu protsenti ekraanist on
täidetud sümbolitega
• Lokaalne tihedus – näitab kui lähedal on sümbolid
üksteisele ehk kui tihedalt on info ekraanil pakitud
• Grupeerimine – Ühendatud sümbolitega gruppide
arv
• Paigutuse keerukus – Näitab jaotuse horisontaalset ja
vertikaalset kaugust fikseeritud ekraanipunktist
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(20/32)
Ekraani meetrikad – Sears (1993)
• Sears (1993) arendas välja ülesandepõhise meetrika layout appropriateness hindamaks ruumilise paigutuse harmooniat kasutaja funktsioonidega
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(21/32)
Akende käitumine suuruse muutumisel
• Rakenduse vajalikud funktsioonid peavad jääma kättesaadavaks
– Funktsioonide paljusus võib väheneda
• Akende disaini põhimõtted peavad säilima
– Harmoonia, paigutus, ...
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(22/32)
Akende koordineerimine
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(23/32)
Aknad ja ekraanid
• Kasutajatel vajadus paljude samaaegsete ekraanide järele
• Katkestus kasutaja töös peab olema minimaalne
• Suurtel ekraanidel on probleemne pea-silma liigutamine ja visuaalsus
• Väikestel ekraanidel akende kasutamine ei ole efektiivne
• Peab pakkuma piisavat infot ja paindlikkust töö tegemiseks ja samal ajal minimeerima “majandamise” tegevusi – Avamine, sulgemine, suurendamine, liigutamine jmt.
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(24/32)
Erinevate akende koordineerimine
• Oluline vahend kasutajaliideses on erinevate akende töö koordineerimine – muutused ühes aknas, põhjustavad muutusi teises aknas
• Olulised koordineerimised:
– Sünkroniseeritud kerimine
– Hierarhiline lehitsemine
– Sõltuvate akende avamine/sulgemine
– Akende seisundi salvestamine/avamine
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(25/32)
Akende koordineerimine
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(26/32)
Piltide lehitsemine
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
• Efektiivne zoom 5-30x
Kui on tahe, on ka võimalus!
Erkki Leego
(27/32)
Kasutaja rollihaldus
• Rollikeskne disain lähtub kasutaja töörolli vajadustest ja kujundab keskkonna selle järgi
• Visuaalne-ruumiline vaade vastavalt ülesannetele
• Kasutada ekraani pinda efektiivselt
• Koordineerida andmete ja akende tööd
• Oluline kiire liikumine rollide vahel
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(28/32)
Kodutöödest
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(29/32)
Hindamismaatriks
Eesmärk, lühikirjeldus, mõisted, nõuded
Sissejuhatava osa mõni peatükk on kirjeldamata. 0 punkti
Sissejuhatus annab pealiskaudse ülevaate lahendusest. 1 punkti
Sissejuhatus annab hästi edasi lahenduse olemuse ja kirjeldab valdkonna olulise taustinfo. 2 punkti
Rollid Rollid on kirjeldamata. 0 punkti
Rollid on nimetatud ja on asjakohased lahendusele. 1 punkti
Kõik lahendusele olulised rollid on kirjeldatud ja hästi tuleb esile nende eripära. 2 punkti
Andmete kirjeldus Andmed on kirjeldamata. 0 punkti
Andmetest on olemas lihtsustatud ülevaade. 1 punkti
Olemas on terviklik andmemudel või andmete eeskujulik kirjeldus muus vormis. 2 punkti
Protsesside kirjeldus Protsessid on kirjeldamata. 0 punkti
Olemas on mõned olulisemad protsessid ja nende sammud. 1 punkti
Kirjeldatud on lahenduse kõiki protsesse ning protsessid on kooskõlas äriprotsessiga. 2 punkti
Kasutuslood: eeldused, kirjeldus, tulemus
Kasutuslood puuduvad. 0 punkti
Kasutuslood kirjeldavad lahenduse funktsionaalsuse osaliselt. Kirjeldatud on osa nõutud elementidest. 1 punkti
Kasutuslood kirjeldavad hästi rakenduse funktsionaalsust ja on kooskõlas protsesside kirjeldustega. Kõik nõutud elemendid on kirjeldatud. 2 punkti
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(30/32)
Kodutöö dokumendi ülesehitus
• Funktsionaalsuse ja sisu kirjeldus – Eesmärk, lühikirjeldus, mõisted, nõuded
– Rollid
– Andmete kirjeldus
– Protsesside kirjeldused (BPMN)
– Kasutuslood • Eeldused, kirjeldus, soovitud tulemus
• Disaini nõuded ja juhised – Sõnad, värvid, ikoonid ja graafika
– Ekraanipaigutus ja navigatsioon
– Sisend- ja väljundseadmed, kiirklahvid
– Vigade haldus ja veateated
– Juhised kasutajale
• Prototüüp (ekraanipildid või rakendus)
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(31/32)
Kodutöö näpunäited
• Kasutage peatükkide ja ridade ees numbreid
– Lihtsam viidata ja kasutada
• Nõuded - mida
– „Rakendus peab tegema seda“
– „Peab tegema sellistel tingimustel“
• Kasutuslugu - kuidas
– Ühe tervikliku tööetapi kirjeldus
– Kasutuslood on protsessi osa
• Protsessiskeem
– Kooskõlas kasutuslugudega
MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Kui on tahe, on ka võimalus!
Erkki Leego
(32/32) MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego
Tänan!
Kui on tahe, on ka võimalus!
Erkki Leego, [email protected], http://courses.cs.ut.ee/2015/ui