Het verder uitwerken van een sitestructuur

Structuren

Uit: http://www.webstyleguide.com/, Patrick Lynch & Sarah Horton

Linear structure

Hub and spoke: an extension of linear structure

Web structure

Hierarchical structures

Polyhierarchical structure

Facets

Examples

http://www.wefeelfine.org/http://www.visualcomplexity.com/vc/http://www.moma.org/exhibitions/2008/

elasticmind/

Site maps/content inventory

Site maps/content inventory

Flow charts

Dan Brown: Flow Charts

Navigatie

Navigatie is: Iedere actie die gebruikers

bij een ander deel van de site- of informatiestructuur brengt.

De twee belangrijkste doelen van elke navigatie is:• Te informeren waar je

bent• Duidelijk maken wat de

volgende stap moet zijn om je doel te bereiken

Navigatiepatronen

Labels: plaatjes of tekst

Hoewel plaatjes (iconen of pictogrammen) in computerprogramma’s veel worden gebruikt als labels, voeren tekstlabels de boventoon op het web

Labels: plaatjes of tekst

Plaatjes TekstAmbigu en snel onduidelijk Eenduidig en helder

Leercurve Geen leercurve voor het ‘herkennen’

Eenvoudig en snel te herkennen

Kost meer tijd om te herkennen

Soorten labels

De belangrijkste soorten labels in webpagina’s zijn:

Labels voor contextuele linksVerwijzingen naar informatie elders, binnen de tekst

Labels voor koppen (‘headings’)Een beschrijving van de informatie die volgt

Labels voor navigatie optiesDe labels die de opties in de navigatie van de site

vertegenwoordigen

Labels voor contextuele links

Ontstaan veelal ad hoc: hebben dan ook weinig systematiek of consistentie

Labels voor contextuele links

De vraag die je als ontwerper altijd moet stellen: “Welke informatie verwacht de gebruiker te

krijgen via deze link?”

Labels voor koppen (‘headings’)

Moet hetgeen beschrijven dat eronder volgt

De betekenis van het label wordt geholpen door de structuur in de grafische vormgeving

Veelal in samenhang: moeten dus meer als geheel worden ontworpen

Labels voor navigatie opties

Ontwerp je als een geheel

Door consistentie versterk je bekendheid

Sommige labels zijn bekend bij web gebruikers (‘home’, ‘start’, ‘search’, ‘news’, ‘help’, ‘FAQ’, ‘about us’ etc.)

Labels voor navigatie opties

Flow, navigatie en stucturen

Flow, op site-niveau

Flow, navigatie en stucturen

Flow, op pagina-niveau door het aanbrengen van visuele structuur

Het aanbrengen van visuele structuurLayout

Het aanbrengen van visuele structuurLayout

Het aanbrengen van visuele structuurTypografie

Het aanbrengen van visuele structuurTypografie

http://www.csszengarden.com/

Het aanbrengen van visuele structuur

Kleur Trekt aandacht Verbeterd navigatie en

scansnelheid Creëert relaties tussen

elementen

Het aanbrengen van visuele structuurMaar kleur wordt ook nog wel eens misbruikt: Te veel kleuren hindert visueel scannen Gebruik van tegengestelde kleuren bemoeilijkt de leesbaarheid Al te zeer verzadigde kleuren vragen te veel aandacht Onvoldoende verschillen tussen kleuren geven slechte contrasten Onvoldoende rekening houden met kleurenblindheid sluit ca. 10%

van de mannelijke bevolking uit

Het aanbrengen van visuele structuur

Het visuele ontwerp stuurt het oog van gebruikers door een pagina

Cruciaal voor een startpagina als deze

Bedankt voor jullie aandacht

Vragen?http://vakgroep.cmd.hro.nl/iadj.a.m.kemp@hro.nl