Mobilní uživatelé jsou jiní. Mají menší obrazovky. Ovládají web dotykem. Mají méně trpělivosti s tím, co překáží. Nahrávky relací odhalí problémy specifické pro mobil, které testování na počítači přehlédne. Políčko formuláře, které na počítači funguje dobře, může být na mobilu nepoužitelné. Tlačítko, na které se na počítači snadno klikne, může být na mobilu příliš malé. Rozložení, které je na počítači přehledné, může být na mobilu matoucí. Testeři na počítači tyto problémy nevidí. Mobilní nahrávky relací ano. Mobilní návštěvník přijde na váš web. Zkouší se orientovat. Menu je příliš malé. Klepne na špatnou položku. Zmate se. Nahrávka ukáže jeho potíže. Zkusí vyplnit formulář. Políčka jsou stísněná. Klávesnice zakryje stránku. Odejde. Nahrávka ukáže jeho frustraci. Optimalizace pro mobil vyžaduje mobilní pohled. Vývojáři na počítači optimalizují pro počítač. Mobilní uživatelé potřebují optimalizaci pro mobil. Nahrávky relací tu mezeru překlenou. Ukážou mobilní uživatele tak, jak váš web skutečně zažívají.
Tento článek vysvětluje, jak pomocí nahrávek relací zlepšit mobilní zážitek a responzivní design.
Najděte problémy s velikostí dotykových prvků a přesností klepnutí
Mobil se ovládá dotykem. Počítač myší. Dotyk je méně přesný. Tlačítko, které je dost velké pro kurzor myši, je pro prst příliš malé. Nahrávky relací problémy s přesností klepnutí ukážou vizuálně. Mobilní návštěvník se snaží klepnout na tlačítko. Mine. Zkusí to znovu. Trefí špatné tlačítko. Tato snaha v metrikách není vidět. V nahrávkách je jasná.
Sledujte mobilní nahrávky. Klepou návštěvníci přesně. Nebo často míjejí. Klepnou na zamýšlené tlačítko. Nebo na to vedle. Problémy s přesností klepnutí ukazují, že je rozhraní příliš nahuštěné.
Malá tlačítka způsobují chybná klepnutí. Příliš mnoho tlačítek příliš blízko sebe vyvolává zmatek. Dotykové prvky potřebují prostor. Nahrávka ukáže, které prvky způsobují potíže s klepáním. Zvětšete je. Dejte je od sebe dál. Použitelnost na mobilu se zlepší.
Všímejte si rozpadu rozložení na mobilu a problémů s čitelností textu
Mobilní obrazovky jsou menší. Obsah, který se vejde na počítač, se nevejde na mobil. Text se zmenší. Obrázky se zdeformují. Rozložení se rozpadne. Nahrávky relací problémy s mobilním rozložením ukážou.
Sledujte mobilní nahrávky. Přečte návštěvník text. Přibližuje si ho, aby ho přečetl. Vzdá čtení. Text, který vyžaduje přibližování, je příliš malý. Obrázky, které se nezmenší, jsou problém. Rozložení, která se nepřizpůsobí, jsou rozbitá.
Responzivní design má přizpůsobit rozložení velikosti obrazovky. Pokud nahrávky ukazují problémy s rozložením, responzivní design selhal. Opravte rozložení pro mobil. Udělejte text čitelný bez přibližování. Obrázky vhodně škálujte.
Najděte problémy s mobilní navigací
Mobilní navigace je jiná než na počítači. Počítač používá stavy po najetí myší. Mobil najet nemůže. Na počítači je místo pro menu. Na mobilu ne. Mobilní navigace musí být jiná. Nahrávky relací selhání mobilní navigace odhalí.
Sledujte mobilní nahrávky. Dostane se návštěvník k navigaci. Chápe, jak se orientovat. Ztratí se. Klikne na položky navigace omylem. Problémy s navigací brání prozkoumání webu.
Mobilní menu často používají ikonu hamburgeru. Pokud ji návštěvníci nevidí nebo jí nerozumějí, navigace selže. Mobilní menu často zakrývají obsah. Pokud zakryjí důležitý obsah, návštěvníci se rozčílí. Nahrávka ukáže problémy s mobilní navigací. Opravte je designem s důrazem na mobil.
Všímejte si potíží s klávesnicí a zadáváním do formulářů na mobilu
Formuláře na mobilu jsou obtížné. Klávesnice zakryje půlku obrazovky. Textová pole jsou malá. Automatické doplňování funguje nespolehlivě. Nahrávky relací ukážou tření u mobilních formulářů.
Sledujte mobilní nahrávky práce s formulářem. Objeví se klávesnice a zakryje formulář. Vidí návštěvník, co píše. Potýká se s klávesnicí. Pomáhá automatické doplňování, nebo mate. Nahrávka ukáže použitelnost formuláře na mobilu.
Mobilní formuláře potřebují jiný design. Omezte počet polí. Používejte typy vstupu optimalizované pro mobil. Otestujte chování klávesnice. Nahrávka ukáže, co funguje a co ne.
Porovnejte relace na mobilu a na počítači a najděte tření podle zařízení
Zážitek na mobilu a na počítači se liší. Tření se může objevit na mobilu, ale ne na počítači. Nebo naopak. Porovnání nahrávek relací ukáže problémy podle zařízení.
Sledujte nahrávku opuštění na mobilu. Pak sledujte odpovídající nahrávku na počítači. Objevují se stejné problémy. Nebo jiné. Tření specifické pro zařízení vyžaduje opravy specifické pro zařízení.
Některé potíže jsou univerzální. Nejasná nabídka. Matoucí navigace. Ty se objeví na obou zařízeních. Jiné jsou specifické pro zařízení. Velikost dotykových prvků. Zakrytí klávesnicí. Ty se objeví jen na mobilu. Určete, které jsou které. Opravte oba druhy vhodným způsobem.
Časté otázky
Jaká je doporučená minimální velikost dotykového prvku podle mobilních nahrávek relací?
Sledujte mobilní nahrávky. Pokud návštěvníci klepou přesně, velikost je v pořádku. Pokud často míjejí, jsou prvky příliš malé. Standard v oboru je minimálně 48 pixelů na 48 pixelů. Nahrávky relací ale ukážou, co funguje pro vaše konkrétní uživatele. Někdo má větší prsty. Někdo klidnější ruku. Chování v nahrávkách ukáže, jaká velikost sedí vašemu publiku. S Tvůrcem webů WEMASY to můžete nastavit přímo na svém webu.
Mám mobil testovat na skutečných zařízeních, nebo stačí data z mobilních nahrávek relací?
Použijte obojí. Nahrávky relací ukazují skutečné chování uživatelů na skutečných zařízeních. To je k nezaplacení. Nemůžete ale otestovat každé zařízení. Nahrávky použijte k nalezení problémů. Testování na zařízení použijte k pochopení chování konkrétního zařízení. Nahrávky odpoví, co je rozbité. Testování na zařízení odpoví, proč je to rozbité právě na tomto zařízení.
Jak poznám, jestli jsou problémy s výkonem na mobilu způsobené designem, nebo rychlostí sítě?
Sledujte nahrávky. Pokud se prvky načítají pomalu, může být problém v síti. Pokud jsou ale prvky vidět a stejně způsobují potíže, problém je v designu. Zaznamenejte rychlá i pomalá mobilní připojení. Zjistěte, jestli problémy s designem přetrvávají. Problémy se sítí se objeví jen na pomalých připojeních. Problémy s designem všude.
Z jakých mobilních zařízení mám nahrávky sledovat přednostně?
Zkontrolujte analytiku. Která zařízení posílají nejvíc návštěvnosti. Nahrávky z nich sledujte jako první. Pak sledujte méně běžná zařízení. Nezanedbávejte je. Zařízení s nízkou návštěvností může mít vysokou míru opuštění. Určete pořadí podle dopadu. Vysoká návštěvnost a vysoké opuštění je kritické. Nízká návštěvnost s jakýmkoli opuštěním může také potřebovat opravu.
Pomohou mi nahrávky relací rozhodnout se mezi responzivním designem a mobilní aplikací?
Částečně. Nahrávky ukážou, jestli váš mobilní web funguje. Pokud mobilní nahrávky ukazují vysoké tření a špatnou konverzi, může pomoci mobilní aplikace. Aplikace ale mají své vlastní tření. Nahrávka úspěch aplikace nepředpoví. Nahrávky použijte k pochopení problémů mobilního webu. Udělejte mobilní web co nejlepší. Aplikaci zvažte, pokud mobilní web stále zaostává.
Jak optimalizovat pro mobilní zařízení s různými velikostmi obrazovek, když mám nahrávky jen z oblíbených zařízení?
Responzivní design má fungovat napříč velikostmi. Při vývoji testujte více velikostí obrazovky. Pomocí nahrávek hledejte tření. Optimalizujte podle nahrávek. Pak opravy otestujte na dalších velikostech. Responzivní design znamená jeden web, který funguje na všech velikostech. Nahrávky ukážou, co je třeba opravit. Pokrytí testy zajistí, že oprava funguje i na velikostech, které jste nenahrávali.