Responsiivinen suunnittelu tehostaa mobiilikonversiota 22.3.2013, Ivo Popp How Responsive Design Boosts Mobile Conversions Alkup. artikkeli ja kuvat: http://conversionxl.com/how-responsive-design-boosts-mobileconversions/#/ Google kannattaa vahvasti responsiivista suunnittelua. Mashable nimesi vuoden 2013 responsiivisen suunnittelun vuodeksi, mutta onko responsiivinen web design todella vastaus mobiilikonversion tehostamiseen? Vuosi 2012 oli merkityksellinen kuluttajille suunnatuilla laitemarkkinoilla. Ensimmäistä kertaa sitten vuoden 2001 PC-myynti oli alhaisempi kuin edeltävänä vuonna ja tablettien myynnin odotetaan ohittavan kannettavat tietokoneet ensimmäistä kertaa vuonna 2013. Nielsen raportoi, että 55% amerikkalaisista liittymänomistajista käyttää älypuhelinta ja kaksi kolmesta amerikkalaisesta valitsee älypuhelimen yksinkertaisemman multimediapuhelimen sijasta uutta matkapuhelinta hankkiessaan. Matkapuhelinkäyttäjien määrä on koko ajan kasvussa ja se tarkoittaa myös kasvavaa internetin mobiilikäyttäjien määrää. Jos verkossa toimivat yritykset haluavat hyötyä tämänhetkisestä kehityksestä, heidän on optimoitava sivunsa mobiilikäyttäjille sopiviksi.
Shoppailu mobiililaitteella voi olla tuskallista Perinteisellä verkkosivulla shoppailu älypuhelimen kautta voidaan tiivistää yhteen sanaan: tuska. Pöytäkoneille suunniteltujen sivujen navigointi ja zoomailu kolmen tuuman näytöllä ja oikean tiedon löytäminen on jo tarpeeksi haasteellista, mutta sen lisäksi nettikaupat olettavat kävijöiden olevan kosketusnäyttövelhoja, jotka ymmärtävät pitkät lomakkeet ja Käyttöehtosopimuksien merkityksen. Nämä esteet tekevät kassalle pääsemisestä yllättävän vaikeaa. Ei mikään ihme, että 61% mobiilikävijöistä siirtyy kilpaileville sivuille kohdattuaan turhauttavan selailukokemuksen. Toisaalta mobiilikävijät käyttävät puhelimiaan entistä hanakammin verkko-ostoksien tekemiseen, kunhan siitä on tehty käytännöllistä. Nielsenin raportin mukaan 29% älypuhelinkäyttäjistä on shoppaillut verkossa puhelimen kautta. Määrä tulee varmasti kasvamaan sitä mukaa kun yritykset kohentavat sivujensa mobiilikäytettävyyttä. Yritykset, jotka ovat jo tiedostaneet ostopotentiaalin ja panostaneet sivujensa mobiilikäytettävyyteen, korjaavat nyt sijoitustensa satoa. Hyvä esimerkki onnistuneesta mobiilikävijäkonversiosta on Webundies.com, perheyritys, joka myy alus-, yöja oloasuja. Webundies.com ilmoitti, että vuoden 2012 mobiilimyynti oli 168.000$ kattaen 5,4% kokonaismyynnistä. Webundies.comin vuoden 2012 mobiilimyynti kasvoi huimat 169,2% edellisestä vuodesta. Yritys on ottanut käyttöön responsiiviset sivut ja tabletille suunnitellun tuotekuvaston mobiili- ja tablettikonversion tehostamiseksi ja suunnitelma näyttää toimivan. Kuka ei haluaisi nauttia samanlaisesta menestyksestä?
Perinteiset verkkosivut omistavalla yrityksellä, joka haluaa panostaa mobiilikäytettävyyteen ja konversioon, on käytännössä kolme vaihtoehtoa: Responsiivisten kotisivujen suunnittelu Erilliset mobiilisivut Mobiilisovelluksen kehittäminen Responsiivinen web design Responsiivinen web design tarkoittaa joustavaa ja muuntautuvaa sivua, joka mukautuu sopivaksi erilaisille näytöille, resoluutioille ja laitteille. Sen avulla verkkosivujen ulkoasu muuttuu sivuilla vierailevan käyttäjän näyttöresoluution mukaan, oli kyseessä sitten pöytäkone, tabletti tai älypuhelin ja takaa näin miellyttävän käyttöliittymän sivustolla vieraileville käyttäjille. Hyvä esimerkki responsiivisesta suunnittelusta käytännössä on The Boston Globe -lehden verkkosivut. Huomaa, kuinka sama sisältö mukautuu eri laitteille sopivaksi. Kuva Flickr / jiraisurfer Responsiivinen suunnittelu on kerännyt runsaasti kannattajia verrattuna muihin vaihtoehtoihin: Vain yksi kehitettävä ja päivitettävä verkkosivu. Hyvä vaihtoehto yrityksille, jotka päivittävät sivujensa sisältöä usein. Eri sivustojen sisällön yhteneväisyyttä ei tarvitse siis enää tarkistaa. Tämä vaihtoehto osoittaa hyödyllisyytensä myös konversio-optimoinnissa mm. A/B -testauksessa; testattavia kohteita on enää yksi. Tämän lisäksi vierailijat kohtaavat yhtenäisen brändikokemuksen riippumatta siitä, käyttävätkö he kannettavaa tietokonetta, älypuhelinta vai tablettia.
Hakukoneoptimointi. Kaikki linkit ja kirjanmerkit johtavat yhteen ja samaan URL-osoitteeseen. Ei ihme, että Google suosii responsiivista suunnittelua. Sosiaalinen media. Riippumatta siitä, millä laitteella käyttäjät vierailevat URL-osoitteessa, heidän kokemuksensa on sama responsiivisen suunnittelun ansiosta. Tämä tekee sisällön jakamisen sosiaalisessa mediassa idioottivarmaksi, koska myös jaetun linkin nähneet käyttäjät pystyvät selaamaan sisältöä optimaalisimmassa muodossa. Analytics. Yksi kattava raportti kaikesta sivuliikenteestä. Muutoksiin sopeutuva. Mikä tahansa tulevaisuuden uusi trendilaite onkin, responsiivinen suunnittelu on jo ottanut sen huomioon näytön resoluutioon mukautuvan sisällön ansiosta. Responsiivisuuden vaikutus mobiilikonversioon Responsiivinen suunnittelu on tehostanut monien yritysten mobiilikonversiota. Kaikki allamainitut yritykset ovat siirtyneet perinteisistä verkkosivuista responsiivisiin sivuihin. O'Neill Clothing Suosittu verkkokauppa O'Neill Clothing sai aikaan vaikuttavia tuloksia siirryttyään käyttämään responsiivisia sivuja. O'Neill tarkkaili konversioita, ostotapahtumia ja myyntituloja kolmen viikon ajan ennen siirtymistään responsiivisiin sivuihin. Sivujen muututtua responsiivisiksi O'Neill jatkoi tarkkailua toiset kolme viikkoa. Tulokset ovat häkellyttäviä: iphone/ipod: konversioiden määrä kasvoi 65,71% ostotapahtumien määrä kasvoi 112,50%
myyntitulo kasvoi 101,25% Android: konversioiden määrä kasvoi 407,32% ostotapahtumien määrä kasvoi 333,33% myyntitulo kasvoi huimat 591,42% Think Thank Photo Think Thank Photo (TTP) on yritys, joka valmistaa laitteita ja lisävarusteita valokuvaajille. Huomattuaan, että heidän sivujensa mobiilikävijöiden määrä kolminkertaistui vuodessa kattamaan 13% koko kävijämäärästä, TTP päätti rakentaa sivuistaan responsiiviset. Uuden responsiivisen ulkoasun ja muiden optimointitavoitteiden myötä TTP:n tulot kasvoivat 188% Kiitospäivän jälkeisen Black Fridayn ja Cyber Mondayn aikana (4pv) edelliseen vuoteen verrattuna. Ostot älypuhelimista ja tableteista kasvoivat yli 96% ja sivuja mobiililaitteilla selanneiden määrä kasvoi 224%. Skinny Ties Skinny Ties on perhe-yritys, joka on suunnitellut ja valmistanut solmioita vuodesta 1971 lähtien. Yritys päätti uudistaa brändinsä ja rakentaa sivuston, joka ottaisi huomioon tulevaisuuden trendit. Yritys huomioi älypuhelinten ja tablettien kasvavan vaikutuksen ja päätyi responsiivisiin sivuihin. Sivut julkaistiin lokakuussa 2012 ja parissa viikossa yrityksen myynti singahti huomattavaan nousuun kolmeen aikaisempaan kuukauteen verrattuna. iphonen kautta tulleet tulot kasvoivat käsittämättömät 377,6%
iphone-konversiot kasvoivat 71,9% Kokonaistulot kaikista laitteista nousivat 42,4% Kokonaiskonversio kasvoi 13,6% Sivulta poistuvien määrä putosi 23,2% Maxatec Maxatec on yritys, joka valmistaa POS- ja EPOS -kassajärjestelmiä ja mobiili- ja viivakoodituotteita. Kuten edellämainitut yritykset, myös Maxatec koki samanlaisen mobiilikäyttäjien määrän kasvun ja päätti kohentaa tabletti- ja älypuhelinkäyttäjien käyttöliittymää ja tehostaa konversiota näillä osa-alueilla. Lopputuloksena mobiilikäyttäjien määrä kasvoi 12% ja keskimääräinen toiminta-aika sivuilla lyheni 50%. Yhteenveto Kuten ennustettiin, edelläkuvatut tapaustutkimukset osoittavat kiistattomasti, että responsiiviset sivut on ylivertaisia mobiilikäyttäjäkonversiossa perinteiseen verkkosivuun verrattuna. Yritykset, jotka houkuttelevat mobiilikäyttäjiä perinteisille kotisivuille menettävät suuren osan mahdollisista konversioistaan ja tuloistaan, ja koska älypuhelinten käyttö yleistyy koko ajan, voi perinteisten verkkosivujen käyttö osoittautua kalliiksi (menetettyjen konversoiden ja tulojen osalta). Erilliset mobiiliverkkosivut Yritys voi myös valita erilliset mobiilisivut mobiilikävijöiden selailukokemuksen parantamiseksi. Mobiilisivut löytyvät eri URLosoitteesta kuin tavalliset verkkosivut ja sen tarkoituksena on palvella nimenomaan mobiilikäyttäjiä. Esimerkkinä erillisistä mobiilisivuista viereinen Amazon. Erillisten mobiilisivujen hyödyt: Mobiilikäyttäytyminen. Mobiilisivut on optimoitu mobiiliresoluution ja mobiilikäyttäytymisen kannalta, kun taas responsiiviset sivut ottavat huomioon ainoastaan resoluution. Nopeammat latausajat. Kun Beth Israel Deaconess Medical Center halusi parantaa sivujensa mobiilikäytettävyyttä, BlueTrain Mobile toteutti responsiivisen ja mobiiliversion yhdestä verkkosivujen
välilehdestä. Samassa mobiiliverkossa responsiivisten sivujen latausaika oli 15 sekuntia, kun taas mobiilisivut latautuivat kahdessa sekunnissa. Optimointi. Mobiilisivut on helpompi optimoida mobiilikonversion suhteen. Erilliset mobiilisivut keskittyvät ainoastaan mobiilikäyttäjiin, kun taas responsiiviset sivut ottavat huomioon kannettavat, tabletit ja älypuhelimet. Erillisten mobiilisivujen haitat ovat käytännössä samat kuin responsiivisten sivujen hyödyt: Kaksi erillistä sivua ja sisältöä, joita täytyy päivittää Erilliset URL-osoitteet. Jos yritys käyttää sisältömarkkinointia kävijöiden houkuttelemiseksi, erilliset osoitteet ovat merkittävä haittapuoli, koska linkkien jakaminen sosiaalisessa mediassa on tällöin ongelmallista. Mobiilisovellus Mobiilisovelluksen kehittäminen selailukokemuksen kehittämiseksi on hyvä idea, jos yrityksellä on omaperäinen sosiaalinen tai interaktiivinen alusta TAI kun yrityksen sivut ovat yrityksen pääasiallinen tuote. Yrityksen kannalta parasta on siis kehittää erilliset mobiilisivut tai responsiiviset sivut ellei yritys satu olemaan vaikkapa Facebook, Twitter, LinkedIn tai Youtube. Pysähdytään ajattelemaan asiaa. Jos yrityksen sivut eivät ole yrityksen tarjoama tuote, onko käyttäjällä mitään realistista syytä ladata yrityksen terkemää sovellusta app-storesta, asentaa sitä ja käyttää sitä vain sivuilla käymiseen? Ei? Niinpä. Sovellusten muita haittapuolia ovat mm. sisällön ja käytettävyyden rajoitukset ja käyttöjärjestelmäriippuvaisuus. Todennäköisesti yrityksen tarvitsisi kehittää sovellus sekä Androidille ja ios:lle optimoidakseen sovelluksen mobiilikäyttäjille. Responsiiviset vs. mobiilisivut: Kumman valitset? Responsiivisilla sivuilla on paljon kannattajia, eikä syyttä. Kun vaihtoehtoja verrataan keskenään, huomataan, että responsiivisuus on tulevaisuuden kannalta käytännöllisempi, vain yhden sivun sisältöä tarvitsee päivittää (sisältö on aina yhteneväistä), brändin ilme pysyy yhtenäisenä ja sisältö on sosiaalisessa mediassa helposti jaettavissa.
Erilliset mobiilisivut päihittävät responsiiviset sivut periaatteessa yhdellä osa-alueella; latausajat ovat nopeampia. Mobiiliverkkojen ja latausaikojen kehittyessä responsiivisten sivujen ja mobiilisivujen väliset latausaikojen erot kuitenkin pienenevät. Konversio-optimoinnin näkökulmasta molempien sivujen kehitys kulkee samalla tavalla: jatkuvaa kehittämistä, A/B -testausta ja monimuuttujaanalyysia. Siksi olisikin viisasta valita vaihtoehto, joka tuo suurimman hyödyn responsiivinen web design. Viisi avainasiaa, jotka on hyvä pitää mielessä, kun optimoidaan responsiivisuutta mobiilikonversioita ajatellen 1. Keskity olennaiseen Kun sivuja optimoidaan mobiilikäyttäjiä varten, on tärkeää muistaa, että mobiilikäyttäjille ärsyttävintä on selata läpi loputonta leipätekstiä. Jos mobiilikäyttäjät eivät löydä etsimäänsä nopeasti, he siirtyvät muualle. Tarkastele sisältöä kriittisesti ja säilytä ne elementit, jotka auttavat mobiilikävijöitä löytämään etsimänsä nopeasti. Jätä pois kaikki sellainen, joka saattaa karkottaa mobiilikävijät sivuiltasi. Varmista, että ensimmäinen asia, jonka mobiilikävijä näkee sivuillasi on arvolupauksesi (value proposition). Arvolupaus on selkeä kuvaus, jossa selitetään miten yrityksen tuote ratkaisee asiakkaan ongelmat, tuo tiettyjä etuja ja miksi asiakkaan pitäisi ostaa tuote ko. yritykseltä eikä kilpailijalta. Lisää tietoa toimivan arvolupauksen muodostamisesta löydät tästä blogikirjoituksesta: http://conversionxl.com/value-proposition-exampleshow-to-create/ Fork, avoimella lähdekoodilla toimiva CMS, eli sisällönhallintajärjestelmä, on hyvä esimerkki responsiivisesta suunnittelusta, jossa arvolupaus on visuaalisesti merkittävässä asemassa mobiilikävijöille. Mobiilikäyttäjä saa tietää heti sivustoa selatessaan, mikä Fork on ja mitkä ovat sen hyödyt. Arvolupauksen kyseenalainen osa on rock your world, joka ei varsinaisesti viestitä mitään. Sen korvaaminen esimerkiksi lauseella, jossa kerrotaan Forkin olevan suunnattu pienyrityksille, olisi huomattavasti informatiivisempi. Kumon, vaikka kysessä onkin erillinen mobiilisivu, on hyvä esimerkki yrityksestä, joka tuo arvolupauksensa esille oikealla tavalla. Vain sivua vilkaisemalla kävijällä on jo hyvä käsitys siitä, millainen palvelu on ja kenelle se on suunnattu.
Arvolupauksen korostamisen lisäksi konversioihin tähtäävien tiedotteiden, esim. ilmainen kuljetus tai tyytyväisyystakuu tulisi korostua muun sisällön joukosta. 2. Tee aktivointielementeistäsi näkyviä ja mobiilikäyttäytymiseen sopivia Tee aktivointielementeistäsi (call-to-action, CTA) niin suuria, että ne ylettyvät mobiilinäytön laidasta laitaan. Tämä takaa sen, että mobiilikäyttäjän ei tarvitse zoomata tai tarkentaa CTA-nappiin klikatakseen sitä. Muista myös käyttää CTA-elementtejäsi mobiilikäyttäytymisen mukaisesti. 15-sivuinen teksti valkoisella pohjalla saattaa olla hitti kannettavalla tietokoneella, mutta mobiilikävijä ei ole kiinnostunut lataamaan sitä ja lukemaan sitä pieneltä mobiilinäytöltä. Tilaa viikkokirjeemme tai tykkää meistä Facebookissa ovat sopivampia aktivointielementtjä mobiilikäyttäjille, jotka ovat liikkeessä. Mobiilikäyttäjille suunnattuja aktivointielementtejä on myös fiksua sijoittaa yhteystietojen yhteyteen, esim. soita tästä tai katso reittiohjeet. Nämä CTA:t käynnistävät puhelinsoiton tai avaavat karttasovelluksen ja näin saavat aikaan kohdistetumman mobiiliselauskokemuksen. Audi on tehnyt erittäin näkyvän CTA:n mobiilikäyttäjiensä landing page -sivuille.vaikka sivut eivät olekaan responsiiviset, ne ovat hyvä esimerkki hyvin sijoitetusta CTA:sta. Mobiilikävijöille ei jää epäselväksi, mitä heidän kannattaa tehdä seuraavaksi. 3. Käytä hyväksesi valokuvia ja videoita Leipätekstin lukeminen matkapuhelimella on tylsää ja vaikeaa, varsinkin kun ottaa huomioon sen, että suurin osa mobiilisurffailusta tapahtuu tekstailun ja sovellusten ohella. Valokuvat ja videot taas ovat erinomaisia tehokeinoja, joilla mobiilikävijöiden mielenkiinnon saa heräämään ja markkinoinnin sanoman välitettyä. Hyvä esimerkki responsiivisesta sivusta, joka käyttää valokuvia mobiilikävijöiden houkuttelemiseksi on Food Sense, ruokareseptiblogi. Kun kävijä etsii herkullisia reseptejä, on
todennäköisempää, että hän jää sivulle, joka käyttää tyylikkäitä valokuvia ruokahalun herättelemiseksi. Ota kuitenkin huomioon, että valokuvat ja videot vaikuttavat sivujen latausaikaan. Tutkimusten mukaan 67% ihmisistä odottaa mobiilisivujen latautuvan alle neljässä sekunnissa. Älä myöskään koskaan käytä flashia, koska kaikki mobiililaitteet eivät tue sitä, esimerkiksi ios. 4. Tee lomakkeistasi lyhyitä Pitkät lomakkeet ovat konversiofloppeja perinteisillä verkkosivuilla. Mobiilikäyttäjien kohdalla tilanne on vielä pahempi. Lomaketietojen täyttäminen älypuhelimella on työlästä ja epämiellyttävää. Tehosta siis mobiilikonversiota pitämällä lomakkeesi lyhyinä. Tarkastele jokaista lomakekenttää ja pohdi, onko se aivan välttämätön. Jos vastaus on ei, poista se. Voit pyytää lisätietoja varsinaisen konversion jälkeen sähköpostitse tai puhelimitse. 5-6 kenttää on lomakekenttien maksimimäärä, kun sivustoa optimoidaan mobiilikäyttäjille. Muodosta lomake myös niin, että kentän otsikko (mitä kenttään kirjoitetaan) on kentän yläpuolella, ei sen vieressä vasemmalla. Yritys, joka on tehnyt lomakkeiden täyttämisestä mahdollisimman helppoa on autonvuokrausyritys Hertz. Autonvuokraamisesta voi pyytää tarjouksen täyttämällä neljä lomakekenttää. Nimeä, osoitetta tai yhteystietoja ei tarvita; ne ovat epäolennaisia, kun pyydetään tarjousta. Nämä tiedot voidaan kerätä myöhemmin, kun asiakas on tehnyt varsinaisen ostopäätöksen.
5. Käytä valikkoja tai välilehtiä selaamisen välttämiseksi Jos pidät verkkokauppaa, kokeile lisätä valikkoja tai välilehtiä tuotesivuillesi. Välilehtien tarkoituksena on jäsentää tietoa kategorioittain, jotta mobiilikävijät löytävät etsimänsä nopeammin. Sen sijaan, että mobiilikävijät selaavat läpi sivun sisältöä löytääkseen tuotearvostelut, he voivat vain klikata Arvostelut-välilehteä tuotesivulla ja löytää tarvitsemansa sosiaalisen hyväksynnän tuotteen ostamiselle. Tria on opettavainen esimerkki perinteisen ja mobiilisivun eroista. Huomaa, kuinka perinteisen sivun alemmalla puoliskolla oleva sisältö on sijoitettu valikon alle mobiililla landing page -sivulla. Tria saa myös lisäpisteitä CTA:sta, joka on näkyvä ja hyvin sijoiteltu. Myös ilmainen kuljetus -tekstistä on tehty näkyvämpi tavallisiin verkkosivuihin verrattuna. Arvostelut on myös muutettu samaan tapaan palvelemaan mobiilikävijöitä. Yhteenveto Yhä suurempi määrä verkkosivuvierailuista tehdään älypuhelimella tai tabletilla. Tämä tarkoittaa sitä, että yritysten, jotka haluavat hyödyntää tätä trendiä, on tehostettava selailukokemustaan mobiililaitteille sopivaksi. Responsiivinen web design mahdollistaa sivujen skaalautumisen kävijän päätelaitteen mukaisesti, riippumatta siitä, onko laite kannettava, tabletti vai älypuhelin. Näin sivujen käyttöliittymästä on aina käyttäjäystävällinen, kun vierailija selaa sivuja. Yritykset, jotka ovat jo panostaneet mobiilikävijöiden selailukokemukseen ja siirtyneet responsiivisiin sivuihin ovat myös raportoineet mobiilikonversioiden kasvua. Kun sivuja optimoidaan responsiivisiksi mobiilikonversioita silmällä pitäen, on pidettävä huolta siitä, että arvolupaus ja muut konversiota tehostavat elementit ovat erittäin näkyviä. Käytä kuvia ja videoita leipätekstin sijasta ja tee lomakkeista mahdollisimman ytimekkäitä.