Submenu's in contentrijke websites, trends en bevindingen
Categorie: Inspiratie, Artikelen
Datum: 07 01 10 - 13:27
Contentrijke websites hebben een probleem: veel content. Tegelijk is dat uiteraard dé kracht van een website... content = King!
Hoofdnavigatie is vaak wel iets waar je met elkaar uitkomt... Subnavigatie is echter lastiger: hoeveel niveau's? horizontaal of verticaal weergegeven? uitklappen na een klik, op bij muis-over?
In een kleine presentatie ben ik op zoek gegaan naar welke trends er zijn op dit gebied bij een aantal toonaangevende websites.
Voorbeelden van subnavigatie in content-rijke websites
View more presentations from Marnix Bras.
- samsung, visuele aanpak - http://www.samsung.com/nl/
- na klik tweede keuzebalk
- kpn, homepage = één groot submenu - http://www.kpn.com/
- abnamro, grote uiklapper, fadeout van website - http://www.abnamro.nl/
- rabo sub-sub-submenu, ouderwets, maar duidelijk - http://www.rabobank.nl/
- ns: ook grote uitklap - http://www.ns.nl/
- hema: eenvoudige uitklap, mét visuele highlights - http://www.hema.nl/
- v&d: eenvoudige uitklap, mét iconen - http://www.vd.nl/
- ing: sub is brede uitklap - http://www.ing.nl/
- op vervolgpagina’s is sub nog steeds zichtbaar, maar kleiner
- bbc heeft geen navigatie meer… alles in contentblokken - http://www.bbc.co.uk/
- portal omroep.nl - grote uitklappers met hightlights uit subsites - http://www.omroep.nl/
- 30elm: geen uitklap, gewoon uitgeklapt laten boven in de site - http://www.30elm.com/
- philips: uiklapper over de site met visuele highlight, daaronder sub en sub-submenu’s - http://www.philips.nl/
- apple: na keuze in visuele submenu verdwijnt submenu - http://www.apple.com/mac/
Enkele trends die hieruit zijn te ontdekken:
- Mega-menu's. Brede uitklapbare submenu's. Volgens Jacob Nielsen zijn ze effectiever dan gewone drop-downs.
- Fade-outs. Als je in een menu zit, vervaagt de rest van de rest van de website. Zo blijft de focus op de navigatie
- Visuele menu's: met iconen of produktfoto's worden de menu-items
- Beschrijvende menu's: Eén woord dekt niet altijd de lading: een langere beschrijvende zin op een knop voor een menu-item
- Geen menu: de hele website bevat content-blokken met lees meer links (zie http://www.bbc.co.uk/ )
Enkele best practices blijven geldig:
- Een klikbaar kruimelpad die toont waar je bent, en waar je niveaus hoger kunt.
- Een logische opbouw van de URL, synchroon aan het kruimelpad.
- Menu altijd als list-items in de HTML broncode, zo mogelijk in de code direct onder de content (zoekmachines vinden content belangrijker dan menu-links)
- Een opsomming van gelijkwaardige menu-items (van hetzelfde navigatie-niveau als waar je je bevindt) op elke vervolgpagina
- Niet teveel items in één opsomming
- Maar ook niet teveel niveau's..
Algemeen blijft natuurlijk de aanbeveling om met grote navigatiestructuren altijd alternatieve manieren van navigatie aan te bieden, niet alleen voor de zoekmachine, maar ook voor de bezoeker..
- Met stip op nr. 1: een goede zoekfunctie. Bij voorkeur één die een kennisdatabase combineert met zoekresultaten over de hele website. Geen oeverloze rij pdf-jes waar toevallig het trefwoord in staat dus.
- Een klikbaar lijstje pagina's van een stuk of 5 "Meest populaire pagina's"
- Een klikbaar lijstje van 5 pagina's die in de navigatie "verstopt" zitten, maar wel veel gezocht worden, vermelden onder "Snel naar"
- Een klikbaar lijstje van gerelateerde pagina's of gerelateerde trefwoorden tonen. "Mensen die dit kochten, kochten ook..."
- Een sitemap met alle pagina's die in het menu zitten, én alle extra pagina's (die niet in het menu onder te brengen waren) op een rij.
- Een "fat footer" waar pagina's niet op hiërarchie, maar op thema zijn gegroepeerd (zie http://www.hema.nl/ en http://www.agisweb.nl/)
Meer lees/klikvoer:
- http://www.useit.com/alertbox/mega-dropdown-menus.html
- http://vandelaydesign.com/blog/galleries/creative-navigation/
- http://webdesignledger.com/tips/web-design-trends-for-2010
- http://www.webdesignerwall.com/trends/30-examples-of-attractive-nav/
- http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/