Brug sessionsoptagelser til at forbedre mobiloplevelsen og responsivt design

Lær at bruge sessionsoptagelser til at gøre din hjemmeside nemmere at bruge på mobil. Find problemer med knapper, layout og navigation.

Kladde

Mobilbrugere er anderledes. De har mindre skærme. De bruger touch. De har mindre tålmodighed med besvær. Sessionsoptagelser afslører problemer, der kun findes på mobil, og som test på computer overser. Et formularfelt, der fungerer fint på computer, kan være umuligt på mobil. En knap, der er nem at klikke på på computer, kan være for lille på mobil. Et layout, der er klart på computer, kan være forvirrende på mobil. De, der tester på computer, ser ikke de problemer. Mobiloptagelser gør. En mobilbruger lander på din hjemmeside og prøver at finde rundt. Menuen er for lille. De rammer det forkerte punkt og bliver forvirrede. Optagelsen viser deres kamp. De prøver at udfylde en formular. Felterne er trange. Tastaturet dækker siden. De giver op. Optagelsen viser frustrationen. Optimering til mobil kræver et mobilt blik. Udviklere optimerer til computer. Mobilbrugere har brug for optimering til mobil. Sessionsoptagelser bygger bro. De viser mobilbrugerne, som de faktisk oplever din hjemmeside.

Her forklarer vi, hvordan du bruger sessionsoptagelser til at forbedre mobiloplevelsen og responsivt design.

Find problemer med størrelsen på knapper og præcision ved tryk

Mobil bruger touch. Computer bruger mus. Touch er mindre præcist. En knap, der er stor nok til en musemarkør, er for lille til en finger. Sessionsoptagelser viser problemer med præcision ved tryk, så du kan se dem. En mobilbruger prøver at trykke på en knap. De rammer ved siden af. De prøver igen. De rammer den forkerte knap. Den kamp er usynlig i tal. I optagelser er den tydelig.

Se mobiloptagelser. Rammer de besøgende rigtigt? Eller rammer de ofte ved siden af? Trykker de på den knap, de ville? Eller på den ved siden af? Problemer med præcision viser, at grænsefladen er for tæt pakket.

Små knapper giver fejltryk. For mange knapper tæt på hinanden skaber forvirring. Knapper har brug for plads. Optagelserne viser, hvilke elementer der er svære at ramme. Gør dem større. Sæt dem længere fra hinanden. Så bliver siden nemmere at bruge på mobil.

Se efter brud i layout og tekst, der er svær at læse

Mobilskærme er mindre. Indhold, der er plads til på computer, er der ikke plads til på mobil. Teksten bliver lille. Billeder bliver forvrænget. Layouts går i stykker. Sessionsoptagelser viser problemer med layout på mobil.

Se mobiloptagelser. Kan den besøgende læse teksten? Zoomer de ind for at læse? Giver de op? Tekst, du skal zoome ind på, er for lille. Billeder, der ikke skalerer, er et problem. Layouts, der ikke tilpasser sig, er i stykker.

Responsivt design skal tilpasse layoutet til skærmens størrelse. Hvis optagelserne viser problemer med layout, har det responsive design svigtet. Ret layoutet til mobil. Gør teksten læselig uden zoom. Lad billederne skalere rigtigt.

Find problemer med navigation på mobil

Navigation på mobil er anderledes end på computer. Computer bruger hover. Mobil kan ikke hovere. Computer har plads til menuer. Mobil har ikke. Mobilnavigation må være anderledes. Sessionsoptagelser afslører, når navigation på mobil svigter.

Se mobiloptagelser. Kan den besøgende nå navigationen? Forstår de, hvordan de skal finde rundt? Farer de vild? Klikker de på menupunkter ved et uheld? Problemer med navigation forhindrer, at folk udforsker siden.

Mobilmenuer bruger ofte et hamburgerikon. Hvis de besøgende ikke ser det eller ikke forstår det, svigter navigationen. Mobilmenuer dækker ofte indholdet. Hvis de dækker vigtigt indhold, bliver de besøgende frustrerede. Optagelserne viser problemerne med navigation på mobil. Ret dem med design, der starter på mobil.

Se efter problemer med tastatur og indtastning i formularer

Formularer på mobil er svære. Tastaturet dækker halvdelen af skærmen. Tekstfelter er små. Autofyld virker ujævnt. Sessionsoptagelser viser besværet med formularer på mobil.

Se mobiloptagelser af, hvordan folk bruger formularer. Dukker tastaturet op og dækker formularen? Kan den besøgende se, hvad de skriver? Har de svært ved tastaturet? Hjælper eller forvirrer autofyld? Optagelserne viser, hvor nemme formularerne er at bruge på mobil.

Formularer på mobil kræver et andet design. Brug færre felter. Brug felttyper, der er lavet til mobil. Test, hvordan tastaturet opfører sig. Optagelserne viser, hvad der virker, og hvad der ikke gør.

Sammenlign sessioner på mobil og computer for at finde friktion for hver enhed

Oplevelsen på mobil og computer er forskellig. Friktion kan vise sig på mobil, men ikke på computer. Eller omvendt. Når du sammenligner optagelser, ser du problemer for hver enhed.

Se en optagelse af en mobilbruger, der forlader siden. Se så den tilsvarende optagelse på computer. Dukker de samme problemer op? Eller er de forskellige? Friktion for en bestemt enhed kræver en rettelse til netop den enhed.

Nogle problemer går igen overalt. Uklart værditilbud. Forvirrende navigation. De findes begge steder. Andre problemer hører til en enkelt enhed. Størrelsen på knapper. Tastatur, der dækker. De findes kun på mobil. Find ud af, hvad der er hvad. Ret begge slags på den rigtige måde.

Ofte stillede spørgsmål

Hvad er den mindste anbefalede størrelse på knapper ud fra optagelser på mobil?

Se mobiloptagelser. Hvis de besøgende rammer rigtigt, er størrelsen fin. Hvis de ofte rammer ved siden af, er knapperne for små. Standarden i branchen er mindst 48 gange 48 pixel. Men sessionsoptagelser viser, hvad der virker for dine egne brugere. Nogle har større fingre. Nogle har en rolligere hånd. Adfærden i optagelserne viser, hvilken størrelse der virker for din målgruppe. Med WEMASY's hjemmesidebygger kan du sætte det op direkte på din hjemmeside.

Skal jeg teste mobil på rigtige enheder, eller er data fra optagelser nok?

Brug begge dele. Sessionsoptagelser viser rigtig adfærd på rigtige enheder. Det er uvurderligt. Men du kan ikke teste alle enheder. Brug optagelser til at finde problemer. Brug test på enheder til at forstå, hvordan en bestemt enhed opfører sig. Optagelser svarer på, hvad der er i stykker. Test på enheder svarer på, hvorfor det er i stykker på netop den enhed.

Hvordan ved jeg, om dårlig ydelse på mobil skyldes designet eller nethastigheden?

Se optagelserne. Hvis elementer indlæses langsomt, kan det være nettet. Men hvis elementerne er synlige og alligevel skaber problemer, er det designet. Optag både hurtige og langsomme mobilforbindelser. Se, om designproblemerne består. Problemer med nettet viser sig kun på langsomme forbindelser. Designproblemer viser sig overalt.

Hvilke mobile enheder bør jeg se optagelser fra først?

Tjek dine analytics. Hvilke enheder sender mest trafik? Se optagelser fra dem først. Se derefter mindre almindelige enheder. Men forsøm dem ikke. En enhed med lidt trafik kan have højt frafald. Prioritér efter effekt. Meget trafik og højt frafald er kritisk. Lidt trafik med frafald kan stadig være værd at rette.

Kan sessionsoptagelser hjælpe mig med at vælge mellem responsivt design og en mobilapp?

Delvist. Optagelser viser, om din hjemmeside virker på mobil. Hvis mobiloptagelser viser meget friktion og dårlig konvertering, kan en app måske hjælpe. Men apps har deres egen friktion. Optagelser kan ikke forudsige, om en app bliver en succes. Brug optagelser til at forstå problemerne på mobilsiden. Gør den så god som muligt. Overvej en app, hvis mobilsiden stadig klarer sig dårligt.

Hvordan optimerer jeg til mobiler med forskellige skærmstørrelser, når jeg kun har optagelser fra de populære enheder?

Responsivt design skal virke på tværs af størrelser. Test på flere skærmstørrelser, mens du bygger. Brug optagelser til at finde friktion. Optimer ud fra optagelserne. Test så dine rettelser på andre størrelser. Responsivt design betyder én hjemmeside, der virker på alle størrelser. Optagelserne viser, hvad der skal rettes. Test på flere størrelser sikrer, at rettelsen virker på størrelser, du ikke har optaget.

Brug det med det samme
på din egen hjemmeside.

Start gratis med WEMASY, og byg din side på få minutter.