cmd interaction design - y1 q2 les 3 - navigation labeling
TRANSCRIPT
![Page 1: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/1.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Navigation & Labeling
![Page 2: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/2.jpg)
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: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/3.jpg)
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: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/4.jpg)
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: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/5.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
DUS… volg het mentale model
Bekijk presentatie:
Vertrouwen is te ontwerpenOver de ‘geur’ van informatie
![Page 6: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/6.jpg)
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: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/7.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Moeten nadenken onderbreekt flow
![Page 8: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/8.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Moeten nadenken onderbreekt flow
![Page 9: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/9.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Afdeling
Vitrine
Doel content
Reduceren
Selecteren
Valideren
![Page 10: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/10.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Soorten navigatie
Globale navigatie Lokale navigatie Contextuele navigatie Service / meta navigatie …
![Page 11: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/11.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Globalenavigatie
![Page 12: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/12.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Lokalenavigatie
![Page 13: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/13.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Contextuelenavigatie
![Page 14: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/14.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Service / metanavigatie
![Page 15: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/15.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Selectiefacetten navigatiesysteem
Plaatsing
Interactie
Weergave
![Page 16: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/16.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Ideale plaatsing?
![Page 17: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/17.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Geen wet van Meden en Perzen
![Page 18: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/18.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Weergavestijl
Horizontaal menu Verticaal menu Accordeon Carrousel of Filmstrip
![Page 19: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/19.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Horizontaal menu
![Page 20: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/20.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Horizontaal menu
![Page 21: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/21.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Verticaal menu
![Page 22: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/22.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Verticaal menu
![Page 23: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/23.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Accordeon
![Page 24: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/24.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Carrousel / Filmstrip
![Page 25: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/25.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Carrousel / Filmstrip
![Page 26: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/26.jpg)
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: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/27.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Klikken op tab/link opent pagina
![Page 28: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/28.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Klikken op tab/link opent pagina
![Page 29: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/29.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Bewegen over tab opent subnavigatie
![Page 30: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/30.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Pas op het ‘diagonale probleem’
![Page 31: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/31.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Klikken op tab/link opent subnavigatie
![Page 32: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/32.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Klikken op tab/link opent subnavigatie
![Page 33: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/33.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Mega drop-down
![Page 34: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/34.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Mega drop-down
![Page 35: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/35.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Pas op voor ‘Mystery Meat’
![Page 36: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/36.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Pas op voor ‘Mystery Meat’
![Page 37: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/37.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Pas op voor ‘Mystery Meat’
![Page 38: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/38.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Metaforen in navigatie
![Page 39: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/39.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Metaforen in navigatie
![Page 40: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/40.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Metaforen in navigatie
![Page 41: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/41.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Maar welke vorm je ook kiest…
Vergeet nooit
‘geur’ aan te brengen
![Page 42: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/42.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Meer lezen over navigatie
http://www.den-dopper.com/2009/10/19/website-navigatie-denk-na-over-plaatsing-weergavestijl-en-interactie/
http://www.den-dopper.com/2009/09/03/doelgroepingangen-waarom-niet-en-wanneer-wel/
http://www.den-dopper.com/2010/07/15/6-redenen-om-je-navigatie-niet-overboord-te-gooien-voor-een-grote-zoekknop/
![Page 43: CMD Interaction Design - Y1 Q2 les 3 - Navigation labeling](https://reader036.vdocuments.net/reader036/viewer/2022062514/55c0beafbb61eb18118b45c6/html5/thumbnails/43.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper