IHTE-2100 Käyttöliittymäsuunnittelun perusteet

IHTE-2100 Käyttöliittymäsuunnittelun perusteet Lukuvuosi 2007-2008 Luentomoniste v. 1.1 osa a / Melakoski-Vistbacka SISÄLLYSLUETTELO 1. ALUKSI...2 2. STANDARDIT KÄYTTÖLIITTYMÄSUUNNITTELUSSA...3 2.1 VISUAALINEN AAKKOSTO JA TYYLIOPPAAT...5 2.2 LÄHTEET:...6 3. KÄYTTÖLIITTYMÄN VISUAALINEN SUUNNITTELU...7 3.1 VISUAALISET SUUNNITTELUPERIAATTEET...7 3.1.1 Yksinkertaisuus...7 3.1.2 Selkeys...7 3.1.3 Johdonmukaisuus...8 3.1.4 Miellyttävä ulkonäkö...9 3.2 SOMMITTELU: NÄYTÖN TASAPAINO...10 3.3 KOLMIULOTTEISUUS KÄYTTÖLIITTYMÄSSÄ...13 3.4 NÄKÖHARHAT KÄYTTÖLIITTYMÄSSÄ...14 3.5 SOMMITTELU: TYPOGRAFIA...15 3.6 VÄRIT KÄYTTÖLIITTYMÄSSÄ...16 3.6.1 Värisokeat käyttäjät...17 3.6.2 Marcusin kymmenen käskyä... 18 3.7 MUITA SUUNNITTELUOHJEITA...20 3.8 GRAAFISEN SUUNNITTELUN TARKASTUSLISTA...21 3.9 LÄHTEET...21 3.10 KUVAKKEET (IKONIT)...22 3.11 LÄHTEET...24 4. GRAAFISEN KÄYTTÖLIITTYMÄN ELEMENTTEJÄ...25 Lukuvuosi 2007-2008 1 IHTE / Melakoski-Vistbacka

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- 7010 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 kasuper@cs.tut.fi. 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 kasuper@cs.tut.fi http://www.cs.tut.fi/~kasuper/ Lukuvuosi 2007-2008 2 IHTE / Melakoski-Vistbacka

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 2007-2008 3 IHTE / Melakoski-Vistbacka

Taulukko 1. Joitakin käytettävyyteen liittyviä standardeja. Standardi Nimi Ryhmä ISO/IEC 9126-1 Software Engineering - Product quality - Part 1: 1 Quality model ISO 20282 Usability of everyday products 1 ISO/IEC TR 9126-4 Software Engineering - Product quality Part 4: 1 Quality in use metrics ISO 9241-11 Guidance on Usability 1 ISO/IEC 18019 Guidelines for the design and preparation of 2 software user documentation ISO/IEC 15910 Software user documentation process 2 ISO 13407 Human-centred design processes for interactive 2 systems ISO/IEC 14598 Information Technology - Evaluation of Software 2 Products ISO TR 16982 Usability methods supporting human centered 2 design ISO/IEC TR 9126-2 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 9126-3 Software Engineering - Product quality Part 3 3 Internal metrics ISO/IEC 10741-1 Dialogue interaction - Cursor control for text editing 3 ISO 9241 Ergonomic requirements for office work with visual 3 display terminals. Parts 10-17 ISO/IEC 11581 Icon symbols and functions 3 ISO 11064 Ergonomic design of control centres 3 ISO 13406 Ergonomic requirements for work with visual 3 displays based on flat panels ISO 14915 Software ergonomics for multimedia user interfaces 3 ISO/IEC 14754 Pen-based interfaces - Common Gestures for text 3 editing with pen-based systems IEC TR 61997 Guidelines for the user interfaces in multimedia 3 equipment for general purpose use ISO/IEC 18021 Information Technology - User interface for mobile 3 tools ISO 18789 Ergonomic requirements and measurement 3 techniques for electronic visual displays ISO TR 18529 Ergonomics of human-system interaction - Humancentred 4 lifecycle process descriptions ISO 9241-1 Part 1: General Introduction 4 ISO 9241-2 Part 2:Guidance on task requirements 4 ISO 10075-1 Ergonomic principles related to mental workload - 4 General terms and definitions ISO DTS 16071 Guidance on accessibility for human-computer interfaces 4 Lukuvuosi 2007-2008 4 IHTE / Melakoski-Vistbacka

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 9241-11: 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: http://msdn.microsoft.com/library/default.asp 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 2007-2008 5 IHTE / Melakoski-Vistbacka

2.2 Lähteet: Nielsen, J. Usability engineering. Academic Press, 1993 SFS-käsikirja 1. Standardien tarkoitus ja käyttö. Suomen standardisoimisliitto. 2002. Usability Net. International standards for HCI and usability. http://www.usabilitynet.org/tools/r_international.htm Lukuvuosi 2007-2008 6 IHTE / Melakoski-Vistbacka

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. 3.1.1 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. 3.1.2 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 2007-2008 7 IHTE / Melakoski-Vistbacka

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. 3.1.3 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 2007-2008 8 IHTE / Melakoski-Vistbacka

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 3.1.4 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 2007-2008 9 IHTE / Melakoski-Vistbacka

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 2007-2008 10 IHTE / Melakoski-Vistbacka

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 2007-2008 11 IHTE / Melakoski-Vistbacka

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

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 2007-2008 13 IHTE / Melakoski-Vistbacka

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 2007-2008 14 IHTE / Melakoski-Vistbacka

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 2007-2008 15 IHTE / Melakoski-Vistbacka

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 2007-2008 16 IHTE / Melakoski-Vistbacka

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. 3.6.1 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 2007-2008 17 IHTE / Melakoski-Vistbacka

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 2007-2008 18 IHTE / Melakoski-Vistbacka

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 2007-2008 19 IHTE / Melakoski-Vistbacka

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 2007-2008 20 IHTE / Melakoski-Vistbacka