HELIA 1 (15) Outi Virkki Käyttöliittymät ja ohjelmiston suunnittelu :28

Transkriptio

1 HELIA 1 (15) Luento 3 Käytettävyyden osapuolet... 2 Ihminen tietojenkäsittelijänä... 3 Muistitoiminnot... 4 Työmuisti (lyhytkestoinen muisti )... 4 Säilömuisti (pitkäkestoinen muisti)... 4 Sensoriset muistit... 4 Havaitseminen... 6 Hahmot ja hahmontunnistus... 6 Väreistä... 8 Oppiminen... 9 Tarpeet Vireystila Fysiologia Visuaalisesta suunnittelusta Microsoft: Sommittelusta Väreistä... 15

2 HELIA 2 (15) Käytettävyyden osapuolet Ihminen Työprosessit Työkalut Mitä ollaan tekemässä ja kenelle?

3 HELIA 3 (15) Ihminen tietojenkäsittelijänä 1. Muistitoiminnot 2. Havaitseminen 3. Oppiminen 4. Tarpeet 5. Vireystila 6. Fysiologia

4 HELIA 4 (15) Muistitoiminnot Työmuisti (lyhytkestoinen muisti ) Tietoa käsittelevä muisti Kapasiteetti vain yksikköä (4) Yksiköt voivat olla rakenteellisia esim. Hierarkisia; mahdollistaa suurten kokonaisuuksien ajattelun Sisältö katoaa n. 20 sekunnissa ellei sisältöä kerrata Säilömuisti (pitkäkestoinen muisti) Muistivarasto Kapasiteetti rajaton Saantimenetelmä assosiatiivinen muistiin painamista tai muistista palauttamista ei voi pakottaa Keskeinen oppimisessa tapahtumamuisti, tietomuisti, taitomuisti, tunnemuisti Sensoriset muistit Tallentavat aistien vastaanottaman tiedon Toimivat tietoisuuden ulottumattomissa Suuri kapasiteetti Erittäin lyhytkestoisia Passiivinen rooli Å Niukasti elementtejä! Muista rajallinen työmuisti Å Jäsennys / Rakenteet! Luo yksityiskohdista suurempia, jäsenneltyjä / rakenteellisia kokonaisuuksia! Å Yhdenmukaisuus! Toiston positiivinen vaikutus muistamiseen

5 HELIA 5 (15) Säilö- Työ Sensoriset Aisti- Muisti muisti muistit elimet Muista minen Ajatus! Havaitseminen Aistiminen Motorinen ohjaus Liikkeet hermosto lihakset

6 HELIA 6 (15) Havaitseminen Aistit vastaanottavat ja välittävät valtavan määrä informaatiota jatkuvasti kaiken käsittely mahdotonta! Å Valikoivuus Ä Etsiminen (aktiivinen) Ä Odotus (passiivinen) Hahmot ja hahmontunnistus Hahmolait: 1. Läheisyyden 2. Samankaltaisuuden 3. Sulkeutuneisuuden 4. Jatkuvuuden 5. Valiomuotoisuuden Å Käytä hahmolakeja hyväksesi näytön elementtien jäsentämisessä / sommittelussa

7 HELIA 7 (15) Huomioarvo Suuri huomioarvo Liike Kuva Kirkas väri Lämmin väri Tumma Iso Lähellä Tehosteena väri Erikoinen / poikkeava Pieni huomioarvo Paikallaan oleva Teksti Murrettu väri Viileä väri Vaalea Pieni Kaukana Tehosteena muoto Tavallinen

8 HELIA 8 (15) Väreistä Erottuvuus Perusvärit: punainen, (kellan)vihreä ja sininen, erotetaan (huom. puna-viher värisokeat) Sininen ja tummanvihreä sekaantuvat helposti Assosiaatiot Punainen Keltainen Vihreä Sininen vaara, seis kuuma, tuli, impulsiivisuus huomio, varoitus, aktiivinen, uusi, aurinko ok, turvallinen, rauhallinnen, tuore, luonto ok,rauhallinen, vetäytyvä, viileä, vesi Å Käytä värejä harkiten, pidä mielessä niiden assosiaatiot Å Käytä tiettyä väriä samassa merkityksessä kautta koko käyttöliittymän Å Vain muutama väri / näyttö (4) Å Taustaksi pienen huomiarvon väri, mieluiten harmaa tai valkoinen

9 HELIA 9 (15) Oppiminen Oppimisen eteneminen 1. Havaitsemispohjainen toiminta 2. Muistipohjainen toiminta 3. Automatisoitunut toiminta Toisto keskeistä: Positiivinen siirtovaikutus (transferenssi) kerran opttia yritetään soveltaa muissa samankaltaisissa yhteyksissä (menestyksellisesti) Negatiivinen siirtovaikutus Å Jäsennykset / rakenteellisuus Å Yhdenmukaisuus Å Assosiatiivisuus (ikonit?)

10 HELIA 10 (15) Tarpeet Maslown tarvehierarkia 4. Itsensä toteuttamisen tarve 3. Sosiaaliset tarpeet 2. Turvallisuuden tarve 1. Fyysiset tarpeet Esimerkkejä tarpeiden huomioimisesta käyttöliittymien suunnittelussa: Å käyttäjän ei tarvitse pelätä sovelluksen käyttöä Å toimenpoiteistä on oltava peruutusmahdollisuus, jos ei ole, on käyttäjää varoitettava etukäteen Å käyttäjälle ei saa jäädä epävarmuutta siitä, tuliko tehtävä suoritettua vai ei Å käyttäjä ymmärtää virheilmoituksen ja pääsee jatkamaan työtä virhetilanteen jälkeen Å käyttäjä voi tuntea olevansa pätevä sovelluksen käyttäjä Å käyttäjä voi keskittyä varsinaisten työtehtäviensä hoitoon

11 HELIA 11 (15) Vireystila Työsuorituken laatu ja teho ovat sidoksissa henkilön vireystilaan vuorokaudenaika mieliala Å Vaatiiko työtehtävä pitkiä työrupeamia Å Sijoittuuko työaika normaalin vireysrytmin kannalta epäedullisesti (esim. vuorotyö) Å Voiko käyttöliittymä auttaa vireystilan ja keskittymiskyvyn säilyttämisessä?

12 HELIA 12 (15) Fysiologia Ihmisen ruumis ei ole vielä soputunut istumatyöhön Istuma-asento suoraselkäinen Käsi- ja olkavarteen suora kulma työskennellessä Olkavarsi lähellä vartaloa Rannetuki näppäimistölle ja hiirelle Käsinojat yuoliin Näytön yläreuna silmien alapuolella Näppäimistölle vakaa alusta (ei pöydän alle työnnettävä hutera levy!) Käden siirtäminen näppäimistön ja hiiren välillä rasittaa lihaksia / muodostaa staattista jännitystä Å Tarjoa myös jokin muu tapa ohjata sovellusta kuin hiiri Silmien ylirasittumisen ehkäisy Å Välkkymätön näyttö Å Hillitty & harkittu värien käyttö

13 HELIA 13 (15) Visuaalisesta suunnittelusta Microsoft: 1. Tietojen ja toimintojen tärkeysjärjestys 2. Kohdentaminen, keskittyminen 3. Rakenne ja ja Tasapaino 4. Elementtien suhteet 5. Luettavuus ja työn kulku 6. Yhtenäisyys ja integraatio

14 HELIA 14 (15) Sommittelusta Näytön elementtien järjestyksellä ja sijoittelulla on muutakin kuin esteettistä merkitystä: Voi helpottaa tai vaikeuttaa oppimista Voi helpottaa tai vaikeuttaa käyttöä Aika ei kulu turhaan etsimiseen Luodaan turvallisuutta ja luottamusta Tavoitteena tasapainoisuus tasapainoisia ikkunan muotoja 1:1,618 (kultainen leikkaus) 1:1,414 (paperistandardi) neliö Analysoi mikä on kunkin ikkunan sisältö (tiedot ja toiminnallisuus) + yhteydet muihin ikkunoihin 1. Mikä tieto on tärkein käyttäjälle 2. Mitä käyttäjä haluaa tehdän ensimmäiseksi toiseksi, 3. Mitä käyttäjän pitäisi nähdä näytöllä ensimmäiseksi, toiseksi, Ryhmitele tiedot loogisiin ryhmiin (aliluokkiin) eli samaan asiayhteyteen kuuluvat tiedot samaan ryhmään Hahmolait 1. Läheisyyden laki 2. Samankaltaisuuden laki 3. Sulkeutuneisuuden laki 4. Jatkuvuuden laki 5. Valiomuotoisuuden laki

15 HELIA 15 (15) Graafisissa liittymissä kohteita etsitään niiden sijainnin perusteella: Kohteilla samat paikat (odotuspaikka) varsinkin painonapeilla Vasemmalta oikealle, mutta elementtien huomiarvo vaikuttaa Tärkein tieto ylimmäksi Katseen etenemistä voi ohjata sommittelun ja värityksen keinoin Kenttien nimet tasataan vasemmasta reunasta Isot alkukirjaimet Sisentämällä tarvittaessa hierarkiarakenne Otsikot reilusti otsikon näköisiksi ja kokoisiksi Yhtenäinen ja hillitty fonttien käyttö Alaviivaton fontti näytöille, joilla tekstit tyypillisesti lyhyitä Alaviivallinen fontti pitkiin tekstiriveihin, (auttaa pysymään rivillä) Väreistä Harmaa / valkoinen hyvä pohjaväri Kullekin huomiovärille suunnitellaan oma merkityksensä josta pidetään systemaattisesti kiinni Värejä ikkunassa korkeintaan 4 Tyypillinen länsimainen aikuinen pitää väristä seuraavassa järjestyksessä: sininen, punainen, vihreä, violetti, oranssi, keltainen