Hoe wij de mobile user experience van Mobly boosten, met een bottom navigation.

De navigatie van je website? Die vind je in de meeste gevallen bovenaan. Omdat je het zo gewend bent. Toch weten we allemaal dat de digitale wereld er helemaal niet meer hetzelfde uitziet als enkele jaren geleden. Wij draaiden de mobiele website van onze klant om, en kozen voor een bottom navigation.

It’s a brain thing

De manier waarop we onze smartphone gebruiken heeft invloed op onze hersenen. Echt waar! Omdat we er nu meer dan ooit gebruik van maken wordt onze primaire somatosensory cortex steker ontwikkeld. Euh, onze wat?! De regio van de hersenen die onze duimen controleert. Aha! Dat is dus niet onbelangrijk.

De meeste gebruikers bedienen hun smartphone met één hand. Links, of rechts, om het scherm te gebruiken. We gebruiken onze duimen als muis, maar dat heeft natuurlijk z’n gebreken.

Een scherm en muis is de ideale combinatie, omdat je makkelijk overal raakt waar je wilt geraken. Op een smartphone word je al snel gelimiteerd. Bepaalde delen van je scherm zijn namelijk gewoon niet te bereiken wanneer je je smartphone met één hand bedient.

 

En laat die regio nu net degene zijn waar de navigatie meestal staat. Daardoor moet je je telefoon vaak op een andere, niet-natuurlijke manier gebruiken om daar te geraken, of moet je je andere hand gebruiken. Dat betekent: meer tijd, meer moeite. En dat is niet echt gebruiksvriendelijk, toch? 

Nope! Zeker niet als je ook nog eens bedenkt dat onze smartphone schermen er niet kleiner op worden. Grotere schermen maken het onbereikbare deel namelijk nog groter! Je moet nog meer moeite doen om te raken waar je moet zijn. Het is dus dringend tijd voor verandering.

Iets wat Apple al een tijdje geleden heeft gesnapt. De laatste iPhone versies zijn namelijk voorzien van een handige functie om je scherm te verkleinen. Door een double tap op de home button verkleint het scherm, waardoor ’t bereikbaar gebied groter wordt. Bij de allernieuwste versies is die home button er natuurlijk niet meer, maar met de nodige instellingen verkrijg je hetzelfde effect.

En ook wij zijn ervan overtuigd dat het dringend tijd is voor verandering! Voor meer bereikbaarheid en een betere gebruikservaring.

Van desktop naar mobiel, van boven naar onder.

Jammer genoeg kunnen designers niet bepalen of veranderen hoe mensen hun telefoon vasthouden en gebruiken. Wat ze wél kunnen? Het design van de mobiele website aanpassen, en de navigatie daarbij een gebruiksvriendelijke rol geven. Dat deden we dan ook voor Mobly. 

Desktop vs mobile bottom navigatie

Mobly gaat voor betere mobiliteit. Het bedrijf zet bestuurders terug zelf achter het stuur met handige mobiliteitsdiensten. Zo helpt het elke bestuurder beter op weg. Het is dan ook maar logisch dat de doelgroep van Mobly ook z’n weg moet vinden op de website. Daarom klopte Mobly bij ons aan voor een volledige redesign en opzet van de bestaande website. Een website met een doordachte structuur en gerichte conversiepunten. Zo brengen we de bezoeker op ’t rechte pad.

En daarbij gingen wij volledig uit van de gebruiker. Op desktop is het de gewoonte om de navigatie bovenaan het scherm te zetten. Logischerwijs wordt dat meestal gewoon overgenomen in ’t design voor mobile. Als je weet dat we al een hele tijd mobile first designen, houdt die redenering geen steek. Zeker niet als je weet dat we tegenwoordig user first designen. Daarom pakten we het voor Mobly nét iets anders aan. We kozen voor een bottom navigation, onderaan het scherm. Die is beter bereikbaar voor de gebruiker, en maakt het leven nog makkelijker. 

Waar je op moet letten bij een bottom navigation

Het gebruik

Een bottom navigation gebruik je enkel en alleen voor mobiele versies van je website. Van bottom navigations op desktop blijf je beter weg. Dat heeft gewoon geen zin, én werkt zelfs tegenstrijdig.

Surfen je bezoekers vooral mobiel? Dan kies je best voor een navigatie onderaan je scherm.

De gebruikers van Mobly surfen namelijk vooral mobiel. Maar liefst 65% bezoekt de mobiele website, tegenover maar 35% desktop gebruikers. Een opvallend cijfer dus, dat ons meteen duidelijk maakte dat er een andere aanpak nodig was. 

De structuur

Hoe je die navigatie het best opbouwt? Met iconen, en eventueel een tekstlabel, die verwijzen naar de meest belangrijke pagina’s voor de gebruiker en dus overal beschikbaar moeten zijn. Je houdt daarbij best rekening met het feit dat je minimum drie en maximum vijf iconen toont. Gebruik je er meer? Dan valt het voordeel van gebruiksvriendelijkheid weg, en verkrijg je net een omgekeerd effect. Wat als je nu meer pagina’s in je website hebt? Dan steek je die eenvoudigweg in een hamburger-menu.

De belangrijkste pagina’s voor Mobly? Dat zijn er drie:

  • Oplossingen
    Een overzicht van alle oplossingen die Mobly biedt om je mobiliteit te verbeteren.
  • Blog
    Informatie, nieuws en tips over mobiliteit, en welke rol Mobly daarin speelt.
  • Contact
    Alle nodige contactgegevens, en een formulier om direct je vragen te stellen.

De rest? Dat zit onder een hamburger-menu. Op die manier worden de belangrijkste pagina’s met conversiepunten onder de aandacht gebracht, en zijn secundaire pagina’s minder zichtbaar.

Bottom navigatie mobile

Scrollen en swipen

Wat gebeurt er met de navigatie als je scrolt? Door naar beneden te scrollen verdwijnt de navigatie, zodat je alle ruimte hebt om de pagina te bekijken. Scrol je terug naar boven? Dan verschijnt de navigatie terug.

En swipen? Out of sight is out of mind! Het is heel belangrijk dat je de navigatie onderaan je scherm ziet als een vast item. Dat betekent dat je dus niét kunt swipen in die navigatie. Enkel de zichtbare iconen zijn beschikbaar in de navigatie. Er zitten dus geen andere iconen meer verstopt. Ook swipen tussen verschillende menu-items is niet mogelijk. Om van pagina te veranderen gebruik je dus steeds een klik in de navigatie zelf.

Ook bij Mobly is swipen uit den boze. De navigatie staat vast, en bevat geen verborgen iconen die je enkel te zien krijgt door te swipen. Enkel het menu bevat secundaire informatie.

De vormgeving

In de communicatie met de gebruiker speelt de vormgeving van de navigatie een belangrijke rol. Daarom gebruik je altijd herkenbare iconen die duidelijk maken wat de gebruiker erachter precies kan vinden. In ’t beste geval voeg je tekst labels toe om het nog duidelijker te maken. Deze labels moeten dan wel kort en leesbaar zijn, zodat ze mooi onder de iconen passen. Het icoon van de pagina die momenteel in gebruik is geef je trouwens best een andere kleur. Zo vindt de gebruiker makkelijk de weg.

Bij Mobly hebben we elk sprekend icoon van een gepast tekst label voorzien. De gebruikte kleurcode communiceert duidelijk waar de gebruiker zich bevindt.

Bottom navigatie mobile

Surfen jouw gebruikers vooral mobiel, en heb je nog niet nagedacht over zo’n bottom navigation? Nu is hét moment om je mobiele website aan te passen.

Op naar meer gebruiksvriendelijkheid!