Sitemaps

Voordat je met je site kunt beginnen moet je veel zaken al besloten hebben. Denk maar aan het doel van de website, de doelgroep, wat de klant wil bereiken. Je moet weten hoeveel inhoud je straks kwijt moet op je site, deze informatie heb je nodig om een sitemap te maken en je wireframes.

Er bestaan sitemaps en flowcharts. Er is verschil tussen deze.

  • Een sitemap is een visuele voorstelling van de relatie van de verschillende pagina’s van een website tot elkaar. Dit wordt ook wel een navigatie model of site structuur genoemd.

    sitemap

    Een sitemap geeft een schematisch overzicht van de pagina’s op je site.

  • Een flowchart visualiseert een proces binnen een website. Meestal is dit gecentreerd rondom een specifieke taak (inloggen, iets online kopen of iets dergelijks).
Een flowchart visualiseert een proces.

Een flowchart visualiseert een proces.

In de praktijk wordt veel gesproken over een flowchart als er een sitemap wordt bedoeld. In deze post gebruik ik heel specifiek het woord sitemap!

 

Tips voor je sitemap

Op het gebied van sitemaps zul je er voor willen zorgen dat een bezoeker met zo MIN mogelijk muiskliks de gewenste informatie bereikt. De sitemap en flowchart voor een ‘eenvoudige’ HTML pagina kunnen er heel goed hetzelfde uitzien; immers, er zijn een aantal (niet database gestuurde pagina’s aan elkaar gelinkt, er is geen formulier, geen extra handeling, alleen platte tekst met her en der een plaatje.

In dat geval kunnen beiden er heel eenvoudig uitzien. De homepagina staat bovenaan. Trek van daaruit lijntjes naar de mainmenu items. Eventuele submenu items komen daar dan weer onder te staan. Het is niet gebruikelijk om alle pagina’s met lijntjes aan elkaar te verbinden; het is een ongeschreven regel dat je altijd via het mainmenu naar de andere pagina’s kunt.

 

Sitemap

Deze site heeft 7 menu items (inclusief Home) en 4 externe links naar diverse social media.

Het bovenste horizontale onderdeel is het mainmenu. Hieronder “hangen” submenu(‘s). Een brede website Dit noemen we ook wel de breedte van je website. De verticale onderdelen zijn submenu’s. Dit noemen we ook wel de diepte van je website.

Een goede site is niet te breed en zeker niet te diep. Een te brede website betekent te veel keuze qua menu items en een te diepe site betekent te veel muiskliks (zie voorbeeld hier onder).

Een te diepe site

Deze website is te diep; er zijn te veel muiskliks nodig om te komen waar je wilt.

 

Regel het vooraf

Het mag wel zo lijken alsof alles makkelijk aan te passen is op een website maar meteen aan het begin neem je belangrijke beslissingen mbt de techniek. Het is dan tijdrovend en (dus) vrij prijzig om dit naderhand aan
te laten passen. Grote veranderingen achteraf staan in feite gelijk aan het opnieuw moeten bouwen van je website!

Bedenk hoeveel inhoud je hebt voor je hele website:

  1. Wat MOET er op komen:
    • Een menu (uiteraard).
    • Een gedeelte waar de belangrijkste inhoud komt.
    • Het logo.
  2. Wat MAG er op komen:
    • Leuke plaatjes.
    • Wat extra (minder belangrijke) inhoud zoals een shoutbox of twitter/ Facebook nieuws.
    • Filmpjes.