Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 2009. Aiheina Visuaalisen suunnittelun perusteita Visuaalisen suunnittelun periaatteet (Dix et al.) CRAP-suunnittelumalli Luento pohjautuu Dix et al. Ch.5 oheismateriaali http://www.hcibook.com CRAP-suunnitteluohjeisto Robin Williams, The non-designer s design book. Peachpit Press, 1994. lomakesuunnittelun lähdemateriaalia http://www.lukew.com/resources/articles/web_forms.html http://www.uxmatters.com/mt/archives/000107.php Saila.Ovaska@uta.fi 1
Miksi visuaalista suunnittelua? Käyttöliittymän visuaalinen suunnittelu on hyvin näkyvää käyttäjälle Hyvä graafinen suunnittelu tukee käytettävyyttä (opittavuus, tehokkuus, ) Käyttöliittymäsuunnittelijan on ymmärrettävä visuaalisen suunnittelun perusteita As software gets closer to commodity status, users can be expected to make very rapid choices between the huge number of offerings available on the net [ ], they will immediately discard any interface that looks boring, obsolete, or too confusing. - Nielsen in Mullet & Sano, 1995 Näytön suunnittelun lähtökohdat Kysy Mitä käyttäjä on tekemässä? Ajattele Mitä tietoa käyttäjä tarvitsee, mitä valintoja ja vertailuja hänen on pystyttävä tekemään, missä järjestyksessä? Suunnittele Form follows function. (tässä) vapaasti suomennettuna: valitse asettelu palvelemaan käyttäjän tarvitsemaa vuorovaikutteisuutta Lähde: Dix et al. Saila.Ovaska@uta.fi 2
CRAP-suunnittelumalli CRAP: Contrast, Repetition, Alignment, and Proximity kontrasti kiinnittää huomion toisto - jokin suunnittelun yksityiskohta toistuu luoden rakennetta ja jäsennystä tasaus vaikuttaa hahmottamiseen, tekstin luettavuuteen ja vaikutelmaan läheisyys - yhteenkuuluvat kohteet sijoitetaan lähekkäin ja ei-yhteenkuuluvien väliin jätetään tilaa Robin Williams, The non-designer s design book. Peachpit Press, 1994. Visuaalisen suunnittelun periaatteita Ryhmittely erottuviin ryhmiin Kohteiden järjestys tukemaan käyttäjän tehtävää Tehosteet ja koristelut (kirjasintyylit, värit, ) Kohteiden tasaus Tyhjä tila kohteiden välillä Vrt. CRAP Lähde: Dix et al. Saila.Ovaska@uta.fi 3
Ryhmittely / läheisyys Toistensa lähellä olevat asiat muodostavat yhden visuaalisen yksikön Läheisyys (tai sen puute) kertoo asioiden välillä olevan suhteen Ryhmittele samankaltaiset elementit yhdeksi yksiköksi jotta... Sivusta tulee organisoidumman ja siistimmän näköinen Käyttäjä ymmärtää, mistä viesti alkaa ja mihin se loppuu Tyhjä tila kirjainten ympärillä erottuu paremmin, mikä helpottaa lukemista Ryhmittely / läheisyys Loogisesti yhteenkuuluvat asiat sijoitetaan fyysisesti lähekkäin. Google Chrome asetukset Saila.Ovaska@uta.fi 4
CRAP: läheisyys Läheisyys tai sen puute kertovat elementtien välisestä suhteesta. Läheisyys ei tarkoita, että kaiken pitäisi olla lähellä kaikkea muuta; ajatuksellisesti yhdistetyt elementit pitäisi yhdistää myös visuaalisesti ja muut elementit eivät saisi olla lähellä tällaista ryhmää. CRAP: läheisyys (ja kontrasti) Lista tarvitsee muokkaamista ollakseen ymmärrettävä. Suurin ongelma on ryhmittelyn puute (kaikki on lähellä kaikkea). Sama lista sommiteltuna visuaalisiin ryhmiin Saila.Ovaska@uta.fi 5
Ryhmien ja kohteiden järjestys Mieti mikä on toimintojen luonnollinen järjestys Järjestyksen tulisi näkyä näytöllä! Käytä kehyksiä ja tyhjää tilaa ryhmien välillä Tasaa teksti ja käytä sarkaimia www.etuovi.com Lähde: Dix et al. Tehosteet ja koristelut Yhteenkuuluvuuden viestiminen Käytä kehyksiä loogisten ryhmien luomiseksi Yhteen kuuluvia elementtejä voi koodata myös samalla värillä Korostus Käytä kirjasintyylejä korostukseen ja otsikoihin Varo liioittelua! Lähde: Dix et al. Saila.Ovaska@uta.fi 6
Tekstin tasaus Tekstiä luetaan länsimaissa vasemmalta oikealle tasaus vasemmalle on luettavin Joskus vaikutelma on kuitenkin hieman tylsä Muunlaisilla tasauksilla voidaan luoda erilaisia vaikutelmia, mutta luettavuus kärsii Lähde: Dix et al. Tekstin tasaus Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Saila.Ovaska@uta.fi 7
Tekstin tasaus ja symmetria Lorem ipsum dolor sit amet Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Lorem ipsum Quisque ligula eros ullamcorper quis lacinia quis. Tekstin tasaus ja symmetria Käyttöliittymäsuunnittelussa symmetrian pohjana vertikaalinen ja horisontaalinen akseli Ihminen hahmottaa vahvemmin vertikaalisen symmetrian ja se on hyödyllisempi visuaalisissa näytöissä www.gmail.com Saila.Ovaska@uta.fi 8
CRAP: tasaus ja läheisyys Kortin asioilla ei ole yhteyttä toisiinsa. Kortin asioita ei ole jäsennetty. Tasaus oikeaan reunaan ja toisiinsa liittyvien asioiden sommittelu. Tasaus Elementit ryhmitelty ja tasattu keskelle. Sama ryhmittely, mutta tasattuna oikealle. Näkymätön linja on vahvempi. Saila.Ovaska@uta.fi 9
Monta saraketta Rivillä pysyminen on hankalaa, kun silmät kulkevat yli tyhjän valkoisen tilan: sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 Tyhjää valkoista tilaa voi listaukseen tulla esim. tuotettaessa tieto tietokannasta, jossa tilaa on varattu pisimmän tietoalkion mukaan. Lähde: Dix et al. Monta saraketta Käytä jotain katsetta johdattavaa linjaa, esim. pisteitä tai viivaa sherbert 75 toffee 120 chocolate.. 35 fruit gums..... 27 coconut dreams.... 85 Saila.Ovaska@uta.fi 10
Monta saraketta tai taustaväriä sherbert toffee chocolate fruit gums coconut dreams 75 120 35 27 85 Monta saraketta tai jopa (varoen!) tasausta oikeaan reunaan sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 Saila.Ovaska@uta.fi 11
CRAP: toisto Elementtien toistuvuus yhdenmukaistaa ja vahvistaa designia Toisto yhdistää asiat, jotka muuten jäisivät erillisiksi Toisto sivuston eri sivujen välillä luo sivustosta yhtenäisen kokonaisuuden Johdonmukaisuus! CRAP: toisto Otsikot ja alaotsikot ovat hyvä tapa aloittaa toisto. Valitse johdonmukainen tapa kaikille otsikoille ja muuta esim. fonttikokoa alaotsikoissa. Saila.Ovaska@uta.fi 12
CRAP: toisto Toista suunnitteluelementtejä varsinkin monisivuisissa julkaisuissa. CRAP: toisto Toiston avulla kortista saadaan tehokkaampi. Saman tyylin toistaminen otsikossa ja puhelinnumerossa ohjaa lukijan huomion näihin kahteen tärkeimpään elementtiin. Lähde: http://coe.sdsu.edu/eet/articles/designprin2/start.htm Saila.Ovaska@uta.fi 13
CRAP: kontrasti Kontrasti on hyvä tapa lisätä visuaalista mielenkiintoa. Lisäksi kontrasti ohjaa lukijan huomiota ja luo rakennetta. Kontrastia voi siis käyttää fokuksen luomiseen. Lähde: http://coe.sdsu.edu/eet/articles/designprin2/start.htm Tyhjä tila WHAT YOU SEE THE GAPS BETWEEN Saila.Ovaska@uta.fi 14
Tyhjä tila erottimena Lähde: Dix et al. Tyhjätilajäsentäjänä Saila.Ovaska@uta.fi 15
Tyhjätilakorostuksessa Sivun rakenne Ristikkopohjainen suunnittelumalli (grid-based design) Ristikkopohjaisuus luo sivulle visuaalisen rytmin ja rakenteen Käyttäjän on helpompaa ja nopeampaa hahmottaa sivun rakenne Silmää miellyttävät suhteet tärkeitä! www.markboulton.co.uk http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-preface Saila.Ovaska@uta.fi 16
Ristikkoperustainen suunnittelumalli Muita esimerkkejä: http://designinformer.com/2010/grid-based-web-design-simplified/ Esimerkki: canonical grid Jako palstoihin näytöllä sarakejakomalli sarakeväli Lähde: Mullet & Sano, Designing visual interfaces, 1995. Saila.Ovaska@uta.fi 17
Otsikot ja 2 palstaa Lähde: Mullet & Sano, Designing visual interfaces, 1995. Otsikot ja 3 palstaa Lähde: Mullet & Sano, Designing visual interfaces, 1995. Saila.Ovaska@uta.fi 18
6-palstainen layout Lähde: Mullet & Sano, Designing visual interfaces, 1995. Nimiökenttien sijoittelu järjestelmien tyyliohjeissa Kumpikin asettelutapa on mahdollinen Eri järjestelmien tyyliohjeissa on kuitenkin eroja! Vanha OpenLook-tyyliohje Lähde: Mullet & Sano, Designing visual interfaces, 1995. Saila.Ovaska@uta.fi 19
Nimiökenttien sijoittelu järjestelmien tyyliohjeissa Macintosh OSXHI Guidelines Eri järjestelmien tyyliohjeissa on kuitenkin eroja! Windows UX guide Pohdintaa: nimiökenttien sijoittelu verkkolomakkeella? Lähteenä: http://www.lukew.com/resources/articles/web_forms.html Saila.Ovaska@uta.fi 20
Katseenseurannan avulla tutkittu Luettavuustutkimus: katsepolut eri asetteluilla Paras sijoituspaikka kentän yläpuolella Visuaalisesti erillään edellisestä kentästä Kentännimeä ei kannata tummentaa Valintalistat vievät huomiota http://www.uxmatters.com/mt/archives/000107.php Yhteenveto: visuaalisen asettelun ohjeita Älä ahda ikkunaa (näyttöä, paneelia) liian täyteen Jaa sisältö loogisiin osiin, ja käytä ristikkomallia palstoihin jaossa Tutustu tyylioppaisiin ja pyri yhtenäisyyteen Käytä tyhjää tilaa erottimena Varo sisäkkäisten ryhmien raamitusta Miellyttävät suhteet ovat tärkeämpiä kuin pinta alan minimointi Varo liioittelua! Saila.Ovaska@uta.fi 21