IHTE-1900 Seittiviestintä

Koko: px
Aloita esitys sivulta:

Download "IHTE-1900 Seittiviestintä"

Transkriptio

1 IHTE-1900 Seittiviestintä Seittisivujen käytettävyys Päivän aiheet WWW:n erikoispiirteitä Seittisivujen käytettävyys - Hyvät ja huonot seittisivut (ryhmätyön tulokset) - Miten suunnitella hyvät sivut? - Yleisimmät virheet - Kohderyhmien huomioiminen 1

2 WWW:n erikoispiirteitä: toteutus Julkinen ja avoin järjestelmä - Alunperin ei suunniteltu kaiken kansan käyttöön Standardit ja niiden puute Nopea kehitys ja kasvu Vasteajat vaihtelevat WWW:n erikoispiirteitä: rakenne Käyttäjän sijainnilla ei ole merkitystä Sisällön ei tarvitse olla lineaarista Toiminta voi olla pienimuotoista ja halpaa Fyysisen maailman rajoituksista vapaa Palvelurajat hämäriä Linkkejä voi teoriassa olla ääretön määrä Sivustolla on helppo jakaa materiaalia 2

3 WWW:n erikoispiirteitä: sisältö Tietoa valtavasti Palvelut voivat olla yksilöllisiä Tiedon etsiminen haastavaa Sisällön merkitys korostuu Kaikki tieto ei ole luotettavaa Palvelut voivat olla anonyymejä Palvelut toimivat asiakkaan ehdoilla WWW:n erikoispiirteitä: käyttäjät Kielierot Kulttuurierot Heterogeeninen käyttäjäryhmä Tavoitteet Tekninen osaamistaso WWW:n käyttökokemus 3

4 WWW:n erikoispiirteitä Koska ei tiedetä tarkkaa käyttöliittymää ja ulkoasua, on keskityttävä - sisältöön: mitä esitellään ja miten, kenelle - rakenteeseen: kuinka esitetään, missä esitetään - ylläpitoon: vanhentunut tieto pois sivuilta - virheettömyyteen: kirjoitusvirheet, asiavirheet - esteettömyyteen: tieto kaikkien saataville Käyttäminen vs. tyytyväisyys Sivuston kävijämäärät eivät välttämättä kerro mitään sivuston käytettävyydestä ja kävijöiden tyytyväisyydestä palveluun - verkkopankki - ilmoittautumislomakkeet - uutissivustot 4

5 Verkkobrandien arvostus Suomessa tutkimus Eniten käytettyihin WWW-palveluihin ei välttämättä olla tyytyväisiä www-palveluiden tärkeimmät ominaisuudet ovat - Sisältö - Ajantasaisuus - Tekninen toimivuus Toimihenkilöt ja johtotason henkilöt korostavat tietojen ajantasaisuutta Nuoret ja opiskelijat arvostavat muita vastaajia enemmän www-palvelun ulkonäköä. Lähde: Taloustutkimus KOTIUTA käyttäjä sivuille Korkeatasoinen sisältö Oikea-aikaiset päivitykset Todella lyhyt latausaika Intuitiivinen käyttöliittymä Uniikisti verkkoa hyödyntävä Tarpeita vastaava sisältö Asenteet verkkomyönteisiksi 5

6 Nielsenin suunnitteluohjeet käyttäjälle ei kannata kertoa sivuston puutteista julkaise sivut vasta kun ne ovat julkaisukelpoisia tulevaisuudensuunnitelmista voi kertoa, mutta tärkeintä käyttäjälle on mitä sivustolla voi tehdä tällä hetkellä - anna tulevaisuudesta lupauksia, jotka myös pidät Kaikki verkkosivut ovat aina keskeneräisiä! Nielsen: rakenna sivusto huolella Erota sisältö ja esitystapa - käytä semanttista koodausta - käytä tyylitiedostoja (CSS, Cascading Style Sheet) tarvittaessa Pääosassa sisältö eli se informaatio, joka oletettavasti sai käyttäjän sivustolla käymään Nyrkkisääntö: yksinkertainen on monimutkaista parempi vaihtoehto - poista jokainen elementti yksi kerrallaan - mikäli tuote toimii ilman elementtiä, se voidaan poistaa 6

7 Nielsen: rakenna sivusto huolella Uskottavuus - sivuston voi perustaa kuka tahansa - luotettavuutta parantaa sivun hyvä suunnittelu ja siisti ulkoasu Jokaisella sivulla oltava oma nimi - sivuhistorian käyttö - hakukoneet Nielsen: pääsivu on tärkeä Sivuston tärkein sivu Tehtävänä - kertoa käyttäjälle sivuston tarkoitus - tarjota reittejä muualle sivustoon linkit Hakutoiminnot 7

8 Nielsen: pääsivu on tärkeä Paras sisältö riippuu aina sivuston tarkoituksesta ja kohderyhmästä Erilliset käynnistyskuvat ja tervetuloa -sivut animaatioineen useimmiten turhia - perusteltuja lähinnä jos kävijöitä tulee varoittaa jotenkin sivujen sisällöstä (esim. ei sovi lapsille tai herkille ihmisille) Seittisivujen lukeminen Näytöltä lukeminen 25% hitaampaa kuin paperilta lukeminen Miten käyttäjät lukevat seittisivuja? Nielsen: eivät mitenkään. - käyttäjät selaavat ja silmäilevät sivuja - John Morkesin & Nielsenin tutkimus % käyttäjistä vilkaisee sivuja (scan) vain 16% lukee sanasta sanaan 8

9 Esimerkki: Näytöltä lukeminen Nielsenin & Morkenin tutkimus Viisi eri versiota seittisivuista - alkuperäinen teksti - lyhennetty teksti - silmäiltävä teksti - objektiivinen teksti - yhdistetty versio, jossa käytetty kaikkia kolmea muokattua versiota Mitattiin, kuinka paljon käytettävyys (luettavuus) prosentuaalisesti paranee Esimerkki: Alkuperäinen teksti Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). 9

10 Esimerkki: Tiivistetty teksti (58%) In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park. Esimerkki: Silmäiltävä teksti (47%) Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were: Fort Robinson State Park (355,000 visitors) Scotts Bluff National Monument (132,166) Arbor Lodge State Historical Park & Museum (100,000) Carhenge (86,598) Stuhr Museum of the Prairie Pioneer (60,002) Buffalo Bill Ranch State Historical Park (28,446) 10

11 Esimerkki: Objektiivinen teksti (27%) Nebraska has several attractions. In 1996, some of the most-visited places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). Esimerkki: Yhdistetty versio (124%) In 1996, six of the most-visited places in Nebraska were: - Fort Robinson State Park - Scotts Bluff National Monument - Arbor Lodge State Historical Park & Museum - Carhenge - Stuhr Museum of the Prairie Pioneer - Buffalo Bill Ranch State Historical Park 11

12 Nielsen: verkkoon kirjoittaminen Kirjoita lyhyesti ja ytimekkäästi - tiivistä: verkkoon 50% vähemmän tekstiä - käytä käänteisen pyramidin ideaa - yksi ajatus tai idea per kappale - lauserakenteet yksinkertaisiksi - käytä huumoria ja sanaleikkejä varovaisesti Nielsen: verkkoon kirjoittaminen Muista kielenhuolto - Kirjoitusvirheet ovat kiusallisia ja vievät uskottavuutta - Virheet ja epäselvät lauseet myös hidastavat lukemista entisestään 12

13 Nielsen: tekstin ulkoasu Tekstin ja taustan värien välille mahdollisimman voimakas kontrasti - luettavuus paras jos teksti mustaa, tausta valkoinen Tekstin taustaksi yksi väri tai rauhallinen kuvio Tekstin pysyttävä paikallaan Nielsen: tekstin ulkoasu Tavalliset tekstit vasempaan reunaan tasattuna - keskitys ja tasaus vain tehokeinoina Näytöltä luettavaan tekstiin fontiksi pääteviivaton kirjasin - päätteetön (Arial) - päätteellinen (Times New Roman) Vältä HUUTAMISTA 13

14 Nielsen: tekstin ulkoasu Käyttäjät suosivat erilaisia kirjasinkokoja, älä pakota esim. vanhuksia lukemaan pientä fonttia Kirjasinkoko määriteltävä suhteessa peruskirjasinkokoon eikä pisteinä Käytettävä vain peruskirjasimia tai annettava ainakin useita vaihtoehtoja Näytölle teksti vain yhteen palstaan Nielsen: käytä kuvia harkiten Perusteeton kuvitus on karsittava - toisaalta käytä kuvia esim. verkkokaupassa Nopeuta latautumista - optimoimalla kuvien koko ja talletusmuoto - määrittelemällä kuvien leveys ja korkeus - käyttämällä pikkukuvia (thumbnails) joista linkki isompaan kuvaan Jos kuva sisältää tärkeää informaatiota, on tieto tarjottava myös muussa muodossa 14

15 Kuvan merkityksellinen pienentäminen Nielsen: sallitut animaatiot Animaatioita kannattaa käyttää harkiten - Siirtymien välisen jatkuvuuden osoittaminen - Siirtymän suunnan osoittaminen - Ajan myötä tapahtuvat muutokset - Näytön hyödyntäminen - Graafisten esitysten tehostaminen - Kolmiuloitteisten rakenteiden havainnollistaminen - Huomion kiinnittäminen Animaatio ei saisi toimia koko ajan 15

16 Nielsen: ota linkeistä kaikki irti Linkit, 3 tyyppiä - rakenteellinen linkki hahmottaa esimerkiksi sivujen rakennetta - sisältölinkki siirtyy sivulle, jossa lisätietoa linkin sanasta tai kuvasta - aiheeseen liittyvä linkki auttaa käyttäjää löytämään muita samanaiheisia sivuja Linkeillä vain 2 standardiväriä - sininen = avaamaton linkki - sinipunainen/punainen = avattu linkki Nielsen: ota linkeistä kaikki irti Linkkitekstit informatiivisiksi - Kesän uutuuksista saat lisätietoja täältä vs. Tutustu kesän uutuuksiin - Jos linkkitekstinä henkilön nimi, linkin tulisi viedä sivustolle jossa lisätietoja henkilöstä. Sähköpostilinkit erikseen. 16

17 Nielsen: ota linkeistä kaikki irti Linkkiotsikot hyvä keino välittää lisätietoa - tulevat näkyviin, kun kursori on ollut n. 1s linkin kohdalla - tarkoituksena auttaa käyttäjää arvioimaan, mitä tapahtuu tiettyä linkkiä seuratessa - Esimerkiksi <a href= title= Seittiviestintä 2007 >Seittiviestintä</a> - eivät toimi kaikissa selaimissa - ei aina tarpeen jos linkkiteksti ajaa saman asian Nielsen: ota linkeistä kaikki irti Linkit ulos sivustolta - Hyvät linkit saavat käyttäjät palaamaan sivulle - Avataanko linkit samaan vai uuteen ikkunaan? - Linkkeihin lyhyt kuvaus kohteen sisällöstä - Laatu korvaa määrän, muista ryhmittely - Käyttäjälle tulee kertoa, jos linkki vie ulos sivustolta 17

18 Nielsen: vasteajat Vasteajat - Toiminnon tulee reagoida ajassa 0,1s - Sivulta toiselle siirtyminen tulisi olla < 1s - Hyvä tavoite on sivun latautuminen alle 10 s WWW-sivujen tärkein ominaisuus on nopea latautumisaika. - Jakob Nielsen Nielsen: sivut nopeasti latautuviksi Enemmän tekstiä ja vähemmän kuvia, optimoidut kuvat Sivun yläosan tulee olla hyödyllinen käyttäjälle ilman, että kuvat ovat latautuneet Kuviin ALT-tekstit, näkyvät useissa selaimissa ennen kuvanlatautumista Tekstisisältö latautuu nopeasti jos WIDTH- ja HEIGHTmäärittelyt kaikkiin kuviin ja taulukoihin ovat olemassa 18

19 Nielsen: sivut nopeasti latautuviksi Vaikeaselkoiset ja monimutkaiset taulukot jaetaan useaan pienempään taulukkoon Sivun pituus ja leveys Multimediaefektejä vain tarvittaessa Suuria tiedostoja sisältäviin linkkeihin tiedoston koko ja esimerkki latautumisajasta tietyllä nopeudella Linkkeihin täydellinen URL-osoite Nielsen: älä käytä kehyksiä Kehysten käyttö voi aiheuttaa ongelmia Käyttäjän näkymä usean selausaskeleen tulos URL:ista kopioitu linkki ei välttämättä johda halutulle sivulle Kirjanmerkkien teko ei välttämättä onnistu halutulle sivulle Pienissä näytöissä kehykset vievät suuren osan tilasta - puhelimissa ja PDA-laitteissa eivät välttämättä toimi ollenkaan 19

20 Nielsen: älä käytä kehyksiä Kehykselliset sivut tulostuvat huonosti Jos kehyksiä on käytettävä lisätään kaikkiin hypertekstilinkkeihin TARGET= _top -attribuutti - poistaa kehykset ja lataa sivun uudelleen - joka sivulla uusi URL, jota voidaan käyttää linkittämiseen Hakukoneet eivät välttämättä käsittele sivua oikein Nielsen: älä käytä kehyksiä Mikäli käytät kehyksiä, tarjoa sisältö myös kehyksettömänä versiona - poista reunat: käyttäjän tuskin niitä tarvitsee nähdä Kelluvat kehykset (floating frame, inline frame) käyttäjän näkökulmasta käyttökelpoisia 20

21 Nielsen: taita sivu joustavaksi Sivua ei pidä suunnitella erityisesti millekään tietylle standardikoolle - Näyttöjen ja selainikkunoiden koot vaihtelevat - Käytetyt resoluutiot vaihtelevat - Jos kuitenkin halutaan tehdä määrätyn kokoinen sivu niin leveys tulisi olla alle 600 pikseliä. Liukuva asettelu käyttäjille parempi kuin kiinteä Pieniä näyttöjä ei pidä pakottaa vierittämään näyttöä vaakasuunnassa Nielsen: tarjoa tulostusmahdollisuus Sivun tulee mahtua sekä letter- että A4-arkille - Suositeltava marginaali 2,5 cm, jolloin tulostettava alue on n. 23x16cm Sivusta tehtävä tarvittaessa kaksi versiota; tulostettava ja näytöltä luettava - Näytöllä 1 palsta, tulosteessa 2 - Erilaiset kirjasinlajit - Näytöltä luettava muotoa HTML - Tulostettavat muotoa PS (PostScript) tai PDF Tulevaisuudessa ehkä standardi jonka avulla automaattisesti tarjotaan eri versio tulostukseen? 21

22 Nielsen: URL-osoitteet URL-osoitteiden piti alunperin olla vain tietokoneiden käyttämä koodi, joka ei näy käyttäjälle - Virallinen syntaksi alkaa - Useimmat selaimet osaavat täydentää osoitteen, jonka alusta puuttuu protokollamäärite ja lopusta hakemiston merkkiviiva, esim. Koodiin täydellinen syntaksi - Lyhentää vasteaikaa verrattuna selaimen täydennettävään muotoon Nielsen: URL-osoitteet Käyttäjät yrittävät ymmärtää URL-osoitteen - Mahdollisimman selkeä nimeäminen - Lyhyet nimet tai yhdyssanat - Vain pieniä kirjaimia - Ei erikoismerkkejä, jos kuitenkin käytettävä esim. tavuviivaa niin se on tehtävä yhdenmukaisesti kaikilla sivuilla Sivuhierarkiassa tulisi päästä ylemmäs poistamalla URLosoitteen oikeanpuoleisia osia 22

23 Nielsenin käytettävyyssloganit Your Best Guess Is Not Good Enough The User Is Always Right The User Is Not Always Right User Are Not Designers Designers Are Not Users Vice Presidents Are Not Users Less Is More Details Matter Help Doesn't Ten Good Deeds in Web Design 1. Aseta nimi ja logo joka sivulle, tee logosta linkki 2. Tarjoa hakumahdollisuus jos sivuja > Kirjoita selkeät otsikot sivuille ja teksteille 4. Tue silmäilevää lukutapaa 5. Käytä hypertekstiä sisällön jäsentämisessä 6. Käytä tuotekuvia mutta älä liikaa 7. Pienennä kuvat oleellisen sisällön mukaan 8. Käytä linkkiotsikoita 9. Varmista että tärkeät sivut ovat myös erikoisryhmien saatavilla 10. Tee kuten muutkin Nielsen, 23

24 Esteettömät verkkopalvelut Verkkopalvelut kaikkien saataville Hyöty erityisryhmille ja erikoisten päätelaitteiden käyttäjille Esteettömyyden huomiointi edistää samalla myös käytettävyyttä erilaisissa käyttötilanteissa ja ympäristöissä Huomioi verkkopalvelussa erityisesti - Rakenne - Kieli - Tekniikat - Linkit Esimerkki: Flash-toteutus 24

25 Lisää huomioitavia asioita Palautemahdollisuus Rakenna sivustosta hakukoneille helppo käsiteltävä (search engine design) Visuaaliset suunnitteluperiaatteet, asettelu Värien valinta Normanin suunnitteluperiaatteet Nielsenin heuristisen arvioinnin lista Normanin suunnitteluperiaatteet Näkyvyys Kytkennät Käsitemalli Palaute Virheiden käsittely 25

26 Nielsenin heuristisen arvioinnin lista 1. Palvelun tilan näkyvyys 2. Palvelun ja tosielämän vastaavuus 3. Käyttäjän kontrolli ja vapaus 4. Yhteneväisyys ja standardit 5. Virheiden estäminen 6. Tunnistaminen mieluummin kuin muistaminen 7. Käytön joustavuus ja tehokkuus 8. Esteettinen ja minimalistinen design 9. Virhetilanteiden tunnistaminen, ilmoittaminen ja korjaaminen 10.Opastus ja ohjeistus 26

27 27

28 Tyypillisiä virheitä verkkopalvelujen suunnittelussa Yrityksen vanhaa toimintamallia ei muuteta - verkon tuomia mahdollisuuksia ei hyödynnetä Projektinhallinta - projektia johdetaan kuten muita yrityksen projekteja Informaatioarkkitehtuuri - sivu muistuttaa yrityksen rakennetta eikä palvele käyttäjän tarpeita 28

29 Tyypillisiä virheitä: informaatioarkkitehtuuri 29

30 Tyypillisiä virheitä verkkopalvelujen suunnittelussa Sivujen suunnittelu - Sivut suunnitellaan demomielessä näyttäviksi, mutta esim. tiedonsiirtoviiveitä ei oteta huomioon Sisällöntuotanto - Kirjoitetaan materiaali samalla tavoin kuin painettavat mainokset ja tiedotteet Linkkien rakentaminen - Tehdään sivuista oma saareke, jolla ei ole selkeää alkua eikä poispääsyä 30

31 Nielsen: virheet suunnittelussa Jakob Nielsen on kerännyt pahimpia seittisuunnittelun virheitä, jotka kannattaa lukaista selityksineen kaikki läpi Kaikki virheet eivät enää ole ajankohtaisia, esim. käyttäjät ovat tottuneet ruudun vierittämiseen. - Top Ten Mistakes Revisited Three Years Later 31

32 Nielsen: virheet suunnittelussa Top Ten Mistakes in Web Design (1996) - Top Ten New Mistakes in Web Design (1999) - Top Ten Web-Design Mistakes of Top Ten Web-Desing Mistakes of ei yksin Nielsenin tekemä vaan myös Alertboxien lukijat saivat antaa ehdotuksia listalle Nielsen: virheet suunnittelussa Kehysten käyttö (frames) 2. Uusimman tekniikan perusteeton käyttö 3. Vierivä teksti, animaatiot 4. Monimutkaiset URL-osoitteet 5. Irralliset sivut 6. Pitkät, vieritettävät sivut 7. Navigointituen puute 8. Epästandardit linkkivärit 9. Päivittämätön, vanhentunut sisältö 10.Pitkät latautumisajat 32

33 Nielsen: virheet suunnittelussa Back-painikkeen toiminnallisuuden rikkominen 2. Uusien selainikkunoiden avaus 3. Epästandardien käyttöliittymäkomponenttien käyttö 4. Tekijätietojen puuttuminen 5. Arkistojen puuttuminen 6. Sivujen siirtäminen uuteen osoitteeseen 7. Otsikot jotka eivät kuvaa oleellista sisältöä 8. Uusimpien muotivillitysten seuraaminen 9. Hitaat palvelimen vasteajat 10.Kaikki mikä näyttää mainonnalta Nielsen: virheet suunnittelussa Hintatietojen puuttuminen 2. Joustamattomat hakukoneet 3. Sivujen vierittäminen vaakasuunnassa 4. Kirjaisinkokojen määrääminen 5. Tekstin kirjoittaminen suuriin lohkoihin 6. JavaScriptin käyttö linkeissä 7. Harvoin kysytyt kysymykset UKK:ssa 8. Sähköpostiosoitteiden kerääminen ilman tietosuojapolitiikkaa 9. Pitkät URL-osoitteet 10.Sähköpostilinkit odottamattomissa paikoissa 33

34 Nielsen: virheet suunnittelussa Luettavuusongelmat 2. Epästandardit linkit 3. Flash:n käyttö 4. Sisältö, jota ei ole kirjoitettu www:tä varten 5. Hankalat haut 6. Selainten yhteensopimattomuus 7. Hankalat / monimutkaiset lomakkeet 8. Yhteystietojen puuttuminen 9. Jäädytetyt sivuleveydet ( sommittelu ) 10. Puutteelliset mahdollisuudet nähdä kuva suurempana Tehtävä 5 viikko 42 Suunnittele sivusi ulkoasu ja rakenne (navigointi) - Piirrä paperille, käytä värejä ja laatikoita osoittamaan elementtien paikkoja - Muista luennolla annetut vinkit - Skannaa tai digikuvaa suunnitelmasi ja lisää se sivulle Muotoile www-sivut - Suoraan HTML:ään tai - CSS:n avulla (BONUS) Oppimispäiväkirja, n merkkiä 34

35 Lähteitä Jakob Nielsen, WWW suunnittelu, 2002, IT Press 35

IHTE-1900 Seittiviestintä

IHTE-1900 Seittiviestintä IHTE-1900 Seittiviestintä Seittisivujen käytettävyys 25.10. Päivän aiheet WWW:n erikoispiirteitä Seittisivujen käytettävyys - Hyvät ja huonot seittisivut (ryhmätyön tulokset) - Miten suunnitella hyvät

Lisätiedot

IHTE-2100 KaSuper 2008-2009 Luento 9: www-käyttöliittymät, standardit

IHTE-2100 KaSuper 2008-2009 Luento 9: www-käyttöliittymät, standardit IHTE-2100 KaSuper 2008-2009 Luento 9: www-käyttöliittymät, standardit Ten Good Deeds in Web Design 1. Aseta nimi ja logo joka sivulle, tee logosta linkki 2. Tarjoa hakumahdollisuus jos sivuja > 100 3.

Lisätiedot

http://www.cs.tut.fi/ihte IHTE-2100 KaSuper 2007-2008 Luento 4: Tehtäväanalyysi, multimodaalisuus

http://www.cs.tut.fi/ihte IHTE-2100 KaSuper 2007-2008 Luento 4: Tehtäväanalyysi, multimodaalisuus http://www.cs.tut.fi/ihte IHTE-2100 KaSuper 2007-2008 Luento 4: Tehtäväanalyysi, multimodaalisuus Päivän aiheet Tehtäväanalyysi Multimodaalisuus (Design patterns) WWW-käyttöliittymät Tehtäväanalyysi (task

Lisätiedot

IHTE-2100. http://www.cs.tut.fi/ihte. KaSuper 2008-2009 Luento 7: Tehtäväanalyysi, www-käyttöliittymä

IHTE-2100. http://www.cs.tut.fi/ihte. KaSuper 2008-2009 Luento 7: Tehtäväanalyysi, www-käyttöliittymä IHTE-2100 http://www.cs.tut.fi/ihte KaSuper 2008-2009 Luento 7: Tehtäväanalyysi, www-käyttöliittymä Päivän aiheet Tehtäväanalyysi WWW-käyttöliittymät Tehtäväanalyysi Tehtäväanalyysi (task analysis) Yleinen

Lisätiedot

Heuristisen arvioinnin muistilista - lyhyt versio

Heuristisen arvioinnin muistilista - lyhyt versio Alla oleva kymmenkohtainen muistilista on sovellettu Jakob Nielsenin heuristisen arvioinnin muistilistasta (Nielsen, 1994), hyödyntäen Keith Instonen wwwpalveluiden arviointiin muokattua samaista listaa

Lisätiedot

Vasteaika. Vasteaikaa koskeva ohje ei ole juuri muuttunut Robert B. Millerin vuonna 1968 pitämästä esityksestä:

Vasteaika. Vasteaikaa koskeva ohje ei ole juuri muuttunut Robert B. Millerin vuonna 1968 pitämästä esityksestä: Nielsen: "Olen tutkinut Webin käytettävyyttä vuodesta 1994, ja jokaisessa tutkimuksessa esiin on noussut sama asia: käyttäjät haluaisivat sivujen latautuvan nopeammin. Aluksi olin sitä mieltä, että käyttäjät

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

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

Verkkokirjoittaminen. Verkkolukeminen

Verkkokirjoittaminen. Verkkolukeminen 0 Nopeaa silmäilyä: Pääotsikot, kuvat, kuvatekstit, väliotsikot, linkit, luettelot, korostukset. 0 Hitaampaa kuin paperilla olevan tekstin lukeminen 0 F-tyyppinen lukeminen Verkkolukeminen Verkkokirjoittaminen

Lisätiedot

Verkkokirjoittaminen. Anna Perttilä Tarja Chydenius

Verkkokirjoittaminen. Anna Perttilä Tarja Chydenius Verkkokirjoittaminen Anna Perttilä Tarja Chydenius 1 Suosi lyhyttä tekstiä 2 Kenelle kirjoitat 3 Helpota lukijan työtä; lajittele tekstisi 3.1 Otsikot 3.2 Johdanto 3.3 Väliotsikot 3.4 Pääteksti 4 Linkit:

Lisätiedot

Linkkitekstit. Kaikkein vanhin WWW-suunnitteluohje:

Linkkitekstit. Kaikkein vanhin WWW-suunnitteluohje: Linkit Linkit ovat hypertekstin tärkein osa. Niiden avulla sivut liitetään toisiinsa ja käyttäjille tarjoutuu mahdollisuus liikkua muille kiinnostaville sivuille. Linkit Linkkejä on kolmea eri tyyppiä:

Lisätiedot

URL-osoitteiden suunnittelu

URL-osoitteiden suunnittelu Tim Berners-Lee: Jos olisin arvannut kuinka suosittu Webistä tulee, olisin yrittänyt keksiä URL-osoitteiden alkuosalle jonkin toisen muodon. http-alkuosa on hankala erityisesti puhelinkeskusteluissa. URL

Lisätiedot

KÄYTETTÄVYYS KÄYTETTÄVYYSPÄIVÄ 17.4.2014. Mitä käytettävyys on? Mitä merkitystä sillä on? Mitkä ovat suurimmat haasteet sen saavuttamikseksi?

KÄYTETTÄVYYS KÄYTETTÄVYYSPÄIVÄ 17.4.2014. Mitä käytettävyys on? Mitä merkitystä sillä on? Mitkä ovat suurimmat haasteet sen saavuttamikseksi? PÄIVÄ 17.4.2014 Johanna Silvennoinen (Perustuu Meeri Mäntylän kalvoihin, sis. osia Anne Pirisen esityksestä) Mitä käytettävyys on? Mitä merkitystä sillä on? Mitkä ovat suurimmat haasteet sen saavuttamikseksi?

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

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

Miksi käytettävyys on tärkeää

Miksi käytettävyys on tärkeää WWW-suunnittelu Webissä tärkeintä on käytettävyys. Tämä tarkoittaa yksinkertaisesti sitä, että jos käyttäjä ei löydä jotakin tuotetta, hän ei myöskään osta sitä. Webissä asiakas on kuningas, hiiri aseenaan

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

Lahden, Pohjois Karjalan ja Kemi Tornion AMK Effective Reading > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%)

Lahden, Pohjois Karjalan ja Kemi Tornion AMK Effective Reading > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Lahden, Pohjois Karjalan ja Kemi Tornion AMK Effective Reading > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien

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

VERKKOKIRJOITTAMINEN. www.mediamylly.fi

VERKKOKIRJOITTAMINEN. www.mediamylly.fi VERKKOKIRJOITTAMINEN Verkkolukeminen Verkkolukeminen verkkosivuja "skannataan" lukeminen on 25% hitaampaa kuin paperilla lukeminen on osittain hyppimistä sivun eri osioissa lukeminen on väsyttävää F-tyyppinen

Lisätiedot

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4

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

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

Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja. Julkaisujärjestelmän ohje

Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja. Julkaisujärjestelmän ohje Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja Julkaisujärjestelmän ohje 2014 2 PM-Julk aisujärjestelmän perusohjeet Julkaisujärjestelmän käyttöönotto Julkaisujärjestelämän avulla voit itsenäisesti muokata

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

CSS - tyylit. 13.11.2000 Seppo Räsänen

CSS - tyylit. 13.11.2000 Seppo Räsänen CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot

Lisätiedot

Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle

Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle Pyydämme suunnitelijaa ottamaan huomioon seuraavat ohjeet verkkokaupan ulkoasun suunnittelua koskien. Näin vältämme lisäkustannukset

Lisätiedot

Näkyvyys nousuun hakukoneoptimoinnilla

Näkyvyys nousuun hakukoneoptimoinnilla Näkyvyys nousuun hakukoneoptimoinnilla Teemu Leppänen Puhujan esittely Verkkosivuja vuodesta 1999 Tietoliikennealan koulutus Kouluttajana noin 10 vuotta Asunut Englannissa ja Australiassa Oma yritys vuodesta

Lisätiedot

Suomen virtuaaliammattikorkeakoulu Tietojohtaminen rakennus prosesseissa > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Tietojohtaminen rakennus prosesseissa > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu Tietojohtaminen rakennus prosesseissa > 80 % 80 60 % 60 50 % < 50 % Arviointialue

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

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

Animaatio Web-sivuilla

Animaatio Web-sivuilla Ihmisen koko huomio kiinnittyy vaistomaisesti (hyökkääjiltä suojautuminen) liikkuvaan kuvaan. Yleisesti ottaen animaatioita kannattaa käyttää mahdollisimman vähän. Suunnitteluvaiheessa on hyvä pohtia,

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

NetEazer informaatiojärjestelmä www- palvelujen sisällönhallintaan ja julkaisuun

NetEazer informaatiojärjestelmä www- palvelujen sisällönhallintaan ja julkaisuun NetEazer informaatiojärjestelmä www- palvelujen sisällönhallintaan ja julkaisuun OpenSpace NetEazer julkaisujärjestelmä on täydellinen informaatiojärjestelmä nykyaikaisten wwwpalvelujen sisällöntuotantoon.

Lisätiedot

Suomen virtuaaliammattikorkeakoulu Boolen operaattorit v. 0.5 > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Boolen operaattorit v. 0.5 > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu Boolen operaattorit v. 0.5 > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien

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

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

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

Opetusmateriaalin visuaalinen suunnittelu. Kirsi Nousiainen 27.5.2005

Opetusmateriaalin visuaalinen suunnittelu. Kirsi Nousiainen 27.5.2005 Opetusmateriaalin visuaalinen suunnittelu Kirsi Nousiainen 27.5.2005 Visuaalinen suunnittelu Ei ole koristelua Visuaalinen ilme vaikuttaa vastaanottokykyyn rauhallista jaksaa katsoa pitempään ja keskittyä

Lisätiedot

Tunnuksen päivitys 19.9.2012

Tunnuksen päivitys 19.9.2012 Tunnuksen päivitys 19.9.2012 2 Tampereen yliopiston tunnus Tampereen yliopiston tunnus Tuhannet ihmiset näkevät Tampereen yliopiston tunnuksen päivittäin lomakkeissa, nettisivuilla, raporteissa, esitteissä.

Lisätiedot

Kuvat Web-sivuilla. Keskitie:

Kuvat Web-sivuilla. Keskitie: Kuvat Web-sivuilla Nielsen: Web-sivun kuvitus on pyrittävä minimoimaan vasteajan takia. Kaikki perusteeton kuvitus on karsittava. Yksi kuva vastaa tuhatta sanaa vs Latausajassa yksi kuva vastaa kahta tuhatta

Lisätiedot

FrontPage 2000 - Näkymät

FrontPage 2000 - Näkymät FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava

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

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

SEPA-päiväkirja: Käytettävyystestaus & Heuristinen testaus

SEPA-päiväkirja: Käytettävyystestaus & Heuristinen testaus SEPA-päiväkirja: Käytettävyystestaus & Heuristinen testaus Lehmus, Auvinen, Pihamaa Johdanto Käyttäjätestauksella tarkoitetaan tuotteen tai sen prototyypin testauttamista todellisilla käyttäjillä. Kehittäjät

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

VirtuaaliAMK Työasemakäyttöliittymien suunnittelu > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%)

VirtuaaliAMK Työasemakäyttöliittymien suunnittelu > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain VirtuaaliAMK Työasemakäyttöliittymien suunnittelu > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien

Lisätiedot

Sisältö. Päivitetty viimeksi 31.8.2011 Sivu 2 / 14

Sisältö. Päivitetty viimeksi 31.8.2011 Sivu 2 / 14 Ylläpitäjän ohje Sisältö Ylläpitäjän ohje... 1 Yleistä... 3 Vinkkejä ylläpitäjälle... 3 Osoitteet... 3 Internet-selain ja Flash-laajennus... 3 Julkinen sivunäkymä ja ylläpitonäkymä eri välilehdissä...

Lisätiedot

Ohjeistus yhdistysten internetpäivittäjille

Ohjeistus yhdistysten internetpäivittäjille Ohjeistus yhdistysten internetpäivittäjille Oman yhdistyksen tietojen päivittäminen www.krell.fi-sivuille Huom! Tarvitset päivittämistä varten tunnukset, jotka saat ottamalla yhteyden Kristillisen Eläkeliiton

Lisätiedot

Oulun ja Pohjois Karjalan ammattikorkeakoulu Virtuaalivasikan kasvatuspeli v. 0.5 > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%)

Oulun ja Pohjois Karjalan ammattikorkeakoulu Virtuaalivasikan kasvatuspeli v. 0.5 > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Oulun ja Pohjois Karjalan ammattikorkeakoulu Virtuaalivasikan kasvatuspeli v. 0.5 > 80 % 80 60 % 60 50 % < 50

Lisätiedot

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

TIEDEPOSTERI. - Viestinnän välineenä. Marisa Rakennuskoski TIEDEPOSTERI - Viestinnän välineenä Marisa Rakennuskoski POSTERILAJIT Mainosposteri(pääpaino kuvilla ja visuaalisuudella) Ammatillinenposteri(vapaamuotoinen, esim. jonkin projektin tapahtumia kuvaava,

Lisätiedot

Käytettävyys www-sivujen suunnittelussa Anna Perttilä

Käytettävyys www-sivujen suunnittelussa Anna Perttilä Käytettävyys www-sivujen suunnittelussa Anna Perttilä 1 Mitä käytettävyys on 2 Tavoite, kohderyhmä ja motiivi 3 Ymmärrettävyys 4 Www-sivusto on kokonaisuus 5 Konkreettista www-suunnittelussa 5.1 Ohjeisto

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

Tekstieditorin käyttö ja kuvien käsittely

Tekstieditorin käyttö ja kuvien käsittely Tekstieditorin käyttö ja kuvien käsittely Teksti- ja kuvaeditori Useassa Kotisivukoneen työkalussa on käytössä monipuolinen tekstieditori, johon voidaan tekstin lisäksi liittää myös kuvia, linkkejä ja

Lisätiedot

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli. HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan

Lisätiedot

Yliopistojen erilliset palautteet. Webropol kyselyn tulokset. RAPORTTI 2 Uudet värit portaaliin Testipäivä: 26.9.2011 sekä kysely Webropolissa

Yliopistojen erilliset palautteet. Webropol kyselyn tulokset. RAPORTTI 2 Uudet värit portaaliin Testipäivä: 26.9.2011 sekä kysely Webropolissa Palvelukonsortion johtoryhmän kokous 3-2011- 3.10.2011 RAPORTTI 2 Uudet värit portaaliin Testipäivä: 26.9.2011 sekä kysely Webropolissa Yliopistojen erilliset palautteet Helsingin yliopisto LIITE R1 Turun

Lisätiedot

julkaiseminen verkossa

julkaiseminen verkossa julkaiseminen verkossa SuPerin webmastereiden koulutuspäivä Viestintä-Piritta Piritta Seppälä Vuosi 2015 www.viestintapiritta.fi viestintä-pirittan piritta @piritta Sosiaalisen median kouluttaja ja asiantuntija

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

Kyläsivujen InfoWeb-ohje

Kyläsivujen InfoWeb-ohje Kyläsivujen InfoWeb-ohje Kirjoita internet-selaimesi osoitekenttään kyläsivujen hallintaosoite; www.yla -savo.fi/admin Saavut seuraavalle sivulle, johon kirjoitat käyttäjätunnuksesi ja salasanasi: Paina

Lisätiedot

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/ Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,

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

PDF-tiedostojen optimointi hakukoneille

PDF-tiedostojen optimointi hakukoneille PDF-tiedostojen optimointi hakukoneille PDF-tiedostojen optimointi herättää ristiriitaisia tunteita. Jotkut väittävät, että PDF:illä ei ole mitään arvoa hakukoneoptimointimielessä, toiset taas puhuvat

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

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

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

24h Admin V1.00 20.11.2004 / 24h_Admin_v100.pdf 1/9

24h Admin V1.00 20.11.2004 / 24h_Admin_v100.pdf 1/9 24h Admin V1.00 20.11.2004 / 24h_Admin_v100.pdf 1/9 Copyright Yleiskuvaus 1. Perusasioita kirjautumisesta 2. Kirjautuminen 3. Sivut 4. Yläpalkki 5. Sivujen kuvaukset 5.1 Versiotiedot 5.2 Pääsivu 5.3 Valikon

Lisätiedot

Suomen virtuaaliammattikorkeakoulu Erilaisia käyttöliittymiä v.0.5 > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Erilaisia käyttöliittymiä v.0.5 > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu Erilaisia käyttöliittymiä v.0.5 > 80 % 80 60 % 60 50 % < 50 % Arviointialue

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

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word

Lisätiedot

Graafinen ohjeistus. Taustaa. Logon elementit. Mittasuhtet. Suoja-alue. Värimääritykset. Logon sijoittelu. Kirjasintyypit eli typografia

Graafinen ohjeistus. Taustaa. Logon elementit. Mittasuhtet. Suoja-alue. Värimääritykset. Logon sijoittelu. Kirjasintyypit eli typografia Graafinen ohjeistus Taustaa Logon elementit Mittasuhtet Suoja-alue Värimääritykset Logon sijoittelu Kirjasintyypit eli typografia Taustaa Nuorten Kotkien alkuperäinen logo on vaakunamalliseen kehyksen

Lisätiedot

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

Digi-TV:n käytettöliittymät Digi-TV:n käytettöliittymät Helppokäyttöisyys Tehokkuus Luotettavuus Virheettömyys Käyttäjän tyytyväisyys Käytettävyys Käyttäjäkeskeinen suunnittelu 19.11.2001 Sofia Digital Oy sivu 3 Käyttäjä, katsoja

Lisätiedot

1. HARJOITUS harjoitus3_korjaus.doc

1. HARJOITUS harjoitus3_korjaus.doc Word - harjoitus 1 1. HARJOITUS harjoitus3_korjaus.doc Kopioi itsellesi harjoitus3_korjaus.doc niminen tiedosto Avaa näyttöön kopioimasi harjoitus. Harjoitus on kirjoitettu WordPerfet 5.1 (DOS) versiolla

Lisätiedot

Moodle-oppimisympäristö

Moodle-oppimisympäristö k5kcaptivate Moodle-oppimisympäristö Opiskelijan opas Sisältö 1. Mikä on Moodle? 2. Mistä löydän Moodlen? 3. Kuinka muokkaan käyttäjätietojani? 4. Kuinka ilmoittaudun kurssille? 5. Kuinka käytän Moodlen

Lisätiedot

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla 1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.

Lisätiedot

Suomen virtuaaliammattikorkeakoulu Varför behöver man brandmurar? V. 1.0 > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Varför behöver man brandmurar? V. 1.0 > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu Varför behöver man brandmurar? V. 1.0 > 80 % 80 60 % 60 50 % < 50 % Arviointialue

Lisätiedot

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä Viestintäpalvelut 9.6.2015 1 Sivupohjan tekeminen Ennen kuin alat tekemään hankkeen sivuja, tilaa Viestintäpalveluilta hankesivupohja ja ilmoita

Lisätiedot

Aika: keskiviikko 26.10. klo 9-16 Paikka: Ag Alfa ja Ag C234.1

Aika: keskiviikko 26.10. klo 9-16 Paikka: Ag Alfa ja Ag C234.1 Käytettävyyspäivän raportti Aika: keskiviikko 26.10. klo 9-16 Paikka: Ag Alfa ja Ag C234.1 Päivän aikataulu: 09.00-11.30 Luento-osuus Ag Alfa 11.30-12.30 Lounastauko 12.30-14.00 Ryhmätöiden teko projektitiloissa

Lisätiedot

JWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari

JWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari JWT 2016 luento 11 to 21.4.2016 klo 14-15 Aulikki Hyrskykari PinniB 1097 1 Viime luennolla o AJAX ja JSON, harjoitustyön tehtävänanto, vierailuluento avoimesta datasta Tänään o APIt rajapinnoista yleisesti

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

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

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa: XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa: Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue),

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

STEAM PALVELUN ARVIOINTISUUNNITELMA. MAT-81100 Verkkopalvelun laadukkuus ja arviointi

STEAM PALVELUN ARVIOINTISUUNNITELMA. MAT-81100 Verkkopalvelun laadukkuus ja arviointi STEAM PALVELUN ARVIOINTISUUNNITELMA MAT-81100 Verkkopalvelun laadukkuus ja arviointi Ryhmä: SteamRunk Janne Mäkitalo Petteri Nyrhilä Juho Koskenranta Ville Tyrväinen 1.10.2013 i Sisällysluettelo 1. STEAM

Lisätiedot

TUTKIMUKSEN LÄHTÖKOHTIA, TOTEUTUS ja HYÖDYT Kalle Saastamoinen Lappeenrannan Teknillinen Yliopisto LTY 2003

TUTKIMUKSEN LÄHTÖKOHTIA, TOTEUTUS ja HYÖDYT Kalle Saastamoinen Lappeenrannan Teknillinen Yliopisto LTY 2003 KÄYTETTÄVYYDEN TUTKIMISELLAKO TOIMIVAMMAT WWW-SIVUT? TUTKIMUKSEN LÄHTÖKOHTIA, TOTEUTUS ja HYÖDYT Kalle Saastamoinen Lappeenrannan Teknillinen Yliopisto LTY 2003 Sisältö Mitä on tarkoitetaan sanalla käytettävyys

Lisätiedot

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä Verkkojulkaiseminen Minna Väisänen HTML5-tehtävä Kirjoita Dreamweaverissa oheisen nettisivun koodi. Lisää xx-kohtiin omat tietosi. Kuvan nimi on joki.jpg. Ensin tehdään sivusto ja sitten yksittäinen sivu.

Lisätiedot

ipad-mainokset Yleisiä ohjeita ja tekniikka lyhyesti www.richie.fi

ipad-mainokset Yleisiä ohjeita ja tekniikka lyhyesti www.richie.fi ipad-mainokset Yleisiä ohjeita ja tekniikka lyhyesti www.richie.fi Koko sivun ipad-mainoksissa yhdistyvät uusien teknologioiden ja printtimainonnan parhaat ominaisuudet: Koko sivun mainos ei keskeytä,

Lisätiedot

HAKUKONEOPTIMOINTI (SEO)

HAKUKONEOPTIMOINTI (SEO) HAKUKONEOPTIMOINTI (SEO) Renne Brandt TV09S1M1 Mediatekniikan seminaari SISÄLTÖ 1. Mitä ovat hakukoneet? 2. Mitä hakukoneoptimointi on? 3. Hakukoneiden käyttö 4. Hakukoneystävällisten suunnittelun perusteet

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

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

KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA

KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA Ohjeistuksessa käydään läpi kuvan koon ja kuvan kankaan koon muuntaminen esimerkin avulla. Ohjeistus on laadittu auttamaan kuvien muokkaamista kuvakommunikaatiota

Lisätiedot

1 www-sivujen teko opetuksessa

1 www-sivujen teko opetuksessa RäsSe, Tekniikka/Kuopio Sivu 1 1 www-sivujen teko opetuksessa 1.1 Yleistä Mitä materiaalia verkkoon? Tyypillisesti verkossa oleva materiaali on html-tiedostoja. Näitä tiedostoja tehdään jollakin editorilla

Lisätiedot

Miten näkövammainen eroaa 'tavallisesta' käyttäjästä?

Miten näkövammainen eroaa 'tavallisesta' käyttäjästä? Luennon sisältö 1. Miten näkövammaiset eroaa "tavallisesta" käyttäjästä? 2. Tilastoja 3. Näkövammaiselle haastavia tilanteita 4. Käytettävissä olevia apuvälineitä 5. Miten ja mistä apuvälineitä saa? 6.

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

Silmänliike kertoo totuuden. Otavamedian asiakastilaisuuden esitys Musiikkitalossa 29.10.2013 Tiivistelmä Mikko Puosi

Silmänliike kertoo totuuden. Otavamedian asiakastilaisuuden esitys Musiikkitalossa 29.10.2013 Tiivistelmä Mikko Puosi Silmänliike kertoo totuuden Otavamedian asiakastilaisuuden esitys Musiikkitalossa 29.10.2013 Tiivistelmä Mikko Puosi Silmänliiketutkimus Ruudulla, lukulaitteella tai älypuhelimella näytetään tutkittava

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

Johdatus rakenteisiin dokumentteihin

Johdatus rakenteisiin dokumentteihin -RKGDWXVUDNHQWHLVLLQGRNXPHQWWHLKLQ 5DNHQWHLQHQGRNXPHQWWL= rakenteellinen dokumentti dokumentti, jossa erotetaan toisistaan dokumentin 1)VLVlOW, 2) UDNHQQHja 3) XONRDVX(tai esitystapa) jotakin systemaattista

Lisätiedot

Elisa Kirja. PDF e-kirjojen käsittelyohjeet

Elisa Kirja. PDF e-kirjojen käsittelyohjeet Elisa Kirja PDF e-kirjojen käsittelyohjeet Elisa Oyj ja yhteistyökumppanit 2 (5) Ulkoasun ja sisällön muokkaus E-kirja julkaisu ei saa koostua monesta PDF-tiedostosta. Liitä PDF-tiedostot tarvittaessa

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

Tavallisen videomainoksen sijasta Ruudussa voidaan mainostauolla esittää dynaamisia spotteja.

Tavallisen videomainoksen sijasta Ruudussa voidaan mainostauolla esittää dynaamisia spotteja. RUUTU DYNAAMINEN SPOTTI TEKNISET OHJEET Versio 1.0 Yleistä Tavallisen videomainoksen sijasta Ruudussa voidaan mainostauolla esittää dynaamisia spotteja. Dynaamiset spotit ovat flash mainoksia, jotka mahdollistavat

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