Synninpäästö nahalle – skeuoformismin kolme tasoa

Olli Sulopuisto huhuili taannoin Twitterissä kommenttia skeuomorfismiin – reaalimaailmaa jäljittelevään design-tyyliin. Kehitin mielipiteen siltä varalta, että minulta kysyttäisiin. Aiheesta syntyi mainio juttu ilman lausuntoanikin, mutta tulin samalla ajatelleeksi asiaa tarkemmin. Näyttäisi, että siihen liittyy kolme tasoa, joista kahta on syytä välttää.  Kolmas on makuasia.

Skeuomorfismi on ollut kuuma puheenaihen muutaman vuoden verran. Ensin Apple alkoi tehdä sitä liikaa, sitten Microsoft alkoi suurieleisesti olla tekemättä sitä – ja lopulta iOS-johtaja Scott Forstallin potkujenkin arveltiin jotenkin liittyvän aiheeseen. Viime viikkoina syksyllä kuumana käynyt keskustelu on virinnyt jälleen.

Applen Podcast-sovelluksee on toteutettu puhtaaksi koristeeksi animoitu kelanauhuri. Nauhuri muun muassa pyörii nopeammin, kun äänitettä pikakelataan.

Applen Podcast-sovellukseen on toteutettu puhtaaksi koristeeksi animoitu kelanauhuri. Nauhuri muun muassa pyörii nopeammin, kun äänitettä pikakelataan.

Mission park auttaa löytämään pysäköidyn auton. Kellosta on tehty vanhanaikaisen nopeusmittarin näköinen.

Mission: park! auttaa löytämään pysäköidyn auton. Kellosta on tehty vanhanaikaisen nopeusmittarin näköinen.

Määritelmän mukaan skeuomorfismiksi kutsutaan tilannetta, jossa alkuperäisessä toteutuksessa tarpeellinen piirre tai ominaisuus pidetään koristeena mukana uudessa toteutuksessa, vaikkei sille olisi enää tarvetta. Koska digitaalisissa käyttöliittymissä todellisen maailman asioille on harvoin tarvetta, ne ovat ilmiölle otollinen temmellyskenttä. Applen sovellusten nahkatekstuurit ja tikkaukset ovat usein mainittu esimerkki: fyysinen kalenteri ei pysynyt koossa ilman tikkausta, mutta digitaalisella näytöllä tikkauksen ainoa tehtävä on kriitikon mukaan viedä näyttötilaa ja varastaa käyttäjän huomio tärkeämmiltä asioilta.

Tässä vaiheessa on hyvä unohtaa hankala termi ja siirtyä puhumaan suomea. Sulopuiston jutussa esitelty siirtomuotoisuus kuulostaa minusta oikein käyttökelpoiselta sanalta, joten käytän sitä jatkossa.

Puolesta: tutut käsitteen auttavat ymmärtämään

Vanhaan hyvään aikaan tietokoneita ohjattiin yksinomaan komentoriviltä. Se, jos jokin on Microsoftia lainatakseni ”autenttisen digitaalinen” käyttöliittymäparadigma vailla turhia vaikutteita reaalimaailmasta. Voisi väittää, että työpöytäkäyttöliittymä kansioineen, tiedostoineen ja roskakoreineen oli alkua siirtomuotoisuuden tiellä. Miksi suotta pakottaa käyttäjät raahaamaan tiedostoja roskakoriin reaalimaailmaa matkien, kun he voisivat paljon nopeammin syöttää poistamiskomennon terminaaliin.

Työpöytämetafora toimii esimerkkinä hyödyllisestä siirtomuotoisuudesta. Kun muualta tuttuja konsepteja sovelletaan uudessa ympäristössä taitavasti, ihmisten on helpompi ymmärtää, mistä on kyse. Työpöydässä oli riittävästi tuttuja asioita, että se oli helppo oppia ja ymmärtää, mutta se oli samalla kyllin abstrakti, jotta se ei suotta kahlinnut itseään reaalimaailman rajoituksiin.

Vuosien myötä tiedostojakaan ei ollut enää pakko raahata roskakoriin. Ne pystyi halutessaan tuhoamaan myös näppäinkomennolla. Reaalimaailmaa seuraavana logiikkana Applen tiedostojenselaus perustui pitkään spatiaaliseen malliin, jossa yksi kansio saattoi olla auki vain yhdessä ikkunassa. Mac OS X:n myötä tästä viimein luovuttiin.

Ymmärtämisen helppous on yhä Applen virallinen perustelu suositukselle siirtomuotoisuuden suosimisesta.

When appropriate, add a realistic, physical dimension to your app. Sometimes, the more true to life your app looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it. For example, people instantly know how to use the realistic address book that Contacts on iPad portrays.

iOS Human Interface Guidelines

Puolesta: kauniit asiat hivelevät sielua

Toinen perustelu visuaalisten efektien puolesta liittyy psykologiaan. Normanin klassikkoteos Emotional design opetti, että kauniit asiat tuntuvat rumia helpommilta käyttää. Käyttäjän kokemus tuotteesta sisältää eri tasoja, ja niistä alin elimellinen (visceral) taso on paljolti hallitsemattomissa. Ainakin Apple uskoo, että kauniit kuvat hivelevät tätä tasoa ja saavat ihmiset nauttimaan käytöstä enemmän kuin tylsemmällä visuaalisella toteutuksella.

Kuten Jobs sanoi aikoinaan Mac OS X:n Aqua-tyylisuunnasta: ”One of the design goals was when you saw it you wanted to lick it”.

Tämä ei tarkoita, että sovellus ei voisi olla kaunis ilman kuorrutuksia. Minä pidän myös Windows 8:n pelkistetystä tyylistä. Olen samaa mieltä Sulopuiston jutussa siteeratun Sami Niemelän kanssa, että Modern UI:lle suunniteltaessa on helppoa erehtyä, sillä kiiltojen ja koristeiden puuttuessa puutteellista taittoa ei voi piilottaa tauhkan alle.

Sisällöltään rikkaat Windows 8 -sovellukset on helppo saada näyttämään kauniilta, mutta jos sisältö on luonteeltaan tylsempää, sovelluksesta on vaikeampaa tehdä houkuttelevan ja persoonallisen näköistä. Koska ihmiset ovat valmiita maksamaan oikeaa rahaa siitä, että saavat muistikirjasovellukseen erilaisen taustatekstuurin, jotain arvoa sillä täytyy olla.

Realistisesta toteutuksestaan tunnetun Paper-sovelluksen suunnittelija Andrew Allen on samoilla linjoilla Slatelle antamassaan kommentissa:

“When people talk about skeuomorphism, they’re often talking about functionality—maintaining ornaments of the past even though they no longer have function,” he says. “But that’s taking a very narrow view of design. They’re forgetting about the emotional impact, the higher-level needs that we satisfy through design. So for us, the idea of showing a journal satisfies emotional aspects you couldn’t through a Plus button. We wanted to bring back a journal with sequential pages—bring the user back to a familiar place.”

Paper-sovellus hyödyntää siirtomuotoisuutta nähdäkseni varsin sopivalla annostelulla

Paper-sovellus hyödyntää siirtomuotoisuutta nähdäkseni varsin esimerkillisellä annostelulla

Muuten, en tiedä, olenko yksin kantani kanssa, mutta Microsoft tuntuu vähän tekopyhältä puhuessaan tarkoituksenmukaisuuden olevan tyylisuuntansa keskiössä. Erotinviivojen ja -laatikoiden puuttuessa tyhjää tilaa päädytään käyttämään vastaavasti enemmän, joten informaation esitystapa ei ole välttämättä yhtään tehokkaampi kuin muilla alustoilla. Vastaavasti tekstikokojen suurta vaihtelua käytetään usein tuomaan ulkoasuun visuaalista vaihtelua sen sijaan että sillä korostettaisiin oleellisia asioita.

Daring Fireball -blogia pitävä John Gruber kirjoitti hiljattain oman analyysinsä siirtomuotoisuudesta. Hän nosti esiin iOS:llä viime aikoina nousseen pelkistystrendin, johon on alettu viitata paremman termin puutteessa sanalla flat, sillä varjoja on kiiltoja on karsittu Applen perinteisestä tyylistä. Apple itsekin vähensi mm. ActionSheet-komponenti nappien kiiltoefektiä iOS 6 -käyttöjärjestelmässä.

Yleensä analyyttinen Gruber tekee artikkelissaan hieman omituisen johtopäätöksen: siirtomuotoinen visuaalisesti kuorrutettu tyyli oli tarpeen vanhoilla heikompiresoluutioisilla näytöillä, mutta koska uudet tarkat näytöt ovat tarkkuudeltaan lähellä painojälkeä, myös visuaalisen designin on syytä seurata printtipuolen klassisempaa taittoa.

Tässä logiikassa on minusta kaksi ongelmaa:

  • Painetulla ja digitaalisella käyttöliittymällä on erilaiset tarpeet. Painettujen julkaisujen vuorovaikutus rajoittuu yleensä sivujen kääntämiseen, kun taas digitaalisessa käyttöliittymässä visuaalisuuden täytyy auttaa käyttäjää ymmärtämään, mistä voi painaa ja mistä kuuluu pyyhkäistä. Niinpä samoja oppeja on turha soveltaa molemmilla alustoilla.
  • Myös printissä näkee välillä mauttomia tekstuureita ja ylisuuria heittovarjoja. Viime aikoina on palattu pelkistetympään tyyliin, mutta takavuosina uusia efektejä tapasi nähdä lehdissä sitä mukaa, kun suunnittelijat päivittivät ohjelmistojaan.

Vastaan: liika on liikaa

Suotta ei reaalimaailman metaforien orjallisesta seuraamisesta ole varoitettu läpi vuosien käytettävyysalan kirjallisuudessa. Jesse James Garrett toteaa kirjassaan The elements of User Experience:

Basing our conceptual models on metaphors involving real-world analogs to system functions can be valuable, but it’s important not to take our metaphors too literally. The home page of the site for Southwest Airlines used to consist solely of a picture of a customer service desk, with a stack of brochures to one side, a telephone to the other side, and so on. For years, the site was held up as an example of a conceptual model gone too far—placing a reserva- tion may be analogous to making a phone call, but that doesn’t mean the reservation system should actually be represented by a telephone.

Southwest Airlinesin kotisivu vuodelta 1996 aikanaan muodikkasti reaalimaailmaa jäljitellen

Southwest Airlinesin kotisivu vuodelta 1996 aikanaan muodikkasti reaalimaailmaa jäljitellen

Ongelma on systeemin sisäisen mallin ja ulkonäön välinen ristiriita. Kuten Norman määritteli 80-luvulla (Design of everyday things), käyttäjä luo käsityksensä systeemin toiminnasta käyttöliittymän perusteella. Jos käyttöliittymä ei ole linjassa systeemin sisäisen logiikan kanssa, käyttäjälle muodostuu erilainen mentaalinen malli järjestelmästä kuin mitä suunnittelijalla oli mielessään. Ennen pitkää tämä johtaa vaikeuksiin.

Esimerkkejä voi etsiä visuvelhojen Dribbble.com-palvelusta, jossa tunnutaan pahimmillaan kilpailtavan siitä, kuka kiillottaa hienoimmat hifinupit.

Varta vasten siirtomuotoisuudella herkuttelemaan keskittynyt skeu.it-sivusto on koonnut hyviä esimerkkejä huonosta harkinnasta.

Mitä tästä pitäisi ajatella?

Yhteenvetona siirtomuotoisuuden voisi jakaa kolmeen eri tasoon.

Taso 1: käyttöliittymämetafora, joka rampauttaa käytettävyyden

 Tämä on tuhoisin tapa soveltaa siirtomuotoisuutta. Ilmiötä tavattiin etenkin 90-luvun multimediarompuilla, pelien käyttöliittymissä ja uudelleen iPhonen ja kumppanien menestyksen myötä.

Applen surullisenkuuluisa Quicktime Player 4 tarjoaa tästä esimerkin. Kuva on lainattu Quicktime Player 4: käyttöliittymän maan rakoon hakkaavasta artikkelista.

Quicktime Playerin 4-versiossa äänenvoimakkuussäädin jäljitteli muovista pyörylää. Sitä oli niin hankala operoida, että Apple mahdollisti äänen säätämisen myös vieressä olevaa äänenvoimakkuusindikaattoria tökkimällä. Hyvin ei toiminut sekään.

Quicktime Playerin 4-versiossa äänenvoimakkuussäädin jäljitteli muovista pyörylää. Sitä oli niin hankala operoida, että Apple mahdollisti äänen säätämisen myös vieressä olevaa äänenvoimakkuusindikaattoria tökkimällä. Hyvin ei toiminut sekään.

Taso 2: harjaanjohtava käyttöliittymämetafora

 Tämä ei ole yhtä vakava ongelma kuin taso yksi, mutta kielii yleensä vähintään laiskasta ajattelusta. Applen iBooks piirtää lukunäkymään kauniin fyysisen kirjan. Kirja näyttää kuitenkin samalta riippumatta siitä, monennellako sivulla ollaan. Vastaavasti sisällysluettelo näytetään omalla sivullaan, mutta tätä sivua ei käännetä vaan vieritetään.

iBooksin jäljellä olevian sivujen määrä ei hupene, vaikka kuinka lukisi. Sisällysluettelo näyttää paperisivulta, mutta sitä selataan vierittämällä.

iBooksin jäljellä olevian sivujen määrä ei hupene, vaikka kuinka lukisi. Sisällysluettelo näyttää paperisivulta, mutta sitä selataan vierittämällä.

Vastaavasti iPadin kalenterisovellus on koristeltu repäisyjäljellä aivan kuin sivuja voisi repiä irti kalenterista. Tämä ei kuitenkaan ole mahdollista. Kun nappia painaa vaihtaakseen sivua, kalenterin lehti animoituu vertikaalisesti, kuten voisi realistisesti kuvitellakin. On vaikeampi arvata, että sivua voi kääntää myös pyyhkäisemällä, kunhan pyyhkäisee horisontaalisesti. Vertikaalinen pyyhkäisy on jo varattu näkymän vierittämiselle, joten sivun vaihtamisessa on jouduttu turvautumaan sivuttaispyyhkäisyysn. Ellei reaalimaailmaa olisi pakko kumartaa, myös siirtymäanimaatio olisi voitu pitää linjassa pyyhkäisysuunnan kanssa.

iPadin kalenteriohjelman repäisyjälki jäljittelee paperikalenteria ja antaa vihjeen, että kuusta toiseen liikuttaisiin pystysuunnassa. Pystysuunnan vieritys kuitenkin vierittää tätä paperia ja seuraavaan kuukauteen liikutaan vaakapyyhkäisyllä. Tätä seuraa pystysuuntainen animaatio.

iPadin kalenteriohjelman repäisyjälki jäljittelee paperikalenteria ja antaa vihjeen, että kuusta toiseen liikuttaisiin pystysuunnassa. Pystysuunnan vieritys on kuitenkin varattu viikkonäkymässä tarvittavalle (paperin!) vieritykselle  ja seuraavaan kuukauteen liikutaan vaakapyyhkäisyllä. Tätä seuraa silti pystysuuntainen animaatio.

Taso 3: käyttöliittymä, jonka metafora on selkeä, mutta jossa on ei-toiminnallista koristetta

Tämä ei ole välttämättä ongelma – nämä ovat ennemmin makuasioita. Joskus pieni varjostus ja asiallinen liukuväri korostavat haluttua metaforaa ja tekevät sen helpommaksi ymmärtää – napit saavat affordanssinsa. Joskus grafiikat taas näyttävät hienoilta ja saavat käyttäjän hyvälle tuulelle.

On vaikea ymmärtää, miksi Applen Find my friends -sovellus on saanut kuorekseen juuri tällaisen nahkan. Ei järin tyylikästä, mutta tämä on makuasia.

On vaikea ymmärtää, miksi Applen Find my friends -sovellus on saanut kuorekseen juuri tällaisen nahkan. Ei järin tyylikästä, mutta tämä on makuasia.

Toisaalta joskus lopputulos näyttää kornilta kuralta. On muodikasta tuhahdella kaikille tekstuureille skeuomorfismin nimissä, mutta viime kädessä kyse on tyylisuunnista.

At this point, ’skeuomorphic’ just means ’UI design I don’t like’ in discussions and has ceased to be a useful term.

Sebastiaan de With Twitterissä

Yksi kommentti artikkeliin ”Synninpäästö nahalle – skeuoformismin kolme tasoa

  1. Paluuviite: Käyttöliittymä ei katoa minnekään, vaikka botit veisivät potin | Köyttöliittymä

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s