Post on 16-Jul-2015
IDM BLOK Eopen data
HT 1 periode 4vak HCI
HUMAN COMPUTERINTERACTIONKlaas Jan Mollema MSc
IDMDENHAAGInformatieDienstverlening &informatieManagement
HTDENHAAGHuman Technology
3
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
STRATEGY PLANEwho whants what?
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
- Site Objectives- User needs
Oftewel:- Wat willen de makers met de site bereiken?- Wat willen de gebruikers met de site bereiken?
En: formuleer je eisen zo duidelijk mogelijk: SMART
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
SCOPE PLANEfunctionality
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
“Defining the scope: a valuable process that results in a valuable product”
Oftewel:Bepaal de omvang en grootte van je project en dat hangt weer af van de tijd en middelen die je hebt
College 1 : INTRODUCTIE HCI & OUTLINE JESSY JAMES GARRETT
College 2 : STRATEGY PLANE & SCOPE PLANE
College 3 : STRUCTURE PLANE & SKELETON PLANE
College 4 : SKELETON PLANE (patterns) & SURFACE PLANE
College 5 : USABILITY TESTEN
IDM BLOK Eopen data
HT 1 periode 4vak HCI
IDMDENHAAGInformatieDienstverlening &informatieManagement
HTDENHAAGHuman Technology
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
SURFACE PLANEwhat you see
SKELETON PLANEplacement of buttons etc.
STRUCTURE PLANEthe infrastructure
SCOPE PLANEfunctionality
STRATEGY PLANEwho whants what?
IDM BLOK Eopen data
HT 1 periode 4vak HCI
STRUCTURE PLANEthe nfrastructure
IDMDENHAAGInformatieDienstverlening &informatieManagement
HTDENHAAGHuman Technology
STRUCTURE PLANEthe infrastructure
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
web als softwaresysteeminteraction design: Welke middelen zijn er beschikbaar voor de gebruiker om taken uit te voeren
web als hypertext systeminformatie architectuur: Welke opties zijn er om de informatie aan de gebruiker te tonen.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
mental modelA mental model is an explanation of someone's thought process about how something works in the real world.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
mental modelA mental model is an explanation of someone's thought process about how something works in the real world.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
aspecten mental modelsdesign modeluser’s modelsystem image
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
aspecten mental modelsdesign modeluser’s model >> usability aspecten >> system image
EffectiveEfficientEngagingError tolerantEasy to learn
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
past deze interface bij het mental model
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
past deze interface bij het mental model
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
metaforenals hulp voorhet mentaalmodel
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
metaforenals hulp voorhet mentaalmodel
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
metaforenals hulp voorhet mentaalmodel
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
metaforenals hulp voorhet mentaalmodel
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
metaforenals hulp voorhet mentaalmodel
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
opdrachtbedenk drie metaforen voor je digitaal
portfoliowebsite
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
gaat over de ordening van de informatie in je site
niet over de navigatiestructuur
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
bottom up architectuur
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
top down architecture
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
hierarchische architectuur
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
matrix architecture
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
organische architectuur
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
sequentiele architectuur
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
organizing principlesHet criterium waarmee we besluiten welke informatie eenheden (nodes) we groeperen en welke we apart houden
Mogelijke indelingen:- Fysieke ligging- Categorie / thema- Taakgericht- Tijd / periode- Alfabetisch- Populariteit- Associaties
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
attributen (facets)- Het belang van bepaalde attributen
van objecten bepalen welke organizing principles worden gekozen
- Gebaseerd op de gebruikersbehoeften en site doelen die in de ‘strategy plane’ zijn gedefinieerd
- En gebaseerd op de informatie waarmee deze behoeften vervuld kunnen worden (‘scope plane’)
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
alternatieve voorbeelden- chronologische informatieindeling
http://newsmap.jp/#/b,e,m,n,s,t,w/nl_nl/view/
- geografische informatieindelinghttp://www.swisstrains.ch
- chronologische en geografische informatieindelinghttp://app.timemaps.nl/map#19:28
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
metadatagegevens over gegevens: een gestructureerde benadering om een gegeven stuk content mee te kunnen beschrijven
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
nomenclatuurSystematisch benamen van verschillende zaken
doel: idealiter heeft een wetenschappelijke naam voor iedereen die ermee werkt dezelfde, unieke betekenis.
Bijvoorbeeld: Een voorbeeld is de wetenschappelijke naam van het madeliefje, Bellis perennis. Hierin is Bellis de geslachtsnaam terwijl perennis de soortaanduiding is.
Spreek de taal van je gebruikers en doe dit op een consistente wijze
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
gecontroleerd vocabulariumeen set gestandaardiseerde termen die gebruikt wordt in de site met als doel eenheid te bewaren
voorbeeld:
vervoermiddelen NT gemotoriseerde vervoermiddelen NT automobielen NT vliegtuigen NT niet gemotoriseerde vervoermiddelen NT fietsen NT stuur NT zadel
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
STRUCTURE PLANEthe infrastructure
interactiondesign
informationdesign
opdrachtKies twee verschillende structuren voor je DPF- Hiërarchische structuur- Matrix structuur- Organische structuur- Sequentiële structuur
Kies hierbij logische organizing principle
Beschrijf hoe dit er dan uitziet in je DPF
Beschrijf hoe dit dan overeenkomt met je user needs en je site objectives
PAUZE
Sectorinstituut Openbare BibliothekenSteunpunt Volwassenen Educatie
8 mei 2014 | Utrecht
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
INLEVEREN MOODBOARD
Sectorinstituut Openbare BibliothekenSteunpunt Volwassenen Educatie
8 mei 2014 | Utrecht
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the structure planethe infrastructure
IDM BLOK Eopen data
HT 1 periode 4vak HCI
SKELETON PLANEplacement of buttons etc.
IDMDENHAAGInformatieDienstverlening &informatieManagement
HTDENHAAGHuman Technology
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
navigatiegeneralisatie
interfacedesign
navigationdesign
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
navigatiespecialisatie
interfacedesign
navigationdesign
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
navigatie
interfacedesign
navigationdesign
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
navigatieSKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
navigatieSKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
elementen van de interfacewelke elementen passen het beste bij:- het vervullen van de taak- de informatieoverdracht- de beoogde gebruiker
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
Bouwstenen van een GUI
Hoe kies je de juiste widget?Hoe gebruik je de widget effectief?Hoe combineer je widgets?
Verwar hier het begrip widget niet met kleine programma’s zoals in Mac Os en Windows Vista
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
widgetsSKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
widgetsSKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
widgets kiezen om interactie te structureren
Primary windowsSecondary windows met daarin:
Message buttonsDialog boxes
Tabs
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
widgets kiezen om interactie te structureren
Primary windowsSecondary windows met daarin:
Message buttonsDialog boxes
Tabs
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
widgets kiezen om interactie te structureren
Primary windowsSecondary windows met daarin:
Message buttonsDialog boxes
Tabs
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
widgets kiezen om interactie te structureren
Primary windowsSecondary windows met daarin:
Message buttonsDialog boxes
Tabs
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
widgets kiezen om interactie te controlerenSKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
widgets kiezen om interactie te controlerenSKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
widgets kiezen om interactie te controlerenSKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
widgets kiezen om gegevens in te voerenkeuzeknoppen en checkboxes
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
widgets kiezen om gegevens in te voerenlist boxes
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
widgets kiezen om gegevens in te voerentext boxes
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
elementen van de interfacewelke elementen passen het beste bij:- het vervullen van de taak- de informatieoverdracht- de beoogde gebruiker
> Volgorde van de stappen> Waar ben ik?> Concequenties van acties> Closure> Gebruiker heeft controle
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
wireframesDe page layout wordt vastgelegd in een wireframe -> Dit is dus nog geen grafisch ontwerp
Wireframe is een ‘simpele’ lijntekening die wordt ondersteunt door opmerkingen over de navigatie, interactie en informatie ... en door verwijzingen naar de opgestelde documenten zoals de functional specifications
SKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
wireframesSKELETON PLANEplacement of buttons etc.
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
the scope planefunctionaliteiten in gebruik en inhoud
interfacedesign
navigationdesign
wireframesSKELETON PLANEplacement of buttons etc.