T-121.5300 Käyttöliittymäsuunnittelu
                   Luento 6.

Mallinnus ja mallit käyttöliittymäsuunnittelussa




  ...
Waterfall: ”Big Design Up Front”
(Royce 1970, Pressman 1987)




                     System
                      System
...
Mallien ja mallinnuksen perusteita

 Relevanttien/oikeiden asioiden esiin nostaminen
 Asioiden järjestäminen tarkoituksenm...
Mallinnusohjeistoa
(Pressman 1987)



   Kuvauksessa/mallinnuksessa käytettävän esitysmuodon ja
   sisällön on oltava rele...
Kuvaustapoja

 Luonnollinen kieli
      helppoa kirjoittaa, mutta pitkät ja moniselitteiset kuvaukset joskus
      hankali...
Käyttöliittymäsuunnittelun perinteiset
             kuvauskielet
BNF – Bachus Naur form

 Monien kuvauskielien taustalla

<Puhelinluettelomerkintä> ::= <Nimi> <Puhelinnumero>
<Nimi> ::= <...
TAG – Task Action Grammar
(Reisner 1981 ”action”; Payne & Green 1986 ”task”)



   ”liikuta kursoria a) merkin verran b) s...
UAN – User Action Notation

 Ongelmia suorakäyttöliittymien mallintamisessa
 Hiiren liikuttaminen: ~; objekti: [obj] (esim...
Oliopohjainen analyysi

 Soveltuu oliopohjaisiin kehitysympäristöihin
 Keskeiset käsitteet:
   objektit (objects)
      ja...
Oliopohjainen analyysi

 Tuotetaan vapaamuotoinen kuvaus ratkaistavasta asiasta
 Alleviivataan kaikki substantiivit (=obje...
Skenaario: kokoonpanolinja


Kokoonpanolinjan työntekijä saa eteensä paletilla olevat
tuotteen peruskomponentit. Hänen teh...
Oliopohjainen mallinnus: Skenaario

 Skenaariossa kuvataan, mitä käyttötilanteessa tapahtuu
 Skenaario voi kuvata nykyhetk...
Yleinen ja tarkennettu skenaario

   1 Yleinen (”initial”) kuvaa käyttäjän toiminnan (”Mitä?”)
   ilman tarkennuksia sen s...
Use Case –> UML          Unified Modeling Language


 1990 luvulle tultaessa Jakobson kehitti use case -
 kuvaukset
 use c...
Use Case modelling

 WHAT our system will do at a high-level and with a user
 focus for the purpose of scoping the project...
Tavoitteita UML-mallinnuksella


 vapaamuotoisten skenaarioiden transformointi formaaliin
 muotoon

 käyttöliittymän toteu...
Use Case


                                 deposit
                                             << uses >>
              ...
”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
 Osittaiste...
Upcoming SlideShare
Loading in …5
×

T-121.5300 Käyttoliittymasuunnittelu - Mallit

1,998 views

Published on

Lecture at T-121.5300 User Interface Design about using models that support user interface design and implementation.

Published in: Education, Technology
1 Comment
1 Like
Statistics
Notes
  • More detailed information about 'Essential Use Cases' (see slides 19-21) can be found from paper 'Structure and Style in Use Cases for User Interface Design' by Constantine & Lockwood (2000). The paper is available at http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.27.5261
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,998
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
49
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

T-121.5300 Käyttoliittymasuunnittelu - Mallit

  1. 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. 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. 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. 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. 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
  6. 6. Käyttöliittymäsuunnittelun perinteiset kuvauskielet
  7. 7. 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
  8. 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
  9. 9. 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
  10. 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. 11. Oliopohjainen analyysi Tuotetaan vapaamuotoinen kuvaus ratkaistavasta asiasta Alleviivataan kaikki substantiivit (=objektit). Alleviivataan kaikki adjektiivit (=ominaisuudet) Alleviivataan kaikki verbit (=operaatiot) Marko Nieminen
  12. 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. 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. 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. 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. 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. 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. 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
  19. 19. ”Essential Use Cases” (Constantine & Lockwood 2000) Marko Nieminen
  20. 20. Free-form Scenarios vs. Essential Use Cases (Constantine & Lockwood 2000) Marko Nieminen
  21. 21. Käyttöliittymän rakentamisen mallit (Constantine & Lockwood 2000) Marko Nieminen
  22. 22. 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

×