26 jan, 2023
6 min
AI is hot and happening! ChatGPT, een krachtig taalmodel van OpenAI, speelt hierin een hele grote rol.
Verdieping
5 min
26 nov, 2021
Dit bericht is meer dan één jaar oud. De inhoud van dit bericht kan inmiddels verouderd zijn.
Mobile first design
Het gebruik van smart phones groeit nog elke dag. Om die reden is het dan ook van belang dat wanneer je een nieuwe applicatie of website op de markt brengt goed na denkt over het mobiele ontwerp. Zeker wanneer jouw doelgroep vooral gebruik maakt van dit device. Om ervoor te zorgen dat de content ook hier op de juiste manier wordt getoond, kunnen we mobile-first ontwerpen.
De filosofie van Mobile First Design
Mobile-first design is een filosofie die gericht is op het verbeteren van de gebruikerservaring door het ontwerpproces te starten vanaf het kleinste scherm: de mobiel. Het is dan ook een belangrijk ingrediënt voor een succesvol ontwerp. Door eerst voor het kleinste scherm te ontwerpen, kunnen de UX-designers zich richten op de kern content van het product. Wat willen we uitdragen naar de gebruiker? Wanneer je je richt op de kern van de media-uiting en de rest wegstreept ben je in staat om de belangrijkste elementen van het product te bepalen. Zodra de componenten zijn bepaald, wordt het ontwerpen voor andere apparaten eenvoudiger.
Mobile-first betekent ook wel content-first.
Wanneer je wilt dat je site goed werkt op een mobiel apparaat is het van belang dat je een content-first aanpak gebruikt. De mobiel heeft namelijk de meeste beperkingen: De grootte van het scherm, plaatsing van navigatie etc. Het dwingt de webdesigner dus binnen deze kaders te ontwerpen. Het leidt tot een meer content gericht, en dus gebruikers gericht ontwerp. En ja, dat is waar gebruiker behoefte aan hebben. Ze zullen snel wegklikken wanneer het ontwerp niet te gebruiken is op de mobiel.
Om ervoor te zorgen dat dit niet gebeurt wordt er tijdens het ontwerpen rekening gehouden met 5 mobile-firts ontwerprichtlijnen (Adobe, 2021):
1. Gebruikers staan centraal tijdens het ontwerpproces: Het ontwerp moet gebruikers helpen een probleem op te lossen of een taak snel en effectief te voltooien. Denk na over de mogelijke interacties tussen de gebruiker en de applicatie wanneer je de pijnpunten identificeert
2. Visuele hiërarchie van de inhoud: De inhoud moet beknopt en to the point zijn. Het is belangrijk dat enkel de informatie wordt getoond die van belang is. Wanneer er te veel content wordt geplaatst kan dit de gebruiker afleiden. Denk hierbij ook na over de hiërarchie van de content, welke aspecten zijn het belangrijkste en hoe laat ik dit aan mijn gebruiker zien?
3. Houd het simpel: Gebruik alleen elementen die echt nodig zijn, zo kan de gebruiker zich concerteren op de inhoud van de applicatie.
4. Gedurfde en consistente CTA’s: Het hebben van een heldere, vette en consistente CTA helpt ervoor te zorgen dat gebruikers ze gemakkelijk kunnen vinden. Doet u dit niet kan dit leiden tot verlies van waardevolle leads en verminderde conversies. Zorg er daarom voor dat uw CTA’s opvallend zijn en onmogelijk te missen.
5. Denk aan de laadsnelheid van de site: als gebruikers slechte website prestaties ervaren, is 79% van de shoppers minder geneigd om opnieuw van die website te kopen. Daarom is de snelheid van de mobiele site uiterst belangrijk. Het mag niet meer dan drie seconden duren om volledig te laden.
Nu de ontwerprichtlijnen duidelijk zijn is het tijd om ook daadwerkelijk te beginnen met ontwerpen. Om dit op een eenvoudige manier te doen kun je gebruik maken van onderstaand stappenplan (Adobe, 2021)
1. Maak een inventaris van de inhoud: Om te beginnen, organiseer je content door een sitemap te maken met alle elementen die je in je ontwerp wilt opnemen. Waar plaats je de reservering pagina, contact gegevens en bijvoorbeeld de registratie pagina?
2. Kijk naast de structuur ook naar de hiërarchie van de inhoud. Welke content is het belangrijkst en waar plaats je deze op de pagina? Zorg ervoor dat CTA-elementen en andere Touch point groter zijn dan op desktop (Je vingers zijn namelijk veel breder dan een muiscursor).
3. Wanneer je dit hebt bepaald kun je beginnen aan het visualiseren van je ontwerp. Begin bij het kleinste breekpunt (de mobile) en gebruik dit als houvast voor de grotere breekpunten (tablet & desktop).
4. Denk ook na over het gebruik op mobiel. Een hover heeft op een mobiel geen effect, zorg er dan ook voor dat je deze soorten interactie hier niet gebruikt en nadenkt over andere mogelijkheden.
5. Verwijder grote afbeeldingen, zoals liggende foto’s. Deze worden niet goed weergegeven als ze op mobiel worden bekeken. Er is niet genoeg ruimte om grote afbeeldingen goed tot hun recht te laten komen, en uiteindelijk belemmert het de gebruikerservaring.
6. Test het op een echt apparaat. Het is het beste om weg te stappen van de desktopcomputer en uw product daadwerkelijk uit te proberen op een echte mobiele telefoon. Terwijl je door de pagina’s heen klikt ontdek je waar de pijnpunten liggen en hoe deze kunnen worden opgelost. Omdat je als ontwerper zelf vaak over problemen heen kijkt is het van belang ook met de gebruikers te testen, zo verzamel je diepgaande gebruikersfeedback.
Afsluitend Mobile First Design
Kortom mobile-first ontwerpen is een waardevole werkmethode wanneer je merkt dat dit het device is wat vaakst door jouw bezoeker wordt gebruikt. Het wegstrepen van elementen om zo tot de essentie van het product te komen is een geweldige manier om de fundamentele gebruikerservaring te realiseren.
