Quick wins voor de user experience op een smartphone!


Categorie

Online development

Datum

18-01-2017

Mobile first, een begrip wat je vaak hoort en waar door iedereen op ingehaakt wordt. Dat een website of webshop responsive moet zijn en goed moet werken op alle devices, dat weten we anno 2017 wel. Maar hoe zit het met de gebruikerservaring en hoe laat je jouw website nét even wat beter smoelen op een smartphone?

Quick win 1: Kleur je browser in jouw kleur met de theme-color tag!


Je hebt het vast weleens gezien, je browser kleurt mee in de kleuren van de website die je bezoekt. Vaak wordt hiervoor de meest overheersende kleur van het logo of de huisstijl gebruikt. De browser ziet er “Fancy” uit en dit geeft de bezoeker nét even dat speciale gevoel!

Het wordt nog niet in alle mobiele browsers ondersteund, maar dit zal in de toekomst steeds meer en breder ondersteund gaan worden.

Als voorbeeld laten we graag de door ons gerealiseerde website Solidq.nl zien, bekijk onderstaand voorbeeld of probeer het zelf uit!

Code voorbeeld:

theme-color.jpg


Visueel voorbeeld (Android browser):

screen.jpg


Quick win 2: Zorg voor de juiste en goede iconen!


Ik begin met de meest bekende en gebruikte icon, de favicon. Elke website of webshop heeft er één, maar is dit wel het juiste formaat en wordt hij wel goed getoond?

1 favicon in je website? Tijd om er meer toe te voegen!

Naast de favicon zijn er veel verschillende iconen in verschillende formaten die je kunt aanbieden aan de browser, speciaal voor Apple (apple-touch icons), Windows (windows tiles) en Android.

Door verschillende soorten en formaten iconen in je website of webshop aan te bieden aan de browser zal de browser zelf het juiste formaat icoon pakken en zal de gebruiker altijd een mooi icoontje te zien krijgen.

Code voorbeeld:

icons.jpg


Visueel voorbeeld (Android-chrome-icon 192x192px):

android-chrome-192x192.png

 

Quick win 3: Zorg dat de bezoeker je makkelijk kan bellen!


Je zit op je smartphone en je wilt een bedrijf bellen maar je weet het telefoonnummer niet. Even Googelen en de website van het bedrijf is gevonden, maar dan begint het. De zoektocht naar een telefoonnummer, heel herkenbaar én heel irritant.

Zorg er daarom voor dat het telefoonnummer of een telefoon icoon altijd duidelijk in beeld is én door hier een speciale tel link aan mee te geven kan de bezoeker zelfs direct bellen door erop te drukken.

Code voorbeeld:

phone.jpg


Meer belangrijke factoren


Naast deze Quick wins spelen er uiteraard nog veel meer factoren een belangrijke rol om de user experience zo optimaal mogelijk te krijgen op een smartphone én elk ander device.

Wil je meer informatie of ben je benieuwd wat we voor jou kunnen betekenen?

Neem dan contact met ons op, we helpen je graag verder!


Stay up to date
Schrijf je in en ontvang maandelijks een update van de belangrijkste ontwikkelingen
Enkele gegevens ontbreken of zijn onjuist

Het formulier kan nog niet worden verzonden omdat het nog niet helemaal (correct) is ingevuld.