Kui on tahe, on ka võimalus!

Erkki Leego

(1/31)

Vormid. Menüü eriliigid. Ekraani ja akna disain.

Erkki Leego

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(2/31)

Vormid

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(3/31)

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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(4/31)

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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(5/31)

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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(6/31)

Dialoogiaknad

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(7/31)

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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(8/31)

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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(9/31)

Menüüde eriliigid

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(10/31)

Menüüde juhtimise alternatiive

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(11/31)

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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(12/31)

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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(13/31)

Ekraani ja akna disain

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(14/31)

Akna disaini eesmärk

• Efektiivne akna disain peab esile tooma ülesannete teostamiseks minimaalse olulise info

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(15/31)

Akende käitumine suuruse muutumisel

• Rakenduse vajalikud funktsioonid peavad jääma kättesaadavaks

– Funktsioonide paljusus üldjuhul väheneb

• Akende disaini põhimõtted peavad säilima

– Harmoonia, paigutus, ...

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(16/31)

Dünaamiline veebidisain

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(17/31)

Mobiili rakendus vs dünaamiline veebidisain

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(18/31)

Mullet ja Sano: akna 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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(19/31)

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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(20/31)

Väljade paigutus

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(21/31)

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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(22/31)

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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(23/31)

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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(24/31)

Akende haldamine ekraanidel

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(25/31)

Aknad ja ekraanid

• Kasutajatel vajadus paljude samaaegsete akende järele ühel või mitmel ekraanil

• 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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(26/31)

Erinevate akende koordineerimine

• Oluline vahend kasutajaliideses on ühe rakenduse erinevate akende töö koordineerimine

– Muutused ühes aknas, põhjustavad muutusi teistes akendes

• Olulised koordineerimised:

– Sünkroniseeritud kerimine

– Hierarhiline lehitsemine

– Sõltuvate akende avamine/sulgemine

– Akende seisundi salvestamine/avamine

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(27/31)

Akende koordineerimine

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(28/31)

Näide - piltide lehitsemine

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

• Efektiivne zoom 5-30x

Kui on tahe, on ka võimalus!

Erkki Leego

(29/31)

Rollihaldus

MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(30/31)

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 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Kui on tahe, on ka võimalus!

Erkki Leego

(31/31) MTAT.03.032. Loeng 6 / 2016-03-14 / Tartu Ülikool http://PollEv.com/erkkileego

Tänan!

Kui on tahe, on ka võimalus!

Erkki Leego, erkki.leego@ut.ee, http://courses.cs.ut.ee/2016/ui