Hoe gebruikte gebruiksvriendelijke mobiele interfaces

Sep 12, 2025

Procedures

Sommige mobiele ontwerpen lijden aan een probleem: ze zien er geweldig uit op het oppervlak, maar beginnen ze te gebruiken en je ontdekt al snel dat een all-treffelijke factor is verwaarloosd: de ergonomie. De nobele kunst van het creëren van ontwerpen die passen bij het menselijk lichaam (in plaats van de andere manier rond) is een van de ware onbezongen helden van de Design World.

Ergonomie is altijd erg belangrijk geweest voor industriële ontwerpers, maar het wordt ook steeds belangrijker voor digitale ontwerpers. Waarom? Omdat smartphones en tablets de manier waarop we communiceren met digitale ontwerpen veranderen. We gebruiken niet langer alleen een omslachtig toetsenbord en een muis om onze digitale vrienden te vertellen wat ze moeten doen. Nu is het meer direct, fysiek. We houden onze apparaten vast. We tikken ze op. We knijpen ze. We bereiden ze liefdevol.

Deze steeds meer fysieke band met onze geliefde mobiele apparaten dwingt ontwerpers niet alleen na te denken over hoe een ontwerp eruit ziet en voelt, maar ook de fysieke aspecten van het gebruik ervan. Het dwingt ontwerpers na te denken over hoe gebruikers vasthouden en communiceren met hun smartphones en tablets; over hoeveel van het scherm ze comfortabel kunnen bereiken en hoe een ontwerp in de hand zal voelen. Het dwingt ontwerpers om na te denken over de ergonomie van een mobiel ontwerp.

Dus hoe ga je naar het maken van een mobiel ontwerp dat ergonomisch is en daarom comfortabel is om te gebruiken?

01. Ga uit het kantoor

Zelfs voordat je begint met nadenken over mogelijke ontwerpen, stap dan op kantoor om enkele observaties uit de eerste hand uit te voeren. Breng een ochtend of middag door met kijken naar waar, wanneer, hoe en waarom mensen hun mobiele apparaten gebruiken.

Maak een notitie van hoe mensen vasthouden en interactie hebben met hun apparaat, wat ze op het moment en het soort uitdagingen en afleidingen zouden doen waarmee ze mogelijk moeten worden betekend. Deze informatie zal de ergonomie van het ontwerp informeren en betekent dat als het gaat om het testen van een ontwerp dat u kunt testen tegen scenario's die u weet dat het eigenlijk in de echte wereld kan gebeuren.

02. Ontwerp voor meerdere bevatten

The three main holds used for a smartphone, and the frequency which they’re typically used — De drie hoofdpunten die worden gebruikt voor een smartphone en de frequentie die ze meestal worden gebruikt

Als u mensen observeert die mobiele apparaten gebruikt, zul je snel zien dat ze een verscheidenheid aan verschillende huizen De verscheidenheid aan holds gebruikt en de frequentie waarmee gebruikers hun wacht veranderen, betekent dat het belangrijk is om met meerdere in gedachten te ontwerpen.

Start bijvoorbeeld een smartphonesontwerp met gebruik in gedachten (zoals dit is de meest uitdagende), maar test altijd ontwerpen uit over een reeks geld om te zien hoe comfortabel elk van hen is.

03. Plaats populaire bedieningselementen in REACH

Green areas are easy to reach, amber takes more effort and red areas are hard to reach — Groene gebieden zijn gemakkelijk te bereiken, Amber neemt meer inspanningen en rode gebieden zijn moeilijk te bereiken

Plaats veelgebruikte bedieningselementen, zoals knoppen en links, waar ze gemakkelijk kunnen worden bereikt door vingers of duimen. Het midden- en onderkant van het scherm zijn goede gebieden om te gebruiken, hoewel de onderste hoeken lastig kunnen zijn om te tikken wanneer een apparaat in slechts één hand wordt gehouden (lees meer hier

Het is nog steeds het verdrag om menu's aan de bovenkant van het scherm te plaatsen. Dit kan echter een moeilijk bereikbaar gebied zijn, dus het is een goed idee om ook een veegactie te ondersteunen om het menu op te nemen.

04. Plaats inhoud boven controles

The BBC iPlayer iPad app places controls in easy to reach areas and below content — De BBC IPlayer iPad-app plaatst bedieningselementen in gemakkelijk te bereiken gebieden en onder inhoud

Je wilt niet dat iemands vinger of duim de inhoud verduistert terwijl ze op het scherm tikken, dus plaats inhoud boven controles. Zorg er ook voor dat de belangrijkste informatie niet in een deel van het scherm bevindt waar het gemakkelijk kan worden verdoezeld door een vinger of een duim - zoals de onderste hoeken, die vaak worden afgedekt wanneer een smartphone in één hand wordt gehouden.

05. Ontwerp met portretmodus in gedachten

Hoewel het gebruikte kan veranderen, is één ding dat veel meer consistent is voor zowel smartphones als tabletten de neiging voor mensen om ze verticaal te houden voor de meerderheid van de tijd. Een horizontale houd wordt vaak gebruikt voor bepaalde taken, zoals het bekijken van video's of foto's, maar dit is de uitzondering, niet de norm.

Natuurlijk moet een mobiel ontwerp idealiter zowel portret (verticaal) als landschap (horizontale) modi ondersteunen, maar tenzij u een video- of foto-zware site of applicatie ontwerpt, ontwerp met de portretmodus in gedachten.

06. Ontwerp voor duimen

The Spotify app is designed to be thumb-friendly, with large tap targets — De Spotify-app is ontworpen om duimvriendelijk te zijn, met grote tapdoelen

Duimen rijden de meerderheid van alle smartphone-interacties. Dit komt omdat duimen uitsluitend worden gebruikt wanneer een mobiel in één hand wordt gehouden en zwaar gebruikt wanneer het in twee handen wordt gehouden.

Duimen zijn iets groter dan vingers en hebben daarom een groter tikdoel nodig. Probeer deze tapdoelen ten minste 44 x 44 punten (16 x 16 mm) te maken, met ten minste 7 punten (2,5 mm) ertussen. Grotere tapdoelen zijn altijd beter en je moet zeker niet kleiner zijn dan 44 x 30 punten (16 x 11 mm).

Zelfs als u ontstaat voor tabletten, nog steeds ontwerp voor duimen omdat een ontwerp de minst nauwkeurige methode van aanraking moet ondersteunen die deze zal tegenkomen. Een groot kraandoel is niet alleen goed voor duimen, het is ook geweldig voor vingers.

07. Ontwerp voor grote gebaren

Dus grotere kraandoelen zijn beter. Welk groter tikdoel is er dan het hele scherm? Probeer te ontwerpen met grote gebaren in gedachten, zoals het toestaan dat gebruikers om te vegen om vooruit of achteruit te gaan in een fotogalerij of om een menu te openen.

Onthoud dat gebruikers mogelijk niet realiseren dat een gebaar wordt ondersteund, dus het is altijd een goed idee om een secundaire manier te geven om iets te doen, zoals het tikken van een pijlpictogram om de volgende foto op te nemen.

08. Stijging naar de uitdaging

In ergonomie hoort u soms praten over het ontwerpen om ten minste 95 procent van de gebruikers te passen door een ontwerp te creëren dat comfortabel is van de 2,5ste tot het 97,5ste percentage gebruikers. Er zullen altijd extreme gebruikers zijn die erg moeilijk zijn om te accommoderen - zoals we allemaal weten dat je iedereen de hele tijd niet kunt behagen, maar als je een ontwerp kunt creëren dat de meer uitdagende gebruikers met comfort kunnen gebruiken, moet het ook voor iedereen werken die daartussenin.

Daarom is het een goed idee om te ontwerpen met uitdagende gebruikers en scenario's in gedachten. Denk bijvoorbeeld aan een drukke forens langs de straat met koffie in één hand en mobiele telefoon in de andere, of iemand met artritis.

09. Houd interacties tot een minimum

Weet je welke de meest comfortabele mobiele apparaatinteractie is? Het is geen kraan of een veeg of een pers. Het is helemaal geen interactie. De minder interactie vereist dat uw mobiele ontwerp, hoe minder u zich zorgen hoeft te maken over de ergonomie. Ik probeer altijd interacties tot een minimum te beperken. Mislukte Mobile-formulieren verminderde, gebruik AutoSuggests en beperken meldingen aan alleen de dingen waarvoor een gebruiker echt moet worden opgeladen.

10. Prototype-ontwerpen

Je kunt de ergonomie van een mobiel ontwerp gewoon niet beoordelen totdat je het fysiek in je handen kunt houden en verschillende grepen kunt uitproberen. Daarom zal ik zo snel mogelijk een ontwerp prototeren. We houden van Axure , maar er zijn veel andere Geweldige prototyping tools

Voor een snelle proef kun je zelfs basisgebruikerstests uitvoeren met eenvoudige papieren prototypes. Een schets of papier afdruk op een mobiel apparaat zal u een verrassende hoeveelheid vertellen over de ergonomie.

11. Test, test en test dan nog wat meer

Wilt u weten wat een gegarandeerde manier is om ergonomische mobiele ontwerpen te maken? Het is om ontwerpen te testen, dan itereren en testen, itereren en testen ... en doorgaan totdat je een aantal verschillende mensen hebt, die een aantal verschillende apparaten bedekken, alle melding dat het ontwerp comfortabel is om te gebruiken. Het is zo simpel.

Mobiele apparaten zijn natuurlijk ontworpen om 'mobiel' te zijn, dus stap uit het kantoor om ontwerpen te testen in de omgevingen en situaties waar ze waarschijnlijk in zullen worden gebruikt. Coffeeshops zijn altijd een goede plek om te testen. Testontwerpen met Veel mogelijk mensen (minstens vijf of zes) en focussen op een uitdagende scenario's, zoals het gebruik van een smartphone met één hand. Als het ontwerp goed werkt wanneer de interacties van de gebruiker meer beperkt zijn, is het zeker om de rest van de tijd te excelleren. Het is voornamelijk door voortdurend te testen en herhaalt dat u echt ergonomische mobiele ontwerpen kunt maken.

Dit artikel verscheen oorspronkelijk in Net Magazine. Abonneer hier.

Gerelateerde artikelen:

16 UX / UI Instagram-accounts die u moet volgen
20 beste Wireframe-tools
De 5 grootste UX-ontwerptrends voor 2018

Hoe gebruikte gebruiksvriendelijke mobiele interfaces

01. Ga uit het kantoor

02. Ontwerp voor meerdere bevatten

03. Plaats populaire bedieningselementen in REACH

04. Plaats inhoud boven controles

05. Ontwerp met portretmodus in gedachten

06. Ontwerp voor duimen

07. Ontwerp voor grote gebaren

08. Stijging naar de uitdaging

09. Houd interacties tot een minimum

10. Prototype-ontwerpen

11. Test, test en test dan nog wat meer

Procedures - Meest populaire artikelen

Een gelaagd parallax-effect op uw site maken

Bouw adaptieve lay-outs zonder media-query's

Een gids voor de cloudvisie van Google

Maak gladde UI-animaties

Verf een sci-fi game-instelling in Photoshop

Hoe te tekenen met affiniteitsfoto voor iPad

Maak stijlframes in Photoshop

Verf een harig huisdierportret

Categorieën