Mobiilin ostoskorin hylkäysaste verkkokaupoissa on 85,65 %, pöytäkoneella se on pienempi. Merkittävän osan erosta voi välttää oikeilla suunnitteluratkaisuilla. Tässä artikkelissa käydään läpi, mikä tekee kaupasta oikeasti mobiiliystävällisen ja miten pääset siihen sivu kerrallaan.
Mikä ero on mobiiliystävällisellä ja mobiilioptimoidulla kaupalla?
Mobiiliystävällinen tarkoittaa, että kauppa ei hajoa pienellä näytöllä. Teksti rivittyy oikein, kuvat mukautuvat kokoon ja painikkeita voi napauttaa. Tämä on vähimmäistaso. Google pitää sitä välttämättömänä indeksoinnille.
Mobiilioptimoitu tarkoittaa, että kauppa on suunniteltu muuntamaan mobiilissa. Asettelu, tietojen järjestys, napautuskohteet, kassa ja sivun nopeus on kaikki säädetty sen mukaan, miten ihmiset ostavat puhelimella. Kauppa voi olla mobiiliystävällinen ilman, että se on mobiilioptimoitu. Monet ovat juuri sellaisia.
Ero on tärkeä, koska mobiiliystävällisyys vie sinut mukaan peliin. Mobiilioptimointi tuo myynnin. Kauppa, joka ei hajoa puhelimella mutta latautuu 8 sekunnissa ja jonka kassalomake on tehty hiirelle ja näppäimistölle, on teknisesti mobiiliystävällinen. Se ei ole mobiilioptimoitu. Jokainen parannus, jonka teet sen jälkeen kun mikään ei enää ole rikki, parantaa konversioasteesi.
Miksi Googlen mobile-first-indeksointi muuttaa kaiken
Google käyttää mobile-first-indeksointia. Se tarkoittaa, että Google arvioi kauppasi mobiiliversion perusteella, ei pöytäkoneversion. Jos mobiilikaupassasi on vähemmän sisältöä, vähemmän sisäisiä linkkejä tai kuvia, jotka eivät lataudu, Googlen käsitys kaupastasi perustuu näihin puutteisiin.
Tällä on suora vaikutus hakusijoituksiisi. Kauppa, joka näyttää pöytäkoneella täydeltä mutta on mobiilissa karsittu, sijoittuu sen mukaan, mitä mobiiliversio näyttää. Jos tuotekuvauksia lyhennetään mobiilissa, Google indeksoi lyhennetyn version. Jos navigointilinkit on piilotettu kutistettuun valikkoon, Google ei välttämättä käy niitä läpi yhtä hyvin.
Käytännössä mobiilin suorituskyky ei ole vain käyttökokemuksen kysymys. Se on myös SEO-kysymys. Kun parannat mobiilikauppaasi, parannat hakusijoituksiasi. Jokainen mobiilikorjaus tekee kaksinkertaisen työn.
Core Web Vitals ja miten ne vaikuttavat sijoituksiisi
Core Web Vitals on joukko suorituskykymittareita, joita Google käyttää sijoitussignaaleina. Largest Contentful Paint mittaa, kuinka kauan sivun pääsisällön lataus kestää. Interaction to Next Paint mittaa, kuinka nopeasti sivu reagoi käyttäjän toimiin. Cumulative Layout Shift mittaa, kuinka paljon sivun asettelu siirtyy yllättäen latauksen aikana.
Kaikilla kolmella on merkitystä mobiilissa, jossa verkon nopeus ja suorittimen teho ovat pienempiä kuin pöytäkoneella. Tulos, joka on pöytäkoneen selaimessa hyväksyttävä, voi epäonnistua keskiluokan puhelimella 4G-yhteydellä. Juuri sellaista puhelinta suuri osa kävijöistäsi käyttää.
Huonot Core Web Vitals -tulokset heikentävät sekä sijoituksia että konversiota erikseen. Tutkimusten mukaan jokainen lisäsekunti mobiilisivun latausajassa laskee konversioastetta 4,42 %. Sivu, joka latautuu 5 sekunnissa 2 sekunnin sijaan, voi jo menettää puolet mahdollisista konversioistaan ennen kuin kukaan on nähnyt tuotteitasi.
Mobiilisuunnittelu sivutyypeittäin
Jokaisella kaupan sivutyypillä on omat mobiiliprioriteettinsa. Jos kaikkia sivuja kohdellaan samalla tavalla, yksikään niistä ei ole kunnolla optimoitu.
Etusivu
Mobiilissa etusivun täytyy kertoa, mitä kauppa myy ja minne kävijän kannattaa mennä, jo ensimmäisellä vierityksellä. Pöytäkoneen etusivuilla on usein leveitä pääosioita, joissa on monta elementtiä. Mobiilissa sama osio täyttää koko näytön. Jos se ei heti kerro hyötyä ja kutsu toimimaan, kävijä vierittää eteenpäin tai poistuu.
Pidä päävalikko helposti saatavilla ilman montaa napautusta. Hampurilaisvalikko on vakio, mutta sen sisällä pitäisi olla vain ne kategoriat, joita ensikertalainen oikeasti tarvitsee. Piilotettu navigointi on mobiilissa näkymätöntä navigointia.
Kategoriasivut
Mobiilin kategoriasivujen täytyy tasapainottaa tuotteiden määrä ja käytettävyys. Kaksisarakkeinen ruudukko toimii useimmille tuotetyypeille. Yksisarakkeinen lista sopii paremmin tuotteille, joissa kuvan yksityiskohdilla on väliä. Molemmat ovat parempia kuin kolmisarakkeinen ruudukko, jossa tuotekuvat jäävät liian pieniksi useimmilla puhelimilla.
Suodattimet ja lajittelu ovat kategoriasivuilla kriittisiä ja mobiilissa hankalia. Suodatinpaneeli, joka aukeaa koko näytön peittona sivupalkin sijaan, tekee suodattamisesta käyttökelpoista pienellä näytöllä. Lue koko opas aiheesta mikä on kategoriasivu ja miten sellaisen suunnittelee, niin saat tarkemman kuvan kategoriasivun rakenteesta.
Tuotesivut
Mobiilin tuotesivun täytyy vastata nopeasti kolmeen kysymykseen. Mikä tämä on? Paljonko se maksaa? Saanko sen helposti? Pääkuvan pitää latautua heti ja sitä pitää voida pyyhkäistä. Hinnan, vaihtoehtojen valinnan ja ostoskoriin lisäämisen painikkeen pitää näkyä ilman vierittämistä.
Aseta ostoskoriin lisäämisen painike mobiilissa näkyviin heti sivun alkuun tai käytä vähintään kiinteää painiketta, joka seuraa käyttäjää, kun hän vierittää tuotekuvausta. Asiakas, jonka täytyy vierittää takaisin ylös lisätäkseen tuotteen koriin, saa ylimääräisen tilaisuuden muuttaa mielensä.
Kassa
Kassassa mobiilin hylkäysaste on korkein. Mitä vähemmän vaiheita ja kenttiä tarvitaan, sitä parempi. Vieraskassa poistaa tilin luomisen esteen, joka saa monet mobiilikäyttäjät luopumaan ostoksesta. Lue koko opas aiheesta miten suunnittelet kassasivun, joka vähentää poistumisia, niin saat yksityiskohtaiset kassan optimointiohjeet.
Peukalon ulottuvuus ja ergonominen suunnittelu
Ihmiset käyttävät puhelinta peukaloillaan, ja peukalo yltää mukavasti vain tietyille alueille. Näytön alakeskusta on helpoin tavoittaa. Yläkulmat ovat vaikeimmat. Tämä ei ole pikkuasia. Se on ergonominen tosiasia, joka vaikuttaa suoraan siihen, käyttävätkö asiakkaat kaupan tärkeimpiä elementtejä.
Aseta tärkeimmät toimintopainikkeet, kuten ostoskoriin lisääminen, siirtyminen kassalle ja suodattimen käyttöönotto, alakeskelle, jossa peukalo luontevasti lepää. Näytön alareunaan sijoitetut navigointipalkit ovat isoilla puhelimilla helpommin käytettäviä kuin yläpalkit. Yläpalkki on pöytäkoneen käytäntö, joka ei sovi yhden käden mobiilikäyttöön.
Pienet napautuskohteet ovat yleinen mobiilin käytettävyysongelma. Painikkeet ja linkit, joita on helppo klikata hiiren osoittimella, on vaikea napauttaa tarkasti sormenpäällä. Google suosittelee vähintään 48 x 48 pikselin napautuskohteita ja riittävää väliä vierekkäisten kohteiden välillä. Liian pienet kohteet johtavat ohi napautuksiin, turhautumiseen ja poistumisiin.
Mobiilikassa ja lomakkeiden optimointi
Lomakkeet ovat yksi suurimmista mobiilikassan kitkan lähteistä. Näppäimistölle ja hiirelle suunniteltu lomake muuttuu hitaaksi ja virheherkäksi, kun sitä täytetään kosketusnäytöllä ja automaattinen korjaus häiritsee. Useat konkreettiset parannukset helpottavat lomakkeen täyttämistä mobiilissa merkittävästi.
Käytä oikeita näppäimistötyyppejä
HTML-kenttien tyypit kertovat mobiiliselaimelle, mikä näppäimistö näytetään. Sähköpostikenttä, jossa on email-tyyppi, näyttää näppäimistön, jossa @-merkki on selvästi esillä. Puhelinnumerokenttä, jossa on tel-tyyppi, näyttää numeronäppäimistön. Oletustekstityyppinen kenttä näyttää täyden näppäimistön kaikelle, myös puhelinnumeroille ja postinumeroille.
Väärän kenttätyypin käyttö lisää turhaa kitkaa. Asiakkaan täytyy vaihtaa näppäimistöä käsin tai kirjoittaa väärällä asettelulla. Korjaus on yhden attribuutin muutos jokaiseen lomakekenttään. Se on yksi mobiilikassan parhaista parannuksista vaivaan nähden.
Vähennä lomakekenttiä
Jokainen kassalomakkeen kenttä on mobiilissa kitkakohta. Käy kassasi läpi ja poista jokainen kenttä, joka ei ole välttämätön kaupan päättämiseksi. Etunimi- ja sukunimikentät voi yleensä yhdistää. Titteli-kenttiä tarvitaan harvoin. Useita osoiterivejä voi usein korvata yhdellä osoitehaulla.
Jos tarvitset lisätietoja markkinointia tai analytiikkaa varten, harkitse niiden keräämistä oston jälkeen eikä kassalla. Oston jälkeinen kysely tuottaa samat tiedot ilman hylkäysriskiä.
Tue automaattista täyttöä
Nykyaikaiset mobiiliselaimet ja salasanahallinnat voivat täyttää kassakentät automaattisesti, jos lomake on rakennettu oikein. Jokaisen kentän autocomplete-attribuutti kertoo selaimelle, minkä tyyppisestä tiedosta on kyse. Kenttä, jolla on oikea autocomplete-arvo, täytetään selaimessa automaattisesti, jos asiakas on tallentanut tietonsa. Automaattinen täyttö voi lyhentää kassaan kuluvaa aikaa mobiilissa merkittävästi, ja sillä on todellista merkitystä sille, viekö asiakas oston loppuun.
Tarjoa mobiilimaksutapoja
Mobiilimaksutavat, kuten digitaaliset lompakot, antavat asiakkaan maksaa biometrisellä tunnistuksella sen sijaan, että hän syöttäisi korttitiedot käsin. Puhelimella asioivalle asiakkaalle on merkittävä helpotus, kun 16-numeroista korttinumeroa, voimassaoloaikaa ja turvakoodia ei tarvitse kirjoittaa. Kaupat, jotka tarjoavat näitä maksutapoja tavallisten korttimaksujen rinnalla, saavat korkeamman mobiilikonversion, koska kitka poistuu arkaluonteisimmasta vaiheesta.
Sivun nopeus mobiilissa
Sivun nopeus vaikuttaa mobiilikauppoihin pöytäkonekauppoja enemmän, koska mobiiliyhteydet ovat hitaampia ja suorittimet heikompia. Sivu, joka latautuu 2 sekunnissa laajakaistalla, voi latautua 6 sekunnissa mobiilidatalla. Tutkimusten mukaan 53 % mobiilikävijöistä odottaa sivujen latautuvan alle 3 sekunnissa. Ne, jotka eivät saa sitä, lähtevät.
Pakkaa kuvat
Kuvat ovat suurin yksittäinen tekijä mobiilisivun latausajassa. Jokainen tuotekuva, bannerikuva ja tunnelmakuva pitää pakata ennen kuin se päätyy selaimeen. Nykyaikaiset kuvaformaatit tuottavat selvästi pienempiä tiedostoja kuin vanhat formaatit samalla visuaalisella laadulla.
Lazy loading lykkää näkymän alapuolella olevien kuvien latausta, kunnes asiakas vierittää niitä kohti. Sivun näkyvä osa latautuu heti. Kaikki sen alapuolella latautuu vasta tarvittaessa. Tämä tekniikka parantaa koettua latausnopeutta, vaikka sivun kokonaispaino pysyisi samana.
Vähennä skriptejä
Kolmannen osapuolen skriptit, kuten analytiikan seurantakoodit, chat-widgetit, markkinointipikselit ja arvostelutyökalut, lisäävät latausaikaa jokaisella sivulla. Jokainen skripti pitää ladata, jäsentää ja suorittaa. Mobiilissa tämä kestää pidempään kuin pöytäkoneella. Käy kaupassasi toimivat skriptit läpi ja poista ne, jotka eivät aktiivisesti tue myyntiä tai asiakaskokemusta.
Tarpeelliset skriptit voi usein ladata asynkronisesti, eli ne latautuvat sivun pääsisällön jälkeen eivätkä ennen sitä. Näin sivu on käytettävissä ennen kuin skriptit ovat latautuneet, mikä parantaa Core Web Vitals -tuloksia ja asiakkaan kokemusta.
Testaa oikeilla laitteilla
Selaimen kehittäjätyökaluissa on mobiilisimulaattori, jolla näet kauppasi kuin olisit puhelimella. Simulaattori sopii asettelun tarkistamiseen, mutta se ei toista tarkasti oikean laitteen suorituskykyä oikeassa verkossa. Keskiluokan puhelin 4G-yhteydellä käyttäytyy eri tavalla kuin simulaattori nopealla pöytäkoneella.
Testaa oikeilla laitteilla säännöllisesti. Ongelmat, jotka eivät näy simulaattorissa, kuten kosketustapahtumien viiveet, fonttien _blocked_öintivirheet ja tietyt asettelun viat, tulevat heti esiin oikeilla laitteilla. Jos sinulla ei ole käytössäsi montaa laitetta, verkossa on ilmaisia työkaluja, jotka näyttävät kauppasi oikean laitteiston kautta oikeissa verkkoyhteyksissä.
Mobiili-SEO nopeuden lisäksi
Nopeudesta ja Core Web Vitalsista puhutaan mobiili-SEO:ssa eniten, mutta useat muutkin tekijät vaikuttavat siihen, miten hyvin kauppasi sijoittuu mobiilihaun tuloksissa.
Vältä välisivuja ja peittoja, jotka peittävät pääsisällön mobiilissa. Heti latauksen jälkeen sivun estävät ponnahdusikkunat ja peitot saavat rangaistuksen Googlen mobiilihaun algoritmissa. Jos käytät sähköpostin keräämisen ponnahdusikkunaa tai evästebanneria, se ei saa peittää pääsisältöä ennen kuin kävijä on ehtinyt nähdä sivun.
Varmista, että kaikki pöytäkonekaupassasi näkyvä sisältö on saatavilla myös mobiilissa. Jos sisältö on mobiilissa piilotettu lue lisää -painikkeen taakse, Google voi indeksoida suljetun tilan koko tekstin sijaan. Tuotekuvausten ja kategoriasisällön, jotka vaikuttavat sijoituksiisi, koko teksti pitää voida lukea mobiilissa ilman lisänapautuksia.
Sisäisten linkkien pitää olla samat pöytäkoneella ja mobiilissa. Jos pöytäkonekaupassasi on näkyvä aiheeseen liittyvien tuotteiden osio, jossa on linkkejä muihin kategorioihin, mobiiliversiossa pitää olla samat linkit. Navigointilinkit, joiden avulla Google ymmärtää kauppasi rakenteen, eivät saa kadota mobiilissa.
Miten WEMASY hoitaa mobiilin
WEMASYn verkkokauppajärjestelmä tekee responsiiviset kauppasivut, jotka mukautuvat oletuksena mihin tahansa näytön kokoon. Tuotesivut, kategoriasivut ja kassa on suunniteltu täyttämään Googlen mobile-first-indeksoinnin vaatimukset. Kassassa on tuki mobiilimaksutavoille ja oikein tyypitetyille lomakekentille. Core Web Vitals -suorituskyky on rakennettu järjestelmän web-hotellin ja sisällön jakelun infrastruktuuriin, eikä sitä tarvitse optimoida käsin. Katso, mitä kukin paketti sisältää, hinnastosta.
Usein kysytyt kysymykset
Miten tarkistan, onko kauppani mobiiliystävällinen?
Googlen Search Consolen Mobile Usability -raportti nostaa esiin sivujesi tietyt ongelmat, kuten liian pienen tekstin, liian lähekkäin olevat napautettavat elementit tai näyttöä leveämmän sisällön. PageSpeed Insights näyttää Core Web Vitals -tulokset erikseen mobiilille ja pöytäkoneelle. Molemmat työkalut ovat ilmaisia ja antavat konkreettisia, toimintakelpoisia tuloksia pelkän läpäisty tai hylätty -arvion sijaan. WEMASY-sivustonrakentajalla voit ottaa tämän käyttöön suoraan kaupassasi.
Vaikuttaako mobiilisuunnittelu Google-sijoituksiini?
Kyllä, suoraan. Google käyttää mobile-first-indeksointia, eli kauppasi sijoitus perustuu sen mobiiliversioon. Core Web Vitals -tulokset, joihin vaikuttavat mobiilin suorituskykytekijät kuten latausnopeus ja asettelun vakaus, ovat vahvistettu sijoitussignaali. Mobiilissa hyvin toimivalla kaupalla on sijoituksissa etu verrattuna kauppaan, joka ei toimi, vaikka pöytäkoneversiot olisivat samanlaiset.
Mikä on yleisin mobiilikassan ongelma?
Yleisin ongelma on lomakkeiden kitka. Hiirelle ja näppäimistölle suunnitellut kassalomakkeet vaativat kosketusnäytöllä liikaa vaivaa. Tehokkaimmat korjaukset ovat: oikeiden kenttätyyppien käyttö, jotta oikea näppäimistö aukeaa, kenttien määrän vähentäminen, automaattisen täytön käyttöönotto sekä mobiilimaksutavat, joiden ansiosta korttitietoja ei tarvitse syöttää käsin. Näiden neljän asian korjaaminen parantaa yleensä mitattavasti mobiilikassan läpimenoastetta.
Miten mobiilisivun nopeus vaikuttaa myyntiin?
Yhteys on suora ja hyvin dokumentoitu. Tutkimusten mukaan konversioaste laskee noin 4 % jokaista lisäsekuntia latausajassa kohti. Kauppa, joka latautuu 1 sekunnissa, konvertoi selvästi paremmin kuin sama kauppa, joka latautuu 4 sekunnissa. Erityisesti mobiilikaupoissa, joissa verkko-olosuhteet vaihtelevat ja kävijät hylkäävät hitaat kokemukset nopeammin, sivun nopeuden parannukset tuottavat usein nopeimman tuoton kaikista teknisistä investoinneista.
Pitäisikö minun rakentaa erillinen mobiilikauppa vai käyttää responsiivista suunnittelua?
Responsiivinen suunnittelu, jossa yksi kauppa mukauttaa asettelunsa näytön koon mukaan, on vakiotapa ja se, mitä Google suosittelee. Erilliset mobiilisivustot lisäävät ylläpitotyötä, voivat aiheuttaa indeksoinnin epäjohdonmukaisuuksia ja ne on vaikeampi pitää synkronoituna, kun päivität tuotteita ja sisältöä. Ellei erillisen mobiilikokemuksen ylläpitoon ole erityistä toiminnallista syytä, responsiivinen suunnittelu yhdessä osoitteessa on oikea valinta.
Miten vähennän mobiilin ostoskorin hylkäämistä?
Mobiilin ostoskorin hylkääminen johtuu kitkan ja häiriötekijöiden yhdistelmästä. Tehokkaimmat keinot ovat: yksinkertaistettu kassa, jossa on mahdollisimman vähän vaiheita ja kenttiä, vieraskassa, joka poistaa tilin luomisen esteen, mobiilimaksutavat, jotka poistavat korttitietojen käsin syöttämisen, ja nopeasti latautuva kassasivu. Hylättyjen ostoskorien sähköpostiuudelleenkohdistus toimii myös hyvin niiden istuntojen palauttamiseen, joissa asiakas ei vienyt ostoa loppuun yhdellä kerralla.