Iad1 Q2 Hoorcollege 2 Labels En Visuele Structuur
32
Het verder uitwerken van een sitestructuur
description
Transcript of Iad1 Q2 Hoorcollege 2 Labels En Visuele Structuur
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
