Download - 0809 Deeltijd: Structuur, flow en navigatie
Hoe maak ik mijn interactie ontwerp onopgemerkt?
Bronnen
Steve Krug, Don’t Make Me ThinkHoofdstuk 6
Peter Morville & Louis Rosenfeld, Information ArchitectureHoofdstuk 5
Alan Cooper, Robert Reimann & David Cronin, About Face 2.0Hoofdstuk 10, 11
Jenifer Tidwell, Designing InterfacesHoofdstuk 3
http://www.webstyleguide.com/
http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide
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
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.
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
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
Quote
No matter how cool your interface is, less of it would be better!
Uit: About Face 3, Cooper, Reimann & Cronin
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.
Chronologisch
Alfabetisch
Geografisch
Geografisch
Doelgroep
Doelgroep
Taak
Taak
Onderwerp
Categorie
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.
Structuren
Indeling + relatie = structuur
Structuren
Sequentieel
Bijvoorbeeld voor training sites, wizards etc.
Structuren
HierarchischVereist zorgvuldige planning en
organisatie van content
Bijvoorbeeld veel toegepast in informatierijke sites, marketing-communicatie sites etc.
Structuren
WebGeeft de meest flexibele
organisatie van content
Bijvoorbeeld toegepast in sites met complexe of sterk wisselende content
Structuren
Web
Structuren
Uit: http://www.webstyleguide.com/, Patrick Lynch & Sarah Horton
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!)
The Trunk Test (de kofferbaktest)
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
The Trunk Test
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.
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).
Enkele vaak toegepaste navigatie patronen
Card stack (tabs)
Als er te weinig ruimte is voor alle informatie op een scherm.
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.
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.
Enkele vaak toegepaste navigatie patronen
Tree table
Veelal toegepast in een (lange) lijst van hiërarchisch geordende elementen.
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!
Opdracht 1
Breng volledige productaanbod van Tuincentrum Overvecht in kaart (visueel)
Bedankt voor jullie aandacht
http://vakgroep.cmd.hro.nl/iad/