Käyttöliittymän rakentaminen

Transkriptio

1 T Johdatus käyttäjäkeskeiseen tuotekehitykseen Käyttöliittymän rakentaminen Teknillinen korkeakoulu Käyttöliittymät ja käytettävyys

2 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 (SIGCHI 92)

3 Käyttöliittymäsuunnittelun konteksti ACM SIGCHI Curricula for Human-Computer Interaction

4 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ä

5 Käyttöliittymän rakentamisen mallit (Constantine & Lockwood 2000)

6 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)

7 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!

8 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) Vaiheet: liittyvät sekä olioihin että operaatioihin Kuvataan järjestelmä sopivalla tarkkuudella vapaamuotoisesti, mutta kirjallisesti objektit=substantiivit; ominaisuudet=adjektiivit; operaatiot=verbit; operaatioiden ominaisuudet=adverbit

9 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

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

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

12 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

13 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 Marko Johnson Nieminen

14 Sequence Diagram : Student registration form registration manager math 101 math 101 section 1 1: fill in info 2: submit 3: add course(joe, math 01) 4: are you open? 6: add (joe) 5: are you open? 7: add (joe)

15 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 5 Lopeta 2 Tunnusluku 3 Valitse toiminto 4 Nosta rahaa

16 State Transition Diagram Initialization do: Initialize course Cancel Canceled do: Notify registered students Add Student / Set count = 0 Cancel Cancel Add student[ count < 10 ] Closed do: Finalize course Open entry: Register student exit: Increment count [ count = 10 ]

17 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

18 MVC - Model View Controller Käytössä esim. Smalltalkissa, Javassa Jakaa sovelluksen kolmeen osaan: sovelluslogiikka (model) esitysmuoto (view) vuorovaikutuksen hallinta (controller) user input output V iew C ontroller Listeners M odel application

19 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

20 Käyttöliittymäympäristön tapahtuma event procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage('Button #1 was pressed!'); end; event

21 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

22 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 TLabel TButton TPanel TPopUpMenu TEdit

23 Esimerkki

24 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"; } }; }

25 Määritellään ID:t enum TExampleMenuCommands { EExampleCmd1=100, EExampleCmd2=101, EExampleCmdDimItem=102, EExampleCmdExtra=103, EEikCmdAbout=104, EEikCmdSetIrDAInterval=105, EExampleCmdStartSession=106, EExampleCmdEndSession=107, EExampleCmdFullScreen=108 };

26 Resurssit ja koodi yhdistetään void 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; } }

27 Kirjoitetaan funktiot // Print out "About" Dialog void CExampleAppUi::AboutDialog() { // Create the dialog CEikDialog* dialog = new (ELeave) CEikDialog(); // Launch the dialog dialog->executeld(r_example_dialog); }

28 2 1

29 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

30 Käyttöliittymäkehitysympäristöt Käyttöliittymäkehitysympäristöjen tarve tunnistettiin 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

31 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ä

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

33 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

34 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

35 Tcl/Tk -- Tool Command Language Perusongelma: ohjelmointi on kuitenkin aika vaikeaa Ousterhaut (1994) kehitti Tcl:n yksinkertaiseksi skriptauskieleksi ( 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

36 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 0 set m.menu.file menu $m -tearoff 0 Luodaan.menu add cascade -label "File" \ käyttöliittymän -menu $m -underline 0 elementti, $m jonka add command Elementin -label "Exit" -command Ominaisuudet "destroy." tyyppi on. configure -menu nimi polkuineen.menu ja toimenpiteet label frame.buttons pack.buttons -side bottom -fill x -pady 2m button.buttons.quit -text OK -command "destroy." pack.buttons.quit -side left -expand 1

37 aboutbox -laajennus set m.menu.help menu $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" }

38 RAD/UIDE/UIMS-välineet mahdollistavat visuaalisen layout-suunnittelun object MainMenu1: TMainMenu Left = 8 Top = 8 object File1: TMenuItem Caption = '&File' object Exit1: TMenuItem Caption = 'E&xit' end end end object Label1: TLabel Left = 56 Top = 8 Width = 61 Height = 13 Caption = 'Hello, World!' end object Button1: TButton Left = 48 Top = 32 Width = 75 Height = 25 Caption = 'OK' TabOrder = 0 end

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