A kiváló mobilos felhasználói élmény 10 alapszabálya
A kiváló mobilos felhasználói élmény 10 alapszabálya
Van mobilos webhelyed, igaz? Reszponzív kialakítású, vagy egy pluginnal oldod meg, hogy jól nézzen ki? De konvertál így egyáltalán? Mivel a mobilról internetezők száma drasztikusan megnőtt az elmúlt évek során, webhelyed mobilverziójának felhasználói élménye (röviden „mobil UX”) épp annyi figyelmet kell kapjon, mint amennyit az asztali verzió. Erre nem csak a felhasználók miatt van szükség, hanem azért is, mert a Google már a mobilos verziójuk alapján indexeli és értékeli a webhelyeket. Az alábbiakban 10 tippet olvashatsz arról, hogy hogyan kínálhatsz jobb felhasználói élményt webhelyed mobilos verzióján.
Fontos azonban, hogy mindenek előtt tisztázzunk valamit. Habár az alábbiakban említett pontok mind vonatkoznak táblagépekre is, a tippek kifejezetten a mobilos UX szemszögéből íródtak. 2020-ban azonban nem csak a telefonokat kell észben tartanod tartalmaid elkészítésekor, hiszen lehet, hogy valaki épp okosórájáról, vagy TV-jén olvassa majd őket!
1. Feladatalapú design
Mobilos webhelyed, illetve annak szerkezetének kialakításakor a felhasználó igényeit tartsd szem előtt, és persze a mobil SEO-ról se feledkezz meg. Látogatód mobiltelefont használ. Lehet, hogy épp úton van valahová, és meg akar nézni valamit webhelyeden. Mi lehet az?
Derítsd ki, hogy miket csinálnak leggyakrabban a látogatók webhelyeden (ehhez nézd meg a Google Analytics statisztikákat, gondolkodj el céged általános ügyfélköréről, vagy készíts részletes teszteket). Tudd meg, hogy mik a fő feladatok, tevékenységek mobilos webhelyeden.
Gerry McGovern feladatszakértő szerint a fő feladatok azt a néhány (általában kevesebb, mint 10, gyakran kevesebb, mint 5) feladatot jelentik, amelyek a legfontosabbak a felhasználóid számára. Ezek azok a feladatok, amiket gyorsan szeretnének tudni elvégezni webhelyeden. Optimalizáld tehát mobilos webhelyedet úgy, hogy látogatóid könnyedén és gyorsan elérhessék ezeket a feladatokat.
Az emberek okostelefonján temérdek alkalmazás található, amik jó részét rendszeresen használják. Éppen ezért egy mobileszközön a felhasználók talán nehezebben összpontosítanak majd webhelyedre. Persze a figyelemelterelő tényezők mindenütt jelen vannak, nem csak mobilokon. A cél tehát egyszerű, gyors lehetőségeket kínálni nekik feladataik elvégzésére, mielőtt egy másik alkalmazás elvonná a figyelmüket.
2. Kínálj egy letisztult menüt és egy keresőfunkciót
A mobilos felhasználói élmény egyik legfontosabb eleme a keresés. Lehetőséget kell biztosítanod felhasználóidnak, hogy bármikor azonnal keresést indíthassanak webhelyeden. A keresés funkciónak minden oldalon jelen kell lennie.
Habár a cél mindig az, hogy egyszerűen használható webhelyet kínálj látogatóidnak, mindig lesznek olyan elemek, amelyek nem passzolnak természetesen tartalmaidba. A kereséssel többek között ezeket az elemeket is elérhetik majd felhasználóid.
Ha ingatlanokkal foglalkozol, vagy ruhákat árulsz az interneten, akkor valószínűleg épp, hogy a keresés webhelyed legfontosabb funkciója. Ez esetben főleg fontos, hogy a keresés a tartalomban helyezkedjen el, illetve legyen elérhető egy gombnyomásra azokon az oldalakon, amelyeken nem tölt be főszerepet.
Egy fontos dolog a mobilos felhasználói élmény és a keresés kapcsolatáról: az csak egy dolog, hogy keresést kínálsz webhelyeden – az már egészen más kérdés, hogy a találatokat felsoroló oldalak is jól néznek-e ki. Elsődlegesen az eredmények relevancia szerint kell, hogy rendeződjenek a felhasználónak, és egyértelműen el is különöljenek egymástól.
3. Nem lesz szükség elválasztókra
Ha már az elkülönítésről van szó – ez nem jelenti azt, hogy mobilos webhelyeden mindenféle elválasztót kellene használnod. Ezek mind helyet foglalnak a képernyőn, ami rossz hatással lehet a felhasználói élményre.
Ehelyett inkább próbálj olyan stílust adni elemeidnek, hogy szemmel láthatóan különbözzenek egymástól – és ne legyen szükség elválasztókra. Használj kereteket, címsorokat, stb. Rengeteget tehetsz felhasználói élményedért anélkül, hogy felesleges elemekkel használnád fel a rendelkezésre álló helyet.
Na persze nem is tilos használni őket, de ügyelj rá, hogy elférjenek a helyükön és ne zavarják meg a látogatókat a feladataik elvégzésében.
4. Használj rövid űrlapokat
Akárcsak asztali webhelyed, úgy annak mobilos verziója is a konverziókra kell, hogy törekedjen. Ezek lehetnek termékeid értékesítései, vagy árajánlatkérések szolgáltatásaidra.
A hírleveledre való feliratkozás vagy egy kapcsolattartási űrlap kitöltése mind olyan feladatok, amelyek felhasználói beavatkozást igényelnek. Egy hatoldalas űrlap könnyedén tönkreteheti a felhasználói élményeket. Az emberek talán kitöltik majd, de ne számíts rá, hogy sokaknak lesz türelme hozzá.
Az ideális mobil UX érdekében a lehető legrövidebb űrlapokat kell felhasználóid elé raknod. Tüntess el belőlük mindent, amire nincs igazán szükséged. Ha például egy hírlevélről van szó, akkor elég csak egy email cím. Ha árajánlatról, akkor email cím és vezetéknél. A felhasználó vásárol? Akkor szállítási és számlázási cím (és legyen opció egy kattintással átmásolni a szállításit a számlázásiba, az egyszerűség kedvéért).
5. Fogd vissza magad
Meglehet, hogy webhelyeden jól mutatnak a különböző színek és hatalmas képek, de a mobilos verzión ezeket biztosan másképp látják majd az emberek. Kevesebb lesz a fókusz. Persze nem kell, hogy webhelyed csak fekete és fehér legyen, de egy fehér háttér, fekete betűkkel, illetve egy vagy két egymással jól működő színnel bőven elegendő az ideális mobilos felhasználói élményhez.
Fontos arra is ügyelned, hogy mobilos és asztali webhelyed tartalmai megegyezzenek egymással – tehát ugyan azt az élményt kínáld mobilon, mint amit asztali rendszereken is. Ez nem csak a tartalomra vonatkozik persze, hanem a designra is. Összességében ítéld meg úgy webhelyedet, ahogy a Google is teszi: mobil-első hozzáállással. Ha most tervezed átalakítani webhelyedet, akkor kezdd a mobilos verzióval!
A visszafogottsághoz hozzátartozik a látványos animációk kiiktatása is. Minden nem létfontosságú JavaScript csak feleslegesen lassítja az oldal betöltését és működését, különösen régebbi, vagy gyengébb okostelefonokon.
6. Figyelj oda a gombok nyomható területére
Sajnos 2020-ban erre még mindig emlékeztetni kell jó néhány webhely tulajdonosát. A mobilos webhelyeket többnyire ujjakkal szokás böngészni és használni, és a gombok gyakran túl kicsik ahhoz, hogy könnyedén meg lehessen nyomni őket. A Google egyik cikkében bővebben is olvashatsz erről. Valójában minden koppintható elemre vonatkozik, hogy könnyedén lenyomhatók kell legyenek.
A fent említett Google cikkben a következő olvasható:
„A minimum ajánlott érintési célpont mérete nagyjából 48 eszközfüggetlen képpont egy megfelelően beállított mobilos viewporttal rendelkező webhelyen. Például habár egy ikonnak talán csak 24 képpontos a szélessége és a magassága, a maradék helyet is kihasználhatod arra, hogy az érintési célpont méretét 48 képpontosra bővítsd. A 48x48 képpontos terület nagyjából 9mm-t jelent, ami egy átlagos személy ujjbegyének a mérete.”
7. Ne használj túl sok betűméretet
A tipográfia jelentősen befolyásolja egy mobilos webhely felhasználói élményét. Nem csak a választott betűkészletek fontosak, hanem a szövegek, feliratok méretére is oda kell figyelned. Továbbá nem használhatod ugyan azokat a betűméreteket mobilon, mint amiket webhelyed asztali verzióján, ennek pedig két oka van:
- A mobiloknak apró kijelzőjük van a monitorokhoz, laptopokhoz képest. Nem ideális, ha a cím az egész oldalt kitölti – a cikk szövege már az első képernyőn el kell kezdődjön, hogy ne kelljen lejjebb görgetni az első sorokért. Persze a főszöveg betűtípusa sem szabad, hogy túl kicsi legyen, különben a felhasználóknak nagyítaniuk kell majd az oldalon, hogy el tudják olvasni.
- Ha több, mint három betűméretet használsz, azzal csak felfordulást okozol majd oldalaidon. A méretbeli különbségek sokkal láthatóbbak lesznek, mint az asztali kijelzőkön, ezért legfeljebb kettő (talán három) különböző méretet használj csupán.
A Google Mobilbarát tesztje a betűméreteket is figyelembe veszi, habár csak a főszöveget vizsgálja ilyen szempontból.
8. Optimalizálj sebességre
A mobilos felhasználói élmény másik nagyon fontos tényezője a sebesség. Egy weboldal sebességét többféle eszközzel (pl. Google PageSpeed Insights) is lemérheted.
Webhelyed sebességét számos módszerrel javíthatod. Az első magától értetődő: optimalizáld képeidet. Legalább annyira ügyelj, hogy képeid fájlméretét egy erre alkalmas eszközzel (Sqoosh, TinyPNG, stb.) lecsökkentsd, mielőtt feltöltenéd őket webhelyedre.
Továbbá összevonhatod és „minifikálhatod” CSS és JavaScript fájljaidat, amikre szükség van oldalaid működéséhez. Minél gyorsabban tölti be ezeket az elemeket egy böngésző, annál gyorsabbnak tűnik majd oldalad működése, ami javítja a felhasználói élményt. Na persze sosem árt, ha minőségi webtárhelyet használsz.
A webhelysebesség egy felkapott téma a Google portáján. A keresőóriás nemrégiben bejelentette az új „alapvető webes vitals-mutatókat”, amelyek segítségével a Google megállapíthatja majd, hogy egy-egy oldal milyen élményeket nyújt a felhasználóknak. 2021-től ezek a mutatók a mobilos webhelyek értékelésében és rangsorolásában is megjelennek majd.
Persze a sebesség csak egy ilyen élményfaktor a sok közül – bővebben itt olvashatsz az új alapvető webes vitals-mutatókról.
9. Ne vidd túlzásba a hirdetéseket
Sok webhely hirdetésekből tartja fenn magát, ami manapság egy teljesen elfogadott szokás. Azonban nem éri meg átesni a ló túloldalára, és elijeszteni a felhasználókat mindenféle felugró ablakkal és hasonló reklámmal. Bizonyára te sem várod el komolyan, hogy egy látogató rögtön feliratkozzon hírleveledre, amikor még csak először jár webhelyeden, és talán semmit sem tud márkádról.
Ügyelj továbbá arra is, hogy a dolgok megfelelően megjelenjenek, mielőtt betöltenéd hirdetéseidet és CTA-idat. Azonban még ezek is legyenek visszafogottak, nem pedig tolakodók. Ha egy szilárd kapcsolatot szeretnél kialakítani az látogatókkal, akkor ebben nem sokat segít majd, ha folyamatosan önreklámokkal bombázod, valahányszor új oldalra lép át webhelyeden (vagy amikor először megérkezik oda).
Mindez nem csak rossz felhasználói élményt eredményez, hanem még a Google is rossz szemmel nézi.
10. Rendszeresen teszteld webhelyed mobilos felhasználói élményét
Ha reszponzív webhelyet kínálsz látogatóidnak (ami manapság már egyébként is alapfeltétel), akkor biztosítanod kell, hogy minden változtatást letesztelsz a mobilos ész az asztali verzión is. A trendek változnak, a SEO algoritmusok fejlődnek, és a felhasználói igények is átalakulnak időnként. Igyekezz lépést tartani ezekkel, és ne felejtsd el rendszeresen tesztelni webhelyedet minden népszerűbb platformon!
Írta: Mocsonoky Csaba | A cikk forrása eredetileg angol nyelven jelent meg a Yoast.com-on: https://yoast.com/improve-mobile-ux/
Tartalomjegyzék
1. Feladatalapú design2. Kínálj egy letisztult menüt és egy keresőfunkciót
3. Nem lesz szükség elválasztókra
4. Használj rövid űrlapokat
5. Fogd vissza magad
6. Figyelj oda a gombok nyomható területére
7. Ne használj túl sok betűméretet
8. Optimalizálj sebességre
9. Ne vidd túlzásba a hirdetéseket
10. Rendszeresen teszteld webhelyed mobilos felhasználói élményét
MARKETING SZÓTÁR
Online marketing tanácsadó 1998-óta
Diplomáim megszerzése után nem tudtam eldönteni, hogy a tudományos pályán maradjak, vagy helyezzem marketing iránti érdeklődésemet üzleti alapokra. Legyen hát a kettő együtt, gondoltam. Levelezőn kezdtem neki a marketing doktori elvégzésének, oktattam az egyetemen, közben megalapítottam a Marketing Professzorok online marketing ügynökséget. Az eltelt időszakban több, mint 500 KKV és több tucat nagyvállalat marketing kommunikációjában játszottam szerepet, mint online marketing tanácsadó. A kutatást sem adtam fel, csapatommal egy olyan marketing kommunikációs stratégiát építettünk fel, mely keresőoptimalizálás (SEO), Social Media Marketing és tartalommarketing (publishing) alapokon szinte minden iparágban eredményesen és költséghatékonyan bevethető. Amennyiben eljutottál már oda, hogy tudod, a Ti cégeteknél is egy ilyen hatékony marketing kommunikációs stratégiára van szükséged, kérd ajánlatunkat! Ha még nem érzed az Internet elsöprő erejét, olvasgasd cikkeinket - de tudom, egyszer így is eljön a Te időd!
Online marketing tanácsadás
Az online marketing nem egyezik meg az offline marketinggel. Egészen másak a reakcióidők, a reakciók, az eszközök. Legyen szó kisvállalkozásról vagy egy gyógyszergyár több brandjéről, az eddig bevált sales és marketing nem adaptálható az online világra. Nem elég egy cégbemutatkozó, sőt nem elég egy jól megírt marketing szöveg sem. Az Interneten nem csak a potenciális vevőknek írunk, a keresőmotorokat és az Internetezők szokásait is figyelembe kell vennünk. Ha viszont ezeket eltaláljuk, elkapunk egy fonalat mely akár olyan ingyenes reklámot hozhat cégünknek, amely annyi emberhez jut el, amennyit a hagyományos eszközök segítségével nem is remélhetünk. Mi kell ehhez? Keresőoptimalizálás? Közösségi média marketing? Tartalommarketing? Egy kreatív ötlet és sok-sok tapasztalat, na és mindenek előtt egy jól kidolgozott marketing stratégia!
Online PR és Publishing
Az online marketing mellett a Publishing és az online PR is része egy komplex marketing stratégiának. Gyógyszergyáraknál dolgozva megtanultam, mi az, ha az embert nem csak a kőkemény és tőkeerős konkurencia akarja megfektetni, feljelenteni, elgáncsolni, hanem a hatóságokkal és a média ellenszelével is harcolni kell. Sok olyan projektben vettem rész, ahol még csak látszódnia sem szabadott annak, hogy mit akarunk eladni, mégis konkrét eladási számokat vártak a multinacionális vállalat központjában az online PR vagy a Publishing hatására. Hibázni nem lehet, mert a konkurencia és a hatóságok szeme ránk szegeződik, a legkisebb félrelépésre is milliós büntetéseket várhatunk. Mégis rekordokat döntöttek az eladás-növekedési számok!
Online marketing előadások, oktatás és kutatás
A Gödöllői Szent István Egyetem Marketing Intézetének oktatójaként nem csak a diákok képzésében, de az elméleti kutatásokban is részt veszek. Doktori (PHD) munkám is online marketing témában készül. Az egyetemi kutató munka és a Marketing Professzorok Kft. mindennapi éles gyakorlati munkája során olyan tapasztalatokat szerezhetek, amelyet kevesen ma Magyarországon. Az élvonalbeli, EU-s forrásokból is támogatott elméleti egyetemi kutatás és az üzleti élet könyörtelen kihívásainak kombinációja hatékony és a konkurencia előtt járó tudást ad. Ezeket nem csak diákjaimnak, hanem nemzetközi marketing konferenciákon kutató társaimnak is igyekszem átadni, de ügyfeleimnél a mindennapi gyakorlatban is sikerrel alkalmazom. Keresőoptimalizálás, Facebook marketing, AdWords kampányok, LinkedIn és sorolhatnám azokat a vállalati tanfolyamokat, amelyeket tartottam az elmúlt években, kihelyezve vállalatoknál.
SEO tanácsadás, saját kutatás alapján
A SEO a komplex online marketing leghatékonyabb eszköze. A keresőoptimalizálás megítélése egy kis időre megrendült a közösségi média marketing felületek kialakulásával, amióta azonban azokon egyre inkább csak fizetett hirdetésekkel lehet nagy eléréseket produkálni, a SEO ismét vezeti a költséghatékony online marketing eszközök listáját. A keresőoptimalizálás azonban nem egy állandó rendszer, a Google algoritmusainak folyamatos változása a korábban jól prosperáló weblapok látogatottságát dönti rommá. Ahhoz, hogy naprakészek legyünk a SEO minden kis trükkjével, folyamatosan figyelnünk kell a nemzetközi irodalmat, valamint saját kísérleteket beállítva ellenőrizzük - vagy megdöntjük az onnan származó állításokat. A megszerzett tudást keresőoptimalizálási tanácsadásunk során alkalmazzuk ügyfeleink weboldalain.