HELIA 1 (17) Outi Virkki Käyttöliittymät ja ohjelmiston suunnittelu

Transkriptio

1 HELIA 1 (17) Luento 6 Tyyliopas... 2 Käytön tuki... 2 Suunnittelun ja toteutuksen tuki... 3 Ohjeiden hierarkia... 4 Viralliset standardit... 4 Käytännön standardit... 4 Yrityskohtaiset standardit... 4 Tyyliopas... 5 Menetelmäopas... 5 Suunnitteluperiaatteet... 5 Tyylioppaiden hierarkia... 6 Microsoftin tyyliopas... 7 Rakenne... 7 Yhteenveto ohjeista... 8 Hyödyntäminen... 9 Yrityskohtainen tyyliopas Tyylioppaan rakentaminen Tyylioppaan sisältö Johdanto Suunnitteluperiaatteet Yrityksen oma ilme Ikkuna ja sen elementit Vuorovaikutustavat Tietosisältö Palaute Opasteet Ohjekirjat Koulutusmateriaali Standardoidut toimintatavat Hakemisto... 17

2 HELIA 2 (17) Tyyliopas Ohjeisto yhdenmukaisuuden saavuttamiseksi 1. Näytöt 2. Hiiri 3. Näppäimistö Ä Muut oheislaiteet eivät kuulu tyylioppaan piiriin Käytön tuki Perusajatus: oppiminen ja käyttö on sujuvaa, kun toiminta on samankaltaista eri sovelluksissa (postiivinen interferenssi) Ä Sovelluksissa on yhä enemmän toimintoja Ä Toimintojen hyväksikäyttäminen vaatii niiden oppimista Ä Oppimiseen kuluu aikaa (enemmän tai vähemmän) Ä Samankaltaisuus edistää oppimista ja vähentää virheitä Ä Oppiminen tapahtuu yhä useammin sovellusta käyttämällä Hyödyt edellyttävät tiukkaa sitoutumista: poiketa saa vain erityistapauksissa Kerran opitun hyödyntäminen (positiivinen transferenssi) tai murentaminen (negatiivinen transferenssi) Hyöty verrannollinen siihen, kuinka paljon saman tyylioppaan mukaisia sovelluksia käyttäjät käyttävät

3 HELIA 3 (17) Suunnittelun ja toteutuksen tuki Käyttöliittymien suunnittelu ja toteutus sujuvammaksi Aiemmin hyväksihavaitun hyödyntäminen (kaikkien ei tarvitse keksiä pyörää ) Valmis malli -> tehokkaampi työskentely Laadunvalvonnan tuki Yhtenäinen ilme yrityksen sovelluksille: markkinointitekijä Eri valmistajien komponenttien yhteiskäyttö ( ) Ä Gartner Groupin ennuste: 2000-luvun alussa 70% sovellusohjelmiston rakentamisesta on käyttöliittymän suunnittelua ja toteutusta

4 HELIA 4 (17) Ohjeiden hierarkia Viralliset standardit Kansainvälisen tai kansallisen standardointiorganisaation julkisesti saatavilla oleva kuvaus, joka määrittelee millainen laitteen tai ohjelmiston on oltava. ISO (International Organization for Standarization) IEEE (Institute of Electrical and Electronics Engineers) EU (direktiivit) Ä Käyttöliittymiin liittyviä virallisia standardeja on toistaiseksi vähän (ISO-9241) Virallisten standardien tulisi pohjautua alan tutkimustietoon Käytännön standardit Yleisen hyväksynnän saavuttanut periaate, jota pyritään noudattamaan. De facto -standardi Ä Käyttöliittymäympäristöjen käytännön standardit on määritelty käyttöliittymäympäristöjen tyylioppaissa. Yrityskohtaiset standardit (Suurilla) ohjelmistojen tuottajilla ja hankkijoilla on kirjallisesti esitetyt periaatteet Ä Käyttöliittymien osalta yrityskohtaiset standardit voidaan esittää mm. yrityksen tyylioppaassa

5 HELIA 5 (17) Tyyliopas Ohjeisto, jonka tavoitteena on käyttöliittymien yhdenmukaisuus ja hyvä laatu Yksityiskohtaisia ohjeita käyttöliittymän elementeistä ja niiden toiminnallisuudesta Käyttöliittymän look-and-feel (miltä näyttää, miltä tuntuu) Tyyliopas voi olla käyttöympäristö- tai yrityskohtainen Menetelmäopas Ohjeita ja periaatteita siitä, miten tyylioppaan mukainen käyttöliittymä tuotetaan miten navigointi pitää suunnitella miten käytettävyyttä arvioidaan miten käyttäjäpalaute käsitellään Menetelmäopas sisältää menetelmien kuvauksia ja käyttöohjeita Suunnitteluperiaatteet Yleisiä ohjeita siitä, miten hyviä käyttöliittymiä tehdään ja mitä sääntöjä ja toimintatapoja kannattaa noudattaa. Ä Suunnitteluperiaatteet jäävät usein abstraktille tasolle, eivätkä sisällä yksityiskohtaisia keinoja, joilla niiden suosittelema lopputulos voidaan saavuttaa.

6 HELIA 6 (17) Tyylioppaiden hierarkia 1. Käyttöliittymäympäristöjen valmistajien valmiit käyttöliittymäkomponentit: ikkunat, valikot ja kontrollit (ulkoasu ja käyttäytyminen) 2. Käyttöliittymäympäristöjen valmistajien ohjeet käyttöliittymäkomponenttien käytöstä (kättöliittymäympäristökohtainen tyyliopas) 3. Sovelluksen toteuttavan / ostavan yrityksen täydentävät ohjeet (yrityskohtainen tyyliopas) 4. Sovelluksen toteutusprojektin sovelluskohtainen täydentävä tyyliopas (sovelluskohtainen tyyliopas) Käyttöliittymäympäristöjen tyylioppaita Apple Macintosh 1984 NeXTStep tyyliopas 1988 AT&T ja SUN: Open Look 1989 IBM SAA/CUA 1991 Open Software Foundation: Motif > Microsoft Windows 3.x 1993 Microsoft Windows 95 & NT 1995 Ä Web-sektori?!

7 HELIA 7 (17) Microsoftin tyyliopas Rakenne Perusteet 1. Suunnitteluperiaatteet ja menetelmät 2. Peruskäsitteet 3. Windows-käyttöliittymäympäristö 4. Syöttölaitteet 5. Yleiset vuorovaikutustekniikat Käyttöliittymäkomponentit 6. Ikkunat 7. Menut, kontrollit, työkalurivit 8. Toissijaiset ikkunat Suunnittelumääritykset ja -ohjeet 1. Ikkunoiden hallinta 2. Integrointi käyttöliittymäympäristöön 3. Työskentely OLE-objektien kanssa 4. Käyttäjän avustaminen 5. Visuaalinen suunnittelu 6. Erityistä Liitteet a) Hiiri, yhteenveto b) Näppäimistö, yhteenveto c) Ohjeiden yhteenveto d) Versioyhteensopivuudesta e) Kansainvälinen sanasto Sanasto Hakemisto Kirjallisuutta

8 HELIA 8 (17) Yhteenveto ohjeista Suunnitteluperiaatteet Suunnitteluprosessi Syöttö ja vuorovaikutus Ikkunat Kontrollien käyttö Integrointi käyttöliittymäympäristöön Käyttäjän tukeminen Visuaalinen suunnittelu Äänet Aistivajavuudet Kansallistaminen ja kansainvälistäminen Verkkokäyttö Å Tyyliopasmalli?

9 HELIA 9 (17) Hyödyntäminen Tyyliopas on työkalu! Osan asioista tulisi muuttua toiminnallisiksi valmiuksiksi, windows-ohjelmointiosaamiseksi Osaa käytetään tarvittaessa; hakuteos Osa toimii vaikutteena, Tyylioppaan kirjaimellinen noudattaminen ei takaa käytettävyyttä Käytettävyyden arviointi / testaaminen osana suunnitteluprosessia on suositeltavaa vaikka tyyliopasta käytettäisiinkin Tyylioppaan suosituksista on hyvä olla tietoinen Käyttöliittymäratkaisut suhteessa tyylioppaaseen ja ko. käyttöliittymäympäristön kulttuuriin Kunnioita valmiiden komponenttien ulkonäköä ja toiminnallisuutta! Å Älä muuta komponentin toiminnallisuutta siitä, mihin käyttäjä on tottunut muissa sovelluksissa Å Älä tuo komponenttiin uutta toiminnallisuutta (se ei ole käytössä muissa sovelluksissa ja hämmentää käyttäjää) Käyttöliittymäympäristöjen tyylioppaiden ohjeet ovat melko väljiä Å Tarvetta tarkemmalle ohjeistolle

10 HELIA 10 (17) Yrityskohtainen tyyliopas Käyttöliittymäympäristön tyyliopasta yksityiskohtaisemmat ohjeet yhdenmukaisuuden luomiseksi Tyyliopas rakennetaan sen käyttöympäristön hengessä, jossa sovelluksia käytetään Ä Käyttöliittymäympäristön tyyliopas Ä Yrityksen merkkipohjainen standardi / tyyliopas? (tiedon syöttö, tarkastus, esitysmuoto, ) Ä Sovelluskehittimen tyyliopas? (sovelluskehitin saattaa usein rajoittaa käyttöliittymän suunnittelua ) Tiukka asenne: poiketa saa vain erityistapauksissa

11 HELIA 11 (17) Tyylioppaan rakentaminen a) Kerralla projektina b) Iteroiden 1. Nimitetään sopiva henkilö käyttöliittymäohjeen vastuuhenkilöksi, jonka tehtävänä on hankkeen eteneenpäin vieminen ja myöhemmin tyylioppaan soveltamisen tukeminen ja sen käyttöön sitouttaminen 2. Tehdään graafisen käyttöliittymän ensimmäiset prototyypit, kirjataan tehdyt suunnittelupäätökset perusteluineen 3. Ensimmäisen projektin valmistuttua kirjoitetaan tyylioppaan 1. versio projektina. Lähtötiedoiksi käyttöliittymäympäristön tyyliopas lista tehdyistä suunnitteluoäätöksistä talon merkkipohjanen standardi sovelluskehittimen tyyliopas? 4. Tyyliopas hyväksytetään käyttäjillä ja suunnittelijoilla, tyylioppaan yhdenmukaisuus käyttöympäristön tyylioppaan kanssa tarkistetaan. 5. Vastuuhenkilö opastaa uusien sovellusten käyttöliittymien suunnittelussa ja toteuttamisessa 6. Käyttöliittymille tehdään laatukatselmus tyylioppaan pohjalta. Poikkeamista neuvotellaan ja ne ratkaistaan tapauskohtaisesti. 7. Kehitä tyyliopasta vähitellen. Tyyliopas saa tarkentua sovelluksen toteuttamisen aikana. Joskus voi olla tarpeen tehdä oppaaseen isompikin remontti Uusia asioita kokeilllaan prototyypein ja testataan käytettävyystestein

12 HELIA 12 (17) Sovellettavuus! Tyyliopas kannattaa varustaa esimerkein Tyylioppaan pohjalta kannattaa tehdä valmiita sovellusaihioita / - komponentteja (näyttöjä, valikoita, työkalurivejä, ) Kehittyvä työkalu Tyyliopas ei saa jähmettyä Pidettävä ajantasalla ja uskallettava muuttaa Merkitys jää kuitenkin vähäiseksi, jos ohjeita alinomaan muutetaan Å Tyylioppaan kehitystyö tulisi siis olla tarkkaan harkittua ja perustua kokemukselle, näkemyksille ja tutkitulle tiedolle käyttöliittymistä ja ihmisistä. Kehittämistyöhön ryhtyminen Kun yritys alkaa tuottaa ja hankkia graafisia käyttöliittymiä (web-pohjaisia käyttöliittymiä ) Kokemusta ja näkemystä hankittava, ennenkuin ruvetaan kirjaamaan sitovia ohjeita! Vertaile muita ohjelmistoja, niistä kannattaa ottaa vaikutteita (hyvät & huonot ratkaisut) Jos olet epävarma, ohjeista aluksi liian vähän kuin liikaa ohjeiden lisääminen on helpompaa kuin niiden muuttaminen Perustele ratkaisut (so. kirjoita perustelut mukaan ohjeisiin), se lisää uskottavuutta ja auktoriteettia

13 HELIA 13 (17) Tyylioppaan sisältö By Kuitunen 1996: 1. Johdanto 2. Inhimillisten tekijöiden esittely 3. Kontrolliluettelo 4. Opastus kontrollien käyttötilanteesta ja tavoista 5. Opastus kontrollien yhdistämisestä 6. Keskeisten näppäintoimintojen luettelo 7. Suosituksia suunnitteluvaiheen toteuttamisesta 8. Käsiteluettelo 9. Hakemisto Sinkkonen 1995: 1. Johdanto 2. Suunnitteluperiaatteet 3. Yrityksen oma ilme 4. Ikkuna ja sen elementit 5. Vuorovaikutustavat 6. Tietosisältö 7. Palaute 8. Opasteet 9. Ohjekirjat 10. Koulutusmateriaali 11. Standardoidut toimintatavat 12. Hakemisto 1.

14 HELIA 14 (17) 1. Johdanto Tarkoitus ja käyttö Kuinka opasta käytetään (eri käyttäjät: suunnittelijat, toteuttajat, kouluttajat, ) Tyylioppaan vastuuhenkilö ja jatkokehittäminen 2. Suunnitteluperiaatteet Mitä periaatteita, mitä ne käytännössä tarkoittavat 3. Yrityksen oma ilme 4. Ikkuna ja sen elementit Ikkunat, eri ikkunatyyppien käyttö, ikkunointitapa Ikkunoiden otsikot, mitä tietoa, otsikkohierarkia Ikkunan perusrakenne, pohjakaava, tilankäyttö, marginaalit Ryhmittely, kehykset, paneelit Eri tietoelementit ja niiden ulkonäkö, sijoittelu Painikkeet, ulkonäkö, sijoittelu, järjestys Värit, väreillä ilmaistavat asiat Kuvat, grafiikka Kirjasimet ja niiden käyttö, tekstielementtien käyttö Korostaminen, pysyvä / tilapäinen Malleja & Esimerkkejä!

15 HELIA 15 (17) 5. Vuorovaikutustavat Valikot, niiden tyypit ja vakiojärjestys Eri tyyppiset painikkeet Kuvakkeet, vakiokuvakkeet Toimintojen näppäinlyhenteet, toimintonäppäimet Siirtyminen ikkunoiden välillä Paluut, keskeytykset, peruutukset Oikopolut 6. Tietosisältö Syöttötavat, esitysmuodot, tarkistukset, suojaukset Erikoiskentät Koodistot Lyhenteet Vakiomerkityksiset termit Tietojen vakiopaikat 7. Palaute Pautteet toiminnoista Virheilmoitukset Huomautukset Muut viestit Käyttäjän huomion kiinnittäminen

16 HELIA 16 (17) 8. Opasteet 9. Ohjekirjat 10. Koulutusmateriaali 11. Standardoidut toimintatavat 12. Hakemisto