Mobile first anno 2019: waar moet je op letten?

Mobile first: het klinkt als een slechte campagneslogan maar met deze kreet werd een aantal jaar geleden een nieuwe aanpak bij de ontwikkeling van websites in het leven geroepen. Met de opkomst van mobile devices werd duidelijk dat de toenmalige benadering (desktop first) voor slechte gebruikerservaringen zorgden.
De beperkte ruimte dwong oplossingen af die je zo vroeg mogelijk in kaart wil brengen en niet pas op het moment dat het UX voor desktop reeds was ontworpen en goedgekeurd.

Mobile first vs. desktop first

Het is nu haast ondenkbaar om niet meer op deze wijze te starten. Maar het gebeurt nog steeds, met uiteenlopende motivaties. Vaak is er geen werkwijze ingericht die hier voor zorgt, wordt er voortgeborduurd op wat reeds staat en verwacht men vaak dat het een prijzige ingreep zal zijn.  Maar het komt ook voor dat men in de veronderstelling is dat complexe processen eigenlijk alleen op desktop kunnen worden uitgevoerd, en niet achter een klein scherm. Maar is dat ook zo?

Bij nader onderzoek wordt duidelijk dat de bestaande processen zelf het probleem zijn en niet de mobiele omgeving. Het spreekt voor zich dat als een aanvraagfunnel, van bijvoorbeeld een zorgverzekering, ontwikkeld is voor desktop, de gebruikerservaring op mobiele devices hieronder zal lijden. Een reeds ontwikkelde onepager kan op desktop een prima oplossing zijn, maar voor mobile is het ongeschikt, de call to action is vaak niet in zicht, de oriëntatie op de pagina wordt bemoeilijkt door scrollen en tussentijds opslaan wordt over het algemeen ook niet ondersteund. Uploaden van documenten zonder de mogelijkheid van het maken van foto’s is ook zo’n indicator. De keuze om dit proces op desktop af te ronden is dan ook volledig te begrijpen.

De onderbouwing om dan niet mobile first te ontwerpen omdat de procedure te complex is, is natuurlijk de omgekeerde wereld. Om deze argumentatie te gebruiken om niet mobile first te ontwikkelen kan zorgen voor een stagnatie in innovatie. Door niet mee te groeien met de behoefte van de gebruiker laat je strategische kansen liggen. Het proces zou zo gemaakt moeten worden dat het ook op mobile te volbrengen is. 

Het is natuurlijk denkbaar dat een gebruiker er zelf voor wil kiezen om desktop te gebruiken maar die beslissing wordt vaak pas genomen nadat de gebruiker kennis heeft gemaakt met het product op een mobiel device. Als deze eerste verkenning een suboptimale ervaring is dan is de beslissing om niet verder te gaan op desktop niet verwonderlijk.
Als deze eerste kennismaking geoptimaliseerd is voor mobile dan wordt deze ervaring meegenomen naar desktop. 

Bij deze benadering is het een logische stap om Mobile first te ontwerpen, desktop volgt namelijk veel makkelijker mobile dan andersom. Maar waar moet je nou op letten bij het ontwerpen voor Mobile first anno 2019?

1. Ontwerp voor grotere schermen

De belangrijkste technische ontwikkeling die invloed heeft op het ontwerp, zijn de afmetingen van de schermen. Daar waar we vroeger genoegen namen met schermgrootte van 320 x 568 (lees iPhone 5) is nu de standaard gemiddeld 375 x 812 (iPhone X) en dan heb ik het niet eens over de echt grote schermen. Deze trend heeft gevolgen voor het gebruik: je duimen zijn bijvoorbeeld niet groot genoeg om overal bij te kunnen.

Mooi voorbeeld van deze ontwikkeling is Google Chrome. Google Chrome verplaatste de navigatie om zodoende binnen duimbereik te blijven op grotere schermen. Safari had deze transformatie reeds eerder ondergaan. Samsung heeft een eigen filosofie (OneUI genaamd) waarbij het scherm ‘gesplitst’ wordt in een bovenste deel, ten behoeve van informatie voorziening en een onderste deel waar de interactie plaatsvind met de gebruiker. 

Mobile first design

2. Maak gebruik van gestures (waar relevant)

Gestures, of gebaren, zijn meer en meer gemeengoed aan het worden. Voordeel van gestures is natuurlijk dat ze geen grafisch representatie nodig hebben en zodoende meer ruimte laten voor ‘echte’ content. Iedereen is bekend met het swipen naar links over een bericht om deze te verwijderen, of het naar boven swipen om een app te sluiten.

Deze gestures kunnen natuurlijk ook prima in een winkelmandje gebruikt worden om bijvoorbeeld een artikel te verwijderen of om meer informatie te krijgen. Probleem is dat verschillende fabrikanten deze gestures verschillend inzetten. Zo heeft Apple een andere benadering dan Google, Huawei en Xiaomi. Daardoor zullen andere partijen ook voor verschillende oplossingen kiezen. Het zal dan ook nog wel even duren voordat er consensus is waarbij gestures platform onafhankelijk kan worden ingezet.

3. Neem de navigatie onder handen

Het hamburger menu is niet langer de plek waar alle navigatie ondergebracht wordt. Uit onderzoek blijkt dat gebruikers eerder gaan scrollen en zoeken op de huidige pagina dan het hamburger menu te openen. Gebruikers gaan pas later te raden in het hamburger menu. De reden hiervoor is dat je niet ziet of hetgeen dat je zoekt ook daadwerkelijk daar te vinden is. 
Als er ruimte is in de navigatiebalk, dient deze benut te worden om er de belangrijkste elementen in te plaatsen Denk aan een gecombineerde navigatie, waarbij de belangrijkste onderdelen (zoals een inlog of een link naar de product/modellen/dienst pagina) direct zichtbaar zijn. De rest is ondergebracht in het menu. 

Mobile first navigatie

Naast de verbeteringen in de functionaliteit is er natuurlijk ook plaats voor de visual design om een slag te maken.

4. Gebruik animatie

Animatie wordt een steeds groter onderdeel bij de opbouw van een pagina, de feedback van gemaakte keuzes en bij het volbrengen van een taak. Er schuilt natuurlijk gevaar in het gebruik van animatie, de neiging deze te overdrijven of te pas en te onpas te gebruiken dient onderdrukt te worden. Niemand zit te wachten op een interface die je afleid van je doel met animaties die de bedoelde ervaring in de weg staan. Een ingetogen en passend gebruik verdient de voorkeur om niet afleidend te zijn maar juist ondersteunend.

5. Creëer content op maat

Voor wat betreft de content is het belangrijk deze in hapklare brokken te presenteren. Tiles of cards  zijn goede manieren om de gebruiker duidelijke kaders aan te reiken. Door te ontwerpen voor makkelijke consumptie creëer je een omgeving waar een gebruiker makkelijk doorheen navigeert zonder het overzicht te verliezen. Als daarnaast de content het juiste vernaculair gebruikt sluit de content perfect aan op de mobiele beleving. Fijn is ook dat beide ingrediënten laten zich prima naar desktop laten vertalen en dus doorontwikkeling naar desktop of tablet makkelijk maken.

6. Voice for Mobile 

Als laatste wil ik voice interfaces aanhalen. Deze ontwikkeling sluit aan bij eerder genoemde trends. We zijn er al aan gewend dat het microfoon icoontje in het mobiele toetsenbord een onderdeel is van de interface. We gebruiken het om vragen te stellen maar ook om devices aan te sturen.  Deze trend zal zich voortzetten omdat er tijd, ruimte op het scherm en gebruikersgemak mee gewonnen kan worden. Het is evident dat een simpele voice command als ’sorteer op prijs’ of ‘toon alleen artikelen in de sale’ of ‘toon grote foto’s’ voordelen biedt tijdens mobiel gebruik van een webshop. Zeker wanneer je duim te klein is om deze aan te klikken :)

Mobile first is relevanter dan ooit... Maar wellicht moet je zelfs al spreken van Mobile only. 


Wil je meer weten over de digitale beleving van je websitebezoeker? Bekijk hier dan de verschillende gratis webinars over Digital Marketing.

Thomas Voorham
Designer

What's your mobile challenge?