1. 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
2. Waterfall: ”Big Design Up Front”
(Royce 1970, Pressman 1987)
System
System
Engineering
Engineering
Analysis
Analysis
Design
Design
Code
Code
Testing
Testing
Maintenance
Maintenance
3. 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
4. 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
Marko Nieminen
5. Kuvaustapoja
Luonnollinen kieli
helppoa kirjoittaa, mutta pitkät ja moniselitteiset kuvaukset joskus
hankalia
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 liikaa
kuvattavaksi Marko Nieminen
8. 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”
Marko Nieminen
10. 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
11. Oliopohjainen analyysi
Tuotetaan vapaamuotoinen kuvaus ratkaistavasta asiasta
Alleviivataan kaikki substantiivit (=objektit).
Alleviivataan kaikki adjektiivit (=ominaisuudet)
Alleviivataan kaikki verbit (=operaatiot)
Marko Nieminen
12. 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
13. 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
14. 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]
Marko Nieminen
15. 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
16. 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
Marko Nieminen
17. Tavoitteita UML-mallinnuksella
vapaamuotoisten skenaarioiden transformointi formaaliin
muotoon
käyttöliittymän toteuttaminen mallien avulla
automaattinen käyttöliittymän prototyypin generointi
Marko Nieminen
18. Use Case
deposit
<< uses >>
identify << uses >>
<< uses >>
balance
withdraw
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 precise
description of the details of user interaction.
Marko Nieminen
