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


Erkki Leego

(2/32)

Vormid



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



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



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



Erkki Leego

(6/32)

Dialoogiaknad



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



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



Erkki Leego

(9/32)

Menüüde eriliigid



Erkki Leego

(10/32)

Menüüde juhtimise alternatiive



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



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



Erkki Leego

(13/32)

Ekraani ja akna disain



Erkki Leego

(14/32)

Ekraani disain eesmärk

• Efektiivne ekraani disain peab esile tooma ülesannete läbiviimiseks kogu olulise info



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



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.

• ....



Erkki Leego

(17/32)

Väljade paigutus



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



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



Erkki Leego

(20/32)

Ekraani meetrikad – Sears (1993)

• Sears (1993) arendas välja ülesandepõhise meetrika layout appropriateness hindamaks ruumilise paigutuse harmooniat kasutaja funktsioonidega



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, ...



Erkki Leego

(22/32)

Akende koordineerimine



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.



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



Erkki Leego

(25/32)

Akende koordineerimine



Erkki Leego

(26/32)

Piltide lehitsemine


• Efektiivne zoom 5-30x


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



Erkki Leego

(28/32)

Kodutöödest



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



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)



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



Erkki Leego

(32/32) MTAT.03.032. Loeng 6 / 2015-03-23 / Tartu Ülikool http://PollEv.com/erkkileego

Tänan!


Erkki Leego, [email protected], http://courses.cs.ut.ee/2015/ui

vormid. ekraani ja akna disain. - ut€¦ · kui on tahe, on ka võimalus! erkki leego (8/32)...

Documents