Mobilanvändare är annorlunda. De har mindre skärmar. De använder touch. De har mindre tålamod med friktion. Sessionsinspelningar visar mobilspecifika problem som tester på dator missar. Ett formulärfält som fungerar bra på datorn kan vara omöjligt på mobilen. En knapp som är lätt att klicka på datorn kan vara för liten på mobilen. En layout som är tydlig på datorn kan vara rörig på mobilen. De som testar på dator ser inte de här problemen. Mobila sessionsinspelningar gör det. En mobilbesökare landar på din webbplats. Hen försöker navigera. Menyn är för liten. Hen trycker på fel alternativ. Hen blir förvirrad. Inspelningen visar kampen. Hen försöker fylla i ett formulär. Fälten är trånga. Tangentbordet täcker sidan. Hen ger upp. Inspelningen visar frustrationen. Mobiloptimering kräver ett mobilt perspektiv. De som utvecklar för dator optimerar för dator. Mobilanvändare behöver mobiloptimering. Sessionsinspelningar överbryggar glappet. De visar mobilanvändare precis som de upplever din webbplats.
Den här artikeln förklarar hur du använder sessionsinspelningar för att förbättra mobilupplevelsen och den responsiva designen.
Hitta problem med storlek på tryckytor och träffsäkerhet
Mobilen använder touch. Datorn använder mus. Touch är mindre exakt. En knapp som är stor nog för en muspekare är för liten för ett finger. Sessionsinspelningar visar problem med träffsäkerhet visuellt. En mobilbesökare försöker trycka på en knapp. Hen missar. Hen försöker igen. Hen trycker på fel knapp. Den här kampen syns inte i måtten. I inspelningarna är den tydlig.
Titta på mobila inspelningar. Trycker besökarna rätt? Eller missar de ofta? Trycker de på den knapp de avsåg? Eller på den som sitter bredvid? Problem med träffsäkerhet pekar på att gränssnittet är för tätt.
Små knappar skapar felträffar. För många knappar för nära varandra skapar förvirring. Tryckytor behöver utrymme. Inspelningen visar vilka element som är svåra att trycka på. Gör dem större. Ge dem mer avstånd. Då blir mobilanvändningen bättre.
Se efter trasiga mobillayouter och problem med läsbarhet
Mobilskärmar är mindre. Innehåll som får plats på datorn får inte plats på mobilen. Texten blir liten. Bilder blir förvrängda. Layouter går sönder. Sessionsinspelningar visar problem med mobillayouten.
Titta på mobila inspelningar. Kan besökaren läsa texten? Zoomar hen in för att läsa? Ger hen upp läsningen? Text som kräver zoomning är för liten. Bilder som inte skalas är ett problem. Layouter som inte anpassar sig är trasiga.
Responsiv design ska anpassa layouten efter skärmstorleken. Om inspelningarna visar layoutproblem har den responsiva designen misslyckats. Åtgärda layouterna för mobilen. Gör texten läsbar utan zoomning. Skala bilderna rätt.
Hitta problem med mobil navigering
Mobil navigering skiljer sig från navigering på dator. Datorn har hovringslägen. Mobilen kan inte hovra. Datorn har plats för menyer. Mobilen har det inte. Mobil navigering måste vara annorlunda. Sessionsinspelningar visar var den mobila navigeringen fallerar.
Titta på mobila inspelningar. Kommer besökaren åt navigeringen? Förstår hen hur man navigerar? Går hen vilse? Klickar hen på menyval av misstag? Problem med navigeringen hindrar besökarna från att utforska webbplatsen.
Mobilmenyer använder ofta hamburgerikoner. Om besökarna inte ser dem eller inte förstår dem fallerar navigeringen. Mobilmenyer täcker ofta innehåll. Om de täcker viktigt innehåll blir besökarna frustrerade. Inspelningen visar problemen med mobil navigering. Åtgärda dem med mobile first-design.
Se efter problem med tangentbord och formulär på mobilen
Formulär på mobilen är svåra. Tangentbordet täcker halva skärmen. Textfälten är små. Autofyll fungerar ojämnt. Sessionsinspelningar visar friktionen i mobila formulär.
Titta på mobila inspelningar av formulärinteraktion. Dyker tangentbordet upp och täcker formuläret? Kan besökaren se vad hen skriver? Har hen svårt med tangentbordet? Hjälper eller förvirrar autofyll? Inspelningen visar hur användbart formuläret är på mobilen.
Mobila formulär behöver en annan design. Minska antalet fält. Använd fälttyper som är anpassade för mobil. Testa hur tangentbordet beter sig. Inspelningen visar vad som fungerar och vad som inte gör det.
Jämför mobila sessioner och sessioner på dator för att hitta enhetsspecifik friktion
Upplevelsen på mobil och dator skiljer sig. Friktion kan finnas på mobilen men inte på datorn. Friktion kan finnas på datorn men inte på mobilen. En jämförelse av sessionsinspelningar visar enhetsspecifika problem.
Titta på en mobil inspelning där besökaren hoppar av. Titta sedan på motsvarande inspelning på dator. Syns samma problem? Eller andra? Enhetsspecifik friktion kräver enhetsspecifika åtgärder.
Vissa problem är universella. Otydliga värdeerbjudanden. Förvirrande navigering. De syns på båda. Vissa problem är enhetsspecifika. Storlek på tryckytor. Tangentbord som täcker sidan. De syns bara på mobilen. Ta reda på vilka som är vilka. Åtgärda båda typerna på rätt sätt.
Vanliga frågor
Vilken är den lägsta rekommenderade storleken på en tryckyta utifrån mobila sessionsinspelningar?
Titta på mobila inspelningar. Om besökarna trycker rätt är storleken bra. Om besökarna ofta missar är ytorna för små. Branschstandarden är minst 48 gånger 48 pixlar. Men sessionsinspelningar visar vad som fungerar för just dina användare. Vissa har större fingrar. Vissa har stadigare händer. Beteendet i inspelningarna visar vilken storlek som fungerar för din publik. Med WEMASY webbplatsbyggare kan du ställa in det direkt på din webbplats.
Bör jag testa mobilen på riktiga enheter eller räcker mobila sessionsinspelningar?
Använd båda. Sessionsinspelningar visar verkligt användarbeteende på verkliga enheter. Det är ovärderligt. Men du kan inte testa alla enheter. Använd inspelningar för att hitta problem. Använd enhetstester för att förstå hur specifika enheter beter sig. Inspelningar visar vad som är trasigt. Enhetstester visar varför det är trasigt på just den enheten.
Hur vet jag om mobilproblem beror på designen eller på nätverkshastigheten?
Titta på inspelningarna. Om element laddas långsamt kan nätverket vara orsaken. Men om elementen syns och ändå skapar problem är det designen som är problemet. Spela in både snabba och långsamma mobilanslutningar. Se om designproblemen finns kvar. Nätverksproblem syns bara på långsamma anslutningar. Designproblem syns överallt.
Vilka mobila enheter bör jag prioritera när jag tittar på inspelningar?
Kolla din analys. Vilka enheter ger mest trafik? Titta på inspelningar från dem först. Titta sedan på mindre vanliga enheter. Men försumma dem inte. En enhet med lite trafik kan ha hög avhoppsfrekvens. Prioritera efter effekt. Mycket trafik och hög avhoppsfrekvens är kritiskt. Lite trafik med någon avhoppsfrekvens kan fortfarande behöva åtgärdas.
Kan sessionsinspelningar hjälpa mig att välja mellan responsiv design och en mobilapp?
Delvis. Inspelningar visar om din mobila webbupplevelse fungerar. Om mobila inspelningar visar hög friktion och dålig konvertering kan en mobilapp hjälpa. Men appar har sin egen friktion. Inspelningar kan inte förutsäga hur en app lyckas. Använd inspelningar för att förstå problemen med mobil webb. Gör den mobila webben så bra som möjligt. Överväg en app om den mobila webben fortfarande presterar dåligt.
Hur optimerar jag för mobila enheter med olika skärmstorlekar när jag bara har inspelningar från populära enheter?
Responsiv design ska fungera i alla storlekar. Testa på flera skärmstorlekar under utvecklingen. Använd inspelningar för att hitta friktion. Optimera utifrån inspelningarna. Testa sedan åtgärderna på andra storlekar. Responsiv design betyder en webbplats som fungerar i alla storlekar. Inspelningarna visar vad som behöver åtgärdas. Testtäckningen säkerställer att åtgärden fungerar i storlekar du inte har spelat in.