johdatus käyttäjäkeskeiseen tuotekehitykseen€¦ · alleviivataan kaikki adjektiivit...
Post on 12-Jun-2020
5 Views
Preview:
TRANSCRIPT
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)
top related