Főoldal > SEO Blog
Csentes Zoltán, SEO szakértő
Az elmúlt 20 évben az online marketing minden területén megfordultam, minden hárombetűs területet kipróbáltam, végül a keresőoptimalizálás és webanalitika szakértője lettem.
A Google egy Mobile UX Marathon keretében 6 héten keresztül osztott meg okosságokat mobil UX témakörben. A webinar során kiderült hogyan növelhető a felhasználói élmény a mobil weboldalaknál. Ebben a posztban összegyűjtöttem a legjobb tippeket, trükköket a témában.
A webinar első részéből kiderült, hogy világszinten a mobilos konverziós ráta 2.03%, míg ez desktopon 3.83%. Tehát az emberek még mindig inkább desktopon konvertálnak, mint mobilon. Ez két dologra vezethető vissza. Az egyik a lassú oldalbetöltés mobilon, a másik pedig a nem megfelelő UX. A technológia fejlődésével a sebességgel már nincs gond, viszont a UX még komoly probléma.
A probléma az alapoktól ered, ugyanis egy új weblap készítésekor még mindig először a desktop oldalt tervezzük meg és ebből konvertálunk mobiloldalt, pedig ezt már fordítva kellene csinálni!
Egy kutatás szerint a felhasználók 65%-a egyszerűen keres egy másik oldalt a vásárláshoz, ha a mi mobil oldalunk nem felhasználóbarát.
Első lépés - Nézzük meg a számokat
Menjünk fel a Google TestMySite oldalára és elemezzük le a mobiloldalunkat. A riport végén lehetőségünk van kiszámolni, hogy mennyi bevétel növekedést érnénk el csak azzal, ha az oldal gyorsabb lenne, mint most:
Hogyan kezdj hozzá
Nagyon fontos már a legelején tisztázni, hogy a mobil UX mindennel összefügg! Ott kell lennünk a marketingben, hogy tudjuk mik a céljaink, de képben kell lennünk a fejlesztők lehetőségeivel is. Éppen ezért ha UX-et tervezünk, akkor először is hívjuk össze a teljes csapatot. Marketing, Sales, fejlesztők, ügyfélszolgálat, SEO stb.
Határozzatok meg közösen egy betöltési idő maximumot, amihez az egész cég tartja magát. Senki sem helyezhet az oldalra annyi és olyan tartalmat, amivel ezt átlépné az oldal.
Tudatosítsuk mindenkiben, hogy a betöltési idő és a tartalom együtt határozza meg a UX-t. A kettő szorosan kapcsolódik és a feladat a legoptimálisabb egyensúly megtalálása.
A betöltési idő csökkentésére használhatunk például AMP-t. Az AMP egy framework (keretrendszer) ami szinte azonnal betölti az oldalt. Viszont a kontent optimalizálásához elengedhetetlen az A/B tesztelés. Folyamatosan A/B teszteljünk és mindent, amit lehet. Ne csak 5 évente újítsuk, redesign-oljuk az oldalt, hanem folyamatosan apránként:
Főoldal és Landing tippek, trükkök
A mobil hirdetés csak annyira hatékony, amennyire a mobil landing oldal.
Az első benyomás
Ha mobilra hirdetünk, akkor a mobil landing oldalunk legértékesebb és legfontosabb területe a hajtás fölötti terület. Ez az a képernyő terület, ami megjelenik a látogatónak anélkül, hogy még görgetnie vagy kattintania kellene. Ezen a területen kell meggyőznünk a látogatókat, hogy tőlünk vásároljanak.
A Google szerint a first screenen a következőket kell elhelyeznünk:
- ajánlat (legyen értéke, miért jó a vásárlónak)
- CTA (Call to Action - Vásárlásra ösztönző felirat)
- vizuális elemek (legyen kép a termékről)
Néhány tipp a mobil főoldalra:
- legyen a tartalom szellős, jól átlátható, könnyen kattintható
- vizuális+szöveges elemek együtt jelenjenek meg
- kerüljük a dinamikus carousel megjelenítéseket (lassítja a betöltést, hirdetésnek néznek ki)
- használjunk fix statikus ajánlót
Navigáció
- a navigációs panel legyen fix az oldal tetején (egyes tesztek alapján, ha a menüsor fixen látható növelhető az interakció)
- a navigációs panel alatt elhelyezhetünk további tabokat, pl fix kategóriákat. Lehet fix vagy görgethető
- ha a navigációs panelt az oldal alján jelenítjük meg, akkor 3-5 menüpont legyen benne, olyan menüpontok legyenek benne, amik a legfontosabbak
- az ikonok szöveges felirattal sokkal jobban kedveltek, mint csak a sima ikonok
Kereső
- mindig legyen elérhető a kereső
- a kereső gépeléskor javaslatokat jelenítsen meg
- a kereső tartalmát könnyen törölhesse a felhasználó
- sose mutass üres találatot (legyen javasolt termék, oldal)
- mutasson a kereső javaslatot elgépelés esetén is
- a kereső mezőbe kattintáskor rögtön jelenjen meg a billentyűzet
Filterek
- ha filtert használunk, akkor a tartalom real-time frissüljön
- filter esetén először mindig a teljes találatot mutassuk
- kerüljük a drop-down megoldást
- legyen bezárható a filter ablak
- ha tehetjük a szűrés gombra helyezzük a találatok számát
Listaoldalak
- legyen fix szűrő tab az oldal tetején vagy alján
- mutassunk korábbi népszerű szűréseket
- mutassuk a találatok számát
- könnyen módosítható legyen a szűrés
- a filterrel egy sorban legyen a sorbarendezés lehetőség
- legyen egyértelmű a látogatónak hogy ez egy listaoldal (legyen látható first view-ban már a második termék is)
- már a listaoldalon legyen látható a termék értékelése
- ne használj infinity-scroll megoldást listaoldalon (lássa a látogató hány termék van még)
- jelenítsünk meg real-time információkat a termékről (pl. elérhető mennyiség)
Termékoldalak
- segítsünk a látogatónak dönteni értékes információkkal
- jó minőségű, nagyítható képek (jelezzük a felhasználónak hogy zoomolható a kép)
- CTA gomb legyen az oldal alján fix
- CTA mellett további információk, amik segíthetnek a döntésben
- Ne sürgessük a látogatót!
- Használjunk másodlagos CTA gombokat pl. kedvencekhez hozzáadás
- kapcsolódó termékek megjelenítése
- ha kosárba teszünk terméket, akkor jelezzünk vissza a felhasználónak, hogy betette
- tegyük lehetővé a további vásárlást a kosár mellett
Kosár
- cél a visszafordulások csökkentése
- jelenítsünk meg egy process bart, hogy lássa a vásárló hol tart a folyamatban
- a process barban ikon és szöveg együtt szerepeljen
- ennél a szintnél már csak egy kilépési pontot hagyjunk a vásárlónak
- minden lépésnek legyen saját CTA neve a folyamatban
- a process bar sose nulláról induljon (lássa azt, hogy már mindjárt vége)
Formok
- minden form legelején hívjuk fel a figyelmet a pozitívumokra, előnyökre
- írjuk le mennyi ideig tart a kitöltés
- a választható mezőket sose drop-down jelenítsük meg, hanem egyszerűen legyenek kattinthatók (így spóroltunk egy kattintást)
- használjunk mobil-friendly naptárt
- a születési időhöz manuális beviteli mezőt használjunk
- real-time jelezzük vissza, ha hibás egy beviteli mező
- emeljük ki a hibás mezőket, írjuk le mi a baj
- használjunk auto-kitöltést ahol lehet
- szám beviteli mezőhöz számos billentyűzetet használjunk
- email mezőhöz alfanumerikus + @ billentyűket
Fizetés oldal
- használjunk ikonokat a fizetési lehetőségekhez és a biztonság hangsúlyozására
- erősítsük meg a fizetendő összeget
- Egyértelmű Fizetés gomb
- teszteljük a CTA gomb feliratát, színét
Mobil UX mérésre Google Analyticsben
A konverzió mérésén kívül rengeteg olyan információt is ki tudunk nyerni Analyticsből, ami segíthet minket a mobil UX fejlesztésében. Rögtön az első számunkra fontos információ, hogy milyen eszközről látogatják az oldalunkat:
1. Device riport
Audience> Mobile> Overview
Ebből a riportból láthatjuk, hogy mobilon, vagy desktopon látogatják-e gyakrabban az oldalt. Láthatjuk eszközök szerint a tranzakciókat és a bevételeket.
2. Benchmark riport
Audience> Benchmarking> Devices
Összehasonlíthatjuk az adatainkat az üzletág többi szereplőivel. Ebből láthatjuk, hogy a versenytársaknál mobilon vagy desktopon vásárolnak-e többen.
3. Site content riport
Behavior> Site Content> All pages
Rendezzük az oldalainkat fontossági sorrendbe. Válasszuk pl a mobil forgalom szegmenst és Page Value szerint láthatjuk, hogy melyek a legértékesebb oldalaink UX szempontból és mik azok, amiken javítani kell. Ha nincs ecommerce bekapcsolva, akkor nézzük a bounce rate adatokat.
4. Landing pages riport
Behavior> Site Content> Landing pages
a, Szegmentáljunk desktop és mobil forgalomra. Ezután láthatjuk a bounce rate adatokat eszköz szinten az egyes oldalakra. Azoknál az oldalaknál ahol a mobil bounce rate magasabb a desktopénál javítanunk kell a UX-en.
b, szegmentálhatunk forgalom alapján is (organic, paid) figyeljük a bounce rate mutatót.
5. Felbontás riport
Audience> Technology> Browser OS> Screen Resolution
Szegmentáljunk mobil forgalomra. A listában látszik, milyen felbontásban nézik az oldalunkat mobilról. Azokkal a felbontásokkal van gondunk ahol magas a session viszont alacsony a konverzió.
6. Keresés az oldalon
Behavior> Site Search> Usage
Nézzük meg eszköz alapján, hogyan használják a keresőt az oldalon. Hamar kiderülhet, hogy mobilon használják-e a kereső mezőt, de az is, hogy a keresőt használók sokkal jobban konvertálnak.
7. Kategória riport
Behavior> Site Content> All pages> Content Grouping
Hozzunk létre content groupingot. Ezzel felcímkézhetjük a kategóriákat. Ha mobil forgalom alapján szegmentálunk, akkor láthatjuk, hogy mobilon mik a leglátogatottabb kategóriák. Ez nagy segítség lehet a menünk sorrendjének definiálásában.
8. Funnel riport
onversions> E-commerce> Shopping Analysis> Shopping Behavior
Szegmentáljunk mobil forgalomra. Nézzük meg a vásárlási folyamatban hol van nagy lemorzsolódás. Ahol túl nagy a kilépés, ott UX beavatkozás szükséges.
CRO és A/B teszt
A CRO (Conversion Rate Optimization) konverziós ráta optimalizálás - hú de szarul hangzik magyarul - lényege, hogy leteszteljük mi jó a felhasználónak. Ha a felhasználó elégedett, akkor mi is elégedettek leszünk a konverziók növekedése által. A CRO lényege tehát a bevétel növelése - kutatásokkal alátámasztott adatok alapján - folyamatos optimalizálással. A CRO nem csak egy A/B tesztelés itt-ott, hanem sokkal több elemből álló folyamat.
Bővebben ebbe nem is mennék bele, mert nagyon száraz és unalmas téma, de ha komolyan érdekel, itt találod a videókat.
Most inkább az A/B tesztelésről ejtenék pár szót.
Egy érdekes tény, hogy ha A/B tesztelés nélkül végzünk egy változtatást a mobil oldalunkon, akkor 70% annak az esélye, hogy nem érünk el vele eredményt vagy rosszabb esetben még negatív hatással is találkozhatunk. Ezért nagyon fontos, hogy bármit változtatnánk az oldalon, előbb teszteljük!
Amikor mobilon A/B tesztelünk, akkor a tesztet mindig csak az oldal egy kisebb szekcióján végezzük. A teszteket szekcióról-szekcióra lépésenként végezzük. Mivel Google webinárról volt szó, így az ajánlott eszköz a teszteléshez a Google Optimize volt. Ha érdekel, hogyan működik és miket lehet vele csinálni, akkor nézd meg a videókat.