Het belang van responsive navigatie

Het belang van responsive navigatie

Eén van de meest belangrijke uitdagingen van responsive design is je navigatie. De desktopversie van een website is meestal groot genoeg om de navigatie uitgebreid weer te geven. Maar hoe kleiner het scherm, hoe moeilijker het wordt om dezelfde inhoud op een duidelijke en gebruiksvriendelijke manier te tonen. Het mobile-first principe is hier van toepassing; je website zou voor mobiele apparaten moeten worden ontworpen.

Belangrijke content hoort een primaire plaats te krijgen in de layout van je website. De need to know-informatie staat op een kostbare plek, kun je wel zeggen. Hoe ver ga jij in het responsive design van je website? Je vindt hier een aantal tips om je responsive navigatie zo aan te passen dat het voor meerdere devices geschikt is.

Responsive design

Houd rekening met f-patroon en i-patroon

De kracht van een responsive site zit hem natuurlijk in het aanpassingsvermogen. Je kunt voor verschillende devices spreken van wisselende leespatronen: een f-patroon op je desktop naar een i-patroon op je mobiele device. Deze patronen kunnen gemeten worden met een eye-tracking onderzoek. Voor een i-patroon op je mobiele device is de punt het gedeelte boven de vouw (ook wel de first view). Er is hierna één scrollende beweging naar beneden.

Een artikel van Jakob Nielsen, ‘F-Shaped Pattern For Reading Web Content‘, licht toe:

“Eyetracking visualizations show that users often read web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.”

Leespatronen responsive

Bepaal de prioriteit van je content

Welke content is echt belangrijk voor de gebruikers van je website? En in welke situatie wordt je site bezocht vanaf een mobiel device? Op een mobiel device neemt navigatie vaak veel kostbare ruimte in. Geef je bezoeker een duwtje in de juiste richting en toon alleen belangrijke content bovenaan.  Andere (minder belangrijke) functies krijgen dan een plek onderaan.

Je kunt dit doen door middel van een ankerlink in te voegen (ofwel topverwijzing naar een footernavigatie), het automatisch invouwen van bepaalde content of functies of een drop-downmenu zoals de toepassing van KWF Kankerbestrijding.

Voorbeeld prioriteitbepaling:
De desktop versie heeft bovenin drie navigatieonderdelen, waarvan één need to know onderwerp (zoals doneren op de site van KWF). Op de desktop staat alle content in het menu. Op je mobiel of tablet vind je de doneer-button alleen nog bovenaan, overige content is verplaatst naar een dropdown menu. Overzichtelijk en gebruiksvriendelijk.

 

KWF Responsive

Gebruik dus dat dropdown menu

Complexe content kun je met een drop-down menu makkelijker structureren. Wees wel voorzichtig met een drop-down menu dat bestaat uit meerdere lagen. Ruimte op een kleiner device is namelijk te beperkt voor een lang drop-down menu.

Dropdown menu

Wees creatief bij beperkte ruimte

In het geval van creativiteit spreekt onderstaand beeld meer dan duizend woorden. Je hebt te maken met ruimtebeperking op een mobiel apparaat, kleiner dan een desktop. En dat blijft een uitdaging. Toch is de kracht van een responsive site om, ongeacht grootte van het beeldscherm, the look and feel te behouden op ieder formaat. Het voorbeeld laat zien hoe je dit op meerdere devices mooi herkenbaar kunt laten blijven.

 

Creatieve navigatie

Kortom

Deze tips kunnen je helpen bij de ontwikkeling van je responsive site. Het doel van je site moet hoe dan ook zijn, om meerdere doelgroepen te bedienen met de juiste content op verschillende devices. Je navigatie speelt daarin een dermate belangrijke rol, zet dit daarom hoog op de agenda!

 

Over de auteur: Kristel Bulthuis

Waar voorheen vaak nog gezegd werd '...moeten we nog iets met content?', wordt inmiddels duidelijk: webredactie of contentmanagement is een vak apart. Ik bekijk het vak graag vanuit de praktijk. Wat maakt ons vak uitdagend, welke tips & tricks zijn onmisbaar en wat zijn de trends die in de gaten gehouden moeten worden?

Tags: Responsive, responsive website, responsive navigatie, responsive design