Sådan designer brugervenlige mobilgrænseflader

Sep 17, 2025

hvordan

Nogle mobile designs lider af et problem: de kan se godt ud på overfladen, men begynde at bruge dem, og du vil snart finde ud af, at en alt for vigtig faktor er blevet forsømt: ergonomien. Den ædle kunst at skabe designs, der passer til menneskekroppen (snarere end omvendt) er en af de sande usungte helte i designverdenen.

Ergonomi har altid været meget vigtigt for industrielle designere, men det bliver stadig mere vigtigt for digitale designere. Hvorfor? Fordi smartphones og tablets ændrer den måde, vi interagerer med digitale designs. Vi bruger ikke længere kun et besværligt tastatur og en mus for at fortælle vores digitale venner, hvad de skal gøre. Nu er det mere direkte, mere fysisk. Vi holder vores enheder. Vi trykker på dem. Vi klemmer dem. Vi slår kærligt dem.

Denne stadig mere fysiske binding med vores elskede mobile enheder tvinger designere til ikke kun at tænke på, hvordan et design ser ud og føles, men også de fysiske aspekter ved at bruge det. Det tvinger designere til at tænke på, hvordan brugerne holder og interagerer med deres smartphones og tabletter; Om hvor meget af skærmen de komfortabelt kan nå og hvordan et design vil føle sig i hånden. Det tvinger designere til at tænke på ergonomi af et mobilt design.

Så hvordan går du om at skabe et mobilt design, der er ergonomisk og derfor behageligt at bruge?

01. Kom ud af kontoret

Selv før du begynder at tænke på mulige design, kom ud af kontoret for at udføre nogle førstehånds observationer. Tilbring en morgen eller eftermiddag kigger på hvor, hvornår, hvordan og hvorfor folk bruger deres mobile enheder.

Bemærk, hvordan folk holder og interagerer med deres enhed, hvad de måtte gøre på det tidspunkt og de former for udfordringer og distraktioner, de måske skal kæmpe med. Disse oplysninger vil bidrage til at informere ergonomien om designet og betyder, at når det kommer til at teste et design, kan du teste imod scenarier, du ved, sker faktisk i den virkelige verden.

02. Design til flere holdninger

The three main holds used for a smartphone, and the frequency which they’re typically used — De tre hovedholdinger, der bruges til en smartphone, og den hyppighed, de typisk anvendes

Hvis du observerer folk, der bruger mobile enheder, vil du snart se, at de bruger en Forskellige forskellige holdninger . De forskellige gerninger, der anvendes, og den hyppighed, som brugerne ændrer deres hold, betyder, at det er vigtigt at designe med flere holdninger i tankerne.

For eksempel start et smartphone design med enhåndet brug i tankerne (da dette er den mest udfordrende), men altid test design ud på tværs af en række hold for at se, hvor behagelige hver af dem er.

03. Placer populære kontroller i REACH

Green areas are easy to reach, amber takes more effort and red areas are hard to reach — Grønne områder er nemme at nå, Amber tager mere indsats og røde områder er svært at nå

Placer ofte brugte kontroller, såsom knapper og links, hvor de nemt kan nås med fingre eller tommelfingre. Mellem- og bunden af skærmen er gode områder at bruge, selvom bundhjørne kan være vanskelig at trykke på, når en enhed holdes på kun en hånd (læs mere her ).

Det er stadig konventet at placere menuer øverst på skærmen. Dette kan dog være et vanskeligt område, så det er en god ide at også understøtte en swipe-handling for at hente menuen.

04. Placer indhold over kontroller

The BBC iPlayer iPad app places controls in easy to reach areas and below content — BBC iPlayer iPad app placerer kontrollerer i nem at nå områder og under indhold

Du vil ikke have en persons finger eller tommel, der dækker indholdet, da de trykker på skærmen, så læg indhold over kontrollerne. Sørg også for, at nøgleinformation ikke er i et område på skærmen, hvor det nemt kan blive dækket af en finger eller tommelfinger - som de nederste hjørner, som ofte dækkes, når en smartphone holdes i den ene hånd.

05. Design med portrættilstand i tankerne

Mens det anvendte hold kan ændre sig, er en ting, der er meget mere konsekvent for både smartphones og tabletter, tendensen for folk til at holde dem lodret for størstedelen af tiden. Et vandret hold bruges ofte til bestemte opgaver, som f.eks. Visning af videoer eller fotos, men det er undtagelsen, ikke normen.

Selvfølgelig bør et mobilt design ideelt set understøtte både portræt (lodrette) og landskab (vandrette) tilstande, men medmindre du designer et video- eller foto-tungt websted eller en applikation, design med portrættilstand i tankerne.

06. Design til tommelfingre

The Spotify app is designed to be thumb-friendly, with large tap targets — Den spotify app er designet til at være tommelfabrik, med store trykmål

Thumbs driver størstedelen af alle smartphone interaktioner. Dette skyldes, at tommelfingre udelukkende anvendes, når en mobil holdes i den ene hånd og stærkt brugt, når den holdes i to hænder.

Thumbs er lidt større end fingre, og har derfor brug for et større TAP-mål. Prøv at gøre disse trykmålretter mindst 44 x 44 point (16 x 16 mm), med mindst 7 point (2,5 mm) mellem dem. Større tap mål er altid bedre, og du bør bestemt ikke gå nogen mindre end 44 x 30 point (16 x 11 mm).

Selvom du designer for tabletter, stadig design for tommelfinger, fordi et design skal understøtte den mindst nøjagtige berøringsmetode, som den vil støde på. Et stort tap mål er ikke bare godt for tommelfingre, det er også godt for fingrene.

07. Design til store gestus

Så større trykmål er bedre. Hvilket større Tap-mål er der end hele skærmen? Prøv at designe med store gestus i tankerne, f.eks. At give brugerne til at skubbe til at flytte fremad eller baglæns i et fotogalleri, eller for at hente en menu.

Husk, at brugerne måske ikke er klar over, at en gestus understøttes, så det er altid en god ide at give en sekundær måde at gøre noget på, f.eks. At trykke på et pilikon for at hente det næste billede.

08. Stig til udfordringen

I ergonomi hører du undertiden tale om design, der passer til mindst 95 procent af brugerne ved at skabe et design, der er behageligt fra 2.5. til 97.5. percentilen af brugere. Der vil altid være ekstreme brugere, der er meget svært at rumme - som vi alle ved, at du ikke kan behage alle hele tiden, men hvis du kan skabe et design, som de mere udfordrende brugere kan bruge med komfort, skal det også fungere for alle dem derimellem.

Derfor er det en god ide at designe med udfordrende brugere og scenarier i tankerne. For eksempel, tænk på en travl pendler, der går ned ad gaden med kaffe i en hånd og mobiltelefon i den anden, eller nogen med arthritis.

09. Hold interaktioner til et minimum

Ved du, hvilken den mest komfortable mobile enhedsinteraktion er? Det er ikke et tryk eller en swipe eller en presse. Det er slet ikke interaktion. Jo mindre interaktion dit mobil design kræver, desto mindre skal du bekymre dig om ergonomien. Jeg forsøger altid at holde interaktioner til et minimum. Ruthlessly skære ned mobilformer, brug autosuggests og begrænse meddelelser til kun de ting, en bruger virkelig skal underrettes om.

10. Prototype designs.

Du kan simpelthen ikke dømme ergonomien i et mobilt design, indtil du fysisk kan holde det i dine hænder og prøve forskellige greb. Derfor vil jeg prototype et design så hurtigt som muligt. Vi kan lide Axure. , men der er masser af andre Great prototyping værktøjer. .

For en hurtig prøve, kan du endda køre grundlæggende brugertest med enkle papirprototyper. En skitse eller papirudskrivning fast på en mobilenhed vil fortælle dig et overraskende beløb om ergonomien.

11. Test, test, og test lidt mere

Vil du vide den garanterede måde at skabe ergonomiske mobildesign på? Det er at teste design, så iterere og test, iterere og test ... og fortsæt, indtil du har en flok forskellige mennesker, der dækker en flok forskellige enheder, alle rapporterer, at designet er behageligt at bruge. Det er så simpelt.

Mobil enheder er selvfølgelig designet til at være 'mobile', så kom ud af kontoret for at teste design i de miljøer og situationer, de sandsynligvis vil blive brugt i. Kaffebutikker er altid et godt sted at teste i. Testdesign med som Mange mennesker som muligt (mindst fem eller seks) og fokuserer på mere udfordrende scenarier, som f.eks. Brug af en smartphone one-handed. Hvis designet fungerer godt, når brugerens interaktioner er mere begrænsede, er det sikkert at udmærke resten af tiden. Det er primært ved løbende at teste og iterere, at du kan skabe virkelig ergonomiske mobildesign.

Denne artikel optrådte oprindeligt i netmagasinet. Abonnere her.

Relaterede artikler:

16 UX / UI Instagram-konti, du skal følge
20 bedste wireframe værktøjer
De 5 største UX-designtendenser for 2018

Sådan designer brugervenlige mobilgrænseflader

01. Kom ud af kontoret

02. Design til flere holdninger

03. Placer populære kontroller i REACH

04. Placer indhold over kontroller

05. Design med portrættilstand i tankerne

06. Design til tommelfingre

07. Design til store gestus

08. Stig til udfordringen

09. Hold interaktioner til et minimum

10. Prototype designs.

11. Test, test, og test lidt mere

hvordan - Mest populære artikler

Karakterark til 3D-modeller: 15 Top Tips

Sådan tegner du Asuka fra Neon Genesis Evangelion

Sådan oprettes glitchtekst og billedeffekter i CSS

Sådan rierer du et ansigt til animation

Download filer til 3D World 232

En introduktion til frontendprøvning

Sådan maler du overbevisende refleksioner

Sådan perfekt hår i dine portrætter

Kategorier