Olen käynyt berliiniläisessä yökerhossa, joka ei mainostanut itseään missään ja jonka ulkopuolella ei ollut yhtään kylttiä. Piti vain tietää, että kyseisen oven takana oli yökerho. Oven takana jonottaessa odotukset nousivat pilviin. Ajattelin, että sisällä paikan täytyi olla todella erikoinen kun voivat näin olla mainostamatta itseään. Todellisuudessa sisälle päästyäni totesin paikan olevan varsin samanlainen kuin muutkin bilepaikat. Digitaalisten palveluiden käyttäjäkokemukset ovat usein samanlaisia: vaikeasti löydettävät toiminnallisuudet, jotka tuntuvat piilotetuilta. Sitten viidakon läpi taisteltuaan, palvelukin on pettymys.
Attractivella olemme kehitelleet virtuaalista UX-asiantuntijaa, Poe, joka osaa analysoida ja neuvoa käyttökokemuksen parantamisessa, täysin automaattisesti. Se osaa laajasti ja monipuolisesti tutkia web-palveluita. Äskettäin Poe sai kaverikseen lemmikkiapinan, MeMen. MeMe on aina kovin innoissaan Poen asiantuntijatouhuista, ja yrittää itse olla vähän samanlainen. Me Me ei kuitenkaan tajua kovin paljon käyttökokemuksesta, eikä kamalasti osaa neuvoa, mutta se on kova klikkaamaan ja erityisesti tykkää klikata kivannäköisiä, houkuttelevia asioita. Innostuimme tekemään generoituja sarjakuvia MeMen touhuista. Vaikka tämä on osittain hupia, voi olla aika valaisevaa nähdä mikä on houkuttelevin polku omassa webisaitissasi. Se voi hyvin olla jotain aivan muuta kuin mitä kuvittelit. Omaa saittia voi testata osoitteessa: https://attractive.ai/en/meme
Keräsin alle joitakin esimerkkejä palveluista, joita sillä testasimme. Kuitenkin ensin on hyvä esitellä muutamia yleisiä sääntöjä houkuttelevuuden lisäämiseksi, oli käyttöliittymä minkälainen tahansa.
Vaihtoehtoja
Käyttöliittymissä on tärkeätä miettiä mitkä ovat olennaisimmat asiat käyttäjän kannalta, ja karsia turhat pois. Erään web-palveluista tehdyn tutkimuksen mukaan, yksinkertaistamalla päätöksentekoa 20% (käytännössä vähentämällä vaihtoehtoja), on 86% todennäköisempää, että ostos tapahtuu, ja on 115% todennäköisempää, että käyttäjä antavat suosituksen. Huikeita lukuja, mutta Amazon, Apple ja Google rakensivat menestyksensä ymmärtämällä tämän tärkeyttä. Silti iso osa yhtiöistä, joita olemme Attractivella analysoineet, rikkovat tämän.
Nordean kansainvälinen sivusto esimerkiksi tarjoaa useita voimakkaasti näkyviä käyttöliittymäelementtejä, joista käyttäjän pitäisi yrittää miettiä mihin kannattaisi hyökätä. Vanha vitsi isojen yhtiöiden sivustoista onkin, että heidän organisaatiokaavionsa pystyy päättelemään etusivujen laatikoista. Nokia sen sijaan on päättänyt olla antamatta mitään vaihtoehtoja, vaan sivuston pääviesti on epämääräinen, eikä sitä edes pysty klikkaamaan päästäkseen eteenpäin.
Värit
Useat asiantuntijat suosittelevat houkuttelevien asioiden esilletuomiseksi oranssia tai punaista väriä. Tutkimuksissa onkin todettu, että yleisesti ne värit tuottavat 20–30% parempaa konversiota. Kuitenkin on syytä painottaa, että tämä on vain osatotuus. Olennaista ei ole niinkään itse väri, vaan miten se erottuu taustoista. Usein taustoissa käytetään hailakoita kuvia ja värejä, ja suositut värisävyt ovat sinisiä ja vihreitä. Oranssi ja punainen erottuvat näistä hyvin. Kuitenkin jos sivu käyttääkin enemmän oranssisia sävyjä, sininen tai vihreä voi taas vastavuoroisesti erottua paremmin. Väriympyrästä voi yrittää tähyillä värikontrasteja. Ihmisten tavasta nähdä kontrasteja ja väriharmonioita on laajasti keskusteltu ja siitä voi lukea lisää täältä: https://en.wikipedia.org/wiki/Color_theory
Puhtaasti harmoninen käyttöliittymä ei joka tapauksessa ole optimaalinen esteettisesti taikka käyttäjän ohjaamisessa. Pitää siis hyödyntää korostusvärejä hillitysti, mutta selkeästi, ja näin tarjota kiinnityspisteitä käyttäjille. Attractive.ai -palvelumme osaa luoda lämpökarttoja käyttöliittymistä (toimii visuaalisesti ja ilman asennusta), joista voi nähdä mitkä alueet veisivät kävijän huomion. On myös mahdollista käyttää laborotorioita, joissa käytetään silmänseurantalaitteita tutkiakseen käyttäjien huomion siirtymistä.
Tila
Moderneissa taidemuseoissa vaikuttavinta eivät useinkaan ole itse taideteokset, vaan tilat, joissa ne esitetään. Valtavan valkoisen huoneen keskellä oleva ruosteinen naulakasa olisi muussa ympäristössä täysin merkityksetön, mutta ympärillä oleva tyhjyys vie väkisin huomion kohti lattialle heitettyjä kappaleita ja herättää kysymyksiä.
Sen sijaan eBayn tuotesivusto ei herätä muita kysymyksiä kuin ’miksi?’. Selvästi sinne on vuosien saatossa lisätty aina vain lisää tavaraa, erillisten tiimien toimesta, ilman minkäänlaista yhtenäistä visiota.
Koko
Usein-käytettyjen tai tärkeiden asioiden pitäisi yleisesti olla isompia, noudattaen Fittsin lain periaatetta (https://en.wikipedia.org/wiki/Fitts%27s_law. Tällekin, ehkä hieman yllättäen, on kuitenkin rajoja. Tietyn fonttikoon jälkeen ihmiset eivät enää prosessoi tekstiä hyvin ja sanoma häviää (ihmiset hahmottavat sanoja kokonaisuuksina, eivätkä yksittäisten kirjainten sarjana), mutta ihmiset myös osaavat tehokkaasti filtteroida asioita, joita usein pitävät epäolennaisina. Muistan kuinka aikoinaan loin tapahtumasivuston, jossa tapahtuman tiedot olivat isosti laatikossa sivuilla — ja silti tuli kyselyitä, että missä ja milloin tapahtuma on. Kävijät eivät siis edes lukeneet isoa infoaluetta, tiedostomatta luullen sitä mainosbanneriksi. Bannereissakin usein isoimmat koot eivät toimi yhtä tehokkaasti kuin hieman pienemmät, jotka istuvat sisällön kanssa paremmin.
Sijainti
Länsimaisissa kulttuureissa olemme tottuneet lukemaan vasemmalta oikealle, ylhäältä alas, muodostaen Z-mallisen kuvion. Tärkeiden klikattavien asioiden pitäisikin seurata tekstiä pitäen tuota mielessä. Kun erilaisia nappejien sijainteja tutkittiin web-sivustoissa, ruudun keskellä ’Tervetuloportissa’ olevaa, otsikon jälkeistä nappia saatettiin klikata 10 kertaa enemmän kuin muualla olevaa. Monien sivustojen käyttämät popup-ikkunoidenkin nappulat konvertoivat huonommin. Käyttäjälle tärkein toiminta saisi siis olla näkyvä ja yleensä on parempi, ettei hänen tarvitsisi vierittää ruutua. Poikkeuksena ovat tilanteet, missä käyttäjä tarvitsee enemmän tietoa ennen kun uskaltaa siirtyä seuraavaan vaiheeseen, mutta nämä tilanteet ovat harvinaisempia kuin mitä yleensä suunnittelijat itselleen kertovat…
Liike Nyt?
Liike ehdottomasti nappaa käyttäjien huomiota, mutta useissa tapauksessa väärällä tavalla tai jopa liikaa. Olemme nähneet useita palveluita, joissa käytetään isokokoisia taustavideoita, jotka eivät ainoastaan tee latauksesta hidasta, mutta myös itse asiassa vievät huomion pois interaktiivisista kohtiesta. Onko kävijän päätarkoitus oikeasti katsoa epämääräistä videota, vai kenties klikata jotain ja edetä polulla? Liike voidaan toki kohdistaa nappiin tai muuhun käyttöliittymäelementtiin, jolloin se kyllä huomataan, mutta sitten se voikin olla vaikea klikata. Useat sivustot esimerkiksi käyttävät karusellikuvia, joissa esitellään tarjouksia tai tietoa, mutta juuri kun käyttäjä on klikkaamassa kiinnostavaa tarjousta, karuselli siirtääkin seuraavaan kuvaan. Käyttäjä turhautuu ja sivusto on menettänyt mahdollisen asiakkaan.
Liikettä voidaan pelkistetystä käyttää tuomaan huomiota avainnappuloihin, esimerkiksi kevyen hehku-efektin avulla, tai muuttamalla väriä kun hiiri on sen päällä. Tätäkin kannattaisi tehdä varoen ja ainoastaan kaikkein tärkeimpään nappiin. Aistillista pommitusta kannattaa jättää niihin yökerhoihin.
Päästetään Apina Irti
Noniin, nyt on vihdoinkin aika katsoa mitä MeMe-apina tekee muutamilla eri sivustoilla. MeMe siis painelee aina näkyvintä tai kiinnostavinta käyttöliittymäkomponenttia ja innostuu kun asioita tapahtuu.
Kuten aiemmin mainitsin, tätä voi kokeilla omalla saitilla ilmaiseksi täältä: https://attractive.ei/en/meme
Oura
Oura on tehyt hyvää työtä ja MeMe pääsee varsin pitkälle ostosprosessissa. Käyttöliittymä ohjaa koko ajan loogisesti eteenpäin. Vasta viimeisessä vaiheessa matka loppuu kun mitään ei MeMen silmin tapahdu. Ostoskorinappi on hyvin näkyvä ja houkuttelee painamaan, mutta siitä ei tapahdu mitään ennen kun koko on valittu. Edes virhetilaa ei kommunikoida hyvin. Kenties parempi olisi tehdä nappulasta vähemmän näkyvä vielä tässä tilanteessa kun se ei toimi, ja tehdä koon valinnasta kirkkaampi. Vasta kun koko on valittu voisi ostoskorinappi näkyä vahvasti.
Nokia
Kuten aiemmin nähtiin, Nokian sivustolla mikään ei kutsu klikkaamaan, eikä MeMe-apina tästä innostu. Se ei pääse tekemään mitään!
Elisa
Elisan sivuilta MeMe joutuu heti pois ja päätyy Elisan Viihteen Viaplayn sivuille. Voikin hieman ihmetellä miksei houkuttelin ja näkyvin nappi ohjaa pois sivuilta. Siellä matka joka tapauksessa pysähtyy, koska tarjousnappi kilpailee GDPR-popupin kanssa, ja vaikka MeMe tykkääkin kekseistä, se olisi mielummin katsonut 2 viikkoa ilmaiseksi.
Maria01
MeMe kuitenkin osaa klikata GDPR-popuppeja, jos vain ovat riittävän näkyviä, kuten Issuun sivustolla, johon hän päätyy Marian näkyvästä nappulasta. Siellä vaan huomataan ulkopuolisten sivustojen haittapuolia kun Issuu kovasti haluaisi ihmisten tilaavan palvelua mielummin kuin, että lukisi tekstiä. Issuu tekee myös yrityksensä kannalta hyvää työtä siinä, että korostavat hyvin paketin mihin haluaisivat ohjata kävijöitä. MeMe ei rupea lomaketta täyttelemään kun se on tylsää puuhaa, mutta on kuitenkin innoissaan päästessään koko ajan eteenpäin.
Google on taas esimerkki sivustosta, jossa GDPR-hyväksyntä on tehty huonosti. Suurin osa käyttäjistä haluaa varmasti klikata hyväksymään evästeet, ja voisi kuvitella, että Google itse haluaisi sitä. Kuitenkin molemmat napit ovat yhtä korostettuja, jolloin MeMekään ei tiedä kumpi olisi parempi. Vaikka hän pääsee matkassa eteenpäin, ei kuitenkaan kenties sinne minne Google olisi eniten toivonut.
Korkeasaari
MeMen lempipaikka! Siellä MeMe pääsee ainakin jonkin verran tutkimaan, mutta aikaisessa vaiheessa matkaa pitäisi kyllä Korkeasaaren miettiä ovatko kielivalintanappulat oikeasti yhtä tärkeät kuin varauksen tekeminen. Värit ovat kuitenkin samat ja sijainti korkeammalla.
Verkkokauppa
Tässä on esimerkki siitä, että sivuston houkutinnappi (’Ostoksille’) ei kiinnitä huomiota, koska taustakuva sekoittaa. Lopulta MeMe ei tässäkään pääse jatkamaan, koska minkäänlaista ilmoitusta ei tule siitä, että lomakkeessa olisi virheitä. Tylsä juttu MeMelle.
Akiro
Lopulta myös pienempi toimija, kotimainen kasvihuoneita myyvä Akiro on tehnyt ’Etusivulle’ -napista korostetuin, jolloin MeMe vain kiertää kehää painamassa sitä, eikä pääse eteenpäin. Kyseisen napin ollessa vähemmän tärkeä, olisi kenties hyvä käyttää siinä eri väriä ja tarjota jokin näkyvämpi ostosnappi tai osio, josta pääsisi hyvin eteenpäin.
Kristoffer Lawson on sarjayrittäjä. Hän on ollut mm. pankkipalvelu Holvin sekä tietokoneyritys Solun perustajia. Viimeisimpänä hän on rakentanut Attractive.ai -yritystä, joka tekoälyn ja algoritmien avulla pystyy automaattisesti arvioimaan ja analysoimaan verkkopalveluiden käyttökokemusta. Hän on ollut usein tapahtumissa puhujana, ja mentoroinut startup-yrityksiä mm. Kiuas ja Sampo – kiihdyttämöissä.