Iad1 0708Q2 Hoorcollege 1 Structuur, Flow En Navigatie

Flow, structuur en navigatieHoe maak ik mijn interactie ontwerp onopgemerkt?

Interaction designIAD1Q2 Hoorcollege 1

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


Flow en transparantieTe 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.


Quote

No matter how cool your interface is, less of it would be better!

Uit: About Face 3, Cooper, Reimann & Cronin


Indelen van informatieEr 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


Doelgroep


Taak


Onderwerp


Categorie


Betrek je gebruikers bij je ontwerp: card sortingEen 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


NavigatieDe 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


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


Enkele vaak toegepaste navigatie patronenGlobal (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 patronenTitled 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 patronenCard stack (tabs)

Als er te weinig ruimte is voor alle informatie op een scherm.


Enkele vaak toegepaste navigatie patronenKleurgecodeerde secties

Toegepast in sites waar sprake is van veel verschillende pagina’s of windows die zijn georganiseerd in verschillende secties.


Enkele vaak toegepaste navigatie patronenBreadcrumbs (kruimelpad)

Toegepast in sites waar sprake is van een heldere hiërarchische structuur, met niet al te veel web structuren.


Enkele vaak toegepaste navigatie patronenTree 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!


NIEUW

Bedankt voor jullie aandacht

[email protected]

http://cmdiad.wordpress.com

Iad1 0708Q2 Hoorcollege 1 Structuur, Flow En Navigatie

Documents

Transcript of Iad1 0708Q2 Hoorcollege 1 Structuur, Flow En Navigatie