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. 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. 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
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. 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
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. Oliopohjainen analyysi
Tuotetaan vapaamuotoinen kuvaus ratkaistavasta asiasta
Alleviivataan kaikki substantiivit (=objektit).
Alleviivataan kaikki adjektiivit (=ominaisuudet)
Alleviivataan kaikki verbit (=operaatiot)
Marko Nieminen
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. 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
14. Valikkokartan kuvaus
Shneiderman 1998:
Designing the
User Interface
Marko Nieminen
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. Paper Prototyping Example
http://www.nngroup.com/reports/prototyping/video_stills.html
Marko Nieminen
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. 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. 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. 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
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. 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. 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. 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. Example: KDE UI Guidelines
For the next transparencies, look at
http://developer.kde.org/documentation/standards/kde/style/basics/index.html
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. 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. 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. 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
