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

Engineering

System

Engineering

AnalysisAnalysis

DesignDesign

CodeCode

TestingTesting

MaintenanceMaintenance

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

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

Käyttöliittymäsuunnittelun perinteiset kuvauskielet

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

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

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.

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