IHTE-2100 Käyttöliittymäsuunnittelun perusteet
|
|
- Elsa Koskinen
- 8 vuotta sitten
- Katselukertoja:
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 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ätiedotIHTE-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ätiedotKÄYTTÖLIITTYMÄT. Visuaalinen suunnittelu
KÄYTTÖLIITTYMÄT Visuaalinen suunnittelu MUISTETTAVA Yksinkertaisuus Selkeys Johdonmukaisuus Sommittelutyyli on säilytettävä samankaltaisen koko sivustossa Sivustolle yhtenäinen ulkoasu Miellyttävä ulkonäkö
LisätiedotLuentoaikataulu 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ätiedotOpetusmateriaalin 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ätiedotVÄREISTÄ JA VAAROISTA
VÄREISTÄ JA VAAROISTA VÄRIEN KÄYTTÖ 1/2 asioiden ryhmittelyyn huomion kiinnittämiseen houkuttelevuuden lisäämiseen tyylikkyyden tavoitteluun kuitenkin liian paljon värejä = värikaaos (5+-2 väriä)
LisätiedotLomakkeiden suunnittelu. Aiheina
Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 2009. Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä
LisätiedotLomakkeiden suunnittelu. Aiheina
Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite:
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 3/8: Visuaalinen suunnittelu
LisätiedotVisuaalisen 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ätiedotTIETOKONEEN 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ätiedotSen 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ätiedot1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE VÄRILLINEN LOGO LOGO VÄRILLISELLÄ POHJALLA MUSTA LOGO 7 1.
1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE 4 1.2 VÄRILLINEN LOGO 5 1.3 LOGO VÄRILLISELLÄ POHJALLA 6 1.4 MUSTA LOGO 7 1.5 EI NÄIN 8 3 1.1 Logo ja turva-alue neste jacobsin logo Neste Jacobsin uusi tekstilogo
LisätiedotKä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ätiedotHELIA 1 (1) Outi Virkki Käyttöliittymät ja ohjelmiston suunnittelu :04
HELIA 1 (1) Luento 7 Graafisen käyttöliittymän peruselementit... 2 Ikkunat... 2 Sovellusikkunat (Application Windows)... 2 Asiakirjaikkunat (Document Windows)... 3 Toissijaiset sovellusikkunat (Secondary
LisätiedotPä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ätiedotJohdatus vuorovaikutteiseen teknologiaan
Aiheina Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Visuaalisen suunnittelun perusteita Visuaalisen suunnittelun periaatteet (Dix et al.) CRAP-suunnittelumalli
LisätiedotKun 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ätiedotHELIA 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ätiedotSISÄLLYS SISÄLLYS TUNNUS SUOJA-ALUE JA PIENIN KOKO VÄRIMÄÄRITYKSET TYPOGRAFIA
Suomen Lions-liitto ry:n GRAAFINEN OHJEISTO SISÄLLYS SISÄLLYS TUNNUS SUOJA-ALUE JA PIENIN KOKO VÄRIMÄÄRITYKSET TYPOGRAFIA 2 3 4 5 6 Suomen Lions-liitto ry:n graafinen ohjeisto on tehty yhtenäistämään järjestön
Lisätiedot1.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ätiedotMainoksen taittaminen Wordilla
Mainoksen taittaminen Wordilla Word soveltuu parhaiten standardimittaisten (A4 jne) word-tiedostojen (.docx) tai pdf-tiedostojen taittoon, mutta sillä pystyy tallentamaan pienellä kikkailulla myös kuvaformaattiin
Lisätiedottunnus 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ätiedotVERKOSTO GRAAFINEN OHJE
2018 SISÄLTÖ 3 Pikaohje 4 Tunnus ja suoja-alue 5 Tunnuksen versiot 6 Tunnuksen käyttö 7 Fontit 8 Värit 9 Soveltaminen ----- 10 Verkosto Lapset 2 suoja-alue Tunnuksen suoja-alueen sisäpuolella ei saa olla
LisätiedotViNOn 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ätiedotGraafinen 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ätiedotSuupohjan koulutuskuntayhtymä. Graafinen ohjeisto
Suupohjan koulutuskuntayhtymä Graafinen ohjeisto Graafinen ohjeisto Tämä graafinen ohjeisto antaa perusohjeet Vuoksin visuaalisen ilmeen käytöstä markkinointiviestinnässä. Graafisen ohjeiston noudattamisella
LisätiedotLomakkeiden suunnittelu. Aiheina
Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite:
LisätiedotIHTE-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ätiedotT 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ätiedotArvokas. Graafinen ohjeistus
Graafinen ohjeistus Sinä olet arvokas! -ohjelma rakentaa yhdenvertaisempaa Suomea, jossa jokaisella lähtökohdista ja elämäntilanteesta riippumatta on mahdollisuus kokea olevansa merkityksellinen osa yhteisöä
LisätiedotE 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ätiedotAvaa 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ätiedotKUVAN 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ätiedot6.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ätiedotTekstinkä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ätiedotGraafinen 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ätiedotPosterin 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ätiedotTunnus. 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ätiedotG R A A. Kaarinan Pojat ry:n graafinen ohjeistus
G R A A FI O HJ E IS Kaarinan Pojat ry:n graafinen ohjeistus N E N T US Logo Kaarinan Pojat ry:n logon tulee näkyä kaikissa KaaPon materiaaleissa, myös joukkueiden tuottamissa materiaaleissa. Logoa käytetään
LisätiedotSami 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ätiedotA-KILTOJEN LI TTO RY A-Kiltojen Liitto ry - Graafinen ohjeistus 4/2019
A-KILTOJEN LIITTO RY A-Kiltojen Liitto ry Graafinen ohjeistus Tunnus, käyttö A-Kiltojen Liitto ry:n tunnuksen väri on vihreä. Tunnusta tulee pääasiallisesti käyttää valkoisella tai mahdollisimman vaalealla
LisätiedotPikaopas. 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ätiedotKiipulan 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ätiedotEnsin 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ätiedotGraafinen 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ätiedot1/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ätiedotSISÄLLYS JOHDANTO 5. KUVAT 1. TUNNUS - SANOMA 6. VERKKOSIVUT 2. TUNNUS - KÄYTTÖ 7. TUOTEKORTIT JA ESITTEET. 2.1 Suoja-alue. 7.
GRAAFINEN OHJEISTO SISÄLLYS JOHDANTO 1. TUNNUS - SANOMA 2. TUNNUS - KÄYTTÖ 2.1 Suoja-alue 2.2 Eri osien käyttö 2.3 Minimikoot 5. KUVAT 6. VERKKOSIVUT 7. TUOTEKORTIT JA ESITTEET 7.1 Tuotekortit 7.2 Esitteet
LisätiedotRATKAISUT SIVU 1 / 15. Väriteemaan pääset käsiksi hieman eri tavoilla PowerPointin eri versioissa.
RATKAISUT SIVU 1 / 15 PowerPoint jatko Harjoitus 3.1-3.7: Harjoitus 3.1: Avaa ensin Harjoitustiedosto.pptx. Väriteemaan pääset käsiksi hieman eri tavoilla PowerPointin eri versioissa. Valitse joka tapauksessa
Lisätiedotohjeistus 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ätiedotTunnus. Typografia. Värit. Kuvamaailma. Sovellukset. päävärit lisävärit. värivariaatiot koko käyttö suoja-alue. internet Office
graafinen ohjeisto Tunnus värivariaatiot koko käyttö suoja-alue Typografia internet Office Värit päävärit lisävärit Kuvamaailma valokuvat graafiset elementit kuvituskuvat Sovellukset PowerPoint Mikä on
LisätiedotGraafinen ohjeistus 03/2016
Graafinen ohjeistus 03/2016 Sisältö Laatukeskuksen visuaalisen ilmeen tavoitteena on ilmentää laatua, ammattimaisuutta, uskottavuutta ja erinomaisuutta. Viestinnässä pyritään luomaan yksinkertaisen tyylikäs
Lisätiedot2. 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ätiedotGraafinen ohjeisto. Päivitetty Suomen Vapaa-ajankalastajien Keskusjärjestö GRAAFINEN OHJEISTO 1
Graafinen ohjeisto Päivitetty 4.6.2018 Suomen Vapaa-ajankalastajien Keskusjärjestö GRAAFINEN OHJEISTO 1 Tavoitteena yhtenäinen ja tunnistettava järjestöilme Graafinen ohjeisto antaa ohjeet ja mallit siitä,
Lisätiedot2.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ätiedotLOGO 2. LOGO. Autokeskuksen yritystunnus on Autokeskus-logo.
8 LOGO Autokeskuksen yritystunnus on Autokeskus-logo. Autokeskuksen logoa käytetään aina vaakamuodossa. Logoa ei saa latoa, piirtää tai asetella uudelleen. Logon mittasuhteita tai väritystä ei saa muuttaa.
LisätiedotTunnuksen 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ätiedotMonilla 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ätiedot1. 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ätiedotGRAAFINEN 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ätiedotLIITE 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ätiedotTUNNUS 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ätiedotKirjan 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ätiedotAjokorttimoduuli 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ätiedotTilkkuilijan 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ätiedotOpetuksen 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ätiedotSuunnittelijan sana. 3 Logo 4 Logon eri versiot 5 Logon käyttö 6 Logon virheellinen käyttö 7 Värimaailma 8 Typografia
Graafinen ohjeisto Sisältö 2 Suunnittelijan sana 3 Logo 4 Logon eri versiot 5 Logon käyttö 6 Logon virheellinen käyttö 7 Värimaailma 8 Typografia Suunnittelijan sana Tämän graafisen ohjeiston tarkoitus
LisätiedotFrontPage 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ätiedotWord 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ätiedotDigi-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ätiedotSuomen Ampumaurheiluliitto Finnish Shooting Sport Federation. Graafinen ohje visuaalinen ilme
Graafinen ohje visuaalinen ilme Sisällysluettelo 2. Saatesanat 3. Tunnus 4. Värit 5. Typografia 6. Tunnuksen kieliversiot ja juhlatunnus 7. Esimerkkejä graafisen ilmeen sovelluksista Graafinen ohje visuaalinen
Lisätiedot2 Graafinen ohjeisto. Viestintäosasto auttaa, kouluttaa ja ohjeistaa graafisen ilmeen käytössä ja soveltamisessa. Ota yhteyttä:
GRAAFINEN OHJEISTO VAPAAN KANSAN LAHJA VAPAALLE TIETEELLE Turun yliopisto perustettiin vuonna 1920 suomalaisten lahjoitusvaroilla. Alusta asti Turun yliopisto on tehnyt työtä koko yhteiskunnan palvelemiseksi.
LisätiedotKä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ätiedotJohtokunta 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ätiedotGRAAFINEN OHJEISTO 2017
GRAAFINEN OHJEISTO 2017 Graafinen ohjeisto ja sen käyttötarkoitus Sisällys Tullinkulman Työterveys Oy:n uusi aputoiminimi on Pirte ja se otetaan käyttöön vuoden 2018 alusta alkaen markkinoinnissa ja muussa
LisätiedotGraafinen. 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ätiedotMelan 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ätiedotPOWERPOINT HARJOITUKSET OMAN ESITYSPOHJAN RAKENTAMINEN
POWERPOINT HARJOITUKSET 3.1-3.7 OMAN ESITYSPOHJAN RAKENTAMINEN Tässä harjoituksessa luomme oman perustyylin, teemme omat värit, oman fonttiteeman, mukautamme perustyyliä ja tallennamme luomuksemme. 1/5
LisätiedotOhjeita 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ätiedot3. 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ätiedotTAULUKOINTI. Word Taulukot
Word 2013 Taulukot TAULUKOINTI TAULUKOINTI... 1 Taulukon tekeminen... 1 Solusta toiseen siirtyminen... 1 Solun tyhjentäminen... 2 Taulukon Layout (Asettelu) välilehti... 2 Alueiden valitseminen taulukossa...
LisätiedotGraafinen 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ätiedotGimp 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ätiedotSATAKUNNAN 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ätiedotTunnus. 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ätiedotNimi: 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ätiedotRakennusautomaation 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ätiedotOpinnä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ätiedotPÄ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ätiedotKä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ätiedotGraafinen ohjeistus Taidekaupunki-logo
Graafinen ohjeistus Taidekaupunki-logo Ohjeistuksessa määriteltyjä raja-arvoja ja värejä tulee noudattaa aina mahdollisuuksien mukaan ellei toisin sovita. SUOJA-ALUE Suoja-alue määräytyy merkissä olevan
LisätiedotValintanauhan 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ätiedotUsed 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ätiedotTä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ätiedotFOTONETTI BOOK CREATOR
F O T O N E T T I O Y FOTONETTI BOOK CREATOR 6 2012 Kemintie 6 95420 Tornio puhelin: 050-555 6500 pro/kirja: 050-555 6580 www.fotonetti.fi Ohjelman asentaminen 1 Hae ohjelma koneellesi osoitteesta http://www.fotonetti.fi/kuvakirjatilaa
LisätiedotGRAAFINEN 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ätiedotGRAAFINEN 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ätiedotGraafinen 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ätiedotSuomen 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