Mobile UX Design: Waar moet je op letten bij het optimaliseren van je website voor mobiel gebruik

12 Min.
Best practices mobiel UX-ontwerp

Hoe kun je van je website een prettige mobiele gebruilerservaring maken? Wat betekent User Experience voor mobiele apparaten? Welke ontwerpprincipes kun je toepassen? Antwoorden op al deze vragen vind je in dit artikel. Laten we de Best Practices voor mobiel UX design eens onder de loep nemen!

Waarom überhaupt mobiel UX design?

Ontwerpbewegingen zoals Mobile First proberen al een tijdje onze aandacht te verleggen naar mobiel gebruik. De meeste professionele websites werken inmiddels goed op mobiele apparaten. Natuurlijk kan dit grotendeels worden toegeschreven aan ijverige ontwerpers. Maar ook wie een website runt, gebruikt vaak frameworks zoals Bootstrap of prefab WordPress themes. Hier is de responsieve weergave meestal al geïntegreerd, wat ontwikkelaars ongelooflijk veel tijd bespaart. 

Als je Bootstrap, WordPress-themes en dergelijke gebruikt, loop je het risico dat het ontwerp is gemaakt voor desktop - en vervolgens alleen wordt aangepast voor mobiele apparaten.

Waarom is dit een probleem? Bezoekers die je website via mobiele apparaten bekijken, hebben andere behoeften. Aan deze behoeften wordt niet per se voldaan door alleen de esthetiek en de technische kant van de website aan te passen.

User experience design is gebaseerd op het oplossen van problemen. De startvraag hierbij is altijd: welke problemen kunnen gebruikers hebben en hoe lossen we die op? In de context van mobiele apparaten moet je je dus één centrale vraag stellen: Welke bijkomende problemen doen zich voor wanneer gebruikers je website bezoeken vanaf een mobiel apparaat?

Smartphonegebruik in Duitsland

Volgens Statista.com beschikte 97,5 procent van de huishoudens in Duitsland in 2020 over een of meer mobiele telefoons. Dit resulteert in een aandeel van 80 procent van de mobiele internetgebruikers. Daarvan maakte 24,1 procent gebruik van een prepaidcontract. Voor 2023 wordt een stijging voorspeld van 66,5 miljoen naar 68,6 miljoen smartphonegebruikers.

Velen van ons gebruiken onze smartphones vooral onderweg. De gebruikerservaring wordt sterk beïnvloed door externe factoren: het kan lawaaiig zijn om ons heen. We kunnen ook in beweging zijn, waardoor de interactie met onze smartphone minder nauwkeurig is. Lichtniveaus kunnen snel veranderen tussen heel helder en zeer donker. De ontvangst kan wisselen tussen goed en slecht, of zelfs helemaal stoppen. Bezoekers van je site hebben misschien een pre-paid abonnement en proberen daarom sites te vermijden die in korte tijd veel data verbruiken.

De positie is minder comfortabel en je gebruikers zijn daardoor minder ontspannen. We hebben over het algemeen minder geduld omdat we minder tijd hebben voor afzonderlijke taken. Als iets niet meteen werkt - of als we te lang moeten wachten tot de inhoud is geladen - zijn we geneigd het proces op de smartphone af te breken en onze toch al beperkte aandacht aan een andere website besteden.

De wil om veel tekst te lezen of door te scrollen is ook kleiner. We zoeken duidelijk gestructureerde informatie in kleine hapjes. Het kan ook zijn dat we maar één hand vrij hebben.

De redenen om met een smartphone op het internet te surfen zijn heel anders dan die van desktopgebruikers. Op een mobiel willen we ofwel specifieke informatie zoeken of we proberen de tijd te doden.  

Wanneer ik vanaf mijn smartphone naar een commerciële website navigeer, ben ik waarschijnlijk het meest geïnteresseerd in de basisinformatie:

  • Wat is het adres?
  • Hoe kom ik er?
  • Wat zijn de openingstijden?
  • Hoe kan contact opnemen?
  • Welke producten worden aangeboden?
  • Wat zijn de prijzen?

De enige vraag die overblijft is of je website voor mobiel gebruik is geoptimaliseerd. Om beter samen te vatten wat dat in detail betekent, heb ik de belangrijkste UX-principes voor mobiel ontwerp op een rijtje gezet.

Mobiel UX design: 13 principes om meteen toe te passen

1. Inhoud

Bezoekers van je website hebben verschillende doelen, afhankelijk van het apparaar´t dat ze daarvoor gebruiken. Lange teksten op mobiele apparaten betekenen vaak veel scrollen om te vinden waar ze voor kwamen. Mobiele gebruikers zijn op zoek naar snelle, beknopte informatie. Mensen die je winkel op hun mobiele telefoon bezoeken, willen eerder weten welke producten je aanbiedt dan dat ze meer over je profiel en achtergrond te weten willen komen.

De inhoud moet dus worden aangepast. Op de smartphone en tablet is er een andere hiërarchie dan op de desktop. Er zijn hier verschillende mogelijkheden:

  • De inhoud volledig weglaten: Voor sommige inhoud kan het een goed idee zijn om het volledig te verbergen. Dit kan het geval zijn als het iets is dat toch niet werkt op een telefoon. Of als het verbruikte datavolume groter zou zijn dan het voordeel voor de gebruiker.
  • Inhoud inkorten: Je kunt de structuur van je website overnemen, maar lange inhoud inkorten en bijvoorbeeld naar een subpagina doorlinken. Op die manier kunnen bezoekers zelf beslissen of deze informatie voor hen relevant is of niet.
  • Verander de indeling van je inhoud: Je kunt de structuur van je content herzien en deze anders ordenen op mobiele apparaten. De producten zouden dan op de eerste plaats kunnen staan en de achtergrondinformatie over de winkel komt later. Op deze manier bespaar je onnodig scrollen, maar laat je toch alle inhoud zien.

In het volgende voorbeeld heb ik de inhoud van de website van een restaurant (links) aangepast om hem gebruiksvriendelijker te maken. Ik heb de tekst ingekort en gelinkt naar een subpagina met een CTA (rechts). Bovendien heb ik de typografie aangepast, maar daarover later meer.

Best practices mobiel UX-ontwerp
Originele mobiele versie van een voorbeeldwebsite
Best practices mobiel UX-ontwerp
Geoptimaliseerde mobiele versie van een voorbeeldwebsite

2. Lay-out

In zijn artikel Design for Fingers, Touch, and People doet Steven Hoober verslag van de resultaten van zijn uitgebreide onderzoek naar smartphonegebruik. De duimtechniek wordt vaak als leidraad gebruikt. Hier telt de radius die de duim over het scherm kan maken. Vaak wordt gesuggereerd dat de bovenste hoeken absolute taboezones zijn waar de gebruikers niet mogen komen. Volgens de resultaten van zijn onderzoek klopt dit echter niet helemaal.

De zes meest voorkomende manieren waarop smartphones worden vastgehouden:

Best practices mobiel UX-ontwerp
Hoe mensen hun smartphones het liefst vasthouden

Dit resulteert in de volgende optimale verdeling van elementen voor smartphones:

Best practices mobiel UX-ontwerp
De beste lay-out voor primaire, secundaire en tertiaire inhoud

Het resultaat: de belangrijkste informatie moet op mobiele apparaten in het midden van het scherm worden geplaatst.

3. Minimalisme

Een minimalistische ontwerpbenadering is nooit verkeerd. Maar vooral op een kleiner toestel voelen we ons - door te veel inhoud en te weinig whitespace - verkrampt en verward. Het wordt onduidelijk waar welke informatie verborgen is en hoe we daar komen.

De mobiele versie van Streetartnews oogt gestructureerd en overzichtelijk. Op de inhoudspagina's staan alleen de meest noodzakelijke elementen en goed leesbare serif fonts met de juiste regelafstand:

Best practices mobiel UX-ontwerp
Visuele hiërarchie is des te belangrijker op mobiele apparaten.
Best practices mobiel UX-ontwerp
Een grotere regelafstand is gemakkelijker te lezen op mobiele toestellen.

4. Consistentie

Het is belangrijk dat je website consistent is op alle platforms. Google heeft dit zeer elegant opgelost. Het maakt niet uit vanaf welk apparaat ik Google open: ik herken het merk Google onmiddellijk.

Best practices mobiel UX-ontwerp
De desktop versie van Google
Best practices mobiel UX-ontwerp
En dit is hoe Google eruit ziet op de tablet
Best practices mobiel UX-ontwerp
De mobiele versie van Google

Jouw merk moet ook op mobiele apparaten tot uiting komen, ondanks het minimalistische ontwerp. Als je website een gebruikersgedeelte heeft, moeten de aangebrachte wijzigingen ook op alle apparaten worden overgenomen.

5. Media

Afbeeldingen moeten een passend formaat hebben en ook in dat formaat worden weergegeven, zodat niets vervormd of geschaald hoeft te worden. Dit helpt ook onnodig lange laadtijden te voorkomen. De overgang tussen liggend en staand formaat kan het moeilijkst zijn. Afhankelijk van de inhoud van de afbeelding, moet je ofwel slechts een deel van de afbeelding tonen of je afbeeldingen speciaal maken voor mobiele apparaten opslaan. Voor websites met veel afbeeldingen moet je lazy load integreren of geschikte WordPress plugins gebruiken. 

WordPress afbeeldingen optimaliseren: 6 plugins voor beeldoptimalisatie

Het optimaliseren van afbeeldingen en grafieken voor je WordPress website is een eenvoudige en belangrijke stap om je laadtijd te verbeteren. Wij laten je zes populaire WordPress plugins zien, die je kunt gebruiken voor het comprimeren van je afbeeldingen.

Hetzelfde geldt voor video's. Ook hier schakelt hij over van liggend naar staand. Video's moeten ook zo worden ingesteld dat ze gedempt kunnen worden en niet vanzelf starten. Video's moeten sowieso geoptimaliseerd zijn voor het web, maar dit is vooral belangrijk voor mobiele apparaten.

6. Typografie

Belangrijker dan het uiterlijk van je website is altijd de functionaliteit. Daarbij hoort goed leesbare tekst. De standaard tekstgrootte in HTML is 16px. Deze maat wordt gebruikt tenzij je anders aangeeft. Afhankelijk van het lettertype kan je tekst echter groter of kleiner lijken. 

Alles over web typografie en fonts

Als vuistregel geldt dat een lettergrootte van 16px ideaal is voor bodytekst en tekstinvoer op smartphones. Voor meer informatie over typografie op het web vind je in ons artikel "Hoe vind je het perfecte lettertype voor je website" en de blogpost "Type Sizes for Every Device" door UX Matters.

Om de typografie leesbaarder te maken, zijn er echter nog een paar andere dingen om rekening mee te houden:

  • Contrast tussen de letterkleur en de achtergrond: Contrast is vooral belangrijk omdat mobiele apparaten ook vaak buiten worden gebruikt. Dit geldt ook voor de rest van je website. Een goed contrast tussen elementen maakt het makkelijker om je website te bekijken. ContrastChecker.com analyseert je kleurkeuze en vertelt je of de gecombineerde kleuren voldoende onderling contrast hebben.
  • Spatie: Als je tekst te dicht op elkaar staat, wordt het steeds moeilijker te lezen. De regelafstand voor desktop- en mobiele apparaten kan verschillend zijn.
  • Centreren: Mijn basisregel is om nooit bloktekst te gebruiken op websites. De 'uitgevulde' tekst, die links en rechts uitgelijnd is, mag er op het eerste gezicht mooi uitzien, maar het zorgt ervoor dat de leesstroom onderbroken wordt. Gecentreerde tekst heeft een soortgelijk effect. Tekstgedeelten op mobiele apparaten moeten daarom alleen in speciale gevallen worden gecentreerd.
Best practices mobiel UX-ontwerp
Bloktekst op een voorbeeldwebsite
Best practices mobiel UX-ontwerp
Links gecentreerde tekst op een voorbeeldsite

Hier het voorbeeld uit EggShop nog een keer: Om de tekst (links) leesbaarder te maken, heb ik de lettergrootte vergroot naar 16px en de regelhoogte op 1.7 gezet (rechts). Ik heb ook de tekst links gecentreerd, wat spaties naar boven verkleind en de dubbele kop weggelaten. In de desktop versie is de dubbele koptekst logisch. Op mobiele telefoons creëert het alleen ongewenste whitespace en dubbele koppen.  

Je zou nog een stapje verder kunnen gaan en trefwoorden vet kunnen maken. Hierdoor kunnen gebruikers de tekst nog sneller doornemen en toch relevante informatie tot zich nemen. Sommige lettertypes zijn ongeschikt voor kleine schermen, omdat ze hun leesbaarheid verliezen wanneer ze worden verkleind. Zelfs lichte lettertypes, die er op de desktop elegant uitzien, kunnen op de smartphone minder leesbaar zijn.

De navigatie van je website moet zo intuïtief mogelijk zijn. Dit betekent dat je bij het creëren van je navigatiearchitectuur het beste bestaande structuren als leidraad kunt gebruiken. Dit maakt het voor gebruikers gemakkelijker om door de website te navigeren. Intuïtief is bijvoorbeeld omhoog en omlaag scrollen om door een website te navigeren, maar niet per se naar links of rechts.

Een verticaal menu is het primaire menu op mobiele telefoons geworden. Maar ook op de desktop zien we steeds vaker een verticaal menu in plaats van horizontaal. Daarboven of daaronder bevindt zich meestal het secundaire menu, eventueel iets minder prominent. Deze kan ook onderaan staan. 

Secundaire menu's kunnen bijvoorbeeld taalinstellingen of links naar sociale media zijn. Indien een tertiair menu nodig is, wordt dit als uitklapmenu geplaatst. Dit kan bijvoorbeeld een login of logout zijn.

Als je website meer is dan een one-pager, is het vooral belangrijk dat bezoekers altijd gemakkelijk kunnen zien waar ze zijn.

CTA & koppelingen

Best practices mobiel UX-ontwerp
De vuistregel (Bron: UX Matters)

Interactieve elementen moeten groter worden weergegeven. Op die manier weten de bezoekers wat ze op je website kunnen doen en ze kunnen aanklikken wat ze willen. Ook de plaatsing van de elementen speelt een rol. Er moet voldoende ruimte overblijven om het risico te beperken dat per ongeluk de verkeerde link of knop wordt aangeklikt. Knoppen als "Uitloggen", "Verwijderen", "Verzenden" moeten ook op enige afstand van de andere call-to-actions worden geplaatst, zodat ze niet per ongeluk worden geactiveerd.

Best practices mobiel UX-ontwerp
Air Inuit geeft interacties op een zeer duidelijke en gebruikersvriendelijke manier weer.

Verborgen interactie

Het is heel gebruikelijk om interacties via meerdere paden toe te staan. Zolang er maar een manier is voor nieuwe bezoekers om je site te blijven gebruiken. Zo kun je snelkoppelingen aanbieden aan terugkerende gebruikers zonder dat het moeilijk wordt om te beginnen.

Links

Als je meer functies aan je website wilt toevoegen, is het zinvol om bestaande systemen te gebruiken - in plaats van nieuwe te programmeren. Bijvoorbeeld bij het gebruik van de e-mailclient van de gebruiker in plaats van een contactformulier. Of bij het integreren van routebeschrijvingen via de favoriete app van de gebruiker. Dit maakt het voor hen gemakkelijker om je website te gebruiken, omdat ze apps kunnen gebruiken die ze al kennen om bepaalde taken uit te voeren.

8. UI Design Patterns

Bij het maken van je website of e-commercewinkel is het altijd een goed idee om terug te vallen op beproefde opties, ook wel UI Design Patterns genoemd - net zoals je dat op een desktop zou doen. Sommige van deze patronen zijn toesteloverschrijdend, andere zijn specifieker. Daarnaast is dit e-book van UXPin een goed referentiepunt en geschikte bron.

Vooral kleine schermen bieden weinig ruimte voor navigatie. Ongestructureerde en verwarrende websites springen er bijzonder negatief uit.

Net als bij de UI Design Patterns is het raadzaam om je aan bestaande websites en succesvolle webapps te oriënteren en deze te analyseren:

  • Waar bevindt het menu zich meestal?
  • Hoe ziet het eruit?
  • Wat gebeurt er als ik er op klik? 

Wees daarbij wel kritisch, zodat je geen fouten of "slechte" UX-elementen kopieert. 

Best practices mobiel UX-ontwerp
Crustac.fr koos voor het UI Pattern Burger Menu om de navigatie voor iedereen intuïtief te maken.

9. Formulieren

Lange formulieren kunnen vermoeiend zijn en snel verwarrend overkomen. In het algemeen moet je formulieren op mobiele apparaten alleen gebruiken als dat nodig is. Als je formulieren integreert, moet je ervoor zorgen dat je alleen om zoveel gegevens vraagt als werkelijk nodig zijn en de gebruiker het juiste toetsenbord beschikbaar stelt. Dit doe je door de juiste HTML-formuliertypes te gebruiken. Daardoor wordt aan de browser duidelijk gemaakt wat de invoer is. En dat het juiste toetsenbord aanwezig is.

Als alternatief kun je het automatisch invullen of contentsuggestie integreren. Of gebruik een social media login in plaats van een langdurig registratieproces.

Best practices mobiel UX-ontwerp
Social Login (ook wel Single Login genoemd) op Pinterest.

10. Feedback

Aangezien we mobiele toestellen met onze handen gebruiken, verwachten we vaak echte feedback: feedback die gebaseerd is op echte objecten. Dit kan bijvoorbeeld een knop zijn die ingedrukt lijkt te worden wanneer we erop drukken.

Als dit soort feedback niet bij jouw concept past, is het toch belangrijk om enige feedback te geven. Wie heeft er niet vele malen achter elkaar op een link of button gedrukt en niet zeker geweten of het gewoon niet werkt of dat de internetverbinding weg is. Dat moet je vermijden. Er zijn algemene trucs voor, zoals het laden van animaties. Het belangrijkste is dat de gebruiker weet dat zijn interactie gewerkt heeft en dat er iets zal gebeuren.

11. Errorhandling

Er worden fouten gemaakt. Je klikt per ongeluk op de verkeerde link en komt op de verkeerde website terecht. Of je verstuurt iets dat nog niet klaar was. Het is belangrijk dat fouten geen (of zo weinig mogelijk) negatieve gevolgen hebben. Je kunt bijvoorbeeld ongedaanmakingsfuncties en terugknoppen integreren. De home-knop is hier ook ongelooflijk belangrijk: het is het anker als je gebruikers verdwalen. Daarmee weten ze altijd hoe ze terug moeten naar de startpagina.

12. Speed

De laadtijd van je website kan ook een probleem zijn op mobiele apparaten. Vooral bij toegang vanaf onstabiele netwerken mag de wachttijd niet zo lang zijn dat bezoekers worden ontmoedigd.

13. Accessibility

WordPress Accessibility: Hoe maak je een toegankelijke website?

Accessibility (of toegankelijkheid) in WordPress is een belangrijk onderdeel bij het maken van websites. Maar hoe toegankelijk is WordPress eigenlijk? Waarom is accessibility zo belangrijk? En hoe kun je je website voor iedereen toegankelijk maken? Als je jezelf deze vragen stelt, bekijk dan onze gids over toegankelijkheid voor een aantal tips en adviezen.

Toegankelijkheid is een platformoverschrijdend onderwerp dat eindelijk steeds belangrijker wordt. Het basisidee en de missie: het web moet toegankelijk zijn voor alle mensen. Dit is met name van belang voor mensen met handicaps die invloed kunnen hebben op de manier waarop zij toegang hebben tot het web en het internet gebruiken.

Als je de kwestie van toegankelijkheid negeert, sluit je al 20 procent van de wereldbevolking uit van het gebruik van je website. Kortom, verwaarlozing van de toegankelijkheid is niet goed voor je bedrijf. Accessibility creëert een meer rechtvaardige en eerlijke wereld.

Tools voor UX testing

Afhankelijk van hoe je website is gebouwd, heb je misschien een mogelijkheid om de mobiele weergave direct te bewerken. Over het algemeen zullen echter een paar handmatige CSS-aanpassingen nodig zijn. Verschillende opties zijn geschikt om te testen:

  • Inspectietools in de browser: De populaire browsers bieden de mogelijkheid om je website te inspecteren met de zogenaamde Developer Tools. Daar kun je ook je website controleren in verschillende apparaatgroottes. Andere goede tools voor het testen van websites zijn Responsinator en BrowserStack Responsive.
Best practices mobiel UX-ontwerp
Developer Tools bij Google Chrome
  • Op het apparaat: De meest effectieve manier om je website te bekijken is op het apparaat zelf. Zorg er altijd voor dat je je site test op je eigen mobiele telefoon of tablet. Aangezien het erg duur zou zijn om elk toestel thuis te bezitten, zijn er zogenaamde emulators.
  • Emulators: Deze software wordt door de fabrikant van het besturingssysteem zelf geleverd. Daar kun je ontwikkelen en je resultaten direct in de browser bekijken - afgestemd op de grootte van het apparaat en het betreffende besturingssysteem, zoals Android of iOS.

Conclusie: best practices voor mobiel design

Door deze tips toe te passen, kun je je mobiele ervaring beter maken en meer klanten aantrekken. En misschien helpen deze voorbeelden en best practices je bij het ontwikkelen van nieuwe ideeën voor je website. Helaas wordt mobiel design voor een website nog vaak verwaarloosd - wat een negatief effect heeft op de conversie van mobiele gebruikers.

Voor meer input over mobiel UX design raad ik Google's Web Fundamentals en dit artikel voor beter mobiel UX design ten zeerste aan.

Jouw vragen over Mobile UX Design

Welke vragen heb je voor Sonja over mobiel UX design? We kijken uit naar je opmerking. Ben je geïnteresseerd in web design en ontwikkeling? Volg RAIDBOXES dan op Twitter, Facebook, LinkedIn of via onze nieuwsbrief.

Na haar studie Game Design en Creative Writing in het groene Auckland heeft Sonja Hoffmann zich gespecialiseerd in web- en app-desgign en de ontwikkeling daarvan. Haar focus ligt op gamification en het verkennen van gebruikersmotivatie en ervaring, gekoppeld aan haar passie en nieuwsgierigheid voor technologische trends.

Gerelateerde artikelen

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.