Skeuomorfi smi ja flat design Visuaaliset tyylit ja käytettävyys älypuhelimen käyttöliittymässä Jutta Joutjärvi Skeuomorfi smi ja flat design Visuaaliset tyylit ja käytettävyys älypuhelimen käyttöliittymässä Jutta Joutjärvi TAITEEN MAISTERIN OPINNÄYTE 2015 Aalto-yliopisto, PL 11000, 00076 AALTO www.aalto.fi Taiteen maisterin opinnäytteen tiivistelmä Tekijä Jutta Joutjärvi Työn nimi Skeuomorfismi ja flat design – visuaaliset tyylit ja käytettävyys älypuhelimen käyttöliittymässä Laitos Median laitos Koulutusohjelma Graafinen suunnittelu Vuosi 2015 Sivumäärä 103 + 19 Kieli Suomi Tiivistelmä Älypuhelinten käyttö on lisääntynyt huomattavasti 2010-luvulla, mikä on asettanut visuaaliselle suunnittelulle uusia haasteita. Tänä aikana myös visuaaliset tyylit ovat muuttuneet älypuhelinten käyttöliittymäelementeissä kuten painikkeissa, kuvakkeissa ja valikoissa. Ulkoasut ovat kehitty- neet skeuomorfisesta, fyysisen maailman objektien tarkasta jäljentämisestä, kohti flat design - tyylin kaksiulotteisia, litteitä ja minimalistisia käyttöliittymäelementtejä. Visuaalisten tyylien yleis- tymistä ohjaavat suurelta osin teknologian kehitys ja alan suuryritykset kuten Apple, Microsoft ja Google. Viime vuosina on keskusteltu runsaasti visuaalisten tyylien vaikutuksesta käytettävyyteen. Skeu- omorfismia on kritisoitu vanhanaikaisten esineiden ulkoasun imitoimisesta ja sen ristiriitaisesta vaikutuksesta käytettävyyteen. Flat design ja minimalistinen ulkoasu ovat puolestaan saaneet kri- tiikkiä tärkeiden käyttöliittymäelementtien ja toimintojen karsimisesta. Tyyliversioiden vaikutus käytettävyyteen on ajankohtainen, mutta verraten vähän tutkittu aihe. Tämä työ selvitti tyylien käytön etuja ja haittoja älypuhelimen käyttöliittymän käytettävyyttä ar- vioitaessa. Tyyliversioita tarkasteltiin helppokäyttöisyyden, ymmärrettävyyden ja houkuttelevuu- den näkökulmasta. Työssä perehdyttiin lisäksi aiempiin suunnitteluperiaatteisiin ja -filosofioihin, joista nykyiset trendit ovat saaneet vaikutteita. Tutkimusmenetelmäksi valitussa kyselyssä tarkasteltiin kolmen älypuhelimen sovelluksen ja nel- jän kotinäytön ymmärrettävyyttä, nykyaikaisuutta ja houkuttelevuutta. Kotinäytöistä esitettiin kuvakaappauksena neljä, ja kolmesta sovelluksesta kaikista kolme erilaista tyyliä. Vastaajia pyy- dettiin lisäksi valitsemaan tyyliversio, jota he käyttäisivät mieluiten. Tuloksissa havaittiin skeu- omorfisen ja minimalistisen ulkoasun ääripäiden heikentävän houkuttelevuutta sekä valituksi tu- lemista. Flat design -tyyli valittiin useimmiten mieluiten käytettäväksi ja lisäksi se oli vastaajien mielestä monesti nykyaikaisin sekä houkuttelevin vaihtoehto. Skeuomorfinen ulkoasu jakoi vas- taajien mielipiteitä eniten, mutta oli lähdeaineistoon verraten odotettua suositumpi. Työn tulokset osoittavat tyyliominaisuuksien yhdistelyn edistävän käytettävän ja houkuttelevan ulkoasun tasapainoa, jota tyyliversioiden ääripäät puolestaan viittasivat heikentävän. Visuaaliset tyylit ovat lopulta vain osa käyttöliittymäsuunnittelun muita työkaluja, jotka yhdessä muodostavat ulkoasun käytettävyyden ja esteettisyyden tasapainon. Avainsanat käytettävyys, esteettisyys, käyttöliittymäsuunnittelu, skeuomorfinen, flat design Aalto University, P.O. BOX 11000, 00076 AALTO www.aalto.fi Master of Arts thesis abstract Author Jutta Joutjärvi Title of thesis Skeuomorphism and flat design – Visual styles and usability in smartphone user interface Department Department of Media Degree programme Graphic Design Year 2015 Number of pages 103 + 19 Language Finnish Abstract The significant growth in smartphone usage in the 2010’s has posed new challenges to visual de- sign. During this time visual styles have also changed in smartphone user interface elements such as buttons, icons and menus. Styles have evolved from skeuomorphic, which depicts physical real life objects, towards two dimensional and minimalistic elements called flat design. Technology corporations such as Apple, Google and Microsoft mainly lead the popularisation of visual styles. In recent years skeuomorphism and flat design have raised discussion about their influence on usability. Skeuomorphism has been judged for replicating old-fashioned physical objects, which may compromise usability. Flat design and minimalism on the other hand have been under criti- cism for discarding essential user interface features. The influence of visual styles on usability is a topical subject but remotely studied. This thesis aimed to clarify the pros and cons of visual styles when evaluating usability in smart- phone user interfaces. Styles were examined from the viewpoint of ease of use, understandability and attractiveness. Thesis also explored earlier design trends and design philosophies, which have affected current styles. The survey-based research method scrutinised understandability, modernity and attractiveness of three smartphone application and four home screen views. Screenshots represented four differ- ent visual styles in the home screens and three in each of the apps. The participants also selected the most preferable style from each example. The results showed that flat design was generally seen as the most modern, attractive and preferable. On the contrary, the most extreme ends of both skeuomorphism and minimalistic styles were seen less attractive and preferable. Skeuomor- phic layouts divided opinions but turned out to be a bit more popular than recent discussion sug- gests. The findings of this thesis propose that a moderately applied visual style, rather than its extreme counterpart, enhances balance between usability and attractiveness of the layout. However visual styles only contribute to user interface design as part of other design tools that together form the balance between usability and aesthetics in user interface. Keywords usability, aesthetics, user interface design, skeuomorphism, flat design © 2015 Jutta Joutjärvi Aalto-yliopisto Taiteiden- ja suunnittelun korkeakoulu Median laitos Graaf nen suunnittelu Taiteen maisterin opinnäyte 30 op Ohjaaja: Harri Heikkilä Valvoja: Saku Heinänen Kiitos Harrille työn ohjauksesta. kaikille kyselyyn vastanneille. ystäville ja perheelle, erityisesti äidille ja Joonakselle. Sisällys 1. Johdanto 8 4. Kyselytutkimus 58 1.1 Työn lähtökohdat 9 4.1 Tutkimusmenetelmän valinta ja tavoitteet 59 1.2 Tutkimuksen tavoite 10 4.2 Kyselyn rakenne 60 1.3 Aiempi tutkimus 11 4.2.1 Kysymykset 61 1.4 Työn rakenne 13 4.2.2 Valitut sovellukset 62 1.5 Keskeiset käsitteet 13 4.2.3 Kyselyn testaus ja kohderyhmä 63 2. Suuntaukset 5. Kyselyn tulokset 64 tyylien taustalla 16 5.1. Vastaajien demografi a 65 2.1 Bauhaus 18 5.2 Sovellusten ja kotinäyttöjen tulokset 68 2.2 Minimalismi 19 5.2.1 Kotinäyttö 68 2.2.1 Dieter Rams 19 5.2.2 Kompassi 72 2.2.2 Sveitsiläinen tyyli 21 5.2.3 Sää 76 2.3 Esteettisyys ihmisen ja tietokoneen 5.2.4 Kirjahylly 80 välisessä vuorovaikutuksessa 23 5.3 Yhteenveto tyyliversioiden tuloksista 84 5.3.1 Skeuomorfi nen 84 3. Skeuomorfi sesta 5.3.2 Flat design 85 fl at design -tyyliin 26 5.4 Haasteet tulosten tulkinnassa 88 3.1 Skeuomorfi nen suunnittelu 27 5.4.1 Jatkotutkimuksen kohteet 89 3.1.1 Apple 30 3.1.2 IxD Bauhaus 38 6. Johtopäätökset 90 3.2 Minimalismi web-suunnittelussa 39 3.3 Flat design 41 Lähteet 94 3.3.1 Windows 8 45 3.3.2 Flat design -variaatiot 47 Liitteet 104 3.3.3 Material design 49 3.3.4 Vaikutteiden ristiriitaisuus 52 3.4 Tyylien kehitys ja tulevaisuus 54 Johdanto 1. Johdanto 1.1 Työn lähtökohdat Viimeisen seitsemän vuoden aikana mobiilialustojen, kuten äly- puhelinten ja taulutietokoneiden käyttö on kasvanut huomatta- vasti, mikä on asettanut visuaaliselle suunnittelulle uudenlaisia haasteita. Tänä aikana myös visuaaliset tyylit ovat muuttuneet älypuhelinten graaf sissa käyttöjärjestelmissä ja niiden käyttöliit- tymäelementeissä, kuten painikkeissa, kuvakkeissa ja valikoissa. Ulkoasut ovat muuttuneet skeuomorf sesta, fyysisten objektien tarkasta jäljentämisestä, kohti f at design -tyylin kaksiulotteisia ja litteitä käyttöliittymäelementtejä. Visuaalisten tyylien muutoksia ohjaavat suurelta osin tekno- logian kehitys sekä teknologia-alan suuryritykset, kuten Apple, Microsof ja Google. Ohjelmistoalan yritykset vaikuttavat osal- taan visuaalisten tyylien leviämiseen julkaisemillaan tyyliop- pailla, joissa määritellään käyttöliittymän toimintaa visuaalisesta, toiminnallisesta ja teknisestä näkökulmasta (Nieminen 2008). Esittelin opinnäytteen aiheen syksyllä 2015 Maisterin tutkin- non opinnäyteseminaari -kurssilla, jossa tiedustelin noin viidel- tätoista graaf sen suunnittelun opiskelijalta tiesivätkö he mitä skeuomorf sella suunnittelulla tarkoitettiin. Mukana oli myös muutamia ensimmäisen vuosikurssin opiskelijoita. Käsite oli yllättävän tuntematon, sillä vain alle puolet opiskelijoista vaikutti tietävän mitä termillä tarkoitettiin. Trendien suhde mobiilipäätelaitteiden käytettävyyteen on ajankohtainen, mutta niukasti tutkittu aihe, josta suunnitteli- joilla vaikuttaa oman havaintoni lisäksi olevan myös tutkimus- ten mukaan (Page 2014) suppea käsitys. Viime vuosina on käyty runsaasti keskustelua trendien hyödyistä ja haitoista, erityisesti käytettävyyttä arvioitaessa. Näistä syistä kiinnostuin selvittämään tyylien ominaisuuksia, roolia ja vaikutusta käytettävyyteen älypu- helimen käyttöliittymässä. 8 9 Johdanto Olen pitkään ollut kiinnostunut digitaalisesta suunnittelusta 1.3 Aiempi tutkimus sekä erityisesti visuaalisuuden merkityksestä ja vaikutuksesta käytettävyyteen. Olen graaf sen suunnittelijan ammatissa ja digi- Visuaalisten tyylien roolia älypuhelinten käyttöliittymissä on taalisten