Bijna iedereen heeft tegenwoordig een mobiel apparaat, zoals een smartphone of tablet. Hiermee staan we niet alleen in contact met anderen via o.a. (beeld)bellen, maar maken we ook gebruik van internet om bijvoorbeeld informatie op te zoeken of social mediakanalen te gebruiken. Omdat we allemaal online zijn via ons mobiele apparaat is het belangrijk dat een website hierop goed te lezen en te gebruiken is.
Voorheen werd een website meestal eerst voor een desktop computer of laptop ontworpen en daarna geschikt gemaakt voor een mobiel apparaat, maar het wordt steeds belangrijker om dit juist andersom te doen. Deze aanpak het ‘mobile first design’. In dit blogartikel lees je wat het precies is en waarom het zo belangrijk is.
Wat is mobile first design?
Mobile first design is een strategie of methode binnen de wereld van webdesign. De mobiele gebruiker wordt gebruikt als uitgangspunt en het ontwerp van een website wordt hierop afgestemd. Met mobile-first design begin je bij het ontwerpen van een website voor het kleinste scherm, zoals een smartphone en breid je later uit naar grotere schermen, zoals laptop. Het doel: de beste gebruikerservaring creëren.
Webdesigners hebben op een klein scherm weinig ruimte en worden zo gedwongen prioriteit te geven aan de belangrijkste aspecten van een website. Voor een smartphone bevat de website enkel de essentiële functies en zo is meteen de kern van je UX duidelijk. Zodra de mobiele ontwerpvraag is begrepen, wordt ontwerpen voor andere apparaten eenvoudiger. Wanneer de website wordt ontworpen voor een groter scherm, zoals een desktopversie, kunnen ontwerpers functionaliteiten uitbreiden met aanvullende elementen en functies, omdat ze meer schermruimte hebben.
Waarom zou je mobile first design toepassen?
Mobile first design heeft een aantal voordelen:
- Mobiel internet is tegenwoordig belangrijker dan internetgebruik via desktop. In de toekomst zullen veel mensen alleen nog mobiel internet gebruiken en daarom is een optimale mobile user experience belangrijk. Als je mobiele website gebruiksvriendelijk is, kopen consumenten meer en blijven ze terugkomen;
- Google kiest er steeds vaker voor om mobiele websites eerst te indexeren, ook wel ‘mobile first index’ genoemd. Dat wil zeggen dat Google je website bekijkt vanuit het perspectief van een mobiele telefoon. Je mobiele website wordt leidend en moet dus nog beter functioneren dan je desktopwebsite. De mobiele vriendelijkheid van je website is ontzettend belangrijk en die kun je eenvoudig en snel checken via een test van Google;
- Bedrijven geven meer geld uit aan reclame voor hun producten via smartphone dan via tv-reclames. De meest populaire manier om consumenten te bereiken: social media gesponsorde advertenties met aantrekkelijke animaties.
Mobile first is content first
Ontwerp je mobile first? Onthoud dan dat de inhoud het belangrijkst is. Met een content-first benadering moeten ontwerpers hun gebruikers de inhoud geven die ze echt nodig hebben, zonder extra’s. De inhoud is afhankelijk van de gebruikscontent en een mobiele gebruiker heeft vaak andere behoeften dan een desktopgebruiker.
Mobile first design heeft bepaalde beperkingen, zoals schermgrootte en bandbreedte en hierdoor worden ontwerpers gedwongen om zich te focussen op de essentie en elementen die echt nodig zijn voor het mobiele ontwerp.
Voorbeelden:
- Je ziet vaker opvouwbare menu’s en widgets op mobiele sites terwijl desktopsites over het algemeen meer witruimte en visuele elementen hebben, zoals foto’s van hoge kwaliteit;
- Desktopsites gebruiken meestal afbeeldingen op volledige grootte inclusief advertenties en promotiemateriaal en op mobiele websites wordt dat verwijderd, omdat het vaak de gebruiksvriendelijkheid in de weg zit.
De 5 mobile-first design principes
Als je kiest voor mobile first design is het belangrijk om deze vijf principes in gedachten te houden:
- Gebruikers zijn leidend voor het ontwerp: je ontwerp moet gebruikers helpen een probleem snel en effectief op te lossen of een taak uit te voeren. Houd rekening met de mogelijke interacties tussen een gebruiker en jouw website (of applicatie) terwijl je ontdekt waar ze tegenaan lopen. Tip: kijk naar de mobiele websites van je concurrentie, ontdek welke mobielvriendelijke opties zij niet hebben en bied deze in jouw ontwerp wel aan;
- Visuele hiërarchie inhoud: je inhoud moet beknopt en to the point zijn. Het is belangrijk om je te concentreren op het leveren van datgene waar de gebruiker naar op zoek is, zonder extra afleidingen. De visuele hiërarchie van je inhoud legt de gebruiker de volgorde van belangrijkheid uit. Denk er eens over na om je titels bovenaan te laten staan met een inhoudsvoorbeeld boven de vouw. Zo zien en begrijpen je gebruikers de inhoud meteen. Om de scanbaarheid van je pagina te verbeteren, helpt het ook om je lange tekst op te delen in meerdere alinea’s;
- Houd het simpel: een eenvoudig mobiel ontwerp is de perfecte manier om de duidelijkheid van je inhoud te verbeteren en gebruikers te helpen zich te focussen op de belangrijkste inhoud. Enkele methoden om het simpel te houden zijn:
- Verminder het aantal links in je navigatiemenu
- Gebruik gedurfde en consistente call to actions (CTA’s): als je CTA’s helder, krachtig en opvallend zijn, vinden gebruikers ze gemakkelijker;
- Houd rekening met de laadsnelheid van je website: als gebruikers slechte websiteprestaties ervaren, is de kans kleiner dat ze iets kopen en terugkomen. Het laden van je website hoort niet langer dan drie seconden te duren.
- Gebruik zo min mogelijk pagina’s
- Kies voor maximaal twee kolommen met inhoud
- Gebruik typografie die niet te klein is
- Houd je randen breed en lijnen schoon
- Gebruik witruimte om de lay-out leesbaarder en netter te maken
Het mobile first design proces
Nu je de vijf principes kent, kunnen we je meer vertellen over het mobile first design proces:
- Breng je inhoud in kaart: maak een spreadsheet met alle elementen die je in je ontwerp wil opnemen;
- Zet de inhoud op de juiste volgorde: hier wordt de visuele hiërarchie van inhoud belangrijk. Nu je de inhoud in kaart hebt, geef je prioriteit aan de elementen en bepaal je welke elementen het belangrijkst zijn. Zorg ervoor dat elementen zoals CTA’s en andere contactpunten groter zijn dan op desktop, omdat vingers veel breder zijn dan een muiscursor;
- Eerst de kleinste schermen: ontwerp eerst voor mobiele apparaten en bouw daarna uit naar de grotere schermen;
- Verwijder hovers: een hover is een visueel effect op een website, zoals het veranderen van tekstkleur zodra je er met je muis overheen gaat. Er is nog geen hover-besturing op mobiel;
- Verwijder grote afbeeldingen: denk aan landschapsfoto’s. Deze worden niet goed weergegeven op mobiele apparaten, want er is niet genoeg ruimte voor;
- Test op een echt apparaat: neem afstand van de desktopcomputer en je website of applicatie en probeer het uit op een echte mobiele telefoon. Terwijl je door de pagina’s bladert, zul je ontdekken of het goed werkt. Ook kun je anderen vragen om je website te testen, zodat je feedback verzamelt van meerdere personen en een completer beeld krijgt van de feedback/verbeterpunten.
Hulp nodig bij mobile first design?
Wil je van jouw product, merk of website een succes maken? Kies dan voor mobile first design en zorg ervoor dat je mobiele website perfect werkt. Doordat je begint met het ontwerpen voor een klein scherm voeg je alleen de essentiële elementen toe en focus je je op de kern en op de gebruikerservaring van je mobiele gebruiker. Het ontwerpen voor grotere schermen wordt hierna alleen nog maar makkelijker!
Heb je vragen over mobile first design of kun je wel wat hulp gebruiken? Neem dan vrijblijvend contact met ons op.
Neem contact op
