IHTE-2100 Käyttöliittymäsuunnittelun perusteet

Koko: px
Aloita esitys sivulta:

Download "IHTE-2100 Käyttöliittymäsuunnittelun perusteet"

Transkriptio

1 IHTE-2100 Käyttöliittymäsuunnittelun perusteet Lukuvuosi Luentomoniste v. 1.1 osa a / Melakoski-Vistbacka SISÄLLYSLUETTELO 1. ALUKSI STANDARDIT KÄYTTÖLIITTYMÄSUUNNITTELUSSA VISUAALINEN AAKKOSTO JA TYYLIOPPAAT LÄHTEET: KÄYTTÖLIITTYMÄN VISUAALINEN SUUNNITTELU VISUAALISET SUUNNITTELUPERIAATTEET Yksinkertaisuus Selkeys Johdonmukaisuus Miellyttävä ulkonäkö SOMMITTELU: NÄYTÖN TASAPAINO KOLMIULOTTEISUUS KÄYTTÖLIITTYMÄSSÄ NÄKÖHARHAT KÄYTTÖLIITTYMÄSSÄ SOMMITTELU: TYPOGRAFIA VÄRIT KÄYTTÖLIITTYMÄSSÄ Värisokeat käyttäjät Marcusin kymmenen käskyä MUITA SUUNNITTELUOHJEITA GRAAFISEN SUUNNITTELUN TARKASTUSLISTA LÄHTEET KUVAKKEET (IKONIT) LÄHTEET GRAAFISEN KÄYTTÖLIITTYMÄN ELEMENTTEJÄ...25 Lukuvuosi IHTE / Melakoski-Vistbacka

2 1. Aluksi IHTE-2100 Käyttöliittymäsuunnittelun perusteet on uusi kurssi, jonka taustalla on laajempi Käytettävyys kurssi. Pruju ei (vielä tässä vaiheessa) vastaa kirjaa, joten se ei sovellu sellaisenaan itseopiskelumateriaaliksi, vaan se on tarkoitettu luentojen, harjoitusten ja harjoitustyön tueksi. Esimerkiksi luennoilla käydään varmasti läpi esimerkkejä, joita ei tästä prujusta löydy. Käytännössä syksystä 2005 alkaen on aikaisempi pruju jaettu kahtia kursseille OHJ Käytettävyyden perusteet ja OHJ-7200 Käyttöliittymäsuunnittelun perusteet. Uuttakin materiaalia on toki lisätty. Vaikka pruju on ennen julkaisua tavattu moneen kertaan läpi, on jonnekin saattanut vielä jäädä viittauksia prujun niihin osiin, jotka siirtyivät Käytettävyyden perusteet kurssille. Tästä prujusta löytyy varmasti vielä paljon korjattavaa, lisättävää ja asioita voisi muotoilla paremmin. Kaikki isot ja pienet korjausehdotukset sekä ideat materiaalin kehittämisen suhteen otetaan ilolla vastaan osoitteessa Mikäli prujusta löytyy kurssin aikana oleellista korjattavaa, ilmoitetaan tästä kurssin uutisryhmässä tut.ihte.kasuper. Tarkista kurssin WWW-sivuilta, että sinulla on kurssin lopuksi kaikki luentomonisteen osat ja liitteet. Kurssin tavoitteena on tutustuttaa opiskelijat käyttöliittymäsuunnittelun sekä arvioinnin perustietoihinja termistön. Kurssin jälkeen opiskelija tuntee erilaisia käyttöliittymätyyppejä, vuorovaikutustapoja sekä malleja. Opiskelija osaa soveltaa käytettävyyden heuristiikkoja ja suunnittelusääntöjä käyttöliittymäsuunnittelussa ja käytettävyyden arvioinnissa, sekä perustella tehdyt suunnitteluratkaisut käyttäjätarpeiden ja tehtäväkulkujen pohjalta. Allekirjoittaneen lisäksi sisältöä prujuun on tuottanut Siina Jokinen. Liitteissä on erikseen mainittu tekijöiden nimet. Suurkiitos myös kurssin assareille sekä kaikille opiskelijoille, jotka ovat sisältöä kommentoineet. Tampereen Hervannassa joulukuussa 2007 Suvi Melakoski-Vistbacka Lukuvuosi IHTE / Melakoski-Vistbacka

3 2. Standardit käyttöliittymäsuunnittelussa Johdonmukaisuus on yksi tärkeä tekijä käyttöliittymäsuunnittelussa. Yrityksen ja tuoteperheen tai tuotteen sisällä voi olla omia toimintamalleja, visuaalisia aakkostoja ja ohjeistoja, joita noudatetaan. Aina kannattaa kuitenkin tarkistaa, onko asiaa koskien jo olemassa johdonmukaisuutta lisäävä standardi. Standardi on toistuvaan tapaukseen tarkoitettu, yhdenmukainen ratkaisu. Se on sovittu toimintatapa: sitä ei ole pakko noudattaa, mutta standardeista yleensä hyötyy sekä tuotteen valmistaja että käyttäjä. Standardeja käytetään yhteensopivuuden, turvallisuuden ja laadun takaamiseen. Loppukäyttäjän kannalta standardien noudattaminen lisää johdonmukaisuutta, kun aiemmin opitut asiat voidaan siirtää myös uuteen ympäristöön ja uuden tuotteen käytön opetteluun kuluu vähemmän aikaa. Näin käyttötilanteessa virheet vähenevät ja tuottavuus sekä tehokkuus kasvavat. Standardien avulla voidaan saavuttaa myös taloudellisia säästöjä. Koska tuote on toimintatavaltaan tuttu, käyttäjät tarvitsevat vähemmän tukipalveluita. Tuotekehistyskustannukset vähenevät pitkällä aikavälillä, kun kaikkia käyttöliittymän osia tai tuotteen komponentteja ei tarvitse suunnitella ja toteuttaa uudelleen. Yleisten standardien käyttö on ilmaista: mitään lisenssimaksujen tyyppisiä maksuja ei ole. Käyttöönotto ei kuitenkaan käytännössä ole ilmaista: standardikirjat maksavat, ja valmiin standardin käyttöönotto vie sekin aikaa ja muita resursseja, ennen kuin se saadaan integroitua osaksi koko tuotekehitystä. Standardit helpottavat kotimaista ja kansainvälistä kauppaa. Kaikille on varmasti selvää, mitä hyötyä on vaikkapa siitä, että eri mikroaaltouunien, tietokoneiden ja muiden sähkölaitteiden töpselit ovat samanlaisia ja sopivat muiden valmistajien sähköpistokkeisiin. Sama pätee soveltaen myös ohjelmistoihin ja käyttöliittymiin. Standardeja on kolmea päätyyppiä kansalliset ja kansainväliset standardit: määrittelevät pääosin löyhästi esimerkiksi miltä käyttöliittymän tulisi näyttää. Ovat pääosin korkeamman tason standardeja kuin teollisuusstandardit. teollisuusstandardit: matalan tason standardeja, jotka määrittelevät konkreettisesti asioita, jotka ovat tärkeitä esimerkiksi tuotekomponenttien yhteensopivuuden kannalta. sisäiset standardit ovat jonkin yrityksen sisällä kehitettyjä standardeja, joita ko. yritys noudattaa. Standardit voidaan jaotella ryhmiin myös sen mukaan, mitä aluetta ne koskevat: 1. käytön tehokkuus sekä käyttötyytyväisyys tietyssä ympäristössä 2. tuotekehitysprosessi 3. käyttöliittymä ja vuorovaikutus 4. organisaation kyky integroida käyttäjäkeskeinen suunnittelu osaksi tavanomaisia prosesseja Lukuvuosi IHTE / Melakoski-Vistbacka

4 Taulukko 1. Joitakin käytettävyyteen liittyviä standardeja. Standardi Nimi Ryhmä ISO/IEC Software Engineering - Product quality - Part 1: 1 Quality model ISO Usability of everyday products 1 ISO/IEC TR Software Engineering - Product quality Part 4: 1 Quality in use metrics ISO Guidance on Usability 1 ISO/IEC Guidelines for the design and preparation of 2 software user documentation ISO/IEC Software user documentation process 2 ISO Human-centred design processes for interactive 2 systems ISO/IEC Information Technology - Evaluation of Software 2 Products ISO TR Usability methods supporting human centered 2 design ISO/IEC TR Software Engineering - Product quality Part 2 3 External metrics ISO 9241 Ergonomic requirements for office work with visual 3 display terminals. Parts 3-9 ISO/IEC TR Software Engineering - Product quality Part 3 3 Internal metrics ISO/IEC Dialogue interaction - Cursor control for text editing 3 ISO 9241 Ergonomic requirements for office work with visual 3 display terminals. Parts ISO/IEC Icon symbols and functions 3 ISO Ergonomic design of control centres 3 ISO Ergonomic requirements for work with visual 3 displays based on flat panels ISO Software ergonomics for multimedia user interfaces 3 ISO/IEC Pen-based interfaces - Common Gestures for text 3 editing with pen-based systems IEC TR Guidelines for the user interfaces in multimedia 3 equipment for general purpose use ISO/IEC Information Technology - User interface for mobile 3 tools ISO Ergonomic requirements and measurement 3 techniques for electronic visual displays ISO TR Ergonomics of human-system interaction - Humancentred 4 lifecycle process descriptions ISO Part 1: General Introduction 4 ISO Part 2:Guidance on task requirements 4 ISO Ergonomic principles related to mental workload - 4 General terms and definitions ISO DTS Guidance on accessibility for human-computer interfaces 4 Lukuvuosi IHTE / Melakoski-Vistbacka

5 Näistä 1, 2 ja 4 kuvaavat ns. prosessiorientoituneita standardeja, jotka määrittelevät proseduureja ja prosesseja, joita tulee seurata. Tuotesuuntautuneet standardit (kohta 3) määrittelevät käyttöliittymältä vaadittuja ominaisuuksia. Tärkeimmät käytettävyyteen liittyvät standardit ovat: ISO : 1998 Guidance on Usability, joka sisältää mm. käytettävyyden määritelmän ISO 13407:1999 Human-centred design processes for interactive systems, joka määrittelee ihmiskeskeisen (käyttäjäkeskeisen) suunnitteluprosessin interaktiivisille järjestelmille Käyttöliittymästandardit ovat lisääntyneet huomattavasti 1990-luvulla. 2.1 Visuaalinen aakkosto ja tyylioppaat Käyttöliittymäsuunnittelussa voidaan käyttää apuna myös visuaalisia aakkostoja ja tyylioppaita. Visuaalinen aakkosto on graafinen merkistö, joka on luotu yhdistämään yrityksen, tuotteen tai tuoteperheen käyttöliittymiä. Yhtenäinen visuaalinen ilme tuo johdonmukaisuutta ja auttaa käyttäjää luomaan käsitemalleja ja tuttuja koodauksia. Se parantaa opittavuutta ja tunnistettavuutta. Visuaaliseen merkistöön kuuluvat mm. ikonit, kuvat yms kuviot, värit, muodot jne. Tyylioppaat liittyvät tiettyyn ympäristöön (esim. Windows-tyyliopas). Tyyliopas kertoo millainen käyttöliittymän tulisi olla ja miten eri elementtien tulisi toimia. Siinä ohjeistetaan rakentamaan käyttöliittymä hyviä suunnitteluperiaatteita noudattaen. Suunnitteluperiaatteet ja tyylioppaat tuntevan henkilön tulisi tarkastaa, noudattaako suunniteltu käyttöliittymä näitä. Tarkoituksena on varmistua, että tyyliohjeet sekä käytettävyysohjeet on huomioitu. Tyylioppaassa voidaan myös määritellä visuaalinen aakkosto. Etuina voidaan nähdä, että tyylioppaat ilmentävät hyviä käytäntöjä käyttöliittymäsuunnittelussa tyylioppaiden noudattaminen lisää näyttöjen yhdenmukaisuutta ja johdonmukaisuutta tyylioppaan käyttäminen saattaa lyhentää suunnitteluun käytettyä aikaa yleisten käytettävyysohjeiden noudattaminen nostaa käyttöliittymän laatua Muutamia tyylioppaita esimerkiksi MSDN Library: GUI Design Handbook, Susan Fowler. McGraw Hill. About Face: The Essentials of User Interface Design, Alan Cooper. IDG Books GUI Design for Dummies, Laura Arlov. IDG Books Microsoft Windows User Experience. Microsoft Press. Lukuvuosi IHTE / Melakoski-Vistbacka

6 2.2 Lähteet: Nielsen, J. Usability engineering. Academic Press, 1993 SFS-käsikirja 1. Standardien tarkoitus ja käyttö. Suomen standardisoimisliitto Usability Net. International standards for HCI and usability. Lukuvuosi IHTE / Melakoski-Vistbacka

7 3. Käyttöliittymän visuaalinen suunnittelu Tässä luvussa käsitellään käyttöliittymän visuaaliseen suunnitteluun liittyviä asioita. The way the pieces are put together is usually as important as the pieces themselves. 3.1 Visuaaliset suunnitteluperiaatteet (Mullet & Sano) Käyttöliittymän visuaaliset suunnitteluperiaatteet (Mullet & Sano) ovat: 1. Yksinkertaisuus (simplicity) 2. Selkeys (clarity) 3. Johdonmukaisuus (consistency) 4. Miellyttävä ulkonäkö Näitäkin suunnitteluperiaatteita voidaan käyttää tarkistuslistan tavoin. Ne tarjoavat ohjenuoran visuaaliselle suunnittelulle. Kun periaatteet tiedetään, niitä voidaan toki tarvittaessa hyvin perustellusta syystä rikkoa joissain tilanteissa Yksinkertaisuus Visuaalisella yksinkertaisuudella saavutettavia etuja ovat ymmärrettävyys (approachability): Tarjotaan käyttäjälle riittävästi visuaalisia vihjeitä, jotta käyttöliittymän toiminta voidaan ymmärtää yhdellä vilkaisulla. tunnistettavuus (recognizability): Suunnitellaan käyttöliittymän ulkoasusta riittävän yksinkertainen, jotta käyttäjä voi helpommin keskittyä olennaiseen. välittömyys (immediacy): Yksinkertaisuus nopeuttaa käyttötilannetta, koska se vähentää käyttäjän ajattelutyötä. käytettävyys (usability). Visuaalinen yksinkertaisuus voidaan saavuttaa, kun poistetaan kaikki visuaaliset yksityiskohdat, jotka eivät ole välttämättömiä käyttöliittymän ymmärtämisen ja toiminnan kannalta. Näin käyttäjän huomio keskittyy olennaiseen Selkeys Selkeyden tavoitteena on esittää visuaalisesti tiedon loogista organisointia. Keinoja ovat ns. hahmolait, joita hyödyntämällä voidaan selkiyttää käyttöliittymän visuaalista ilmettä ja välttää virhetoimintoja. Hahmolait perustuvat siihen, että ihmisen havaintojärjestelmä ryhmittelee yksittäiset ärsykkeet isommiksi kokonaisuuksiksi. Erillään olevat kuva-alkiot havaitaan saman kohteen osina ja ominaisuuksina ja kun ryhmittely tehdään uudestaan ja uudestaan, muodostuu yhä suurempia kokonaisuuksia. Käyttöliittymä on tehokas käyttää, kun eri elementit järjestyvät oikein kuvioiksi, ryhmiksi ja suuremmiksi ryhmiksi. Ihminen pyrkii aina muodostamaan näköhavainnoistaan merkityksellisiä kokonaisuuksia. Lukuvuosi IHTE / Melakoski-Vistbacka

8 Hahmolakeja ovat: läheisyys (proximity): kaksi visuaalista ärsykettä, jotka sijaitsevat lähellä toisiaan mielletään yhteenkuuluviksi. Esimerkiksi käyttöliittymässä syötekentän ja siihen kuuluvan selitetekstin tulisi olla lähellä toisiaan. samanlaisuus (similarity): kaksi visuaalista ärsykettä, joilla on jokin yhteinen ominaisuus mielletään yhteenkuuluviksi. Esimerkiksi jos WWW-sivuilla on alleviivausta tai tiettyä väriä on käytetty erottamaan linkit muusta tekstistä, ei tätä samaa visuaalista koodaustapaa tulisi käyttää tekstissä, joka ei olekaan linkki. sulkeutuvuus (closure): jos visuaaliset ärsykkeet sulkevat tai lähes sulkevat sisäänsä jonkin alueen, katsoja näkee ko. alueen. jatkuvuus (continuity): jos viivat leikkaavat toisiaan, katsoja jakaa kokonaisuuden selkeästi jatkuviin osiin. Esimerkiksi käyttäjä pystyy hahmottamaan ikkunointiin perustuvasta järjestelmästä, että ikkunat ovat päällekkäin. tuttuus/tunnistettavuus (familiarity): jos katsoja hahmottaa joidenkin osien muodostavan tuttuja tai merkityksellisiä alueita, ne nähdään kuvioina. valiomuotoisuus (good shape): kuviot pyritään täydentämään ja ymmärtämään kuviot mahdollisimman yksinkertaisina ja täydellisinä. Esimerkiksi käyttöliittymän kuvakkeet voivat olla pelkistettyjä ja käyttäjä pyrkii täydentämään puuttuvat osat. yhteinen liike (common fate): samaan suuntaan samalla nopeudella liikkuvat (tai siltä näyttävät) kohteet kuuluvat yhteen ryhmään tai muodostavat yhden kohteen. yhteenliittyminen (connectness): kohteet, jotka visuaalisesti ovat toisissaan kiinni, kuuluvat samaan ryhmään tai kohteeseen. Lähteestä riippuen hahmolaeista saatetaan käyttää myös toisenlaisia suomennoksia Johdonmukaisuus Johdonmukaisuus ja asioiden standardointi auttavat monessa tilanteessa, etenkin jos tuotetta on mahdotonta suunnitella sellaiseksi että se tukisi oikean käsitemallin luonnollista kehittymistä. Joistain asioista on vain yksinkertaisesti sovittava ja kun niitä johdonmukaisesti noudatetaan, on käyttäjien mahdollista oppia toimintaperiaatteet. Johdonmukaisuus eli yhtenäisyys on keskeinen ominaisuus tuotteissa ja tuoteperheissä. Johdonmukaisuus kuvaa tarkoittaa toiminnan yhdenmukaisuutta ja ennustettavuutta käyttäjän näkökulmasta. Johdonmukaisuutta voi noudattaa eri tasoilla: ulkoinen johdonmukaisuus ja sisäinen johdonmukaisuus. Ulkoinen johdonmukaisuus tarkoittaa yhtenäisyyttä esim. muiden ohjelmien kanssa, ympäröivän maailman kanssa ja eri laitemerkkien kanssa. Lukuvuosi IHTE / Melakoski-Vistbacka

9 Ohjelmiston sisäiseen johdonmukaisuuteen vaikuttaa mm: Komponenttien sijainti ja käyttötapa: yhdenmukaista läpi koko järjestelmän Värien käyttö: sama värikoodaus läpi ohjelman eli tietty väri kuvaa aina samaa asiaa Visuaalisten vihjeiden käyttö: fontin tyyli: kursiivi, lihavointi Terminologian yhtenäisyys läpi koko sovelluksen Samantyyppinen toimintatapa samantyyppisissä tilanteissa: järjestelmästä uloskirjautuminen tai tietojen tallentaminen tehdään samalla tavalla käyttötilanteesta riippumatta Geneeriset komennot eli komennot, jotka toimivat samantapaisesti tilanteesta ja sovelluksesta riippumatta ja joiden olemassaolon käyttäjät olettavat: esimerkiksi copypaste - kopioi, liitä Yrityksen sisäiset tyylioppaat ovat hyvä tapa valvoa johdonmukaisuutta kaikissa tuotteissa. Vaikka suunnittelussa ei saisi tyytyä aina tuttuihin malleihin, saattaa yleisistä toimintatavoista poikkeaminen sekoittaa käyttäjän. Ulkoinen johdonmukaisuus on usein hyvä ratkaisu. Johdonmukaisuutta lisää myös standardien noudattaminen. Kaikki johdonmukaisuus ei kuitenkaan liity standardointiin Miellyttävä ulkonäkö Miellyttävä ulkonäkö on usein subjektiivinen, käyttäjästä ja kulttuurista riippuva asia. Ulkonäön miellyttävyyttä voidaan lisätä useimmissa tapauksissa esim. seuraavilla keinoilla: Älä ahda ikkunaa liian täyteen Varo sisäkkäisten ryhmien raamitusta Käytä tyhjää tilaa erottimena Miellyttävät suhteet tärkeämpiä kuin pinta-alan minimointi Pyri tekemään yhtenäinen ulkonäkö kaikkiin ikkunoihin Varo häiritsevää taustaa (esim. geometrinen kuva). Jaa ikkuna palstoihin (kanonisuus) Lukuvuosi IHTE / Melakoski-Vistbacka

10 3.2 Sommittelu: Näytön tasapaino Ulkoinen tasapaino koostuu reunaviivojen suhteista ja muodosta. Tietokoneen ja television reunaviivojen tekninen suhde on perinteisesti 4:3. (digitv:ssä 16:9). Painetut julkaisut asetetaan yleensä pystysuuntaisesti, kun taas kuvapinnalle on vakiintunut vaakasuuntaisuus. Valokuvien osalta suunta vaihtelee kuvan sisällön ja käyttötarkoituksen mukaan. Yleisesti vaakasuuntainen nelikulmio on rauhallisempi sekä levollisempi kuin pystysuuntainen. Sisäinen tasapaino muodostuu tummuusasteesta ja symbolitasapainosta. Jos esim. toisella puolella näyttöä on musta neliö ja toinen puoli puhtaan valkoinen tai harvaa tekstiä, vallitsee näytöllä epätasapaino. Kuvan tasapainoon vaikuttavat kappaleiden paino ja painovoima, muotokielen sopusointu, elementtien törmääminen, paikallaan oleminen ja liike. Epätasapaino luo visuaalisen jännitteen ja voi tehdä näytöstä vaikean lukea. Paljon käytetyissä, työskentelyyn tarkoitetuissa ohjelmissa kuten toimisto-ohjelmissa pitäisi epätasapainoa välttää. Liiallinen tasapaino voi ikävystyttää, vaikka se sopivasti käytettynä luokin viihtyisyyttä ja herättää luottamusta. Epätasapainoa voidaan käyttää tehokeinona esimerkiksi mainonnassa. Kultainen keskiarvo sekä graafinen painotus ovat hyödyllisiä suunniteltaessa tasapainoista näyttöä. Kultaisen leikkauksen erityisyys on suhteiden säilyminen, kun viivaa jaetaan yhä pienempiin osiin. Kuvallisissa esityksissä tärkeämpiä ovat kuitenkin kultainen keskiarvo sekä graafinen painotus. Kuvassa (Kuva 1)on esitetty kultainen leikkaus, kultainen keskiarvo ja painopistekohdat. Painopistekohtiin kannattaa asettaa tärkeitä kohteita. Painopistekohtien avulla kuva voidaan myös helposti jakaa kolmeen osaan niin vaaka- kuin pystysuunnassa. Tasapaino kuvassa säilyy helpoimmin, kun kohteet asetetaan kuvan halkaisijan tasapainoon (ei siis kuitenkaan välttämättä keskihalkaisijalle). Kuva 1. Kultainen leikkaus, kultainen keskiarvo ja painopistekohdat. Tyhjä tila on suunnittelun peruselementti. Erityisesti aloittelevat suunnittelijat arastelevat tyhjän tilan käyttöä ja ovat taipuvaisia ahtamaan näytöt liiankin täyteen. Käyttäjän rajallista tiedon omaksumis- ja käsittelykapasiteettia ei kuitenkaan tulisi ylikuormittaa. Tyhjä tila selkiyttää näyttöä ja viestii siinä missä käytettykin tila. Tyhjä tila osoittaa rajaa kahden alueen välillä. Lukuvuosi IHTE / Melakoski-Vistbacka

11 Tilankäyttöä säätelevät marginaalit elementtien reunoilla sekä tyhjä tila elementtien välillä. Elementit ryhmitellään mahdollisimman järkevästi: samaan asiaan liittyvät elementit samaan ryhmään, toiminnalliset painikkeet lähelle toiminnan kohdetta. Yhteenkuuluvien asioiden ryhmittelyssä voi käyttää tyhjää tilaa, jakoviivoja ja laatikoita elementtien ympärillä. Näytöille kannattaa laatia taittopohja (grid), jonka perusteella elementit asetetaan näytöille. Taittopohjan laatiminen on järkevää aloittaa hahmotelmasta, jossa eri elementit on asetettu paikoilleen. Visuaalista ilmettä aletaan muokata vasta tämän jälkeen. Taittopohjaan sisällytetään myös sovitut marginaalit yms. Taittamiseen on olemassa useita graafisia, elektronisia apuvälineitä, joiden avulla voidaan pitää marginaalit vakiolevyisinä sekä sijoitella elementit linjaan (esim. Visual Studio). Taittopohjan tulisi noudattaa sovittua ulkoasua, standardeja yms. Taittopohjana voi toimia esim. kanoninen suunnittelumalli (canonical grid, Kuva 2). Kuva 2. Kanoninen suunnittelumalli. Kanonisen mallin avulla voidaan ratkaista lähes kaikki asetteluun ja elementtien sijoitteluun liittyvät ongelmat. Sen avulla näytölle voidaan sijoitella selkeästi ja symmetrisesti millainen tahansa yhdistelmä erilaisia komponentteja. Ruudukko auttaa päättämään sarakkeiden paikat sekä noudattamaan yleisesti käytettyä, tuttua jakoa. Erityisen monimutkaisia suunnittelutilanteita varten ruudukkoa voidaan muokata tilanteeseen sopivaksi. Kanonisen suunnittelumallin noudattaminen auttaa suunnittelemaan johdonmukaisia, selkeitä ja säännöllisiä näyttöjä, jotka edelleen tehostavat ja helpottavat ihmisen ja koneen välistä vuorovaikutusta. Aloitettaessa suunnittelua, ruudukko asetellaan peittämään koko ikkuna. Tämän jälkeen elementit sijoitellaan kuvan mallin mukaisesti. Standardi-painikkeiden paikat on usein päätetty etukäteen, joten niitä ei välttämättä tule sovittaa ruudukkoon. Kanoninen malli tukee elementtien jakamista 2-, 3-4-, 6-sarakkeeseen. Harmaat palkit kuvaavat elementtien leveyttä. ruudukko soveltuu mille tahansa pystysuuntaiselle jaolle, sen määrittelevät elementtien koot ja tyypit. Myös tekstin koolla on merkitystä: suuremmalla fonttikoolla esitetty teksti mielletään tärkeämmäksi kuin pienellä fonttikoolla esitetty. Etenkin näytön otsikko kannattaa aina kirjoittaa näkyvästi suurella, jotta se tunnistetaan nopeasti otsikoksi. Lukuvuosi IHTE / Melakoski-Vistbacka

12 Kuva 3. Esimerkkikuva taittopohjan puuttumisesta. Kuva 4. Esimerkkikuva paremmasta taittopohjan käytöstä. Lukuvuosi IHTE / Melakoski-Vistbacka

13 3.3 Kolmiulotteisuus käyttöliittymässä Yksi vanhimmista tunnetuista kolmiulotteisuuteen liittyvistä ilmiöistä on pakopisteen vaikutus syvyysperspektiiviin. Kun katsotaan kuvassa rautatiekiskoja tai suoraan eteenpäin kulkevaa tietä, tie näyttäisi yhä kapenevan ja lopulta katoavan taivaanrannassa yhteen pisteeseen (Kuva 5). Kuva 5: Pakopisteen vaikutus syvyysperspektiiviin. Pieni kappale näyttää olevan kauempana kuin suurikokoinen. Käyttöliittymän kaikki ohjauspinnat tulisi tehdä keskenään samankokoisiksi tai ne tulisi selkeästi porrastaa käyttötarkoituksen ja merkityksen mukaan. Jos elementtejä kuten ikkunoita sijoitetaan osin päällekkäin, tulee päällekkäisyyden näkyä selvästi. Alla olevan kappaleen tulee näkyä tunnistettavasti, eikä päällimmäistä kappaletta saa sijoittaa oletusarvoisesti tasan alemman kappaleen jakoviivojen päälle. Muutoin käyttäjän voi olla vaikeaa hahmottaa kappaleiden päällekkäisyys. Muita kolmiulotteisuuteen vaikuttavia tekijöitä käyttöliittymässä ovat: kohteen kirkkaus, sumu, varjo, katsekulma, epätarkat taka-alan oliot. Kolmiulotteisen liikkeen vaikutelmaa käyttöliittymässä voidaan saada aikaan animoidulla kappaleella, joka liikkuessaan pienenee toisesta reunasta ja suurenee toisesta reunasta. Neljäs, erityisesti liikkuviin elementteihin liittyvä ulottuvuus, on aika. Peruttaessa toimintoa on hyvä näyttää käyttäjälle myös liikesarjan peruuttaminen, jolloin käyttäjälle tulee tunne ajassa taaksepäin siirtymisestä. Lukuvuosi IHTE / Melakoski-Vistbacka

14 3.4 Näköharhat käyttöliittymässä Näköharhat ovat systemaattisia, ne vaivaavat niin käyttäjää kuin suunnittelijaa. Näköharhoja aiheuttavia elementtejä ja tilanteita tulisi välttää käyttöliittymää suunniteltaessa. Näköharhoja käyttöliittymässä aiheuttavat mm. vahvat geometriset kuviot taustakuvissa (saattavat aiheuttaa esim. värinää ja häiritä tekstin tulkintaa) paksun palkin takaa kulkeva ohut viiva (Viiva näyttäisi hypähtävän eri tasolle eri reunoilta, vaikka onkin aivan suora.) tiheät vaakasuuntaiset viivat Ponzon kuvio (Kulman kärkeä lähempänä oleva kuvio näyttää suuremmalta, vaikka molemmat kuviot ovat saman kokoisia.) värit (joista lisää alaluvussa 3.6 Värit käyttöliittymässä) Kuva 6. Paksun palkin takaa kulkeva ohut viiva. Kuva 7. Tiheä vaakaraidoitus. Kuva 8. Ponzon kuvio. Lukuvuosi IHTE / Melakoski-Vistbacka

15 3.5 Sommittelu: Typografia Typografialla tarkoitetaan kirjainmerkkejä ja niiden suunnittelua. Erilaisia kirjaimistoja ja merkistöjä on saatavilla satoja. Kirjainmuotoja on karkeasti jaotellen kaksi: päätteellinen eli antikva ja päätteetön eli groteski. Päätteellinen sopii parhaiten paperilta luettavaksi, päätteetön tietokoneen näytöltä luettavaksi. Ihminen lukee tekstejä noin 2 cm lohkoissa. Luettavuus riippuu tekstin koosta, muodosta ja kontrastista. Tekstin tasaaminen molemmista reunoista hidastaa lukemista n. 12 %. Näytölle soveltuvat päätteettömät kirjaisimet kuten Arial ja Verdana. Niissä ei kirjainten päissä ole väkäsiä kuten esimerkiksi tämän prujun tekstissä. Huonoiten näytölle soveltuvat script-tyyppiset kirjasimet ( kaunokirjoitus ) ja koristeelliset kirjasimet kuten Cooper ja Ravie. Kirjainten leveys voi joissakin kirjasintyypeissä vaihdella. Taulukoihin suositellaan tasajakoisia tyyppejä kuten Courier New, jossa kullekin kirjaimelle varataan aina samanlevyinen tila. Pitkiin ja erityisesti paperille tulostettaviin teksteihin sopivat päätteelliset kirjasimet kuten Times, Times New Roman (tämän prujun tekstifontti) ja Bookman old style. Käyttöliittymässä ei kannata käyttää pelkkää versaalia eli isoja kirjaimia. Se on 12% hitaampaa lukea ja vie 30% enemmän tilaa kuin gemenateksti eli pikkukirjaimet. Isot kirjaimet saatetaan tulkita myös HUUTAMISEKSI, mikä antaa agressiivisen vaikutelman. Lukuvuosi IHTE / Melakoski-Vistbacka

16 3.6 Värit käyttöliittymässä Värejä voidaan hyödyntää käyttöliittymissä moniin tarkoituksiin, esim. Huomion kiinnittäminen Elementtien rakenteen ja prosessien tunnistaminen Esineiden ja asioiden realistinen kuvaaminen Ideoiden ja prosessien loogisen rakenteen kuvaaminen Ajan kuvaaminen Viehättävyyden, uskottavuuden, muistettavuuden sekä ymmärrettävyyden lisääminen Tulkintavirheiden sekä epäselvyyden vähentäminen Redundantti (toissijainen) koodaus Määrän ja laadun esittäminen rajallisessa tilassa Värien käyttö on hyvä tehokeino, jolla voidaan erimerkiksi parantaa tunnistettavuutta, lisätä muistettavuutta, helpottaa luettavuutta, painottaa asioita, erotella sisältöjä, ilmaista tunnelmia sekä elävöittää mustavalkoista esitystä. Värin käyttö tuo myös ongelmia: Eivät välttämättä palvele käyttäjiä, joilla vaillinainen värinäkökyky Silmä väsyy näkemään väriä ja tästä saattaa seurata jälkikuvia ja värinää. Väsymistä tapahtuu erityisesti voimakkaiden ja kirkkaiden värien kohdalla kun ne ovat rinnakkain. Monimutkainen väritys tai väri-ilmiöiden (esim. väri-illuusio) vahvuus voi myötävaikuttaa visuaaliseen sekaannukseen Kulttuurisidonnaisuus voi aiheuttaa negatiivisen, väärän tulkinnan Värien merkitys on pitkälti opittua ja värien merkitys on etenkin kulttuurista riippuvainen. Muutamia esimerkkejä länsimaalaisista väriassosiaatioista: punainen: keltainen: vihreä: sininen: vaara, kuuma, tuli, seis, seis, viha huomio, varoitus, lämpö, aktiivisuus, aurinko, uusi saa edetä, turvallisuus, luonto, rauha, tuoreus, toivo, myrkky kylmyys, vesi, taivas, jää, viileä, vetäytyvä, tosi valkoinen: viattomuus, kunnollisuus, rehellisyys, kylmyys, totuus, antaa sommittelulle ilmavuutta ja valovoimaa, hyvä tausta musta: pimeys, yö kuolema, paheellisuus, viisaus, valta, murhe tuo vaaleat ja värikylläiset sävyt hyvin esille Lukuvuosi IHTE / Melakoski-Vistbacka

17 harmaa: arkisuus, karuus, yhtenäisyys, toiveikkuus, konservatiivisuus, neutraalitausta vaaleille ja tummille väreille Värillä on kolme ominaispiirrettä: värisävy, kirkkaus eli valoisuus (mustan tai valkoisen määrä värissä) ja värikylläisyys eli värin puhtaus. Väri vahvistaa sanomaa ja vaikuttaa tunnelmaan. Väri voi myös aiheuttaa näköharhoja. Väri-illuusio syntyy esimerkiksi, kun mustalle pohjalle laitetaan kirkkaansinistä ja punaista tekstiä vuororiveille. Punainen teksti näyttää olevan lähempänä katsojaa ja sininen kauempana: syntyy vaikutelma kolmiulotteisuudesta. Illuusiota voidaan käyttää huomion kiinnittämiseen. Se kuitenkin hankaloittaa lukemista, joten käyttämistä kannattaa harkita tarkkaan Värisokeat käyttäjät Käyttöliittymäsuunnittelussa on aina varauduttava värisokeisiin käyttäjiin. Noin. 8 % miehistä sekä 4% naisista on värisokeita, yleisin värisokeuden muoto on punavihervärisokeus. Vaikka prosentit saattavat tuntua pieniltä, voi ohjelmiston käyttäminen estyä kokonaan mikäli värin erottaminen on oleellista. Ohjeissa ei koskaan pitäisikään viitata pelkkään väriin (esim. paina punaista painiketta ) vaan aina pitäisi käyttää myös toissijaisia vihjeitä (redundantteja koodauksia), joiden avulla käyttäjä pystyy päättelemään, mikä on oikea valinta. Muita ohjeita värisokeiden huomioimiseksi on: Älä käytä vierekkäin punaista, vihreää, sinipunaista, ruskeaa ja harmaata Älä käytä värisignaaleja, joissa väri vaihtuu punaisesta vihreäksi, punaisesta keltaiseksi tai vihreästä keltaiseksi Käytä punaista vain, jos tausta on hyvin tumma Testaa näyttöä ilman värejä Vältä väripareja, joiden RGB-arvot (Red, Green, Blue) eroavat vain punaisen osalta o valkoinen - turkoosi o vihreä - keltainen o sammaleenvihreä - oranssi o sininen - violetti Lukuvuosi IHTE / Melakoski-Vistbacka

18 3.6.2 Marcusin kymmenen käskyä Aaron Marcus on esitellyt seuraavan ohjeistuksen käyttöliittymän värisuunnitteluun. Ohjeita ei tarvitse aina noudattaa eivätkä ne ole sovellettavissa kaikkiin tilanteisiin, mutta tämä lista on niin tunnettu ja sitä referoidaan niin paljon että sen sisältö on hyvä tuntea. 1. Käytä korkeintaan 5 ± 2 väriä o erityisen tärkeää värikoodauksessa: jos käyttöliittymässä käytetään enemmän värejä eri merkityksissä, kuormitetaan käyttäjän muistia helposti liikaa. o enemmän värejä vain esteettisistä syistä, esim. valokuvissa tuomaan realismia o ROY G BIV (red, orange, yellow, green, blue, indigo, violet): Käytä värispektrin järjestystä värikoodauksessa. Testit ovat osoittaneet, että ihmiset kokevat ko. järjestyksen luonnollisena ja valitsevat intuitiivisesti punaisen (ROY) eteen, vihreän (G) keskelle ja sinisen/cyanin (BIV) taakse, kun on kyse monista eri tasoista näytöllä. 2. Käytä oikein keskeisiä- ja reunavärejä o sininen vain laajojen pintojen väriksi, sinistä ei kannata käyttää tekstin värinä. Sininen on hyvä esimerkiksi taustavärinä. o punaista ja vihreää ei kannata käyttää reunoilla sijaitsevissa elementeissä, joihin käyttäjän huomion halutaan kiinnittyvän. Silmä havaitsee huonosti punaisia ja vihreitä elementtejä näytön reunoilta. o musta, valkoinen, keltainen ja sininen sopivat reunoille 3. Käytä värejä, jotka muuttuvat mahdollisimman vähän kuvan koon muuttuessa o ympäristön merkitys korostuu: huomioi värin muuttuminen taustavärin muuttuessa o ohut vaalea teksti tummalla taustalla pimeään/hämärään o ohut tumma teksti vaalealle pohjalle valoisaan o varaa aina suurin kontrastiero tekstin ja taustan välille. Muilla kuvioilla (esim. painikkeilla) ja taustalla voi olla hiukan pienempikin kontrastiero. 4. Älä käytä useita vahvoja värejä samanaikaisesti o aiheuttavat värinää, varjoilluusioita sekä jälkikuvia 5. Käytä tuttuja koodauksia o riippuu asiayhteydestä sekä kulttuurista o esim. länsimaissa punainen kuvaa kuumaa, tulta ja pysähtymistä. Jos keskeytä-painike olisikin käyttöliittymässä vihreä, saattaisi käyttäjä hämääntyä. o käytä hyödyksi myös värisävyn muutoksia esimerkiksi kertomaan, mitä elementtejä voi kyseisessä käyttötilanteessa käyttää tai mitkä elementit ovat aktiivisia. Lukuvuosi IHTE / Melakoski-Vistbacka

19 6. Käyttäjä yhdistää samoin väritetyt elementit ja alueet o ryhmittele värillä elementtejä loogisiksi kokonaisuuksiksi o ryhmittelyyn voi käyttää sekä elementin itsensä väriä, tekstisisällön tai kuva-aiheen väriä että taustan väriä 7. Käytä värejä johdonmukaisesti o tee järjestelmälle graafinen ohjeisto ja noudata sitä: sama väärikoodaus samoille asioille o muista myös mahdollinen opetusmateriaali ja dokumentointi 8. Käytä kirkkaita, värikylläisiä värisävyjä huomion kiinnittämiseen tilanteissa, joissa käyttäjän huomio on saatava o esim. virheilmoitukset. 9. Käytä redundantteja (toisteisia) koodauksia aina kuin mahdollista. o yksi asia ilmennetään useampaa attribuuttia käyttäen o jos käyttäjä ei pysty havaitsemaan jotain koodaustapaa (esim. väriä), voi hän ymmärtää asian toisen koodaustavan avulla o esim. muoto + väri, väri + teksti, väri + sijainti jne. 10. Käytä värejä elävöittämään mustavalkoista esitystä o värillinen tieto on helpompi muistaa ja miellyttävämpää lukea o mustavalkoisen ja värillisen tiedon tulkinnassa eli oppimisen määrässä ei kuitenkaan ole eroja Lukuvuosi IHTE / Melakoski-Vistbacka

20 3.7 Muita suunnitteluohjeita Ihminen vastaanottaa enemmän aistiärsykkeitä kuin pystyy havaitsemaan. Vain tieto, joka on tarkkaavaisuuden kohteena, pääsee ihmisen mieleen ja säilyy siellä kunnes huomio kiinnittyy muualle, joko tahdonalaisesti tai uuden ärsykkeen vuoksi. Erityisesti yksityiskohdat havaitaan vain yhdestä kohteesta kerrallaan. Käyttöliittymästä tulee löytyä kiintopisteitä katseelle. Kohteiden ja taustan pitäisi erottua selvästi toisistaan. Kohde on pienempi kuin tausta, esineenomaisempi ja sijaitsee taustan edessä. Kohdetta ja taustaa erottava ääriviiva kuuluu kohteeseen. Myös katseen etenemissuunnan tulee olla selvä. Graafisessa käyttöliittymässä katse etsiytyy ensiksi otsikon alle, www-käyttöliittymässä otsikkoon. Kuva vie hetkeksi käyttäjän huomion, kuvia voi siis käyttää tehokeinona harkitusti. Liike vaatii jatkuvasti käyttäjän huomiota, vaikka käyttäjä ei sitä tahtoisikaan. Turhaa liikettä näytöllä kannattaa siis välttää, jotta käyttäjä voi keskittyä olennaisiin asioihin. Tarkkaavaisuutta voidaan ohjata antamalla käyttäjälle sopiva määrä tietoa kerrallaan. Käyttöliittymästä pitäisi poistaa kaikki turha tieto (yksinkertaisuuden periaate). Tieto rakennetaan tasoihin: pääkohdat ylimmille tasoille ja yksityiskohdat alimmille. Tähän perustuu esim. valikoiden käyttö. Anna tieto käyttäjälle oikeaan aikaan, oikeassa järjestyksessä Käytä työhön sopivaa esitystapaa Ryhmittele tieto semanttisesti ja huolehdi tiedon hierarkian näkyvyydestä Vältä korostamasta vääriä asioita Huomioi, että ikääntyneiden käyttäjien kyky huomioida oikea asia näytöltä on heikentynyt o anna visuaalisia vihjeitä mihin huomio kannattaa kiinnittää o vältä viemästä huomiota vähemmän merkityksellisille alueille Muista, ettei käyttäjä voi kiinnittää huomiotaan kahteen yksityiskohtaan samanaikaisesti Huomiota voidaan ohjata oikeaan suuntaan myös käyttämällä: o hahmolakeja o ajallisia ja tilavihjeitä o virittäviä tekniikoita o ikkunoimalla Lukuvuosi IHTE / Melakoski-Vistbacka

IHTE-2100 KaSuper 2007-2008 Luento 2: värit, kuvakkeet

IHTE-2100 KaSuper 2007-2008 Luento 2: värit, kuvakkeet IHTE-2100 KaSuper 2007-2008 Luento 2: värit, kuvakkeet Aiheet tänään Värit käyttöliittymäsuunnittelussa Kuvakkeiden suunnittelu Värit käyttöliittymässä Of all design elements, color most exemplifies the

Lisätiedot

IHTE-2100 KaSuper Luento 3: visuaaliset suunnitteluperiaatteet, värit. Aiheet tänään. Visuaaliset suunnitteluperiaatteet - Sommittelu.

IHTE-2100 KaSuper Luento 3: visuaaliset suunnitteluperiaatteet, värit. Aiheet tänään. Visuaaliset suunnitteluperiaatteet - Sommittelu. IHTE-2100 KaSuper 2008-2009 Luento 3: visuaaliset suunnitteluperiaatteet, värit Aiheet tänään Visuaaliset suunnitteluperiaatteet - Sommittelu Värit Visuaaliset suunnitteluperiaatteet (Mullet & Sano) Yksinkertaisuus

Lisätiedot

Lomakkeiden suunnittelu. Aiheina

Lomakkeiden suunnittelu. Aiheina Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite:

Lisätiedot

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

HELIA 1 (15) Outi Virkki Käyttöliittymät ja ohjelmiston suunnittelu 23.11.00 13:28 HELIA 1 (15) Luento 3 Käytettävyyden osapuolet... 2 Ihminen tietojenkäsittelijänä... 3 Muistitoiminnot... 4 Työmuisti (lyhytkestoinen muisti )... 4 Säilömuisti (pitkäkestoinen muisti)... 4 Sensoriset muistit...

Lisätiedot

1/2016 GRAAFINEN OHJEISTO

1/2016 GRAAFINEN OHJEISTO GRAAFINEN OHJEISTO 1.1.2016 1 Sisällys 1. Tunnus... 4 2. Värit... 5 3. Suoja-alue... 6 4. Typografia... 6 5. Käyntikortti... 7 6. Lomakkeisto... 8 7. Kirjekuoret... 9 8. PowerPoint... 10 9. Ilmoittelu...

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

Tilkkuilijan värit. Saana Karlsson

Tilkkuilijan värit. Saana Karlsson Tilkkuilijan värit Saana Karlsson Tilkkutöissä erivärisiä kangaspaloja ommellaan yhteen ja siten muodostetaan erilaisia kuvioita. Värien valinta vaikuttaa siihen miten suunnitellut kuviot tulevat tilkkutyössä

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

1. Selkokielisen verkkopalvelun graafinen ja looginen rakenne

1. Selkokielisen verkkopalvelun graafinen ja looginen rakenne Selkoheuristiikat 1. Selkokielisen verkkopalvelun graafinen ja looginen rakenne 1.1 Onko informaation määrä sivua kohti riittävän pieni? 1.2 Onko sivupohja rakenteet ja toiminnot toteutettu niin, että

Lisätiedot

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

Suomen virtuaaliammattikorkeakoulu Teknillinen mekanikka fem tutorials > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu Teknillinen mekanikka fem tutorials > 80 % 80 60 % 60 50 % < 50 % Arviointialue

Lisätiedot

Graafinen. ohjeistus

Graafinen. ohjeistus Graafinen ohjeistus 1/2015 A-Kiltojen Liitto ry Graafinen ohjeistus Tunnus, käyttö A-Kiltojen Liiton tunnuksen väri on vihreä. Tunnusta tulee pääasiallisesti käyttää valkoisella tai mahdollisimman vaalealla

Lisätiedot

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

Helsingin ammattikorkeakoulu Stadia Verkkosivujen silmäiltävyys ja selailtavuus v. 0.9 > 80 % % % < 50 % Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Helsingin ammattikorkeakoulu Stadia Verkkosivujen silmäiltävyys ja selailtavuus v. 0.9 > 80 % 80 60 % 60 50 %

Lisätiedot

Used with permission of Microsoft. Kulttuurihistoria Syyskuu 2015

Used with permission of Microsoft. Kulttuurihistoria Syyskuu 2015 MUOTOSEIKKOJA Mitä asetuksia käytän? Tyypillisimpiä fontteja ovat Times New Roman (fonttikoko 12) tai Arial (fonttikoko 11). Käytä riviväliä 1,5, jotta asettelu on selkeä ja teksti on myös tältä osin helppolukuista.

Lisätiedot

PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE

PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE IT-palvelut / Hannele Rajaniemi optima-support@jyu.fi www.jyu.fi/itp/optima-ohjeet 2 Sisältö Mikä on koosteen idea? Miten saan kooste-työkalun käyttööni? Miten luon koosteen?

Lisätiedot

Esteetön PowerPoint-esitys

Esteetön PowerPoint-esitys ESKEn esteettömyyssuunnistus 4.12.2015 Esteetön PowerPoint-esitys ( SAFA Kirsti Pesola, tekn.lis. (arkkitehti johtaja, Invalidiliiton Esteettömyyskeskus ESKE puh (09) 613 191 tai 050 594 2553 kirsti.pesola@invalidiliitto.fi

Lisätiedot

Suomi Finland 100 -tunnus. Graafinen ohjeisto Lokakuu 2015

Suomi Finland 100 -tunnus. Graafinen ohjeisto Lokakuu 2015 Suomi Finland 100 -tunnus Graafinen ohjeisto Lokakuu 2015 Tunnus Tämä on Suomen itsenäisyyden satavuotisjuhlavuoden tunnus perusmuodossaan. Se on juhlavuoden visuaalisen ilmeen arvokkain elementti, jota

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

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

Suomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka templateaihio > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka templateaihio > 80 % 80 60 % 60 50 % < 50 % Arviointialue

Lisätiedot

Käyttäjäkeskeisen suunnittelun periaatteet ja prosessit

Käyttäjäkeskeisen suunnittelun periaatteet ja prosessit Käyttäjäkeskeisen suunnittelun periaatteet ja prosessit Kurssilla: Johdatus käyttäjäkeskeiseen tuotekehitykseen 23.1.2008 Johanna Viitanen johanna.viitanen@soberit.hut.fi Luennon aiheet Tuotekehityksen

Lisätiedot

ABMcomposite Graafinen ohjeisto 1.0

ABMcomposite Graafinen ohjeisto 1.0 Esipuhe Tämä kevyt graafinen ohjeisto antaa perusohjeet ABMcompositen visuaalisten elementtien käytöstä markkinointiviestinnässä. Eri viestintätilanteissa harkitusti ja johdonmukaisesti käytetty visuaalinen

Lisätiedot

Rakennusautomaation käytettävyys. Rakennusautomaatioseminaari 30.5.2013 Sami Karjalainen, VTT

Rakennusautomaation käytettävyys. Rakennusautomaatioseminaari 30.5.2013 Sami Karjalainen, VTT Rakennusautomaation käytettävyys Rakennusautomaatioseminaari 30.5.2013 Sami Karjalainen, VTT 2 Oma tausta Perusinsinööri DI, lvi-tekniikka, TKK 1993 Herääminen käytettävyysasioihin noin 2002 Tekniikan

Lisätiedot

GEOS 1. Ilmastodiagrammi Libre Office Calc ohjelmalla

GEOS 1. Ilmastodiagrammi Libre Office Calc ohjelmalla GEOS 1 Ilmastodiagrammi Libre Office Calc ohjelmalla Libre Office Calc ohjelman saat ladattua ilmaiseksi osoitteesta: https://fi.libreoffice.org/ Tässä ohjeessa on käytetty Libre Office Calc 5.0 versiota

Lisätiedot

Standardit osana käyttäjäkeskeistä suunnittelua

Standardit osana käyttäjäkeskeistä suunnittelua Standardit osana käyttäjäkeskeistä suunnittelua 20.4.2006 Mikä on standardi? sovittu tapa tehdä jokin asia saatetaan tarkoittaa asian määrittelevää normatiivista asiakirjaa varmistetaan esim. Euroopassa

Lisätiedot

Kuvasommittelun lähtökohta

Kuvasommittelun lähtökohta KUVASOMMITTELU Kuvasommittelun lähtökohta jäsentämisen ja järjestämisen tarve hahmottaa maailmaa, sen yksityiskohtia ja kokonaisuuksia paremmin. Kuvassa jäsentäminen tapahtuu sommittelullisin keinoin.

Lisätiedot

Käytettävyys verkko-opetuksessa Jussi Mantere

Käytettävyys verkko-opetuksessa Jussi Mantere Käytettävyys verkko-opetuksessa 21.8.2002 Jussi Mantere Mitä käytettävyys on? Learnability (opittavuus) Efficiency (tehokkuus) Memorability (muistettavuus) Errors prevented (virheiden tekeminen estetty)

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

Tärkeimmät toiminnot. Kertausta ja uusia toimintoja Wordistä sekä tiedostonhallinnasta. Tärkeimmät toiminnot jatkuu...

Tärkeimmät toiminnot. Kertausta ja uusia toimintoja Wordistä sekä tiedostonhallinnasta. Tärkeimmät toiminnot jatkuu... Tärkeimmät toiminnot Kertausta ja uusia toimintoja Wordistä sekä tiedostonhallinnasta Kun hiiren jättää kuvakkeen päälle vähäksi ajaksi Word selittää toiminnon Avaa tiedosto Tallenna Kumoa, nuolesta aiemmat

Lisätiedot

Tentti erilaiset kysymystyypit

Tentti erilaiset kysymystyypit Tentti erilaiset kysymystyypit Kysymystyyppien kanssa kannatta huomioida, että ne ovat yhteydessä tentin asetuksiin ja erityisesti Kysymysten toimintatapa-kohtaan, jossa määritellään arvioidaanko kysymykset

Lisätiedot

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

Suomen virtuaaliammattikorkeakoulu The XML Dokuments > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu The XML Dokuments > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien

Lisätiedot

Oppijan verkkopalvelun käyttöohjeiden laatiminen

Oppijan verkkopalvelun käyttöohjeiden laatiminen Oppijan verkkopalvelun käyttöohjeiden laatiminen 14.2.2013 elina.melkko@etnoteam.fi Sisältö! Yleistä käyttöohjeiden laatimisesta Hyvä käyttöohje Käyttöohjeen kieli! Virkailijan käyttöliittymän ohjeiden

Lisätiedot

WINDOWS 10 -kurssi. petri.kiiskinen@wellamo-opisto.fi

WINDOWS 10 -kurssi. petri.kiiskinen@wellamo-opisto.fi WINDOWS 10 -kurssi petri.kiiskinen@wellamo-opisto.fi Yleistä kurssista Keskiviikkoisin 9.9. 30.9. (15 oppituntia) 16:45 20:00 (viimeinen kerta 16:45 19:15) Puolivälissä 15 minuutin kahvitauko Materiaali

Lisätiedot

Metropolia Ammattikorkeakoulu Mediatekniikan koulutusohjelma. Miro Lahdenperä. Visuaalisen suunnittelun raportti VBP06S G

Metropolia Ammattikorkeakoulu Mediatekniikan koulutusohjelma. Miro Lahdenperä. Visuaalisen suunnittelun raportti VBP06S G Metropolia Ammattikorkeakoulu Mediatekniikan koulutusohjelma Miro Lahdenperä Visuaalisen suunnittelun raportti 15.10.2010 VBP06S G 0505188 1. Oppimisteknologiat... 3 2.MobileWorks... 5 3. Print Media...

Lisätiedot

HAMK Pähkinäkori > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

HAMK Pähkinäkori > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain HAMK Pähkinäkori > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien Arviointialue Ominaisuuksien Valmis/

Lisätiedot

Tentti erilaiset kysymystyypit

Tentti erilaiset kysymystyypit Tentti erilaiset kysymystyypit Monivalinta Monivalintatehtävässä opiskelija valitsee vastauksen valmiiden vastausvaihtoehtojen joukosta. Tehtävään voi olla yksi tai useampi oikea vastaus. Varmista, että

Lisätiedot

Graafinen ohjeisto. Päivitetty tammikuussa 2015

Graafinen ohjeisto. Päivitetty tammikuussa 2015 Graafinen ohjeisto Päivitetty tammikuussa 2015 Sisällys Sisällys Esipuhe Liikemerkki ja logo Värit korteille ja kirjepohjalle Typografia Fontit korteille ja kirjepohjalle Kirje- ja esityspohja Käyntikorttipohjat

Lisätiedot

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

Savonia ammattikorkeakoulu Miten tilintarkastajan tulee toimia? v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Savonia ammattikorkeakoulu Miten tilintarkastajan tulee toimia? v. 0.5 > 80 % 80 60 % 60 50 % < 50 % Arviointialue

Lisätiedot

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

VirtaaliAMK Virtuaalihotelli > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain VirtaaliAMK Virtuaalihotelli > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien Arviointialue Ominaisuuksien

Lisätiedot

VirtuaaliAMK Opinnäytetyön ohjausprosessi > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

VirtuaaliAMK Opinnäytetyön ohjausprosessi > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain VirtuaaliAMK Opinnäytetyön ohjausprosessi > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien Arviointialue

Lisätiedot

TAMPEREEN SISU vuodesta d 1960 GRAAFINEN OHJEISTUS

TAMPEREEN SISU vuodesta d 1960 GRAAFINEN OHJEISTUS TAMPEREEN SISU vuodesta 1960 GRAAFINEN OHJEISTUS Sisällysluettelo LOGO Logo 3 Typografia. 5 Värit... 8 Lomakkeet 10 Kuvitus 12 - A KU UVITUS KEET LOMAKK TYPO GRAFI VÄRIT 2 LOGO TAMPEREEN SISU vuodesta

Lisätiedot

Parasta Lapsille. Graafinen ohjeisto. päivitetty 2016

Parasta Lapsille. Graafinen ohjeisto. päivitetty 2016 Parasta Lapsille Graafinen ohjeisto päivitetty 2016 Logo Parasta Lapsille -logo on ollut jo vuosikymmenet samanlainen. Tämän graafisen ohjeiston yhteydessä 2014 logoon tehtiin pientä päivitystä linjoihin

Lisätiedot

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

HELIA 1 (17) Outi Virkki Käyttöliittymät ja ohjelmiston suunnittelu 2.11.2000 HELIA 1 (17) Luento 6 Tyyliopas... 2 Käytön tuki... 2 Suunnittelun ja toteutuksen tuki... 3 Ohjeiden hierarkia... 4 Viralliset standardit... 4 Käytännön standardit... 4 Yrityskohtaiset standardit... 4

Lisätiedot

Suvi Junes/Pauliina Munter Tietohallinto/Opetusteknologiapalvelut 2014

Suvi Junes/Pauliina Munter Tietohallinto/Opetusteknologiapalvelut 2014 Tietokanta Tietokanta on työkalu, jolla opettaja ja opiskelijat voivat julkaista tiedostoja, tekstejä, kuvia ja linkkejä alueella. Opettaja määrittelee lomakkeen muotoon kentät, joiden kautta opiskelijat

Lisätiedot

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

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

Lisätiedot

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

Suomen virtuaaliammattikorkeakoulu Mobile IP > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu Mobile IP > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien Arviointialue

Lisätiedot

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

Suomen virtuaaliammattikorkeakoulu VPN peli > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu VPN peli > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien Arviointialue

Lisätiedot

LUENTO 3. Toiminnan kehä

LUENTO 3. Toiminnan kehä LUENTO 3 1) Ihminen toimijana ja laitteen käyttäjänä 2) Ihminen laitteen käytön oppijana 3) Käytettävyys 4) Harjoitustehtävä 2 5) Luentotehtävä 3 IHMINEN TOIMIJANA JA LAITTEEN KÄYTTÄJÄNÄ Toiminnan kehä

Lisätiedot

Suomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka: Voima ja sen komponentit > 80 % % % < 50 %

Suomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka: Voima ja sen komponentit > 80 % % % < 50 % Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka: Voima ja sen komponentit > 80 % 80 60 % 60 50 %

Lisätiedot

$%& & % ' %& %#&& ' ( ) * ( + (, + (, + -

$%& & % ' %& %#&& ' ( ) * ( + (, + (, + - ! "#! " #$ "% &'( $%&&%'%&%#&&'( ) * ( + (,+ (, + - $. + $ /) * %&%& "" %& - )' $%&&%' %&%#&& 0 0 $%&%'% %%& * $%&&% 0 1) +,%&%'%% 0 $ -$%&%#&&.# 0 0 2 ' # 0 & #1 3 $ 4 3 $'/001 233,4# 5& "67 84#79:7 43

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

Arcada yrkeshögskola Hållbar utveckling v 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Arcada yrkeshögskola Hållbar utveckling v 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Arcada yrkeshögskola Hållbar utveckling v 0.5 > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien Arviointialue

Lisätiedot

Ohjeita kirjan tekemiseen

Ohjeita kirjan tekemiseen Suomen Sukututkimustoimisto on yhdessä Omakirjan kanssa tehnyt internetiin uuden Perhekirja-sivuston. Se löytyy osoitteesta: www.omakirja.fi -> Kirjat -> Perhekirja tai http://www.omakirja.fi/perhekirja?product=6

Lisätiedot

VirtuaaliAMK Tulipesän paineen ja palamisilman säätö > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

VirtuaaliAMK Tulipesän paineen ja palamisilman säätö > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain VirtuaaliAMK Tulipesän paineen ja palamisilman säätö > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien

Lisätiedot

2. Graafi nen yrityskuva

2. Graafi nen yrityskuva 2. Graafi nen yrityskuva 2.1. Näin käytät tunnisteita 2.2. Liikemerkki / logo ja sen suhteet 2.3. Logon ja sloganin suoja-alueet 2.4. Logon käyttö 2.5. Typografi a 2.6. Värit TULIKIVI OYJ:N GRAAFINEN YRITYSKUVA

Lisätiedot

Käytettävyys ja käyttäjätutkimus. Yhteisöt ja kommunikaatiosuunnittelu 2012 / Tero Köpsi

Käytettävyys ja käyttäjätutkimus. Yhteisöt ja kommunikaatiosuunnittelu 2012 / Tero Köpsi Käytettävyys ja käyttäjätutkimus Yhteisöt ja kommunikaatiosuunnittelu 2012 / Tero Köpsi Teron luennot Ke 15.2 miniluento Ti 28.2 viikkotehtävän anto (T,M) To 1.3 Tero paikalla (tehtävien tekoa) Ti 6.3

Lisätiedot

Harjoitellaan esitysgrafiikkaohjelman käyttöä Microsoftin PowerPoint ohjelmalla.

Harjoitellaan esitysgrafiikkaohjelman käyttöä Microsoftin PowerPoint ohjelmalla. Esitysgrafiikka Harjoitellaan esitysgrafiikkaohjelman käyttöä Microsoftin PowerPoint ohjelmalla. Tallenna esimerkki.pptx tiedosto tuokion kansioon. Avaa esimerkki.pptx tiedosto PowerPoint ohjelmassa. Jäsennysnäkymä

Lisätiedot

Työohjeen teko. Veikko Pöyhönen

Työohjeen teko. Veikko Pöyhönen Työohjeen teko. Veikko Pöyhönen Oheisilla ohjeilla voit laatia kuvallisen työohjeen. Käytin seuraavia ohjelmia: WORD 2000 (WORD-97 on lähes samanlainen ) Paint Shop Pro 4 Työohjeiden tekoon olisi toki

Lisätiedot

Väitöskirja -mallipohja

Väitöskirja -mallipohja JYVÄSKYLÄN YLIOPISTO Väitöskirja -mallipohja Word 2007/2010 IT-palvelut hannele.rajaniemi@jyu.fi https://koppa.jyu.fi/avoimet/thk/vaitoskirja sovellustuki@jyu.fi Sisältö Miten toimii väitöskirja/asiakirjamallipohja?

Lisätiedot

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

Muita kuvankäsittelyohjelmia on mm. Paint Shop Pro, Photoshop Elements, Microsoft Office Picture Manager Missio: 1. Asentaminen 2. Valokuvien tarkastelu, tallennus/formaatit, koko, tarkkuus, korjaukset/suotimet, rajaus 3. Kuvan luonti/työkalut (grafiikka kuvat) 4. Tekstin/grafiikan lisääminen kuviin, kuvien/grafiikan

Lisätiedot

Oiva Akatemia Graafinen ohje 2008

Oiva Akatemia Graafinen ohje 2008 Oiva Akatemia Graafinen ohje 2008 Alustava 19.11.2008 Oiva Akatemia Graafinen ohje 2008 2 (10) 1 Markkinointitunnus Oiva Akatemian markkinointitunnus muodostuu tyylitellyistä oranssista O- ja harmaasta

Lisätiedot

Flinga löytyy Tuubista, kohdasta Opettajan työkalut

Flinga löytyy Tuubista, kohdasta Opettajan työkalut 1 Pepe Vilpas Flinga Campus on yhteisöllisen tiedonrakentelun pilvipalvelu. Flinga mahdollistaa mobiililaitteiden (tabletit, älypuhelimet ja läppärit) ja luokkatilan interaktiivisen taulun tai projektorin

Lisätiedot

Siirtyminen Outlook 2010 -versioon

Siirtyminen Outlook 2010 -versioon Tämän oppaan sisältö Microsoft Microsoft Outlook 2010 näyttää hyvin erilaiselta kuin Outlook 2003. Tämän oppaan tarkoituksena on helpottaa uuden ohjelman opiskelua. Seuraavassa on tietoja uuden käyttöliittymän

Lisätiedot

Värijärjestelmät. Väritulostuksen esittely. Tulostaminen. Värien käyttäminen. Paperinkäsittely. Huolto. Vianmääritys. Ylläpito.

Värijärjestelmät. Väritulostuksen esittely. Tulostaminen. Värien käyttäminen. Paperinkäsittely. Huolto. Vianmääritys. Ylläpito. Tällä tulostimella voidaan tulostaa värillisiä asiakirjoja. Värituloste herättää huomiota, lisää arvostusta ja tulosteen tai tietojen arvoa. käyttö lisää lukijoiden määrää, sillä väritulosteet luetaan

Lisätiedot

KÄYTTÖOHJE / Ver 1.0 / Huhtikuu WordPress KÄYTTÖOHJE Sotkamo 2016

KÄYTTÖOHJE / Ver 1.0 / Huhtikuu WordPress KÄYTTÖOHJE Sotkamo 2016 / / WordPress KÄYTTÖOHJE Sotkamo 2016 Sisältö Sisältö 1. Yleistä 2. Kirjautuminen ylläpitoon 2.1. Kirjaudu osoitteessa: http://sotkamo.valudata.fi/admin Myöhemmin: http://www.sotkamo.fi/admin 2.2 Salasana

Lisätiedot

1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI...

1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI... GRAAFINEN OHJEISTO 1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 PÄÄLLEKKÄISVERSIO... 4 RINNAKKAISVERSIO... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI... 5

Lisätiedot

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

Esitysgrafiikka. Microsoft PowerPoint 2010 PERUSMATERIAALI. Kieliversio: suomi Materiaaliversio 1.0 päivitetty 24.1.2011 Esitysgrafiikka PERUSMATERIAALI Microsoft PowerPoint 2010 Kieliversio: suomi Materiaaliversio 1.0 päivitetty 24.1.2011 materiaalimyynti@piuha.fi Copyright Esitysgrafiikka Microsoft PowerPoint 2010 3/32

Lisätiedot

Kaakkois-Suomen ammattikorkeakoulun opiskelijakunta. Graafinen ohjeisto

Kaakkois-Suomen ammattikorkeakoulun opiskelijakunta. Graafinen ohjeisto Kaakkois-Suomen ammattikorkeakoulun opiskelijakunta Graafinen ohjeisto 1 Sisällys Tunnus 3 Tunnuksen suoja-alueet 4 Tunnuksen käyttö 5 Värit 6 7 Kaakkolennokit 8 Sovellukset Käyntikortit 9 Asiakirjapohja

Lisätiedot

VirtuaaliAMK Ympäristömerkkipeli > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

VirtuaaliAMK Ympäristömerkkipeli > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain VirtuaaliAMK Ympäristömerkkipeli > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien Arviointialue Ominaisuuksien

Lisätiedot

OPINNÄYTETYÖ MALLIPOHJAN KÄYTTÖOHJE

OPINNÄYTETYÖ MALLIPOHJAN KÄYTTÖOHJE OPINNÄYTETYÖ MALLIPOHJAN KÄYTTÖOHJE Opinnäytetyö mallipohja Kajaanin ammattikorkeakoulu 2.12.2005 SISÄLLYS 1 MALLIPOHJAN KÄYTTÖÖNOTTO 1 2 TEKSTIN KIRJOITTAMINEN 2 2.1 Valmiin tekstin siirtäminen 2 2.2

Lisätiedot

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai

Lisätiedot

T-121.2100 Johdatus käyttäjäkeskeiseen tuotekehitykseen 2 op. Marko Nieminen

T-121.2100 Johdatus käyttäjäkeskeiseen tuotekehitykseen 2 op. Marko Nieminen T-121.2100 Johdatus käyttäjäkeskeiseen tuotekehitykseen 2 op T-121.2100/3110: Henkilökunta Vastuuopettajat Johanna Viitanen, Assistentti.2100 Lasse Lumiaho, Janne Käki Assistentti.3110 Janne Käki, Lasse

Lisätiedot

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla)

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) T A M P E R E E N Y L I O P I S T O Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) Kasvatustieteiden yksikkö Kasvatustieteiden pro gradu -tutkielma NIMI NIMINEN

Lisätiedot

Artikkelin lisääminen

Artikkelin lisääminen Sisällys Artikkelin lisääminen...3 Artikkelin muokkaaminen...5 Kuvan lisääminen artikkeliin...6 Väliotsikoiden lisääminen artikkeliin...9 Navigointilinkin lisääminen valikkoon...10 Käyttäjätietojen muuttaminen...13

Lisätiedot

STS UUDEN SEUDULLISEN TAPAHTUMAN TEKO

STS UUDEN SEUDULLISEN TAPAHTUMAN TEKO STS UUDEN SEUDULLISEN TAPAHTUMAN TEKO Valitse vasemmasta reunasta kohta Sisällöt Valitse painike Lisää uusi Tapahtuma Tämän jälkeen valitse kieleksi Suomi VÄLILEHTI 1 PERUSTIEDOT Valittuasi kieleksi suomen,

Lisätiedot

Sivunumerot ja osanvaihdot

Sivunumerot ja osanvaihdot Sivunumerot ja osanvaihdot WORD 2010 Sivu 1 / 11 Sivunumerot ja osanvaihdot HUOM ohje on tehty toimimaan WORD 2010 -tekstinkäsittelyohjelmalla. Ohje saattaa toimia tai olla toimimatta myös uudemmille tai

Lisätiedot

Keski-Suomen Yhteisöjen Tuki Graafinen ohjeistus 2014. www.kyt.fi

Keski-Suomen Yhteisöjen Tuki Graafinen ohjeistus 2014. www.kyt.fi Keski-Suomen Yhteisöjen Tuki Graafinen ohjeistus 2014 1 www.kyt.fi Keski-Suomen Yhteisöjen Tuki on keskisuomalainen kansalaistoiminnan ja sitä edustavien yhteisöjen kehittäjä. Keski-Suomen Yhteisöjen Tuen

Lisätiedot

Skype for Business pikaohje

Skype for Business pikaohje Skype for Business pikaohje Sisällys KOKOUSKUTSU... 2 ENNEN ENSIMMÄISEN KOKOUKSEN ALKUA... 4 LIITTYMINEN KOKOUKSEEN SKYPE FOR BUSINEKSELLA... 5 LIITTYMINEN KOKOUKSEEN SELAIMEN KAUTTA... 6 LIITTYMINEN KOKOUKSEEN

Lisätiedot

Suomen virtuaalikylä Virtuaalikylä v. 0.9 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Suomen virtuaalikylä Virtuaalikylä v. 0.9 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaalikylä Virtuaalikylä v. 0.9 > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien Arviointialue

Lisätiedot

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

TAMK Ohjelmistotekniikka G Graafisten käyttöliittymien ohjelmointi Herkko Noponen Osmo Someroja. Harjoitustehtävä 2: Karttasovellus Kartta TAMK Ohjelmistotekniikka G-04237 Graafisten käyttöliittymien ohjelmointi Harjoitustehtävä 2: Karttasovellus Kartta TAMK Karttasovellus Kartta Sivu 2/8 Sisällysluettelo 1. JOHDANTO...3 2. VAATIMUSMÄÄRITTELY...

Lisätiedot

- Jalkapalloa jokaiselle -

- Jalkapalloa jokaiselle - Kauden vaihto Ohjeita ylläpitäjille Arto Kalliola - Jalkapalloa jokaiselle - KAUDEN VAIHTAMINEN JOPOX-JÄRJESTELMÄSSÄ Yleistä Kun toimintakausi lähestyy loppuaan, luodaan Jopox-järjestelmään seuraavaa kautta

Lisätiedot

Hai uoto. luokseen kutsuva loistokunta. Graafinen ohjeisto

Hai uoto. luokseen kutsuva loistokunta. Graafinen ohjeisto Graafinen ohjeisto 1 Sisällys Esipuhe 3 Tunnus 4 Versiot 5 Käyttö 9 Vaakuna 10 Värit 11 Typografia 12 Graafiset elementit 13 Lomakepohjat 14 Vaakunalla 14 Markkinointitunnuksella 15 Kirjekuoret ja käyntikortit

Lisätiedot

Planssit (layouts) ja printtaus

Planssit (layouts) ja printtaus 1 / 21 Digitaalisen arkkitehtuurin yksikkö Aalto-yliopisto 17.11.2015 Planssit (layouts) ja printtaus Yksittäisen kuvan printtaus 2 / 21 Ennen printtausta valitse näkymä, jonka haluat printata, klikkaamalla

Lisätiedot

TALLENNETAAN MUISTITIKULLE JA MUISTIKORTILLE

TALLENNETAAN MUISTITIKULLE JA MUISTIKORTILLE TALLENNETAAN MUISTITIKULLE JA MUISTIKORTILLE HERVANNAN KIRJASTON TIETOTORI Insinöörinkatu 38 33720 Tampere 040 800 7805 tietotori.hervanta@tampere.fi TALLENNETAAN MUISTIKULLE JA MUISTIKORTILLE 1 Muistitikun

Lisätiedot

Konventiot käyttöliittymäsuunnittelussa

Konventiot käyttöliittymäsuunnittelussa T-121.200 Käyttöliittymäpsykologia Konventiot käyttöliittymäsuunnittelussa 4.2.2004 Tero Jantunen 51055C Tietotekniikka tero.jantunen@hut.fi 1 / 8 Sisällysluettelo 1 Johdanto... 3 2 Mikä konventio, mikä

Lisätiedot

3M Toimistotuotteet. Graafinen ohjeisto / Jälleenmyyjät. Näin käytämme. logoja

3M Toimistotuotteet. Graafinen ohjeisto / Jälleenmyyjät. Näin käytämme. logoja 3M Toimistotuotteet Graafinen ohjeisto / Jälleenmyyjät Näin käytämme logoja Sisältö: 1 Yleistä tuotenimistä ja logoista 1 2 3M-logo 1 2.1 3M logon käyttö internetissä 3 3 Post-it -logo 4 3.1 Perusviestilaput

Lisätiedot

Turun yliopiston ylioppilaskunnan graafinen ohjeisto 2016

Turun yliopiston ylioppilaskunnan graafinen ohjeisto 2016 Turun yliopiston ylioppilaskunnan graafinen ohjeisto 2016 1. Tunnus 1.1 Markkinointitunnus Käytetään esimerkiksi TYYn viestinnässä, esitteissä, oppaissa, julisteissa, markkinointitavaroissa, sosiaalisessa

Lisätiedot

GRAAFINEN OHJEISTUS. Ilves ry

GRAAFINEN OHJEISTUS. Ilves ry GRAAFINEN OHJEISTUS Ilves ry Copyright Ilves ry Versio 1.0 / Marraskuu 2015 YLEISTÄ Tämä ohjeistus on rakennettu ohjenuoraksi Ilves ry:n henkilökunnalle sekä kaikille urheiluseuran sidosryhmille, joilla

Lisätiedot

Picasa 3 -kuvankäsittelyopas, osa 2, käytä tehokkaasti

Picasa 3 -kuvankäsittelyopas, osa 2, käytä tehokkaasti Picasa 3 -kuvankäsittelyopas, osa 2, käytä tehokkaasti Tämä on ensimmäisen kuvankäsittelyoppaan jatko-osa. Tässä jatko-osassa opimme käyttämään Picasan mainioita ominaisuuksia tehokkaasti ja monipuolisesti.

Lisätiedot

TULLI GRAAFINEN OHJEISTUS ILMEEN PERUSELEMENTIT GRAAFINEN OHJEISTO 2016

TULLI GRAAFINEN OHJEISTUS ILMEEN PERUSELEMENTIT GRAAFINEN OHJEISTO 2016 TULLI GRAAFINEN OHJEISTUS ILMEEN PERUSELEMENTIT GRAAFINEN OHJEISTO 2016 TULLI GRAAFINEN OHJEISTUS ILMEEN PERUSELEMENTIT 2 SISÄLTÖ Saatteeksi... 3 Tullin tunnus... 4 Tullin tunnusvaihtoehdot... 5 Tullin

Lisätiedot

Tasogeometriaa GeoGebran piirtoalue ja työvälineet

Tasogeometriaa GeoGebran piirtoalue ja työvälineet Tasogeometriaa GeoGebran piirtoalue ja työvälineet Näissä harjoituksissa työskennellään näkymässä Näkymät->Geometria PIIRRÄ (ja MITTAA) a) jana toinen jana, jonka pituus on 3 b) kulma toinen kulma, jonka

Lisätiedot

Jos haluat uuden Share-työkalun, valitse Pods -> Share -> Add New Share tai jos sinulla on jo auki Share-työkalu, näyttää se tältä:

Jos haluat uuden Share-työkalun, valitse Pods -> Share -> Add New Share tai jos sinulla on jo auki Share-työkalu, näyttää se tältä: Share-työkalu Share-työkalulla voit jakaa Connect-huoneessa tietokoneesi näyttöä, koneellasi auki olevia sovelluksia tai valkotaulun, johon voi piirtää tai kirjoittaa. Jos haluat uuden Share-työkalun,

Lisätiedot

Hgin kaupungin opetusvirasto Wilma opas huoltajille 1(10) HAKE/Tiepa 28.2.2007 KKa

Hgin kaupungin opetusvirasto Wilma opas huoltajille 1(10) HAKE/Tiepa 28.2.2007 KKa Hgin kaupungin opetusvirasto Wilma opas huoltajille 1(10) :LOPD 0LNl:LOPDRQ" Wilma on internetin kautta toimiva liittymä opettajille, oppilaille ja näiden huoltajille. Se ei ole käyttäjän koneella oleva

Lisätiedot

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

Ohjeissa pyydetään toisinaan katsomaan koodia esimerkkiprojekteista (esim. Liikkuva_Tausta1). Saat esimerkkiprojektit opettajalta. Ohjeissa pyydetään toisinaan katsomaan koodia esimerkkiprojekteista (esim. Liikkuva_Tausta1). Saat esimerkkiprojektit opettajalta. Vastauksia kysymyksiin Miten hahmon saa hyppäämään? Yksinkertaisen hypyn

Lisätiedot

Share-työkalu (AC 9.1)

Share-työkalu (AC 9.1) 1 Share-työkalu (AC 9.1) Share-työkalulla voit jakaa Connect-huoneessa tietokoneesi näyttöä, koneellasi auki olevia sovelluksia tai valkotaulun, johon voi piirtää tai kirjoittaa. Jos haluat uuden Share-työkalun,

Lisätiedot

Office_365_loppukäyttäjän ohje. 15.5.2015 Esa Väistö

Office_365_loppukäyttäjän ohje. 15.5.2015 Esa Väistö Office_365_loppukäyttäjän ohje 15.5.2015 Esa Väistö 2 Sisällysluettelo Kuvaus... 3 Kirjautuminen Office_365:een... 3 Valikko... 4 Oppilaan näkymä alla.... 4 Opettajan näkymä alla... 4 Outlook (Oppilailla)...

Lisätiedot

Mainosankkuri.fi-palvelun käyttöohjeita

Mainosankkuri.fi-palvelun käyttöohjeita Mainosankkuri.fi-palvelun käyttöohjeita Sisällys 1. Johdanto... 1 2. Sisäänkirjautuminen... 1 3. Palvelussa navigointi... 2 4. Laitteet... 2 5. Sisällönhallinta... 4 6. Soittolistat... 7 7. Aikataulut...

Lisätiedot

GRAAFINEN OHJEISTO. Päivitetty:

GRAAFINEN OHJEISTO. Päivitetty: Päivitetty: 8.2.2016 Liikemerkki - vaaka Woikosken liikemerkki muodostuu aina tekstilogosta ja sen yhteydessä olevasta tunnuksesta. Liikemerkin muotoja tai niiden suhteita ei saa venyttää tai vääristää

Lisätiedot

,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU

,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU ,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU Tässä pääsette tutustumaan Internet Explorerin (IE) käyttöön. Muitakin selainversioita löytyy, kuten esimerkiksi Netscape, Opera ja Mozilla. Näiden muiden selainten

Lisätiedot

Pintamallintaminen ja maastomallinnus

Pintamallintaminen ja maastomallinnus 1 / 25 Digitaalisen arkkitehtuurin yksikkö Aalto-yliopisto Pintamallintaminen ja maastomallinnus Muistilista uuden ohjelman opetteluun 2 / 25 1. Aloita käyttöliittymään tutustumisesta: Mitä hiiren näppäintä

Lisätiedot

Opintokohteiden muokkaus

Opintokohteiden muokkaus 1 Opintokohteiden muokkaus Näiden ohjeiden avulla hahmottuu kuinka opintokohteita voidaan muokata WebOodissa. Ohje on suunnattu käyttäjille, joilla on WebOodiin OpasMuokkaaja-oikeudet. WebOodin käyttölupia

Lisätiedot

TVT-opintojen starttaus "Hermossa" syksy 2015 johanna.kainulainenjyu.fi

TVT-opintojen starttaus Hermossa syksy 2015 johanna.kainulainenjyu.fi TVT-opintojen starttaus "Hermossa" syksy 2015 johanna.kainulainenjyu.fi PLE = personal learning environment henkilökohtainen oppimisen ympäristö, joka yhdistää teknologian, pedagogiikan, oppimisen ja ihmiset

Lisätiedot