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

j.a.m.kemp@hro.nl

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