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



Samankaltaiset tiedostot
IHTE-2100 KaSuper Luento 2: värit, kuvakkeet

KÄYTTÖLIITTYMÄT. Visuaalinen suunnittelu

Lähtökohdat puheenvuorolle

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

Rullaverhot KUVIOLLISET KANKAAT

LUENTO 3. Toiminnan kehä

VERKOSTO GRAAFINEN OHJE

Akavan. graafinen ohjeistus

Graafinen ohjeistus 03/2016

LOGO 2. LOGO. Autokeskuksen yritystunnus on Autokeskus-logo.

Käyttöliittymän suunnitteluohje, käytettävyyden psykologia. Laskari 6

Skype for Business pikaohje

Sami Hirvonen. Ulkoasut Media Works sivustolle

HELIA 1 (14) Outi Virkki Käyttöliittymät ja ohjlmiston suunnittelu

ARVO - verkkomateriaalien arviointiin

LUOVA ETELÄ-KARJALA LOGO

G R A A. Kaarinan Pojat ry:n graafinen ohjeistus

Suupohjan koulutuskuntayhtymä. Graafinen ohjeisto

Suomi Finland 100 -tunnus. Graafinen ohjeisto Lokakuu 2015

Psyykkinen toimintakyky

Tuotteen oppiminen. Käytettävyyden psykologia syksy T syksy 2004

ETNIMU-projektin, aivoterveyttä edistävän kurssin 5.osa. Aistit.

AMMATTIOSASTOJEN ILMEEN LANSEERAUS

Tunnus. 10 mm. Tunnuksen minimikorkeus on 10 mm.

BAKASANA ELI KURKIASENTO ON YKSI TUNNETUIMMISTA SELÄN KIERTO, SAADAAN VÄHEMMÄN TUNNETTU PARSVA (SIVU) HALLINNAN JA SYVIEN VATSALIHASTEN TYÖSKENTELYN

Kun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti:

Graafinen ohjeisto 1

1. ALKUSANAT TUNNUS VÄRIT MERKKI JA LOGOTYYPPI SUOJA-ALUE TUNNUKSEN KÄYTTÖ MONIVÄRI...

Ikäihmisen toimiva asuminen. Tarja Marjomaa TTS Työtehoseura

Havaitseminen ja tuote. Käytettävyyden psykologia syksy 2004

Kuvasommittelun lähtökohta

G r a a f i n e n o h j e i s t o

TIETOKONEEN ASETUKSILLA PARANNAT KÄYTETTÄVYYTTÄ

PIKAOHJEET WILMAN KÄYTÖSTÄ - HUOLTAJA

Avaa ohjelma ja tarvittaessa Tiedosto -> Uusi kilpailutiedosto

Kestävä aivotyö aivotyön tuottavuus

Näkemyksiä ja kokemuksia käyttäjälähtöisestä suunnittelusta Hannu Paunonen Metso Automation Oy

Ohjeita informaation saavutettavuuteen

Mitä on taitovalmennus?

S Ihminen ja tietoliikennetekniikka, syksy 2005

Kauneimmat Joululaulut: Visuaalisen ilmeen ohjeisto

MAASEUDUN SIVISTYSLIITON GRAAFINEN OHJEISTO 1.1. Maaseudun Sivistysliiton graafinen ohjeisto 1.1

ohjeistus retkikerho

Hyvinvointia koulupäivään toiminnallisista menetelmistä

SISÄLLYS. Tunnus 3 Värit 5 Typografia 6 Visuaalinen elementti 7 Ilmesovellukset 8 Kuvien käyttö 11. Uusimaa hanke Graafinen ohjeistus

Tarkkaavaisuus ja muisti

Graafinen ohjeisto* KESKENERÄINEN PIRAATTIPUOLUE. Visuaalisen suunnittelun ja viestinnän ohjeita Piraattipuolueen sisäiseen ja ulkoiseen viestintään

Graafinen ohjeisto. Päivitetty tammikuussa 2015

Elektroniikan kaavoja 1 Elektroniikan Perusteet I1 I2 VAIHTOVIRROILLA. Z = R + j * X Z = R*R + X*X

Erityislapset partiossa

Verkkosivuston hallinnan ohjeet. atflow Oy AtFlow Oy, +358 (0)

VÄRIT WWW-VISUALISOINTI - IIM VÄRIT

Goalkeeper Game Statistics (v12) käyttöohjeet

Digitalisaatio tehostaa opetusta! RIVERIA.FI

Ohjeissa pyydetään toisinaan katsomaan koodia esimerkkiprojekteista (esim. Liikkuva_Tausta1). Saat esimerkkiprojektit opettajalta.

Graafinen ohjeisto 08/2019

Transkribuksen pikaopas

6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.)

Omapalvelu. Omapalvelu - ohje Päivityspaketti 1/ Tieto Corporation

AITO VERKKO 6kW ja 9kW ASENNUS- JA KÄYTTÖOHJE

3. Vasemman reunan resurssiselaimen Omiin resursseihin luodaan uusi Handmade -niminen kansio.

C494 Liitin johdinsarjalle ohjaamosta runkoon C494

Opetusmateriaalin visuaalinen suunnittelu. Kirsi Nousiainen

Prososiaalisen käyttäymisen vahvistaminen leikissä VKK-Metro

TIMMI SELAAJA-ASIAKKAAN PIKAOHJE. Pirkkalan kunnan varattavien tilojen tilavarausten tarkastelu

Tunnus. 1. Suomen Ammattiliittojen Keskusjärjestön SAK:n tunnus perusmuodossaan

Fysioterapeutin ohjeita olkapääpotilaalle

GRAAFINEN OHJEISTUS LOGOT NENÄPÄIVÄ GRAAFINEN OHJEISTUS 2014 NENÄPÄIVÄ

Graafinen ohjeisto. Päivitetty Suomen Vapaa-ajankalastajien Keskusjärjestö GRAAFINEN OHJEISTO 1

AIVOT JA INFORMAATIOÄHKY

Kuva xhtml-sivulla. Mirja Jaakkola

Visma Fivaldi -käsikirja Asiakaskohtaiset hinnat

Taidon oppimisprosessi Sirpa Rintala


Suurennus ja näyntönhalli ntaohjelma helpottamaan silmien rasitusta. Pikaopas

Octo käyttöohje 1. Sisältö

HELSINKI UNIERSITY OF TECHNOLOGY T Käyttöliittymäpsykologia VISUAALISEN HAVAINNOINNIN HUOMIOIMINEN KÄYTTÖLIITTYMÄSUUNNITTELUSSA

Ulkoasu viestin välineenä

TIEDEPOSTERI. - Viestinnän välineenä. Marisa Rakennuskoski

STS Uuden Tapahtuma-dokumentin teko

Käyttöliittymän muokkaus

Tilkkuilijan värit. Saana Karlsson

Oiva Akatemia Graafinen ohje 2008

Helatag Matriisikirjoitinetiketit

1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE VÄRILLINEN LOGO LOGO VÄRILLISELLÄ POHJALLA MUSTA LOGO 7 1.

Digi-TV:n käytettöliittymät

Kaksinkäsin.fi - ohjeet varaamiseen

Kompassi Suoritusten tarkistaminen ja tulosten julkaisu

PREMIUM TÄYDELLISIÄ SÄILYTYSRATKAISUJA. SUOMEKSI.

Kognitiivinen psykologia tutkii tiedonkäsittelyä. Neuropsykologia tutkii aivojen ja mielen suhdetta MITEN AIVOT TOIMIVAT?

1. Selkokielisen verkkopalvelun graafinen ja looginen rakenne

GRAAFINEN OHJEISTUS 2017

Voiko muistisairauksia ennaltaehkäistä?

Graafinen ohjeisto 1.0

Äänellä vauhtia robottiin

Ajokorttimoduuli Moduuli 2. - Laitteenkäyttö ja tiedonhallinta. Harjoitus 1

Siirtyminen Outlook versioon

Sisällysluettelo. Logon suoja-alue...2. Logot...3. Värit...5. Typografia...6. Julisteet...8. Kisapassi...9. Paidat Käsiohjelma & Web layout...

Nspire CAS - koulutus Ohjelmiston käytön alkeet Pekka Vienonen

Yllätys Rasti Palttala UUTINEN Tehtävä 16 Aika- ja taitotehtävä Maksimipisteet 3

Transkriptio:

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... 10 Vireystila... 11 Fysiologia... 12 Visuaalisesta suunnittelusta... 13 Microsoft:... 13 Sommittelusta... 14 Väreistä... 15

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

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

HELIA 4 (15) Muistitoiminnot Työmuisti (lyhytkestoinen muisti ) Tietoa käsittelevä muisti Kapasiteetti vain 5 +- 2 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

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

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

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

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

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

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

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

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ö

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

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

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