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) Multimodaalisuus. Visuaaliset suunnitteluperiaatteet Luento 3 (vko 50) Visuaaliset suunnitteluperiaatteet. Värit käyttöliittymissä Luento 4 (vko 50) Mobiilikäyttöliittymät / Timo Partala. Kuvakkeet. Luento 5 (vko 51) Harjoitustyön ohjeistus. Keskustelu- / vuorovaikutustavat Luento 6 (vko 51) Käyttöliittymäelementtejä. WWW-käyttöliittymät Luento 7 (vko 2) Kosketuskäyttöliittymät / Juha Lehikoinen? Luento 8 (vko 3) Internationalisointi / Jere Käpyaho Luento 9 (vko 4) Tehtäväanalyysi. Standardit. Kertaus. 1 2 Tämän päivän aiheet Multimodaalisuus Visuaaliset suunnitteluperiaatteet Käyttöliittymätyyppejä 80-luku - Command - WIMP / GUI 90-luku - Advanced graphical - Web - Speech (voice) - Pen, gesture and touch - Appliance (esim. kodinkoneet) 3 4
2000-luku Mobile Multimodal Shareable Tangible (käsin kosketeltava) Augmented and mixed reality Wearable Robotic Käyttöliittymätyyppien ryhmittelystä Teknologia - Wearable, pen, appliance, robotic Vuorovaikutustapa - Command, GUI Käyttäjien määrä - Shareable, Web Modaliteetit - Speech, touch, gesture 5 6 Tämän päivän aiheet Multimodaalisuus Visuaaliset suunnitteluperiaatteet 7 Modaliteetit Modaliteetilla tarkoitetaan ihmisen aistin tuottamaa syötekokemusta Modaliteetit: - Haptinen/Taktiilinen - Visuaalinen - Auditiiviset - Vestibulaarinen - Gustatoorinen - Olfaktorinen 8
Modaliteetit: Haptinen / Taktiilinen / Kehon liikeaisti Haptinen: tuntoaistiin perustuva Taktiilinen: kosketukseen perustuva Modaliteetit: Visuaalinen Visuaalinen: näköaistiin perustuva 9 10 Modaliteetit: Visuaalinen Demo, katseohjaus http://www.youris.com/health/click_where_you_look.kl BLISS-symbolit Modaliteetit: Auditiivinen Auditiivinen: kuuloaistiin perustuva Isoisä Sairaala Hissi 11 12
Modaliteetit: Auditiivinen Demo, Puheentunnistus (Vista) http://www.youtube.com/watch?v=2y_jp6pxssq Modaliteetit: Vestibulaarinen Tasapainoaistiin perustuva - Wii fit 13 14 Modaliteetit: Olfaktorinen Hajuaistiin perustuva Siemens kehittää ensimmäistä matkapuhelinta, joka varoittaa käyttäjäänsä pahanhajuisesta hengityksestä tai muista hajuista. Puhelimeen upotetaan alle halkaisijaltaan alle millimetrin kokoinen ilmaa nuuskiva siru. IT-viikko 9/2004 Smell-o-phone - Hajuviestit Modaliteetit: Gustatoorinen Makuaistiin perustuva Ei käytetä juuri lainkaan Virtuaaliympäristöt? 15 16
Multimodaalisuus: Yhdistetään useampia modaliteetteja - Vrt. ihmisten kommunikointi kasvotusten - Tulkinta vahvistuu Multimodaalisuuden avulla pyritään - lisäämään luonnollisuutta ja käytettävyyttä - ehkäisemään virheitä ja avustamaan niiden korjaamisessa - nopeuttamaan kommunikointia - parantamaan järjestelmän luotettavuutta 17 Tämän päivän aiheet Multimodaalisuus Visuaaliset suunnitteluperiaatteet 18 Visuaaliset suunnitteluperiaatteet (Mullet & Sano) Yksinkertaisuus Selkeys Johdonmukaisuus Miellyttävä ulkonäkö Yksinkertaisuus In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away. Antoine de Saint Exupery, The Little Prince 19 20
Visuaalinen yksinkertaisuus Etuja - ymmärrettävyys (approachability) - tunnistettavuus (recognizability) - välittömyys (immediacy) - käytettävyys (usability) Visuaaliset suunnitteluperiaatteet Yksinkertaisuus Selkeys Johdonmukaisuus Miellyttävä ulkonäkö 21 22 Visuaalinen selkeys Hahmolait: läheisyys Tavoitteita - tiedon loogisen organisoinnin esittäminen visuaalisesti Keinoja esim. ns. hahmolait - läheisyys (proximity) - samanlaisuus (similarity) - sulkeutuvuus (closure) - jatkuvuus (continuity) 23 24
Hahmolait: läheisyys Hahmolait: läheisyys 25 26 Hahmolait: samanlaisuus Hahmolait: samanlaisuus http://www.nelonen.fi/ 27 28
Hahmolait: samanlaisuus Hahmolait: sulkeutuvuus 29 30 Hahmolait: sulkeutuvuus Hahmolait: jatkuvuus [www.sinikanpuoti.com} +? + 31 32
Hahmolait: jatkuvuus Hahmolait: jatkuvuus 33 34 Hahmolait: Muita hahmolakeja Valiomuotoisuus Hahmolait: Muita hahmolakeja Kohde ja alusta Yhteinen liike Yhteen liittyminen 35 36
Hamolait: Alue Visuaaliset suunnitteluperiaatteet Yksinkertaisuus Selkeys Johdonmukaisuus Miellyttävä ulkonäkö 37 38 Johdonmukaisuus Johdonmukaisuus (consistency) eli yhtenäisyys on keskeinen ohjelman ominaisuus Johdonmukaisuutta voi noudattaa eri tasoilla - ulkoinen johdonmukaisuus muiden ohjelmien kanssa ympäröivän maailman kanssa eri laitemerkkien kanssa - sisäinen johdonmukaisuus 39 Johdonmukaisuus Sisäiseen johdonmukaisuuteen vaikuttaa mm: - Komponenttien sijainti ja käyttötapa - Värien käyttö (sama värikoodaus läpi ohjelman) - Vihjeiden käyttö (fontin tyyli: kursiivi, lihavointi ) - Terminologia (onhan yhtenäinen läpi koko ohjelman) - Samantyyppinen toimintatapa samantyyppisissä tilanteissa. - Geneeriset komennot (kopioi, liitä ) Yrityksen sisäiset tyylioppaat hyvä tapa valvoa johdonmukaisuutta. 40
Johdonmukaisuus Visuaaliset suunnitteluperiaatteet Yksinkertaisuus Selkeys Johdonmukaisuus Miellyttävä ulkonäkö 41 42 Miellyttävä ulkonäkö Miellyttävä ulkonäkö Ä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 Jaa ikkuna palstoihin (kanonisuus) 43 [The Daily WTF / Jake Winson] 44
Miellyttävä ulkonäkö Opittua Käyttöliittymätyyppejä Multimodaalisuus - Modaliteetit Visuaaliset suunnitteluperiaatteet - Yksinkertaisuus - Selkeys Hahmolait - Johdonmukaisuus Ulkoinen ja sisäinen johdonmukaisuus - Miellyttävä ulkonäkö 45 46