T-121.5300 Käyttoliittymasuunnittelu - Mallit

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

1 Favorite

T-121.5300 Käyttoliittymasuunnittelu - Mallit - Presentation Transcript

  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
  6. Käyttöliittymäsuunnittelun perinteiset kuvauskielet
  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. 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. 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. 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
  19. ”Essential Use Cases” (Constantine & Lockwood 2000) Marko Nieminen
  20. Free-form Scenarios vs. Essential Use Cases (Constantine & Lockwood 2000) Marko Nieminen
  21. Käyttöliittymän rakentamisen mallit (Constantine & Lockwood 2000) Marko Nieminen
  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

+ mniemimniemi, 2 years ago

custom

790 views, 1 favs, 0 embeds more stats

Lecture at T-121.5300 User Interface Design about u more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 790
    • 790 on SlideShare
    • 0 from embeds
  • Comments 1
  • Favorites 1
  • Downloads 31
Most viewed embeds

more

All embeds

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories