Hoorcollege interaction design jaar 1, gegeven op 15 maart 2009. Communication and multimedia design, hogeschool Rotterdam.

1. Structuur en navigatie 2
Labels en visuele structuur

2. „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.

3. Transparantie
(vorige keer)
Een betere flow bij je
gebruikers maakt dat zij niet
meer nadenken over je
interface: het wordt
transparant.

4. Ontwerpprincipe
(vorige keer)
No matter how cool your interface is,
less of it would be better!
Uit: About Face 3, Cooper, Reimann & Cronin

5. Moeten nadenken onderbreekt de „flow‟
(vorige keer)
Uit: Don’t Make Me Think, Steve Krug

6. Navigatie
Navigatie 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

7. Alle navigatie is een toeslag
(„excise‟)

8. Visuele toeslag

9. Zinloze toeslag

10. Het minimaliseren van de toeslag: navigatiepatronen

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

12. Labels: plaatjes of tekst
Plaatjes Tekst
Ambigu en snel onduidelijk Eenduidig en helder
Leercurve Geen leercurve voor het
‘herkennen’
Eenvoudig en snel te Kost meer tijd om te
herkennen herkennen

13. Soorten labels
De belangrijkste soorten labels in webpagina’s zijn:
Labels voor contextuele links
Verwijzingen naar informatie elders, binnen de tekst
Labels voor koppen (‘headings’)
Een beschrijving van de informatie die volgt
Labels voor navigatie opties
De labels die de opties in de navigatie van de site
vertegenwoordigen

14. Labels voor contextuele links
Ontstaan veelal ad hoc: hebben dan ook weinig
systematiek of consistentie

15. Labels voor contextuele links
De vraag die je als ontwerper altijd moet stellen:
“Welke informatie verwacht de gebruiker te krijgen
via deze link?”

16. 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

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

18. Labels voor navigatie opties

19. Flow, navigatie en stucturen
Flow, op site-niveau

20. Flow, navigatie en stucturen
Flow, op pagina-niveau door het aanbrengen van visuele
structuur

21. Het aanbrengen van visuele structuur
Layout, grid

22. Het aanbrengen van visuele structuur
Layout, grid

23. Het aanbrengen van visuele structuur
Typografie

24. Het aanbrengen van visuele structuur
Typografie
http://www.csszengarden.com/

25. Het aanbrengen
van visuele
structuur
Kleur
• Trekt aandacht
• Verbeterd navigatie en
scansnelheid
• Creëert relaties tussen
elementen

26. 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

27. Het aanbrengen van visuele structuur
Het visuele ontwerp stuurt
het oog van gebruikers
door een pagina
Cruciaal voor een
startpagina als deze

28. 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

29. Bedankt voor jullie aandacht
j.a.m.kemp@hro.nl
http://vakgroep.cmd.hro.nl/iad
http://project.cmi.hro.nl/2008_2009/rewind/platform/