SlideShare une entreprise Scribd logo
1  sur  52
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 howcoolyour interface is, less of itwouldbebetter! 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 mentalemodel…
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
‘Informationoverload’ Uit: Informationarchitecture, Morville & Rosenfeld
Eenduidige indelingen De ordeningligt vast. Voorbeeldenzijn: Alfabetisch Chronologisch Geografisch Veelalniet de meesthandigeindeling: gebruikerswetenveelalnietprecieswatzijzoeken.
Ambigueindelingen De ordening is voorinterpretatievatbaar. Voorbeeldenzijn: Op onderwerp Op doelgroepen Op afdeling Hoe bepaal je nu eenlogischeindeling?
Onderwerp (stijl, genre etc.) About.com
Ebay.com Taken of functionaliteit
Doelgroep of type gebruiker Dell.nl
… of eencombinatie Duidelijkvisueelgescheiden.
Chronologisch
Alfabetisch
Geografisch
Geografisch
Doelgroep
Doelgroep
Taak
Taak
Onderwerp
Categorie
Welkeindelingenzien we hier?
Deel III: Navigatie “Navigation is excise.”
Moeten nadenken is een toeslag en onderbreekt de ‘flow’ Uit: Don’tMake Me Think, SteveKrug
Allenavigatievormteentoeslag op het bereiken van je doel.
Visuele toeslag
Het aanbrengen van visuele structuur Layout, grid
Zinloze toeslag
Navigatie Navigatie is:  Iedereactie die gebruikersbijeenanderdeel van de site- of informatie-structuurbrengt.  De twee belangrijkstedoelen van elkenavigatie is: ,[object Object]
Duidelijkmakenwat de volgendestapmoetzijnom je doeltebereiken,[object Object]
Labels: plaatjes of tekst Hoewel plaatjes (iconen of pictogrammen) in computerprogramma’s veel worden gebruikt als labels, voeren tekstlabels de boventoon op het web
Labels: plaatjes of tekst
Soorten labels De belangrijkste soorten labels in webpagina’s zijn: Labels voor contextuele links Verwijzingen naar informatie elders, binnen de tekst  Labels voor koppen  (‘headings’) Een beschrijving van de informatie die volgt Labels voor navigatie opties De labels die de opties in de navigatie van de site vertegenwoordigen
Labels voor contextuele links Ontstaan veelal ad hoc: hebben dan ook weinig systematiek of consistentie
Labels voor contextuele links De 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 volgt De 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 opties Ontwerp je als een geheel Door consistentie versterk je bekendheid Sommige labels zijn bekend bij web gebruikers (‘home’, ‘start’, ‘search’, ‘news’, ‘help’, ‘FAQ’, ‘about us’ etc.)
Zinvolle labels?
Samengevat Het doel van eeninteractieontwerp is gebruikers in eenstaat van ‘flow’ tekrijgen. Door informatievolgens het mentale model van gebruikerstestructurerenwordtdeze ‘flow’ bevorderd. Navigatie is eenmiddel en geendoel van interactie. “No matter how cool your interface is, less of it would be better.”
Bedankt voor jullie aandacht j.a.m.kemp@hro.nl http://vakgroep.cmd.hro.nl/iad/iadd_0910q2/ http://project.cmi.hro.nl/2008_2009/rewind/blog/

Contenu connexe

En vedette

Week 34 Sponges
Week 34 SpongesWeek 34 Sponges
Week 34 Sponges
Corey Topf
 
Decentralized reception grethe
Decentralized reception   gretheDecentralized reception   grethe
Decentralized reception grethe
George Bekiaridis
 
Bds Blind Spot Mirror Systems Uk
Bds Blind Spot Mirror Systems UkBds Blind Spot Mirror Systems Uk
Bds Blind Spot Mirror Systems Uk
Guido Weijerman
 
Zappos - Community 2.0 Conference - 05-13-08
Zappos - Community 2.0 Conference  - 05-13-08Zappos - Community 2.0 Conference  - 05-13-08
Zappos - Community 2.0 Conference - 05-13-08
zappos
 
Tips for using the semi-colon
Tips for using the semi-colonTips for using the semi-colon
Tips for using the semi-colon
Corey Topf
 
IADD1 0809Q3 Hoorcollege2 Deeltijd
IADD1 0809Q3 Hoorcollege2 DeeltijdIADD1 0809Q3 Hoorcollege2 Deeltijd
IADD1 0809Q3 Hoorcollege2 Deeltijd
Hans Kemp
 
TEKİRDAĞ PUBLİC EDUCATİON CENTER
TEKİRDAĞ PUBLİC EDUCATİON CENTER TEKİRDAĞ PUBLİC EDUCATİON CENTER
TEKİRDAĞ PUBLİC EDUCATİON CENTER
George Bekiaridis
 
Iad2 0809 Q4 Hoorcollege 1
Iad2 0809 Q4 Hoorcollege 1Iad2 0809 Q4 Hoorcollege 1
Iad2 0809 Q4 Hoorcollege 1
Hans Kemp
 
Unit 2 3 1 Costs Of Production
Unit 2 3 1 Costs Of ProductionUnit 2 3 1 Costs Of Production
Unit 2 3 1 Costs Of Production
Corey Topf
 
Unit 2 3 1 Costs Of Production
Unit 2 3 1 Costs Of ProductionUnit 2 3 1 Costs Of Production
Unit 2 3 1 Costs Of Production
Corey Topf
 

En vedette (20)

Week 34 Sponges
Week 34 SpongesWeek 34 Sponges
Week 34 Sponges
 
How can innovation change brands and drive your business and communication fo...
How can innovation change brands and drive your business and communication fo...How can innovation change brands and drive your business and communication fo...
How can innovation change brands and drive your business and communication fo...
 
Decentralized reception grethe
Decentralized reception   gretheDecentralized reception   grethe
Decentralized reception grethe
 
Iberika role
Iberika role Iberika role
Iberika role
 
For Sale Infiniti J30 in Greeley CO
For Sale Infiniti J30 in Greeley COFor Sale Infiniti J30 in Greeley CO
For Sale Infiniti J30 in Greeley CO
 
Bds Blind Spot Mirror Systems Uk
Bds Blind Spot Mirror Systems UkBds Blind Spot Mirror Systems Uk
Bds Blind Spot Mirror Systems Uk
 
Zappos - Community 2.0 Conference - 05-13-08
Zappos - Community 2.0 Conference  - 05-13-08Zappos - Community 2.0 Conference  - 05-13-08
Zappos - Community 2.0 Conference - 05-13-08
 
Tips for using the semi-colon
Tips for using the semi-colonTips for using the semi-colon
Tips for using the semi-colon
 
Zappos - ANA - 10-17-08
Zappos - ANA - 10-17-08Zappos - ANA - 10-17-08
Zappos - ANA - 10-17-08
 
Refactoring Metadata:
Refactoring Metadata:Refactoring Metadata:
Refactoring Metadata:
 
IADD1 0809Q3 Hoorcollege2 Deeltijd
IADD1 0809Q3 Hoorcollege2 DeeltijdIADD1 0809Q3 Hoorcollege2 Deeltijd
IADD1 0809Q3 Hoorcollege2 Deeltijd
 
Managing Perl Installations: A SysAdmin's View
Managing Perl Installations: A SysAdmin's ViewManaging Perl Installations: A SysAdmin's View
Managing Perl Installations: A SysAdmin's View
 
The Effects of Cross-Pollination : How non-library mass market services are c...
The Effects of Cross-Pollination : How non-library mass market services are c...The Effects of Cross-Pollination : How non-library mass market services are c...
The Effects of Cross-Pollination : How non-library mass market services are c...
 
Birkenes kommune
Birkenes kommuneBirkenes kommune
Birkenes kommune
 
TEKİRDAĞ PUBLİC EDUCATİON CENTER
TEKİRDAĞ PUBLİC EDUCATİON CENTER TEKİRDAĞ PUBLİC EDUCATİON CENTER
TEKİRDAĞ PUBLİC EDUCATİON CENTER
 
Iad2 0809 Q4 Hoorcollege 1
Iad2 0809 Q4 Hoorcollege 1Iad2 0809 Q4 Hoorcollege 1
Iad2 0809 Q4 Hoorcollege 1
 
Unit 2 3 1 Costs Of Production
Unit 2 3 1 Costs Of ProductionUnit 2 3 1 Costs Of Production
Unit 2 3 1 Costs Of Production
 
Introduction to Dacorum
Introduction to Dacorum Introduction to Dacorum
Introduction to Dacorum
 
Unit 2 3 1 Costs Of Production
Unit 2 3 1 Costs Of ProductionUnit 2 3 1 Costs Of Production
Unit 2 3 1 Costs Of Production
 
Vinterminglet #SSMX
Vinterminglet #SSMXVinterminglet #SSMX
Vinterminglet #SSMX
 

Similaire à Iadd1 0910 Q2 Structuur En Navigatie

IAD1 0809 Q3 Hoorcollege 2 Labels En Visuele Structuur
IAD1 0809 Q3 Hoorcollege 2 Labels En Visuele StructuurIAD1 0809 Q3 Hoorcollege 2 Labels En Visuele Structuur
IAD1 0809 Q3 Hoorcollege 2 Labels En Visuele Structuur
Hans Kemp
 
Iad1 Q2 Hoorcollege 2 Labels En Visuele Structuur
Iad1 Q2 Hoorcollege 2   Labels En Visuele StructuurIad1 Q2 Hoorcollege 2   Labels En Visuele Structuur
Iad1 Q2 Hoorcollege 2 Labels En Visuele Structuur
Hans Kemp
 
CMD Interaction Design - Y2 Q1 les 1 - Design Patterns
CMD Interaction Design - Y2 Q1 les 1 - Design PatternsCMD Interaction Design - Y2 Q1 les 1 - Design Patterns
CMD Interaction Design - Y2 Q1 les 1 - Design Patterns
Ferry den Dopper
 
College 5 Strategie 15052007
College 5 Strategie 15052007College 5 Strategie 15052007
College 5 Strategie 15052007
Igor ter Halle
 
College week 5 / strategie
College week 5 / strategieCollege week 5 / strategie
College week 5 / strategie
Igor ter Halle
 
0708 Ontwerpproces en beroepsproducten
0708 Ontwerpproces en beroepsproducten0708 Ontwerpproces en beroepsproducten
0708 Ontwerpproces en beroepsproducten
Hans Kemp
 
Ideale ontwikkelaanpak - Seminar Web, apps, email
Ideale ontwikkelaanpak - Seminar Web, apps, emailIdeale ontwikkelaanpak - Seminar Web, apps, email
Ideale ontwikkelaanpak - Seminar Web, apps, email
Colours B.V.
 
User experiencedesignfronteers
User experiencedesignfronteersUser experiencedesignfronteers
User experiencedesignfronteers
Hans Kemp
 
Week5 Woensdag Website 1
Week5 Woensdag Website 1Week5 Woensdag Website 1
Week5 Woensdag Website 1
Joey van Boxel
 

Similaire à Iadd1 0910 Q2 Structuur En Navigatie (20)

IAD1 0809 Q3 Hoorcollege 2 Labels En Visuele Structuur
IAD1 0809 Q3 Hoorcollege 2 Labels En Visuele StructuurIAD1 0809 Q3 Hoorcollege 2 Labels En Visuele Structuur
IAD1 0809 Q3 Hoorcollege 2 Labels En Visuele Structuur
 
Iad1 Q2 Hoorcollege 2 Labels En Visuele Structuur
Iad1 Q2 Hoorcollege 2   Labels En Visuele StructuurIad1 Q2 Hoorcollege 2   Labels En Visuele Structuur
Iad1 Q2 Hoorcollege 2 Labels En Visuele Structuur
 
CMD Interaction Design - Y2 Q1 les 1 - Design Patterns
CMD Interaction Design - Y2 Q1 les 1 - Design PatternsCMD Interaction Design - Y2 Q1 les 1 - Design Patterns
CMD Interaction Design - Y2 Q1 les 1 - Design Patterns
 
Vier Ontwerpbenaderingen Om Een Uitstekende User Interface (UI) Te Maken En U...
Vier Ontwerpbenaderingen Om Een Uitstekende User Interface (UI) Te Maken En U...Vier Ontwerpbenaderingen Om Een Uitstekende User Interface (UI) Te Maken En U...
Vier Ontwerpbenaderingen Om Een Uitstekende User Interface (UI) Te Maken En U...
 
College 5 Strategie 15052007
College 5 Strategie 15052007College 5 Strategie 15052007
College 5 Strategie 15052007
 
College week 5 / strategie
College week 5 / strategieCollege week 5 / strategie
College week 5 / strategie
 
0708 Ontwerpproces en beroepsproducten
0708 Ontwerpproces en beroepsproducten0708 Ontwerpproces en beroepsproducten
0708 Ontwerpproces en beroepsproducten
 
Ideale ontwikkelaanpak - Seminar Web, apps, email
Ideale ontwikkelaanpak - Seminar Web, apps, emailIdeale ontwikkelaanpak - Seminar Web, apps, email
Ideale ontwikkelaanpak - Seminar Web, apps, email
 
Afstudeerverslag + reflectie (definitief)
Afstudeerverslag + reflectie (definitief)Afstudeerverslag + reflectie (definitief)
Afstudeerverslag + reflectie (definitief)
 
Een Goede Website
Een Goede WebsiteEen Goede Website
Een Goede Website
 
Webcommunicatie / college 4
Webcommunicatie / college 4Webcommunicatie / college 4
Webcommunicatie / college 4
 
Usability Martin van Kranenburg
Usability Martin van KranenburgUsability Martin van Kranenburg
Usability Martin van Kranenburg
 
Schrijven voor het web
Schrijven voor het webSchrijven voor het web
Schrijven voor het web
 
User experiencedesignfronteers
User experiencedesignfronteersUser experiencedesignfronteers
User experiencedesignfronteers
 
Conversie Optimalisatie Thuiswinkel
Conversie Optimalisatie ThuiswinkelConversie Optimalisatie Thuiswinkel
Conversie Optimalisatie Thuiswinkel
 
Conversie Optimalisatie - Thuiswinkel kennis sessie
Conversie Optimalisatie - Thuiswinkel kennis sessieConversie Optimalisatie - Thuiswinkel kennis sessie
Conversie Optimalisatie - Thuiswinkel kennis sessie
 
Week5 Woensdag Website 1
Week5 Woensdag Website 1Week5 Woensdag Website 1
Week5 Woensdag Website 1
 
HAN - ReDesign -Introductie The Elements of User Experience Design
HAN - ReDesign -Introductie The Elements of User Experience DesignHAN - ReDesign -Introductie The Elements of User Experience Design
HAN - ReDesign -Introductie The Elements of User Experience Design
 
World of Minds presentatie
World of Minds presentatieWorld of Minds presentatie
World of Minds presentatie
 
Hoe verhoog ik de conversie op mijn internetinspanningen
Hoe verhoog ik de conversie op mijn internetinspanningenHoe verhoog ik de conversie op mijn internetinspanningen
Hoe verhoog ik de conversie op mijn internetinspanningen
 

Plus de Hans Kemp

Voorlichting tweedejaars 16 februari 2011
Voorlichting tweedejaars 16 februari 2011Voorlichting tweedejaars 16 februari 2011
Voorlichting tweedejaars 16 februari 2011
Hans Kemp
 
Mijn cmd beleving
Mijn cmd belevingMijn cmd beleving
Mijn cmd beleving
Hans Kemp
 
Multimodal, crossmedia, multi platform
Multimodal, crossmedia, multi platformMultimodal, crossmedia, multi platform
Multimodal, crossmedia, multi platform
Hans Kemp
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobile
Hans Kemp
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobile
Hans Kemp
 
1011q1 design for mobile les 4 - usabilitytesting for mobile
1011q1 design for mobile    les 4 - usabilitytesting for mobile1011q1 design for mobile    les 4 - usabilitytesting for mobile
1011q1 design for mobile les 4 - usabilitytesting for mobile
Hans Kemp
 
1011 q1 iadd1 de gebruiker heeft altijd gelijk
1011 q1 iadd1   de gebruiker heeft altijd gelijk1011 q1 iadd1   de gebruiker heeft altijd gelijk
1011 q1 iadd1 de gebruiker heeft altijd gelijk
Hans Kemp
 
Iadd1 1011 q1 introductie
Iadd1 1011 q1 introductieIadd1 1011 q1 introductie
Iadd1 1011 q1 introductie
Hans Kemp
 
Gobelins hro workshop kick-off
Gobelins hro workshop kick-offGobelins hro workshop kick-off
Gobelins hro workshop kick-off
Hans Kemp
 
1011Q1 Design For Mobile Les 2 - wireless, context en postures
1011Q1 Design For Mobile Les 2 - wireless, context en postures1011Q1 Design For Mobile Les 2 - wireless, context en postures
1011Q1 Design For Mobile Les 2 - wireless, context en postures
Hans Kemp
 
Uxd blog workshop
Uxd blog workshopUxd blog workshop
Uxd blog workshop
Hans Kemp
 
Interactieve datavisualisaties
Interactieve datavisualisatiesInteractieve datavisualisaties
Interactieve datavisualisaties
Hans Kemp
 
User experience design web en mobile - introduction
User experience design   web en mobile - introductionUser experience design   web en mobile - introduction
User experience design web en mobile - introduction
Hans Kemp
 
1011 q1 project 5 kick off
1011 q1 project 5 kick off1011 q1 project 5 kick off
1011 q1 project 5 kick off
Hans Kemp
 
1011q1 design for mobile les 1 the carry principle
1011q1 design for mobile les 1   the carry principle1011q1 design for mobile les 1   the carry principle
1011q1 design for mobile les 1 the carry principle
Hans Kemp
 
1011 q1 minor kickoff
1011 q1 minor kickoff1011 q1 minor kickoff
1011 q1 minor kickoff
Hans Kemp
 
Iad2 0910 q1 hoorcollege 4
Iad2 0910 q1 hoorcollege 4Iad2 0910 q1 hoorcollege 4
Iad2 0910 q1 hoorcollege 4
Hans Kemp
 
Iad2 0910 q4 les 2 dynamische interactie
Iad2 0910 q4 les 2   dynamische interactieIad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2 dynamische interactie
Hans Kemp
 

Plus de Hans Kemp (20)

Voorlichting tweedejaars 16 februari 2011
Voorlichting tweedejaars 16 februari 2011Voorlichting tweedejaars 16 februari 2011
Voorlichting tweedejaars 16 februari 2011
 
Mijn cmd beleving
Mijn cmd belevingMijn cmd beleving
Mijn cmd beleving
 
Ict lab
Ict labIct lab
Ict lab
 
Multimodal, crossmedia, multi platform
Multimodal, crossmedia, multi platformMultimodal, crossmedia, multi platform
Multimodal, crossmedia, multi platform
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobile
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobile
 
1011q1 design for mobile les 4 - usabilitytesting for mobile
1011q1 design for mobile    les 4 - usabilitytesting for mobile1011q1 design for mobile    les 4 - usabilitytesting for mobile
1011q1 design for mobile les 4 - usabilitytesting for mobile
 
1011 q1 iadd1 de gebruiker heeft altijd gelijk
1011 q1 iadd1   de gebruiker heeft altijd gelijk1011 q1 iadd1   de gebruiker heeft altijd gelijk
1011 q1 iadd1 de gebruiker heeft altijd gelijk
 
Iadd1 1011 q1 introductie
Iadd1 1011 q1 introductieIadd1 1011 q1 introductie
Iadd1 1011 q1 introductie
 
Gobelins hro workshop kick-off
Gobelins hro workshop kick-offGobelins hro workshop kick-off
Gobelins hro workshop kick-off
 
1011Q1 Design For Mobile Les 2 - wireless, context en postures
1011Q1 Design For Mobile Les 2 - wireless, context en postures1011Q1 Design For Mobile Les 2 - wireless, context en postures
1011Q1 Design For Mobile Les 2 - wireless, context en postures
 
Uxd blog workshop
Uxd blog workshopUxd blog workshop
Uxd blog workshop
 
Interactieve datavisualisaties
Interactieve datavisualisatiesInteractieve datavisualisaties
Interactieve datavisualisaties
 
User experience design web en mobile - introduction
User experience design   web en mobile - introductionUser experience design   web en mobile - introduction
User experience design web en mobile - introduction
 
1011 q1 project 5 kick off
1011 q1 project 5 kick off1011 q1 project 5 kick off
1011 q1 project 5 kick off
 
1011q1 design for mobile les 1 the carry principle
1011q1 design for mobile les 1   the carry principle1011q1 design for mobile les 1   the carry principle
1011q1 design for mobile les 1 the carry principle
 
Bio
BioBio
Bio
 
1011 q1 minor kickoff
1011 q1 minor kickoff1011 q1 minor kickoff
1011 q1 minor kickoff
 
Iad2 0910 q1 hoorcollege 4
Iad2 0910 q1 hoorcollege 4Iad2 0910 q1 hoorcollege 4
Iad2 0910 q1 hoorcollege 4
 
Iad2 0910 q4 les 2 dynamische interactie
Iad2 0910 q4 les 2   dynamische interactieIad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2 dynamische interactie
 

Iadd1 0910 Q2 Structuur En Navigatie