Luku 6 – Käyttöliittymäsuunnittelu tarkemmin

Sisältö ❷❸• Millainen on hyvän Windows 8 -sovelluksen

käyttöliittymä?• Windows 8 -sovellusten suunnitteluun vaikuttavia

asioita• Ruudukko-järjestelmä ja pikselit• Valmiit käyttöliittymäkomponentit• Tehtäviä• Kysymyksiä ja vastauksia

Millainen on hyvä käyttöliittymä?• Hyvä käyttöliittymä koostuu monesta

yksityiskohdasta, tärkeää on olla huolellinen• Tärkeimmän asian voi tiivistää yhteen

lauseeseen: hyvän käyttöliittymän omaksuu vaivatta

• Windows 8 -sovellukset noudattavat pelkistettyä linjaa sekä käyttöliittymissä että sisällössä

Esimerkki käyttöliittymästä

Windows 8 User Experience Guidelines -dokumentti

• Microsoft on koonnut Windows 8 -sovellusten käyttöliittymäohjeistuksen n. 300-sivuiseen kirjaan nimeltä ” Windows 8 User Experience Guidelines”

• Suomeksi puhutaan käyttökokemusohjeista• Ohjeet on tarkoitettu ensisijaisesti tavallisille XAML-

sovelluksille eli hyötyohjelmille– Kuitenkin ne osuudet ohjeista jotka käsittelevät sovellusten

käytettävyyttä (engl. usability) ovat tärkeitä myös peleissä

Suunnitteluun vaikuttavia asioita• Jotta voisit suunnitella hyviä ja toimivia

Windows 8 -sovelluksia, sinun täytyy tuntea muutamia keskeisiä käyttöliittymien suunnitteluun liittyviä asioita

• Seuraavassa on käsitelty esimerkiksi näyttötarkkuuksiin, asetteluihin, käyttöliittymäkontrolleihin ja animaatioihin liittyviä asioita

Ruudukko-järjestelmä• Windows 8 -sovelluksia voidaan ajaa monenlaisissa erilaisissa

laitteissa aina perinteisistä pc-koneista pieniin tabletteihin• Ruudulla näkyvin pienin elementti on pikseli (engl. pixel),

mutta käyttöliittymien suunnittelua varten tämä on liian pieni yksikkö

• Windows 8 -sovellusten yhteydessä käytetään ruudukko-järjestelmää (engl. grid system), jossa laitteen ruutu jaetaan yksiköihin (engl. unit) ja edelleen aliyksiköihin (engl. sub-unit)

Windows 8 -ruudukko

Ruutujen koot• Yksikkö (unit)– Koko on 20 × 20 pikseliä

• Aliyksikkö (sub-unit)– Koko on 5 × 5 pikseliä– Yhteen yksikköön mahtuu 4 × 4 = 16 aliyksikköä

• Pikseli (pixel)– Ruudun fyysinen pikseli, jonka koko riippuu

merkittävästi käytetystä laitteesta

Windows 8 -näyttötarkkuudet• Pienin näyttötarkkuus, jota Windows 8 -sovellukset tukevat on

1366 × 768 pikseliä– Tällaiseen ruutuun mahtuu n. 63 × 38 yksikköä

• Suurimmillaan tarkkuudet ovat tällä hetkellä jo 4K-tasoisia– Tällaisen näytön tarkkuus on tyypillisesti 3840 × 2160 pikseliä, eli ruudulle

mahtuu neljä Full HD -videoita yhtä aikaa• Tyypillinen tarkkuus Windows 8 -laitteissa on täys-HD-tarkkuus, eli

1920 × 1080 pikseliä• Tunne myös käsite dpi

– Englanninkielisistä sanoista dots per inch, pistettä tuumalla– Mitä suurempi dpi-arvo, sitä tarkemmalta kuva näyttää

Ruudun tilankäyttö ja dpi-arvot• Kehittäjänä voit valita, haluatko näyttää suurempien

tarkkuuksien näytöillä1. Enemmän tietoa (vaikkapa uutisotsikoita), vai 2. Haluatko pitää ruudulla näkyvien elementtien määrän samana,

mutta kasvattaa ruudulla näkyvien elementtien kokoa• Windows 8 mahdollistaa myös grafiikan automaattisen

valinnan sen mukaan, millainen on näytön dpi-arvo– Näin tarkemmilla näytöillä voidaan esittää parempilaatuisia

kuvia ilman muutoksia ohjelmakoodiin

Kosketusohjauksen suunnittelu• Windows 8 -sovellukset tulisi suunnitella siten,

että lähtökohtaisesti niitä käytetään kosketuksella (engl. touch first)

• Kun sovelluksesi toimii hyvin kosketuksella, se on myös automaattisesti käytettävissä muillakin ohjauslaitteilla– Näitä ovat tyypillisesti näppäimistö ja hiiri, joissakin

laitteissa myös kosketusherkkä kynä eli stylus

Tapahtumapohjaisuus• Windows 8 -sovellukset toimivat

tapahtumapohjaisesti (engl. event driven)• Tämä tarkoittaa, että käyttöjärjestelmä ilmoittaa

sovelluksille tapahtumien (engl.events) avulla, kun jotain merkittävää tapahtuu– Tapahtumia ovat esimerkiksi ruudun kosketus,

näppäimen painallus tai laitteen kääntäminen vaaka-asennosta pystyyn

Tapahtumankäsittelijä• Kaikkiin tällaisiin tapahtumiin voidaan kirjoittaa

niin sanottu käsittelijä (engl. event handler)• Käsittelijä suorittaa pätkän ohjelmakoodia sen

mukaan, millaisesta tapahtumasta on kyse• Tapahtumankäsittelijöiden määritys voidaan

tehdä Visual Studion Properties-ikkunan kautta

Tapahtumat Visual StudiossaNapsauta salama-ikonia nähdäksesi valitun komponentin tapahtumat

Komentojen esittäminen ruudulla• Windows 8:n minimalistinen muotoilu tarkoittaa, että

sovelluksissa ei ole näkyvissä mitään komentoja– Koko ruudun tila on pyhitetty varsinaiselle sisällölle

• Komentoja kuitenkin tarvitaan, ja sovelluksesta riippuen tarpeellisia komentoja voi olla kymmenittäin

• Komentojen esittämistä varten Windows 8 -käyttöjärjestelmä tarjoaa useita vaihtoehtoja– Keskeisin tapa esittää komentoja on sovelluspalkki (engl.

application bar)

Sovelluspalkki

Sovelluspalkin toiminallisuus• Sovelluspalkit ovat vaakasuuntaisia alueita, jotka käyttäjä voi

tuoda näkyviin pyyhkäisemällä ruudun reunaa– Palkin saa myös näkyviin napsauttamalla hiiren oikealla painikkeella

sovelluksen päällä, tai näppäinyhdistelmällä Win+Z• Kehittäjänä voit sijoittaa sovelluspalkin ruudun ylä- tai

alareunaan– Alareuna on tyypillisempi valinta, ja sinne tulisi sijoittaa yleisimmät

sovelluksen tarjoamat komennot– Sovelluspalkin komennot sijoitetaan joko vasempaan tai oikeaan

reunaan, muttei keskelle kosketuskäyttöä helpottamaan (kahden käden ote)

Esimerkki<Page.BottomAppBar> <AppBar x:Name="alapalkki"> <Grid> <StackPanel Grid.Column="1“ HorizontalAlignment="Right“ Orientation="Horizontal"> <AppBarButton HorizontalAlignment="Left“ Label="Päivitä" VerticalAlignment="Top" Icon="Refresh"/> </StackPanel> </Grid> </AppBar></Page.BottomAppBar>

Valmiit käyttöliittymäkomponentit• Windows 8 -sovellusten käytettävissä on noin 40

valmista komponenttia– Kaikki löytyvät Visual Studion Toolbox-ikkunasta

• Yksinkertaisessa sovelluksessa selvitään ehkä n. kymmenellä erilaisella komponentilla– Yleisimpiä komponentteja on listattu seuraavassa

• Muista, että komponentteja voidaan lisätä ruudulle myös sovelluksen suorituksen aikana

Komponentteja 1/2Komponentti Kuva Kuvaus

TextBlock Tämän komponentin avulla voit esittää tekstiä ruudulla haluamallasi fontilla ja koolla. Haluttu teksti määritellään komponentin Text-ominaisuuteen. Usein tällainen komponentti tunnetaan myös nimellä Label.

TextBox TextBox-komponentti antaa käyttäjän syöttää tekstiä. Ohjelmakoodissa voit lukea tekstin helposti komponentin Text-ominaisuuden kautta.

Button Button-komponentin avulla luot painikkeita erilaisiin tilanteisiin. Oletusarvoisesti painikkeet ovat suorakaiteen muotoisia, mutta esimerkiksi sovelluspalkissa painikkeista tehdään pyöreitä. Painikkeita käytetään myös viesti-ikkunoissa (message dialog).

CheckBox Valintaruutu-komponentti tarjoaa käyttäjälle helpon tavan valita kyllä–ei -tyyppisiä valintoja. CheckBox-komponentti on parhaimmillaan kun valintoja on enintään muutamia.

RadioButton RadioButton-komponentti toimii samoin kuin CheckBox-komponentti, mutta yksittäisten, useiden valintojen sijaan käyttäjä valitsee yhden pienestä joukosta valintoja.

Komponentteja 2/2ComboBox ComboBox-komponentti tarjoaa käyttäjälle

mahdollisuuden valita yhden joukosta valintoja. ComboBox-komponentin etuna esimerkiksi RadioButton-komponenttiin nähden on, että se mahtuu pieneen tilaan.

DatePicker Tämän komponentin avulla tarjoat käyttäjälle helpon tavan valita päivämäärän. On parempi käyttää DatePicker-komponenttia päivämäärän kysymiseen, kun tarjota pelkkä TextBox-komponentti päivämäärän syöttämiseen.

TimePicker TimePickerin ajatus on sama kuin DatePicker-komponentilla, mutta päivämäärän sijaan kysytään kellonaikaa.

Slider Slider-komponentti on näppärä tapa antaa käyttäjälle mahdollisuus valita jokin luku halutulta arvoväliltä, kuten vaikkapa prosenttiluku nollasta sataan. Komponentin avulla haluttua lukua voi kuitenkin olla hankalaa valita tarkasti, joten ehdotonta tarkkuutta vaativissa tilanteissa luvun kysyminen numeroina on parempi vaihtoehto.

ToggleSwitch ToggleSwitch-komponentti sopii tilanteisiin, jossa jokin asetus pitää asettaa päälle tai pois. Käyttäjä olettaa, että uusi asetus on voimassa välittömästi, kuten vaikkapa silloin, jos ToggleSwitch-komponentilla voisi kytkeä tabletin WiFi-yhteyden päälle tai pois.

Sovelluksen ruudulta varaama tila• Lähtökohtaisesti jokainen Windows 8 -sovellus

täyttää laitteen koko ruudun– Käyttäjä voi kuitenkin siirtää sovelluksen syrjään niin,

että kaksi tai useampi sovellus voi olla ruudulla yhtä aikaa

• Windows 8.1 -käyttöjärjestelmässä voidaan näyttää rinnakkain enintään neljä sovellusta – Jokaisen sovelluksen leveys on vähintään 320 pikseliä

Esimerkki

Ohjelmakoodissa• Ohjelmakoodissa voit helposti selvittää käytössä

olevan tilan ruudulla• Esimerkiksi näin (leveys; korkeus = Bounds.Height):

int width = (int)Window.Current.Bounds.Width;screenSizeTextBlock.Text = "Current screen width is " + width + " pixels.";

Tehtäviä1. Selvitä, mikä on tällä hetkellä Windows 8 -koneiden

suosituin näyttöresoluutio.2. Pohdi, voidaanko kaikki markkinoiden Windows 8 -

sovellukset toteuttaa Visual Studion mukana tulevilla käyttöliittymäkomponenteilla? Jos ulkopuolisia komponentteja tarvitaan, mistä niitä saa?

3. Tutustu Windows 8 -käyttöliittymäohjeistuksiin ja selvitä, mitä tarkoitetaan käsitteellä adaptiivinen asemointi (engl. adaptive layout).

Kysymyksiä ja vastauksia 1Visual Studio tarjoaa minulle monia erilaisia käyttöliittymäkomponentteja. Mistä tiedän, mitä niistä minun kuuluisi käyttää milloinkin?• Jokainen komponentti on tarkoitettu tiettyyn käyttötarkoitukseen. Esimerkiksi

kyllä–ei -valintoja voidaan esittää ainakin kolmella eri komponentilla, mutta tilanteesta riippuen vain jokin näistä kolmesta komponentista on hyvä valinta.

• Aina valinnan tekeminen ei kuitenkaan ole valintaa oikean ja väärän välillä, vaan pikemminkin hyvän ja paremman. Parhaiten tutustut komponenttien valintaohjeisiin seuraamalla Microsoftin omia suosituksia, esimerkiksi Windows 8 -sovellusten User Experience Guidelines -dokumenttia (ks. kuva 6.2).

• Voit myös tutustua nimekkäisiin, hyviä arvosteluita saaneisiin kauppapaikan sovelluksiin ja katsoa, millaisia komponenttivalintoja niissä on käytetty.

Kysymyksiä ja vastauksia 2Haluaisin testata sovellustani monilla erilaisilla laitteilla, mutta minulla on vain yksi kannettava tietokone. Miten voin kokeilla sovellukseni toimintaa ilman, että ostaisin kaikki erilaisetWindows 8 -laitteet?• Helpoin keino kokeilla sovelluksen toimintaa esimerkiksi erikokoisilla

näyttötarkkuuksilla on käyttää Visual Studion mukana tulevaa simulaattoria.• Simulaattorin avulla voit kokeilla erilaisia näyttötarkkuuksia ja näytön

asentoja (pysty- tai vaaka-asento) esimerkiksi tablet-laitteita ajatellen.• Toisinaan saattaa tarjoutua myös mahdollisuuksia testata sovellustasi aivan

oikeilla laitteilla. Siksi kannattaa seurata Microsoftin tapahtumia Suomessa, sillä silloin tällöin järjestetään erityisiä työpajoja, joissa sovelluksiaan voi testata erilasilla laitteilla.