11/07/2022
Touch Targets: Større knapper for bedre brugervenlighed
I en verden, hvor smartphones er blevet vores primære computer, er brugervenlighed altafgørende. Fra at noter ned til at bestille dagligvarer, alt foregår på farten, ofte med én hånd, mens vi jonglerer med livets mange krav. En afgørende detalje, der ofte overses i mobil design, er størrelsen og placeringen af touch targets – de interaktive elementer, vi trykker på.
Har du nogensinde oplevet frustrationen ved at trykke på en knap, der ikke reagerer, eller værre, som aktiverer et forkert link? Dette problem, ofte beskrevet som "fedtfinger-problemet", skyldes sjældent brugerens fingre, men derimod alt for små touch targets. Designere, der prioriterer æstetik over funktionalitet, glemmer ofte at skabe elementer, der er nemme og præcise at aktivere. Denne artikel dykker ned i, hvorfor touch target størrelse betyder noget, og hvordan du designer dine elementer optimalt.
Størrelse betyder noget: Den gyldne regel om 1 cm x 1 cm
Forskning fra Parhi, Karlson og Bederson peger på, at for at brugere hurtigt og præcist kan vælge et touch target, skal det have en minimumsstørrelse på 1 cm x 1 cm (0,4 tommer x 0,4 tommer). Det er vigtigt at forstå, at dette er en fysisk måling. Selvom vores designs er digitale, bruger vi vores hænder til at interagere med dem på en touchskærm. At angive dimensioner i pixel kan være misvisende, da det ikke tager højde for de mange forskellige skærmdensiteter på tværs af enheder.
En undersøgelse fra MIT Touch Lab fandt, at gennemsnitsbredden af en fingerspids er mellem 1,6-2 cm (0,6-0,8 tommer). Tommelens slagflade er endnu større – i gennemsnit 2,5 cm (1 tomme) bred! At designe touch targets, der tager højde for brugernes fysiske dimensioner, er et grundlæggende princip i brugercentreret design.
Når touch targets er for små, tager brugerne længere tid om at trykke på dem. Ifølge Fitts' lov afhænger tiden til at nå et mål af afstanden til målet og størrelsen af målet. Mindre mål kræver altså længere tid på grund af den øgede præcision, der kræves af brugerens bevægelser.
Eksempel: Glow Baby App
Glow Baby-appen visualiserede historikken for spisetider, bleskift og amninger med forskellige farvede søjler eller ikoner, så brugerne kunne identificere mønstre i barnets adfærd. Ved at trykke på en individuel begivenhed blev detaljeret information vist, såsom det præcise tidspunkt for en amning. Desværre, da det visuelle afspejlede længden af amningen, blev touch target for korte amninger for små til nemt at blive trykket på.
Pas på mellemrummet: Overfyldning forårsager fejl
Ikke alene tager små mål længere tid at nå, men de øger også risikoen for fejl ved utilsigtet at trykke på et forkert mål, der er placeret for tæt på det ønskede. Selv når en fejl undgås, bidrager blot erkendelsen af, at et element kan være problematisk at vælge, til en opfattelse af, at interfacet er svært at bruge.
Eksempel: Kort på touchskærme
Kort på touchskærme er ofte en kilde til touch target-fejl. Når mange lokationer vises på et kort, er markørerne for hver lokation så små og tætpakkede, at det bliver næsten umuligt at vælge et bestemt punkt præcist. I test ser vi ofte brugere indtage en koncentreret ansigtsudtryk, når de ser et kort på mobil, da de indser, at det vil kræve anstrengelse at bruge.
Eksempel: Lister og stablede knapper
Lister med links og stablede knapper er også ofte ofre for touch target-fejl, fordi afstanden mellem elementerne er for lille. For eksempel var de tynde, stablede knapper på Kate Spades mobilhjemmeside for tæt på hinanden. Mere plads mellem dem ville forhindre brugere i at trykke på den forkerte.
Omvendt var links på White House Black Markets mobilhjemmeside placeret langt nok fra hinanden til at kunne trykkes præcist. En anden løsning ville være at placere parrede mål side om side i stedet for stablet, da den ekstra bredde giver mere spillerum for fejl sammenlignet med en kort linjehøjde.
Selvfølgelig, hvis målene er for små, vil det at tilføje plads mellem dem sandsynligvis ikke hjælpe. For at undgå utilsigtede tryk skal målene først være store nok og derefter også placeret med tilstrækkelig afstand.
Eksempel: Instagram
På Instagram var knapperne til at afvise et følgeforslag for små (kun 2 mm brede). Selvom de var placeret med en passende afstand til "Følg"-knapperne (ca. 2 mm mellemrum – den ofte anbefalede minimumsafstand), var de stadig svære at vælge. På grund af dette design er det lettere blot at ignorere dårlige forslag end at risikere utilsigtet at følge en konto, når man forsøger at fjerne den fra listen.
Hvis touch target til at fjerne et forslag havde været bredere, ville afstanden mellem de modstående handlinger have været tilstrækkelig. Selvom der er masser af lodret plads, ville den ekstra bredde give brugerne mulighed for at trykke tættere på den fjerneste kant for at undgå potentielle fejlklik.
Visuel-til-tryk asymmetri (View–Tap Asymmetry)
Touch targets skal være store nok til at (1) skelne, hvad målet er, og (2) præcist kunne aktivere dem. Visuel-til-tryk asymmetri opstår, når elementer er store nok til at blive set (f.eks. læse etikettens tekst), men for små eller tætpakkede til at blive aktiveret uden besvær. Dette var et stort problem med mange designs i vores tidlige undersøgelser af iPad.
Et aktuelt almindeligt eksempel på visuel-til-tryk asymmetri er de små iOS-lignende carousel-prikindikatorer. Du kan (nogle gange) se, at prikkerne er der, men de er alt for små til at kunne trykkes individuelt for at navigere.
Eksempel: David Yurman smykkers hjemmeside
Visuel-til-tryk asymmetri skyldes ofte desktop-designs, der ikke var tilpasset touchskærmbrug. Elementer, der let kan klikkes med en mus, er ikke altid tilgængelige med fingrene. David Yurman smykkers hjemmeside inkluderede f.eks. små, cirkulære farveprøver under hvert produktfoto på produktoversigts siderne, for at indikere alternative farver tilgængelige for hvert produkt. At klikke på hver farveprøve ville opdatere produktfotoet på siden, så brugerne kunne se farven uden at navigere til detaljesiden. Mens dette design fungerede godt for musebaserede interaktioner, var de små farveprøver alt for små (kun 1 mm) for tabletbrugere. Forsøg på at trykke på en farveprøve aktiverede ofte linket til produktdetaljesiden i stedet.
Når større er bedre
Selvfølgelig er 1 cm (0,4 tommer) blot minimumsstørrelsen for et trykmål. Der er mange tilfælde, hvor et interaktivt element bør være endnu større. Primære opfordringer til handling (calls to action) fortjener ofte stor visuel fremtræden og dermed et større touch target.
Kontekst og brugerbehov
Konteksten for brugen kan også kræve større touch targets end 1 cm x 1 cm. Hvis en app eller mobilside skal bruges, mens brugeren bevæger sig, vil målene være sværere at ramme, og bør derfor være større for at give mere spillerum for fejl. Når man kører bil eller går, vil kontroller, der kræver præcis manipulation, være svære, hvis ikke umulige at bruge.
Eksempel: Target App
Target-appen prioriterede to hovedfunktioner for brugere, der befinder sig i en fysisk butik: søgning efter et produkt og scanning af et produkts stregkode for at finde en kupon eller andre produktdetaljer. Disse knapper er synligt placeret øverst på siden og optager et område på ca. 2 cm x 2 cm (0,8 tommer x 0,8 tommer). Dette design tager højde for, at mange brugere kan bruge appen, mens de går rundt i butikken, leder efter en bestemt vare eller undersøger, om der er en kupon tilgængelig.
Målgruppens behov kan også være en grund til større trykmål. Små børn kræver store, let tilgængelige kontroller, da deres motoriske færdigheder ikke er lige så udviklede som voksnes. Omvendt vil seniorer, hvis fingerfærdighed er begyndt at svækkes, også have gavn af større kontroller, der er mere tilgivende over for rystende hænder. Og i mit tilfælde har nye forældre brug for store mål med generøse fejlmarginer for at understøtte den uundgåelige jonglering, der nu er vores liv.
Skærmstørrelse og elementplacering
Begrænsning af antallet af elementer på skærmen kan give plads til, at centrale touch targets kan være større og placeres længere fra hinanden, og dermed lettere at trykke på. For eksempel dedikerede Glow Baby-appens timer til at spore, hvor længe et barn ammer, det meste af skærmen til de to touch targets, der svarer til amningstimerne (hvert mål på 2,3 cm bredt på en iPhone X), med rigelig hvid plads imellem dem og andre, sekundære, mål.
Skærmens størrelse kan også påvirke størrelsen af touch targets. Meget store touchskærme kræver ofte større mål for at være mærkbare og for at minimere tiden til at nå dem. På den anden side bør små touchskærme, som f.eks. smartwatches, ikke blot have mindre touch targets – overvej i stedet gestus eller stemmestyring som interaktionsmidler.
Opsummering: Design med brugeren i centrum
At designe brugbare touch targets er grundlaget for alt touchskærm- (og dermed mobil-) design. Sørg for, at alle interaktive elementer har en fysisk, renderet størrelse på mindst 1 cm x 1 cm (0,4 tommer x 0,4 tommer) og er placeret med tilstrækkelig afstand fra andre konkurrerende touch targets for at kunne aktiveres let og præcist. For små mål fører til længere aktiveringstider og flere fejl, og vil uundgåeligt skabe frustration hos brugeren.
Ofte Stillede Spørgsmål (FAQ)
Hvad er den anbefalede minimumsstørrelse for et touch target?
Den anbefalede minimumsstørrelse er 1 cm x 1 cm (0,4 tommer x 0,4 tommer) fysisk størrelse.
Hvorfor er store touch targets vigtige?
De er vigtige for at forhindre fejl, reducere frustration og gøre det lettere at interagere med enheder, især når man bruger dem med én hånd eller er i bevægelse.
Hvad er "fedtfinger-problemet"?
Det refererer til problemet, hvor brugernes fingre er større end de interaktive elementer, hvilket gør præcis aktivering vanskelig.
Hvornår skal touch targets være større end minimum?
Når elementet bruges ofte, når resultatet af interaktionen ikke let kan fortrydes, når elementet er svært at nå, eller når det er en del af en sekventiel opgave.
Hvad er visuel-til-tryk asymmetri?
Det opstår, når et element er stort nok til at blive set, men for småt eller for tæt på andre elementer til at blive aktiveret præcist.
Hvis du vil læse andre artikler, der ligner Touch Targets: Større knapper for bedre brugervenlighed, kan du besøge kategorien Teknologi.