Számítógépen rendezettnek és igényesnek látod a weboldaladat. Mobiltelefonon azonban már nem ilyen meggyőző az összkép.
Kilóg a szöveg és a kép a képernyőről, túl aprók vagy éppen óriásiak a betűk, nehéz megnyitni a menüt, vagy a kapcsolatfelvételi gombot eltakarja egy dizájnelem. Az is előfordulhat, hogy látszólag minden elem a helyén van, a weboldal használata mégis kényelmetlen a látogatók számára.
Ha a látogató telefonról nem tudja könnyen megtalálni az információkat, kitölteni az ajánlatkérő űrlapot, időpontot foglalni vagy vásárolni, valószínűleg nem fog a laptopja elé ülni csupán azért, hogy újra megpróbáljon elérni.
Egyszerűen keres egy másik szolgáltatót, akinek a weboldalát könnyebben tudja használni.
A reszponzív megjelenés még nem jelent automatikusan mobilon jól használható weboldalt
A reszponzív weboldal elvileg alkalmazkodik a különböző képernyőméretekhez. Erről részletesebben a Mit jelent a reszponzív weboldal? című cikkemben olvashatsz.
Attól azonban, hogy az elemek elférnek a mobil kijelzőjén, az oldal még nem feltétlenül lesz könnyen használható a látogatóidnak.
Lehet, hogy:
- minden szöveg olvasható, de túl hosszúak a bekezdések;
- az űrlap elfér, de körülményes a kitöltése;
- a menü megnyílik, de nem lehet benne könnyen tájékozódni;
- a weboldal működik, de mobilneten nagyon lassan töltődik be.
A valódi kérdés tehát nem az, hogy „reszponzív-e” a weboldalad. Inkább ez:
Telefonról is könnyen el tudja érni rajta a látogató azt, amiért jött?
A Google is a weboldalad mobilos változatából indul ki
A mobilos megjelenés nemcsak a látogatók miatt fontos.
A Google a weboldalak mobilos változatát használja az indexelés és a rangsorolás alapjaként. Ez azt jelenti, hogy a kereső elsősorban azt a tartalmat vizsgálja, amely mobilon elérhető. Ha egy fontos szövegrész csak asztali gépen jelenik meg, mobilon viszont el van rejtve vagy nem töltődik be, akkor a Google sem feltétlenül kap teljes képet az oldal tartalmáról.
A Google mobilközpontú indexelésről szóló hivatalos útmutatója ezért azt javasolja, hogy a mobilos és az asztali változat ugyanazokat a fontos tartalmakat és metaadatokat tartalmazza.
A Google arra is felhívja a figyelmet, hogy a jó felhasználói élményt nem egyetlen mérőszám vagy beállítás adja. A mobilos megjelenés, a betöltési sebesség, a vizuális stabilitás, a biztonság és a tartalom hozzáférhetősége együtt számít.
Nézzük meg azt a kilenc hibát, amely miatt mobilon elveszítheted a látogatóidat.
1. Kilógnak az elemek a képernyőről
Az egyik leglátványosabb mobilos hiba, amikor egy kép, egy szöveg, vagy egy táblázat szélesebb a kijelzőnél.
Ilyenkor a látogatónak oldalra kell görgetnie, ha látni akarja a tartalmat. De személyes gyakori tapasztalatom az is, hogy még az oldalra görgetés sem lehetséges egy adott oldalon (vagyis a tartalom egy része egyszerűen egyáltalán nem látható).
Ez a hiba nem mindig jelenik meg minden telefonon. Lehet, hogy egy nagyobb kijelzőn még megfelelő az elrendezés, egy keskenyebb készüléken viszont már szétesik. Ezért nem elegendő egyetlen mobilméreten ellenőrizni a weboldalt.
2. Túl kicsi vagy nehezen olvasható a szöveg
Mobilon gyakran mozgás közben vagy változó fényviszonyok között olvasunk tartalmakat.
Ezért fontos arra figyelni, hogy ha a betűméret túl kicsi, a sorok túlságosan közel vannak egymáshoz, vagy nincs megfelelő kontraszt a szöveg és a háttér között, az olvasás fárasztóvá (gyakran idegesítővé) válik.
Asztali nézetben egy hosszabb bekezdés például még átláthatónak tűnhet. Ugyanez mobilon akár egy teljes képernyőt kitöltő szövegfallá válhat.
Érdemes rövidebb bekezdéseket, egyértelmű alcímeket és felsorolásokat használni. Ezek nemcsak a mobilos olvasást könnyítik meg, hanem abban is segítenek, hogy a látogató gyorsan megtalálja a számára fontos részt.
3. Nehéz megnyomni a gombokat és a linkeket
Asztali gépen az egérrel egészen apró elemeket is pontosan ki tudunk választani. Telefonon azonban az ujjunkkal érintjük meg a kijelzőt.
Ha a gomb túl kicsi, vagy kattintható tartalom esetleg túl közel kerül egymáshoz, könnyű elhibázni a kattintást.
GYakran látok ilyen problémát:
- a mobilmenüben;
- a lapozó gomboknál;
- termékváltozatok kiválasztásakor;
- dátum- és időpontválasztásnál;
- vagy az űrlap jelölőnégyzeteinél.
Az ajánlatkérő és időpontfoglaló gombokat érdemes úgy elhelyezni, hogy könnyen észrevehetők és kényelmesen megérinthetők legyenek.
Arra is figyelni kell, hogy a gomb ne nyúljon túl a képernyő szélén, illetve a felirata ne csúnyán tördelve jelenjen meg több sorban.
4. A mobilmenüben nem lehet könnyen tájékozódni
A számítógépen jól működő menü mobilon általában egy lenyitható, úgynevezett hamburger menüvé alakul. Ez önmagában teljesen rendben van. A probléma akkor kezdődik, ha a menü:
- nem nyílik le;
- megnyílik, de nem lehet bezárni miután kiválasztottam az engem érdeklő oldalt;
- túl sok menüpontot tartalmaz;
- több egymásba ágyazott szintből áll;
- kitakarja a teljes képernyőt;
- görgetés közben eltűnik a bezáró gomb;
- más elemek mögé kerül;
- nem jelzi egyértelműen a lenyitható almenüket.
Ha egy látogató a menüben nem találja meg azonnal a fő szolgáltatásaidat vagy a kapcsolatfelvételi lehetőséget, valószínűleg nem fog hosszasan keresgélni.
Mobilon még fontosabb az egyszerű, logikus menüszerkezet. Nem érdemes minden egyes aloldalt a főmenüben felsorolni. A legfontosabb információk legyenek gyorsan elérhetők, a kapcsolódó tartalmakat pedig más módon is összekötheted.
5. A képek rosszul vágódnak vagy kitakarják a tartalmat
A széles, fekvő képek mobilon teljesen más arányú területre kerülnek.
Ha nincs megfelelően beállítva a kép elhelyezkedése, levágódhat:
- egy ember arca;
- a termék fontos része;
- egy felirat a képen;
- a szolgáltatást bemutató tevékenység;
- a kép egész mondanivalója.
Gyakori probléma az is, hogy egy háttérkép mobilon másképpen kerül a szöveg mögé, és ezáltal a szöveg olvashatatlanná válik.
Sok esetben én például nem ugyanazt a képet teszem ugyanarra az oldalra az asztali és a mobil nézetben, pont a fenti problémás megjelenések elkerülése céljából. Előfordulhat, hogy csak másképpen vágjuk meg ugyanazt a képet, de az is gyakori, hogy egy teljesen másik képet használunk.
A képeket a betöltési sebesség miatt is érdemes megfelelő méretben és formátumban feltölteni.
6. Az ajánlatkérő vagy időpontfoglaló űrlap mobilon nehezen használható
A látogató eljutott odáig, hogy kapcsolatba szeretne lépni veled. Megnyitja az űrlapot, de a kitöltés közben valami félremegy.
Például:
- túl sok adatot kérsz;
- aprók a beviteli mezők, nehezen tud belelépni a mezőbe, hogy kitöltse;
- nem egyértelmű a hibajelzés, hogy mit kell javítania;
- a dátumválasztó kilóg a képernyőről;
- a küldés gomb nem látható;
- nem lehet elfogadni az adatkezelési tájékoztatót;
- a sikeres elküldés után nem érkezik visszajelzés.
Időpontfoglalóknál, webáruházaknál és több lépésből álló ajánlatkérőknél különösen fontos a teljes folyamat ellenőrzése. Nem elegendő megnyitni az első képernyőt. Végig kell menni a teljes folyamaton úgy, mintha valódi ügyfél lennél. Egyetlen hibás lépés is elég ahhoz, hogy elveszítsd azt az érdeklődőt, aki már majdnem felvette veled a kapcsolatot.
7. A felugró ablak vagy a sütiértesítő elfoglalja a kijelzőt
A számítógépen visszafogottnak tűnő felugró ablak mobilon könnyen elfoglalhatja a teljes képernyőt.
Ha a bezáró ikon teljesen kilóg a látható területről, vagy a háttértől alig eltérő a színe, de a popup mérete miatt még mellékattintani sem tudunk, akkor ezzel a számodra hasznosnak tűnő felugró (marketing) tartalommal már buktad is az összes látogatót, hiszen nem tudnak hozzáférni az oldaladhoz.
Hasonló problémát okozhat:
- a túl magas sütiértesítő;
- a folyamatosan látható kapcsolat gomb;
- a chatablak;
- az alul folyton felvillanó hírlevél-feliratkozás stb.
Ezek külön-külön hasznos funkciók lehetnek. Azonban azt vettem észre, hogy mobilon szinte soha nem történik meg a tesztelésük. (A sütiértesítő miatt ezeket a teszteket inkognitó módban érdemes végezni.)
Összességében mindezekre egyben igaz, hogy mobilon minden rögzített és felugró elemnél különösen fontos figyelni a mértékletességre. A kevesebb mindig több ezekben a helyzetekben.
8. Mobilneten túl lassan töltődik be az oldal
Előfordulhat, hogy a weboldalad az otthoni vagy irodai wifin gyorsnak tűnik, mobilinterneten viszont hosszú másodpercekig csak egy üres terület vagy betöltést jelző animáció látható.
A lassulást okozhatja többek között:
- túl nagy méretű kép;
- automatikusan induló videó;
- sok betűtípus;
- túl sok bővítmény;
- egymást átfedő bővítményfunkciók;
- feleslegesen betöltődő kódok;
- külső szolgáltatásból érkező tartalom;
- marketing statisztikákkal szolgáló bővítmények kódjai;
- összetett animációk;
- hibás gyorsítótár-beállítás;
- gyenge tárhely teljesítmény.
Ami vezetékes interneten alig észrevehető késés, mobilon már komoly türelmet igényelhet.
A Google Core Web Vitals mutatói a betöltési sebesség mellett az interakciók válaszidejét és a vizuális stabilitást is vizsgálják. Ugyanakkor azt is hangsúlyozzák, hogy nincs egyetlen olyan mérőszám, amely önmagában meghatározná a weboldal minőségét. A tökéletes pontszám (100%) hajszolása helyett ezért úgy gondolom, hogy mindig inkább a látogatók számára fontos, valódi felhasználhatósági hibákat érdemes kijavítanunk.
9. Csak az oldalépítő mobilnézetében ellenőrizted a megjelenést
Az Elementor és más oldalépítők lehetővé teszik, hogy szerkesztés közben átválts mobilnézetre. Ez nagyon hasznos, de nem helyettesíti a valódi telefonon történő tesztelést. A szerkesztő előnézete nem mindig mutatja meg pontosan, hogy hogyan viselkedik az oldal egy adott böngészőben, és egy adott kijelző méretnél.
A weboldalt ezért mindig érdemes inkognitóablakban és valódi készüléken is végigpróbálni.
Ha van rá lehetőséged, ne csak a saját telefonodon nézd meg. Egy másik képernyőméret, operációs rendszer vagy böngésző olyan hibát is megmutathat, amely nálad nem jelentkezik. (Természetesen nem lehet reális elvárás az, hogy minden forgalomban lévő mobilkészüléken tökéletesen jelenjünk meg, én általában beérem annyival, hogy a saját telefonomon kívül az ügyfél telefonján és tabletjén is végignézünk minden aloldalt és űrlapot.)
Az AI elkészítheti helyetted a mobilos beállításokat?
Az AI ma már képes Elementor-elrendezést tervezni, CSS-kódot írni, töréspontokat javasolni és mobilos hibák lehetséges okait felsorolni.
Megfelelő hozzáféréssel akár közvetlenül módosíthatja is egy weboldal fájljait vagy beállításait. És ez sok esetben valóban felgyorsíthatja a munkát.
A probléma inkább mindig ott kezdődik, hogy szakértően kommunikáltad-e a promptot az AI agentnek. Mert előfogrulhat, hogy az AI által készített elrendezés szép lett egy adott képernyőméreten, miközben más méretekben használhatatlan marad.
Egy általános prompt, például az, hogy „tedd mobilbaráttá ezt az oldalt”, nem határozza meg pontosan:
- mely kijelzőméreteken kell ellenőrizni;
- mely elemekre fókuszáljon, mik a legfontosabbak;
- mi maradhat el mobilon;
- hogyan működjön a menü;
- milyen legyen az ajánlatkérési folyamat;
- milyen más bővítmények beállításaira kell figyelni stb.
Ha a weboldal tulajdonosaként nem tudod pontosan, hogy mire kell figyelned a prompt megírásakor, könnyen eredményezhet ez egy látszólag megfelelő megoldást.
Tehát az AI ma már ebben is kiváló munkaeszköz lehet, de szükség van pontos, szakmai meghatározásokra és valódi készülékeken végzett tesztelésekre.
Így ellenőrizd a saját weboldaladat mobilon
Nyisd meg a weboldaladat a telefonodon inkognitóablakban, és most ne tulajdonosként nézd. Képzeld el, hogy először jársz az oldalon, és egy konkrét szolgáltatást keresel.
Próbáld végig az alábbiakat:
- Néhány másodperc alatt kiderül, mivel foglalkozik a vállalkozás?
- Nagyítás nélkül is kényelmesen olvasható a szöveg?
- Sehol nem kell oldalra görgetni?
- Könnyen megnyitható és bezárható a menü?
- Megtalálható a keresett szolgáltatás?
- Jól láthatók és megérinthetők a gombok?
- Helyesen jelennek meg a képek?
- Kitölthető és elküldhető az ajánlatkérő űrlap?
- Végig működik az időpontfoglalás vagy a vásárlás?
- Nem takarja ki a tartalmat felugró ablak vagy sütiértesítő?
- Elfogadható idő alatt betöltődik az oldal mobilinterneten?
- Egyértelmű, mi történik a kapcsolatfelvétel után?
Érdemes megkérned valakit, aki nem ismeri jól a weboldaladat, hogy keressen meg rajta egy szolgáltatást és próbáljon ajánlatot kérni. És persze ne mondd el előre, hova kell kattintania. Figyeld meg, hol akad el, mit nem vesz észre, és melyik kifejezést nem érti. Ezekből sokkal többet tudhatsz meg, mint egy automatikus teszt százalékos pontszámaiból.
Elég néhány javítás, vagy teljes felújításra van szükség?
Erre a kérdésre pontos választ mindig a teljeskörű weboldalelemzés után tudok neked mondani. Hiszen az elemzés során több más vizsgálat mellett, megnézem a tartalmak olvashatóságát, a menüt, a gombokat, az űrlapokat, a látogatói útvonalat, a betöltődést és a fontos funkciók használhatóságát is.
Az elemzés végén részletes felújítási tervet kapsz. Ebből pontosan látni fogod, mely hibák igényelnek gyors javítást, és mikor érdemes átfogóbban újragondolni a weboldalt.
[Megnézem, mit tartalmaz a teljes körű weboldalelemzés]
Gyakori kérdések
Mit jelent, ha egy weboldal mobilbarát?
A mobilbarát weboldal könnyen olvasható, gyorsan betöltődik, érintéssel kényelmesen kezelhető, és minden fontos funkciója használható mobilról is.
Miért néz ki jól az oldal az Elementor mobilnézetében, a telefonomon mégsem?
Az Elementor előnézete egy kiválasztott képernyőszélességet szimulál, és azt sem mindig tökéletesen. Nem mutatja meg a különböző telefonok, böngészők, érintési műveletek, virtuális billentyűzetek és mobilhálózatok hatását. Ezért valódi készüléken is szükséges tesztelni.
Befolyásolja a Google-helyezést a mobilos megjelenés?
A Google mobilközpontú indexelést használ, és a jó oldalélményhez a megfelelő mobilos megjelenés is hozzátartozik. A mobilbarát kialakítás önmagában nem garantál jó helyezést, de a hibás vagy hiányos mobilos oldal akadályozhatja a látogatókat és a keresőt is, ezáltal biztosan rontja a helyezéseidet a keresőben.
Kijavíthatja az AI a weboldalam mobilos hibáit?
Az AI segíthet a hibák lehetséges okainak feltárásában és kódot is készíthet a javításhoz. Az eredményt azonban több képernyőméreten és valódi készüléken is ellenőrizni kell. A generált kód más beállításokra és funkciókra is hatással lehet, ezért érdemes szakmai ismeretek mentén együttműködni az AI-val.
Minden mobilos hiba miatt fel kell újítani a teljes weboldalt?
Nem. Néhány elszigetelt megjelenési probléma általában célzottan javítható. Ha azonban a menü, a tartalom, a funkciók és a technikai alapok is több helyen hibásak, hosszú távon indokoltabb lehet az átfogó felújítás.
