Aiheina Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto 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 Miksi visuaalista suunnittelua? Näytön suunnittelun lähtökohdat 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 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 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 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 Robin Williams, The non-designer s design book. Peachpit Press, 1994. Saila.Ovaska@uta.fi 1
Ryhmittely / läheisyys 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 Loogisesti yhteenkuuluvat asiat sijoitetaan fyysisesti lähekkäin. Google Chrome asetukset CRAP: läheisyys CRAP: läheisyys (ja kontrasti) Lista tarvitsee muokkaamista ollakseen ymmärrettävä. Suurin ongelma on ryhmittelyn puute (kaikki on lähellä kaikkea). 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ää. Sama lista sommiteltuna visuaalisiin ryhmiin Ryhmien ja kohteiden järjestys Tehosteet ja koristelut 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 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! Saila.Ovaska@uta.fi 2
Tekstin tasaus 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 sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Tekstin tasaus ja symmetria Tekstin tasaus ja symmetria Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Lorem ipsum Quisque ligula eros ullamcorper quis lacinia quis. 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 Tasapainoinen layout CRAP: tasaus ja läheisyys Käyttöliittymissä on yleensä vältettävä tekstin tasausta keskelle. Tasapainoinen layout saadaan muutenkin! Kortin asioilla ei ole yhteyttä toisiinsa. Kortin asioita ei ole jäsennetty. Macintosh OSXHI Guidelines Tasaus oikeaan reunaan ja toisiinsa liittyvien asioiden sommittelu. Saila.Ovaska@uta.fi 3
Tasaus Elementit ryhmitelty ja tasattu keskelle. Sama ryhmittely, mutta tasattuna oikealle. Näkymätön linja on vahvempi. 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. Käytä jotain katsetta johdattavaa linjaa, esim. pisteitä tai viivaa sherbert 75 toffee 120 chocolate.. 35 fruit gums..... 27 coconut dreams.... 85 tai taustaväriä sherbert toffee chocolate fruit gums coconut dreams 75 120 35 27 85 CRAP: toisto tai jopa (varoen!) tasausta oikeaan reunaan sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 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! Saila.Ovaska@uta.fi 4
CRAP: toisto CRAP: toisto Otsikot ja alaotsikot ovat hyvä tapa aloittaa toisto. Valitse johdonmukainen tapa kaikille otsikoille ja muuta esim. fonttikokoa alaotsikoissa. Toista suunnitteluelementtejä varsinkin monisivuisissa julkaisuissa. CRAP: kontrasti Tyhjä tila WHAT YOU SEE THE GAPS BETWEEN 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 erottimena Tyhjätilajäsentäjänä Saila.Ovaska@uta.fi 5
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 Ristikkoperustainen suunnittelumalli Esimerkki: canonical grid Jako palstoihin näytöllä Muita esimerkkejä: http://designinformer.com/2010/grid-based-web-design-simplified/ sarakejakomalli sarakeväli Otsikot ja 2 palstaa Otsikot ja 3 palstaa Saila.Ovaska@uta.fi 6
6-palstainen layout Nimiökenttien sijoittelu järjestelmien tyyliohjeissa Kumpikin asettelutapa on mahdollinen Eri järjestelmien tyyliohjeissa on kuitenkin eroja! Vanha OpenLook-tyyliohje Nimiökenttien sijoittelu järjestelmien tyyliohjeissa Pohdintaa: nimiökenttien sijoittelu verkkolomakkeella? Macintosh OSXHI Guidelines Eri järjestelmien tyyliohjeissa on kuitenkin eroja! Windows UX guide Lähteenä: http://www.lukew.com/resources/articles/web_forms.html 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! 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! http://www.uxmatters.com/mt/archives/000107.php Saila.Ovaska@uta.fi 7