iad1 0809 q3 hoorcollege 2 labels en visuele structuur
TRANSCRIPT
‘Flow’ (vorige keer)Flow is een staat waarin je
kunt verkeren. Het helpt mensen ergens
op te focussen.
Elke nieuw geopende pagina of window zal deze flow onderbreken.
Transparantie(vorige keer)
Een betere flow bij je gebruikers maakt dat zij niet meer nadenken over je interface: het wordt transparant.
Ontwerpprincipe(vorige keer)
No matter how cool your interface is, less of it would be better!
Uit: About Face 3, Cooper, Reimann & Cronin
NavigatieNavigatie is:
Iedere actie die gebruikers bij een ander deel van de site- of informatie-structuur 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
Labels: plaatjes of tekstHoewel plaatjes (iconen of
pictogrammen) in computerprogramma’s veel worden gebruikt als labels, voeren tekstlabels de boventoon op het web
Labels: plaatjes of tekstPlaatjes TekstAmbigu en snel onduidelijk Eenduidig en helderLeercurve Geen leercurve voor het
‘herkennen’Eenvoudig en snel te herkennen
Kost meer tijd om te herkennen
Soorten labelsDe 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 linksOntstaan veelal ad hoc: hebben dan ook weinig
systematiek of consistentie
Labels voor contextuele linksDe 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.)
Het aanbrengen van visuele structuurKleur• 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 structuurHet visuele ontwerp
stuurt het oog van gebruikers door een pagina
Cruciaal voor een startpagina als deze
Samenvattend
• Een navigatie moet altijd:• Laten zien waar ik ben• Duidelijk maken wat mijn volgende stap moet zijn
• Alle navigatie vormt een toeslag voor gebruikers op het bereiken van hun doel
• Voorspelbaarheid is een belangrijk middel voor het verminderen van die toeslag
• Voorspelbaarheid krijg je in je navigatie door:• Het gebruiken van navigatiepatronen• Het gebruiken van labels die aansluiten bij het mentale
model van je gebruikers• Het aanbrengen van een heldere visuele structuur
Bedankt voor jullie aandacht
[email protected]://vakgroep.cmd.hro.nl/iadhttp://project.cmi.hro.nl/2008_2009/rewind/platform/