Miért fontos egy mobilbarát weboldal? És mire figyelj a megtervezésénél?

mobil
Tartalomjegyzék
Bővített tartalomjegyzék

Összefoglaltuk, amit egy mobilbarát weboldal kialakításáról tudnod kell: mit tart fontosnak a Google, hogyan tedd, mire figyelj, milyen hibákat ne kövess el? Egyszóval, mindben benne van, amit a mobilbarát weboldalak kapcsán tudni érdemes.

A Google 2014-ben vezette be a Mobilbarát címkét azokra a weboldalakra, melyek okostelefonon és tableten is jól használhatók, és ez a címke meg is jelent a kereséseknél. 2015-ben azonban tovább lépett a cég, egyrészt e-mailben elkezdte figyelmeztetni a weboldaltulajdonosokat arra, hogy nem mobilbarát a weboldaluk, és jelezte, hogy ez bizony problémát fog okozni, ha az okostelefon-tulajdonosok készülékein is jó pozícióban szeretnék megjelentetni weboldalaikat a találati listán.

Miért fontos egy mobilbarát weboldal?

A mobilos böngészés alaposan felforgatta a webdesignt, teljes szemléletváltás következett be, elég csak olyan dolgokra gondolni, mint a reszponzív tervezés vagy a flat design. A mobileszközök hatása azonban nem merült ki ennyiben, sok más ponton is beleavatkoztak netezési szokásainkba és az életünkbe.

A mobiltelefonok egyik meghatározó és talán legfontosabb tulajdonsága, hogy állandóan velünk vannak használatra készen, szemben a PC-vel, mely még a laptopok esetében is némileg korlátozottan bírt ezzel a tulajdonsággal. Ennek következménye, hogy tevékenységeink során mindig a telefonunkat bámuljuk vagy bökdössük, azaz a figyelmünket megosztva használjuk a mobilt, gyakorlatilag folyamatosan multitaszkolva. (Ennek káros hatása persze már a PC esetében felmerült, és bőven ki lett elemezve, igaz ott a PC világán belül párhuzamosan futó tevékenységeinken volt a hangsúly). A mobil és a tablet a tévé mellé is felsorakozott második képernyőként – főleg a közösségi média miatt -, párhuzamos használattal megosztva a közönség figyelmét.

A mobileszközök társasága olyannyira folyamatos, hogy

  • a mobiltelefont használók 60 százaléka ma már elsősorban okostelefonját vagy tabletjét használja netezésre.
  • Az átlagos médiafogyasztás már elérte a napi 7 órát, amiből azonban 1,8 óra a mobil nyomogatásával telik. A számítógépük előtt pedig csak 1,6 órát töltenek az emberek, és ami meglepő: még ennél is kevesebb, 1,5 óra jut már csak a televíziónak.
  • Az emberek már annyira kötődnek a mobiljukhoz, hogy inkább lemondanak az alkoholról, a csokoládéról vagy a szexről, mint az okostelefonjukról.
  • Az emberek 70 százaléka az ébredést követő egy órában biztos, hogy a mobilja után nyúl.
  • 56 százalék ugyanezt megteszi közvetlenül lefekvés előtt is.
  • 48 százalék hétvégente sem tud vagy akar a telefonjától szabadulni, és
  • 51 százalék folyamatosan használja a mobilját nyaralás alatt is.
  • 44 százalékunk ráadásul nagyon ideges és ingerlékeny lesz, ha egy hétig el kell szakadnia a mobiljától.

Vannak olyan földrajzi régiók, ahol az okostelefon-használók 44 százaléka tekinti magát mobiltelefon-függőnek. Ez az arány pedig lényegesen magasabb, mint a PC-k esetében a 11 százalékos függőségi arány.

Az Econsultancy az Adobe-bal közreműködve 2015-ben 2973 céget kérdezett meg szerte a világban, és úgy találták, hogy szinte mindenki komolyan foglalkozik a kérdéssel, és túljutottak azon a fázison, amikor még csak ötlet szintjén létezik a mobilra optimalizálás. Ennek oka, hogy most már senki sem tagadhatja a mobilos böngészés jelenlétét és egyre növekvő arányát. De a legsúlyosabb érv talán az, hogy tapasztalják a mobileszközökhöz köthető bevételek fokozódó növekedését.

Mint kiderült, sokaknak volt már legalább 12 hónapja kidolgozott mobilstratégiája, bár a legtöbben éppen abban a szakaszban járnak, hogy még alakítják ezt a mobilstratégiát. A legkisebb egyébként azoknak a cégeknek az aránya, akik még neki sem álltak foglalkozni a kérdéssel.

Van a cégednek már mobilstratégiája?

Van a cégednek már mobilstratégiája?

A kutatók regionálisan is kíváncsiak voltak a számokra, így a földrészeket is összehasonlították. Észak-Amerika nem áll annyira jól, mint várnánk, az európai és az ázsiai cégek előrébb járnak:

Mobilstratégia földrészenként

Mobilstratégia földrészenként

De a legfontosabb kérdés, hogy miként optimalizálnak a cégek mobilra, azaz melyik megoldást részesítik előnyben. Talán nem is meglepetés, hogy a Google által favorizált reszponzív designt választják a legtöbben. Habár az adaptív design (dynamic serving) is erősen ajánlott megoldás – és bizonyos szempontokból jobb is -, jóval kevesebb híve van, aminek a kutatók szerint az lehet az oka, hogy sokkal összetettebb és erőforrásigényesebb megoldás. Mindenesetre megfigyeléseik szerint minden évben többen választják.

Melyik mobilra optimalizálási megoldást választják a legtöbben?

Melyik mobilra optimalizálási megoldást választják a legtöbben?

Mit kell tudnod a Google mobilbarát algoritmusáról?

A Google 2015. április 21-én indította el “mobilbarát algoritmusát”. Habár már korábban is gyakran használtuk és használta a Google is, ekkor terjedt el a “mobilbarát weboldal” kifejezés a weben, hiszen ekkor már nagyon sürgetővé vált a weboldaltulajdonosok számára a megfelelő mobilos megjelenés. A Google pedig ezzel a szóval minősítette azokat a weboldalakat, melyek megfelelő felhasználói élményt nyújtottak okostelefonos böngészés esetén is.

A mobilbarát algoritmus a találati sorrendet is befolyásolta az alapján, hogy egy-egy weboldalt mobilbarátnak minősített-e vagy sem. A keresőóriás tőle szokatlanul a mobilbarát algoritmus bevezetését előre, már februárban bejelentette, azért hogy a honlapok tulajdonosainak legyen idejük felkészülni rá.

  • Az algoritmus világszerte, minden nyelven hatással van a találati listákra, eredményeként a mobiltelefonos felhasználók az adott eszközön jobban használható találatokat kapnak.
  • Az algoritmus valós időben, tehát real-time fut, ami technikailag azt jelenti, hogy bármikor át lehet állni mobilbarát designra, mert amint a Google észleli a változást, azonnal érezni fogja a weboldal a rangsorolásban. A Google robotok szokásos tevékenységük során átfésülik az oldalt, és ha mobilbarátnak találják, akkor egyből ráakasztják a mobilbarát címkét, és mindjárt részesül is az új algoritmus nyújtotta előnyökből.
  • A Google oldalról oldalra vizsgálja, hogy az adott oldal mobilbarát-e vagy sem. Ez azt jelenti, hogy ha a weboldaladnak tíz darab aloldala van, akkor mindegyik esetében külön megvizsgálja ezt a robot. Azaz, ha öt aloldalad mobilbarát, öt pedig nem, akkor azok az oldalaid, melyek optimalizáltak mobilra, jobb helyezést fognak kapni.
  • Bár a Google a reszponzív designt javasolja általában mobilbarát megoldásként, mert jól működő technológiának találják, ami szinte mindenki számára megfelelő választás lehet, azonban más mobilbarát weboldalt eredményező megoldás választása sem jelent hátrányt a rangsorolásnál.
  • Fontos, hogy nem szabad blokkolni a CSS-t és a Javascriptet a weboldalaknál, ugyanis blokkolás esetén nem tud lefutni a Google mobilbarát tesztje. Így annak ellenére, hogy az adott weboldal mobilbarát, mégsem fogja megkapni ezt a címkét.
  • A desktop és a tabletes találati listát nem befolyásolja, hogy egy weboldal mobilra optimalizált-e vagy sem, hatása csak a mobilos találati oldalon jelentkezik.
  • Csak az úgynevezett “10 kék linket” érinti, vagyis az organikus találatokat, így nincs hatással a hírekre, képekre, a térképes találatokra, stb.
  • App interstitials (vagyis amikor app használatára ösztönző interstitials takarja a weboldalt) használata esetén a weboldal nem kapja meg a mobilbarát címkét.
  • Nincs szükség külön mobilos oldaltérképre.

Az algoritmus futása után a weboldaltulajdonosok komoly hatásokról nem nagyon számoltak be sehol a világon – és mi sem tapasztaltunk jelentős változásokat a találati oldalakon az általunk elkészített mobilbarát és nem mobilbarát weboldalak esetében -, pedig a Google korábban azt ígérte, hogy a mobil algoritmus hatása nagyobb lesz, mint egy Panda és egy Pingvin frissítés együttvéve. Ugyanakkor a néhány hónappal későbbi, 2015 augusztusában vizsgálatok már jelentős hatást mutattak ki.

A kutatók megállapítása szerint a keresések 83 százalékában a találati lista első helyét mindig mobilbarát weboldal foglalja el, illetve 81 százalékban az első három hely mindegyikén ilyen oldal található. A Google mobil találati listájának viszont 77 százaléka, azaz a tíz link közül 7,7 darab biztos, hogy mobilbarát weboldal. Persze itt már felmerülhet a kérdés, hogy vajon a több mint 20 százaléknyi nem mobilbarát weboldal miért is tűnik fel a találati lista első tíz helyének valamelyikén?

De azt is lehet látni a grafikonokból, hogy a mobilbarát weboldalaknak nagyobb esélyük van a találati listán jobb pozícióba kerülni.

A mobilbarát weboldal és a találati lista

A mobilbarát weboldal és a találati lista

Még erőteljesebb mobilbarát jelzés

2016-ban a Google egy újabb lendületet ad a mobilbarát algoritmusnak, ugyanis mint jelezte: májustól további rangsorolási előnyt biztosított azoknak a weboldalaknak, melyek mobilon is jól használhatók, azaz átmennek a Google mobilbarát-tesztjén. Ez annyit tesz, hogy frissítésre került a mobilbarát algoritmus, és növekedett a rangsorolási jelzés súlya. Mit lehet tudni a  frissített mobilbarát algoritmusról?

  • Lassú futású – vagyis a frissítés hatása fokozatosan bontakozik majd ki, azaz hirtelen történő, nagy változásokra senki ne számítson a mobilos találati oldalakon. Azt azonban nem lehet tudni, hogy ez a lassú futás heteket vagy hónapokat jelent. A Google oldalanként vizsgálja a mobilbarátságot, vagyis időbe telik, mire minden egyes aloldalt értékel, ezért is lehet lassú futásra számítani.
  • Kisebb a hatása, mint az első mobilbarát algoritmusé – valószínűleg a frissítésnek kisebb lesz a hatása, mint az eredeti, sokak által csak “Mobilgeddonnak” nevezett mobilbarát algoritmusé volt. Pedig sok esetben annak sem volt különösebben nagy hatása a mobilos találati oldalakra.
  • Egyszerű szűrő maradt – amikor a Google a tavalyi évben elindította a mobilbarát algoritmust, akkor az alapvetően csak egy szűrőként működött, mely különválogatta a mobilbarát és nem mobilbarát weboldalakat. Ha egy weboldalt mobilbarátnak talált, akkor az megkapta a mobilbarát címkét a találati oldalon, ami előnyt jelentett neki. Más jelzés ezzel kapcsolatban nem volt, azaz nem volt olyan jelzés, ami mondjuk a rangsorolási előny mértékére is befolyással lett volna. A Google szerint ezzel kapcsolatban most sem várható változás.
  • A sebesség itt nem számít – korábban voltak ugyan utalások arra, hogy a weboldal-sebesség is tényező lesz a mobilbarát algoritmusnál, erre azonban egyelőre nem került sor.
  • Ugyanúgy ítéli meg az oldalakat – a Google szerint semmi olyan változásra nem kerül sor, melynek következtében egy mobilbarát weboldal elveszíthetné a mobilbarát címkét. Vagyis, ha a weboldalad most mobilbarátnak számít, és semmiféle módosításra nem kerül sor rajta, akkor május után is egészen biztosan mobilbarátnak fog számítani. Az egyetlen változás azóta, hogy a Google elindította az algoritmust az az, hogy app interstitials megjelenítése esetén a weboldal elveszíti a mobilbarát minősítést.
  • A felhasználói szándék a fontos – a kérdés, ami itt felmerül, hogy például egy márkakeresésre annak ellenére a márka weboldala fog feltűnni a mobilos találati oldalon, ha az esetleg még nem mobilbarát? Úgy tűnik, hogy a Google a felhasználói szándékot veszi figyelembe elsősorban, vagyis egy jó minőségű tartalommal rendelkező weboldal annak ellenére felbukkanhat jó helyen a találati oldalon, hogy esetleg nem mobilbarát. Így számíthatunk arra, hogy márkakeresésekre akkor is a márka weboldala lesz az első a találati oldalon, ha az nem mobilbarát. A mobilbarátság csak egy a rangsorolási tényezők között. Ha a Google egy márkakeresésre nem a márka oldalát dobná fel elsőként, akkor a felhasználók azt gondolhatnák, hogy a keresési eredmények rosszak. Viszont, ha a márka feltűnik az első helyen, de rossz mobilos élményt nyújt a felhasználónak, az már nem a Google-re vet rossz fényt, hanem magára a márkára, cégre.

A Google mobilbarát algoritmusa tehát jó az okostelefonon netezőknek, mert így jobb találatokat kaptak mobilos kereséseknél, ugyanakkor ösztönzően hat azon weboldal-tulajdonosokra, akiknek még nincs mobiltelefonra optimalizált weboldaluk.

A Google-t nem érdekli, ha csak mobilos weboldalad van

Ugyanolyan jó pozíciót szerezhetsz a találati oldalakon, ha csak mobilra optimalizált weboldalad van és egyáltalán nincs asztali verziód, mintha lenne mind a kettő, akár reszponzív, akár adaptív, akár szeparált alapokon. És ez nem csak a mobilokon megjelenő találati listára vonatkozik, hanem az asztali gépeken megjelenő találati listákra is.

Erről még John Mueller, a Google szakembere beszélt egy Google Hangouton. Mint mondta: ha a mobilos weboldalad megjelenik a nagy kijelzőkön, minden rendben van. Tehát csak annyi kell, hogy győződj meg arról, hogy a desktopos felhasználók látják a tartalmad egy részét, és ha elsősorban mobilkijelzőkhöz van igazítva a tartalom, akkor azzal egyáltalán nincs gond.

A helyzet tehát most már jócskán megfordult az elmúlt évek szemléletéhez képest: nem a desktopos weboldal számít elsősorban, hanem az, hogy legyen egy okostelefonokon jól használható mobilos weboldalad. Azért persze, ha valóban jó hatékonyságú weboldalt szeretnél, még ne feledkezz meg a PC-ket használók egyre fogyatkozó táboráról! Optimalizáld rájuk is a weboldalad, amit egy jó reszponzív vagy adaptív designnal könnyen és problémamentesen megoldhatsz.

De nézzük, hogy Te miként tedd mobilbaráttá a weboldalad! A Google az alábbiakat javasolja.

Mit várnak el az emberek egy mobilbarát weboldaltól?

A legtöbb cégtulajdonos már tisztában van azzal, hogy minden vállalkozásnak szüksége van mobilbarát weboldalra is. Az azonban talán még nem teljesen világos mindenki számára, hogy mit is várnak el a felhasználók egy-egy mobilbarát weboldaltól.

Mint egy kutatásból kiderült, az emberek 94 százaléka keresett már rá cégre, vállalkozásra az okostelefonján, illetve 61 százalékuk rendszeresen – akár napi szinten – használja erre a célra a mobilját. Az emberek 90 százaléka helyi éttermekre keresett rá, 64 százalék szórakozási lehetőségekre (például moziműsorra, programokra), 58 százalék viszont valamilyen kiskereskedelmi céget akart megtalálni.

Mit akarnak látni egy mobilos weboldalon az emberek?

  • Legelőször is a kapcsolati információkat (címet, telefonszámot) és a nyitva tartást.
  • Szintén sokan kíváncsiak a cég áraira, a termékek és szolgáltatások listájára.
  • Ennél azért kevesebben, de még 39 százalék fényképet is szeretne látni.
  • 10-20 százalékuk akar videókkal, vásárlói véleményekkel, közösségi média linkekkel, információs cikkekkel vagy blogbejegyzésekkel találkozni.

Mi zavarja őket?

Vannak viszont olyan dolgok, amelyek kifejezetten idegesítik az embereket a mobilos weboldalakon. Ilyen például az információk hiánya és a gyenge reszponzivitás. Az emberek 46 százaléka ideges lesz, ha egy általa meglátogatott weboldalon nem találja meg könnyen a nyitvatartási időt, 42 százalék arra számít, hogy mindjárt az első oldalon látni fogja a telefonszámot és a címet, míg 34 százalék morcos lesz, ha a mobilos weboldalon nem található meg minden olyan információ, ami a desktop oldalon szerepel.

Ugyanakkor a felmérésből az is kiderül, hogy komoly problémát tud okozni a felhasználóknak, ha valami gond van a szöveg méretezésével és a reszponzivitással. A felhasználók súlyos hibának tartják, ha egy weboldalon zoomolni kell azért, hogy valamilyen információhoz hozzájussunk, vagy ha tudnak könnyen megnyitni egy linket. De a megkérdezetteknek a negyede már akkor is méltatlankodik, ha egy telefonszám megérintésére nem ugrik fel azonnal a tárcsázó, benne a számmal.

Mindezek mellett még a sebesség és a navigáció kérdése is igen lényegesnek tűnik. Az emberek közel 72 százaléka ugyanis jelezte, hogy ha egy weboldal túl lassú mobilon, akkor egyszerűen otthagyja. Ráadásul a megkérdezettek 30 százalékának már az is elegendő indok, hogy lelépjenek egy weboldalról, ha nem néz ki elég jól a telefonjuk kijelzőjén.

Hogyan reagálnak?

És mi van akkor, ha egy céges weboldalon a felhasználók nem találják meg az általuk keresett infót? Az emberek több mint fele képes rákeresni a cég Facebook-oldalára, vagy más forrásokra, hátha ott megtalálják, amit akarnak. Ugyanakkor 39 százalékuk inkább egy másik céget keres a neten. Ez pedig egyértelműen azt jelzi, hogy a kis cégek igen könnyen vevőket veszíthetnek, ha nincsen jó mobilos weboldaluk.

Ugyanakkor, ha egy cégnek van egy jó mobilbarát weboldala, akkor az emberek 72 százalékában az jó benyomást kelt, 55 százalék egyből azt gondolja, hogy a cég kifejezetten törődik az ügyfeleivel, és 49 százalék szívesen üzletet is köt vele.

Mindebből tehát az a tanulság vonható le, hogy nem elég, ha van egy mobilra optimalizált weboldalad, annak designját a felhasználók igényeire kell szabni: könnyen megtalálható kapcsolati és nyitvatartási adatokkal, kattintható telefonszámmal, valamint a termékek, szolgáltatások és árak felsorolásával, hogy az emberek tudják, mire számíthatnak.

Hogyan tervezd meg a mobilbarát weboldalad?

Amikor tervezünk, ma már a mobilokból kell kiindulni. Nemcsak azért, mert ez az elsődleges eszköz, hanem praktikus okai vannak: sokkal könnyebb elkerülni a problémákat, hibákat, ha a mobil felől tartunk a desktop kijelzők felé, mint fordítva. Azaz egyszerűbb átültetni egy mobilon megfelelően használható weboldalt desktop méretbe, mint desktopról mobilra. A mobilos megjelenésnek azonban más szabályai vannak, így ha a weboldalunkon gondolkodunk, és persze már mobilra tervezünk elsősorban, akkor az alábbi szabályokat érdemes figyelembe venni.

Maradj a minimalista megoldásoknál!

A mobilos webdesign mindig legyen a lehető legegyszerűbb. Ne a szépség legyen az elsődleges szempont, hanem a praktikusság és a használhatóság. Soha ne felejtsd, hogy egy kisebb méretű kijelzőre tervezel, még ha a laptopodon vagy az óriási monitorodon teszed is ezt! A hely nagyon szűkös a mobilok kijelzőjén, még ha phabletekről is van szó, és nem marad tér a túlságosan összetett megoldásokra.

A minimalista kialakítással viszont a felhasználóidat is segíted. Egy egyszerű, letisztult, könnyen áttekinthető felületen az emberek sokkal könnyebben és gyorsabban megtalálják az őket érdeklő dolgokat, vagyis javul a felhasználói élmény.

De hogy is néz ki a minimalizmus a mobilokon? A felhasználóknak mindössze annyit kell látniuk maguk előtt a kijelzőkön, amennyi feltétlenül szükséges ahhoz, hogy a weboldal lényegi funkcióit használni tudják, vagyis amelyek révén automatikusan tovább tudnak navigálni a céljuk felé. A gombok és a menük használatát intuitívvá kell tenni, azaz a felhasználóknak ne kelljen gondolkodniuk azon, hogy mi mit jelent. Ez persze ősi szabály a webdesignban, de a mobilos tervezésnél érdemes halálosan komolyan venni. Az egyszerűség sok problémára megoldást jelent.

mobil

Különböző eszközök és helyzetek

Habár mobileszközökre tervezed a weboldalad, ezek a mobileszközök igen eltérőek lehetnek. Ez egy fontos dolog a mobilos tervezésnél, mégis sok webdesigner időnként elfeledkezik arról, hogy a weboldalakat többféle platformról, többféle helyzetben is használják. Tisztában kell lenni azzal, hogy az adott weboldal felhasználóinak többsége milyen eszközt használ és általában milyen helyzetekben. Ne essünk abba a tévedésbe, hogy azt hisszük, minden felhasználó teljesen azonos módon és körülmények között használja a mobilját.

Azt sem szabad figyelmen kívül hagyni, hogy a mobilokat sok esetben szabadtéren, változatos környezeti viszonyok között használjuk. A kültéri használat miatt viszont sokkal kontrasztosabbra érdemes tervezni a weboldalt, a finom, kis megoldások ilyenkor elvesznek. Tipikusan előfordulhat ilyen felhasználás éttermek, szórakozóhelyek, üzletek weboldalai esetében, melyek honlapjára sokszor menet közben keresnek rá az emberek, hogy tájékozódjanak címekről, árakról, szolgáltatásokról. Ilyenkor egyszerűen csak jól láthatónak kell lennie a weboldalnak.

Maradj a megszokott megoldásoknál, ha a navigációról van szó

Habár ma már több ember használja böngészésre a mobilt, mint az asztali gépét, ezeknek az embereknek a nagy része annak idején még desktopon kezdett netezni. Kialakultak tehát bizonyos ismereteik, szokásaik a weboldalak navigációját és megjelenését illetően, melyeket figyelembe kell venni akkor is, amikor mobilra tervezel. A hagyományos megoldásoktól nem érdemes nagyon eltérni, a megszokott és jól működő navigációs megoldásokat érdemes átvezetni mobilra is a megfelelő felhasználói élmény miatt.

Jó megoldás mobilon, ha egy hamburger ikon alá a navigációs menübe elhelyezed a legnépszerűbb oldalaidat, tehát amelyekre az emberek valóban kíváncsiak. Emellett jelenjen meg a jobb felső sarokban egy jól használható kereső, valamint jól látható, nagy méretű call to action gombok.

Ne akadályozd a vevőid a vásárlásban!

Ez a pont webáruházaknak szóló tanács, azonban számukra mind közül a legfontosabb. Egy webáruház ugyanis nem éri el a célját, ha egy potenciális vevője végül vásárlás nélkül hagyja el az áruházat. A webáruházakban a legrettegettebb dolog, hogy a már bepakolt kosarat otthagyja a vevő, anélkül, hogy leadná a megrendelését.

A kutatások azt mutatják, hogy akárcsak asztali gépeken, mobilon a vásárlás megszakítása legtöbb esetben azért következik be, mert rossz a weboldalon a felhasználói élmény, azaz a UX. Magyarul használhatatlan az oldal. A csalódott vásárlók pedig nem fognak többet visszatérni, még asztali gépeiken sem, inkább máshol rendelik meg a terméket.

A legtöbb probléma egyébként a mobilos vásárlásoknál ott jelentkezik, amikor a call to action és a fizetés gomb nem igazán felel meg a vásárló várakozásainak. Például a gombok túl kicsik, nehezen észrevehetők, nem találja meg őket a vevő, nem tudja megérinteni az ujjával, vagy egyszerűen csak nem jelennek meg azonnal, hogy a terméket hozzáadta volna a kosárhoz. A gomb tehát legyen nyilvánvaló, nagy méretű és könnyen használható, körülötte nagy white space-szel.

Mitől lesz jó a mobilbarát weboldal a Google szerint?

A Google általában nem csak elvárja a weboldalak tulajdonosaitól, hogy korszerű weboldalakat készítsenek, illetve ösztönzi is őket erre – néha elég drasztikusnak tűnő – eszközökkel, hanem remek oktatóanyagokat is készít, hogy segítse őket. Így van ez a mobilbarát weboldalak esetében, ahol egy dokumentumban felsorolja a jó mobilos weboldalak ismérveit.

Vagyis a felsorolt elvek alapján elkészíthetünk egy alapvetően használhatónak számító mobil weboldalt, vagy legalábbis figyelembe vehetjük ezeket, amikor mobilra is tervezünk. Mindezt a tudást a Google nem csak kitalálta, hanem kutatásokat végzett a témában az AnswerLab segítségével. Az emberek viselkedését vizsgálták különböző mobilra optimalizált oldalakon, majd ebből vonták le azokat a következtetéseket, amiket a developers.google.com oldalon elolvashattok, de a lényegét össze is foglaljuk:

Honlap és navigáció

A Google fő megállapítása az, hogy miközben egy desktopos weboldal gyakran több célt is szolgálhat, addig a mobil weboldalaknál már célszerű arra fókuszálni, hogy a felhasználók megtalálják azt a tartalmat, amit keresnek. Ennek érdekében:

  • Tartsuk a call to action gombokat a weboldal felső vagy középső részén, vagyis ahol a felhasználók könnyen észreveszik!
  • Legyenek a menük rövidek, mert egy mobil oldalon kicsi az esélye, hogy a hosszú menükön végig fognak görgetni a felhasználók.
  • Könnyen visszatérhessenek a főoldalra: ma már általában a bal felső sarokban állandóan szereplő logót arra használják az emberek, hogy az visszarepítse őket a főoldalra.
  • Óvatosan a hirdetésekkel! Nem szerencsés, ha kiszorítják a hasznos tartalmat.

Keresések

Egy weboldalon történő könnyű és gyors keresés életbevágóan fontos a mobilos felhasználók számára. Ehhez szükség van arra, hogy a

  • a keresőmező mindig látható legyen, mégpedig az elsőként pillantsák meg, ahogy megérkeznek egy mobil weboldalra. Nem jó megoldás, ha a menübe vagy akár csak összecsukva elrejtjük a keresést.
  • Természetesen a keresési eredmények legyenek relevánsak, amihez a jól működő keresőn kívül érdemes olyan technikát bevetni, mint az automatikus kiegészítés, tehát amikor elkezdi a felhasználó beírni a betűket, mindjárt javaslatokat dob fel a kereső.
  • Emellett érdemes lehet szűrőket is használni bizonyos esetekben, például, amikor egy webshop egyszerre nagy mennyiségű találatot dob ki.
  • Ilyen szűrőket pedig már a keresés megkezdése előtt lehet használni a jobb keresési eredmények érdekében.
Szűrők

Szűrők

Webáruházak és konverzió

  • Hagyjuk a felhasználót a regisztráció előtt körülnézni és tájékozódni! Ne erőltessük már a rendelés leadása előtt a regisztrációt, mert ezt a kutatás szerint nem szeretik az emberek.
  • Hagyjuk az embereket vendégként vásárolni, azaz ne kényszerítsük rá őket egy account létrehozására. Ha viszont regisztrációt szeretnénk, akkor tegyük világossá számukra, hogy az milyen előnyökkel jár.
  • Ha egy felhasználó korábban már megadta az adatait, akkor azokat ne kelljen újra megadnia. Az új felhasználók pedig külső szolgáltatások használatával is bejelentkezhessenek.
  • Ne feledkezzünk meg arról, hogy a telefonszámra kattintás mobilon automatikusan elindíthassa a hívást.
  • Más eszközökön is befejezhető legyen a folyamat mentés vagy megosztás segítségével, mivel esetleg egy nagyobb kijelzőn is meg akarják nézni a terméket, mielőtt vásárolnak.

Űrlapok kitöltése

Legyen a folyamat vásárlásnál vagy feliratkozásnál is olyan egyszerű és könnyű, amennyire csak lehetséges. Ennek érdekében:

  • Mindig a legpraktikusabb beviteli módot kell választani, vagyis mindig a megfelelő billentyűk ugorjanak fel (pl. számok és nem betűk).
  • Amikor dátumot kell megadnia a felhasználónak, akkor érdemes egy naptárat feldobni neki.
  • A legjobb formok persze minél rövidebbek, nincsenek benne ismétlődések, csak a legfontosabb információkat kéri, és megmutatja, hogy hol tart a felhasználó a folyamatban.
Form

Form

Usability

A felhasználók hálásak azokért az apró dolgokért, amelyeket a felhasználói élmény fokozása érdekében teszünk. Ebbe beletartozik, hogy

  • az egész oldalt optimalizáljuk mobilra!
  • Ne kényszerítsük vízszintes görgetésre vagy zoomolásra az embereket!
  • A termékek képei legyenek kinagyíthatók, mert a felhasználók látni akarják, amit megvesznek.
  • Egyetlen böngészőablakon belül tartsd a felhasználókat! Tehát ne nyíljanak meg újabb böngészőablakok linkekre történő kattintásokra, mert akkor nehezen találnak már vissza.
  • Ne használd a “teljes verzió” linket, mert azt hiszik a felhasználók, hogy a mobilverzió csökkentett funkciókat és tartalmat kínál.
  • Tedd a felhasználók számára világossá, hogy miért kéred a helyadatait!

Mi kellhet még a felhasználóidnak egy jó mobilos oldalon?

Habár a Google mobilbarát-tesztje sokat segít abban, hogy megállapíthasd, minden rendben van-e a weboldaladdal mobiltelefonon és tableten is, van pár dolog, amit érdemes azért külön is leellenőrizni, és egy checklistában sorban kipipálni.

1. HÍVÁS ÉS SMS GOMB

Nagyban megkönnyíti a mobiltelefonon böngészők életét, ha a weboldaladon olyan gombok szerepelnek, melyekre rákattintva felhívhat vagy SMS-t küldhet neked. Ilyenkor nem kell az oldalon talált telefonszámot kijelölni, kimásolni, majd megnyitni a tárcsázót és beilleszteni a telefonszámot. Ezt nem olyan egyszerű végrehajtani mobilon, sokkal jobb megoldás, ha egyből ott az oldalon a hívás gomb.

2. MOBILTÉRKÉP AZ ÚTVONALLAL

A másik praktikus dolog mobilon, amikor a vállalkozás helye egy beágyazott térképen szerepel, sőt még az útvonalat is megtervezi, ha tudja, hogy a felhasználó hol tartózkodik.

3. KAPCSOLAT FORM

Az egyik legjobb ügyfélszerző eszköz, egy olyan kapcsolati form, melyet kitöltve a látogató felteheti az őt éppen foglalkoztató kérdést a termékeddel, szolgáltatásoddal kapcsolatban akár a mobiljáról is. Itt főleg arra kell figyelni, hogy legyen kellően egyszerű, minél kevesebb adatot kelljen megadnia. Praktikusan elég a név és az e-mail, plusz az üzenet megfogalmazására szolgáló mező.

4. ÖSSZECSUKHATÓ TARTALOM ÉS SLIDER

Habár mobilon is egyre inkább megbarátkoznak az emberek a scrollozással, és jól tudják használni a hosszúra nyúló weboldalakat a sok aloldal helyett, ennek ellenére a túl hosszú oldalakat érdemes lehet kompakt formába összesűríteni. Ilyenkor annak érdekében, hogy ne kelljen nagyon sokat görgetnie a felhasználóknak, összecsukható tartalmakat lehet használni, melyek egy-egy gombra kattintva nyílnak ki és záródnak be. Ugyanígy képeknél is jó megoldás lehet a slider használata, ahelyett, hogy nagyon sok képet helyeznénk el egymás alá.

5. KÖNNYŰ NAVIGÁCIÓ

Egy mobil-weboldalon a könnyű navigáció van annyira fontos, mint a gyors betöltés. Arra kell törekedni, hogy a legfontosabb tevékenységeket a főoldalról végre tudják hajtani a látogatók, illetve a leglényegesebb tartalmakat minden aloldalról elérjék. Az sem árt, ha az oldal tetején vagy akár még az alsó részén is elhelyezünk back gombokat a könnyebb visszalépés érdekében.

6. VIDEÓTARTALMAK

Mivel mobilon nem mindenki szeret hosszú szövegeket olvasni, illetve sokan preferálják a videókat, így nem elvetendő ötlet, hogy egy leírás helyett vagy mellett videókat is elhelyezzünk. Ezek szólnának a cégről, termékeinkről, szolgáltatásokról.

7. NAGY GOMBOK

Soha ne felejtsük, hogy a mobiltelefonon böngészők az ujjaikat használják a kijelzőn a kattintásokra és nem egy tűhegyes nyilat. Ezért a gomboknak kellően nagy méretűnek kell lenniük és megfelelő távolságban kell elhelyezkedniük egymástól. A méretet javasolt 45-57 pixel közé belőni.

8. KÖZÖSSÉGI OLDALAK LINKJEI

Ha jelen van a céged a közösségi média oldalakon, akkor a mobilra optimalizált weboldaladon mindenképpen kapjanak helyet a rájuk mutató linkek, illetve azok a közösségi média gombok, melyekkel kifejezhetik a tetszésüket az oldaladdal és egy-egy tartalmaddal kapcsolatban.

Hibák, melyeket igyekezz elkerülni

Azt nem árt tudni, hogy a reszponzív vagy az adaptív design nem old meg minden problémát, akad még egy-két dolog, amire figyelni kell, ha valóban mobilbarát weboldalt szeretnél. Ha kiválasztottad a számodra legjobbnak tűnő technológiát, és figyeltél azokra a tényezőkre, melyeket fentebb felsoroltunk, akkor még mindig van néhány hiba, amit elkövethetsz.

1. BLOKKOLT JAVASCRIPT, CSS ÉS KÉPFÁJLOK

Az indexelés miatt engedni kell a robots.txt fájlban, hogy a Googlebotok hozzáférjenek a JS, a CSS és a képfájlokhoz a weboldaladon. Ennek hiányában a weboldalad nem mobilbarát weboldal a Google számára, még ha szerinted az is. A Google egyébként a Search Console-on, azaz a Webmestereszközökön keresztül figyelmeztetést küld azok számára, akik blokkolják a Javascript és a CSS elérését.

A Google egyébként már évek óta jelzi ezt a weboldaltulajdonsoknak különböző fórumokon, illetve 2014 októberében frissítette a webmester irányelveket, Jelezve, hogy a CSS és a JS blokkolása ront a weboldal helyezésén. 2015 óta azonban már e-mailben és a Search Console-on keresztül is riadóztatja az ilyen weboldalaknak a tulajdonosait és kezelőit. A figyelmeztetés angol nyelven így néz ki:

google-figyelmeztetes

Látható, hogy a Google megoldási javaslatot is ad, viszonylag egyszerűvé téve a helyzet rendezését. Lépésről lépésre vezetve jelzi, hogy

  • először azonosítani kell a robots.txt által blokkolt elemeket a “Megtekintés Google-ként” – a Search Console-ban elérhető – funkció segítségével.
  • Ezután kerülhet sor a blokkolás eltávolítására,
  • amit érdemes ellenőrizni az ugyanitt található robots.txt tesztelővel, majd ha rendben van minden, akkor
  • frissíteni kell a robots.txt-t.
  • Végül pedig ismét le kell futtatni a “Megtekintés Google-ként” funkciót, de úgy, hogy a “Mobil (okostelefon)” opciót választjuk az alapértelmezett Asztal helyett.

Ennél egyszerűbben is azonosíthatók a blokkolt elemek: a “Google index” alatt lévő “Letiltott források” menüpontban is láthatók a Search Console-ban, hogy jelenleg milyen forrás van letiltva, és hogy a helyzet korábban hogyan változott. Az itt található forrásokra rákattintva további részleteket találhatunk arról, hogy mi is van letiltva az adott oldalon. Előfordulhatnak hibás jelzések is, ezért is érdemes ebben a menüpontban ellenőrizni, hogy pontosan mivel is van gond. A megoldáshoz vezető lépéseket itt foglalták össze.

2. LEJÁTSZHATATLAN TARTALOM

Akad néhány olyan videó és egyéb tartalom a webodalakon, melynek lejátszását nem támogatják a mobileszközök (ilyen például a Flash). Ez rendkívül lehangoló a weben mobillal barangoló felhasználóknak, véli a Google, ezért azt javasolja, hogy HTML5-tel oldjuk meg a videók és az animációk lejátszását. További részletek itt.

3. HIBÁS ÁTIRÁNYÍTÁSOK

Amennyiben szeparált mobil URL-t használsz, akkor a mobilos felhasználókat minden esetben át kell irányítania desktop URL-ekről a megfelelő mobil URL-ekre. Más oldalakra, például a főoldalra történő átirányítás hibának minősül. Tehát az nem fogadható el például, hogy a mobilos felhasználó egy desktopos felhasználónak szánt linkre való kattintáskor a mobilos főoldalra jut, ha van annak az oldalnak mobilos megfelelője is.

Hibás átirányítások

Hibás átirányítások

Ha van hibás átirányításod, akkor az kiderül a Webmestereszközök elemző részéből. Egyébként pedig azt javasolja a Google, hogy ha nincs megfelelő mobilos oldalad az okostelefon-használóknak, akkor sem a mobilos főoldalra irányítsd őket, hanem inkább a desktop oldalra. Ebben az esetben jobb semmit sem tenni, mint hibásan megoldani a helyzetet. Egyébként pedig a reszponzív designt javasolja a Google, amit mi szívesen összedobunk neked.

4. MOBILOS 404-ES OLDALAK

A hiba lényege, ha egy URL a desktop oldalon jól működik és a megfelelő oldalra vezet, akkor ugyanez az URL egy 404-es oldalt eredményez mobilon.

Mobil 404

Mobil 404

Ilyen esetben ha van egy azonos tartalmú, de más URL-en elérhető mobilos weboldal, akkor arra kell átirányítani a felhasználót. A javítási lépéseket itt foglalja össze a Google.

5. ALKALMAZÁS-LETÖLTÉS

Akadnak olyan weboldalak, melyek a saját natív appjukat ajánlják a mobilos weboldalukra tévedőknek. Ezt azonban lehet úgy csinálni, hogy az indexelési hibákat okozzon, valamint megakassza a felhasználókat a weboldal használatában. Erre gondolunk:

megakaszt

Ennek megoldására az egyszerű bannert javasol a Google, mely szépen illeszkedik a honlap tartalmába.

6. IRRELEVÁNS KERESZTLINKEK

Gyakori megoldás, hogy egy weboldal a felhasználók számára egy szeparált mobil URL-en a desktopra optimalizált verzióra mutató linket jeleníti meg, és ugyanígy a desktop oldalról egy linket a szeparált mobilos oldalra.

7. LASSÚ MOBILOS OLDALAK

És végül: pörögjön az a weboldal mobilon is! Azzal, hogy a weboldaladat reszponzívvá tetted, még nem oldottad meg a sebesség problémáját. Sőt, néha csak lassítunk ezzel a megoldással a mobilos megjelenésen. Pedig nemcsak a felhasználók nem szeretik a lassú weboldalakat, hanem a Google sem, így a keresési oldalakon elfoglalt helyezésünk is kárát látja majd, ha nem figyelünk oda a weboldalunk sebességére. Úgyhogy futtassátok a PageSpeed Insightsot, és fogadjátok meg a tanácsait!

8. Nem igazodó felugró ablak

Habár a felugró ablakokat nem szeretjük látni, abban az esetben, ha csak visszafogottan idegesítőek, kevéssé tolakodóak, akkor viszonylag hatékonyak. Nincs is velük különösebb gond a nagyméretű desktop-kijelzőkön, hiszen az egérmutatóval könnyen kattintható a rajtuk elhelyezett X, és egy szempillantás alatt bezáródnak. Mindez mobilon nem ennyire egyszerű, és egy rossz beállítás még jobban megkeserítheti a felhasználók életét.

Ha ugyanis a popup, illetve a benne lévő tartalom nem alkalmazkodik megfelelően a kijelzőmérethez, akkor a felhasználónak nem lesz egyszerű csúsztatással, átméretezéssel megtalálni és lekattintani az X-et a mobilon. Nyilván mindenki futott már bele ebbe a problémába mobilos netezés közben, így tisztában van azzal, hogy mennyire idegesítő. Arra tehát nem árt figyelni, hogy a CSS-ben legyen egy médialekérdezés, ami beállítja a felugró méretét a fix méret használata helyett. Emellett azonban azt se felejtsük, hogy az X gombnak kellően nagyméretűnek kell lennie a mobilok kijelzőjén is a kattinthatóság miatt. Az is megfontolandó, hogy egy bizonyos idő elteltével a popup magától bezáródjon.

9. TÚL KICSI GOMBOK

Nem csak a felugróknál lehet probléma abból, hogy a gombokat rosszul méretezzük, és rontjuk a felhasználói élményt. Az Apple ajánlása azt mondja, hogy a gombok soha ne legyenek kisebbek a 44×44 pixeles méretnél. Ezért érdemes megbizonyosodni arról, hogy a CSS nem méretezi le ezen ajánlott méret alá a gombot.

10. A ZOOMOLÁS LEHETŐVÉ TÉTELE

Sokan gondolják úgy, hogy azért mert egy weboldal reszponzív, felesleges lehetővé tenni a felhasználók számára a zoomolást, azaz kinagyítsanak bizonyos részeket a weboldalon. Az emberek azonban nem egyformák és eltérőek az igényeik. Még akkor is lehet egy szöveg vagy egy kép valakinek túl kicsi, ha az átlagnak semmilyen gondot nem okoz az elolvasása, megtekintése. Vagyis annak érdekében, hogy a weboldalunk mindenki számára jól használható legyen, reszponzív weboldalaknál is engedélyezzük a zoomolás lehetőségét a viewport meta tagben.

11. NAVIGÁCIÓ

Komoly problémát szokott okozni a felhasználók számára az olyan oldalakon történő mobilos navigálás, melyeknél a navigáció tervezése során nem vették figyelembe a mobilos látogatókat. Még egy reszponzív oldalon is lehetnek gondok a navigációs elemek használhatóságával, ha túl kicsi lesz a méretük a kisebb kijelzős okostelefonokon, különösen ha a felhasználó ujja ehhez képest nagy. A hosszú görgetésű weboldalak már ennek figyelembe vételével születnek meg, ezeket azért jobb használni, mert az embereknek könnyebb görgetni mobilon, mint linkeket, gombokat nyomogatni.

12. ÚJ ABLAK NYITÁSA

Sok esetben a belső linkekre való kattintásnál egy új ablak nyílik meg a böngészőben, hogy a linkről elérhető tartalmat így olvassák el a felhasználók, majd ezt lecsukva könnyedén folytathassák az eredeti ablakban az olvasást. Ez a technika jó a weboldalnak, elfogadható a felhasználónak egy desktop böngészőben, mobilon azonban nem a legszerencsésebb megoldás.

Ennek oka az, hogy a mobilos böngészőkben viszonylag nehéz kezelni a sok megnyitott ablakot, nem látjuk át olyan könnyen, hogy hány ablak van nyitva, így böngészés közben könnyű elkeveredni egy idő után az ablakok erdejében. Vagyis, ha a mobilos felhasználókra gondolunk, akkor jobb megoldás, ha a linkjeink nem új ablakban, hanem ugyanabban az ablakban nyílnak meg. Ráadásul nagy eséllyel vissza is térnek az eredeti oldalra a látogatóink, hiszen a mindenki által előszeretettel használt back gomb odarepíti őket egy pillanat alatt.

13. Lebutított weboldal

Míg korábban jellemző volt, hogy a weboldalak mobilos verzió valami lebutított változatot mutattak az okostelefonos felhasználónak, ezt a reszponzív design elterjedése és a felhasználói mobilhasználat az elmúlt évek során megváltoztatta. Most már a PC-ken is elérhető webes élményt kell nyújtani az embereknek mobilon is. Sőt, ennél többet!

Az okostelefonok fel vannak szerelve fényképezőgéppel, mikrofonnal, gyorsulásmérővel, GPS-szel, melyeket használnak is az emberek nap mint nap. Az ezek használatával kiegészített keresés pedig más eredményeket ad mobilon, mint PC-n. Így a GPS adatait veszi figyelembe, amikor lényeges a felhasználó pozíciója. De használható a hangalapú keresés, vagy a lefotózott képek értelmezése, ahogy azt a Goggles alkalmazás teszi. Vagyis nem elég, ha mobilon ugyanazt az élményt nyújtod az embereknek, mint asztali gépen, hanem annál többet kell.

Ha mobilbarát weboldalra van szükséged, abban mi is segíthetünk! Jelenlegi weboldalad mobilra optimalizálásával elérheted az okostelefonos és tabletes felhasználókat, ezzel pedig megnövelheted látogatóid és vásárlóid számát, így bevételeid is gyarapodni fognak. Kattints ide, és kérd ingyenes árajánlatunkat mobil weboldalra! >>>

Címkék: ,

A Webshark.hu a hozzászólásoknál előzetes moderálást alkalmaz. Moderálási szabályaink itt olvashatók.