Menu

Naar inhoud

Websites

Inloggen NL - EN

2. Navigatie

In de header ziet de bezoeker op welke UGent-website hij zich bevindt. Header, broodkruimel en footer vormen samen de basislayout.

Navigeren doorheen de website gebeurt via elementen die zich in de header en footer bevinden.

Bekijk het sjabloon 'Basislayout' met de navigatie-elementen

Onderstaand zie je 4 voorbeelden van headers toegepast op bestaande websites.

A) Basisvariant zonder titel

  • Logo linksboven: linkt altijd door naar homepagina www.ugent.be of www.ugent.be/en (naargelang de taal van je website)
  • In blauw vlak:
    • Zoekbox
    • Eventuele snellinks (vb. 'Voor medewerkers')
    • Taalkeuze (steeds voluit geschreven vb. 'In English')
  • Topnavigatie: 
    • Max. 6 items naast elkaar (op mobiele toestellen wordt dit een 'hamburger'-menu)
    • Doelgroepen: via uitklapmenu 'Info voor'

 

Bekijk het sjabloon 'Basislayout' met de navigatie-elementen

B) Variant met korte titel (vb: www.ugent.be/student)

  • Idem als Variant zonder titel
  • In blauw vlak:
    • Korte titel (max. 25 karakters): aanklikbaar met link naar de homepagina van je website
    • Eventuele relevante snellinks

 

Bekijk het sjabloon 'Homepagina centrale doelgroep'

C) Variant met lange titel (vb. www.ugent.be/di/laim)

Gebruik deze variant bijvoorbeeld voor vakgroep, onderzoeksgroep of labo.

  • Idem als Variant zonder titel
  • In blauw vlak:
    • Lange titel (max. 2 regels)
    • Terugklik naar 'Home Faculteit ...' en 'Home UGent'

De broodkruimel geeft het hiërarchische pad weer vanaf de homepage tot de pagina waar de gebruiker zich bevindt.

Broodkruimels zijn een aanvulling op de navigatie van je website: zij helpen de gebruiker om zich te oriënteren. De broodkruimel laat ook toe dat de gebruiker snel naar een hoger niveau springt.

Het broodkruimelpad helpt bovendien om beter te scoren in Google.

Richtlijnen

  • De broodkruimel begint steeds met Home
  • Alle onderdelen zijn aanklikbaar behalve het laatste item
  • De onderdelen worden gescheiden door het groter-dan-teken '>'

De footer onderaan de webpagina herhaalt de belangrijkste navigatie-items. We respecteren dezelfde volgorde als deze van de links in de topnavigatie.

A) Basisvariant

Generieke fat footer

  • 3 eerste hoofditems uit topnavigatie van je website met eronder de corresponderende sublinks
  • Sociale media iconen (mouse-over in originele kleur van het social mediakanaal)
  • Links voor Feedbackformulier - Disclaimer - Cookies - Toegankelijkheid - Aan-/afmelden
  • Copyright vermelden is aangewezen, maar niet verplicht. Vermeld 'Universiteit Gent' als auteursrechthebbende en het jaartal van eerste publicatie (vb. '© 2015 Universiteit Gent') of meerdere jaren als er nadien aanpassingen gebeuren (vb. '©2015-2017 Universiteit Gent').

B) Variant incl. facultaire icoon

Dit voorbeeld is relevant voor faculteiten, vakgroepen, onderzoeksgroepen of labo's die terugklik willen voorzien naar de homepagina van de (bovenliggende) faculteit.

Het facultaire icoon (zie 2.7 Faculteit iconen) komt erbij tussen de linklijsten en sociale media iconen. De inhoud van de linklijsten kan je zelf herprogrammeren naargelang je website.

Navigatie op lange detailpagina's met veel tussentitels. Elke link in de subnavigatie stemt overeen met een H2-titel op de pagina (zie 3.2 Typografie).

Dit navigatiemenu beweegt mee wanneer de gebruiker op en neer scrollt doorheen de pagina of wanneer hij een link in de subnavigatie aanklikt.

Zie template 7.4 Detailpagina met paginanavigatie

Naar boven