T-121.2100 (2009) Kayttoliittyman rakentaminen

752 views
665 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
752
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

T-121.2100 (2009) Kayttoliittyman rakentaminen

  1. 1. T-121.2100 Johdatus käyttäjäkeskeiseen tuotekehitykseen Käyttöliittymän mallintaminen ja rakentaminen Marko Nieminen Teknillinen korkeakoulu Käyttöliittymät ja käytettävyys Marko.Nieminen@tkk.fi
  2. 2. Tällä luennolla Käyttöliittymän rakentamista tukevat mallit Mallien käyttö suunnittelussa Käyttöliittymien toteuttaminen Käyttöliittymän suunnittelua tukevat tyylioppaat Marko Nieminen
  3. 3. Käyttöliittymäsuunnittelun konteksti T-121.5300 http://www.acm.org/sigchi/cdg/figure_1.gif Marko Nieminen ACM SIGCHI Curricula for Human-Computer Interaction
  4. 4. Onko käyttöliittymän rakentaminen vaikeaa?
  5. 5. 50% suunnitteluajasta menee käyttöliittymäsuunnitteluun 48% koodista kohdistuu käyttöliittymään Myers B.A. & Rosson M.B. in Survey on User interface programming in Human Factors in Computing Systems 1992. (SIGCHI’92)
  6. 6. Millainen on hyvä käyttöliittymä? Näkymätön, huomaamaton 1. Ei vaadi koulutusta, helppo oppia 2. Yhdessä tilanteessa opittua voidaan soveltaa toiseen 3. Ennustettava 4. Virheetön: käytön yhteydessä tapahtuu vähän virheitä – ja jos 5. tapahtuukin, niistä toipuminen on yksinkertaista ”Oikeiden tehtävien” suorittaminen onnistuu hyvin 6. On joustava – ja älykäs (?) 7. Käyttäjät pitävät siitä 8. ... ja paljon muutakin 9. [Myers 1997] Marko Nieminen “The best user interface is one the user doesn't notice.”
  7. 7. 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
  8. 8. Käyttöliittymän rakentamisen mallit (Constantine & Lockwood 2000) Marko Nieminen
  9. 9. 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
  10. 10. Oliopohjainen analyysi Tuotetaan vapaamuotoinen kuvaus ratkaistavasta asiasta Alleviivataan kaikki substantiivit (=objektit). Alleviivataan kaikki adjektiivit (=ominaisuudet) Alleviivataan kaikki verbit (=operaatiot) Marko Nieminen
  11. 11. 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
  12. 12. Navigaatiomalli Kertoo, miten vuorovaikutus välineen kanssa etenee Määrittelee kontekstit ja siirtymät, mutta pääasiassa järjestelmän näkökulmasta ristiriidat, silmukat, ikuiset loopit tunnistettavissa Marko Nieminen
  13. 13. Valikkokartta ~ Navigaatiokartta Shneiderman 1998: Designing the User Interface Marko Nieminen
  14. 14. Valikkokartan kuvaus Shneiderman 1998: Designing the User Interface Marko Nieminen
  15. 15. Paper Prototyping, Rationale designers almost never use paper prototyping in real design projects Paper prototyping isn't used because people don't think they will get enough information from a method that is so simple and so cheap biggest improvements in user experience come from gathering usability data as early as possible http://www.useit.com/alertbox/20030414.html Marko Nieminen
  16. 16. Paper Prototyping Example http://www.nngroup.com/reports/prototyping/video_stills.html Marko Nieminen
  17. 17. Käyttöliittymäkehittimiä Shneidermanin jako Software engineering tools: C/C++ w/toolkits/libraries Design tools: MacroMind Director, HyperCard, LabView, Visual Basic, Delphi, JBuilder Eri toimittajat esittelevät kehitysympäristönsä eri nimikkeillä: Rapid Prototyper User Interface Builder UIMS - User Interface Management System UIDE - User Interface Development Environment RAD - Rapid Application Developer Marko Nieminen
  18. 18. Tcl/Tk -- Tool Command Language Perusongelma: ohjelmointi on kuitenkin aika vaikeaa Ousterhaut (1994) kehitti Tcl:n yksinkertaiseksi skriptauskieleksi (http://home.pacbell.net/ouster/; http://tcl.activestate.com/) Tk on Tcl:n kanssa yhdessä toimiva komponenttikirjasto Tulkkaava ympäristö -- kirjoitetut käyttöliittymät (ja ohjelmat) toimivat kaikissa niissä ympäristöissä, joihin tulkkiympäristö on olemassa Aiemmin ei visuaalista kehitysympäristöä (“IDE”); käytössä WISH: “windowing shell”; nyt Visual TCL Marko Nieminen
  19. 19. Tcl/Tk-käyttöliittymäesimerkki wm title . quot;Simple Tcl Examplequot; label .msg -wraplength 3i -justify left -relief sunken -text quot;Hello, Worldquot; pack .msg -side top menu .menu -tearoff 0 set m .menu.file menu $m -tearoff 0 Luodaan.menu add cascade -label quot;Filequot; käyttöliittymän -menu $m -underline 0 elementti, jonka command -label quot;Exitquot; -command quot;destroy .quot; Elementin Ominaisuudet $m add tyyppi on configure -menu .menu nimi “polkuineen” ja toimenpiteet . “label” frame .buttons pack .buttons -side bottom -fill x -pady 2m button .buttons.quit -text OK -command quot;destroy .quot; pack .buttons.quit -side left -expand 1 Marko Nieminen
  20. 20. aboutBox -laajennus set m .menu.help menu $m -tearoff 0 .menu add cascade -label quot;Helpquot; -menu $m -underline 0 $m add command -label ”Aboutquot; -command quot;aboutBoxquot; -accelerator quot;<F1>quot; bind . <F1> aboutBox . configure -menu .menu ... proc aboutBox {} { tk_messageBox -icon info -type ok -title ”about...quot; -message ”Simple Tcl/Tk User Interfacequot; } Marko Nieminen
  21. 21. Esimerkki UIDE-kehitysympäristöstä (Borland Delphi) Marko Nieminen
  22. 22. RAD/IDE-välineet mahdollistavat visuaalisen layout-suunnittelun object MainMenu1: TMainMenu Left = 8 Top = 8 object File1: TMenuItem Caption = '&File' object Exit1: TMenuItem Caption = 'E&xit' end end end object Label1: TLabel Left = 56 Top = 8 object Button1: TButton Width = 61 Left = 48 Height = 13 Top = 32 Caption = 'Hello, World!' Width = 75 end Height = 25 Caption = 'OK' TabOrder = 0 Marko Nieminen end
  23. 23. Suunnitteluohjeistot käyttöliittymien toteuttamisen tukena
  24. 24. Miksi tarvitaan suunnitteluohjeistoja? Arvaus, paraskaan, ei ole riittävä suunnitteluperusteeksi Käyttäjä on aina oikeassa Käyttäjä EI OLE aina oikeassa Käyttäjät eivät ole suunnittelijoita Suunnittelijat eivät ole käyttäjiä Toimitusjohtajat eivät ole käyttäjiä Vähemmän on enemmän Yksityiskohdat ovat kompastuskiviä, suurimerkityksisiä Aputoiminnot eivät itse asiassa auta ratkaisemaan ongelmia Käytettävyyssuunnittelu on prosessi [Nielsen 1993] Marko Nieminen “Whadya mean, they're not all computer scientists?”
  25. 25. Suunnitteluperiaatteet Yleisiä sääntöjä, peukalosääntöjä, jotka ovat muistettavissa helpohkosti Eivät kuitenkaan tarjoa tarkkaa ohjetta siitä, miten tietyssä suunnittelutilanteessa toimitaan käytännössä Vaativat soveltamista Suunnitteluperiaatteita esitellään monissa oppikirjoissa, mm. Shneiderman, Nielsen Marko Nieminen “The idea is to empower the user, not speed up the system.”
  26. 26. Tyylioppaat Tiettyyn käyttöliittymäympäristöön sopivia ohjeistoja (erottelu ”guidelines” vs. ”style guides” on joskus häilyvä, olematonkin) Usein myös tiettyyn sovellus-, toimittaja- ja yritysympäristöön liittyviä ohjeita Määrittelevät käyttöliittymän toimintaa toiminnallisesta, visuaalisesta ja teknisestäkin näkökulmasta Toiminnalliset ohjeet voivat liittyä yrityskohtaisiin toimintatapoihin Visuaalinen ohjeisto paitsi ”logoyhtenäisyyttä” myös tiettyjen elementtien sijoittumista aina yhtenäiseen paikkaan näytöllä Teknisestä näkökulmasta määrityksiin voi kuulua esimerkiksi tietyn käyttöliittymäkirjaston käyttö sekä määrittelyjä rajapinnoista muihin järjestelmiin Marko Nieminen
  27. 27. Tyylioppaan asioita http://www.construx.com/survivalguide/uistyleguide.htm Käyttöliittymäympäristö Värit MS Windows, Apple, GNOME, KDE, lukumäärä, ympäristösidonnaisuus Motif, Palm, S40, ...? Virheiden hallinta Ikkunointi muoto/modaliteetti, informatiivisuus, MDI, SDI, värit, koot,...? kuittaus Dialogit Toimintopalkit dialogien välinen vuorovaikutteisuus/ mitä toimintoja, miten siirreltävissä, siirtymät, toiminnallisuus, ulkoasu miten muokattavissa Valikot Statuspalkit palkki/ponnahdus, pikakomennot, mitä tietoa, miten päivittyy kontekstisensitiivisyys Vierityspalkit Painikkeet onko käytössä, millaisilla alueilla koko, etäisyys, teksti/kuva, vertikaali/ horisontaali, vakiopainikkeet? Marko Nieminen
  28. 28. Example: KDE UI Guidelines For the next transparencies, look at http://developer.kde.org/documentation/standards/kde/style/basics/index.html
  29. 29. Example: KDE UI Guidelines, Basics http://developer.kde.org/documentation/standards/kde/style/basics/windows.html Windows SDI: No MDI, just SDI & Pure SDI, co-operating SDI & controlled SDI Labels Capitalization: Book Title / Sentence style, use of colons: Settings options, document options, configuration, session management Systray for non-document specific apps, single click (open)/ right click (quit/options) Marko Nieminen
  30. 30. Example: KDE Menus File Edit View Go [Application specific menus] Bookmarks Tools Settings Help New Ctrl+N Open... Ctrl+O Open Recent > -------------------- Save Ctrl+S Save As... Revert -------------------- Print... Ctrl+P -------------------- Close Ctrl+W -------------------- Quit Ctrl+Q Marko Nieminen
  31. 31. Example: KDE Toolbar Buttonbar All actions should be accessible through the menu bar - don't have an action in the New toolbar that isn't also in the menubar Open Save Allow users to configure the buttonbar. You Print may choose to have more than one Print Preview buttonbar. Undo Redo Implementation Note: Cut The KAction class offers an easy way to ensure Copy consistency between the menubar and the toolbar. Paste The icons designed for the standard buttons Find should never be used for any other Zoom purpose. Previous Page/Back Next Page/Forward Go To Page/Home Help Marko Nieminen
  32. 32. Example: KDE Dialogs Button Usage Details <action> Mutually exclusive with Apply The action button can be 'ok', 'save' or 'print' or similar. When used together with Cancel the dialog will be closed after pressing this button. When used together with Close the dialog will stay open. Cancel Mutually exclusing with close Pressing this button will close the dialog discarding changes. Changes made earlier with the apply button will be used. Close Mutually exclusing with cancel Pressing this button will close the dialog discarding changes. Changes made earlier with the apply button will be used. Apply Optional, but never with Close Apply changes made in the dialog and keep the dialog open. Using this button only makes sense when the <action> button (see above) is an 'ok' button. Help Optional A button labelled quot;Helpquot; when activated should show a help-window with help relating to the dialog. Defaults Optional The button sets all the settings in the dialog to the system defaults. This is only useful for dialogs that change settings of some sort. Reset Optional This is the opposite of Apply and is therefore only useful in conjunction with an apply button. The reset button does not close the dialog, and resets the values to the ones used in the system currently. It has the same result as closing the dialog without saving changes and re-opening it again. Reset is deprecated for most dialogs; only dialogs that are hard to reach after closing may benefit from a reset button. Marko Nieminen
  33. 33. KDE Example UI Marko Nieminen

×