Functioneel ontwerp

Wat de bezoeker gewend is op internet, is meestal het beste.

Navigatiestructuur

Navigeren is de manier waarop een bezoeker door de site kan manoeuvreren, waarop hij kan klikken en wat er dan gebeurt.

Een bezoeker heeft (vaak) weinig geduld en zal een site niet uitgebreid gaan bestuderen wat betreft structuur e.d. (hopelijk wel wat betreft de informatie natuurlijk). Men klikt snel en leest niet goed, dus moet men 'in 1 oogopslag' kunnen zien wat een site te bieden heeft. Voor een bezoeker is het belangrijk te weten waar hij in de site is en waar hij naar toe kan, en eventueel ook waar hij is geweest.

Er bestaan meerdere typen navigatiemogelijkheden:

• Menu's (in diverse soorten en maten):
  Vaak heeft men meerdere niveaus, bijvoorbeeld een hoofdmenu en een submenu, waarbij men kan kiezen of die horizontaal en/of verticaal geplaatst worden. Hoe complexer en groter een website is, hoe belangrijker het is dat de navigatiestructuur eenvoudig, helder én consistent is!
• Belangrijke items op de pagina's (met name homepage):
  Afhankelijk van het type site en de pagina waarop de gebruiker zich bevindt, kan het aantrekkelijk zijn om nieuws, aanbieding, short-cuts naar ander/populaire delen van de site weer te geven.
• Zoeken:
  Naast het zoeken naar een site is het vaak ook gebruikelijk om een gebruiker in staat te stellen om binnn een site te zoeken. Rechtsboven op de pagina (in ieder geval de homepage) is gebruikelijk; doe het niet via alleen een knop, maar gebruik meteen een tekstveld om de zoekterm(en) in te laten geven..
  PS: Een mogelijkheid om op een simpele manier een vorm van zoekfunctionaliteit te realiseren binnen je website zonder gebruik te hoeven maken van databases e.d. is door zoekmachines als Google en FreeFind binnen je eigen site te laten zoeken. Dit gaat i.h.a. echter wel op basis van de gegevens die door de betreffende search engine al geïndexeerd zijn!
• Breadcrumbs: hebben we in de opdracht van week 3 al gezien.
• Sitemap:
  Biedt de gebruiker een compleet overzicht van de menustructuur annex paginaindeling van de website, de plattegrond zeg maar. Door een sitemap tekstueel in plaats van grafisch te maken kan een gebruiker de sitemap doorzoeken met de ZoekOpEenPagina-functie van de browser. Sitemaps moeten altijd op 1 pagina staan.
• Specifieke extra's die afhankelijk zijn van het type site (b.v. woordenlijst, indexen, e.d.)
  Voor sites die vooral als doel hebben om informatie te geven, kan het nuttig zijn om ook een andere 'overzichtsvorm' te genereren. Deze site, maar ook de site die jullie in de opdracht gaan maken over je zelfgekozen onderwerp, zijn voorbeelden van sites waarvoor een index (met hyperlinks!) een bruikbaar, extra navigatiemiddel kan zijn.

NB: Als gebruikers de andere navigatiefuncties als zoeken, breadcrumbs en sitemap vaak gebruiken kan dit heel goed een indicatie zijn dat de standaard menustructuur onvoldoende duidelijk en logisch zijn!

Het geheel aan de mogelijkheden die voor navigatie in een site geboden worden, vormt samen de navigatiestructuur. Daar waar de informatiestructuur een hiërarchische indeling van de informatie in brokken is - waarbij dus nog niets (!!) gezegd wordt over hoe je die brokken kunt bereiken -, zegt de navigatiestructuur dus juist hoe gebruikers de gewenste informatie kunnen bereiken. Maar de navigatiestructuur gaat verder en bepaalt bijvoorbeeld ook hoe een gebruiker weet waar hij is.

Zie ini_navigatie_deels.jpg

Paginaontwerp

Een andere kwestie die bij het functioneel ontwerp thuishoort is je paginaindeling.

Een aanpak hierbij is om 3 typen gebieden op je pagina te onderscheiden, namelijk voor informatie, voor navigatie en voor decoratie. De eerste 2 typen zul je altijd tegenkomen, zoals duidelijk mag zijn na de voorafgaande stof. Het 3e type, dat dient voor de aankleding van de site, kom je misschien niet altijd tegen, b.v. bij een heel functionele site die het zonder 'toeters en bellen' kan stellen.

Zie ini_layout_1.jpg

Een indeling op basis van deze 3 types kan vaak aangevuld of uitgewerkt worden tot een paginalayout waarin de volgende functies terug kunnen komen: logo, slagzin (tagline), zoeken, breadcrumb trail, menu en inhoud. Ze hoeven uiteraard niet allemaal aanwezig te zijn.

Indien mogelijk, is het het beste om 1 paginalayout voor alle pagina's van de site (met uitzondering van de sitemap) te hanteren. Dat is voor de gebruiker het duidelijkst. Als dat niet kan, dan verdient het de voorkeur om zo min mogelijk verschillende layouts te gebruiken en daarbinnen de belangrijkste navigatiemiddelen steeds op dezelfde plaatsen te zetten.

Zie ini_layout_2.jpg

Logo's worden vaak linksboven op een pagina gezet en fungeren meestal als link naar de homepage. Ze spelen een belangrijke rol in de herkenbaarheid van de site naar de bezoeker en dienen op elke pagina aanwezig te zijn. Ook omdat bezoekers niet altijd op de homepage binnenkomen (bijvoorbeeld via search engines).

Schermgrootte speelt ook een rol bij de paginalayout, zeker als je met de verfijning bezig bent. Je mag (eigenlijk) de bezoeker geen verplichting opleggen wat dit betreft (en al helemaal niet het scherm automatisch full-screen openen, met of zonder zichtbare browser-bediening), hetgeen betekent dat je je website voor verschillende resoluties geschikt zou moeten maken. Dat betekent overigens niet dat je bij hoge resoluties je scherm over de volledige breedte moet vullen met tekst - dat leest b.v. niet fijn -. Je mag best witruimte opnemen in de site, dat maakt het beeld rustiger.
PS: Als minimale schermgrootte mag tegenwoordig 1024x768 aangehouden worden; kleiner komt niet veel meer voor.

Actie-reactie: stroomdiagrammen en storyboards

Met behulp van stroomdiagrammen kun je aangeven hoe de navigatie in en tussen pagina's tot stand komt. Ze maken gebruik van symbolen om beslispunten (in dit geval tijdens het bezoeken van pagina's) aan te geven met de mogelijke keuzes, en aan te geven hoe het systeem dient te reageren.

Storyboards zijn tekeningen in de vorm van een soort stripverhaal, waarin je vertelt hoe een bezoeker de website bezoekt en zijn weg daarin moet kunnen vinden door te klikken en de daarbij behorende reacties weer te geven.

Beide technieken zijn voorbeelden die beschrijven wat de gebruiker op een pagina kan doen (invullen en/of klikken) en wat er vervolgens door 'het systeem' (in dit geval de website) gedaan moet worden: wat moet waar getoond worden?

Zie ini_documentatie.pdf

Samenvatting

Als je een goed functioneel ontwerp hebt gemaakt, dan heb je geregeld dat de vragen Waar ben ik (geweest) en Waar kan ik naar toe altijd eenvoudig door de bezoeker te beantwoorden zijn! Met behulp van de beschreven navigatiestructuur, paginalayout en bediening van de website moet duidelijk zijn hoe de website functioneert (vandaar de naam functioneel ontwerp). Dit functioneel ontwerp moet je aan een programmeur kunnen geven en hij moet je daarmee een werkende (maar nog kale want zonder de letterlijke inhoud) website op kunnen leveren!

Dit laatste aspect is voor jezelf een goed criterium bij de controle of je functioneel ontwerp compleet en voldoende duidelijk is: kan de programmeur hiermee aan de slag of staat hij morgen bij je op de stoep met vragen?

SPIJ20120917