Animaatio Web-sivuilla



Samankaltaiset tiedostot
Mediaelementit. Mirja Jaakkola

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

ARVO - verkkomateriaalien arviointiin

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

Ensin klikkaa käynnistä-valikkoa ja sieltä Kaikki ohjelmat valikosta kaikki ohjelmat

PowerPoint -esitysgrafiikka

Linkkitekstit. Kaikkein vanhin WWW-suunnitteluohje:

ELOKUVATYÖKALUN KÄYTTÖ ANIMAATION LEIKKAAMISESSA. Kun aloitetaan uusi projekti, on se ensimmäisenä syytä tallentaa.

Moodle 2.2 pikaohje. 1. Kirjautuminen ja omat kurssit (Työtilat) 1. Mene internet-selaimella osoitteeseen

KTKO104 Demo 3. Marika Peltonen

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

,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU

Ohjeita informaation saavutettavuuteen

URL-osoitteiden suunnittelu

Punomo Tee itse -julkaisun tekeminen

Facebook-sivun luominen

TERVETULOA CHROME-TYÖASEMALLE!

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

KÄYTTÖÖN. Koulukirjat tietokoneelle PIKAOHJEET PAPERPORT -OHJELMAN. Sisällysluettelo

Selkosanakirja sdfghjklöäzxcvbnmqwertyuiopåasdfghjklöäzxcvbnmq. Tietokoneet. wertyuiopåasdfghjklöäzxcvbnmqwertyuiopåasdfghjk 1.4.

Condes. Quick Start opas. Suunnistuksen ratamestariohjelmisto. Versio 7. Quick Start - opas Condes 7. olfellows 1.

Siirtymät, tehosteet, daesitys Sisällysluettelo

ARVO - verkkomateriaalien arviointiin

Kuvat Web-sivuilla. Keskitie:

Heli Karjalainen ja Eric Rousselle Discendum Oy

Palauta tehtävä nimellä E1_Omasukunimi.pptx Optimaan. Tallenna tiedosto myös USB -tikulle.

Kolme videopalvelua yhdellä alustalla - osaamista yhteistyössä

Skype for Business ohje

Luokka näytön käyttäminen opetuksessa.

Flow!Works Pikaohjeet

RACE-KEEPER COMPARO PC-OHJELMAN PIKAOHJE

Kirkkopalvelut Office365, Opiskelijan ohje 1 / 17 IT Juha Nalli

Skype for Business ohjelman asennus- ja käyttöohje Sisällys

Opiskelijalistojen tulostaminen, opiskelijoiden hallinta ja sähköpostin lähettäminen

MITEN KIRJAUDUN ADOBE CONNECTIIN?

Oma kartta Google Maps -palveluun

Tekstieditorin käyttö ja kuvien käsittely

Suomen virtuaaliammattikorkeakoulu Teknillinen mekanikka fem tutorials > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

VirtaaliAMK Virtuaalihotelli > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

RSS -syötteen tilaaminen

MITEN KIRJAUDUN ADOBE CONNECTIIN?

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä

Helppokäyttöisyyttä Windows Vista käyttöjärjestelmän asetuksilla

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

TAMK Ohjelmistotekniikka G Graafisten käyttöliittymien ohjelmointi Herkko Noponen Osmo Someroja. Harjoitustehtävä 2: Karttasovellus Kartta

Portfolio OneNotessa

Suomen virtuaaliammattikorkeakoulu VPN peli > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

OpeOodi Opiskelijalistojen tulostaminen, opiskelijoiden hallinta ja sähköpostin lähettäminen

Webforum. Version 14.4 uudet ominaisuudet. Viimeisin päivitys:

Videovastaanotto. Ohje asiakkaalle

Esitysgrafiikka. Microsoft PowerPoint 2010 PERUSMATERIAALI. Kieliversio: suomi Materiaaliversio 1.0 päivitetty

REITTIHÄRVELIN KÄYTTÖOHJE (ESIM. ILTARASTIEN YHTEYDESSÄ)

FrontPage Näkymät

Virtuaaliammattikorkeakoulu Seksuaaliterveyden edistäminen v. 0.9 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu Tapauskertomus tietojärjestelmähanke > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

EeNet materiaalit ohje

Skype for Business ohjelman asennus- ja käyttöohje Sisällys

Pakkauksen sisältö. Ominaisuudet. - PSP MP5-soitin. - USB-kytkentäkaapeli - kuulokkeet - englanninkielinen pikaopas - seinäadapteri latausta varten

Office365 Tampereen yliopiston normaalikoulussa

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

Suomen virtuaaliammattikorkeakoulu Vetokoe v.0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Helsingin ammattikorkeakoulu Stadia Verkkosivujen silmäiltävyys ja selailtavuus v. 0.9 > 80 % % % < 50 %

Savonia ammattikorkeakoulu Miten tilintarkastajan tulee toimia? v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

UpdateIT 2010: Editorin käyttöohje

Kuvaruudun striimaus tai nauhoitus. Open Broadcaster Software V.20. Tero Keso, Atso Arat & Niina Järvinen (muokattu )

Windows 8.1 -käyttöjärjestelmän käytön aloitus

OpeOodi Opiskelijalistojen tulostaminen, opiskelijoiden hallinta ja sähköpostin lähettäminen

Office 365 OneDrive Opiskelijan ohje 2017

Ksenos Prime Käyttäjän opas

Suomen virtuaaliammattikorkeakoulu XML_mark_up_language > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Muita kuvankäsittelyohjelmia on mm. Paint Shop Pro, Photoshop Elements, Microsoft Office Picture Manager

Suomen Virtuaaliammattikorkeakoulu Kasvinsuojelu ruiskutustekniikka v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Sikarodut > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

1 Word- asiakirjan avaaminen Power Pointissa

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

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

Avaa ohjelma ja tarvittaessa Tiedosto -> Uusi kilpailutiedosto

VERKKOKIRJOJEN JA DIGILEHDEN KÄYTTÖOHJE

Riikka Marttinen, Helsingin Tikoteekki, Windows 7:n helppokäyttötoiminnot

EuroTraffic Language Training

Perustietoja Mietoisten kyläportaalista Yhdistyksen ylläpitäjän kirjautuminen Yhdistyksen etusivun muokkaaminen... 2

Java Runtime -ohjelmiston asentaminen

idvd 5 ELOKUVAKASVATUS SODANKYLÄSSÄ Vasantie Sodankylä +358 (0) tommi.nevala@sodankyla.fi

Suomen virtuaaliammattikorkeakoulu Villan keritseminen, karstaus ja kehrääminen v.0.5 > 80 % % % < 50 %

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

Diakonia ammattikorkeakoulu Päihdetyön historia > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Archive Player Divar Series. Käyttöopas

MeetNow-palvelun käyttöopas

Suomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka templateaihio > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Laske Laudatur ClassPadilla

Sanomapavelinohjelmiston käyttöohje (Vanha versio RO)

AdobeConnect peruskäyttövinkkejä

Suomen virtuaaliammattikoulu Kaasutustekniikka v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaaliammattikorkeakoulu The XML Dokuments > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

WINDOWS MICROSOFT OUTLOOK 2010:N UUDET OMINAISUUDET...

Epooqin perusominaisuudet

NetMeetingiä voi käyttää esimerkiksi Internet puheluissa, kokouksissa, etätyössä, etäopiskelussa ja teknisessä tuessa.

Suomen virtuaaliammattikorkeakoulu Business in The EU v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Tampereen ammattikorkeakoulu Verkkokeskustelu > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

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

Transkriptio:

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, josko asian voisi esittää animaation sijaan tavallisella grafiikalla.

Oikein tehty animaatio liikkuu vain muutaman kerran ja pysähtyy sitten. Joidenkin mielestä animaatiot ovat hienoja tai ilmaisevat että sivuston tekoon on uhrattu paljon aikaa --> viesti statusarvosta ja hyvinvoinnista. Suurin osa käyttäjistä on sitä mieltä, että animaatiot ovat ärsyttäviä (erityisesti liikkuvat ja rullaavat tekstit).

Animaatiota voidaan hyödyntää tehokkaasti seitsemään eri tarkoitukseen: siirtymien välisen jatkuvuuden osoittaminen siirtymän suunnan osoittaminen ajan myötä tapahtuvan muutoksen esittäminen näytön tehokas hyödyntäminen graafisten esitysten tekeminen kolmiulotteisten rakenteiden havainnollistaminen huomion kiinnittäminen

Siirtymien välisen jatkuvuuden osoittaminen Kun tiloja on vähintään kaksi, on tilojen väliset muutokset helpompi ymmärtää jos siirtyminen on animoitu. esimerkki: ensimmäisen Javaohjelmointikilpailun voittanut ohjelma, jossa Pythagoraan lause todistetaan liikuttelemalla erilaisia kolmi- ja nelikulmioita.

Suunnan osoittaminen siirryttäessä Esimerkkejä: Objektijoukossa eteenpäin lehteileminen oikealta vasemmalle etenevällä animoidulla liikkeellä. Zoomaus jossa kuvaketta napauttamalla aukeaa ikkuna.

Ajan myötä tapahtuvan muutoksen osoittaminen Esimerkiksi sademetsän tuhoutumista kuvaava kartta, jossa metsän peittämä alue muuttuu ajan myötä.

Näytön tehokas hyödyntäminen Esimerkiksi kuvakartta, jossa selitykset tulevat esiin kun käyttäjä liikuttaa hiirtä linkkien yli.

Graafisten esitysten tehostaminen Esimerkiksi ikonin animoiminen silloin kun käyttäjä on vienyt hiiren ikonin päälle.

Kolmiulotteisen rakenteen havainnollistaminen helpottaa ymmärtämään kolmiulotteista rakennetta 2-ulotteiselta näytöltä kohdetta ei välttämättä tarvitsee pyörittää täysin ympäri, yleensä pieni edestakainen liike auttaa

Huomion kiinnittäminen esimerkiksi luokkakuva, joka osoittaa henkilön kuvasta animoidulla nuolella tai ympyrällä toinen esimerkki: paljon materiaalia sisältävä sivu, jonka keskellä oleva uusi tai tärkeä asia osoitetaan animaatiolla

Video Web-sivuilla Videoiden käyttöä pyrittävä välttämään hitaiden vasteaikojen vuoksi. Kuvan laatu pakkauksen takia usein huono ja kuva nykii vastenmielisesti. Kannattaa käyttää vain tekstin tukena.

Video Web-sivuilla Järkeviä käyttötapoja: sellaisten perinteisten medioiden mainostamiseen, joiden mainonnassa on totuttu käyttämään trailereita puhujan persoonallisuuden esitteleminen käyttäjille liikkeen esittäminen, esimerkiksi tuoteesittelyvideo kolikonlaskukoneesta

Video Web-sivuilla Videostreamin sijaan käyttäjälle kannattaa yleensä tarjota ladattavaksi videokuvasta tehty tiedosto. Videon katselussa ei ole vuorovaikutteisuutta, joka on Webin perusidea. Tästä syystä videon maksimipituudeksi pitäisi rajoittaa minuutti.

Video Web-sivuilla 30 minuuttisen luennon taltiointi videoksi ei toimi Webissä. Sen sijaan luennon sisältö tulee tarjota tekstitiedostoissa, joihin liitetään muutamia kuvia puhujasta ja yleisöstä ja korkealaatuiset kopiot materiaalista. Puhujan persoonallisuus voidaan lopuksi välittää minuutin mittaisella videolla tilaisuuden parhaista paloista.

Video Web-sivuilla Pitkä multimediaesitys tulee jakaa osiin siten, että käyttäjä voi valita haluamansa osan valikosta. Linkit eriin osiin sijoitetaan sivulle, jolla on luettelo ja lyhyt yhteenveto saatavilla olevista videoista ja mielenkiintoisimmista mahdollisesti pieni kuvakin.

Ääni Web-sivuilla Äänen etu on riippumattomuus näytöstä. Ääntä kannattaa käyttää esimerkiksi seuraavissa tilanteissa: musiikkikappaleesta kertominen puhujan persoonan välittäminen sanojen ääntämisen opettaminen äänitehosteet, esimerkiksi uuden tiedon saapuminen

Ääni Web-sivuilla Laadukkaasti toteutettu äänimaailma muodostaa merkittävän osan käyttäjän kokemuksista. Klassinen esimerkki: Koehenkilöt väittivät erään pelin grafiikan parantuneen kun pelkästään pelin äänimaailmaa kehitettiin.

Ääni Web-sivuilla Tehosteäänten tulee olla hiljaisia ja otettavissa pois päältä.

Lähteet Jakob Nielsen: WWW-suunnittelu