Ekraani, akna disain. Värvid. Visualiseerimine · Kui on tahe, on ka võimalus! Ekraani, akna disain. Värvid. Visualiseerimine Erkki Leego MTAT.03.032. Loeng 11 / 15.05.09 / Tartu

Kui on tahe, on ka võimalus!

Ekraani, akna disain. Värvid. Visualiseerimine

Erkki Leego

(1/30)MTAT.03.032. Loeng 11 / 15.05.09 / Tartu Ülikool

Erkki Leego


Ekraani disain

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

• Mullet and Sano disaini põhimõtete kategooriad– Elegantsus ja lihtsus: ühtsus, viimistletus, kohasus– Mõõtkava, kontrastsus ja proportsioon: selgus,

harmoonia, aktiivsus, piirded– Organisatoorne ja visuaalne struktuur:

grupeerimine, hierarhia, seosed ja tasakaal

Erkki Leego

(2/30)

– Organisatoorne ja visuaalne struktuur: grupeerimine, hierarhia, seosed ja tasakaal

– Moodulid ja programm: fookus, paindlikkus, terviklik rakendus

– Kujutis ja esitlus: kohesus, üldisus, sidusus, iseloomulikkus

– Stiil: eristatavus, terviklikkus, kõikehõlmavus ja asjakohasus

MTAT.03.032. Loeng 11 / 15.05.09 / Tartu Ülikool


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.

Erkki Leego

(3/30)

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

• ....



Väljade paigutus

Erkki Leego



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

Erkki Leego

(5/30)

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



Ekraani meetrikad – 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

Erkki Leego

(6/30)

ekraanil pakitud

• Grupeerimine– Ühendatud sümbolitega gruppide

arv

• Paigutuse keerukus– Näitab jaotuse horisontaalset ja

vertikaalset kaugust fikseeritud ekraanipunktis



Ekraani meetrikad – Sears (1993)

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

Erkki Leego



Akna disain

• 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

Erkki Leego

(8/30)

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



Erinevate akende koordineerimine

• Võimas vahend kasutajaliideses on erinevate akende töö koordineerimine – muutused ühes aknas, põhjustavad muutusi teises aknas

• Olulised koordineerimised:

Erkki Leego

(9/30)

– Sünkroniseeritud kerimine

– Hierarhiline lehitsemine

– Sõltuvate akende avamine/sulgemine

– Akende seisundi salvestamine/avamine



Akende koordineerimine

Erkki Leego



Piltide lehitsemine

• Efektiivne zoom 5-30x

Erkki Leego



Kalasilma vaade

Erkki Leego



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

Erkki Leego

(13/30)

• Kasutada ekraani pinda efektiivselt

• Koordineerida andmete ja akende tööd

• Oluline kiire liikumine rollide vahel



Värvid

• Kolm elementi värvi määramiseks

• Põhivärvid – Ekraanil. Red, Green, Blue (RGB)

– Printimisel. Cyan, Magenta, Yellow (CMYK)

Erkki Leego



Värvi psühholoogia

• Värvirattal lähestikku olevad värvid harmoniseeruvad

• Värvirattal vastasvärvid tõstavad tähelepanu• Soojad värvid – (kollane, oranž, punane, roosa)

erutavad, tekitavad emotsioone, optiliselt lähemal• Külmad värvid – (roheline, sinine, lilla, hall)

rahustavad, rahulik vaadata• Tähendusi

Erkki Leego

(15/30)

• Tähendusi– Punane (kuumus, oht, jõud, kirg, tugevus, veri, sõda)– Sinine (kuninglik, rahu, usaldus)– Kollane (lõbu, haigus, armukadedus, kahevahel)– Roheline (naturaalne)– Valge (puhtus, süütus)– Must (kuri)– Pruun (neutraalne)



Näide värvide harmooniast

Erkki Leego



Värviga kodeerimine

Erkki Leego



Näide värvide kasutamisest kodeerimisel

Erkki Leego



Dünaamiline värvimine

Erkki Leego



Värvide juhiseid

• Kasuta konservatiivselt

• Limiteeri värvide arvu ja kogust– proovi alguses kahetoonselt

• Värvide kodeerimine peab toetama kasutaja töö tegemist

• Mõista värvide võimsust töö tegemise

Erkki Leego

(20/30)

• Mõista värvide võimsust töö tegemise kiirendamisel või aeglustamisel

• Ole värvide kasutamisel järjekindel ja ühtlane

• Tunne värvide psühholoogiat ja kasutajate ootusi



Funktsionaalsuse ja kujunduse balansseerimine

• Mida keerulisem on ülesanne, seda keerulisem on suruda vajalikku funktsionaalsust lihtsa ja ilusa kasutajaliidese sisse

• Teadetel ja õpetustel on omad piirid

• Kujundus peab olema arusaadav, ennustatav, ja kontrollitav

Erkki Leego

(21/30)

ja kontrollitav

• Panustada tuleb info paigutusele ekraanil ja taustal toimuvale akende töö koordineerimisele



Näide 1 – X-tee

Erkki Leego



Näide 2 - Õppeinfosüsteem

Erkki Leego



Näide 3 – MS Word (compare documents)

Erkki Leego



Näide 4 – Google Maps

Erkki Leego



Mõned näited visuaalsetest kasutajaliidestest

• Musicovery (http://www.musicovery.com/)

• Google Maps (http://maps.google.com/)

• Pictomio (http://www.pictomio.com/)

Erkki Leego



Info visualiseerimine

•http://www.visual-literacy.org/periodic_table/periodic_table.html (viide)

Erkki Leego



Kodutöö - lõpptähtaeg 22.05.09

• Koostada ühe rakenduse kasutajaliidese infotehnoloogiline lähteülesanne– Valida võib pakutud nimekirjast või võtta oma teema

– Lähteülesande eesmärk on tagada tellija ja arendusmeeskonna ühtne arusaam rakendusest

• Hindamine

Erkki Leego

(28/30)

• Hindamine– 30% aine hindest

– 1/3 sisu, 1/3 juhised, 1/3 prototüüp

• Tähtajad– Lõpptähtaeg 22.05.09

– Vahetähtaeg 30.03.09 – I mustand tööst

– Saata [email protected]



Kodutöö dokumendi ülesehitus

• Eesmärk• Mõisted• Funktsionaalsuse ja sisu kirjeldus

– Põhistsenaarium– Põhitegevused (tegevus, nõuded)– Rollid (roll, funktsionaalsus)– Andmete grupid– Aruandlus (kui asjakohane)

Erkki Leego

(29/30)

– Aruandlus (kui asjakohane)• Disaini juhised (vt. loeng 3 ülevaade)

– Sõnad, ikoonid ja graafika– Ekraanipaigutuse teemad– Sisend ja väljundseadmed– Tegevuste järgnevused– Koolitus

• Prototüüp (ekraanipildid)



Tänan!


Erkki Leego


Erkki Leego, [email protected], www.hlp.ee

Documents

Ekraani, akna disain. Värvid. Visualiseerimine · Kui on tahe, on ka võimalus! Ekraani, akna disain. Värvid. Visualiseerimine Erkki Leego MTAT.03.032. Loeng 11 / 15.05.09 / Tartu