A mobilos felhasználók mások. Kisebb képernyőt használnak. Érintéssel kezelik az oldalt. Kevesebb türelmük van a súrlódásra. A munkamenet-felvételek olyan mobilspecifikus problémákat tárnak fel, amelyeket az asztali tesztelés nem vesz észre. Egy űrlapmező, amely asztali gépen jól működik, mobilon használhatatlan lehet. Egy gomb, amelyre asztali gépen könnyű kattintani, mobilon túl kicsi lehet. Egy elrendezés, amely asztali gépen világos, mobilon zavaros lehet. Az asztali tesztelők nem látják ezeket a problémákat. A mobilos munkamenet-felvételek igen. Egy mobilos látogató megérkezik az oldaladra. Megpróbál navigálni. A menü túl kicsi. Rossz elemre koppint. Összezavarodik. A felvétel megmutatja a nehézségét. Megpróbál kitölteni egy űrlapot. A mezők szűkek. A billentyűzet eltakarja az oldalt. Elhagyja az oldalt. A felvétel megmutatja a frusztrációt. A mobiloptimalizáláshoz mobilos nézőpont kell. Az asztali fejlesztők asztali gépre optimalizálnak. A mobilos felhasználóknak mobilos optimalizálás kell. A munkamenet-felvételek áthidalják a szakadékot. Úgy mutatják a mobilos felhasználókat, ahogyan valójában megtapasztalják az oldaladat.
Ez a cikk megmutatja, hogyan használd a munkamenet-felvételeket a mobilos élmény és a reszponzív dizájn javításához.
Találd meg az érintési célpontok méretével és a koppintási pontossággal kapcsolatos problémákat
A mobil érintést használ. Az asztali gép egeret. Az érintés kevésbé pontos. Egy gomb, amely elég nagy egér kurzorjának, túl kicsi egy ujjnak. A munkamenet-felvételeken szemmel látható a koppintási pontosság problémája. Egy mobilos látogató megpróbál rákoppintani egy gombra. Elvéti. Újra próbálja. Rossz gombot talál el. Ez a küszködés a mutatókban láthatatlan. A felvételeken egyértelmű.
Nézz mobilos felvételeket. Pontosan koppintanak a látogatók? Vagy gyakran mellényúlnak? A szándékolt gombot találják el? Vagy a mellette lévőt? A koppintási pontosság problémái a felület túlzott sűrűségére utalnak.
A kis gombok koppintási hibákat okoznak. Túl sok, túl közel elhelyezett gomb zavart kelt. Az érintési célpontoknak hely kell. A felvétel megmutatja, mely elemek okoznak koppintási nehézséget. Tedd nagyobbra azokat az elemeket. Helyezd őket távolabb egymástól. A mobilos használhatóság javul.
Figyeld a mobilos elrendezés töréseit és a szöveg olvashatóságát
A mobilképernyők kisebbek. Ami asztali gépen elfér, mobilon nem fér el. A szöveg apró lesz. A képek torzulnak. Az elrendezések eltörnek. A munkamenet-felvételek megmutatják a mobilos elrendezési problémákat.
Nézz mobilos felvételeket. El tudja olvasni a látogató a szöveget? Ráközelít, hogy olvasni tudjon? Feladja az olvasást? Az a szöveg, amelyhez nagyítás kell, túl kicsi. Azok a képek, amelyek nem méreteződnek át, problémát jelentenek. Az elrendezések, amelyek nem alkalmazkodnak, elromlottak.
A reszponzív dizájnnak a képernyő méretéhez kell igazítania az elrendezést. Ha a felvételeken elrendezési problémák látszanak, a reszponzív dizájn nem működött. Javítsd az elrendezéseket mobilra. Tedd a szöveget nagyítás nélkül olvashatóvá. Méretezd át megfelelően a képeket.
Találd meg a mobilos navigáció problémáit
A mobilos navigáció más, mint az asztali. Az asztali gépen működik az egérrel fölé mutatás (hover). Mobilon nem lehet fölé mutatni. Az asztali gépen van hely a menüknek. Mobilon nincs. A mobilos navigációnak másnak kell lennie. A munkamenet-felvételek feltárják a mobilos navigáció hibáit.
Nézz mobilos felvételeket. Eléri a látogató a navigációt? Érti, hogyan kell navigálni? Eltéved? Véletlenül kattint menüpontokra? A navigációs problémák megakadályozzák az oldal felfedezését.
A mobilmenük gyakran hamburger ikont használnak. Ha a látogatók nem látják vagy nem értik, a navigáció csődöt mond. A mobilmenük gyakran eltakarják a tartalmat. Ha fontos tartalmat takarnak el, a látogatók bosszankodnak. A felvétel megmutatja a mobilos navigációs problémákat. Javítsd őket mobile-first dizájnnal.
Figyeld a billentyűzettel és az űrlapkitöltéssel kapcsolatos mobilos problémákat
Az űrlapok mobilon nehézkesek. A billentyűzet eltakarja a képernyő felét. A szövegmezők kicsik. Az automatikus kitöltés következetlenül működik. A munkamenet-felvételek megmutatják a mobilos űrlapok súrlódását.
Nézd meg az űrlapkezelés mobilos felvételeit. Megjelenik a billentyűzet, és eltakarja az űrlapot? Látja a látogató, mit ír? Nehezen boldogul a billentyűzettel? Segít vagy összezavar az automatikus kitöltés? A felvétel megmutatja az űrlap mobilos használhatóságát.
A mobilos űrlapokhoz más dizájn kell. Csökkentsd a mezők számát. Használj mobilra optimalizált beviteli típusokat. Teszteld a billentyűzet viselkedését. A felvétel megmutatja, mi működik és mi nem.
Hasonlítsd össze a mobilos és az asztali munkameneteket az eszközspecifikus súrlódás megtalálásához
A mobilos és az asztali élmény különbözik. A súrlódás megjelenhet mobilon, de asztali gépen nem. Megjelenhet asztali gépen, de mobilon nem. A munkamenet-felvételek összehasonlítása megmutatja az eszközspecifikus problémákat.
Nézz meg egy mobilos lemorzsolódási felvételt. Aztán nézd meg a megfelelő asztali felvételt. Ugyanazok a problémák jelentkeznek? Vagy mások? Az eszközspecifikus súrlódáshoz eszközspecifikus javítás kell.
Egyes problémák általánosak. A nem világos értékajánlat. A zavaros navigáció. Ezek mindkét eszközön megjelennek. Más problémák eszközspecifikusak. Az érintési célpont mérete. A billentyűzet takarása. Ezek csak mobilon jelentkeznek. Állapítsd meg, melyik probléma melyik fajta. Mindkettőt a megfelelő módon javítsd.
Gyakran ismételt kérdések
Mekkora az ajánlott minimális érintési célpont a mobilos munkamenet-felvételek alapján?
Nézz mobilos felvételeket. Ha a látogatók pontosan koppintanak, a célpont mérete rendben van. Ha gyakran mellényúlnak, a célpontok túl kicsik. Az iparági szabvány legalább 48 x 48 pixel. A munkamenet-felvételek viszont megmutatják, mi működik a te felhasználóidnak. Egyeseknek nagyobb az ujja. Másoknak nyugodtabb a keze. A felvételeken látható viselkedés megmutatja, milyen méret működik a közönségednek. A WEMASY weboldalépítőjével ezt közvetlenül a weboldaladon beállíthatod.
Valódi eszközökön teszteljem a mobilt, vagy elég a mobilos munkamenet-felvételek adata?
Használd mindkettőt. A munkamenet-felvételek valódi felhasználói viselkedést mutatnak valódi eszközökön. Ez felbecsülhetetlen. De nem tudsz minden eszközt tesztelni. A felvételekkel azonosítsd a problémákat. Az eszköztesztekkel értsd meg az egyes eszközök sajátos viselkedését. A felvételek azt mondják meg, mi romlott el. Az eszköztesztek azt, miért romlott el az adott eszközön.
Honnan tudom, hogy a mobilos teljesítményproblémákat a dizájn vagy a hálózati sebesség okozza?
Nézd meg a felvételeket. Ha az elemek lassan töltődnek be, a hálózat lehet a gond. De ha az elemek láthatók, mégis problémát okoznak, a dizájn a hibás. Rögzíts gyors és lassú mobilkapcsolaton is. Nézd meg, megmaradnak-e a dizájnproblémák. A hálózati problémák csak lassú kapcsolaton jelentkeznek. A dizájnproblémák mindenhol.
Mely mobileszközök felvételeit nézzem először?
Nézd meg az analitikádat. Mely eszközökről jön a legtöbb forgalom? Először azok felvételeit nézd. Utána a ritkább eszközökét. De ne hanyagold el őket. Egy kis forgalmú eszközön lehet nagy a lemorzsolódás. Hatás szerint rangsorolj. A nagy forgalom és a nagy lemorzsolódás kritikus. A kis forgalom bármilyen lemorzsolódással is javításra szorulhat.
Segíthetnek a munkamenet-felvételek eldönteni, hogy reszponzív dizájnt vagy mobilappot válasszak?
Részben. A felvételek megmutatják, működik-e a mobilos weboldalad. Ha a mobilos felvételeken sok a súrlódás, és gyenge a konverzió, egy mobilapp segíthet. De az appoknak is megvan a saját súrlódásuk. A felvétel nem tudja megjósolni az app sikerét. A felvételekkel értsd meg a mobilos weboldal problémáit. Tedd a mobilos weboldalt a lehető legjobbá. Ha így is gyengén teljesít, fontold meg az appot.
Hogyan optimalizáljak különböző képernyőméretű mobileszközökre, ha csak a népszerű eszközökről van felvételem?
A reszponzív dizájnnak minden méreten működnie kell. A fejlesztés közben tesztelj több képernyőméreten. A felvételekkel találd meg a súrlódást. A felvételek alapján optimalizálj. Aztán teszteld a javításokat más méreteken is. A reszponzív dizájn azt jelenti, hogy egyetlen oldal működik minden méreten. A felvételek megmutatják, mit kell javítani. A tesztlefedettség biztosítja, hogy a javítás azokon a méreteken is működjön, amelyekről nincs felvételed.