Structuur en navigatie<br />Hoe maak ik mijn interactie ontwerp onopgemerkt? <br />
Deel I: de principes<br />
‘Flow’<br />Te weinig uitdaging terwijl je iets goed kunt geeft verveling.<br />Te veel uitdaging terwijl je iets nog niet...
‘Flow’<br />Flow is een staat waarin je kunt verkeren.<br />Het helpt mensen ergens op te focussen.<br />Elke nieuw geopen...
Transparantie<br />Een betere flow bij je gebruikers maakt dat zij niet meer nadenken over je interface: het wordt transpa...
Ontwerpprincipe<br />No matter howcoolyour interface is, less of itwouldbebetter!<br />Uit: About Face 3, Cooper, Reimann ...
Ontwerpprincipe<br />Volg het mentale model van je gebruikers. <br />
Orchestration and Flow<br />Volg het mentale model…<br />
Orchestration and Flow<br />Volg het mentalemodel…<br />
Ontwerpprincipe<br />Ontwerp voor het waarschijnlijke, maar voorzie in het mogelijke.<br />Uit: About Face 3, Cooper, Reim...
Ontwerpprincipe<br />Verberg het schietstoelknopje.<br />Uit: About Face 3, Cooper, Reimann & Cronin<br />
Orchestration and Flow<br />Verberg het schietstoelknopje…<br />
Deel II: indelen en structureren<br />
Indelingen<br />
Indelingen<br />
Indelingen<br />
‘Informationoverload’<br />Uit: Informationarchitecture, Morville & Rosenfeld<br />
Eenduidige indelingen<br />De ordeningligt vast. Voorbeeldenzijn:<br />Alfabetisch<br />Chronologisch<br />Geografisch<br ...
Ambigueindelingen<br />De ordening is voorinterpretatievatbaar. Voorbeeldenzijn:<br />Op onderwerp<br />Op doelgroepen<br ...
Onderwerp (stijl, genre etc.)<br />About.com<br />
Ebay.com<br />Taken of functionaliteit<br />
Doelgroep of type gebruiker<br />Dell.nl<br />
… of eencombinatie<br />Duidelijkvisueelgescheiden.<br />
Chronologisch<br />
Alfabetisch<br />
Geografisch<br />
Geografisch<br />
Doelgroep<br />
Doelgroep<br />
Taak<br />
Taak<br />
Onderwerp<br />
Categorie<br />
Welkeindelingenzien we hier?<br />
Deel III: Navigatie<br />“Navigation is excise.”<br />
Moeten nadenken is een toeslag en onderbreekt de ‘flow’<br />Uit: Don’tMake Me Think, SteveKrug<br />
Allenavigatievormteentoeslag op het bereiken van je doel.<br />
Visuele toeslag<br />
Het aanbrengen van visuele structuur<br />Layout, grid<br />
Zinloze toeslag<br />
Navigatie<br />Navigatie is: <br />Iedereactie die gebruikersbijeenanderdeel van de site- of informatie-structuurbrengt. <...
Duidelijkmakenwat de volgendestapmoetzijnom je doeltebereiken</li></li></ul><li>Watkunnen we zeggen over dezenavigatie?<br />
Labels: plaatjes of tekst<br />Hoewel plaatjes (iconen of pictogrammen) in computerprogramma’s veel worden gebruikt als la...
Labels: plaatjes of tekst<br />
Soorten labels<br />De belangrijkste soorten labels in webpagina’s zijn:<br />Labels voor contextuele links<br />Verwijzin...
Labels voor contextuele links<br />Ontstaan veelal ad hoc: hebben dan ook weinig systematiek of consistentie<br />
Labels voor contextuele links<br />De vraag die je als ontwerper altijd moet stellen: <br />“Welke informatie verwacht de ...
Labels voor koppen (‘headings’)<br />Moet hetgeen beschrijven dat eronder volgt<br />De betekenis van het label wordt geho...
Labels voor navigatie opties<br />Ontwerp je als een geheel<br />Door consistentie versterk je bekendheid<br />Sommige lab...
Zinvolle labels?<br />
Samengevat<br />Het doel van eeninteractieontwerp is gebruikers in eenstaat van ‘flow’ tekrijgen.<br />Door informatievolg...
Bedankt voor jullie aandacht<br />j.a.m.kemp@hro.nl<br />http://vakgroep.cmd.hro.nl/iad/iadd_0910q2/<br />http://project.c...
Upcoming SlideShare
Loading in...5
×

Iadd1 0910 Q2 Structuur En Navigatie

1,163

Published on

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,163
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Iadd1 0910 Q2 Structuur En Navigatie"

  1. 1. Structuur en navigatie<br />Hoe maak ik mijn interactie ontwerp onopgemerkt? <br />
  2. 2. Deel I: de principes<br />
  3. 3. ‘Flow’<br />Te weinig uitdaging terwijl je iets goed kunt geeft verveling.<br />Te veel uitdaging terwijl je iets nog niet goed kunt, geeft stress (‘anxiety’).<br />Als de uitdaging past bij je kunde, bereik je ‘flow’. <br />Naar: Flow, Csikszentmihalyi<br />
  4. 4. ‘Flow’<br />Flow is een staat waarin je kunt verkeren.<br />Het helpt mensen ergens op te focussen.<br />Elke nieuw geopende pagina of window zal deze flow onderbreken.<br />
  5. 5. Transparantie<br />Een betere flow bij je gebruikers maakt dat zij niet meer nadenken over je interface: het wordt transparant.<br />
  6. 6. Ontwerpprincipe<br />No matter howcoolyour interface is, less of itwouldbebetter!<br />Uit: About Face 3, Cooper, Reimann & Cronin<br />
  7. 7. Ontwerpprincipe<br />Volg het mentale model van je gebruikers. <br />
  8. 8. Orchestration and Flow<br />Volg het mentale model…<br />
  9. 9. Orchestration and Flow<br />Volg het mentalemodel…<br />
  10. 10. Ontwerpprincipe<br />Ontwerp voor het waarschijnlijke, maar voorzie in het mogelijke.<br />Uit: About Face 3, Cooper, Reimann & Cronin<br />
  11. 11. Ontwerpprincipe<br />Verberg het schietstoelknopje.<br />Uit: About Face 3, Cooper, Reimann & Cronin<br />
  12. 12. Orchestration and Flow<br />Verberg het schietstoelknopje…<br />
  13. 13. Deel II: indelen en structureren<br />
  14. 14. Indelingen<br />
  15. 15. Indelingen<br />
  16. 16. Indelingen<br />
  17. 17. ‘Informationoverload’<br />Uit: Informationarchitecture, Morville & Rosenfeld<br />
  18. 18. Eenduidige indelingen<br />De ordeningligt vast. Voorbeeldenzijn:<br />Alfabetisch<br />Chronologisch<br />Geografisch<br />Veelalniet de meesthandigeindeling: gebruikerswetenveelalnietprecieswatzijzoeken.<br />
  19. 19. Ambigueindelingen<br />De ordening is voorinterpretatievatbaar. Voorbeeldenzijn:<br />Op onderwerp<br />Op doelgroepen<br />Op afdeling<br />Hoe bepaal je nu eenlogischeindeling?<br />
  20. 20. Onderwerp (stijl, genre etc.)<br />About.com<br />
  21. 21. Ebay.com<br />Taken of functionaliteit<br />
  22. 22. Doelgroep of type gebruiker<br />Dell.nl<br />
  23. 23. … of eencombinatie<br />Duidelijkvisueelgescheiden.<br />
  24. 24. Chronologisch<br />
  25. 25. Alfabetisch<br />
  26. 26. Geografisch<br />
  27. 27. Geografisch<br />
  28. 28. Doelgroep<br />
  29. 29. Doelgroep<br />
  30. 30. Taak<br />
  31. 31. Taak<br />
  32. 32. Onderwerp<br />
  33. 33. Categorie<br />
  34. 34. Welkeindelingenzien we hier?<br />
  35. 35. Deel III: Navigatie<br />“Navigation is excise.”<br />
  36. 36. Moeten nadenken is een toeslag en onderbreekt de ‘flow’<br />Uit: Don’tMake Me Think, SteveKrug<br />
  37. 37. Allenavigatievormteentoeslag op het bereiken van je doel.<br />
  38. 38. Visuele toeslag<br />
  39. 39. Het aanbrengen van visuele structuur<br />Layout, grid<br />
  40. 40. Zinloze toeslag<br />
  41. 41. Navigatie<br />Navigatie is: <br />Iedereactie die gebruikersbijeenanderdeel van de site- of informatie-structuurbrengt. <br />De twee belangrijkstedoelen van elkenavigatie is:<br /><ul><li>Te informerenwaar je bent
  42. 42. Duidelijkmakenwat de volgendestapmoetzijnom je doeltebereiken</li></li></ul><li>Watkunnen we zeggen over dezenavigatie?<br />
  43. 43. Labels: plaatjes of tekst<br />Hoewel plaatjes (iconen of pictogrammen) in computerprogramma’s veel worden gebruikt als labels, voeren tekstlabels de boventoon op het web<br />
  44. 44. Labels: plaatjes of tekst<br />
  45. 45. Soorten labels<br />De belangrijkste soorten labels in webpagina’s zijn:<br />Labels voor contextuele links<br />Verwijzingen naar informatie elders, binnen de tekst <br />Labels voor koppen (‘headings’)<br />Een beschrijving van de informatie die volgt<br />Labels voor navigatie opties<br />De labels die de opties in de navigatie van de site vertegenwoordigen<br />
  46. 46. Labels voor contextuele links<br />Ontstaan veelal ad hoc: hebben dan ook weinig systematiek of consistentie<br />
  47. 47. Labels voor contextuele links<br />De vraag die je als ontwerper altijd moet stellen: <br />“Welke informatie verwacht de gebruiker te krijgen via deze link?”<br />
  48. 48. Labels voor koppen (‘headings’)<br />Moet hetgeen beschrijven dat eronder volgt<br />De betekenis van het label wordt geholpen door de structuur in de grafische vormgeving<br />Veelal in samenhang: moeten dus meer als geheel worden ontworpen <br />
  49. 49. Labels voor navigatie opties<br />Ontwerp je als een geheel<br />Door consistentie versterk je bekendheid<br />Sommige labels zijn bekend bij web gebruikers (‘home’, ‘start’, ‘search’, ‘news’, ‘help’, ‘FAQ’, ‘about us’ etc.)<br />
  50. 50. Zinvolle labels?<br />
  51. 51. Samengevat<br />Het doel van eeninteractieontwerp is gebruikers in eenstaat van ‘flow’ tekrijgen.<br />Door informatievolgens het mentale model van gebruikerstestructurerenwordtdeze ‘flow’ bevorderd.<br />Navigatie is eenmiddel en geendoel van interactie.<br />“No matter how cool your interface is, less of it would be better.”<br />
  52. 52. Bedankt voor jullie aandacht<br />j.a.m.kemp@hro.nl<br />http://vakgroep.cmd.hro.nl/iad/iadd_0910q2/<br />http://project.cmi.hro.nl/2008_2009/rewind/blog/<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×