human computer interaction

1. IDM
BLOK
E
open
data
HT
1
periode
4
vak
HCI
HUMAN COMPUTER
INTERACTION
Klaas
Jan
Mollema
MSc
IDMDENHAAG
InformatieDienstverlening &
informatieManagement
HTDENHAAG
Human Technology
3

2. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
meet
the
elements
-­‐
the
five
planes
stappenplan
voor
een
compleet
ID/UXd
product

3. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
STRATEGY PLANE
who whants what?
meet
the
elements
-­‐
the
five
planes
stappenplan
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

4. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
SCOPE PLANE
functionality
meet
the
elements
-­‐
the
five
planes
stappenplan
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

5. 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
E
open
data
HT
1
periode
4
vak
HCI
IDMDENHAAG
InformatieDienstverlening &
informatieManagement
HTDENHAAG
Human Technology

6. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
meet
the
elements
-­‐
the
five
planes
stappenplan
voor
een
compleet
ID/UXd
product

7. meet
the
elements
-­‐
the
five
planes
stappenplan
voor
een
compleet
ID/UXd
product
IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
SURFACE PLANE
what you see
SKELETON PLANE
placement of buttons etc.
STRUCTURE PLANE
the infrastructure
SCOPE PLANE
functionality
STRATEGY PLANE
who whants what?

8. IDM
BLOK
E
open
data
HT
1
periode
4
vak
HCI
STRUCTURE PLANE
the
nfrastructure
IDMDENHAAG
InformatieDienstverlening &
informatieManagement
HTDENHAAG
Human Technology
STRUCTURE PLANE
the infrastructure

9. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
web als softwaresysteem
interaction design: Welke middelen zijn
er beschikbaar voor de gebruiker om
taken uit te voeren
web als hypertext system
informatie architectuur: Welke opties
zijn er om de informatie aan de
gebruiker te tonen.

10. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
mental model
A mental model is an explanation of
someone's thought process about how
something works in the real world.

11. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
mental model
A mental model is an explanation of
someone's thought process about how
something works in the real world.

12. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design

13. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
aspecten mental models
design model
user’s model
system image

14. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
aspecten mental models
design model
user’s model >> usability aspecten >>
system image
Effective
Efficient
Engaging
Error tolerant
Easy to learn

15. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
past deze interface bij het mental model

16. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
past deze interface bij het mental model

17. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
metaforen
als hulp voor
het mentaal
model

18. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
metaforen
als hulp voor
het mentaal
model

19. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
metaforen
als hulp voor
het mentaal
model

20. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
metaforen
als hulp voor
het mentaal
model

21. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
metaforen
als hulp voor
het mentaal
model

22. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
opdracht
bedenk drie metaforen voor je digitaal
portfoliowebsite

23. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
gaat over de ordening van de
informatie in je site
niet over de navigatiestructuur

24. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
bottom up architectuur

25. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
top down architecture

26. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
hierarchische architectuur

27. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
matrix architecture

28. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
organische architectuur

29. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
sequentiele architectuur

30. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
organizing principles
Het 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

31. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
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’)

32. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
alternatieve voorbeelden
- chronologische informatieindeling
http://newsmap.jp/#/b,e,m,n,s,t,w/
nl_nl/view/
- geografische informatieindeling
http://www.swisstrains.ch
- chronologische en geografische
informatieindeling
http://app.timemaps.nl/map#19:28

33. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
metadata
gegevens over gegevens: een gestructureerde benadering om
een gegeven stuk content mee te kunnen beschrijven

34. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
nomenclatuur
Systematisch 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

35. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
gecontroleerd vocabularium
een 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

36. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure
STRUCTURE PLANE
the infrastructure
interaction
design
information
design
opdracht
Kies 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

37. PAUZE
Sectorinstituut
Openbare
Bibliotheken
Steunpunt
Volwassenen
Educatie
8
mei
2014
|
Utrecht
IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure

38. INLEVEREN MOODBOARD
Sectorinstituut
Openbare
Bibliotheken
Steunpunt
Volwassenen
Educatie
8
mei
2014
|
Utrecht
IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
structure
plane
the
infrastructure

39. IDM
BLOK
E
open
data
HT
1
periode
4
vak
HCI
SKELETON PLANE
placement
of
buttons
etc.
IDMDENHAAG
InformatieDienstverlening &
informatieManagement
HTDENHAAG
Human Technology
SKELETON PLANE
placement of buttons etc.

40. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
navigatie
generalisatie
interface
design
navigation
design
SKELETON PLANE
placement of buttons etc.

41. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
navigatie
specialisatie
interface
design
navigation
design
SKELETON PLANE
placement of buttons etc.

42. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
navigatie
interface
design
navigation
design
SKELETON PLANE
placement of buttons etc.

43. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
navigatieSKELETON PLANE
placement of buttons etc.

44. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
navigatieSKELETON PLANE
placement of buttons etc.

45. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
elementen van de interface
welke elementen passen het beste bij:
- het vervullen van de taak
- de informatieoverdracht
- de beoogde gebruiker
SKELETON PLANE
placement of buttons etc.

46. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
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 PLANE
placement of buttons etc.

47. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
widgetsSKELETON PLANE
placement of buttons etc.

48. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
widgetsSKELETON PLANE
placement of buttons etc.

49. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
widgets kiezen om interactie te structureren
Primary windows
Secondary windows met daarin:
Message buttons
Dialog boxes
Tabs
SKELETON PLANE
placement of buttons etc.

50. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
widgets kiezen om interactie te structureren
Primary windows
Secondary windows met daarin:
Message buttons
Dialog boxes
Tabs
SKELETON PLANE
placement of buttons etc.

51. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
widgets kiezen om interactie te structureren
Primary windows
Secondary windows met daarin:
Message buttons
Dialog boxes
Tabs
SKELETON PLANE
placement of buttons etc.

52. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
widgets kiezen om interactie te structureren
Primary windows
Secondary windows met daarin:
Message buttons
Dialog boxes
Tabs
SKELETON PLANE
placement of buttons etc.

53. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
widgets kiezen om interactie te controlerenSKELETON PLANE
placement of buttons etc.

54. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
widgets kiezen om interactie te controlerenSKELETON PLANE
placement of buttons etc.

55. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
widgets kiezen om interactie te controlerenSKELETON PLANE
placement of buttons etc.

56. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
widgets kiezen om gegevens in te voeren
keuzeknoppen en checkboxes
SKELETON PLANE
placement of buttons etc.

57. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
widgets kiezen om gegevens in te voeren
list boxes
SKELETON PLANE
placement of buttons etc.

58. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
widgets kiezen om gegevens in te voeren
text boxes
SKELETON PLANE
placement of buttons etc.

59. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
elementen van de interface
welke 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 PLANE
placement of buttons etc.

60. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
wireframes
De 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 PLANE
placement of buttons etc.

61. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
wireframesSKELETON PLANE
placement of buttons etc.

62. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
scope
plane
functionaliteiten
in
gebruik
en
inhoud
interface
design
navigation
design
wireframesSKELETON PLANE
placement of buttons etc.

63. IDM
BLOK
E
open
data
HT
1
periode
4
vak
HCI
HUMAN COMPUTER
INTERACTION
Klaas
Jan
Mollema
MSc
IDMDENHAAG
InformatieDienstverlening &
informatieManagement
HTDENHAAG
Human Technology