0809 Deeltijd: Structuur, flow en navigatie
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

0809 Deeltijd: Structuur, flow en navigatie

  • 1,428 views
Uploaded on

Les gegeven op 20 november 2008.

Les gegeven op 20 november 2008.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,428
On Slideshare
1,344
From Embeds
84
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 84

http://vakgroep.cmd.hro.nl 84

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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