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.

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.”

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.

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.

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.

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.

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.

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ä