![Page 1: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/1.jpg)
T-121.5300 Käyttöliittymäsuunnittelu
Luento 6.
Mallinnus ja mallit käyttöliittymäsuunnittelussa
Marko Nieminen
Teknillinen korkeakoulu
Käyttöliittymät ja käytettävyys
http://www.soberit.hut.fi/T-121/T-121.5300
![Page 2: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/2.jpg)
Waterfall: ”Big Design Up Front”(Royce 1970, Pressman 1987)
System
Engineering
System
Engineering
AnalysisAnalysis
DesignDesign
CodeCode
TestingTesting
MaintenanceMaintenance
![Page 3: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/3.jpg)
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)
![Page 4: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/4.jpg)
Marko Nieminen
Mallinnusohjeistoa (Pressman 1987)
� Kuvauksessa/mallinnuksessa käytettävän esitysmuodon ja sisällön on oltava relevanttia suhteessa tarkasteltavaan ongelmaan
� Kuvauksessa esitettävän aineiston on oltava kerroksittaista: yleisestä yksityiskohtaiseen tietoon
� Kerrallaan käytettäviä kuvaustapoja ei saa olla liikaa ja niiden on oltava yhdenmukaisia
� Kuvausten on oltava helposti muokattavissa
� Ajatuksena (Reisner 1981): yksinkertaisempi kuvaus johtaa yksinkertaisempaan käyttöliittymään ja helpompaan käyttöön
![Page 5: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/5.jpg)
Marko Nieminen
Kuvaustapoja
� Luonnollinen kieli� helppoa kirjoittaa, mutta pitkät ja moniselitteiset kuvaukset joskushankalia
� Formaalit ja semiformaalit kielet� BNF Backus-Naur Form; TAG Task-Action Grammar
� vaikeuksia esim. puurakenteen luontevassa esittämisessä
� “Formalism in HCI”
� Kaaviot� valikko- ja dialogirakenteen kuvaavat “puut”
� siirtymädiagrammit ja tilakuvaukset
� vaikeita “suorakäyttö”-käyttöliittymissä; vaihtoehtoja liikaakuvattavaksi
![Page 6: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/6.jpg)
Käyttöliittymäsuunnittelun perinteiset kuvauskielet
![Page 7: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/7.jpg)
Marko Nieminen
BNF – Bachus Naur form
� Monien kuvauskielien taustalla
<Puhelinluettelomerkintä> ::= <Nimi> <Puhelinnumero>
<Nimi> ::= <Sukunimi>, <Etunimi>
<Sukunimi> ::= <string>
<Etunimi> ::= <string>
<string> ::= <char> | <char><string>
<char> ::=
a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z|å|ä|ö
<Puhelinnumero> ::= (<suuntanumero>) <liittymänumero>
<suuntanumero> ::= <digit><digit>
<liittymänumero> ::= <digit><digit><digit><digit><digit><digit><digit>
<digit> ::= 0|1|2|3|4|5|6|7|8|9
![Page 8: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/8.jpg)
Marko Nieminen
TAG – Task Action Grammar(Reisner 1981 ”action”; Payne & Green 1986 ”task”)
� ”liikuta kursoria a) merkin verran b) sanan verran c) kappaleen verran eteenpäin”
task[direction, unit] -> command[unit], symbol[direction],
command[unit=char]->””
command[unit=word]->”CTRL”
command[unit=paragraph]->”ALT”
symbol[Direction=forward]-> ”Nuolinäppäin_oikealle”
symbol[Direction=backward]-> ” Nuolinäppäin_vasemmalle”
tuottaa
a) ”” + ”Nuolinäppäin_oikealle”
b) ”CTRL” + ”Nuolinäppäin_oikealle”
c) ”ALT” + ”Nuolinäppäin_oikealle”
![Page 9: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/9.jpg)
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!
![Page 10: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/10.jpg)
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
![Page 11: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/11.jpg)
Marko Nieminen
Oliopohjainen analyysi
� Tuotetaan vapaamuotoinen kuvaus ratkaistavasta asiasta
� Alleviivataan kaikki substantiivit (=objektit).
� Alleviivataan kaikki adjektiivit (=ominaisuudet)
� Alleviivataan kaikki verbit (=operaatiot)
![Page 12: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/12.jpg)
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.
![Page 13: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/13.jpg)
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
![Page 14: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/14.jpg)
Marko Nieminen
Yleinen ja tarkennettu skenaario
� 1 Yleinen (”initial”) kuvaa käyttäjän toiminnan (”Mitä?”) ilman tarkennuksia sen suhteen, miten asiat toteutetaan/toteutuvat
� 2 Tarkennettu (”elaborated”) skenaario kuvaa myös sen, miten vaadittavat asiat tapahtuvat, esim. millaisia havaintoja käyttäjä tekee kohteena olevasta ympäristöstäja siten myös käyttöliittymästä (käsitteet, kuvakkeet, vuorovaikutusdialogi)
[Carroll / Scenario-based design]
![Page 15: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/15.jpg)
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
![Page 16: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/16.jpg)
Marko Nieminen
Use Case modelling
� WHAT our system will do at a high-level and with a user focus for the purpose of scoping the project and giving the application some structure
� Use Cases are an informal and imprecise modelling technique
� Use Cases are used primarily to capture the high level user-functional requirements of a system
� Use Cases are used to define the fundamental structure of our application
![Page 17: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/17.jpg)
Marko Nieminen
Tavoitteita UML-mallinnuksella
� vapaamuotoisten skenaarioiden transformointi formaaliin muotoon
� käyttöliittymän toteuttaminen mallien avulla
� automaattinen käyttöliittymän prototyypin generointi
![Page 18: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/18.jpg)
Marko Nieminen
Use Case
deposit
identify
withdraw
balance
<< uses >>
<< uses >>
<< uses >>
UsecaseD modeling are functionally equivalent to task analysis.(Object Modeling and User Interface Design at CHI’97 and CHI’98).Scenarios that refine use cases in a UsecaseD allow for a precisedescription of the details of user interaction.
![Page 19: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/19.jpg)
Marko Nieminen
”Essential Use Cases”
(Constantine & Lockwood 2000)
![Page 20: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/20.jpg)
Marko Nieminen
Free-form Scenarios vs. Essential Use Cases
(Constantine & Lockwood 2000)
![Page 21: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/21.jpg)
Marko Nieminen
Käyttöliittymän rakentamisen mallit
(Constantine & Lockwood 2000)
![Page 22: T-121.5300 Käyttoliittymasuunnittelu - Mallit](https://reader034.vdocuments.pub/reader034/viewer/2022042713/548f33e6b479591e1d8b4c31/html5/thumbnails/22.jpg)
Marko Nieminen
Mihin malleja käytetään? Prosessi:
� Vaatimusten keruu
� Requirements Acquisition; ClassDs, UsecaseDs, CollDs
� Osittaisten määritysten tuottaminen skenaarioista
� Generation of partial specifications from scenarios; StateDs
� Osittaisten määritysten analysointi
� Analysis of partial specifications; Labelled StateDs
� Määrittelyjen yhdistäminen
� Integration of partial specifications; Integrated StateDs
� Käyttöliittymäprototyyppien tuottaminen
� User Interface Prototype Generation; UI prototypes