Käyttöliittymän mallintaminen ja rakentaminen

Transkriptio

1 T Johdatus käyttäjäkeskeiseen tuotekehitykseen Käyttöliittymän mallintaminen ja rakentaminen Teknillinen korkeakoulu Käyttöliittymät ja käytettävyys

2 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

3 Käyttöliittymäsuunnittelun konteksti T ACM SIGCHI Curricula for Human-Computer Interaction

4 Onko käyttöliittymän rakentaminen vaikeaa?

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 (SIGCHI 92)

6 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ä ja paljon muutakin [Myers 1997] The best user interface is one the user doesn't notice.

7 Käyttöliittymän rakentamisen mallit (Constantine & Lockwood 2000)

8 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)

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!

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) Vaiheet: liittyvät sekä olioihin että operaatioihin Kuvataan järjestelmä sopivalla tarkkuudella vapaamuotoisesti, mutta kirjallisesti objektit=substantiivit; ominaisuudet=adjektiivit; operaatiot=verbit; operaatioiden ominaisuudet=adverbit

11 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

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.

13 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

14 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 Johnson

15 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

16 Valikkokartta ~ Navigaatiokartta Shneiderman 1998: Designing the User Interface

17 Valikkokartan kuvaus Shneiderman 1998: Designing the User Interface

18 Käyttöliittymien toteuttaminen

19 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

20 Käyttöliittymäympäristön tapahtuma event procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage('Button #1 was pressed!'); end; event

21 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

22 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

23 Käyttöliittymäkehitysympäristöt Käyttöliittymäkehitysympäristöjen tarve tunnistettiin luvun alussa Seeheim-arkkitehtuurimalli (1984) tarjosi puitteet käyttöliittymäkehitysympäristöjen toteuttamiselle 1990-luvun alussa kehitysympäristöjä alkoi tulla markkinoille tutkimuspuolella mm. Garnet (Myers 1992), josta on sittemmin kehittynyt Amulet

24 Taustaa Käyttöliittymän toteuttaminen graafisiin käyttöliittymiin vaati aiemmin paljon työtä esim: Hello, World! -- Toteutus kompleksista graafiseen käyttöliittymäympäristöön; hallittava monenlaiset matalan tason asiat: ikkunointi, viestinvälitys, resurssit jne. Taitavat ohjelmoijat tuottavat käyttöliittymät yleiskäyttöisillä ohjelmointikielillä, esim C/C++; tämä suuntaus on kuitenkin vähenemässä erityisten käyttöliittymäkehitysympäristöjen kehittyessä

25 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

26 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

27 Esimerkki UIDE-kehitysympäristöstä (Borland Delphi)

28 Suunnitteluohjeistot käyttöliittymien toteuttamisen tukena

29 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?

30 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.

31 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

32 Tyylioppaan asioita 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

33 Example: KDE UI Guidelines, Basics 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)

34 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

35 KDE Example UI