Nieuwsbrief

Schrijf je nu in voor onze nieuwsbrief en blijf op de hoogte van de laatste artikelen!

Een tabbar voor jouw mobiele website: Tab like you never tabbed before

logo
logo
red pattern

In een eerder artikel schreef ik over de gebruiksvriendelijkheid van het hamburgermenu voor mobiele devices. Maar als jouw site niet meer dan vier navigatielinks op het hoogste niveau heeft, kan je misschien beter voor een andere oplossing gaan. Een tabbar, onder of boven in je website, is daar een goed voorbeeld van. Maar wat zijn de voordelen van een tabbar en hoe pas je die toe?

Wat is een tabbar?

De tabbar (of tabbalk) is een nauwe variant van de navigatiebalk, specifiek voor apps. Het kan bovenaan (Android) of onderaan (iOS) de pagina verschijnen. Op de meeste pagina’s binnen een app is hij altijd aanwezig, met dezelfde nadelige functies als de navigatiebalk.

Een belangrijk verschil tussen tabbalken en navigatiebalken is dat tabbalken altijd zichtbaar zijn op het scherm, of de gebruiker nu naar beneden of naar boven scrolt. Navigatiebalken beginnen meestal bovenaan de pagina, maar verdwijnen zodra de gebruiker een of meer schermen naar beneden scrolt, mits ze niet sticky zijn. Sticky? Het woord zegt het al. Dit is een plakkerige versie van de navigatiebalk die altijd bovenaan je scherm blijft staan, waar je ook heen scrolt.

Voordelen van de tabbar

  • Meer kernfuncties en functionaliteit op het startscherm te zien
  • Laat in één oogopslag zien op welke pagina je je bevindt
  • Gemakkelijk bereikbare knoppen
  • Direct duidelijk waar ze toe dienen en nodigt gebruikers uit om de functies te ontdekken
  • Direct toegankelijk

Nadelen van de tabbar

  • Beperkt tot slechts vier of vijf menu items (afhankelijk van de grootte)
  • Je moet de functies van de tabbladen duidelijk definiëren, waardoor je mogelijk extra pictogrammen moet maken om ze duidelijk te maken

Hoe werkt het tabmenu

Het tabmenu is een erg sterk menu. Niet voor niets is het overgenomen door Facebook, Instagram en vele andere apps. Met het menu met de tabbladen onderaan zien gebruikers de kernfuncties en functionaliteit direct op het startscherm en zien ze in één oogopslag op welke pagina ze zich bevinden. Directe toegang is hier de sleutel en daar houden we tegenwoordig van. Zo kunnen gebruikers snel overschakelen naar verschillende functies met een enkele klik en zonder terug te hoeven keren naar het startscherm.

 

De sleutel is om het type mobiele navigatie te kiezen waarbij de onvermijdelijke nadelen jouw gebruikers het minst zullen hinderen bij de taken die ze op jouw site uitvoeren.

Slider tabbar

Een andere optie, wanneer er meer dan vier links zijn is het toevoegen van een slider tabbar. Deze toont aan de hand van de het schermformaat de eerste vier links, waarbij je door kan scrollen om meer opties te zien. Een slider tabbar moet je zeker niet gebruiken bij het hoofdmenu of belangrijke pagina’s. Je kunt het wel toevoegen aan categorieën, prijslijsten of andere lijstjes die verschillende content tonen.

Toepassen tabmenu

Voor jouw site is de beste aanpak om meerdere UI-elementen op te nemen die de netheid van een navigatie combineren met de bruikbare elementen van de alternatieven. Vaak hebben apps nog steeds een heleboel functies die gebruikers af en toe willen, maar niet vaak genoeg gebruiken om op het startscherm te plaatsen. Het hebben van een tabbar in combinatie met andere navigatie-elementen geeft gebruikers het beste van twee werelden.

Facebook is hiervan het meest genoemde voorbeeld. Binnen hun navigatietabbladen maken ze gebruik van een hamburgermenu én een tabmenu om toegang te geven tot al hun andere functies.

Facebook navigation menu
Facebook navigation menu

Hoe pas je het tabmenu toe op websites?

Je kan niet meer ontkennen dat we voornamelijk mobile first werken. Het hangt wel af van een aantal factoren. Voor B2B commercie wordt bijvoorbeeld de meeste informatie opgezocht via desktop en worden de meeste aankopen ook gedaan over desktop. Dit is omdat zulke aankopen vaak hogere betrokkenheid vragen, vanwege grotere investeringswaarde. Voor B2C commercie is dit tot zekere hoogte ook zo. Consumenten die op zoek zijn naar een nieuwe vloer zullen dit vaker via desktop doen dan via hun mobiel, maar kappersafspraken zullen vooral via mobiel worden ingepland.

De reden is simpel. Voor producten en diensten die een hogere betrokkenheid eisen, nemen mensen vaker rustig de tijd en gaan ze er echt even voor zitten. Producten en diensten met een lagere betrokkenheid, zoals routineaankopen, worden snel via de telefoon gemaakt in bijvoorbeeld een lunchpauze of onderweg in de trein.

Neem daarom de regel van 4 in acht wanneer je een mobiele versie van je website gaat maken. Zijn de belangrijkste pagina’s op te delen in maximaal 4 pagina’s, overweeg dan om in plaats van een hamburgermenu een tabmenu toe te voegen.

Als je besluit om een tabbalk te gebruiken, moet die het belangrijkste gedeelte van het scherm innemen en moet er weinig extra ruimte zijn voor andere navigatie-opties. Als de website vier of vijf hoofdnavigatie-opties heeft, kan het zinvol zijn om ze allemaal altijd zichtbaar te hebben op het scherm, vooral als dit opties zijn die waarschijnlijk nodig zullen zijn voor het probleem van de bezoeker.

Zelfs wanneer je website maar een paar belangrijke pagina’s heeft op het hoogste niveau, worden er vaak nog belangrijke functies vergeten. Een zoekicoon, een winkelwagenicoon en een accounticoon moeten ook worden meegerekend. Dit kan ervoor zorgen dat de gehele chrome opgeteld te veel ruimte op de pagina inneemt. Chrome is de ruimte die altijd zichtbaar is op mobiel, zoals het menu, winkelwagenicoon, zoekfunctie en navigatiebalk.

Autozone.com: hoewel de site slechts vier hoofdnavigatiecategorieën had (Winkel, Reparatiehulp, Aanbiedingen en Winkel zoeken), waren er veel meer Chrome-elementen aanwezig op de pagina (logo, winkelwagentje, My Zone-link, zoekvak) die allemaal een te groot gebied beslaan.

Autozone
Autozone

Carrouselnavigatiebalk

Tabbalken en navigatiebalken zijn zeer geschikt voor sites met relatief weinig navigatie-opties. Als jouw site meer dan vijf opties heeft, is het moeilijk om ze in een tab of navigatiebalk te plaatsen en toch de optimale grootte van de button/knop te behouden. Oplossingen zoals een carrouselnavigatiebalk of tabbalk met een scroll optie naar rechts werken wel, maar zijn niet altijd geschikt.

Uit het oog, uit het hart’ kunnen we wel zeggen in dit geval. Als de categorieën heel sterk verschillen, is het waarschijnlijk dat gebruikers niet overwegen naar die opties te scrollen. Dat komt simpelweg doordat de zichtbare informatie van de overige tabs niet genoeg zegt over de onzichtbare tabs en je dus maar moet raden wat er verborgen zit achter deze scroll.

Het juiste menu vinden voor jouw mobiele website

Navigatie binnen een website is extra belangrijk voor mobiel, waar gebruikers snelheid en efficiëntie verwachten. Zorg ervoor dat je deze methoden test met zowel gebruikerstests als A/B-tests. Zo weet je zeker dat de nieuwe ontwerpkeuzes daadwerkelijk het gedrag en de perceptie van gebruikers beïnvloeden zoals je had voorspeld.

Het is een uitdaging om navigatie belangrijk en toegankelijk te maken op mobiel. Dat komt door de beperkingen van het kleine scherm en de noodzaak om de inhoud voorrang te geven boven de UI-elementen. Verschillende basisnavigatiepatronen proberen deze uitdaging op verschillende manieren op te lossen, die allemaal lijden aan verschillende bruikbaarheidsproblemen.

De sleutel is om het type mobiele navigatie te kiezen waarbij de onvermijdelijke nadelen jouw gebruikers het minst zullen hinderen bij de taken die ze op jouw site uitvoeren:

  • Hamburger-menu’s bieden plaats aan een groot aantal opties, maar deze opties zijn minder vindbaar. Ze zijn bijzonder geschikt voor sites die voornamelijk browsen.
  • Navigatiebalken en tabbalken nemen ruimte in op de pagina en werken goed als het aantal navigatie-opties klein is.

Liever professionele hulp bij het uitzoeken van het menu voor jouw mobiele website?

Ben je na het lezen van deze blog nieuwsgierig geworden hoe jouw website geoptimaliseerd kan worden voor jouw mobiele gebruikers? Onze UX- en webdesigners hebben de juiste kennis en ervaring in huis. Zij kunnen samen met jou snel zorgen voor de beste visuele keuzes. Natuurlijk kunnen wij je ook helpen met andere onderdelen van je site. Bel ons gewoon even of reageer hieronder, dan bespreken we wat wij voor jou kunnen doen.