Menü

Mobilbarát weboldal tervezés a Google ajánlásával

2017. október 02. | 608

A Google Partners oktatási központ Mobil webhelyek vizsgájának teljesítése után támadt az az ötletem, hogy érdemes lenne az itt megszerzett ismeretekből egy cikket összeállítani.

A Mobil webhelyek vizsga röviden a mobilbarát weboldalak létrehozásának, kezelésének, teljesítménymérésének és optimalizálásának alap- és haladó szintű fogalmaival és módszereivel foglalkozik. 

Mivel az utóbbi években rendkívüli mértékben nőtt a mobilról történő weboldal látogatások aránya az asztali gépek hátrányára, ezért a mobilbarát weboldalak megfelelő tervezése és kialakítása kulcsfontosságú lett a sikerhez. Annak ellenére, hogy a Google minden elérhető eszközzel megpróbálta felhívni a weboldal tulajdonosok figyelmét ennek fontosságára, úgy látom, hogy sok vállalkozás le van maradva ezen a területen.

Ha két mondatban össze szeretném foglalni a legfőbb problémákat, akkor azt mondanám, hogy

  1. a weboldalak többsége annyira lassan tölt be, hogy a látogatók egyszerűen nem várják ki és elkattintanak
  2. a weboldalak olyan tervezési és kialakítási hibákat tartalmaznak, amelyek mobilon nagy mértékben lerontják a felhasználói élményt és végső soron ugyanolyan következménnyel járnak, mint az előbbi pontban: a látogatók elkattintanak

Nézzük ezt a két pontot kicsit részletesebben kifejtve.

1. A lassan betöltődő mobil weboldalak problémája

A mobil internetes felhasználói élmény manapság sajnos az esetek többségében nem felel meg a látogatók elvárásainak. Az oldalak olyan lassan töltenek be, hogy a látogatók egyszerűen nem hajlandók kivárni és elkattintanak. A jelenség okait vizsgálva az alábbiakra jutottunk:

  • a weboldalak mérete az utóbbi 5 évben megnégyszereződött, köszönhetően a manapság népszerű képi és videós tartalmaknak
  • a mobil internet kapcsolat sebessége még mindig elmarad az asztali gépeknél megszokotthoz képest, ami eleve lassítja az oldal betöltődését
  • a látogatók mobil böngészés során bizonyítottan türelmetlenebbek ami adódik az eszköz használatának jellegzetességeiből: mozgás közben, úton vagyunk vagy éppen tartunk valahova, egyszerre több dolgot csinálunk és azonnal szükségünk van az információra
  • felgyorsult az életvitelünk. Lényegesen több információ ér minket, aminek köszönhetően megnőtt az információ éhségünk, ezzel együtt kevesebb időt szánunk a befogadására.

Ezen okok oda vezettek, hogy az aktuális statisztikai kimutatások szerint az emberek 75%-a vagyis háromnegyede (!) elhagyja a weboldalt, ha annak betöltődése 5 másodpercnél hosszabb időt vesz igénybe. Próbáld ki egy stopperrel, sajnos nagyon sok weboldal elbukik a teszten, ami azt jelenti, hogy potenciális látogatóik többségét még azelőtt elveszítik, hogy azok megpillanthatnák a nyitólapot. Ezek után mondanom sem kell, mennyire fontos minden eszközt bevetni annak érdekében, hogy lefaragjunk a betöltődés idejéből. Sajnos maga a probléma annyira összetett és olyan sok terület összehangolt tevékenységére van szükség, hogy nem egyszerű a kívánt 3 másodperces betöltődési idő alá szorítani az oldal teljesítményét.

2. A mobilbarát weboldalak tervezési és kialakítási problémái

A mobilbarát weboldalak készítésének technikája a reszponzívitás. Az utóbbi években elég sokat  olvashattunk erről aminek köszönhetően ügyfeleink többsége tisztában van azzal, hogy ha a látogató számára mobilon is élvezhető weboldalt szeretne, akkor reszponzívan kell kialakítani.

A reszponzív weboldalak előnye, hogy egy site készül, amely rugalmasságánál fogva képes asztali, tablet és mobil kijelzőkön is tökéletesen megjelenni. Ez a technológia a korábban ismert eljárásokhoz képes gyorsabb, olcsóbb weboldal készítést tesz lehetővé, ráadásul a Google is ezt az eljárást támogatja.

Sajnos a reszponzív tervezés és kialakítás még nem fedi le a mobibarát weboldalak összes problematikáját. Nap-mint-nap sok olyan oldallal találkozom, amelyek technikailag reszponzívnak mondhatók, mégsem felelnek meg a látogatók elvárásainak.

Nézzük meg pontról-pontra melyek a Google szerint a legfontosabb mobilbarát weboldalak tervezésére vonatkozó iránymutatások

  1. A cselekvésre történő felhívásokat (Call-to-Action, CTA) jól látható módon helyezzük el. A CTA-k azok a jellemzően élénk színű nyomógombok, amelyek a weboldal látogatóit irányítják egy konverzió megvalósulása felé. Ha ezek az elemek nem elég feltűnőek, akkor konvertálás nélkül hagyja el a látogató a weboldalt.
  2. A mobil menü legyen egyszerű, hierarchiájában nem túl mély és tartalmazzon minél kevesebb menüpontot. Mobilon lényegesen nehezebb egy szerteágazó menürendszerben navigálni, ezért egyszerűsítsünk ahol lehet.
  3. Mivel mobilon a menü egy ikonra megy össze, ezért nehézkesebb a kezelése. Sok felhasználó szeret visszatérni a nyitólapra, de nem tudja hogyan kell. Tegyük a nyitólapra jutást egyértelművé a logó használatával.
  4. Fogjuk vissza a hirdetési felületeket mobilon, mert sokkal tolakodóbbak leszenk, mint egy nagyobb asztali kijelzőn. Ne hagyjuk, hogy a felbukkanó hirdetések elijesszék a látogatókat.
  5. A csökkentett menü miatt a látogatók előszerettel használnák a keresőt. Feltéve ha lenne ilyen a mobil oldalon illetve ha könnyen használható lenne. Tegyük azzá! Ezen felül gondoskodjunk arról, hogy a látogató nagy számú találat esetén is a relevánsabbakat lássa előrébb.
  6. A regisztráció indokolatlan szorgalmazása legtöbbször elijeszti a látogatót. Ha lehetséges, csak igazán indokolt esetben tegyük kötelezővé a regisztrációt és legyen lehetőség vendégként is vásárolni. Ha már muszáj regisztrálni, akkor a weboldal jegyezze meg a regisztráltak adatait és a legközelebbi látogatás során töltse ki automatikusan az adatokat.
  7. A weboldalon elérhető telefonszámok, címek legyenek kattinthatók, hogy a látogató azonnali telefonhívást vagy navigációt tudjon kezdeményezni. Az esetek nagy részében pont ebből a célból hívja be mobilon a weboldalt.
  8. Adjunk meg minél több megosztási lehetőséget arra az esetre, ha a látogató a weboldal megtekintését később egy másik eszközről folytatni szeretné.
  9. Az űrlap kitöltések során amikor csak lehet, támaszkodjunk az adott eszköz beviteli lehetőségeire, például a szám billentyűzetre. Apropó adatbevitel: a kitöltendő mezők helyett alkalmazzunk pontosabb és gyorsabb információ megadást lehetővé tévő legördülő listákat és jelölőnégyzeteket. Dátumok kiválasztása során ha lehet alkalmazzunk grafikus megjelenésű naptárat, amelyet könnyebb áttekinteni és amelyben könnyebb navigálni. 
  10. Figyeljünk oda a hibaüzenetek szövegezésére és elhelyezésére. Az űrlap hibaüzenetek közvetlenül a hibás mező felett vagy alatt jelenjenek meg.
  11. Egyszerűsítsük le  az űrlapokat, amennyire csak lehet, használjunk minél kevesebb mezőt. Ne feledd, 3-5 mező felett drámaian csökken az űrlap kitöltési kedv.
  12. A képek elrendezése legyen mindig jól áttekinthető. A képek legyenek jó minőségűek és nagyíthatóak.
  13. A weboldal tartsa a felhasználót a böngészőablakban és ne nyitogasson új ablakokat, mivel mobilon nehézkes több megnyitott ablak között váltogatni.

Összefoglalás

Ha weboldalad reszponzív annak örülök, mert ezek szerint tisztában vagy azzal, hogy a mobilbarát kialakítás elengedhetetlen feltétele a webes jelenlétnek. Ugyanakkor el kell keserítselek, mert azzal, hogy reszponzív weboldalad van, még elképzelhető, hogy rosszul teljesít és sok látogatót veszítesz. A jó hír, hogy analitikia eszközökkel, például a Google Analytics-el ki lehet mutatni, ha a weboldal mobil változatának teljesítménye elmarad az asztali verziótól. De ha nem szeretnéd mélyre ásni magad ezen a területen, akkor elég, ha végigmész cikkem ajánlásain és tüzetesen megvizsgálod weboldalad hogyan teljesít az adott területeken. Ha ezzel sem szeretnél foglalkozni, akkor kattints ide, vedd fel velünk a kapcsolatot, egyeztessünk egy találkozót és beszéljük át hogyan tudunk segíteni!

Tetszett a cikk? Oszd meg!

megosztom