WWW-SIVUJEN, SISÄLLÖN JA SIVUSTON SUUNNITTELU

Koko: px
Aloita esitys sivulta:

Download "WWW-SIVUJEN, SISÄLLÖN JA SIVUSTON SUUNNITTELU"

Transkriptio

1 WWW-SIVUJEN, SISÄLLÖN JA SIVUSTON SUUNNITTELU

2 2

3 3 sivuston suunnittelun ja toteutuksen vaiheet 1. Vaatimusmäärittely Verkkopalvelun vaatimusmäärittelyssä kuvataan yksiselitteisesti ja selkeästi verkkopalvelun tulevien käyttäjien ja heidän vaatimustensa näkökulmasta palvelun tavoitteet, kohderyhmät, sisällöt, toiminnallisuus ym. mitkä ovat palvelun tavoitteet, mitä hyötyä siitä on liiketaloudellisesti tms. palvelun käyttäjät, kohderyhmä. Käyttäjien kartoitus, kuvaus miksi verkkopalvelu tehdään, mihin tarkoitukseen mitä ominaisuuksia palvelulla pitää olla, mitä sillä pitää pystyä tekemään esim. varaus, tilaus, ilmoittautuminen tms. nykytilanteen kartoitus: vanhan tuotteen analysointi, kilpailijavertailu

4 4 sivuston suunnittelun ja toteutuksen vaiheet 2. Palvelun suunnittelu Toiminnallisuus: palvelun toiminnallisuudet eli ne asiat mitä lopullisen palvelun tulee sisältää ja miten sen tulee toimia. Sisältöhierarkia: sivukartta raffi Sisältöosioiden kuvaus Käyttöliittymän perusajatus Näyttökuvaukset, rautalankamallit Käsikirjoitus Graafinen suunnitelma eli verkkopalvelun ulkoasu

5 5 sivuston suunnittelun ja toteutuksen vaiheet 3. Palvelun toteutus - sisällön tuotanto - visuaalinen toteutus - koodaus - mediaelementit

6 6 sivuston suunnittelun ja toteutuksen vaiheet 4. Testaus ja käyttöönotto - käyttöympäristö - selaimet - laajennukset - yhteysnopeus - muisti- ja näyttörajoitukset 5. Jälkiseuranta ja ylläpito

7 7 1. KOHDERYHMÄ, SIVUSTON TAVOITTEET Kohderyhmä, käyttäjät Kun aletaan luomaan sivustoa, mietitään kenelle sivusto on suunnattu: millainen on käyttäjien ikä, sukupuoli, koulutus, kulttuuriympäristö ym. - Millaisia käyttäjäryhmiä palvelulla on? Miten ne poikkeavat toisistaan? Mitä yhteistä niillä on? - Mitä tietoa kohderyhmän jäsenet sivustolta hakevat? - Kuinka sivustoa tullaan käyttämään? Mihin tarkoitukseen? - Minkälaiset taidot kohderyhmillä on käyttää ja ymmärtää tietotekniikkaa? - Kuinka nopea Internet-yhteys heillä on?

8 8 Sivuston tarkoitus Sivuston tarkoitus - Miksi sivusto halutaan toteuttaa? - Mitä sivuston toteuttamisella saavutetaan? - Mikä on sivuston rooli koko organisaation viestinnässä? - Onko sivusto organisaation ainut sivusto vai onko kyseessä kampanjasivusto? - Tehdäänkö nyt täysin uusi sivusto vai onko jo olemassa aikaisempi versio?

9 9 Sivuston tavoitteet ja toiminnallisuus Sivuston tavoitteet ja toiminnallisuus - Mitä sivustolla halutaan sanoa? - Minkälainen vaikutus sillä halutaan saada aikaan? - Mitä asiakokonaisuuksia sillä halutaan tuoda esiin? - Mikä on lyhyt ja tärkein perussanoma?

10 10 2. PALVELUN RAKENNE, SIVUKARTTA JA TOIMINNALLISUUS Toiminnallisuus Palvelun toiminnallisuudet eli ne asiat mitä lopullisen palvelun tulee sisältää ja miten sen tulee toimia. Toiminnallisuuden suunnitteluun voidaan käyttää esim. tarinoita. Tarinat paljastavat sellaisia toimintoja, joita käyttöliittymällä tulee saada tehtyä. Toimintatarinoiden avulla kerätään tietoa käyttötilanteesta ja niihin liittyvistä tehtävistä, mahdollisuuksista, rajoitteista ym. Ne kuvaavat jonkun käyttäjän toimintaa käyttöliittymän parissa. Käyttötarinan avulla kerätään tietoa siitä, miten asiat tehdään kyseisen tuotteen avulla. Käyttötarinat tehdään toimintatarinoiden ja kerätyn materiaalin, kuten käyttäjätutkimuksen pohjalta. Käyttö-ja toimintatarinoiden edut ovat siinä, että kun suunnittelija kirjoittaa tiettyä tapahtumaa auki, hän huomaa helposti puutteet käyttöliittymässä. Käyttötarinat kirjoitetaan jonkin tietyn persoonan mukaan ja tämä persoona myös esitellään.

11 11 2. PALVELUN RAKENNE, SIVUKARTTA JA TOIMINNALLISUUS Sivukartta (sitemap) Sisältösuunnittelu ja sivukartta muodostavat verkkopalvelun perustan. Sisältö jaotellaan aiheiden mukaan ja niille muodostetaan otsikot. Aiheet ja niiden otsikot antavat pohjan käyttöliittymäsuunnittelulle. Rakenteen suunnittelussa lähdetään liikkeelle sivuston sisällöstä, jota käyttäjälle halutaan tarjota tai jota käyttäjä sivulta etsii. Rakenne on usein hierarkkinen ja sivuja on eri tasoissa. Sivukartan avulla nähdään helposti, onko sisältö tasapainossa. Liian monitasoinen navigointi aiheuttaa käyttöliittymäsuunnittelun ja visuaalisen suunnittelun vaiheessa usein ongelmia.

12 12 2. PALVELUN RAKENNE, SIVUKARTTA JA TOIMINNALLISUUS

13 13 2. PALVELUN RAKENNE, SIVUKARTTA JA TOIMINNALLISUUS Sivukartan julkaiseminen www-sivulla Kartan tulee antaa lukijalle selvä kuva sivuston rakenteesta siten, että hän halutessaan tietylle sivulle voi klikata karauttaa ja päästä sille suoraan tarvitsematta kahlata sivuston läpi. Pidä kartta ajan tasalla.

14 14 3. RAUTALANKAMALLI Rautalankamallit tehdään, kun verkkosivuston, -palvelun tai järjestelmän toiminnallisuus on suunniteltu ja eri sivujen pääasiallinen sisältö on päätetty. Rautalankamallit ovat yksinkertaisia, visuaalisia esityksiä toiminnoista, sisäisestä rakenteesta sekä informaatiohierarkiasta. Ne voidaan piirtää joko käsin paperille tai käyttää niihin tarkoitettuja ohjelmia. Niidenavulla kuvataan esimerkiksi valikkojen, leipätekstin, kuvien, painikkeiden ja animaatioidenpaikat. Yksi rautalankamallien tärkeimmistä tehtävistä on se, että niiden pohjalta tehtyjen prototyyppien avulla testataan käyttöliittymän toimivuutta. Prototyypit voivat olla käsin piirrettyjä luonnoksia, joita käyttäen käyttäjä suorittaa testin. Testausten ja palautteenjälkeen rautalankoja ja toimintoja parannellaan uusilla suunnittelukierroksilla. Toisin sanoen käyttöliittymää iteroidaan päästen lähemmäs lopputulosta.

15 15 3. RAUTALANKAMALLI

16 16 3. RAUTALANKAMALLI Rautalankamallissa ei oteta kantaa siihen, miltä verkkosivusto näyttää visuaalisesti ja esimerkiksi joidenkin elementtien paikat käyttöliittymässä voivat muuttua visuaalisen suunnittelun yhteydessä. Käyttöliittymäsuunnittelu voidaan yhdistää visuaaliseen suunnitteluun, jos sivuston kokonaisuus on suhteellisen yksinkertainen. Rautalankamalleista on erityisesti hyötyä responsiivisia sivuja suunnitellessa, jolloin jokaisesta näkymästä tulee suunnitella esimerkiksi tässä tapauksessa kolme eri näkymää (läppäri, täppäri ja mobiili). https://github.com/meta-arviointi/metaarviointi/wiki/k%c3%a4ytt%c3%b6liittym%c3%a4n-rautalankamallit

17 17 4. Käsikirjoitus Kirjoitetaan auki jokainen sivu, eli mitä tekstejä, taulukoita, kuvia jne. sivuilla on. Sivujen yhteiset osiot kuten tunnuskuvat/logot, navigoinnit riittää, että kirjoitat vain yhden kerran. Käsikirjoittamisen työvälineet vapaamuotoinen kirjoittaminen taulukkokäsikirjoitusmenetelmä ohessa olevan esimerkin mukaisesti

18 18 Graafinen suunnitelma (ulkoasu) Teema Mikä on sivuston tavoitemielikuva? Mikä on visuaalinen teema? Perustele valintasi. Sivujen sommittelu Mihin sivun eri komponentit tulevat? Typografia Millainen fontti otsikoille, leipätekstille? Millaisia kokoja ja tyylejä käytetään? Värit Minkälainen värimaailma sivustolla on ja miksi? Käytetäänkö värisymboliikkaa? Kuvat Millaisia kuvia käytetään: valokuvia, piirroksia jne? Missä kuvia käytetään: taustalla, kuvituksessa, navigoinnissa jne? Muut elementit: animaatiot, videot

19 19 5. KÄYTETTÄVYYS ISO standardi määrittelee käytettävyyden sen mukaan, kuinka käyttäjä saavuttaa määritellyt tavoitteensa tietyssä ympäristössä". Vaikuttavuus: miten tarkoin ja täydellisesti käyttäjä saavuttaa tavoitteensa. Tehokkuus: tavoitteiden saavuttamista suhteutettuna käytettyihin resursseihin. Tyytyväisyys: käyttäjän tyytyväisyys laitteen tai järjestelmän käyttöön, tyytyväisyyttä vuorovaikutuksen sujuvuuteen ja sen tulokseen. Esimerkiksi astianpesukoneen pakkauksen käytettävyys voi olla hyvä tai huono.

20 20 5. KÄYTETTÄVYYS IT-alalla Jakob Nielsen on laajentanut ISO-määritelmää opittavuuden, muistettavuuden ja virheiden vähyyden kriteereillä: Opittavuus: miten nopeasti ja helposti uusi vuorovaikutteisen laitteen tai järjestelmän käyttäjä oppii laitteen toimintalogiikan ja käyttämisen. Muistettavuus: miten helppoa jo aiemmin laitteen käytön oppineen henkilön on palauttaa mieleen laitteen käyttö ja sen toiminnallisuus. Virheiden määrä (vähyys): käyttäjän suorittamissa toimenpiteissä tapahtuvien virheiden määrää.

21 21 5. KÄYTETTÄVYYS Palvelun, järjestelmän tai verkkosivun käyttökokemukseen vaikuttavat verkkosivun tai järjestelmän hyödyllisyys, helppokäyttöisyys käytön tehokkuus. Mitä helpommalla käyttäjä saavuttaa tavoitteensa, esimerkiksi löytää hakemansa tiedon, sitä käytettävämpi verkkosivu on. Käytettävyyden lisäksi käyttökokemukseen vaikuttaa verkkosivun tai järjestelmän visuaalisuus.

22 22 5. KÄYTETTÄVYYS Huono käytettävyys ajaa käyttäjän pois verkkosivuilta hakemaan etsimäänsä palvelua muualta. Käyttäjä siirtyy helposti pois sivustolta, jos sivustolla on huono tai käyttökelvoton navigaatio käyttäjän etsimä informaatio on epäselvästi aseteltu eikä vastaa nopeasti haettuihin kysymyksiin. Käytettävyydellä KILPAILLAAN kävijöiden suosiosta.

23 23 6. LAYOUT Useimpien verkkosivujen sommittelurakenteet koostuvat ylätunnisteesta (header), alatunnisteesta (footer) sekä navigointi- ja sisältöelementeistä. Ylätunniste sisältää tiedot sivustosta/organisaatiosta sekä hakukentän. Ylätunnisteen alapuolella on tyypillisesti sivuston päänavigointipalkki ja alanavigointipalkki. Paikallinen eli sivukohtainen navigointi sijoitetaan usein vasempaan (tai oikeaan reunaan). Sisältöelementit käsittävät suurimman alueen sivusta ja niitä voidaan jakaa moniin erilaisiin osa-alueisiin. Alatunniste sisältää usein esim. yksityiskohtaiset yhteystiedot, tekijänoikeudet ja palvelun vastuutahot. Verkkopalvelun tyypistä ja laajuudesta riippuen ei ole välttämätöntä käyttää kaikkia elementtejä. Suppeissa sivustoissa paikallinen navigointi on usein tarpeeton.

24 24

25 25 6. LAYOUT Layoutin suunnittelu Verkkosivuja suunniteltaessa kannattaa näkymä suunnitella niin, että sivun molemmille puolille jää tyhjää tilaa. Sivut kannattaa suunnitella esimerkiksi niin, että itse sivu vie näytöstä 80 % ja ympärille jää 10 % tyhjä tila. Sivut kannattaa myös palstoittaa, jotta tekstiriveistä ei tule liian pitkiä.

26 26 6. LAYOUT Layoutin suunnittelu Layoutin linjaus selaimessa a. Layout keskitetään b. Layout linjataan vasempaan reunaan c. Layout venyy selaimen ikkunan koon mukaan mukana Keskitetty layout Visuaalinen layout pystytään kontrolloimaan Tekstipalstoille pystytään määrittämään kohtuullinen leveys Pystytään hallitsemaan koko selaimen alue riippumatta siitä, kuinka leveä selaimen ikkuna on Väripalkit, värialueet, taustakuvat ja osa elementeistä ulottuu reunasta reunaan Mitä tummempi tai voimakkaampi taustaväri, sen hallitumpi kokonaisuus

27 27 6. LAYOUT Layoutin suunnittelu Vasempaan reunaan tasattu layout, Pystytään hallitsemaan tekstipalstat Layout säilyy rikkoutumattomana ja suunnitellun kaltaisena Selaimen levyinen layout Saadaan käytetyksi koko selainikkunan alue Dynaaminen: layout mukautuu selaimen mukaan, jos vain tekstiä Sivun layout ja ulkoasu voivat vaihdella selainikkunan koon muuttuessa

28 28 7. TYÖKALUJA 960 Grid System, taittopohjatyökalu Taittopohja eli grid on hyödyllinen apuväline sommittelussa. 960 Grid System on taittopohja, joka helpottaa verkkosivujen suunnittelua ja asettelua. Se on yksi kaikkien aikojen suosituimmista pohjamalleista internetsivujen suunnittelussa ja toteutuksessa. Pohjan ideana on sivun jakaminen määrätyn levyisiin palkkeihin. Palkkeja apuna käyttäen kootaan sivun rakenteen perusta ja elementit sijoitellaan sivulle.

29 29 7. TYÖKALUJA 960 Grid System, taittopohjatyökalu 960 Grid System pakottaa siihen pohjautuvat sivustot samaan kaavaan ja saattaa näin ohjata sivuston suunnittelua tiettyyn suuntaan ja rajoittaa luovuuden käyttöä suunnitteluprosessissa. Toinen työkalun heikkous on sen staattisuus ja sidonnaisuus 960 pikseliin. Kaikkien sivuelementtien koko on rajoitettu -- kokojen muuttaminen voi helposti rikkoa layoutin. Ei ole helppo työkalu.

30 30 7. TYÖKALUJA

31 31 8. WWW-SIVUN TAITTO Taitolla tarkoitetaan jonkin julkaisun esimerkiksi lehden tai nettisivun. elementtien sommittelua ja tyylittelyä haluttuun muotoon. Hyvän taiton tunnusmerkkejä ovat informatiivisuus, puhuttelevuus, mielenkiintoisuus helppolukuisuus.

32 32 8. WWW-SIVUN TAITTO Web-julkaisun taittomalleja Web-julkaisu suunnitellaan ensisijaisesti näytön ja linkkien sekä käytettävissä olevan sisällön, tekstin ja kuvien pohjalta. Web-julkaisun sivu voidaan jakaa pystysuoriin palstoihin. Tämän lisäksi sivu usein jaetaan myös vaakasuuntaisiin osiin joko ylä- tai alareunasta tai molemmista. Keskelle jäävä tila voidaan lisäksi jakaa kahteen tai kolmeen palstaan.

33 33 8. WWW-SIVUN TAITTO Web-julkaisun taittomalleja Yksinkertainen taittomalli, jossa vain pakolliset lohkot container eli koko sivun kehys, header, navigointi, sisältö. footer

34 34

35 35 8. WWW-SIVUN TAITTO Vasen palsta, jossa linkit sisäsivuille ja osastoille

36 36 8. WWW-SIVUN TAITTO Yläpalkki, jossa nimiö ja/tai linkit Lähde: Huovila: Look - visuaalista viestisi, Inforviestintä, 2006

37 37 9. KÄYTTÖLIITTYMIEN SUUNNITTELU JA TESTAUS Harjoitustyövaatimukset Harjoitukseen käytetään 1-3 päivää

38 38 9. KÄYTTÖLIITTYMIEN SUUNNITTELU JA TESTAUS Työ tehdään dokumenttipohjaan (Moodlessa) Kuvataan dokumenttipohjan asiat Heuristinen arviointi on tehty käyttötapaukset läpikäyden ja kohtuullisen kriittisesti (ei vain todettu että kohdat ok). Testisessiota varten laadituista näkymistä luodaan muutama lopullinen versio Layout - Wordpressillä tai jollain muulla työkalulla.

39 39 9. KÄYTTÖLIITTYMIEN SUUNNITTELU JA TESTAUS Tekemiseen vaaditaan 2-4 hengen ryhmiä Roolit: Moderaattori, prosessori, havainnoitsija MUODOSTAKAA ryhmät Miettikää mikä projektiaiheenne voisi olla. Ideoikaa ryhmässä Mikä on työkalu (Wordpress, Dreamweaver, Muu?) Testihenkilöinä toimivat muiden ryhmien jäsenet. HUOM! KAIKKIEN ryhmien jäsenten työpanosta tarvitaan!

40 40 9. KÄYTTÖLIITTYMIEN SUUNNITTELU JA TESTAUS KYSYKÄÄ APUA TARVITTAESSA!! Työn iloa

Helppokäyttöisen www-sivuston suunnittelu Verkkomultimedia ICT1tn004. Elina Ulpovaara

Helppokäyttöisen www-sivuston suunnittelu Verkkomultimedia ICT1tn004. Elina Ulpovaara Helppokäyttöisen www-sivuston suunnittelu Verkkomultimedia ICT1tn004 Elina Ulpovaara Käyttäjäkeskeinen suunnittelu Tavoitteena: * käytettävyys tuotteeseen * hyvä käyttökokemus käyttäjälle tuotteen liiketoiminnalliset

Lisätiedot

Helppokäyttöisen www-sivuston suunnittelu Verkkomultimedia ICT1tn004

Helppokäyttöisen www-sivuston suunnittelu Verkkomultimedia ICT1tn004 Helppokäyttöisen www-sivuston suunnittelu Verkkomultimedia ICT1tn004 17.8.2009 Elina Ulpovaara Käyttäjäkeskeinen suunnittelu Tavoitteena: * käytettävyys tuotteeseen * hyvä käyttökokemus käyttäjälle tuotteen

Lisätiedot

Kopseptisuunnittelu Verkkomultimedia ICT1tn004

Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Sivustokartta Käsikirjoitus Graafinen suunnitelma Elina Ulpovaara Konseptisuunnittelu ICT1TN004 toiminnallisuus toimintatarinat -> käyttötarinat kuvatarinat

Lisätiedot

Mitä käytettävyys on? Käytettävyys verkko-opetuksessa. Miksi käytettävyys on tärkeää? Mitä käytettävyys on? Nielsen: käytettävyysheuristiikat

Mitä käytettävyys on? Käytettävyys verkko-opetuksessa. Miksi käytettävyys on tärkeää? Mitä käytettävyys on? Nielsen: käytettävyysheuristiikat Mitä käytettävyys on? Käytettävyys verkko-opetuksessa 21.8.2002 Jussi Mantere Learnability (opittavuus) Efficiency (tehokkuus) Memorability (muistettavuus) Errors prevented (virheiden tekeminen estetty)

Lisätiedot

Studio ART Oy. Yritysesittely. Studio ART Oy. Kasöörintie 14 90420 Oulu p. 040-5799073 www.studioart.fi

Studio ART Oy. Yritysesittely. Studio ART Oy. Kasöörintie 14 90420 Oulu p. 040-5799073 www.studioart.fi Studio ART Oy Yritysesittely Studio ART Oy Kasöörintie 14 90420 Oulu p. 040-5799073 www.studioart.fi Pekka Klemetti Managing Director pekka.klemetti@studioart.fi Studio ART Oy Toimiala ICT Avainsana Tuotekehitys,

Lisätiedot

Sami Hirvonen. Ulkoasut Media Works sivustolle

Sami Hirvonen. Ulkoasut Media Works sivustolle Metropolia ammattikorkeakoulu Mediatekniikan koulutusohjelma VBP07S Sami Hirvonen Ulkoasut Media Works sivustolle Loppuraportti 14.10.2010 Visuaalinen suunnittelu 2 Sisällys 1 Johdanto 3 2 Oppimisteknologiat

Lisätiedot

Miksi tarvitsemme verkkokirjoittamisen taitoa?

Miksi tarvitsemme verkkokirjoittamisen taitoa? Verkkokirjoittaminen Luento Miksi tarvitsemme verkkokirjoittamisen taitoa? Mitä on verkkokirjoittaminen? Ennen: internet-sivujen tekeminen Nyt: blogit, wikit, sähköpostit Sosiaalisen median aikakautena

Lisätiedot

Asiakas ja tavoite. Tekninen toteutus

Asiakas ja tavoite. Tekninen toteutus Asiakas ja tavoite Heikieli on vuonna 2015 perustettu yhden hengen asiantuntijayritys, joka tarjoaa käännös- ja oikolukupalveluita englannista ja saksasta suomeksi. Freelance-kääntäjiä on Suomessa paljon,

Lisätiedot

Kiipulan ammattiopisto. Liiketalous ja tietojenkäsittely. Erja Saarinen

Kiipulan ammattiopisto. Liiketalous ja tietojenkäsittely. Erja Saarinen Kiipulan ammattiopisto Liiketalous ja tietojenkäsittely Erja Saarinen 2 Sisällysluettelo 1. Johdanto... 3 2. Hyvät internetsivut... 3 3. Kuvien koko... 4 4. Sivujen lataus... 4 5. Sivukartta... 5 6. Sisältö...

Lisätiedot

WORD TYYLILLÄ. Tietohallintokeskus hannele.rajaniemi@jyu.fi. Miksi tyylit? Tyylien lisääminen: joko jälkikäteen tai etukäteen

WORD TYYLILLÄ. Tietohallintokeskus hannele.rajaniemi@jyu.fi. Miksi tyylit? Tyylien lisääminen: joko jälkikäteen tai etukäteen WORD TYYLILLÄ Tietohallintokeskus hannele.rajaniemi@jyu.fi Sisältö 2 h Miksi tyylit? Tyylien lisääminen: joko jälkikäteen tai etukäteen Tyylien muokkaaminen Asiakirjamallit * Sisällysluettelo otsikkotyylien

Lisätiedot

KOTISIVUKONE ULKOASUEDITORI

KOTISIVUKONE ULKOASUEDITORI KOTISIVUKONE ULKOASUEDITORI Kun olet luonut itsellesi kotisivut, voit aloittaa ulkoasun yksityiskohtaisemman räätälöimisen. Kotisivukone tarjoaa helppokäyttöisen ulkoasueditorin, jonka avulla saat sivujen

Lisätiedot

Visuaalinen käyttöliittymäanalyysi

Visuaalinen käyttöliittymäanalyysi Visuaalinen käyttöliittymäanalyysi Johdanto Tehtävänä on analysoida Saariston ekologia-kurssilla käytettävän tietokoneohjelman käyttöliittymän visuaalisia ominaisuuksia. Vastaa ensiksi VisaWi -lomakkeeseen

Lisätiedot

SeaMonkey pikaopas - 1

SeaMonkey pikaopas - 1 SeaMonkey pikaopas SeaMonkey on ilmainen ja yksinkertainen www-sivujen teko-ohjelma. Sillä on kätevää koostaa yksinkertaisia sivuja ilman, että täytyy tietää jotain HTML-koodista. Tämä opas esittelee sivuston

Lisätiedot

KÄYTETTÄVYYDEN PERUSTEET 1,5op. Käytettävyyden arviointi paperiprototyypeillä Kirsikka Vaajakallio TaiK 18.4.2007

KÄYTETTÄVYYDEN PERUSTEET 1,5op. Käytettävyyden arviointi paperiprototyypeillä Kirsikka Vaajakallio TaiK 18.4.2007 KÄYTETTÄVYYDEN PERUSTEET 1,5op Käytettävyyden arviointi paperiprototyypeillä Kirsikka Vaajakallio TaiK 18.4.2007 1. MÄÄRITTELE 2. TUNNISTA RATKAISU 5. ARVIOI 3. MÄÄRITTELE 4. LUO Aiheena keskiviikkona

Lisätiedot

Kotisivu. Hakutoiminnon on oltava hyvin esillä lähes kaikilla kotisivuilla. Hakutoiminto on hyvä sijoittaa heti kotisivun yläosaan.

Kotisivu. Hakutoiminnon on oltava hyvin esillä lähes kaikilla kotisivuilla. Hakutoiminto on hyvä sijoittaa heti kotisivun yläosaan. Kotisivu Kotisivu on sivuston pääsivu Ensi kertaa sivustolle saapuvan käyttäjän pitäisi pystyä päättelemään sivuston tarkoitus kotisivun nähtyään. Usein lähtökohtana sivuston hierarkinen pääjaottelu, mutta

Lisätiedot

Näin rakennat mielenkiintoiset nettisivut

Näin rakennat mielenkiintoiset nettisivut Näin rakennat mielenkiintoiset nettisivut Ajattele ennen kuin toimit Ei kannata lähteä suinpäin nettisivuja rakentamaan. Hyvin suunniteltu on enemmän kuin puoliksi tehty. Muuten voi käydä niin, että voit

Lisätiedot

Lyhyt ohje Ning-verkoston hallinnoimiseksi ja muokkaamiseksi

Lyhyt ohje Ning-verkoston hallinnoimiseksi ja muokkaamiseksi Lyhyt ohje Ning-verkoston hallinnoimiseksi ja muokkaamiseksi Valtti Valmis tutkinto työelämävalttina, Jenni Kaisto Sisältö NÄKYMÄ SISÄÄNKIRJAUTUESSA... 1 NINGIN HALLINNOINTI JA MUOKKAUS... 3 KOJELAUTA...

Lisätiedot

HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE

HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE KOTISIVUJEN PÄIVITYSOHJE 1 SISÄLLYSLUETTELO KIRJAUDU PALVELUUN...3 KÄVIJÄSEURANTA...4 SIVUJEN PÄIVITYS...5 Sisältö...6 Sisältö / Työkalut...8 Sisältö / Taulukko...9 Sisältö / Kuvien tuominen...10 Sisältö

Lisätiedot

Graafiset käyttöliittymät Sivunparantelu

Graafiset käyttöliittymät Sivunparantelu Graafiset käyttöliittymät Sivunparantelu Johdanto Tarkoituksenamme on parantaa Konebox.fi-verkkokaupan nettisivuja. Ensivaikutelman perusteella sivusto tuntuu todella kömpelöltä ja ahdistavalta. Sivu on

Lisätiedot

Käyttöliittymän suunnittelu tilastotieteen verkko-opetukseen. Jouni Nevalainen

Käyttöliittymän suunnittelu tilastotieteen verkko-opetukseen. Jouni Nevalainen Käyttöliittymän suunnittelu tilastotieteen verkko-opetukseen Jouni Nevalainen Esityksen sisällysluettelo Työn tausta Ongelman asettelu Käsitteitä ja määritelmiä Käytetyt menetelmät Tulokset Johtopäätökset

Lisätiedot

Good Minton Sulkapalloliiton Kilpailujärjestelmä SEPA: Heuristinen arviointi

Good Minton Sulkapalloliiton Kilpailujärjestelmä SEPA: Heuristinen arviointi Good Minton Sulkapalloliiton Kilpailujärjestelmä SEPA: Heuristinen arviointi Versiohistoria: Versio: Pvm: Laatijat: Muutokset: 0.1 2006-11-25 Janne Mäkelä Alustava 1.0 2006-12-10 Janne Mäkelä Valmis 1.

Lisätiedot

Sen jälkeen Microsoft Office ja sen alta löytyy ohjelmat. Ensin käynnistä-valikosta kaikki ohjelmat

Sen jälkeen Microsoft Office ja sen alta löytyy ohjelmat. Ensin käynnistä-valikosta kaikki ohjelmat Microsoft Office 2010 löytyy tietokoneen käynnistävalikosta aivan kuin kaikki muutkin tietokoneelle asennetut ohjelmat. Microsoft kansion sisältä löytyy toimisto-ohjelmistopakettiin kuuluvat eri ohjelmat,

Lisätiedot

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

6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.) 6. Tekstin muokkaaminen 6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.) Tekstin maalaaminen onnistuu vetämällä hiirellä haluamansa tekstialueen yli (eli osoita hiiren

Lisätiedot

Oulun yliopiston www-sivujen tekeminen

Oulun yliopiston www-sivujen tekeminen Oulun yliopiston www-sivujen tekeminen Oulun yliopiston ja sen yksiköiden www-sivuilla noudatetaan yliopiston www-politiikan peruslinjauksia sekä graafisen ohjeiston mukaista visuaalista linjaa. Yhtenäisellä

Lisätiedot

Miksi potilastietojärjestelmän käytettävyys on niin tärkeää?

Miksi potilastietojärjestelmän käytettävyys on niin tärkeää? Miksi potilastietojärjestelmän käytettävyys on niin tärkeää? Tinja Lääveri LL, sisätautien erikoislääkäri Asiakas- ja Potilastietojärjestelmän hanketoimisto APOTTI, esh projektipäällikkö APOTTI = "Terveydenhuollon

Lisätiedot

Nimi: Opnro: Harjoitustyön suoritus: ( ) syksy 2006 ( ) syksy 2005 ( ) muu, mikä. 1. Selitä seuraavat termit muutamalla virkkeellä ja/tai kaaviolla:

Nimi: Opnro: Harjoitustyön suoritus: ( ) syksy 2006 ( ) syksy 2005 ( ) muu, mikä. 1. Selitä seuraavat termit muutamalla virkkeellä ja/tai kaaviolla: Harjoitustyön suoritus: ( ) syksy 2006 ( ) syksy 2005 ( ) muu, mikä 1. Selitä seuraavat termit muutamalla virkkeellä ja/tai kaaviolla: a) käytettävyys b) käyttäjäkeskeinen suunnittelu c) luonnollinen kieli

Lisätiedot

KÄYTETTÄVYYSTESTAUS OSANA KETTERÄÄ KEHITYSTÄ

KÄYTETTÄVYYSTESTAUS OSANA KETTERÄÄ KEHITYSTÄ KÄYTETTÄVYYSTESTAUS OSANA KETTERÄÄ KEHITYSTÄ Eeva Kangas 05.11.2015 @FixUi Oy 2013 2015 FIXUI "Autamme yrityksiä suunnittelemaan sellaisia tuotteita, joita ihmiset osaavat ja haluavat käyttää" Käyttäjätutkimukset

Lisätiedot

Veistämö Knaapi. Projektidokumentaatio

Veistämö Knaapi. Projektidokumentaatio Veistämö Knaapi Projektidokumentaatio 2015 1 Sisällysluettelo 1 Esittely... 3 1.1 Idea/Tarve... 3 1.2 Synopsis/ Projektin kuvaus... 3 1.3 Aikataulutus ja kustannusarvio... 4 2 Suunnittelu... 6 2.1 Banneri

Lisätiedot

206 Verkkosivun tuottaminen finaalitehtävät

206 Verkkosivun tuottaminen finaalitehtävät TAITAJA2013 Finaalitehtävä 1 (6) 206 Verkkosivun tuottaminen finaalitehtävät YLEISTÄ -lajin finaalitehtävissä kilpailijat päivittävät ennakkoon julkaistuna finaalitehtävänä olleen Ekoripe tmi luontoyrittäjän

Lisätiedot

Taulukot. 2002 Päivi Vartiainen 1

Taulukot. 2002 Päivi Vartiainen 1 Taulukot Taulukon lisääminen FrontPagessa tapahtuu samalla tavoin kuin Word tekstinkäsittelyohjelmassakin. Valitse vakiotyökaluriviltä Lisää taulukko painike. Kun olet napsauttanut painikkeen alas voit

Lisätiedot

Vinkkejä Balsamiq Mock-Up työkalun käyttöön

Vinkkejä Balsamiq Mock-Up työkalun käyttöön Vinkkejä Balsamiq Mock-Up työkalun käyttöön Tämä ohje ei ole Balsamiqin yleinen käyttöohje, mutta tässä kerrotaan miten Balsamiqia tulisi käyttää silloin kun malleissa halutaan käyttää yhteisiä pohjia.

Lisätiedot

ividays BLOG Design Elina / Tomi / Timo / Otso / 23.9.2013

ividays BLOG Design Elina / Tomi / Timo / Otso / 23.9.2013 ividays BLOG Design Elina / Tomi / Timo / Otso / 23.9.2013 1. Suunnitelma Konsepti 1. Yksinkertainen ja rento tapa välittää konkreettisempaa ja epämuodollisempaa tietoa digiviestinnän opiskelun arjesta

Lisätiedot

KÄYTTÄJÄKOKEMUKSEN PERUSTEET, TIE-04100, SYKSY 2014. Käyttäjätutkimus ja käsitteellinen suunnittelu. Järjestelmän nimi. versio 1.0

KÄYTTÄJÄKOKEMUKSEN PERUSTEET, TIE-04100, SYKSY 2014. Käyttäjätutkimus ja käsitteellinen suunnittelu. Järjestelmän nimi. versio 1.0 KÄYTTÄJÄKOKEMUKSEN PERUSTEET, TIE-04100, SYKSY 2014 Käyttäjätutkimus ja käsitteellinen suunnittelu Järjestelmän nimi versio 1.0 Jakelu: Tulostettu: 201543 Samuli Hirvonen samuli.hirvonen@student.tut.fi

Lisätiedot

Käytettävyyslaatumallin rakentaminen verkkosivustolle

Käytettävyyslaatumallin rakentaminen verkkosivustolle Käytettävyyslaatumallin rakentaminen verkkosivustolle Tapaus kirjoittajan ABC-kortti Oulun yliopisto tietojenkäsittelytieteiden laitos pro gradu -tutkielma Timo Laapotti 9.6.2005 Esityksen sisältö Kirjoittajan

Lisätiedot

Ohje 1 (12) Maarit Hynninen-Ojala MOODLE PIKAOHJE. Kirjautuminen Moodleen ja työtilan valitseminen

Ohje 1 (12) Maarit Hynninen-Ojala MOODLE PIKAOHJE. Kirjautuminen Moodleen ja työtilan valitseminen Ohje 1 (12) Maarit Hynninen-Ojala MOODLE PIKAOHJE Kirjautuminen Moodleen ja työtilan valitseminen 1. Verkko-osoite: http://moodle.metropolia.fi 2. Kirjautuminen: omat verkkotunnukset 3. Oma Moodlessa näkyvät

Lisätiedot

KÄYTTÖOHJE. Servia. S solutions

KÄYTTÖOHJE. Servia. S solutions KÄYTTÖOHJE Servia S solutions Versio 1.0 Servia S solutions Servia Finland Oy PL 1188 (Microkatu 1) 70211 KUOPIO puh. (017) 441 2780 info@servia.fi www.servia.fi 2001 2004 Servia Finland Oy. Kaikki oikeudet

Lisätiedot

Graafinen ohjeistus. Lemmikkilinnut Kaijuli ry

Graafinen ohjeistus. Lemmikkilinnut Kaijuli ry Graafinen ohjeistus Lemmikkilinnut Kaijuli ry Sisältö 1. Värit 2. Fontti 3. Logo 4. Graafiset elementit 5. Ylätunnisteen käyttö 6. Lainaukset ja nostot 7. Dokumenttipohjat Värit C 81 M 58 Y 51 K 34 R 50

Lisätiedot

1.Esipuhe. Esipuhe. Graafinen ohjeisto Rauman Lukko

1.Esipuhe. Esipuhe. Graafinen ohjeisto Rauman Lukko Sisällys Sisällys 1. Esipuhe Teksti 2. Liikemerkki ja värit eri käyttötilanteissa 2.1 Esimerkkejä liikemerkin käytöstä eri taustoissa 3. Liikemerkin mitat ja suoja-alue 4. Logo ja liikemerkki 5. Slogan

Lisätiedot

Työvälineohjelmistot KSAO Liiketalous 1

Työvälineohjelmistot KSAO Liiketalous 1 KSAO Liiketalous 1 Osat Tiedosto voidaan jakaa osiin ja jokainen osa muotoilla erikseen. Osa voi olla miten pitkä tahansa, yhdestä kappaleesta kokonaiseen tiedostoon. Osanvaihto näkyy näytöllä vaakasuorana

Lisätiedot

25.3.2014 Juha Sjöblom Taideyliopiston ensimmäinen yhteinen intranet, Artsi

25.3.2014 Juha Sjöblom Taideyliopiston ensimmäinen yhteinen intranet, Artsi Taideyliopiston ensimmäinen yhteinen intranet, Artsi Juha Sjöblom Yliopistojen intrapäivä 25.3.2014 Eri organisaatiokulttuurien yhdistymisen haasteet Intranet ja yhdistymisen haasteet Taideyliopiston opiskelijat

Lisätiedot

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT MOBISITE-TYÖKALU MobiSite on työkalu matkapuhelimeen soveltuvan mobiilisivuston rakentamiseen. AIMO-järjestelmän jatkuvasti päivittyvä päätelaitetunnistus tunnistaa useimmat puhelinmallit ja mukauttaa

Lisätiedot

Kirjan toteutus BoD easybook -taittotyökalun avulla

Kirjan toteutus BoD easybook -taittotyökalun avulla Kirjan toteutus BoD easybook -taittotyökalun avulla Seuraavilla sivuilla esittelemme yksityiskohtaisesti, miten voit helposti ja nopeasti yhdistää kuvia ja tekstiä easybook -taittotyökalun avulla. Edellytykset

Lisätiedot

SoberIT Software Business and Engineering Institute T-121.110. Testaussuunnitelma paperiprototyyppi ja Kevät 2003 HELSINKI UNIVERSITY OF TECHNOLOGY

SoberIT Software Business and Engineering Institute T-121.110. Testaussuunnitelma paperiprototyyppi ja Kevät 2003 HELSINKI UNIVERSITY OF TECHNOLOGY T-121.110 Testaussuunnitelma paperiprototyyppi ja Kevät 2003 Yleistä Palautus viikolla 10 Vaiheessa palautetaan Prototyypin testaussuunnitelma Prototyypin navigaatiokartta Prototyyppi 1. Paperiprototyyppi

Lisätiedot

Tekstinkäsittelyn jatko KSAO Liiketalous 1. Osanvaihto näkyy näytöllä vaakasuorana kaksoispisteviivarivinä ja keskellä riviä lukee osanvaihdon tyyppi

Tekstinkäsittelyn jatko KSAO Liiketalous 1. Osanvaihto näkyy näytöllä vaakasuorana kaksoispisteviivarivinä ja keskellä riviä lukee osanvaihdon tyyppi KSAO Liiketalous 1 Osat Tiedosto voidaan jakaa osiin ja jokainen osa muotoilla erikseen. Osa voi olla miten pitkä tahansa, yhdestä kappaleesta kokonaiseen tiedostoon. Osanvaihto näkyy näytöllä vaakasuorana

Lisätiedot

UpdateIT 2010: Editorin käyttöohje

UpdateIT 2010: Editorin käyttöohje UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...

Lisätiedot

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

Octo käyttöohje 1. Sisältö Octo käyttöohje 1 Sisältö Sisältö...1 Sisäänkirjautuminen...2 Etusivu...2 Uimarihaku...3 Uimariryhmät...4 Seurahaku...4 Kilpailutilastot...5 Ilmoittautuminen kilpailuun...6 Kilpailuun ilmoittautuminen...7

Lisätiedot

Key to Freedom GRAAFINEN OHJEISTO

Key to Freedom GRAAFINEN OHJEISTO Key to Freedom GRAAFINEN OHJEISTO 1 SISÄLLYSLUETTELO Johdanto... 5 Logon eri versiot... 7 Kuinka logoa ei tule käyttää... 11 Logon suoja-alue... 13 Slogan... 15 Typografia... 17 Värimaailma... 19 Käyntikorttipohja...

Lisätiedot

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

Kun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti: HENKILÖKORTTIEN SUUNNITTELUSOVELLUS SOVELLUKSEN KÄYTTÖOHJE Voit kokeilla korttien suunnittelemista valmiiden korttipohjien avulla ilman rekisteröitymistä. Rekisteröityminen vaaditaan vasta, kun olet valmis

Lisätiedot

Suvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014

Suvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014 Aineistot Kun laitat Muokkaustilan päälle, näet jokaisessa osiossa Lisää aktiviteetti tai aineisto - linkin. Valitse linkin takaa avautuvasta listasta, millaisen aineiston haluat alueelle tuoda, ja paina

Lisätiedot

Oppilaan opas. Visuaaliviestinnän Instituutti VVI Oy. Versio 0.2 (2008-01-21)

Oppilaan opas. Visuaaliviestinnän Instituutti VVI Oy. Versio 0.2 (2008-01-21) Oppilaan opas Visuaaliviestinnän Instituutti VVI Oy Versio 0.2 (2008-01-21) Versio Päivämäärä Kuvaus 0.1 2005-01-16 Ensimmäinen versio. 0.2 2008-01-21 Korjattu kuvatiedostojen maksimiresoluutio ja muutamia

Lisätiedot

Ammattijärjestäjä Aulasvuori Www-projektin kuvaus

Ammattijärjestäjä Aulasvuori Www-projektin kuvaus Ammattijärjestäjä Aulasvuori Www-projektin kuvaus Minne Seppälä Avat 2014 Dokumentaatio 1 PROJEKTIN KUVAUS... 3 1.1 Projektin aloitus... 3 1.2 Aikataulu... 4 1.3 Kustannusarvio... 4 2 ULKOASU... 5 2.1

Lisätiedot

Mikä on WordPress? itse ylläpidettävä (self-hosted) WordPress.com: ilmainen 3. osapuolen ylläpitämä pilvipalvelu (Cloud-hosted)

Mikä on WordPress? itse ylläpidettävä (self-hosted) WordPress.com: ilmainen 3. osapuolen ylläpitämä pilvipalvelu (Cloud-hosted) WordPress.com Mikä on WordPress? Tällä hetkellä maailman suosituin ns. julkaisujärjestelmä (CMS) Rakennettu blogialustaksi, nykyään myös muussa käytössä ilmainen ns. avoimen lähdekoodin julkaisujärjestelmä

Lisätiedot

tervetuloa internetiin:

tervetuloa internetiin: Tässä osassa opit rakentamaan omat kotisivut lisäämään tekstiä ja kuvia valitsemaan teeman liittämään taustan kotisivuille Toinen osa antaa apua kotisivujen rakentamisessa yhdistyksen tai kerhon käyttöön.

Lisätiedot

VERKKOSIVUANALYYSI Suomalaisen musiikin tiedotuskeskus FIMIC

VERKKOSIVUANALYYSI Suomalaisen musiikin tiedotuskeskus FIMIC Markus Lappalainen KT11/P721KNrB VERKKOSIVUANALYYSI Suomalaisen musiikin tiedotuskeskus FIMIC Oppimistehtävä Kulttuurituotannon ko. Toukokuu 2011 SISÄLTÖ 1 FIMIC... 1 2 VISUAALISET NÄKYMÄT... 1 3 AKTIIVISUUS

Lisätiedot

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE 1. SISÄÄN KIRJAUTUMINEN Sisään kirjautuminen VerkkoVelho-ylläpitotyökaluun tapahtuu yrityksesi osoitteessa www.omaosoitteesi.fi/yllapito, esim. www.verkkovelho.fi/yllapito.

Lisätiedot

Ylläpitoalue - Etusivu

Ylläpitoalue - Etusivu Crasmanager 5.2 Ylläpitoalue - Etusivu Sivut osiossa sisällön selaus ja perussivujen ylläpito. Tietokannat osiossa tietokantojen ylläpito. Tiedostot osiossa kuvien ja liitetiedostojen hallinta. Työkalut

Lisätiedot

MmK PHOTO. Projektidokumentaatio

MmK PHOTO. Projektidokumentaatio MmK PHOTO Projektidokumentaatio 2015 1 Sisällysluettelo 1 Esittely... 3 1.1 Idea/Tarve... 3 1.2 Synopsis/ Projektin kuvaus... 3 1.3 Aikataulutus ja kustannusarvio... 4 2 Suunnittelu... 6 2.1 Banneri ja

Lisätiedot

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE JULKAISUJÄRJESTELMÄÄN KIRJAUTUMINEN. Osoitekenttään kirjoitetaan www.domain.fi/admin. Kirjoita käyttäjätunnus: xxxxxx. Salasana:

Lisätiedot

BLOGGER. ohjeita blogin pitämiseen Googlen Bloggerilla

BLOGGER. ohjeita blogin pitämiseen Googlen Bloggerilla BLOGGER ohjeita blogin pitämiseen Googlen Bloggerilla Sisältö Blogin luominen... 1 Uuden blogitekstin kirjoittaminen... 4 Kuvan lisääminen blogitekstiin... 5 Lisää kuva omalta koneelta... 6 Lisää kuva

Lisätiedot

Tekstinkäsittely ja opinnäytetyö I sisällysluettelo ja sivunumerointi. Word 2007

Tekstinkäsittely ja opinnäytetyö I sisällysluettelo ja sivunumerointi. Word 2007 Tekstinkäsittely ja opinnäytetyö I sisällysluettelo ja sivunumerointi Word 2007 Perttu Suhonen 2008 Sisällysluettelo 1 Sisällysluettelon tekeminen...5 1.1 Monitasoinen numerointi...5 1.2 Otsikkotyylien

Lisätiedot

Optiman käyttöliittymän uusia ominaisuuksia. Ulkoasu

Optiman käyttöliittymän uusia ominaisuuksia. Ulkoasu Optiman käyttöliittymän uusia ominaisuuksia Ulkoasu Optiman käyttöliittymän graafinen ulkoasu on uudistettu perusteellisesti. Pääelementtien väriratkaisut ovat entisen kaltaiset, mutta muutoin ulkonäkö

Lisätiedot

THL - Kansalaispalvelujen graafiset tunnisteet. Lasse Tammilehto Creative Director, Solita & Jarmo Valmari Head of Design, Arcusys

THL - Kansalaispalvelujen graafiset tunnisteet. Lasse Tammilehto Creative Director, Solita & Jarmo Valmari Head of Design, Arcusys THL - Kansalaispalvelujen graafiset tunnisteet Lasse Tammilehto Creative Director, Solita & Jarmo Valmari Head of Design, Arcusys Palveluvaaka.fi & Omahoitopolut.fi Teemavärit Kansalaispalveluiden ilmeeseen

Lisätiedot

Käyttäjäkeskeinen suunnittelu

Käyttäjäkeskeinen suunnittelu Käyttäjäkeskeinen suunnittelu Aapo Puskala Käytettävyystutkija, CEO User Point Oy aapo.puskala@userpoint.fi www.userpoint.fi Aapo Puskala Käytettävyystutkija, CEO +358 40 722 0706 aapo.puskala@userpoint.fi

Lisätiedot

KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN

KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN -Mene osoitteeseen keskustanuoret.fi/user - Kirjoita saamasi käyttäjätunnus ja salasana - Klikkaa yllä olevaa piirisi logoa niin

Lisätiedot

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ennen kuin aloitat: 1. Asenna tietokoneeseesi ilmainen Miso Regular fontti, jonka saat täältä: https://www.fontspring.com/fonts/marten- nettelbladt/miso

Lisätiedot

ejuttu ohjeet kuinka sitä käytetään.

ejuttu ohjeet kuinka sitä käytetään. ejuttu ohjeet kuinka sitä käytetään. 1. Artikkelin lisääminen a. Kirjaudu sisään b. Lisää sisältöä c. Artikkeli i. Lisää pääkuva 1. Pääkuvalle kuvateksti ii. Anna artikkelille otsikko iii. Ingressi-kenttään

Lisätiedot

Käyttöliittymä ja tuotantokäsikirjoitus. Heini Puuska

Käyttöliittymä ja tuotantokäsikirjoitus. Heini Puuska Käyttöliittymä ja tuotantokäsikirjoitus Heini Puuska Sisältö 1 Käyttöliittymä... 1 2 Tuotantokäsikirjoitus... 2 2.1 Kurssin esittely... 2 2.2 Oppimistehtävä 1... 2 2.3 Oppimistehtävä 2... 2 2.4 Reflektio

Lisätiedot

Ulkoasu viestin välineenä

Ulkoasu viestin välineenä Sommittelu Muista: kuvat, värit ja typografia Elina Ulpovaara 7.10.2009 Ulkoasu viestin välineenä Www-sivun ulkoasun tehtävät Erottuvuus Informaation välittäminen Kiinnostuksen herättäminen Toiminnan motivointi

Lisätiedot

TUNNUS TUNNUS. Lounais-Suomen ympäristökasvatustoiminnan tunnus GRAAFINEN OHJEISTUS

TUNNUS TUNNUS. Lounais-Suomen ympäristökasvatustoiminnan tunnus GRAAFINEN OHJEISTUS Lounais-Suomen ympäristökasvatustoiminnan tunnus GRAAFINEN OHJEISTUS Tunnus - Kehrä Lounais-Suomen ympäristökasvatustoiminnan tunnukseen kuuluu kaksi osaa: kuviollinen kehrä-tunnus ja toiminnan/tapahtuman

Lisätiedot

Ohjeita informaation saavutettavuuteen

Ohjeita informaation saavutettavuuteen Ohjeita informaation saavutettavuuteen Tarkoitus Kasvattaa tietoisuutta ja lisätä esteettömän informaation aiheen näkyvyyttä ja sen merkitystä elinikäisen tasapuolisen oppimisen mahdollisuuksista Tukea

Lisätiedot

NETTISIVUOHJE. MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen

NETTISIVUOHJE. MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen NETTISIVUOHJE SISÄLTÖ 2 JULKAISUJÄRJESTELMÄ tietoa WordPress julkaisujärjestelmästä perustoiminnot (kirjautuminen, asetukset) 6 MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen

Lisätiedot

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

GRAAFINEN OHJEISTUS LOGOT NENÄPÄIVÄ GRAAFINEN OHJEISTUS 2014 NENÄPÄIVÄ GRAAFINEN OHJEISTUS LOGOT GRAAFINEN OHJEISTUS 2014 GRAAFINEN OHJEISTUS LOGOT LOGO Nenäpäivä-tunnuksen kanssa saa leikkiä ja käyttää mielikuvitusta. Tunnukselle saa löytää uusia mitä merkityksellisempiä

Lisätiedot

STS Uuden Tapahtuma-dokumentin teko

STS Uuden Tapahtuma-dokumentin teko STS Uuden Tapahtuma-dokumentin teko Valitse vasemmasta reunasta kohta Sisällöt. Sisällöt-näkymä Valitse painike Lisää uusi Tapahtuma 1 Valitse kieleksi Suomi Välilehti 1. Perustiedot Musta reunus kieliversioneliön

Lisätiedot

Rakennerahastot.fi -verkkopalvelu 2014-2020

Rakennerahastot.fi -verkkopalvelu 2014-2020 Rakennerahastot.fi -verkkopalvelu 2014-2020 Ville Törmälä Yhteystietoja Jyrki Virtanen Consultorin yhteyshenkilö jyrki.virtanen@consultor.fi 040 865 8445 Ville Törmälä Projektipäällikkö, vastuukonsultti

Lisätiedot

Opinnäytetyön mallipohjan ohje

Opinnäytetyön mallipohjan ohje Opinnäytetyön mallipohjan ohje Sisällys 1 Johdanto 1 2 Mallin käyttöönotto 1 3 Otsikot 2 3.1 Luvun otsikko 3 3.2 Alalukujen otsikot 5 4 Tekstikappaleet 5 5 Kuvat ja kuviot 6 6 Taulukot 6 7 Lainaus 7 8

Lisätiedot

T e k s t i n k ä s i t t e l y ä s e l k o k i e l e l l ä WORD

T e k s t i n k ä s i t t e l y ä s e l k o k i e l e l l ä WORD 1 MICROSOFT T e k s t i n k ä s i t t e l y ä s e l k o k i e l e l l ä WORD Eero Seitsemän veljeksen Eero on vilkas, sukkelasanainen ja älykkäämpi kuin muut veljekset. Hän kiusoittelee ja pilkkaa puheillaan

Lisätiedot

Oy Karltek Ltd internet-sivujen uusiminen. Eveliina Aaltonen

Oy Karltek Ltd internet-sivujen uusiminen. Eveliina Aaltonen Oy Karltek Ltd internet-sivujen uusiminen Eveliina Aaltonen Audiovisuaalisen viestinnän ammattitutkinto Eurajoen kristillinen opisto, 2015 1 ASIAKAS JA PROJEKTI... 3 1.1 Asiakas...3 1.2 Projektin kuvaus...3

Lisätiedot

Vihjeitä Ratatan blogipohjan käyttämiseen ja muokkaamiseen

Vihjeitä Ratatan blogipohjan käyttämiseen ja muokkaamiseen Vihjeitä Ratatan blogipohjan käyttämiseen ja muokkaamiseen HOW TO: Blogin ilmeen muuttaminen Ennen kuin alat suunnitella blogiasi, muista, että tyylinmuokkaustyökalu, Stilbyggaren, on alunperin suunniteltu

Lisätiedot

Uutiskirjesovelluksen käyttöohje

Uutiskirjesovelluksen käyttöohje Uutiskirjesovelluksen käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com 2 Sisällys Johdanto... 1 Päänavigointi...

Lisätiedot

1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3

1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3 Web-editori 2 Optima Web-editori -ohje Sisällysluettelo 1 Yleistä Web-editorista... 3 1.1 Web-editori -dokumentin luominen... 3 2 Pikatoimintopainikkeet... 3 2.1 Tallenna... 3 2.2 Peru / Tee uudelleen...

Lisätiedot

MIIKKA VUORINEN, SANTERI TUOMINEN, TONI KAUPPINEN MAT-81100 Verkkopalvelun laadukkuus ja arviointi

MIIKKA VUORINEN, SANTERI TUOMINEN, TONI KAUPPINEN MAT-81100 Verkkopalvelun laadukkuus ja arviointi AMPPARIT.COM VERKKOPALVELUN ARVIOINTISUUNNITELMA RYHMÄ VUTUKA MIIKKA VUORINEN, SANTERI TUOMINEN, TONI KAUPPINEN MAT-81100 Verkkopalvelun laadukkuus ja arviointi II SISÄLLYS 1 Arvioitava verkkopalvelu 3

Lisätiedot

Kuva xhtml-sivulla. Mirja Jaakkola

Kuva xhtml-sivulla. Mirja Jaakkola Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri

Lisätiedot

COTOOL dokumentaatio SEPA: Käytettävyystestaus

COTOOL dokumentaatio SEPA: Käytettävyystestaus Table of Contents Käytettävyystestaus......................................................................... 1 1 Johdanto.................................................................................

Lisätiedot

1 Yleistä Kooste-objektista... 3. 1.1 Käyttöönotto... 3. 2 Kooste-objektin luominen... 4. 3 Sisällön lisääminen Kooste objektiin... 4. 3.1 Sivut...

1 Yleistä Kooste-objektista... 3. 1.1 Käyttöönotto... 3. 2 Kooste-objektin luominen... 4. 3 Sisällön lisääminen Kooste objektiin... 4. 3.1 Sivut... Kooste 2 Optima Kooste-ohje Sisällysluettelo 1 Yleistä Kooste-objektista... 3 1.1 Käyttöönotto... 3 2 Kooste-objektin luominen... 4 3 Sisällön lisääminen Kooste objektiin... 4 3.1 Sivut... 5 3.2 Sisältölohkot...

Lisätiedot

Mark Summary. Taitaja 2013. Skill Number 206 Skill Verkkosivujen tuottaminen. Competitor Name

Mark Summary. Taitaja 2013. Skill Number 206 Skill Verkkosivujen tuottaminen. Competitor Name Summary Skill Number 206 Skill Verkkosivujen tuottaminen ing Scheme Lock 14-05-2013 07:44:57 Final Lock 16-05-2013 11:40:17 Criterion Criterion Description s Day 1 Day 2 Day 3 Day 4 Total Award A B C D

Lisätiedot

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

3. Vasemman reunan resurssiselaimen Omiin resursseihin luodaan uusi Handmade -niminen kansio. ActivInspire JATKO AINEISTON TUOTTAMINEN Uuden aineiston tekemisen alkua helpottaa etukäteen tehty suunnitelma (tekstit, kuvat, videot, linkit) miellekarttaa hyödyntäen. Valmista aineistoa voi muokata

Lisätiedot

Excel-harjoitus 1. Tietojen syöttö työkirjaan. Taulukon muotoilu

Excel-harjoitus 1. Tietojen syöttö työkirjaan. Taulukon muotoilu Excel-harjoitus 1 Tietojen syöttö työkirjaan Kuvitteellinen yritys käyttää Excel-ohjelmaa kirjanpidon laskentaan. He merkitsevät taulukkoon päivittäiset ostot, kunnostuskulut, tilapäistilojen vuokramenot,

Lisätiedot

YHDISTYKSEN VIESTINTÄ

YHDISTYKSEN VIESTINTÄ YHDISTYKSEN VIESTINTÄ Sisäinen viestintä - eri yhdistyksissä eri apuvälineitä, kuitenkin yleensä: Henkilökohtainen vuorovaikutus: puhelin, yhteiset kokoontumispaikat Jäsenkirje, sähköinen tai fyysinen

Lisätiedot

Kirja on jaettu kahteen osaan: varsinaiseen- ja lisätieto-osioon. Varsinainen

Kirja on jaettu kahteen osaan: varsinaiseen- ja lisätieto-osioon. Varsinainen Alkusanat Tämä tieto- ja viestintätekniikan oppikirja on päivitetty versio vuonna 2007 julkaisemastani Tieto- ja viestintätekniikka -oppikirjasta. Päivityksessä kirjan sisällöt on ajantasaistettu ja samalla

Lisätiedot

Heuristinen arviointi. Laskari 7

Heuristinen arviointi. Laskari 7 Heuristinen arviointi Laskari 7 Heuristinen arviointi Arvioidaan käyttöliittymää suunnitelusääntöjen avulla Useimmiten käytetään Jakob Nielsenin kymmentä sääntöä Eräs asiantuntija-arviointitavoista Etsitään

Lisätiedot

Learning2 (https://learning2.uta.fi) Uudet työkalut ja ominaisuudet

Learning2 (https://learning2.uta.fi) Uudet työkalut ja ominaisuudet Learning2 (https://learning2.uta.fi) Uudet työkalut ja ominaisuudet Opettaja voi valita kahdesta teemasta: (Asetukset muokkaa asetuksia pakota teema): Oletusteema: (utathemedefault) Vaihtoehtoinen teema

Lisätiedot

MOODLE-KURSSIN LAATIMINEN /OPETTAJAN OHJEET

MOODLE-KURSSIN LAATIMINEN /OPETTAJAN OHJEET MOODLE-KURSSIN LAATIMINEN /OPETTAJAN OHJEET Jos haluat itsellesi tai jollekin ryhmälle uuden kurssipohjan, ota yhteyttä Virpi Järvenreunaan, Leena Kankaanpäähän, Mervi Lehtoseen, Konsta Ojaseen, Jarno

Lisätiedot

Johtokunta 2.11.2009 155. Graafinen ohjeistus

Johtokunta 2.11.2009 155. Graafinen ohjeistus Johtokunta 2.11.2009 155 Graafinen ohjeistus Sisällys: 1. Käyttäjälle 3 2. Liikelaitoskuntayhtymän logo ja sen käyttö 4 3. Graafisen ilmeen perusvärit 6 4. Kirjasimet ja tekstityypit 7 5. Liikelaitoskuntayhtymän

Lisätiedot

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Sivu 1(16) Sisällysluettelo 1 Joomla! sivuston sisällöntuotanto... 2 2 Artikkeleiden julkaisu sivustolla... 4 3 Artikkelin julkaisemista

Lisätiedot

Käytettävyyssuunnittelu. Kristiina Karvonen Käytettävyysasiantuntija Nokia Networks

Käytettävyyssuunnittelu. Kristiina Karvonen Käytettävyysasiantuntija Nokia Networks Käytettävyyssuunnittelu Kristiina Karvonen Käytettävyysasiantuntija Nokia Networks Mitä on käytettävyys helppo käyttää helppo oppia helppo muistaa virheetön miellyttävä käyttää Käyttäjän tehtävänä ei ole

Lisätiedot

LibreOffice Writer perusteita

LibreOffice Writer perusteita LibreOffice Writer perusteita Käytetään Digabi-käyttöjärjestelmää (DigabiOS) ja harjoitellaan LibreOfficen käyttöä. 1. Ohjelman käynnistys Avaa Sovellusvalikko => Toimisto => LibreOffice Writer. Ohjelma

Lisätiedot

VJS-96 Black Panthers joukkueen www-sivujen käyttöohjeet

VJS-96 Black Panthers joukkueen www-sivujen käyttöohjeet Pekka Penttala 3.3.2008 1 (10) VJS-96 Black Panthers joukkueen www-sivujen käyttöohjeet VJS-96 Black Panthers joukkueen www-sivujen käyttöohjeet... 1 1 Yleistä www-sivujen käytöstä... 2 2 Sivujen osoitteet...

Lisätiedot

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009 Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate

Lisätiedot

Ohjeistus verkkoprojektiin

Ohjeistus verkkoprojektiin Ohjeistus verkkoprojektiin Luomuyrityksen web design brief -työkirjamalli HELSINGIN YLIOPISTO HELSINGFORS UNIVERSITET UNIVERSITY OF HELSINKI Projektin RAAMIT JA RAJAUKSET Onko sinulla toiveita julkaisujärjestelmästä

Lisätiedot

Word 2003:n käyttötoimintojen muutokset Word 2010:ssä

Word 2003:n käyttötoimintojen muutokset Word 2010:ssä 1/6 Word 2003:n käyttötoimintojen muutokset Word 2010:ssä WORD 2003 TOIMINNOT TOIMINNOT WORD 2010:ssä Uusi tiedosto Avaa tiedosto Sivun asetukset valikosta painike ja avautuvasta valikosta valitse haluamasi

Lisätiedot