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

Waterfall: ”Big Design Up Front”
(Royce 1970, Pressman 1987)
System
System
Engineering
Engineering
Analysis
Analysis
Design
Design
Code
Code
Testing
Testing
Maintenance
Maintenance

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

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

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

Käyttöliittymäsuunnittelun perinteiset
kuvauskielet

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

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

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

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

Tavoitteita UML-mallinnuksella
vapaamuotoisten skenaarioiden transformointi formaaliin
muotoon
käyttöliittymän toteuttaminen mallien avulla
automaattinen käyttöliittymän prototyypin generointi
Marko Nieminen

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

”Essential Use Cases”
(Constantine & Lockwood 2000) Marko Nieminen

Free-form Scenarios vs. Essential Use Cases
(Constantine & Lockwood 2000) Marko Nieminen

Käyttöliittymän rakentamisen mallit
(Constantine & Lockwood 2000)
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
Marko Nieminen