T-121.2100 Johdatus käyttäjäkeskeiseen tuotekehitykseen Käyttöliittymän mallintaminen ja rakentaminen Teknillinen korkeakoulu Käyttöliittymät ja käytettävyys Marko.Nieminen@tkk.fi Tällä luennolla Käyttöliittymän rakentamista tukevat mallit Tapahtumaohjatut käyttöliittymäympäristöt ja kehitysvälineet Käyttöliittymän suunnittelua tukevat tyylioppaat 1
Käyttöliittymäsuunnittelun konteksti T-121.5300 http://www.acm.org/sigchi/cdg/figure_1.gif ACM SIGCHI Curricula for Human-Computer Interaction Onko käyttöliittymän rakentaminen vaikeaa? 2
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) 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. 3
Käyttöliittymän rakentamisen mallit (Constantine & Lockwood 2000) 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) 4
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! 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) Vaiheet: liittyvät sekä olioihin että operaatioihin Kuvataan järjestelmä sopivalla tarkkuudella vapaamuotoisesti, mutta kirjallisesti objektit=substantiivit; ominaisuudet=adjektiivit; operaatiot=verbit; operaatioiden ominaisuudet=adverbit 5
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 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. 6
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 Use case-diagrammi esimerkki ensisijaiset toimijat vasemmalla, toissijaiset toimijat oikealla tasot vasemmalta oikealle vain tavallinen käyttö, toimintahäiriöt muissa diagrammeissa use case diagrammi: tasot ja toimijat (Alexander, 2001) Mikael Marko Johnson Nieminen 7
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 Valikkokartta ~ Navigaatiokartta Shneiderman 1998: Designing the User Interface 8
Valikkokartan kuvaus Shneiderman 1998: Designing the User Interface Käyttöliittymien toteuttaminen 9
Tapahtumaohjattu vuorovaikutus (Events) Käyttöliittymän elementtien tilassa tapahtuvat muutokset laitetaan käyttöliittymäympäristössä tapahtumajonoon Tapahtuma julkistetaan kaikille käyttöliittymäympäristössä oleville ohjelmille Tapahtumasta kiinnostuneet ohjelmat käsittelevät sen omien sääntöjensä mukaisesti Tyypillinen vuorovaikutustekniikka graafisissa käyttöliittymäympäristöissä Esim. tapahtuma, kun painiketta painetaan Käyttöliittymäympäristön tapahtuma event procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage('Button #1 was pressed!'); end; event 10
Olio-ohjelmointi käyttöliittymässä (Lewis & Rieman 1993) Objektit, oliot (object) koodiblokkeja, eivät välttämättä näytöllä näkyviä Luokat, instanssit (class, instance) Aliluokat perivät käyttäytymisensä ja piirteensä (subclass, inheritance, behavior, characteristics) Objektit kommunikoivat viesteillä (messages) Käsittelijät (handlers) vastaanottavat viestit ja suorittavat toimenpiteet Resurssit: tekstitiedostoja tai erityisiä.res-tiedostoja Objektit, luokat Yleensä voi käyttää varsin pitkälle valmiita luokkia Java AWT, VC++ MFC, Borland VCL käyttöliittymässä näkyvät elementit ovat objekteja, luokkia TMainMenu TLabel TButton TPanel TPopUpMenu TEdit 11
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 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 Width = 61 Height = 13 Caption = 'Hello, World!' end object Button1: TButton Left = 48 Top = 32 Width = 75 Height = 25 Caption = 'OK' TabOrder = 0 end 12
Esimerkki UIDE-kehitysympäristöstä (Borland Delphi) Suunnitteluohjeistot käyttöliittymien toteuttamisen tukena 13
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? 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. 14
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 Tyylioppaan asioita http://www.construx.com/survivalguide/uistyleguide.htm Käyttöliittymäympäristö MS Windows, Apple, GNOME, KDE, Motif, Palm, S40,...? Ikkunointi Dialogit Valikot MDI, SDI, värit, koot,...? dialogien välinen vuorovaikutteisuus/ siirtymät, toiminnallisuus, ulkoasu 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 15
Example: KDE UI Guidelines, Basics http://developer.kde.org/documentation/standards/kde/style/basics/windows.html Windows Labels Settings Systray SDI: No MDI, just SDI & Pure SDI, co-operating SDI & controlled SDI Capitalization: Book Title / Sentence style, use of colons: options, document options, configuration, session management for non-document specific apps, single click (open)/ right click (quit/options) 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 16
KDE Example UI 17