Hoe maak ik mijn interactie ontwerp onopgemerkt?
Bronnen <ul><li>Steve Krug,  Don’t Make Me Think </li></ul><ul><ul><li>Hoofdstuk 6 </li></ul></ul><ul><li>Peter Morville &...
Flow  en transparantie <ul><li>Te weinig uitdaging terwijl je iets goed kunt geeft verveling. </li></ul><ul><li>Te veel ui...
Flow  en transparantie <ul><li>Een betere  flow  bij je gebruikers kun je (onder andere) bereiken door het  mentaal model ...
Navigatie is nooit het doel De navigatie is wellicht het belangrijkste ontwerpprobleem in elk interactief product Overbodi...
Navigatie is nooit het doel De navigatie is wellicht het belangrijkste ontwerpprobleem in elk interactief product Overbodi...
Quote <ul><li>No matter how cool your interface is, less of it would be better! </li></ul>Uit:  About Face 3,  Cooper, Rei...
Indelen van informatie <ul><li>Er zijn een aantal verschillende manieren waarop informatie kan worden ingedeeld, zoals: </...
Chronologisch
Alfabetisch
Geografisch
Geografisch
Doelgroep
Doelgroep
Taak
Taak
Onderwerp
Categorie
Betrek je gebruikers bij je ontwerp:  card sorting <ul><li>Een veel toegepaste manier om inzicht te krijgen in een indelin...
Structuren <ul><li>Indeling + relatie = structuur </li></ul>
Structuren <ul><li>Sequentieel </li></ul><ul><ul><li>Bijvoorbeeld voor training sites,  wizards  etc. </li></ul></ul>
Structuren <ul><li>Hierarchisch </li></ul><ul><ul><li>Vereist zorgvuldige planning en organisatie van content </li></ul></...
Structuren <ul><li>Web </li></ul><ul><ul><li>Geeft de meest flexibele organisatie van content </li></ul></ul><ul><ul><li>B...
Structuren <ul><li>Web </li></ul>
Structuren Uit:  http://www.webstyleguide.com/ , Patrick Lynch & Sarah Horton
Navigatie <ul><li>De informatie-indeling en structuur van een site is de basis voor de navigatie. </li></ul><ul><li>De twe...
The Trunk Test (de kofferbaktest)
The Trunk Test <ul><li>Welke site is dit? </li></ul><ul><li>Op welke pagina zit ik? </li></ul><ul><li>Welke zijn de belang...
The Trunk Test
Enkele vaak toegepaste navigatie patronen <ul><li>Global (persistent) navigation </li></ul><ul><li>Vaste navigatie op elke...
Enkele vaak toegepaste navigatie patronen <ul><li>Titled sections (deurmatje) </li></ul><ul><li>Toegepast als er voldoende...
Enkele vaak toegepaste navigatie patronen <ul><li>Card stack (tabs) </li></ul><ul><li>Als er te weinig ruimte is voor alle...
Enkele vaak toegepaste navigatie patronen <ul><li>Kleurgecodeerde secties </li></ul><ul><li>Toegepast in sites waar sprake...
Enkele vaak toegepaste navigatie patronen <ul><li>Breadcrumbs (kruimelpad) </li></ul><ul><li>Toegepast in sites waar sprak...
Enkele vaak toegepaste navigatie patronen <ul><li>Tree table </li></ul><ul><li>Veelal toegepast in een (lange) lijst van h...
Samenvattend <ul><li>Je doel als interactie ontwerper is gebruikers in een staat van  flow  te brengen/houden. </li></ul><...
Opdracht 1 <ul><li>Breng volledige productaanbod van Tuincentrum Overvecht in kaart (visueel) </li></ul>
Bedankt voor jullie aandacht <ul><li>[email_address] </li></ul><ul><li>http://vakgroep.cmd.hro.nl/iad/   </li></ul>
Upcoming SlideShare
Loading in...5
×

0809 Deeltijd: Structuur, flow en navigatie

740

Published on

Les gegeven op 20 november 2008.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
740
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 0809 Deeltijd: Structuur, flow en navigatie

    1. 1. Hoe maak ik mijn interactie ontwerp onopgemerkt?
    2. 2. Bronnen <ul><li>Steve Krug, Don’t Make Me Think </li></ul><ul><ul><li>Hoofdstuk 6 </li></ul></ul><ul><li>Peter Morville & Louis Rosenfeld, Information Architecture </li></ul><ul><ul><li>Hoofdstuk 5 </li></ul></ul><ul><li>Alan Cooper, Robert Reimann & David Cronin, About Face 2.0 </li></ul><ul><ul><li>Hoofdstuk 10, 11 </li></ul></ul><ul><li>Jenifer Tidwell, Designing Interfaces </li></ul><ul><ul><li>Hoofdstuk 3 </li></ul></ul><ul><li>http ://www.webstyleguide.com/ </li></ul><ul><li>http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide </li></ul>
    3. 3. Flow en transparantie <ul><li>Te weinig uitdaging terwijl je iets goed kunt geeft verveling. </li></ul><ul><li>Te veel uitdaging terwijl je iets nog niet goed kunt, geeft stress (‘anxiety’). </li></ul><ul><li>Als de uitdaging past bij je kunde, bereik je flow. </li></ul><ul><li>Flow is een staat waarin je kunt verkeren. </li></ul><ul><li>Het helpt mensen ergens op te focussen. </li></ul><ul><li>Om voor gebruikers flow te creëren, moet de interactie ‘transparant’ zijn. Elke nieuw geopende pagina of window zal de deze flow onderbreken. </li></ul>Naar: Flow , Csikszentmihalyi
    4. 4. Flow en transparantie <ul><li>Een betere flow bij je gebruikers kun je (onder andere) bereiken door het mentaal model van je gebruikers te volgen. </li></ul><ul><li>Het gevolg is dat gebruikers niet meer nadenken over je interface: het wordt transparant . </li></ul>
    5. 5. Navigatie is nooit het doel De navigatie is wellicht het belangrijkste ontwerpprobleem in elk interactief product Overbodige of moeilijk te doorgronden navigatie zal altijd tot frustratie van gebruikers leiden Goede navigatie is de belangrijkste voorwaarde voor het realiseren van flow
    6. 6. Navigatie is nooit het doel De navigatie is wellicht het belangrijkste ontwerpprobleem in elk interactief product Overbodige of moeilijk te doorgronden navigatie zal altijd tot frustratie van gebruikers leiden Goede navigatie is de belangrijkste voorwaarde voor het realiseren van flow
    7. 7. Quote <ul><li>No matter how cool your interface is, less of it would be better! </li></ul>Uit: About Face 3, Cooper, Reimann & Cronin
    8. 8. Indelen van informatie <ul><li>Er zijn een aantal verschillende manieren waarop informatie kan worden ingedeeld, zoals: </li></ul><ul><ul><li>Alfabetisch </li></ul></ul><ul><ul><li>Chronologisch </li></ul></ul><ul><ul><li>Geografisch </li></ul></ul><ul><ul><li>Onderwerp </li></ul></ul><ul><ul><li>Categorie </li></ul></ul><ul><ul><li>Doelgroep </li></ul></ul><ul><ul><li>Hiërarchisch </li></ul></ul><ul><li>Een goede sitestructuur biedt meerdere mogelijkheden. </li></ul>
    9. 9. Chronologisch
    10. 10. Alfabetisch
    11. 11. Geografisch
    12. 12. Geografisch
    13. 13. Doelgroep
    14. 14. Doelgroep
    15. 15. Taak
    16. 16. Taak
    17. 17. Onderwerp
    18. 18. Categorie
    19. 19. Betrek je gebruikers bij je ontwerp: card sorting <ul><li>Een veel toegepaste manier om inzicht te krijgen in een indeling op basis van het mentaal model van je gebruikers, is card sorting. </li></ul><ul><li>Respondenten wordt gevraagd kaarten met content of functionaliteit te ordenen. </li></ul>
    20. 20. Structuren <ul><li>Indeling + relatie = structuur </li></ul>
    21. 21. Structuren <ul><li>Sequentieel </li></ul><ul><ul><li>Bijvoorbeeld voor training sites, wizards etc. </li></ul></ul>
    22. 22. Structuren <ul><li>Hierarchisch </li></ul><ul><ul><li>Vereist zorgvuldige planning en organisatie van content </li></ul></ul><ul><ul><li>Bijvoorbeeld veel toegepast in informatierijke sites, marketing-communicatie sites etc. </li></ul></ul>
    23. 23. Structuren <ul><li>Web </li></ul><ul><ul><li>Geeft de meest flexibele organisatie van content </li></ul></ul><ul><ul><li>Bijvoorbeeld toegepast in sites met complexe of sterk wisselende content </li></ul></ul>
    24. 24. Structuren <ul><li>Web </li></ul>
    25. 25. Structuren Uit: http://www.webstyleguide.com/ , Patrick Lynch & Sarah Horton
    26. 26. Navigatie <ul><li>De informatie-indeling en structuur van een site is de basis voor de navigatie. </li></ul><ul><li>De twee belangrijkste doelen van elke navigatie is: </li></ul><ul><ul><li>Te informeren waar je bent </li></ul></ul><ul><ul><li>Duidelijk maken wat de volgende stap moet zijn om je doel te bereiken </li></ul></ul><ul><li>Ga er daarbij niet vanuit dat gebruikers altijd met de startpagina beginnen: </li></ul><ul><li>Doe de Trunk Test! (uit: Krug, Don’t Make Me Think!) </li></ul>
    27. 27. The Trunk Test (de kofferbaktest)
    28. 28. The Trunk Test <ul><li>Welke site is dit? </li></ul><ul><li>Op welke pagina zit ik? </li></ul><ul><li>Welke zijn de belangrijkste onderdelen op deze site? </li></ul><ul><li>Wat kan ik op deze pagina doen, wat zijn mijn opties hier? </li></ul><ul><li>Waar ben ik ten opzichte van de rest van de site? </li></ul><ul><li>Hoe kan ik zoeken? </li></ul>Uit: Don’t Make Me Think!, Steve Krug
    29. 29. The Trunk Test
    30. 30. Enkele vaak toegepaste navigatie patronen <ul><li>Global (persistent) navigation </li></ul><ul><li>Vaste navigatie op elke pagina. </li></ul><ul><li>Als het belangrijk is direct van één naar de andere sectie te gaan. Voorwaarde is natuurlijk dat er voldoende ruimte is op elke pagina. </li></ul>
    31. 31. Enkele vaak toegepaste navigatie patronen <ul><li>Titled sections (deurmatje) </li></ul><ul><li>Toegepast als er voldoende ruimte is op de pagina en er snel een overzicht gegeven moet worden van de site-inhoud (eenvoudig te scannen). </li></ul>
    32. 32. Enkele vaak toegepaste navigatie patronen <ul><li>Card stack (tabs) </li></ul><ul><li>Als er te weinig ruimte is voor alle informatie op een scherm. </li></ul>
    33. 33. Enkele vaak toegepaste navigatie patronen <ul><li>Kleurgecodeerde secties </li></ul><ul><li>Toegepast in sites waar sprake is van veel verschillende pagina’s of windows die zijn georganiseerd in verschillende secties. </li></ul>
    34. 34. Enkele vaak toegepaste navigatie patronen <ul><li>Breadcrumbs (kruimelpad) </li></ul><ul><li>Toegepast in sites waar sprake is van een heldere hiërarchische structuur, met niet al te veel web structuren. </li></ul>
    35. 35. Enkele vaak toegepaste navigatie patronen <ul><li>Tree table </li></ul><ul><li>Veelal toegepast in een (lange) lijst van hiërarchisch geordende elementen. </li></ul>
    36. 36. Samenvattend <ul><li>Je doel als interactie ontwerper is gebruikers in een staat van flow te brengen/houden. </li></ul><ul><li>Je doet dit door bij het indelen van de informatie of functionaliteit het mentale model van je gebruikers te volgen. </li></ul><ul><li>Door middel van ‘card sorting’ kun je dit mentale model van je gebruikers achterhalen. </li></ul><ul><li>Een gebruiksvriendelijke navigatie laat zien waar je bent en maakt duidelijk wat de volgende stap is om je doel te bereiken. </li></ul><ul><li>Gebruikers komen niet altijd via de startpagina van een site op een pagina. Zorg dus dat je ontwerp door de ‘Trunk Test’ komt! </li></ul>
    37. 37. Opdracht 1 <ul><li>Breng volledige productaanbod van Tuincentrum Overvecht in kaart (visueel) </li></ul>
    38. 38. Bedankt voor jullie aandacht <ul><li>[email_address] </li></ul><ul><li>http://vakgroep.cmd.hro.nl/iad/ </li></ul>
    1. A particular slide catching your eye?

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

    ×