iad 2 - les 4 - navigation

45
Interaction Design 102 Vragen of feedback? @ferrydendopper Navigation Systems

Upload: ferry-den-dopper

Post on 28-Jan-2015

113 views

Category:

Design


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Navigation Systems

Page 2: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Flow

Te weinig uitdaging terwijl je iets goed kunt, geeft verveling.

Te veel uitdaging terwijl je iets nog niet goed kunt, geeft stress (‘anxiety’).

Als de uitdaging past bij je kunde, bereik je ‘flow’.

Naar: Flow, Csikszentmihalyi

Page 3: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Flow

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.

Page 4: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Flow

Een betere flow bij je gebruikers maakt dat zij niet meer nadenken over je interface: het wordt transparant.

“De beste interface is een onzichtbare interface.”

Page 5: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

DUS… volg het mentale model

Bekijk presentatie:

Vertrouwen is te ontwerpenOver de ‘geur’ van informatie

Page 6: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Navigatie

Navigatie is: Iedere actie die gebruikers bij een ander deel van de site- of informatie-structuur brengt.

De 2 belangrijkste doelen van elke navigatie zijn:• Te informeren waar je bent• Duidelijk maken wat de

volgende stap moet zijn om je doel te bereiken

Page 7: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Moeten nadenken onderbreekt flow

Page 8: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Moeten nadenken onderbreekt flow

Page 9: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Afdeling

Vitrine

Doel content

Reduceren

Selecteren

Valideren

Page 10: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Soorten navigatie

Globale navigatie Lokale navigatie Contextuele navigatie Service / meta navigatie …

Page 11: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Globalenavigatie

Page 12: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Lokalenavigatie

Page 13: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Contextuelenavigatie

Page 14: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Service / metanavigatie

Page 15: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Selectiefacetten navigatiesysteem

Plaatsing

Interactie

Weergave

Page 16: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Ideale plaatsing?

Page 17: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Geen wet van Meden en Perzen

Page 18: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Weergavestijl

Horizontaal menu Verticaal menu Accordeon Carrousel of Filmstrip

Page 19: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Horizontaal menu

Page 20: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Horizontaal menu

Page 21: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Verticaal menu

Page 22: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Verticaal menu

Page 23: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Accordeon

Page 24: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Carrousel / Filmstrip

Page 25: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Carrousel / Filmstrip

Page 26: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Interactie bij globale navigatie

Klikken op tab/link opent overzichtpagina;

Bewegen over tab opent subnavigatie; Klikken op tab/link opent subnavigatie; Het ‘Mega drop-down’ menu.

Page 27: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Klikken op tab/link opent pagina

Page 28: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Klikken op tab/link opent pagina

Page 29: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Page 30: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Bewegen over tab opent subnavigatie

Page 31: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Pas op het ‘diagonale probleem’

Page 32: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Klikken op tab/link opent subnavigatie

Page 33: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Klikken op tab/link opent subnavigatie

Page 34: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Mega drop-down

Page 35: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Mega drop-down

Page 36: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Pas op voor ‘Mystery Meat’

Page 37: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Pas op voor ‘Mystery Meat’

Page 38: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Pas op voor ‘Mystery Meat’

Page 39: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Metaforen in navigatie

Page 40: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Metaforen in navigatie

Page 41: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Metaforen in navigatie

Page 42: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Metafoor en afwijkende plaatsing

Page 43: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Welke vorm je ook kiest…

Vergeet nooit

‘geur’ aan te brengen

Page 45: IAD 2 - les 4 - Navigation

Interaction Design 102 Vragen of feedback? @ferrydendopper

Vragen? Feedback?

[email protected]

@ferrydendopper