13 ting du bør teste på en iPad

Ved du hvor stor trafikken fra tablets er på dit website? Hvis ikke, vil jeg anbefale dig at bruge lidt tid i Google Analytics for at trække disse tal og sammenligne den med trafikken fra mobil og desktop. En klar tendens vi ser er at trafikken fra tablets er støt stigende og i flere tilfælde er den ved at overhale trafikken fra desktop. Gælder det også for dit website bør du give tablets den opmærksomhed de har fortjent, det skylder du både din forretning og kunderne der besøger dit site.

I dette indlæg vil jeg opridse nogle af de faldgrupper du med fordel kan kigge nærmere på for at sikre et touchvenligt website.

1. Hover effekter
Bruger du hover-effekter til produktvisninger, menuer eller sociale ikoner på desktop bør du teste hvor godt disse virker på tablets. I flere tilfælde har jeg oplevet at hover-effekter giver en uheldig oplevelse på tablets.

I nogle tilfælde vises hover-effekten et kort øjeblik hvorefter der navigeres til en ny side. I andre tilfælde aktiveres hover-effekten ved første tryk og ved andet tryk aktiveres selve linket på det element man klikker på. Begge oplevelser rejser hurtigt en række spørgsmål: Hvor blev menuen af der kort blev vist på skærmen? Fik jeg trykket? Er siden igang med at loade? Er disse elementer ikke klikbare?

Som hovedregel bør du slå hover-effekten fra på tablets. Bruger du hover-effekten til navigation kan du overveje blot at optimere denne oplevelse så menuen ikke forsvinder af sig selv på tablets.

2. Input-felter
På touch devices har vi mulighed for at håndtere inputfelter forskelligt og præsentere et tastatur der passer til den enkelte type. Fx numerisk tastatur til telefonnummer, postnummer, EAN nummer og email tastatur til email-adresser og url tastatur til webadresser.

Hvor godt understøtter du dette på dit website? De fleste ved at indtastning på en tablet ikke er den bedste oplevelse men husker vi at understøtte ovenstående øges oplevelsen væsentligt da man ikke skal skifte så meget frem og tilbage mellem forskellige tastaturer.

3. iPad tastatur
Som jeg har været inde på ovenfor er det vigtigt at præsenterer det tastatur der passer til det enkelte inputfelt for at lette indtastningen. Et par andre issues jeg har oplevet med tastaturet er at flere glemmer at skjuler tastaturet efter man har foretaget en søgning. Det betyder at søgeresultatet dukker op under tastaturet og man skal selv til at skjule tastaturet. Desuden har jeg oplevet websites hvor “Søg-knappen” på tastaturet ikke virkede så man var nødt til at trykke på selve søgeknappen på sitet.

4. Checkbox og radiobuttons
Anvender du standard check-bokse og radio-buttons på dit website? De fungere måske fint på desktop men på iPad kan vi gøre det bedre med mere touchvenlige udgaver – size matters. Desuden er det vigtigt at både check-box eller radio-button og tilhørende label er klikbar.

checkbox

På flere sites har jeg oplevet at teksten ikke er klikbar og man er nødt til at ramme selve check-boksen. Er den samtidig i standardstørrelse giver det følelsen af at man først må spidse pegefingeren for at have en chance for at ramme plet.

Du kan med fordel gøre check-boxe og radio-knapper større, labels klikbare og sikre en tilpas linjeafstand mellem hvert element når vi befinder os på en tablet. På den måde sikre du en bedre oplevelse og kunderne kommer hurtigere igennem dine forms.

5. Whitespace
På desktop har vi ofte en højere opløsning og derfor godt med plads til at sikre whitespace i begge sider af sitet og mellem elementer. På en iPad derimod virker det ofte som om man lige præcis har fået plads til indholdet ved at presse det hele lidt sammen. Denne følelse opstår især når tekster, facetter og anden navigation står klods op af skærmens venstrekant mens billeder og produkter står klods op af skærmens højre kant.

Whitespace er ofte tænkt godt ind i de fleste desktopdesigns men skalere ikke altid perfekt ned på en tablet.

6. Søgefelter
På en iPad er vi vant til et kryds (slet knap) i søgefeltet så man hurtigt kan slette en søgning og starte en ny. Når krydset mangler bliver man lidt irriteret fordi det så tager lidt længere tid at starte en ny søgning.

search

Hvis du anvender auto-suggest på dit site bør du teste hvor mange resultater du kan se samtidig med at tastaturet på din tablet vises. I mange tilfælde vil du opleve at søgefeltet med fordel kan placeres øverst på siden for at vise flere resultater.

7. Performance
På flere sites oplever jeg at loadtidene er længere på en iPad end på desktop. Måske du ikke kan tillade dig at præsentere lige mange produkter på en iPad som på desktop? Et andet problem ved loadtiderne er at man ofte kan se hvilke grafikker der loader først og at de ofte først vises midt på skærmen hvorefter de efter lidt tid “falder på plads”.

8. Sticky elementer
Arbejder du med sticky elementer (fx en topnavigation der bliver siddende når man scroller) på et site så vær ekstra opmærksom på hvordan de opfører sig på en tablet.

Jeg har især oplevet at bjælker og menuelementer virker buggy når man begynder at swipe op og ned på siderne. Det drejer sig fx om cookie politik bjælker, topnavigation, facette-bjælker og venstrenavigation der burde være sticky men som ved swipe trækkes ind over andre elementer. I få tilfælde har jeg oplevet at sticky elementer skifter position på sitet og man kan ikke få dem tilbage til den oprindelige position.

9. Swipe me
Forbavsende mange sites understøtter ikke swipe i billedkarruseller på deres websitet. Er du en af dem bør du gøre noget ved det. På tablets er vi vant til at swipe og det er en naturlig måde at vise andre billeder i en billedkarrusel eller i nogle tilfælde til at åbne og lukke elementer.
swipe

10. Google Maps
Anvender du Google maps så vær opmærksom på at for store kort gør det svært at navigere med resten af siden da der ikke er meget at “trække” i. Får man fat i kortet navigere man blot rundt i kortet og ikke siden.

findforhandler11. Lightboxes
Hvordan åbnes lightboxes på en tablet på dit site? Jeg har oplevet flere eksempler på lightboxes hvor den øverste del af lightboksen åbnes under selve browseren så man ikke kan se hele lightboksens overskrift og luk-knap.

12. Hit areas
Generelt er det vigtigt du tænker i store hit areas på tablets. Har du en lille linktekst kan du med fordel give den et stort hit area i baggrunden så den får lov at være diskret men stadig let at ramme.
textlink

Et andet eksempel er tekstlinks i footers, venstrenavigation og mega-menuer der står tæt op ad hinanden. Det gør det svært at ramme de rigtige links. Her kan du med fordel give alle links større linjeafstand og ordentlige hit areas.

Et tredje eksempel er listeelementer hvor det kun er teksterne der er klikbare. Disse fungere dårligt på en tablet, da vi er vant til at hele listelementet er klikbar.

13. Pinch zoom
På trods af at du tager højde for alle ovenstående punkter vil nogle brugere stadig ønske at zoome ind på menuer og billeder når de besøger dit site med en iPad. Vær derfor sikker på at pinch zoom er muligt på dit site.
zoom

Mange bække små
Når man som kunde eller bruger af et site oplever disse uhensigtsmæssigheder opbygges der langsomt et negativt indtryk af sitet og chancen for at kunden bouncer stiger for hver issue de oplever.

Som jeg indledet indlægget med så skylder du både din forretning og dine kunder at løbe listen igennem på dit eget site så du får en klar fornemmelse af hvor imødekommende dit site er for besøgende på en iPad.

Kategorier: Mobil, Tablet

1 kommentar »

Skriv et svar

Udfyld dine oplysninger nedenfor eller klik på et ikon for at logge ind:

WordPress.com Logo

Du kommenterer med din WordPress.com konto. Log Out / Skift )

Twitter picture

Du kommenterer med din Twitter konto. Log Out / Skift )

Facebook photo

Du kommenterer med din Facebook konto. Log Out / Skift )

Google+ photo

Du kommenterer med din Google+ konto. Log Out / Skift )

Connecting to %s