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

Luentoaikataulu Luento 2 (vko 49) Multimodaalisuus. Visuaaliset suunnitteluperiaatteet. IHTE-2100 KaSuper 2008-2009. Käyttöliittymätyyppejä

Luentoaikataulu Luento 2 (vko 49) Multimodaalisuus. Visuaaliset suunnitteluperiaatteet. IHTE-2100 KaSuper 2008-2009. Käyttöliittymätyyppejä IHTE-2100 KaSuper 2008-2009 Luento 2: multimodaalisuus, visuaaliset suunnitteluperiaatteet Luentoaikataulu Luento 1 (vko 49) Kurssijärjestelyt, käyttöliittymän määritelmä. GUI historiaa Luento 2 (vko 49)

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

Visuaalisen suunnittelun alkeita. Aiheina

Visuaalisen suunnittelun alkeita. Aiheina Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Visuaalisen suunnittelun perusteita Visuaalisen suunnittelun periaatteet (Dix et al.) CRAP-suunnittelumalli

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

Päivän aiheet. Käyttöliittymän keskustelutavat. Keskustelutavat

Päivän aiheet. Käyttöliittymän keskustelutavat. Keskustelutavat IHTE-2100 KaSuper 2008-2009 Luento 6: Käyttöliittymän keskustelutapoja, käyttöliittymäelementtejä Päivän aiheet Käyttöliittymän vuorovaikutustapoja Graafisen käyttöliittymän elementtejä Käyttöliittymän

Lisätiedot

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

Käyttöliittymän suunnitteluohje, käytettävyyden psykologia. Laskari 6 Käyttöliittymän suunnitteluohje, käytettävyyden psykologia Laskari 6 Käytettävyyden psykologia Ihmisen psykologisen toiminnan periaatteet on otettava huomioon käyttöliittymää suunniteltaessa Miten ihminen

Lisätiedot

TIETOKONEEN ASETUKSILLA PARANNAT KÄYTETTÄVYYTTÄ

TIETOKONEEN ASETUKSILLA PARANNAT KÄYTETTÄVYYTTÄ TIETOKONEEN ASETUKSILLA PARANNAT KÄYTETTÄVYYTTÄ Windows XP-käyttöjärjestelmän asetuksilla sekä Word-asetuksilla voit vaikuttaa tietokoneen näytön ulkoasuun, selkeyteen ja helppokäyttöisyyteen.. 1) ASETUKSET

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

tunnus värit Sisältö typografia johdanto... 3 tunnus... 4 värit... 7 typografia... 8 sovellukset...10 sovellukset

tunnus värit Sisältö typografia johdanto... 3 tunnus... 4 värit... 7 typografia... 8 sovellukset...10 sovellukset Graafinen ohjeisto värit tunnus 2 Sisältö johdanto... 3 tunnus... 4 värit... 7 typografia... 8 sovellukset...10 typografia sovellukset JOHdanto Siuron Piharakennus Oy on kasvava pirkanmaalainen maarakennusyhtiö,

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

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

1.Esipuhe. Esipuhe. Graafinen ohjeisto Rauman Lukko

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

Lisätiedot

ViNOn graafinen ohjeisto, alpha 22.1.2013

ViNOn graafinen ohjeisto, alpha 22.1.2013 ViNOn graafinen ohjeisto, alpha 22.1.2013 Johdanto Graafiset ohjeistot ovat viestinnän alan yleinen käytäntö. Kaikessa järjestöviestinnässä käytetään organisaatiokohtaisia graafisia ohjeistuksia, jotta

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

E s i t y s g r a f i i k k a a s e l k o k i e l e l l ä MICROSOFT. PowerPoint. P e t r i V a i n i o P e t r i I l m o n e n TIKAS-SARJA

E s i t y s g r a f i i k k a a s e l k o k i e l e l l ä MICROSOFT. PowerPoint. P e t r i V a i n i o P e t r i I l m o n e n TIKAS-SARJA MICROSOFT E s i t y s g r a f i i k k a a s e l k o k i e l e l l ä PowerPoint P e t r i V a i n i o P e t r i I l m o n e n TIKAS-SARJA 6 Sisällysluettelo JOHDANTO TIKAS-PROJEKTI KIRJAN RAKENNE JA TASOMERKINNÄT

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

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

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

Lisätiedot

2.1 Tunnus. TUNNUKSEN KÄYTÖN RAJOITUKSET Käytä kuhunkin käyttötarpeeseen suunniteltuja originaaleja logoversioita www-sivujen logopankista

2.1 Tunnus. TUNNUKSEN KÄYTÖN RAJOITUKSET Käytä kuhunkin käyttötarpeeseen suunniteltuja originaaleja logoversioita www-sivujen logopankista 2.1 Tunnus LAHDEN AMMATTIKORKEAKOULU GRAAFINEN OHJEISTO 7 Lahden ammattikorkeakoulun merkki perustuu vahvaan, tunnistettavaan kirjainmuotoiluun, joka on linjassa ilmeessä käytettävän muun typografian kanssa.

Lisätiedot

Tunnus. Elinkeinoelämän keskusliiton EK:n visuaalinen ilme heijastaa keskusliiton visiota ja missiota sekä uudelle liitolle asetettuja tavoitteita.

Tunnus. Elinkeinoelämän keskusliiton EK:n visuaalinen ilme heijastaa keskusliiton visiota ja missiota sekä uudelle liitolle asetettuja tavoitteita. Graafinen ohjeisto Tunnus Elinkeinoelämän keskusliiton EK:n visuaalinen ilme heijastaa keskusliiton visiota ja missiota sekä uudelle liitolle asetettuja tavoitteita. Visio: Suomi on Euroopan kilpailukykyisin

Lisätiedot

Posterin teko MS Publisherilla

Posterin teko MS Publisherilla Posterin teko MS Publisherilla Ensimmäisenä avaa MS Publisher 2010. Löydät sen Windows valikosta - All programs - Microsoft Office. Publisheriin avautuu allaolevan kuvan mukainen näkymä. Mikäli et näe

Lisätiedot

Pikaopas. Valintanauhan näyttäminen tai piilottaminen Avaa valintanauha napsauttamalla välilehteä, tai kiinnitä se pysyvästi näkyviin.

Pikaopas. Valintanauhan näyttäminen tai piilottaminen Avaa valintanauha napsauttamalla välilehteä, tai kiinnitä se pysyvästi näkyviin. Pikaopas Microsoft Visio 2013 näyttää erilaiselta kuin aiemmat versiot. Tämän oppaan avulla pääset alkuun nopeasti ja saat yleiskuvan uusista ominaisuuksista. Päivitetyt mallit Mallien avulla voit nopeasti

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

Graafinen ohjeisto 1

Graafinen ohjeisto 1 Graafinen ohjeisto 1 Sisältö Tunnuksista yleisesti... 3 Tunnuksen versiot ja rakenne.... 4 Merkin värit.... 5 Tunnuksen värivaihtoehtoja... 7 Tunnuksen suoja-alue.... 8 Tunnuksen sijoittelu.... 9 Pienen

Lisätiedot

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

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

Lisätiedot

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

Ensin klikkaa käynnistä-valikkoa ja sieltä Kaikki ohjelmat valikosta kaikki ohjelmat Microsoft Office 2010 löytyy tietokoneen käynnistä-valikosta aivan kuin kaikki muutkin tietokoneelle asennetut ohjelmat. Microsoft kansion sisältä löytyy toimisto-ohjelmistopakettiin kuuluvat eri ohjelmat,

Lisätiedot

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

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

Lisätiedot

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

Graafinen ohjeisto* KESKENERÄINEN PIRAATTIPUOLUE. Visuaalisen suunnittelun ja viestinnän ohjeita Piraattipuolueen sisäiseen ja ulkoiseen viestintään versio 0.8 2010 Graafinen ohjeisto* PIRAATTIPUOLUE * Visuaalisen suunnittelun ja viestinnän ohjeita Piraattipuolueen sisäiseen ja ulkoiseen viestintään Alkusanat G raafiset ohjeistot ovat viestinnän alan

Lisätiedot

ohjeistus retkikerho

ohjeistus retkikerho Graafinen ohjeistus Esittely Oulun luonnonsuojeluliiton alla toimiva Retkikerho on kanava, jonka avulla voi helposti irrottautua arjesta kaupungin lähiluontoon. Retkitarjonta on hyvin monipuolinen ja kerhon

Lisätiedot

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

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

Lisätiedot

Monilla aloilla myös pukeutuminen ja käyttäytyminen ovat yrityksen visuaalisen linjan mukaista.

Monilla aloilla myös pukeutuminen ja käyttäytyminen ovat yrityksen visuaalisen linjan mukaista. PROFILOINNIN TYÖKALUT Yrityksen kaikilla merkeillä täytyy olla yhtenäinen linja. Visuaalinen kokonaisuus: symbolit, merkit, tunnukset, tunnusvärit, typografia muodostavat yhden eheän erottuvan linjan,

Lisätiedot

Tekstinkäsittelyn jatko Error! Use the Home tab to apply Otsikko 1 to the text that you want to appear here. KSAO Liiketalous 1

Tekstinkäsittelyn jatko Error! Use the Home tab to apply Otsikko 1 to the text that you want to appear here. KSAO Liiketalous 1 KSAO Liiketalous 1 Lomakkeet Lomake on asiakirja, joka sisältää täyttämistä ohjaavia tietoja tai merkintöjä. Wordin lomakekenttä-toiminnolla luodaan näytöllä täytettäviä lomakkeita tai tulostettavia lomakepohjia.

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

Avaa ohjelma ja tarvittaessa Tiedosto -> Uusi kilpailutiedosto

Avaa ohjelma ja tarvittaessa Tiedosto -> Uusi kilpailutiedosto Condess ratamestariohjelman käyttö Aloitus ja alkumäärittelyt Avaa ohjelma ja tarvittaessa Tiedosto -> Uusi kilpailutiedosto Kun kysytään kilpailun nimeä, syötä kuvaava nimi. Samaa nimeä käytetään oletuksena

Lisätiedot

GRAAFINEN OHJEISTO OLLILA TRANS OY

GRAAFINEN OHJEISTO OLLILA TRANS OY GRAAFINEN OHJEISTO OLLILA TRANS OY Ohjeiston sisältö Tämän ohjeiston tarkoitus on antaa selkeät suuntaviivat Ollila Trans Oy:n viestinnälle. Annettuja ohjeita noudattamalla yrityksestä annetaan yhtenäinen,

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

Melan graafinen ohje. Tämä ohjeisto esittelee Melan visuaalisen ilmeen peruselementit. Ohjeisto on yhdenmukaisen asiakasviestinnän työkalu.

Melan graafinen ohje. Tämä ohjeisto esittelee Melan visuaalisen ilmeen peruselementit. Ohjeisto on yhdenmukaisen asiakasviestinnän työkalu. Melan graafinen ohje Tämä ohjeisto esittelee Melan visuaalisen ilmeen peruselementit. Ohjeisto on yhdenmukaisen asiakasviestinnän työkalu. Selkeä ja yhtenäinen ilme vahvistaa positiivista mielikuvaa Melasta.

Lisätiedot

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

Tunnus. 1. Suomen Ammattiliittojen Keskusjärjestön SAK:n tunnus perusmuodossaan Graafiset ohjeet 1 1. Suomen Ammattiliittojen Keskusjärjestön SAK:n tunnus perusmuodossaan Tunnus Suomen Ammattiliittojen Keskusjärjestön SAK:n tunnus on järjestön nimen alkukirjaimista muodostettu nimilogo,

Lisätiedot

Opetuksen ja opiskelun tehokas ja laadukas havainnointi verkkooppimisympäristössä

Opetuksen ja opiskelun tehokas ja laadukas havainnointi verkkooppimisympäristössä Opetuksen ja opiskelun tehokas ja laadukas havainnointi verkkooppimisympäristössä Jukka Paukkeri (projektitutkija) Tampereen Teknillinen Yliopisto Matematiikan laitos Intelligent Information Systems Laboratory

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

2. Aloitus -välilehti, leikepöytä- ja fontti -ryhmät

2. Aloitus -välilehti, leikepöytä- ja fontti -ryhmät 2. Aloitus -välilehti, leikepöytä- ja fontti -ryhmät Aloitus -välilehdelle on sijoitettu eniten käytetyt muotoiluihin liittyvät komennot. Välilehti sisältää viisi eri ryhmää, johon komennot on sijoitettu

Lisätiedot

LIITE 1. Graafinen ohjeisto 1(12) GRAAFINEN OHJEISTO. SammutinHuolto Nevanperä Ky 2011

LIITE 1. Graafinen ohjeisto 1(12) GRAAFINEN OHJEISTO. SammutinHuolto Nevanperä Ky 2011 LIITE 1. Graafinen ohjeisto 1(12) GRAAFINEN OHJEISTO SammutinHuolto Nevanperä Ky 2011 2(12) Sisältö 1. Johdanto 3 2. Tunnus 4 - Tunnuksen koko 5 - Tunnuksen suoja-alue 6 - Tunnuksen käyttö 7 3. Värimääritykset

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

KUVAN TUOMINEN, MUOKKAAMINEN, KOON MUUTTAMINEN JA TALLENTAMINEN PAINTISSA

KUVAN TUOMINEN, MUOKKAAMINEN, KOON MUUTTAMINEN JA TALLENTAMINEN PAINTISSA KUVAN TUOMINEN, MUOKKAAMINEN, KOON MUUTTAMINEN JA TALLENTAMINEN PAINTISSA SISÄLLYS 1. KUVAN TUOMINEN PAINTIIN...1 1.1. TALLENNETUN KUVAN HAKEMINEN...1 1.2. KUVAN KOPIOIMINEN JA LIITTÄMINEN...1 1.1. PRINT

Lisätiedot

Käytettävyyslaatumallin rakentaminen web-sivustolle. Oulun yliopisto tietojenkäsittelytieteiden laitos pro gradu -suunnitelma Timo Laapotti 28.9.

Käytettävyyslaatumallin rakentaminen web-sivustolle. Oulun yliopisto tietojenkäsittelytieteiden laitos pro gradu -suunnitelma Timo Laapotti 28.9. Käytettävyyslaatumallin rakentaminen web-sivustolle Tapaus kirjoittajan ABC-kortti Oulun yliopisto tietojenkäsittelytieteiden laitos pro gradu -suunnitelma Timo Laapotti 28.9.2005 Kirjoittajan ABC-kortti

Lisätiedot

SATAKUNNAN AMMATTIKORKEAKOULU. Hakala Toni Varpelaide Heidi TEKSTINKÄSITTELYN OHJEET CASE: OPINNÄYTETYÖN RAPORTOINTI WORDILLA

SATAKUNNAN AMMATTIKORKEAKOULU. Hakala Toni Varpelaide Heidi TEKSTINKÄSITTELYN OHJEET CASE: OPINNÄYTETYÖN RAPORTOINTI WORDILLA SATAKUNNAN AMMATTIKORKEAKOULU Hakala Toni Varpelaide Heidi TEKSTINKÄSITTELYN OHJEET CASE: OPINNÄYTETYÖN RAPORTOINTI WORDILLA Liiketalous ja tietojenkäsittely Huittinen Liiketalous Taloushallinto 2005 1

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

Kirjan toteutus BoD easybook -taittotyökalun avulla

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

Lisätiedot

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

Opinnäytetyön mallipohjan ohje

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

Lisätiedot

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

Ajokorttimoduuli Moduuli 2. - Laitteenkäyttö ja tiedonhallinta. Harjoitus 1 Ajokorttimoduuli Moduuli 2 - Laitteenkäyttö ja tiedonhallinta Harjoitus 1 Tämän harjoituksen avulla opit alustamaan levykkeesi (voit käyttää levykkeen sijasta myös USBmuistitikkua). Harjoitus tehdään Resurssienhallinnassa.

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

Johtokunta 2.11.2009 155. Graafinen ohjeistus

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

Lisätiedot

Aleksanterinkadun Appro. Tunnusohjeisto 25.2.2015

Aleksanterinkadun Appro. Tunnusohjeisto 25.2.2015 Tunnusohjeisto 25.2.2015 sisällys tunnus 3 1 tunnus tekstillä 4 2 tekstitön tunnus 5 tunnuksen väriversiot 6 tunnus kuvan päällä 7 tunnus 1 n tunnus eli visuaalinen tunniste viittaa muotokieleltään Lahden

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

Graafinen ohjeisto 3.2. Tunnus (ilman koulutus-sanaa) ja tunnuksen suoja-alue Tunnuksen muotoilu perustuu sanaan FINVA, erillistä liikemerkkiä ei käytetä. Tunnuksessa yhteen sulautuvat Finanssi ja vakuutus.

Lisätiedot

GRAAFINEN OHJEISTO 1/2006. Päivitetty 4/2013

GRAAFINEN OHJEISTO 1/2006. Päivitetty 4/2013 GRAAFINEN OHJEISTO 1/2006 Päivitetty 4/2013 SISÄLLYSLUETTELO Esipuhe 1. Tunnus - Suoja-alue ja mittasuhteet - Käyttö - Visuaalinen hierarkia 2. Värimaailma - Värimääritykset - Värien käyttö 3. Typografia

Lisätiedot

Gimp alkeet XIII 9 luokan ATK-työt/HaJa Sivu 1 / 8. Tasot ja kanavat. Jynkänlahden koulu. Yleistä

Gimp alkeet XIII 9 luokan ATK-työt/HaJa Sivu 1 / 8. Tasot ja kanavat. Jynkänlahden koulu. Yleistä Gimp alkeet XIII 9 luokan ATK-työt/HaJa Sivu 1 / 8 Tasot ja kanavat Yleistä Tasot eli layerit ovat tärkeä osa nykyajan kuvankäsittelyä. Tasojen perusidea on se, että ne ovat läpinäkyviä "kalvoja", joita

Lisätiedot

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

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

Lisätiedot

Harjoitustyöohje. Päivän aiheet. Harjoitustyö. Herwoodin kuningaskunta. Harjoitustyön ohjeistusta Ikonit

Harjoitustyöohje. Päivän aiheet. Harjoitustyö. Herwoodin kuningaskunta. Harjoitustyön ohjeistusta Ikonit Päivän aiheet Harjoitustyön ohjeistusta Ikonit Harjoitustyöohje 15.12.2008 Harjoitustyö 2-3 hengen ryhmissä, suositus 3 hlöä Kaksi vaihetta - välinäyttö vaiheiden välissä - palautetilaisuus lopuksi Aihe:

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

Yhtenäinen ja johdonmukainen visuaalinen ilme heijastaa Fennovoiman toiminnan laatua, luotettavuutta ja pitkäjänteisyyttä.

Yhtenäinen ja johdonmukainen visuaalinen ilme heijastaa Fennovoiman toiminnan laatua, luotettavuutta ja pitkäjänteisyyttä. Graafinen ohjeisto 2 Johdanto Sisältö Graafinen ohjeisto on apuväline, jota noudattamalla Fennovoiman visuaalisesta ilmeestä rakentuu tunnistettava ja laadullisesti yhtenäinen kokonaisuus. Yhtenäinen ja

Lisätiedot

Word 2010 Pikaopas Hannu Matikainen Päivitetty: 14.4.2012

Word 2010 Pikaopas Hannu Matikainen Päivitetty: 14.4.2012 Word 2010 Pikaopas Hannu Matikainen Päivitetty: 14.4.2012 1(5) Ohjelmaikkunan osat Valintanauhan tärkeimmät välilehdet ovat Tiedosto, Aloitus, Lisää ja Sivun asettelu. Kuvassa näkyy Aloitus-välilehti.

Lisätiedot

SINIVALKOINEN JALANJÄLKI OHJEISTUS TUNNUKSEN KÄYTÖSTÄ

SINIVALKOINEN JALANJÄLKI OHJEISTUS TUNNUKSEN KÄYTÖSTÄ SINIVALKOINEN JALANJÄLKI OHJEISTUS TUNNUKSEN KÄYTÖSTÄ SISÄLTÖ TUNNUS JA SEN KÄYTTÖOIKEUS 3 TUNNUKSEN RAKENNE 4 VÄRIT 5 TUNNUKSEN KÄYTTÖ 6 CO-BRANDING 9 SJ-TUNNUS ja YHTEISÖmerkit 11 TYPOGRAFIA 14 GRAAFISIA

Lisätiedot

Graafinen ohjeisto 1.0

Graafinen ohjeisto 1.0 Graafinen ohjeisto 1.0 01 01 Peruselementit Logo POP vakuutuksen logo on suunniteltu digitaaliseen ympäristöön ja siksi digitaalinen näkyvyys määrittelee ilmeen. Play-elementti Play-elementti painikkeenomaisena

Lisätiedot

Valintanauhan komennot Valintanauhan kussakin välilehdessä on ryhmiä ja kussakin ryhmässä on toisiinsa liittyviä komentoja.

Valintanauhan komennot Valintanauhan kussakin välilehdessä on ryhmiä ja kussakin ryhmässä on toisiinsa liittyviä komentoja. Pikaopas Microsoft Excel 2013 näyttää erilaiselta kuin aiemmat versiot. Tämän oppaan avulla pääset alkuun nopeasti ja saat yleiskuvan uusista ominaisuuksista. Komentojen lisääminen pikatyökaluriville Pidä

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

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

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

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

Lisätiedot

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

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

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

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

Miten suunnitella hyvä käyttöliittymä?

Miten suunnitella hyvä käyttöliittymä? Miten suunnitella hyvä käyttöliittymä? 6.5.2010 Timo Jokela Timo Jokela FT (2001), dosentti (Oulun yliopisto 2009) historiaa 1990-luvun alussa VTT:llä käyttöliittymien mallinnusta 1995 Nokia Mobile Phones,

Lisätiedot

1 ClipArt -kuvan käyttö Paint-ohjelmassa

1 ClipArt -kuvan käyttö Paint-ohjelmassa 1 ClipArt -kuvan käyttö Paint-ohjelmassa 1. Avaa Paint: 2. Käynnistä/Kaikki Ohjelmat/Apuohjelmat/Paint. 3. Pienennä Paint -ohjelma kuvakkeeksi tehtäväpalkkiin, ohjelman pienennyspainikkeesta. 4. Avaa Internet

Lisätiedot

KOTISIVUKONE ULKOASUEDITORI

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

Lisätiedot

Opas Joensuun kaupunginteatterin visuaalisen ilmeen käyttöön

Opas Joensuun kaupunginteatterin visuaalisen ilmeen käyttöön Opas Joensuun kaupunginteatterin visuaalisen ilmeen käyttöön Johdanto sisällysluettelo Logo... 3 Logon käyttö... 4 Logon sovellukset... 5 Väripaletti... 6 Joensuun kaupunginteatteri on saanut uuden visuaalisen

Lisätiedot

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

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

Lisätiedot

Valkeakosken ammatti- ja aikuisopiston. Graafinen ohjeisto

Valkeakosken ammatti- ja aikuisopiston. Graafinen ohjeisto Valkeakosken ammatti- ja aikuisopiston Graafinen ohjeisto Logo Liekkireunat Otsikkoteksti Luetteloteksti Osoite Graafisen ilmeen osat Valkeakosken ammatti- ja aikuiskoulutuskeskuksen visuaalinen ilme muodostuu

Lisätiedot

Suomen Tekstiili ja Muoti ry:n uudistuneen ilmeen graafinen ohjeistus on käytännön työkalu kaikille viestinnän kanssa tekemisissä oleville.

Suomen Tekstiili ja Muoti ry:n uudistuneen ilmeen graafinen ohjeistus on käytännön työkalu kaikille viestinnän kanssa tekemisissä oleville. Graafinen ohjeisto Miten graafisilla sovelluksilla viestitään ja opastetaan? Toimiva graafinen ilme sovelluksineen kiteyttää yrityksen imagon, yhtenäistää yrityskulttuuria ja vapauttaa tärkeitä resursseja

Lisätiedot

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

Condes. Quick Start opas. Suunnistuksen ratamestariohjelmisto. Versio 7. Quick Start - opas Condes 7. olfellows www.olfellows.net 1. Condes Suunnistuksen ratamestariohjelmisto Versio 7 Quick Start opas Yhteystiedot: olfellows Jouni Laaksonen Poijukuja 4 21120 RAISIO jouni.laaksonen@olfellows.net www.olfellows.net olfellows www.olfellows.net

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

Taulukot. 2002 Päivi Vartiainen 1

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

Lisätiedot

GRAAFINEN OHJEISTO 1

GRAAFINEN OHJEISTO 1 GRAAFINEN OHJEISTO 1 LIEHUTA LIPPUAMME YLPEYDELLÄ. Alkusanat 3 Tunnus 4 Värit 9 Typografia 10 Kaari 12 Sovelluksia 13 2 LIPULLINEN RATKAISU Aktiivinen ja valveilla oleva ammattiyhdistysliike tukee työntekijää

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

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

SUOMEN VAPAAKIRKON LAPSI- JA NUORISOTYÖN GRAAFINEN OHJEISTO

SUOMEN VAPAAKIRKON LAPSI- JA NUORISOTYÖN GRAAFINEN OHJEISTO SUOMEN VAPAAKIRKON LAPSI- JA NUORISOTYÖN GRAAFINEN OHJEISTO SISÄLTÖ Johdanto...3 Logo...4 Logon käyttö...6 Logo ja sloganit...8 Typografia...10 Värit...12 Valokuvien käyttö...14 2 Suomen Vapaakirkon lapsi-

Lisätiedot

S-114.2720 Havaitseminen ja toiminta

S-114.2720 Havaitseminen ja toiminta S-114.2720 Havaitseminen ja toiminta Heikki Hyyti 60451P Harjoitustyö 2 visuaalinen prosessointi Treismanin FIT Kuva 1. Kuvassa on Treismanin kokeen ensimmäinen osio, jossa piti etsiä vihreätä T kirjainta.

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

GRAAFINEN OHJEISTO 1/2006. Päivitetty 11/2012

GRAAFINEN OHJEISTO 1/2006. Päivitetty 11/2012 GRAAFINEN OHJEISTO 1/2006 Päivitetty 11/2012 SISÄLLYSLUETTELO Esipuhe 1. Tunnus - Suoja-alue ja mittasuhteet - Käyttö - Visuaalinen hierarkia 2. Värimaailma - Värimääritykset - Värien käyttö 3. Typografia

Lisätiedot

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

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

Lisätiedot

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

LUOVA ETELÄ-KARJALA LOGO

LUOVA ETELÄ-KARJALA LOGO LUOVA ETELÄ-KARJALA LOGO Luova Etelä-Karjala logon lähtökohtana on maantieteellisen alueen muoto liitettynä Saimaaseen ja eteläkarjalaisten kädentaitoihin ja luovuuteen, monipuoliseen taito-tieto-osaamiseen.

Lisätiedot

Openoffice Impress-pikakurssi

Openoffice Impress-pikakurssi Openoffice Impress-pikakurssi Openofficen saat kotikoneellesi ilmaiseksi osoitteesta www.openoffice.org Writer on MS Wordin vastine, eli tekstinkäsittelyohjelma Calc on MS Exelin vastine, eli taulukkolaskenta-

Lisätiedot

Pikaopas. Online-tilin näyttäminen tai vaihtaminen Jos käytät pilvipalvelua, voit muuttaa asetuksia tai vaihtaa tiliä valitsemalla Tiedosto > Tili.

Pikaopas. Online-tilin näyttäminen tai vaihtaminen Jos käytät pilvipalvelua, voit muuttaa asetuksia tai vaihtaa tiliä valitsemalla Tiedosto > Tili. Pikaopas Microsoft Publisher 2013 näyttää erilaiselta kuin aiemmat versiot. Tämän oppaan avulla pääset alkuun nopeasti ja saat yleiskuvan uusista ominaisuuksista. Pikatyökalurivi Lisää usein käyttämiäsi

Lisätiedot

LUKKARIN KÄYTTÖOHJE Sisällys

LUKKARIN KÄYTTÖOHJE Sisällys LUKKARIN KÄYTTÖOHJE Sisällys 1. Yleistä... 2 2. Lukkarin käynnistys ja sisäänkirjautuminen... 2 3. Vapaa aikatauluhaku... 2 4. Lukujärjestyksen luominen ja avaaminen... 3 Lukukauden valinta... 3 Uuden

Lisätiedot

Vapo: Turveauman laskenta 1. Asennusohje

Vapo: Turveauman laskenta 1. Asennusohje Turveauman mittaus 3D-system Oy 3D-Win ohjelman lisätoiminto, jolla lasketaan turveaumasta tilaajan haluamat arvot ja piirretään aumasta kuva. Laskentatoiminto löytyy kohdasta Työkalut/Lisätoiminnot. Valitse

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

Key to Freedom GRAAFINEN OHJEISTO

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

Lisätiedot

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

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

Lisätiedot