Embed Size (px)
DESCRIPTION
Citation preview
T-121.2100Johdatus 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
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 Nieminenhttp://www.acm.org/sigchi/cdg/figure_1.gifACM SIGCHI Curricula for Human-Computer Interaction
T-121.5300
Käyttöliittymäsuunnittelun konteksti
Onko käyttöliittymän rakentaminen vaikeaa?
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)
Marko Nieminen
Millainen on hyvä käyttöliittymä?
1. Näkymätön, huomaamaton
2. Ei vaadi koulutusta, helppo oppia
3. Yhdessä tilanteessa opittua voidaan soveltaa toiseen
4. Ennustettava
5. Virheetön: käytön yhteydessä tapahtuu vähän virheitä – ja jos tapahtuukin, niistä toipuminen on yksinkertaista
6. ”Oikeiden tehtävien” suorittaminen onnistuu hyvin
7. On joustava – ja älykäs (?)
8. Käyttäjät pitävät siitä
9. ... ja paljon muutakin
[Myers 1997]
“The best user interface is one the user doesn't notice.”
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
Käyttöliittymän rakentamisen mallit
(Constantine & Lockwood 2000)
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
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
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
Valikkokartta ~ Navigaatiokartta
Shneiderman 1998:Designing the User Interface
Marko Nieminen
Valikkokartan kuvaus
Shneiderman 1998:Designing the User Interface
Marko Nieminen
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
Paper Prototyping Example
� http://www.nngroup.com/reports/prototyping/video_stills.html
Marko Nieminen
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ä erinimikkeillä:� Rapid Prototyper
� User Interface Builder
� UIMS - User Interface Management System
� UIDE - User Interface Development Environment
� RAD - Rapid Application Developer
Marko Nieminen
Tcl/Tk -- Tool Command Language
� Perusongelma: ohjelmointi on kuitenkin aika vaikeaa
� Ousterhaut (1994) kehitti Tcl:n yksinkertaiseksiskriptauskieleksi (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 (jaohjelmat) toimivat kaikissa niissä ympäristöissä, joihintulkkiympäristö on olemassa
� Aiemmin ei visuaalista kehitysympäristöä (“IDE”); käytössä WISH: “windowing shell”; nyt Visual TCL
Marko Nieminen
Tcl/Tk-käyttöliittymäesimerkki
wm title . "Simple Tcl Example"
label .msg -wraplength 3i -justify left -relief sunken -text \
"Hello, World"
pack .msg -side top
menu .menu -tearoff 0
set m .menu.file
menu $m -tearoff 0
.menu add cascade -label "File" \
-menu $m -underline 0
$m add command -label "Exit" -command "destroy ."
. configure -menu .menu
frame .buttons
pack .buttons -side bottom -fill x -pady 2m
button .buttons.quit -text OK -command "destroy ."
pack .buttons.quit -side left -expand 1
Luodaankäyttöliittymän
elementti, jonkatyyppi on
“label”
Elementinnimi “polkuineen”
Ominaisuudetja toimenpiteet
Marko Nieminen
aboutBox -laajennus
set m .menu.help
menu $m -tearoff 0
.menu add cascade -label "Help" -menu $m -underline 0
$m add command -label ”About" -command \
"aboutBox" -accelerator "<F1>"
bind . <F1> aboutBox
. configure -menu .menu
...
proc aboutBox {} {
tk_messageBox -icon info -type ok \
-title ”about..." -message \
”Simple Tcl/Tk User Interface"
}
Marko Nieminen
Esimerkki UIDE-kehitysympäristöstä(Borland Delphi)
Marko Nieminen
RAD/IDE-välineet mahdollistavat visuaalisenlayout-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
Width = 61
Height = 13
Caption = 'Hello, World!'
end
object Button1: TButton
Left = 48
Top = 32
Width = 75
Height = 25
Caption = 'OK'
TabOrder = 0
end
Suunnitteluohjeistot käyttöliittymien toteuttamisen tukena
Marko Nieminen
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]
“Whadya mean, they're not all computer scientists?”
Marko Nieminen
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
“The idea is to empower the user, not speed up the system.”
Marko Nieminen
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
Tyylioppaan asioita
� Käyttöliittymäympäristö� MS Windows, Apple, GNOME, KDE,
Motif, Palm, S40, ...?
� Ikkunointi� MDI, SDI, värit, koot,...?
� Dialogit � dialogien välinen vuorovaikutteisuus/
siirtymät, toiminnallisuus, ulkoasu
� Valikot� palkki/ponnahdus, pikakomennot,
kontekstisensitiivisyys
� Painikkeet� koko, etäisyys, teksti/kuva,
vertikaali/ horisontaali, vakiopainikkeet?
� Värit � lukumäärä, ympäristösidonnaisuus
� Virheiden hallinta� muoto/modaliteetti, informatiivisuus,
kuittaus
� Toimintopalkit� mitä toimintoja, miten siirreltävissä,
miten muokattavissa
� Statuspalkit � mitä tietoa, miten päivittyy
� Vierityspalkit� onko käytössä, millaisilla alueilla
http://www.construx.com/survivalguide/uistyleguide.htm
Example: KDE UI Guidelines
For the next transparencies, look at
http://developer.kde.org/documentation/standards/kde/style/basics/index.html
Marko Nieminen
Example: KDE UI Guidelines, Basics
� 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)
http://developer.kde.org/documentation/standards/kde/style/basics/windows.html
Marko Nieminen
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
Example: KDE Toolbar
� Buttonbar� New � Open � Save � Print � Print Preview � Undo � Redo � Cut � Copy � Paste � Find � Zoom � Previous Page/Back � Next Page/Forward � Go To Page/Home � Help
� All actions should be accessible through the menu bar - don't have an action in the toolbar that isn't also in the menubar
� Allow users to configure the buttonbar. You may choose to have more than one buttonbar.
� Implementation Note:� The KAction class offers an easy way to ensure
consistency between the menubar and the toolbar.
� The icons designed for the standard buttons should never be used for any other purpose.
Marko Nieminen
Example: KDE Dialogs
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.
OptionalReset
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.
OptionalDefaults
A button labelled "Help" when activated should show a help-window with help relating to
the dialog.
OptionalHelp
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.
Optional, but never with CloseApply
Pressing this button will close the dialog discarding changes. Changes made earlier with
the apply button will be used.
Mutually exclusing with cancelClose
Pressing this button will close the dialog discarding changes. Changes made earlier with
the apply button will be used.
Mutually exclusing with closeCancel
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.
Mutually exclusive with Apply<action>
DetailsUsageButton
Marko Nieminen
KDE Example UI
