Älä enää sekoita käyttäjän päätä – karusellien aika on ohi

Karusellilla tarkoitetaan sivuston etusivun yläosassa olevaa, parhaimmillaan – tai pahimmillaan – itsestään liikkuvaa kuvasarjaa. Tällainen karuselli on esimerkiksi Valion ja Sokoksen sivustoilla:

Esimerkki karusellista Valion sivustolla.
Valion sivustolla karusellissa on kaksi vaihtoehtoa, jotka esittelevät kauden reseptejä.

 
Esimerkki karusellista Sokoksen sivustolla.
Sokoksen sivustolla karusellissa esitellään ajankohtaisia tarjouksia ja uutuustuotteita.

Vuoden 2012 paikkeilla karuselleja ilmestyi sivustoille solkenaan. Käytettävyysongelmat ovat saaneet muodin muuttumaan: karuselli valtaa etusivun paraatipaikan yhä harvemmin. Tällä hetkellä muodissa tuntuvat olevan isot, koko ensimmäisen näytöllisen täyttävät kuvat.

Miksi karusellit ovat suosittuja?

Karusellit mahdollistavat monen asian esittämisen pienessä tilassa. Etusivun yläosa saa käyttäjiltä usein eniten huomiota. Siksi siihen halutaan tuoda kaikki tärkeät asiat, ja näin voidaan säästää tilaa. Liikkuvalla kuvalla halutaan kaapata käyttäjän huomio, ja saada hänet klikkaamaan karusellissa pyöriviä nostoja.
Vaihtuvat, usein kookkaatkin kuvat tuovat etusivulle näyttävyyttä ja väriä, ja kuvia on helppo vaihtaa. Monissa verkkosivustojen suunnitteluun tarkoitetuissa sovelluksissa karusellielementtejä tarjotaan valmiina, ja sellainen on myös varsin monissa WordPress-teemoissa valmiina.
Liike, suuret kuvat ja värikkyys saatetaan usein sivuston suunnitteluvaiheessa mieltää uudenaikaisena, dynaamisena ja tuoreena vaihtoehtona.
Käyttäjien kannalta karuselli on harvoin toimiva vaihtoehto, vaikka se näyttäisikin kauniilta.

Miksi karuselli on huono?

Karusellitrendin ohimenolle on useita hyviä syitä. Tärkein niistä on, että karuselli on helppo ohittaa. Jakob Nielsenin käytettävyystesteissä käyttäjät jättivät karusellin kokonaan huomiotta, vaikka se oli paraatipaikalla.  Karusellit on helppo sekoittaa välkkyviin mainosbannereihin, joten niihin pätee myös bannerisokeus. Karuselliä ei siis kannata myöskään pienentää reunapalstaan, kuten Lemminkäisellä on tehty:
Esimerkki karusellista Lemminkäisen sivustolla.
Liikkuva kuva häiritsee käyttäjiä. Ihmisen tarkkaavaisuus herpaantuu helposti, ja karuselli saattaa viedä huomion pois siitä, mitä käyttäjä on tullut tekemään sivustolle. Usein käy niin, että karusellikuvissa oleva viesti ei kuitenkaan ole se, mitä käyttäjä on tullut etsimään. Jos käyttäjä kiinnostuukin, saattaa käydä niin, että liikkuva kuva livahtaa pois näkyvistä juuri, kun käyttäjä onkin päättänyt klikata sitä!
Karuselli ei konvertoi kävijöitä asiakkaiksi. Karusellit soveltuvat huonosti tarjousten esittämiseen, sillä usein vain ensimmäinen kuvista saa klikkauksia, ja sekin vain noin 10 prosenttia etusivulle kohdistuvista klikkauksista.
Karuselli ei ole esteetön. Automaatilla pyörivät karusellit saattavat aiheuttaa ongelmia ruudunlukijaselaimilla tai niiden pyörimisnopeus vain yksinkertaisesti on liian hurja. Käyttäjä ei ehdi tajuamaan, mitä karusellissa oli, ja turhautuu. Karusellit, joiden toimintatapaa joutuu päättelemään, ovat käyttäjille vaikeita, mutta käytännössä aivan mahdottomia silloin, jos käyttäjä on näkövammainen.
Karusellin käyttö voi tarkoittaa, ettei sisältöä ole pystytty priorisoimaan. Kuten Brian Karell kirjoittaa, priorisoinnin epäonnistuminen tarkoittaa epäonnistunutta sisältöstrategiaa: kuin heittäisi sisällöt seinään ja katsoisi, mikä jää kiinni. Karuselli voi antaa sekavan, vaikeasti hahmotettavan kuvan sivuston sisällöstä.

Millainen karuselli on hyvä?

Karusellit etusivujen paraatipaikoilla ovat saaneet kovaakin kritiikkiä, jopa ihan asiaan keskittyneen pienen sivuston verran: Should I Use A Carousel? Vaikkei karusellien käyttöä voi suositella, niiden käytettävyyttä pystyy parantamaan muutamalla keinolla:

  1. Näytä karusellissa vasta kolmanneksi tärkeintä tietoa.
    [Tweet ”Näytä karusellissa vasta kolmanneksi tärkeintä tietoa.”]
  2. Pysäytä karusellin automaattinen liike – tämä on erityisen tärkeää mobiiliversiossa.
  3. Opasta selkeästi käyttöliittymän avulla, miten käyttäjä voi itse selata karusellin kuvia. Parasta on, jos käyttöliittymä antaa selkeän sanallisen vihjeen, mitä karusellin seuraavassa kuvassa on, ja montako kuvaa on tulossa.
    Esimerkki karusellista Helsingin yliopiston sivustolla.
    Helsingin yliopiston sivustolla on itse eteenpäin klikkailtava karuselli.
  4. Tarjoa vaihtoehtoinen tapa sisällön selaamiseen. Älä koskaan linkitä tiettyyn sisältöön vain karusellista.
    Esimerkki karusellista Moneyn sivustolla.
    Moneyn matkailusivustolla matkavinkit voi selata karusellina tai katsoa listana.
  5. Pidä karusellikuvien tekstit lyhyinä ja helppolukuisina.

Ihannetapauksessa karuselleja on sivulla vain yksi, ja siinä on korkeintaan 3–5 kuvaa.

Esimerkki karusellista Maun sivustolla.
Maku.fi-sivustolla karuselli liikkuu itsestään, siinä on yhdeksän eri kuvaa ja jokaisessa on vähän liian paljon asiaa.

Mihin karuselli sopii?

Kritiikistä huolimatta on joitain tilanteita, joihin karuselli sopii, kunhan se täyttää edellä kuvatut käytettävän karusellin kriteerit.
Kun sisältöä selaillaan vapaasti, ilman tiettyä tarvetta tai tehtävää. Karusellissa voi hyvin esittää söpöjen eläinten kuvia, joita on hauska selailla loputtomasti.
Karuselli antaa vinkkejä kiinnostavasta sisällöstä. Klassikkoesimerkki on Amazonin ”Katso, mitä muuta tämän tuotteen ostaneet asiakkaat ostivat ” -tyyppinen karuselli verkkokaupassa. Karuselli ei kuitenkaan sovi tuotteiden vertailuun tai etsimiseen.

Esimerkki karusellista Amazonin sivustolla.
Amazonin karuselli hoksauttaa muista kiinnostavista tuotteista.

Pomo haluaa jotain kaunista etusivulle: mitä karusellin tilalle?

Karusellia voi pitää aika helppona ratkaisuna. Sen korvaaminen edellyttää aivotyötä: mikä oikeasti on etusivun tärkeintä sisältöä, ja miten se kannattaa esittää merkityksellisellä ja yksinkertaisella tavalla?
Määrittele sivun tavoitteet tarkemmin. Se ohjaa sisältöjen priorisoinnissa ja auttaa suunnittelemaan vaikuttavan etusivun ilman karusellia.
Käytä karusellin sijasta yhtä isompaa kuvaa. Myös tämä keino tuo sivulle näyttävyyttä ja väriä, ja saat toimintakehotteen tai tärkeimmän asian keskeiselle paikalle.

Esimerkki sisällön priorisoinnista Ylen sivustolta.
Ylen sivustolla paraatipaikka on kulloinkin tärkeimmällä uutisella.

Näytä tärkein keskeisellä paikalla, mutta nosta myös muita aiheita. Näin sisällön silmäily helpottuu, ja käyttäjät löytävät nopeammin sen, mitä he tulivat sivustolle etsimään.
Esimerkki etusivun nostopaikoista Kodin Kuvalehden sivustolla.
Kodin Kuvalehti nostaa esiin juttuja monesta eri kategoriasta. Pääjutussa on isompi kuva.

Kokeile käyttöliittymässä jotakin uutta karusellin sijasta. Portentin sivustolla ensimmäistä kertaa käydessä etusivun kuviin ilmestyy hiirellä osoittaessa selitysteksti.
Esimerkki etusivun nostokuvista Portentin sivustolla.
Portentin arvolupausta valaistaan selityksillä kuvien päällä sivuston desktop-versiossa.

Anna käyttäjälle mahdollisuus valita. Kiinnostuksenkohteisiin tai käyttöhistoriaan perustuvat mekanismit voivat tarjota käyttäjälle juuri hänelle sopivaa sisältöä kohdassa, joka saa sivustolla paljon huomioarvoa.
Kirjoituksen innoittajana oli Kim Flahertyn toukokuussa 2016 pitämä koulutuspäivä Nielsen Norman Groupin järjestämässä UX Conference 2016 -tapahtumassa Amsterdamissa.

Laita verkkoliiketoimintasi kasvuun

Varaa nyt tehokas lietsontasessio