Mobile gebruik: zoveel meer dan enkel duimswipen

15 juni 2018 Inzichten / 10 vuistregels voor mobile design

Bij het ontwerpen van mobile interfaces houden UX-designers uiteraard rekening met de manier waarop we die toestellen gebruiken. Alleen kloppen de assumpties en inzichten daarrond vaak niet meer. Bij Wijs zijn we graag mee met de tijd: we delen de laatste inzichten rond mobile touch toestellen en vertalen het naar een aantal design guidelines.

Inspiratie voor dit artikel haalden we bij Steven Hoober.

Steven Hoober heeft de status van een UX-goeroe als het aankomt op het design van mobile interfaces. In 2013 had hij het in een blogpost over het gebruik van mobiele toestellen, en hoe de ‘thumbsweep’ ervoor zorgt dat bepaalde delen van een touchscherm moeilijk bereikbaar zijn voor de gebruiker. Designers van mobile interfaces houden daar rekening mee en plaatsen belangrijke content bijvoorbeeld niet in de linkerbovenhoek.

Diezelfde Steven Hoober verrichte ondertussen enorm veel observerend onderzoek. Hij geeft nu zelf aan dat zijn blogpost van toen gedateerd is. Meer nog, hij vraagt om er niet meer naar te refereren en deelde zijn nieuwe inzichten in 3 uitgebreide blogposts.

Het belangrijkste inzicht is ongetwijfeld dat het ‘thumbsweep’-model achterhaald is. Daarbij werd ervan uitgegaan dat iedereen zijn gsm in 1 hand houdt, en de verschillende acties uitvoert met z’n duim.

Het bekende, maar incorrecte ‘thumbsweep’-model
(beeld uit blogpost Steven Hoober)

Gebruikerstesten tonen vandaag iets heel anders. Niet alleen blijkt de diversiteit aan toestellen veel groter dan eerst gedacht, de manier waarop we ons toestel vasthouden is ook veel diverser én wisselend. Zittend op de tram gebruiken we onze smartphone op een andere manier dan wanneer we een kindje bij de hand nemen op weg naar huis. Dat levert 10 inzichten op die je helpen om een gebruiksvriendelijk mobile design uit te tekenen.
Grafiek uit blogpost Steven Hoober

Het belangrijkste inzicht is ongetwijfeld dat het ‘thumbsweep’-model achterhaald is. Niet alleen blijkt de diversiteit aan toestellen veel groter dan eerst gedacht, de manier waarop we ons toestel vasthouden is ook veel diverser én wisselend. 

Inzicht 1: geen toestel is gelijk, geen gebruiker is gelijk

De variatie aan manieren om een mobiel toestel vast te houden en te gebruiken is immens. Niet alleen zijn er grote verschillen per gebruiker, het is ook de manier waarop hij zijn toestel gebruikt dat erg divers is. We voelen ons er blijkbaar comfortabel bij om constant te switchen tussen verschillende ‘posities’, dit is vaak ook afhankelijk van de context.

UX-tip: Ga er niet van uit dat elke gebruiker hetzelfde doet, of dat iedereen hetzelfde toestel heeft als jij. Hou bovenstaand gedrag in het achterhoofd wanneer je een ontwerp uitdenkt, en probeer het uit op een aantal verschillende devices.

Inzicht 2: gebruikers werken het liefst in het midden van hun scherm

Op mobile scannen we niet in een F-patroon, maar focussen we op het midden van het scherm. Gebruikers brengen content actief naar het midden om het daar dan te selecteren. De meeste actie gebeurt dus in het midden van het scherm.

UX-tip: Plaats belangrijke acties niet aan de rand van het scherm, maar in het midden. Secundaire opties en knoppen staan ideaal gezien aan de boven- en onderkant van het scherm.

YouTube doet het goed: de belangrijkste actie, het toevoegen van contactpersonen, staat hier in het midden van het scherm. Secundaire acties staan boven en onderaan in een balk. Tertiaire functies (zoeken, profiel, ...) bereik je via de hoeken van het scherm. 

Inzicht 3: gebruikers kijken naar het midden van het scherm

Gebruikers raken het midden van hun scherm niet alleen het vaakst aan, ze kijken er ook het vaakst naar. Meer nog: ze verplaatsen content zodanig dat hetgeen ze willen zien of lezen, zich in het midden bevindt.

UX-tip: plaats de belangrijkste content in het midden en zorg dat lezers de laatste lijn van een tekst ook naar het midden van hun scherm kunnen brengen. Dat kan door bijvoorbeeld extra ruimte te voorzien onderaan. Het is geen goed idee om de tekst te laten doorlopen tot onderaan het scherm en bij verder swipen te verspringen naar de volgende pagina. Dat wordt als erg frustrerend ervaren.

Inzicht 4: vingers zitten soms in de weg

Een vinger is geen precisie-instrument. Ze zijn er in verschillende formaten en ze zijn niet doorzichtig. Gericht klikken met je vinger blijkt dus niet zo eenvoudig. Als gebruiker is het vervelend als je bedekt wat je wil aanklikken. Dat gevoel wordt bevestigd als we kijken naar scrollgedrag: staat er een lijst met content, dan zullen we in de lege ruimte rechts ervan swipen om te scrollen, en liefst zo weinig mogelijk op de content zelf.

UX-tip: Voorzie voldoende grote icoontjes zodat een vinger de content niet volledig bedekt bij aanraken. Probeer rechts open ruimte te behouden.

De icoontjes bij Foursquare zijn voldoende groot en bieden ruimte rondom om te klikken. Ze zijn bovendien duidelijk afgebakend in een kadertje. 

Inzicht 5: verschillende toestellen worden verschillend gebruikt

Grotere toestellen zoals een tablet houden we verder van onze ogen dan pakweg een kleine iPhone. Ook wordt zo’n toestel minder ‘mobiel’ gebruikt. Zeker thuis leggen we een tablet meestal neer, of zetten we ‘m recht in plaats van ermee rond te lopen.

UX-tip: hou rekening met de diversiteit aan toestellen en kies voor een comfortabele grootte voor het lettertype. Hoe groter het scherm, hoe verder het gehouden wordt en dus hoe groter de lettergrootte moet zijn.

Inzicht 6: ‘touch’ is niet erg precies

Meestal tikken we ongeveer op het icoontje of de tekst die we willen aanklikken, maar we zitten er vaker naast dan op. In veel gevallen zitten we er zelfs behoorlijk ver van zoals het volgende voorbeeld aantoont:

UX-tip: Hou rekening met een foutenmarge. Ideaal gezien voorzie je zoveel mogelijk ruimte rond het ‘doel’ waarop geklikt kan worden, liefst zelfs een volledig domein. Maak dus de hele regel klikbaar of een zo groot mogelijk vakje rond een icoon of woord.

Beeld uit blogpost Steven Hoober

Inzicht 7: soms mikken we beter

We tikken niet erg accuraat, maar als we in het midden van het scherm tikken, doen we het iets beter.

UX-tip: Hou er rekening mee dat we in het midden van het scherm iets doelgerichter tikken, maar onthou toch vooral de onnauwkeurigheid aan de buitenzijdes. Onomkeerbare acties zet je dus best niet vlakbij routine-acties. Een send-button plaats je best niet vlak naast een klein invulveld.

Inzicht 8: we tikken alleen als het er klikbaar uitziet

Als gebruiker hebben we wat aanmoediging nodig om ook effectief te tikken. Als het niet aanklikbaar lijkt, gaan we ervan uit dat het ook niet aanklikbaar is.

UX-tip: Gebruik visuele elementen om iets duidelijk klikbaar te maken. Zorg dat het groot en helder genoeg is. In een tekst is onderstrepen voldoende, maar als het gaat om icoontjes in een app, ga je het best voor een kadertje of een andere omlijning.

Airbnb zet een kader rond alle aanklikbare elementen. In de bottombar is dit niet nodig; de context maakt hier duidelijk dat dit bedieningselementen zijn.

Inzicht 9: platte telefoons bestaan niet

De verschillende manieren van vasthouden limiteren de reikwijdte op het scherm. Wie rondloopt met boodschappen in de ene hand, bedient zijn smartphone met de andere hand. In dat geval komt het oude thumbsweep-model dus weer boven. Ook belangrijk: een gsm is nooit flinterdun. Zeker met een beschermhoesje errond worden de randen moeilijker aanklikbaar.

UX-tip: Plaats geen acties dicht bij de randen van het scherm. Dat maakt het moeilijker aanklikbaar.

Test zo snel en zo vaak mogelijk op echte toestellen en met echte mensen. Alleen zo ben je zeker van een gebruiksvriendelijk ontwerp.

Inzicht 10: toestellen worden gebruikt door mensen

Het allerbelangrijkste tijdens het designproces: hou in het achterhoofd dat je interface gebruikt wordt door mensen. In plaats van alles theoretisch juist uit te werken achter je scherm, heb je er veel meer baat bij om zo snel en zo vaak mogelijk te gaan testen.

UX-tip: Test zo snel en zo vaak mogelijk op echte toestellen en met echte mensen. Alleen zo ben je zeker van een gebruiksvriendelijk ontwerp. Bekijk ter inspiratie onze Proximus Move case, waarbij het concept bijna wekelijks werd gevalideerd door echte gebruikers.

Hulp nodig om jouw project mobile friendly te maken? 

Ons UX-team staat klaar!

Bram Vanderhaeghe
UX Architect & Strategist

Lees meer

Iedereen bij Wijs deelt zijn expertise, ook Jasper en Evi. Benieuwd naar de laatste nieuwtjes en blogposts? Schrijf je in voor onze nieuwsbrief!