Design voor mobiel: 7 tips

10 oktober 2019

De perfecte balans tussen een intuïtieve user experience, techniek en design op mobiel. Hoe moeilijk kan dat zijn? Bwa … het ontwerpen voor smartphoneschermen blijft een bijzondere evenwichtsoefening. Collega UX/UI expert Dries helpt je alvast op weg met 7 krachtige tips voor mobiel design.

Zorg dat elementen aanklikbaar zijn
Gebruikers tikken vaak verkeerde knoppen aan doordat ze te klein zijn. Maak ze dus groot genoeg. De iOS guideline baseert zich op de gemiddelde vingerdikte (11.6 mm) en raadt een minimum van 44px aan. Android houdt het bij een minimum van 48dp.

Platform guidelines

iOS en Apple hebben een iets andere doelgroep. Hou hiermee rekening in je design en gebruik interface elementen of patronen van beide platformen niet door elkaar.

Apple’s Human Interface Guidelines geeft zeer uitgebreide info om apps te ontwerpen die naadloos passen binnen eender welk Apple systeem. Hierbij is de bottom bar een belangrijk element.

Google’s Material Design Guidelines is dan weer een aanpasbaar systeem met guidelines, tools, componenten, ... dat gebaseerd is op de best practices van het Android Operating System. De floating action button (FAB) is een typisch Android element.

Device-first

Vaak zie je op Dribbble of andere showcases prachtige screenshots van fullscreen apps. Heel mooi, maar niet altijd realistisch. Denk tijdens je designproces aan onveilige zones op het scherm die door het operating systeem al in gebruik zijn genomen, bijvoorbeeld de nudge van de nieuwe iPhone X.

Typografie en fontgrootte

Leesbaarheid op mobile is nog belangrijker omdat we met een kleiner scherm werken. Kies een font dat op alle groottes goed leesbaar is en dat voldoende font-weights bevat voor een betere readability en usability.

16pt is aangewezen voor bodytekst. Gebruik voor overige tekst nooit een font kleiner dan 11pt. Een handig trucje voor een ideale line-height is 1,5x de grootte van je font.

Duimbereik is geen mythe

49% van het mobiele gebruik gebeurt met 1 hand, d.m.v. de duim. Dat betekent dat het bereik van interacties beperkt is, of moeilijker wordt naarmate de afstand. Hier kan je best rekening mee houden wanneer je mobile interfaces ontwerpt.

Vermijd teveel scrollen

Hoewel men tegenwoordig gewoon is aan de “infinite scroll” door apps zoals Facebook en Instagram, is het toch aangewezen om je schermen zo kort mogelijk te houden. Dat kan door content in expandable kaartjes te steken, of bv. door het gebruik van tabs. Op mobile zal je vaak je content meer moeten opsplitsen dan op desktop.

Voorzie het gebruik van gestures

Op mobile zijn we gewoon van te navigeren via gestures. Deze zijn belangrijk om je design zoveel mogelijk een “native” gevoel te geven. De voornaamste zijn tap en swipe gestures.

Een beroep doen op ons team voor mobiel ontwerp? Contacteer ons of bel +32 (0)52 41 45 65.

Geschreven door Dries

Senior UX/UI Designer

Dries volgde eerst een opleiding multimediatechnieken en vervolgde daarna zijn studies bij Syntra Antwerpen waar hij Grafische Vormgeving en Webdesign studeerde. Hij houdt zijn ontwerpen graag simpel. Gebruiksvriendelijkheid is daarbij zijn grootste aandachtspunt.

Tijdens zijn vrije tijd vind je Dries op de moto in de bergen of gaat hij skateboarden.

Dries heeft meer dan 5 jaar ervaring in de sector.

Boek Dries