Blogg

Designa för touchenheter

Att designa för touchenheter kan vara en klurig utmaning. Här får du goda råd och tips på hur du kan tänka gällande placering av innehåll för att få besökaren att interagera optimalt med din digitala lösning.

Artikelverktyg:

Vi kan inte längre vara säkra på hur användaren interagerar med webbsidan

Sedan konceptet responsive design (och i viss mån innan dess med fluid layout) etablerades har vi börjat inse att vi inte längre kan vara säkra på vilken skärmstorlek användaren kommer att ha. Dessutom sedan mobilernas intåg kan vi inte heller vara säkra på vilka input-verktyg (mus, tangentbord och touch) användaren kommer ha. Skärmstorlek allena ger oss vissa ledtrådar, men en gammal dator med mus och tangentbord har ofta lägre upplösning än moderna surfplattor (med touch). Det är med andra ord inte en bra idé att göra en touch-anpassad design som används när upplösningen är liten.

Design för mobiler är inte samma sak som design för touch

För att röra till det ytterligare har det kommit datorer ("desktop") med touchskärmar (Chromebooks etc.) och dessutom finns det en del sanna hybrider som Microsoft Surface. Så det handlar inte längre om att användaren har touch eller mus. Användaren kan ha bägge tillgängliga samtidigt - och dessutom växla mellan dem.

Från det digitala till det fysiska

Tidigare har vi enbart behövt bekymra om oss hur saker förhöll sig till vartannat på skärmen. Hur stor del som var meny kontra innehåll samt rubrikhierarkier och bilder. Vi har vetat vilken precision vi kan förvänta oss av användaren.

Nu blir det komplicerat när användarna har möjlighet att interagera med sidan med hjälp av fysiska verktyg: Sina fingrar. Dels har fingrarna en låg precision i klicket, dels skymmer fingret och handen det man interagerar med. Så hur stor är knappen relativt layouten, och hur stor är den kontra användarens finger?

Sättet användaren håller i telefonen styr interaktionen

En herre vid namn Steve Hoober gjorde en fältstudie i hur folk håller i sina telefoner. Han kom fram till att det finns tre dominerande distinkta sätt (procentandel inom parentes):

Tre sätt att hålla i en mobiltelefon

1. Med en hand och med tummen som "pekare" (49%)

2. Två händer, en som håller i telefonen, och den andra handen som "pekare" (36%)

3. Bägge händerna, och bägge tummarna som "pekare" (15%)

Det framkom också att användaren växlar regelbundet mellan de olika sätten beroende på vad som skulle utföras och andra omständigheter. I alternativ 2 visade det sig nästan lite oväntat att i majoriteten av fallen (72%) användes tummen som pekare. Om man lägger samman fall 1, 3 och fall 2 med tumme så får man fram att 75% av användarnas interaktion sker med tummen!

Tummen är trots dess uppenbarligen evolutionära fördel rätt begränsad när det kommer till räckvidd. Tummens räckvidd sträcker sig som en solfjäder från handen, och inom detta område är det mer eller mindre smidigt/bekvämt att använda den (Det bekväma området sträcker sig som en banan från mitten av nedre kanten till motsatta sidan skärmen, och upp ungefär till mitten av övre delen av skärmen).

Schematisk bild över tummens räckvidd vid enhandsgrepp och stående läge

Vad har vi då för nytta av denna kunskapen? Jo om vi vill att användaren ska göra något så bör vi placera knappen för det i den bekväma zonen, Lämpligen i mitten av skärmens nederkant. Mittendelen skulle kunna vara ett alternativ, men den delen av skärmen används ju oftast för innehåll, och om vi placerar element där kommer inte bara knappen konkurrera med innehållet, även användarens hand kommer att täcka en stor del av det.

Detta leder till en användbar tumregel (Pun intended): Placera innehåll överst, interaktion nederst.

Då lägger vi knapparna längst ner...Eller?

Det finns inga regler utan undantag, så även i detta fall. Undantaget består i att på Androidenheter finner man operativsystemets funktionsknappar längs botten av skärmen. Placeringen av dem är i och för sig högst rationell, men gör det olämpligt att placera appars knappar ovanför dem. Risken att användaren klickar fel blir för stor.

...och på webben?

På webben kompliceras saker och ting ytterligare. Dels rent tekniska begränsningar: Det naturliga sättet att lösa det med css deklarationen postition:fixed; är extremt buggig och oförutsägbar mellan olika enheter. Dels är det sannolikt inte ens önskvärt att skapa fasta kontroller som tar upp dyrbar skärmyta och tar plats från innehållet (speciellt om man använder telefonen i liggande läge). Glöm inte att innehållet också är en yta för interaktion: Användaren drar sina fingrar över det för att scrolla. Dessutom har webbläsarna i mobiler har ofta sina kontroller längs botten, så återigen får vi problemet med felklick.

Så slutsaten blir (åtminstone för tillfället) att undvika att placera kontroller fixerat på skärmen över huvud taget.

Lösningen kan vara oldschool cool

En lösning som Josh Clark föreslår att låta "hamburgermenyn" vara en ankarlänk till footern där man finner hela navigationsmenyn. Ytterligare en fördel med detta är att när användaren har scrollat igenom en sida från start till botten så får den en naturlig väg vidare! (detta gäller såklart bara för webb. För appar är det beroende på plattform; Iphone: längst ner; och Android: längst upp).

Är du nyfiken på att få veta mer om hur vi anpassar våra digitala lösningar efter olika devices?

Tveka inte att kontakta vår försäljningschef Filip Berglund så berättar han gärna mer.

0 kommentarer

Skriv kommentar