Structuur en navigatie

Hoe maak ik mijn interactie ontwerp onopgemerkt?

Deel I: de principes

‘Flow’

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’.

Naar: Flow, Csikszentmihalyi

‘Flow’

Flow is een staat waarin je kunt verkeren.

Het helpt mensen ergens op te

focussen.

Elke nieuw geopende pagina of window zal deze flow onderbreken.

Transparantie

Een betere flow bij je gebruikers maakt dat zij niet meer nadenken over je interface: het wordt transparant.

Ontwerpprincipe

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

Uit: About Face 3, Cooper, Reimann & Cronin

Ontwerpprincipe

Volg het mentale model van je gebruikers.

Orchestration and Flow

Volg het mentale model…

Orchestration and Flow

Volg het mentale model…

Ontwerpprincipe

Ontwerp voor het waarschijnlijke, maar voorzie in het mogelijke.

Uit: About Face 3, Cooper, Reimann & Cronin

Ontwerpprincipe

Verberg het schietstoelknopje.

Uit: About Face 3, Cooper, Reimann & Cronin

Orchestration and Flow

Verberg het schietstoelknopje…

Deel II: indelen en structureren

Indelingen

Indelingen

Indelingen

‘Information overload’

Uit: Information architecture, Morville & Rosenfeld

Eenduidige indelingen

De ordening ligt vast. Voorbeelden zijn:

Alfabetisch

Chronologisch

Geografisch

Veelal niet de meest handige indeling: gebruikers weten veelal niet precies wat zij zoeken.

Ambigue indelingen

De ordening is voor interpretatie vatbaar. Voorbeelden zijn:

Op onderwerp

Op doelgroepen

Op afdeling

Hoe bepaal je nu een logische indeling?

Onderwerp (stijl, genre etc.)

About.com

Ebay.com

Taken of functionaliteit

Doelgroep of type gebruiker

Dell.nl

… of een combinatieDuidelijk visueel

gescheiden.

Chronologisch

Alfabetisch

Geografisch

Geografisch

Doelgroep

Doelgroep

Taak

Taak

Onderwerp

Categorie

Welke indelingen zien we hier?

Deel III: Navigatie

“Navigation is excise.”

Moeten nadenken is een toeslag en onderbreekt de ‘flow’

Uit: Don’t Make Me Think, Steve Krug

Alle navigatie vormt een toeslag op het bereiken van je doel.

Visuele toeslag

Het aanbrengen van visuele structuur

Layout, grid

Zinloze toeslag

NavigatieNavigatie is:

Iedere actie die gebruikers bij een ander deel van de site- of informatie-structuur brengt.

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

Wat kunnen we zeggen over deze navigatie?

Labels: plaatjes of tekstHoewel plaatjes (iconen of

pictogrammen) in computerprogramma’s veel worden gebruikt als labels, voeren tekstlabels de boventoon op het web

Labels: plaatjes of tekstPlaatjes TekstAmbigu en snel onduidelijk Eenduidig en helder

Leercurve Geen leercurve voor het ‘herkennen’

Eenvoudig en snel te herkennen

Kost meer tijd om te herkennen

Soorten labelsDe belangrijkste soorten labels in webpagina’s zijn:

Labels voor contextuele linksVerwijzingen naar informatie elders, binnen de tekst

Labels voor koppen (‘headings’)Een beschrijving van de informatie die volgt

Labels voor navigatie optiesDe labels die de opties in de navigatie van de site vertegenwoordigen

Labels voor contextuele linksOntstaan veelal ad hoc: hebben dan ook weinig systematiek of

consistentie

Labels voor contextuele linksDe vraag die je als ontwerper altijd moet stellen: “Welke informatie verwacht de gebruiker te krijgen via deze

link?”

Labels voor koppen (‘headings’)Moet hetgeen beschrijven dat

eronder volgtDe betekenis van het label

wordt geholpen door de structuur in de grafische vormgeving

Veelal in samenhang: moeten dus meer als geheel worden ontworpen

Labels voor navigatie optiesOntwerp je als een geheelDoor consistentie versterk je

bekendheidSommige labels zijn bekend bij

web gebruikers (‘home’, ‘start’, ‘search’, ‘news’, ‘help’, ‘FAQ’, ‘about us’ etc.)

Zinvolle labels?

Samengevat

Het doel van een interactie ontwerp is gebruikers in een staat van ‘flow’ te krijgen.

Door informatie volgens het mentale model van gebruikers te structureren wordt deze ‘flow’ bevorderd.

Navigatie is een middel en geen doel van interactie.

“No matter how cool your interface is, less of it would be better.”

Bedankt voor jullie aandacht

j.a.m.kemp@hro.nlhttp://vakgroep.cmd.hro.nl/iad/iadd_0910q2/http://project.cmi.hro.nl/2008_2009/rewind/blog/