Structuur en navigatie 2

Labels en visuele structuur

‘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

Moeten nadenken onderbreekt de ‘flow’(vorige keer)

Uit: Don’t Make Me Think, Steve Krug

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

Alle navigatie is een toeslag (‘excise’)

Visuele toeslag

Zinloze toeslag

Het minimaliseren van de toeslag: navigatiepatronen

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 helder

Leercurve 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.)

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 structuur

Layout, grid

Het aanbrengen van visuele structuur

Layout, grid

Het aanbrengen van visuele structuur

Typografie

Het aanbrengen van visuele structuur

Typografie

http://www.csszengarden.com/

Het aanbrengen van visuele structuurKleur• Trekt aandacht• Verbeterd navigatie

en scansnelheid• Creëert relaties

tussen elementen

Het aanbrengen van visuele structuur

Maar 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

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

j.a.m.kemp@hro.nlhttp://vakgroep.cmd.hro.nl/iadhttp://project.cmi.hro.nl/2008_2009/rewind/platform/