Best practices mobiel UX design

Mobiel UX Design: tips voor mobiele optimalisatie van je website

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 mobile UX design?

Ontwerpbewegingen zoals mobile first proberen al enige tijd onze aandacht te verleggen naar mobiele telefoons. De meeste professionele websites werken inmiddels goed op mobiele apparaten. Natuurlijk dragen gewetensvolle ontwerpers hiertoe bij. Maar zelfs degenen die een WordPress website beheren, gebruiken vaak frameworks zoals Bootstrap of kant-en-klare WordPress themes. Hier is de responsieve weergave meestal al geïntegreerd. Dit bespaart ontwikkelaars ongelooflijk veel tijd.  

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 WordPress website via mobiele apparaten bekijken, hebben andere behoeften die niet noodzakelijk worden bevredigd door de esthetische en technische aanpassing van de WordPress website alleen.

User experience design is gebaseerd op het oplossen van problemen. De initiële vraag hier is altijd: welke problemen kunnen gebruikers hebben en hoe lossen we die op? In de context van mobiele apparaten moet je jezelf één centrale vraag stellen: welke bijkomende problemen ontstaan wanneer gebruikers je WordPress website bezoeken vanaf een mobiel toestel?

Smartphonegebruik in Duitsland

Volgens Statista.com had 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 smartphonegebruikers tot 68,6 miljoen.

Velen van ons gebruiken onze smartphones vooral wanneer we onderweg zijn. De gebruikerservaring wordt sterk beïnvloed door externe factoren: het kan lawaaiig zijn om ons heen. We kunnen ook in beweging zijn – interactie met de telefoon is minder nauwkeurig. Lichtniveaus kunnen snel veranderen tussen helder en zwak. De ontvangst kan wisselen tussen goed en slecht, of zelfs helemaal stoppen. Bezoekers van je WordPress website kunnen een prepaid abonnement hebben, dus probeer sites te vermijden die in korte tijd veel data verbruiken.

De positie kan minder comfortabel zijn en je gebruikers minder ontspannen. We hebben over het algemeen minder geduld omdat we minder tijd hebben voor afzonderlijke taken. Als iets niet binnen de kortste keren werkt – of we moeten te lang wachten tot de inhoud geladen is – hebben we de neiging om het proces op de smartphone af te breken en onze korte aandacht te besteden aan een andere WordPress website.

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 er aangeboden?
  • Wat zijn de prijzen?

De enige vraag die overblijft is: Is je WordPress website mobiel geoptimaliseerd? Om beter samen te vatten wat dit in detail betekent, heb ik de belangrijkste UX-principes voor mobiel design op een rijtje gezet.

"*" geeft verplichte velden aan

Toestemming*
Dit veld dient ter validatie en mag niet worden gewijzigd.

13 mobiele UX designprincipes

1. Inhoud

Bezoekers van je website hebben verschillende doelen, afhankelijk van de apparaten die ze gebruiken om toegang te krijgen tot je website. Lange teksten op mobiele apparaten betekenen vaak veel scrollen om te vinden waar ze voor kwamen. Als mobiele gebruikers zijn we vooral op zoek naar snelle, beknopte informatie. Wie je webwinkel op mobiele apparaten bezoekt, wil eerder weten welke producten je aanbiedt dan iets over je achtergrond te weten te 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:

  • Laat de inhoud volledig weg: 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 de telefoon. Of als het verbruikte datavolume groter zou zijn dan het voordeel voor de gebruiker.
  • Inhoud inkorten: Je kunt de structuur van je WordPress website houden zoals hij is, maar lange inhoud dienovereenkomstig inkorten en bijvoorbeeld naar een subpagina linken. 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 design
Originele mobiele versie van een voorbeeldwebsite
Best practices mobiel UX design
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 design
Hoe mensen hun smartphones het liefst vasthouden

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

Best practices mobiel UX design
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 design
Visuele hiërarchie is des te belangrijker op mobiele apparaten.
Best practices mobiel UX design
Een grotere regelafstand is gemakkelijker te lezen op mobiele apparaten.

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 design
De desktop versie van Google
Best practices mobiel UX design
En dit is hoe Google eruit ziet op de tablet
Best practices mobiel UX design
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 geschikt formaat hebben en in dit formaat worden weergegeven, zodat niets vervormd of geschaald hoeft te worden. Dit helpt ook om 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 weergeven of je afbeeldingen specifiek opslaan voor mobiele apparaten. Voor websites met veel afbeeldingen, moet je Lazy Load integreren of overeenkomstige 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. We zullen je zes populaire WordPress plugins laten zien die het comprimeren van je afbeeldingen helemaal overneemt.

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 bodyteksten en tekstinvoer op smartphones. Meer informatie over typografie op het web vind je in ons artikel "Hoe vind je het perfecte lettertype voor je website?" en in de blog post "Type Sizes for Every Device" van UX Matters.

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

  • Contrast tussen letterkleur en achtergrond: vooral omdat mobiele toestellen ook buitenshuis worden gebruikt, is dit bijzonder belangrijk. 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 laat je weten of de gecombineerde kleuren voldoende contrast met elkaar 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 design
Bloktekst op een voorbeeldwebsite
Best practices mobiel UX design
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 wat verder kunnen gaan en trefwoorden vet markeren. Op die manier kunnen gebruikers de tekst nog sneller doornemen en toch relevante informatie tot zich nemen. Sommige lettertypes zijn over het algemeen niet geschikt voor kleine schermen omdat ze hun leesbaarheid verliezen wanneer ze worden verkleind. Lichte lettertypes die er op een desktop elegant uitzien, kunnen ook minder leesbaar zijn op een smartphone.

"*" geeft verplichte velden aan

Toestemming*
Dit veld dient ter validatie en mag niet worden gewijzigd.

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 heeft de overhand gekregen als het primaire menu op mobiele telefoons. Maar ook op de desktop zien we steeds vaker een verticaal menu in plaats van een horizontaal. Daarboven of daaronder bevindt zich meestal het secundaire menu, eventueel iets minder prominent. Het kan als alternatief 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.

Best practices mobiel UX design
De vuistregel (Bron: UX Matters)

Interactieve elementen moeten groter worden weergegeven. Op die manier weten de bezoekers van je website wat ze daar kunnen doen. En ze zijn in staat om te klikken op wat ze willen. Ook de opstelling van de elementen speelt een rol. Er moet voldoende ruimte overblijven om het risico te beperken dat per ongeluk de verkeerde link of button 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 design
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.

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

Net als bij desktop is het een goed idee om beproefde oplossingen, ook wel UI Design Patterns genoemd, te gebruiken bij het maken van je website of e-commercewinkel. Sommige van deze patronen zijn toesteloverschrijdend, andere zijn specifieker. Dit e-book van UXPin heeft ook bewezen een goede gids te zijn.

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 design
Crustac.fr koos voor het UI Pattern Burger Menu om de navigatie voor iedereen intuïtief te maken.

9. Formulieren

Lange formulieren zijn vermoeiend en kunnen snel verwarrend worden. In het algemeen moet je formulieren op mobiele apparaten alleen gebruiken als dat nodig is. Wanneer je formulieren integreert, moet je ervoor zorgen dat je alleen om zoveel gegevens vraagt als werkelijk nodig zijn en de gebruiker het juiste toetsenbord geeft. Je kunt dit doen door geschikte HTML-formuliertypes te gebruiken. Dit vertelt de browser wat de invoer is. En het juiste toetsenbord is aanwezig.

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 design
Social Login (ook wel Single Login genoemd) op Pinterest.

10. Feedback

Aangezien we mobiele apparaten 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 in jouw concept past, is het toch belangrijk om wat feedback te geven. Wie heeft er niet vele malen achter elkaar op een link of knop gedrukt en niet zeker geweten of het gewoon niet werkt of dat de internetverbinding weg is. Dat is iets om te vermijden. Er zijn algemene trucs voor, zoals het laden van animaties. Het is belangrijk dat de gebruikers weten dat hun interactie heeft gewerkt 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 van het bouwen van websites. Maar hoe toegankelijk is WordPress? Waarom is toegankelijkheid zo belangrijk? En hoe kun je je website voor iedereen toegankelijk maken? Als u zich deze vragen ook stelt, dan is onze Gids voor toegankelijkheid precies het juiste voor je is.

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 meest gebruikte browsers laten je toe 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 design
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 over mobiel UX 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 commentaar. Ben je geïnteresseerd in webdesign en ontwikkeling? Volg Raidboxes dan op Twitter, Facebook, LinkedIn of via onze nieuwsbrief.

Vond je het artikel leuk?

Met jouw beoordeling help je ons om onze inhoud nog verder te verbeteren.

Laat een reactie achter

Je e-mailadres wordt niet gepubliceerd.