Mobilbarát weboldal: 15 pontos UX ellenőrzőlista
Röviden: öt perc alatt is ellenőrizheted
Nyisd meg a weboldalt a telefonodon. Ezután nézd át ezeket a kérdéseket.
- Betöltés közben a nem ugrál a tartalom?
- Nem lógnak ki fontos elemek, mint a főcím, gombok, navigáció?
- A cím olvasható és látszik az első képernyőn is?
- Megtalálod és meg tudod nyomni a gombokat?
- Ha van űrlap, el tudod küldeni probléma mentesen? Nem lóg ki a képernyőről bemeneti mező vagy beküldés gomb?
- Visszajelzést kapsz arról, hogy sikerült a művelet?
Így tesztelj különleges eszközök nélkül
A mérőeszközök segítik a hibák keresését, de nem helyettesítik a teljes kézi áttekintést. Itt az 4 legfontosabb tesztelési módszer:
Valódi telefon
Kapcsold ki a wifit, nyisd meg az oldalt mobilinterneten, és végezd el a legfontosabb látogatói feladatokat (ajánlatkérés, időpont foglalás, stb...).
Keskeny böngészőnézet
Ellenőrizd 320 képpont körüli szélességnél, majd nagyított szöveggel is. Ezt a böngésző Vizsgáló eszközével theted meg.
Billentyűzet
Nyomkodd a Tab billentyűt amíg az oldal végére nem érsz. Figyeld meg, hogy minden gombon, linken és bemeneti mezőn végig tudsz-e haladni, és látszik-e melyik van éppen fókuszban?
PageSpeed Insights
Futtasd le a mobilos mérést, és külön kezeld a valós felhasználói adatokat a laboreredményektől. Mindkettő más kérdésre válaszol.
A PageSpeed Insights valós felhasználói és laboradatokat is megjeleníthet. Ha kevés a látogatás, lehet, hogy csak a laboreredmény érhető el. Ez nem hiba, csak más típusú mérés.
Google: a PageSpeed Insights működése
Miért érdemes a mobilnézetből kiindulni?
Kisebb képernyőn gyorsabban látszik, mi az ami fontos és mi az ami csak dísznek került az oldalra. Kevesebb hely jut a navigációra, a címsorra és a gombokra, ezért a bizonytalan tartalmi sorrend hamarabb feltűnik.
A Google a webhely mobilverziójának tartalmát használja az indexeléshez és rangsoroláshoz, és új webhelyeknél a reszponzív megoldást javasolja. Ez nem jelenti azt, hogy elég egy automatikusan összemenő elrendezés. A fontos tartalomnak, strukturált adatoknak és képleírásoknak mobilon is meg kell maradniuk.
Google: mobilközpontú indexelésTartalom és első képernyő
Először azt ellenőrizd, hogy a tartalom könnyen érthető mobil nézetben is. Egy gyors felület sem segít, ha nem világos, mit lehet rajta csinálni.
1. Az első képernyőn is érthető az ajánlat
Nyisd meg az oldalt úgy, mintha most látnád először. A fejléc és az első néhány mondat alapján már legyen érthető, mit kínálsz, kinek és milyen helyzetben. Ha ehhez görgetni vagy találgatni kell, a probléma nem a képernyő mérete, hanem az üzenet.
2. A fő művelet azonnal megtalálható
Az ajánlatkérés, foglalás, vásárlás vagy kapcsolatfelvétel kapjon egyértelmű helyet. Ne lógjon ki a kijelzőről, könnyen kattintható legyen.
3. Mobilon sem hiányzik fontos tartalom
Hasonlítsd össze az asztali és a mobilos változatot. A rövidebb elrendezés rendben van, de a legfontosabb tartalmak, mint árak, szolgáltatási feltételek, bizalmi elemek és kapcsolatfelvételi lehetőségek ne tűnjenek el csak azért, hogy a mobilnézet jobban nézzen ki.
Elrendezés, navigáció és használhatóság
Nyomd meg a gombokat, nagyítsd fel a szöveget, fordítsd el a telefont, végül próbáld ki billentyűzettel is.
4. Nincs vízszintes görgetés
Normál tartalomnál az oldalnak keskeny nézetben is egy oszlopban kell maradnia. Nézd meg 320px szélességnél is. A széles elemek, például egy táblázat belsőleg legyenek görgethetők, ne a teljes oldalt szélesítsék ki.
5. A navigáció egy kézzel is kezelhető
Nyisd meg és zárd be a menüt, lépj egy aloldalra, majd menj vissza. A lényeg, hogy a fontos menüpontok ne legyenek aprók, egymásra csúszva vagy rejtetve. Mindig látszódjon, hol lehet megnyitni vagy bezárni a menüt.
6. A kattintható elemek elég nagyok és jól elkülönülnek
Próbáld ki, el tudod-e érni hüvelykujjal a gombokat, menüpontokat és ikonokat. Ne legyenek túl kicsik vagy túl közel egymáshoz. A WCAG szerinti alap minimum 24 × 24 CSS-képpont, de a kényelmesebb méret jobb.
7. A szöveg nagyítás nélkül olvasható
Ne csak a címsorokat nézd. Minden szöveg, a bekezdések, címkék, árak és apró kiegészítések is legyenek olvashatók. Nagyítsd 200%-ra az oldalt, és ellenőrizd, hogy a tartalom továbbra is olvasható, a sorok pedig nem fedik egymást.
8. A visszajelzés és a fókusz érintésre is működik
Az interaktálható elemek, például gombok adnak-e visszajelzést lenyomásra, kattintásra.
Űrlapok és kapcsolatfelvétel
Az űrlapot ne csak kitöltött állapotban nézd meg. A legtöbb használhatósági hiba akkor látszik, amikor valami hiányzik, hibás vagy lassan érkezik meg a válasz.
9. Minden bemeneti mezőnek van címkéje
A bemeneti mezőbe írt halvány példa nem helyettesíti a címkét, mert gépelés közben eltűnik. A látogató akkor is lássa, mit kell megadnia, amikor már kitöltötte a mezőt.
10. Csak a valóban szükséges adatokat kérd el
Minden méreten rossz felhasználói élmény lehet sok adatot kitölteni. Mobilon a felesleges mezők több gépelést és több hibalehetőséget jelentenek. Például az első kapcsolatfelvételhez ritkán kell minden céges adat. Kérd el csak azt, ami a válaszhoz szükséges.
11. Hiba és siker jelzése
Tesztelj le minden funkciót. Például küldd el az űrlapot üresen, hibás e-mail-címmel, és helyesen is. A hiba ne csak színnel jelenjen meg, nevezze meg az érintett mezőt és a javítás módját. Sikeres küldés után jelezzen vissza, hogy megérkezett-e az üzenet, és van-e még teendő.
Teljesítmény és vizuális stabilitás
A Core Web Vitals három külön kérdést mér: mikor jelenik meg a fő tartalom, milyen gyorsan reagál az oldal, és mennyire marad stabil betöltés közben. A jó eredményt a látogatások 75. percentilisénél vizsgálják, tehát nem egyetlen gyors teszt alapján.
12. A fő tartalom gyorsan megjelenik
Mobilinterneten is figyeld meg, hogy mennyi ideig nézel üres vagy félig betöltött képernyőt. A Core Web Vitals jelenlegi jó határértéke a legnagyobb tartalmi elem (LCP) betöltésénél 2,5 másodperc vagy kevesebb.
13. A kattintásra gyors válasz érkezik
Nyisd meg a menüt, válts lapot és indíts el egy műveletet. Az interakció ne akadjon meg hosszú időre. Az INP jó tartománya 200 ezredmásodperc vagy kevesebb.
14. Betöltés közben nem ugrál a felület
Ez gyakori. A későn megjelenő kép, betűtípus vagy sütiértesítő ne tolja arrébb a gombot, amelyet éppen megnyomnál. A vizuális stabilitást mérő CLS jó értéke 0,1 vagy kevesebb. A képeknek előre beállított hely sok ilyen problémát megold (akkor is legyen pl. 300px magas, ha még nem töltött be).
15. A felugró elemek nem takarják el az oldalt
Telefonon kifejezetten idegesítő. A túl sok felugró elem miatt ki is léphet a látogató, mielőtt bármit elolvasna. Nézd meg az oldalt új látogatói szemmel. A sütiablak, hírlevél-feliratkozás, chat és alkalmazástelepítési ajánlat együtt ne ugorjon elő.
Mit kezdj az ellenőrzés eredményével?
Ne egyetlen pontszámot próbálj javítani. Csoportosítsd a talált hibákat aszerint, hogy hol keletkeznek.
Egy kisebb hiba gyakran célzottan javítható. Ha viszont ugyanaz a bizonytalanság végigkíséri a navigációt, a tartalmat és a kapcsolatfelvételt, érdemes az egész látogatói útvonalat újratervezni. Én a vállalkozói weboldal készítés során ellenőrzöm a weboldal elrendezést és a tartalom minőségét is minden fontos eszközön.
Ha vállalkozásodhoz szeretnél profi weboldalt, de nem tudod mire van szükséged, előbb nézd meg, hogy milyen weboldalra van szüksége egy induló vállalkozásnak. Ha fejlesztőt keresel, ez a 10 pontos kiválasztási útmutató segít a felmerülő kérdésekben.
Gyakori kérdések a mobilbarát weboldalakról
Mit jelent, hogy egy weboldal mobilbarát?
A mobilbarát weboldal kisebb képernyőn is olvasható, kezelhető és teljes értékű. A tartalom nem lóg ki, a gombok és űrlapok használhatók, a fontos információk elérhetők, az oldal pedig elfogadható időn belül reagál.
Elég, ha a weboldal reszponzív?
A reszponzív elrendezés szükséges alap, de önmagában kevés. Egy oldal technikailag alkalmazkodhat a kijelzőhöz úgy is, hogy a szöveg túl apró, a navigáció nehézkes, az űrlap hosszú vagy a betöltés lassú. A teljes látogatói feladatot kell ellenőrizni.
Hogyan ellenőrizhetem ingyen a mobilos sebességet?
A Google PageSpeed Insights ingyenes eszköze mobilos és asztali mérést is ad. Ha elegendő valós adat áll rendelkezésre, felhasználói tapasztalati adatokat is mutat, a laboreredmények pedig segítenek a konkrét hibák keresésében.
A mobilos hibák befolyásolják a Google-helyezést?
A Google a webhely mobilverzióját használja az indexeléshez és rangsoroláshoz, ezért a mobilon hiányzó tartalom vagy nehezen feltérképezhető felépítés fontos probléma lehet. A Core Web Vitals és az oldalélmény is számíthat, de egyetlen mérőszám sem garantál vagy dönt el önmagában egy helyezést.
Milyen gyakran érdemes újra elvégezni az ellenőrzést?
Nagyobb tartalmi vagy technikai módosítás után mindenképp. Emellett érdemes időszakosan végigpróbálni a fő kapcsolatfelvételi és vásárlási útvonalakat, mert egy külső beágyazás, űrlap vagy frissítés később is okozhat hibát.