T-121.100Johdatus käyttäjäkeskeiseen tuotekehitykseen

Käyttöliittymän rakentaminen

Marko NieminenTeknillinen korkeakoulu

Käyttöliittymät ja käytettävyys

Marko.Nieminen@hut.fi

50% suunnitteluajasta menee käyttöliittymäsuunnitteluun

48% koodista kohdistuu käyttöliittymään

Myers B.A. & Rosson M.B. in Survey on User interface programming in Human Factors in Computing Systems 1992. (SIGCHI’92)

Marko Nieminenhttp://www.acm.org/sigchi/cdg/figure_1.gifACM SIGCHI Curricula for Human-Computer Interaction

Käyttöliittymäsuunnittelun konteksti

Marko Nieminen

Tällä luennolla

? Käyttöliittymän rakentamisen perusteena olevat vaatimusmäärittelyt ja mallit

? Erilaisia käyttöliittymätyyppejä, -tekniikoita? Käyttöliittymäarkkitehtuurimalli? Kehitysvälineistöä? Esimerkkejä

Marko Nieminen

Käyttöliittymän rakentamisen mallit

(Constantine & Lockwood 2000)

Marko Nieminen

Mallien ja mallinnuksen perusteita

? Relevanttien/oikeiden asioiden esiin nostaminen? Asioiden järjestäminen tarkoituksenmukaisella tavalla

? Kommunikointi? Tehokas kommunikointi

? Semiformaali tai formaali kuvaus käyttöliittymän toiminnasta? Formaali mallintaminen HCI-alueella alkanut 1970-luvun

loppupuolella (Phyllis Reisner 1977, 1981 (BNF); Embley 1978; Ledgard & Singer 1978)

Marko Nieminen

UAN – User Action Notation

? Ongelmia suorakäyttöliittymien mallintamisessa? Hiiren liikuttaminen: ~; objekti: [obj] (esim [icon])? Hiiren painallus: Mv; hiiren nosto: M^? Korostus/valinta: ! (esim icon!)

~[file] Mv file!~[x,y]* outline(file) > ~~[trash] outline(file) > ~, trash!M^ erase(file), trash!

Marko Nieminen

Oliopohjainen analyysi

? Soveltuu oliopohjaisiin kehitysympäristöihin? Keskeiset käsitteet:

? objektit (objects)? jaetaan kuuluviksi joko ongelma-alueeseen (problem space) tai

toteutukseen (solution space)? operaatiot (operations/methods)? ominaisuudet (attributes/properties)

? liittyvät sekä olioihin että operaatioihin

? Vaiheet:? Kuvataan järjestelmä sopivalla tarkkuudella vapaamuotoisesti,

mutta kirjallisesti? objektit=substantiivit; ominaisuudet=adjektiivit;

operaatiot=verbit; operaatioiden ominaisuudet=adverbit

Marko Nieminen

Oliopohjainen mallinnus: Skenaario

? Skenaariossa kuvataan, mitä käyttötilanteessa tapahtuu? Skenaario voi kuvata nykyhetkeä tai tulevaisuutta,

painotetusti sitä ehkä kuitenkin käytetään tulevaisuutta kuvattaessa

? Skenaario esitetään vapaamuotoisena tekstinä? Skenaariosta voidaan johtaa tarvittavia asioita:

tietorakenteet, tietovirta, vaadittavat objektit? Skenaarion pohjalta voidaan tuottaa rakenteeltaan

formaalimpia kuvauksia

Marko Nieminen

Oliopohjainen analyysi

? Tuotetaan vapaamuotoinen kuvaus ratkaistavasta asiasta? Alleviivataan kaikki substantiivit (=objektit). ? Alleviivataan kaikki adjektiivit (=ominaisuudet)? Alleviivataan kaikki verbit (=operaatiot)

Marko Nieminen

Skenaario: kokoonpanolinja

Kokoonpanolinjan työntekijä saa eteensä paletilla olevat tuotteen peruskomponentit. Hänen tehtävänään on kokoonpanna tuote lisäämällä siihen tuotetilauksessa olevat osat. Työntekijä tunnistaa tilauksen paletilla olevasta viivakoodista, jonka hän lukee viivakoodinlukijalla.

Marko Nieminen

Use Case –> UML Unified Modeling Language

? 1990 luvulle tultaessa Jakobson kehitti use case -kuvaukset

? use case ja UML–kuvausten pohjaksi tarvitaan usein skenaariot

? UML:n käyttöliittymää sivuavat mallit:? use case, sequence, collaboration, class, operations, attributes,

relationships? taustalla mm. ER-mallit, workflow-kuvat, tietovirtakaaviot

Marko Nieminen

Use case-diagrammi esimerkki

? ensisijaiset toimijat vasemmalla, toissijaiset toimijat oikealla

? tasot vasemmalta oikealle? vain ”tavallinen käyttö”,

toimintahäiriöt muissa diagrammeissa

use case diagrammi: tasot ja toimijat(Alexander, 2001)

Mikael Johnson

Marko Nieminen

Sequence Diagram

: Student registration form

registration manager

math 101

1: fill in info

2: submit

3: add course(joe, math 01)

4: are you open?5: are you open?

6: add (joe)7: add (joe)

math 101 section 1

Marko Nieminen

Navigaatiomalli

? Kertoo, miten vuorovaikutus välineen kanssa etenee? Määrittelee kontekstit ja siirtymät, mutta pääasiassa järjestelmän

näkökulmasta? ristiriidat, silmukat, ikuiset loopit tunnistettavissa

1 Syötä kortti

2 Tunnusluku 3 Valitse toiminto

4 Nosta rahaa

5 Lopeta

Marko Nieminen

State Transition Diagram

Initialization Openentry: Register studentexit: Increment count

Closed

Canceled

do: Initialize course

do: Finalize course

do: Notify registered students

Add Student / Set count = 0

Add student[ count < 10 ]

[ count = 10 ]

Cancel

Cancel

Cancel

Marko Nieminen

Käyttöliittymäsuunnittelun käytännön tarpeita

? Siirrettävyys, alustariippumattomuus? Uudelleenkäyttö? Useiden käyttöliittymien toteuttaminen samaan sovellus-

/palvelutarjontaan? Joustavuus, mukauttaminen, “kustomointi”

? Sopivilla käyttöliittymäratkaisuilla -- vuorovaikutusrakenteilla ja käyttöliittymäarkkitehtuureilla -- em. asiat mahdollistuvat

Marko Nieminen

MVC - Model View Controller

? Käytössä esim. Smalltalkissa, Javassa? Jakaa sovelluksen kolmeen osaan:

? sovelluslogiikka (model)? esitysmuoto (view)? vuorovaikutuksen hallinta (controller)

Controller

View M

odel

application

userinput

output

“Listeners”

Marko Nieminen

Tapahtumaohjattu vuorovaikutus(Events)

? Käyttöliittymän elementtien tilassa tapahtuvat muutokset laitetaan käyttöliittymäympäristössä tapahtumajonoon

? Tapahtuma julkistetaan kaikille käyttöliittymäympäristössä oleville ohjelmille

? Tapahtumasta kiinnostuneet ohjelmat käsittelevät sen omien sääntöjensä mukaisesti

? Tyypillinen vuorovaikutustekniikka graafisissa käyttöliittymäympäristöissä

? Esim. tapahtuma, kun painiketta painetaan

Marko Nieminen

Käyttöliittymäympäristön tapahtuma “event”

procedure TForm1.Button1Click(Sender: TObject);begin

ShowMessage('Button #1 was pressed!');end;

event

Marko Nieminen

Olio-ohjelmointi käyttöliittymässä(Lewis & Rieman 1993)

? Objektit, oliot (object)? koodiblokkeja, eivät välttämättä näytöllä näkyviä

? Luokat, instanssit (class, instance)? Aliluokat perivät “käyttäytymisensä” ja “piirteensä”

(subclass, inheritance, behavior, characteristics)? Objektit kommunikoivat viesteillä (messages)? Käsittelijät (handlers) vastaanottavat viestit ja suorittavat

toimenpiteet? Resurssit: tekstitiedostoja tai erityisiä .RES-tiedostoja

Marko Nieminen

Objektit, luokat

? Yleensä voi käyttää varsin pitkälle valmiita luokkia? Java AWT, VC++ MFC, Borland VCL? käyttöliittymässä näkyvät elementit ovat objekteja,

luokkia

TMainMenu

TPopUpMenu

TLabel

TEdit

TPanelTButton

Marko Nieminen

Esimerkki

Marko Nieminen

RESURSSIT

? EICON/EPOC? resurssit kirjoitetaan tekstitiedostoon ja käännetään

resurssikääntäjällä? myös erityisillä resurssityökaluilla muihin ympäristöihin, esim. WRT

RESOURCE MENU_BAR r_example_main_menubar{titles=

{MENU_TITLE { menu_pane=r_example_file_menu; txt="File"; },MENU_TITLE { menu_pane=r_example_edit_menu; txt="Edit"; },MENU_TITLE { menu_pane=r_example_view_menu; txt="View"; },MENU_TITLE { menu_pane=r_example_text_menu; txt="Text"; },MENU_TITLE { menu_pane=r_example_tools_menu; txt="Tools"; }};

}

Marko Nieminen

Määritellään ID:tenum TExampleMenuCommands

{EExampleCmd1=100,EExampleCmd2=101,EExampleCmdDimItem=102,EExampleCmdExtra=103,EEikCmdAbout=104,EEikCmdSetIrDAInterval=105,EExampleCmdStartSession=106,EExampleCmdEndSession=107,EExampleCmdFullScreen=108};

Marko Nieminen

Resurssit ja koodi yhdistetäänvoid CExampleAppUi::HandleCommandL(TInt aCommand)

{switch (aCommand)

{case EEikCmdClose:

Exit();break;

case EExampleCmdStartSession:CmdDimItem();iEikonEnv->InfoMsg(R_EXAMPLE_DATA_TRANSFER_START_MESSAGE);break;

case EExampleCmdEndSession:iEikonEnv->InfoMsg(R_EXAMPLE_DATA_TRANSFER_END_MESSAGE);break;

case EEikCmdSetIrDAInterval:IrDAIntervalDialog();break;

case EExampleCmdDimItem:CmdDimItem();break;

case EEikCmdExit: Exit();break;

case EEikCmdAbout:// iEikonEnv->InfoMsg(" ");AboutDialog();break;}

}

Marko Nieminen

Kirjoitetaan funktiot

// Print out "About" Dialogvoid CExampleAppUi::AboutDialog()

{// Create the dialogCEikDialog* dialog = new (ELeave) CEikDialog();// Launch the dialogdialog->ExecuteLD(R_EXAMPLE_DIALOG);}

Marko Nieminen

1

2

Marko Nieminen

RAD/UIMS/UIDE-välineet vähentävät työtä

? Yleensä ei tarvita resurssien tuottamista manuaalisesti? Valikot ja komponentit pudotetaan ikkunoihin l.

lomakkeisiin (form)? Myös tapahtumankäsittelijät l. “handlerit” syntyvät

puoliautomaattisesti

Marko Nieminen

Käyttöliittymäkehitysympäristöt

? Käyttöliittymäkehitysympäristöjen tarve tunnistettiin 1980-luvun alussa

? Seeheim-arkkitehtuurimalli (1984) tarjosi puitteet käyttöliittymäkehitysympäristöjen toteuttamiselle

? 1990-luvun alussa kehitysympäristöjä alkoi tulla markkinoille? tutkimuspuolella mm. Garnet (Myers 1992), josta on sittemmin kehittynyt

Amulet

Marko Nieminen

Taustaa

? Käyttöliittymän toteuttaminen graafisiin käyttöliittymiin vaati aiemmin paljon työtä

? esim: Hello, World! -- Toteutus kompleksista graafiseen käyttöliittymäympäristöön; hallittava monenlaiset matalan tason asiat: ikkunointi, viestinvälitys, resurssit jne.

? Taitavat ohjelmoijat tuottavat käyttöliittymät yleiskäyttöisilläohjelmointikielillä, esim C/C++; tämä suuntaus on kuitenkin vähenemässä erityisten käyttöliittymäkehitysympäristöjen kehittyessä

Marko Nieminen

Kehitysvälineiden toiminnallisia piirteitä

? Käyttöliittymä erillään toiminnallisuudesta? Mahdollisuus useiden käyttöliittymien toteuttamiseen? Mahdollisuus alustariippumattomuuteen? Käyttöliittymäarkkitehdin (työ)tehtävä mahdollinen (ei tiukkaa sidosta

toiminnallisuuden koodaamiseen)

? Menetelmät ja kuvaustavat? hahmottelu toimii myös määrittelytyönä; voivat toimia jopa osana sopimuksia

vaatimusmäärittelyjen osalta? helpottaa suunnitteluratkaisuista keskustelua

? Nopea prototyyppien hahmottelu? ratkaisuja voidaan kokeilla jo alkuvaiheessa? testataan-muokataan, testataan-muokataan, testataan-muokataan

? Ohjelmisto- ja prosessituki? tuottavuus paranee, ylläpito helpottuu, tarkastukset helpompia jne.

Marko Nieminen

Kehitysvälineiden teknisiä piirteitä

? Tärkeää nopea luonnostelu? Visuaalinen käyttöliittymän suunnittelu

? suunnittelija näkee nopeasti hahmottelemansa käyttöliittymän ulkoasun, vrt. mallinnus välineen avulla

? usein tarjolla helpohko skriptikieli? tai yleiskäyttöisempi ohjelmointikieli? tapahtuma- tai oliopohjainen? joissakin välineissä myös visuaalinen ohjelmointi

Marko Nieminen

Käyttöliittymäkehittimiä

? Shneidermanin jako? Software engineering tools: C/C++ w/toolkits/libraries? Design tools: MacroMind Director, HyperCard, LabView, Visual

Basic, Delphi, JBuilder

? Eri toimittajat esittelevät kehitysympäristönsä eri nimikkeillä:? Rapid Prototyper? User Interface Builder? UIMS - User Interface Management System? UIDE - User Interface Development Environment? RAD - Rapid Application Developer

Marko Nieminen

Tcl/Tk -- Tool Command Language

? Perusongelma: ohjelmointi on kuitenkin aika vaikeaa? Ousterhaut (1994) kehitti Tcl:n yksinkertaiseksi

skriptauskieleksi (http://home.pacbell.net/ouster/; http://tcl.activestate.com/)

? Tk on Tcl:n kanssa yhdessä toimiva komponenttikirjasto? Tulkkaava ympäristö -- kirjoitetut käyttöliittymät (ja

ohjelmat) toimivat kaikissa niissä ympäristöissä, joihin tulkkiympäristö on olemassa

? Aiemmin ei visuaalista kehitysympäristöä (“IDE”); käytössä WISH: “windowing shell”; nyt Visual TCL

Marko Nieminen

Tcl/Tk-käyttöliittymäesimerkki

wm title . "Simple Tcl Example"

label .msg -wraplength 3i -justify left -relief sunken -text \"Hello, World"

pack .msg -side top

menu .menu -tearoff 0set m .menu.filemenu $m -tearoff 0.menu add cascade -label "File" \

-menu $m -underline 0$m add command -label "Exit" -command "destroy .". configure -menu .menu

frame .buttonspack .buttons -side bottom -fill x -pady 2mbutton .buttons.quit -text OK -command "destroy ."pack .buttons.quit -side left -expand 1

Luodaankäyttöliittymänelementti, jonkatyyppi on “label”

Elementinnimi “polkuineen”

Ominaisuudetja toimenpiteet

Marko Nieminen

aboutBox -laajennus

set m .menu.helpmenu $m -tearoff 0.menu add cascade -label "Help" -menu $m -underline 0$m add command -label ”About" -command \

"aboutBox" -accelerator "<F1>" bind . <F1> aboutBox. configure -menu .menu

...

proc aboutBox {} {tk_messageBox -icon info -type ok \-title ”about..." -message \”Simple Tcl/Tk User Interface"

}

Marko Nieminen

RAD/UIDE/UIMS-välineet mahdollistavat visuaalisen layout-suunnittelun

object MainMenu1: TMainMenuLeft = 8Top = 8object File1: TMenuItem

Caption = '&File'object Exit1: TMenuItem

Caption = 'E&xit'end

endend

object Label1: TLabelLeft = 56Top = 8Width = 61Height = 13Caption = 'Hello, World!'

end

object Button1: TButtonLeft = 48Top = 32Width = 75Height = 25Caption = 'OK'TabOrder = 0

end

Marko Nieminen

Esimerkki UIDE-kehitysympäristöstä(Borland Delphi)