This blog post is archived.
14 juni 2018 - Story
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)
“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. ”
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.
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.
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.
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.
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.
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.
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.
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.
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.”
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.
Bram Vanderhaeghe
UX Architect