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
STRUCTURE PLANE
the infrastructure
meet
the
elements
-­‐
the
five
planes
stappenplan
voor
een
compleet
ID/UXd
product
“Concrete expression of the more abstract structure of
the site”
Oftewel:
Hoe is de navigatie in de website opgebouwd, welke
onderwerpen horen bij elkaar?

4. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
SKELETON PLANE
placement of buttons etc.
meet
the
elements
-­‐
the
five
planes
stappenplan
voor
een
compleet
ID/UXd
product
- Interface design zoals checkboxes etc
- Navigation design zoals global navigation
- Hulpmiddelen zijn een site map en een index
- Een hulpmiddel bij het ontwerpen is een ‘wireframe’

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
SURFACE PLANE
what
you
see
IDMDENHAAG
InformatieDienstverlening &
informatieManagement
HTDENHAAG
Human Technology
SURFACE PLANE
what you see

9. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
- Definitie en doel
- Relatie met Brand Identity
- Producten: Mock-up and Style Guides
- Richtlijnen: Contrast & Uniformity
- Richtlijnen: Internal and External Consistency
- Onderdelen: Color Palettes and Typography
SURFACE PLANE
what you see

10. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
- Definitie en doel
- Relatie met Brand Identity
- Producten: Mock-up and Style Guides
- Richtlijnen: Contrast & Uniformity
- Richtlijnen: Internal and External Consistency
- Onderdelen: Color Palettes and Typography
dus eindelijk aan de slag met de vormgeving:
> Beschrijving van Brand-identity omzetten in
visuele aspecten
> Visualiseren van het uiteindelijke product waarin
alle onderdelen die in de deelopdrachten zijn
gekozen worden verwerkt
SURFACE PLANE
what you see

11. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
definitie
Visual design is het bepalen van hoe de logische
ordening van interface-elementen (weergegeven
in de wireframe) visueel gepresenteerd wordt
SURFACE PLANE
what you see
definitie en doel

12. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
doel
Het doel ervan is het grafische ontwerp aan te
laten stuiten bij de doelen van de website
SURFACE PLANE
what you see
definitie en doel

13. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
SURFACE PLANE
what you see
definitie en doel
grafische saus

14. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
- Is één van jullie doelen
- Visual design is één van de belangrijkste tools
om de brand identity te communiceren
- Visual design is niet dus zeker niet alleen een
kwestie van esthetiek, maar vooral van strategie
SURFACE PLANE
what you see
relatie met brand idenity

15. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
styleguide doel
- Helpt om vroeg te focussen op ontwerp
vraagstukken
- Maakt het mogelijk goed ontwerpprincipes en
richtlijnen toe te passen
- Dwingt tot beslissingen nemen en kan dienen als
naslagwerk
- Verzekerd consistentie (ook als je organisatie
veranderd)
SURFACE PLANE
what you see
producten

16. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
styleguide doel
- Helpt om vroeg te focussen op ontwerp
vraagstukken
- Maakt het mogelijk goed ontwerpprincipes en
richtlijnen toe te passen
- Dwingt tot beslissingen nemen en kan dienen als
naslagwerk
- Verzekerd consistentie (ook als je organisatie
veranderd)
SURFACE PLANE
what you see
producten

17. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
styleguide inhoud
- Bevat richtlijnen voor een product of
productfamilie
- Een beschrijving van de vereiste interactie stijlen
en user interface controls, de ‘look and feel’ van
de interface dus (kan ook in interactieontwerp)
- Een beschrijving van wanneer en hoe de
verschillende interactie stijlen of interfaces te
gebruiken (kan ook in interactieontwerp)
- Voorbeelden (illustraties) van de interactiestijlen
en controls
- Scherm voorbeelden (Mock-up)
SURFACE PLANE
what you see
producten

18. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
styleguide inhoud
- Bevat richtlijnen voor een product of
productfamilie
- Een beschrijving van de vereiste interactie stijlen
en user interface controls, de ‘look and feel’ van
de interface dus (kan ook in interactieontwerp)
- Een beschrijving van wanneer en hoe de
verschillende interactie stijlen of interfaces te
gebruiken (kan ook in interactieontwerp)
- Voorbeelden (illustraties) van de interactiestijlen
en controls
- Scherm voorbeelden (Mock-up)
SURFACE PLANE
what you see
producten

19. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
styleguide voorbeelden
- Web2.0 styleguide
- Apple Human Interface Guidelines
- Microsoft UI Style Guide 2007 Office
SURFACE PLANE
what you see
producten

20. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
accessability betekenis
“… the design of products and environments to be
usable by all people, to the greatest extend
possible, without the need for adaptation or
specialized design.”
Ron Mace, Center for Universal Design, North Carolina State University
SURFACE PLANE
what you see
producten

21. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
accessability doel en nut
- Betere bereikbaarheid
- Betere vindbaarheid
- Betere toegankelijkheid
- Toename in snelheid
- Lagere kosten voor beheer en onderhoud
- Voorbereid op de raadpleging via mobiele
telefoons en PDA's.
SURFACE PLANE
what you see
producten

22. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
accessability guidelines
W3C Web Content Accessibility Guidelines
14 algemene geldende principes van accessible design
http://www.w3.org/TR/WAI-WEBCONTENT/
Webrichtlijnen Drempelvrij
Richtlijnen van de Stichting Waarmerk Drempelvrij http://
www.drempelvrij.nl/waarmerk-2/wcag-20/evaluatiedocument
SURFACE PLANE
what you see
producten

23. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
richtlijnen: contrast en uniformitySURFACE PLANE
what you see
producten

24. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
richtlijnen: contrast en uniformity
Zorg voor uniformiteit binnen en tussen de verschillende
schermen zodat de gebruiker er makkelijk mee leert werken
SURFACE PLANE
what you see
producten

25. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
richtlijnen: contrast en uniformity
je kunt een grid gebruiken
http://960.gs
SURFACE PLANE
what you see
producten

26. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
richtlijnen: contrast en uniformity
Zorg voor contrast om de
aandacht van de gebruiker te leiden
Gebruik geen verschillende
aspecten (knoppen, widgets,
kleuren, lettertypes) die op
elkaar lijken.
Gebruikt aspecten die duidelijk
anders zijn, of gebruik dezelfde.
SURFACE PLANE
what you see
producten

27. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
richtlijnen: contrast en uniformity
Zorg voor contrast om de
aandacht van de gebruiker te leiden
Gebruik geen verschillende
aspecten (knoppen, widgets,
kleuren, lettertypes) die op
elkaar lijken.
Gebruikt aspecten die duidelijk
anders zijn, of gebruik dezelfde.
SURFACE PLANE
what you see
producten

28. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
richtlijnen: contrast en uniformitySURFACE PLANE
what you see
producten

29. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
richtlijnen: Internal and External Consistency
Internal Consistency: verschillende aspecten van je site sluiten
niet aan bij elkaar
External Consistency: de site sluit niet aan bij de
bedrijfsvoering of overige uitingen.
Oefening: bedenkt voorbeelden van minstens 2 interne en 2
externe inconsistentie van je DPF en de consecuenties
daarvan?
SURFACE PLANE
what you see
producten

30. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
Onderdelen: Color Palettes and Typography
Core brand colors zijn onderdeel van een groter kleurenpalet
Kleurenpalet moet zich lenen voor een breed gebruik, zodat er
effectieve designkeuzes gemaakt kunnen worden
Ook hier komen contrast en uniformiteit bij kijken
http://labs.adobe.com/technologies/kuler/
SURFACE PLANE
what you see
producten

31. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
Onderdelen: Color Palettes and Typography
Soms zelfs zo belangrijk geacht in het communiceren van
Brand Identity speciale lettertypes worden ontworpen
Apple heeft bijvoorbeeld eigen lettertype
SURFACE PLANE
what you see
producten

32. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
Onderdelen: Color Palettes and Typography
Speciale lettertypes voor beeldscherm (o.a. Verdana, Georgia),
maar er zijn er meer geschikt (Lucida Sans Unicode is bij mij
favoriet)
Voor grotere tekstelementen en tekstlabels zijn ook de meer
excentrieke lettertypes geschikt
Ook hier komen contrast en uniformiteit
bij kijken
SURFACE PLANE
what you see
producten

33. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
- Definitie en doel
- Relatie met Brand Identity
- Producten: Mock-up and Style Guides
- Richtlijnen: Contrast & Uniformity
- Richtlijnen: Internal and External Consistency
- Onderdelen: Color Palettes and Typography
SURFACE PLANE
what you see
richtlijnen

34. IDM-­‐
E
open
data
INTERACTION
DESIGN
HT
1
periode
4
HCI
the
surface
plane
what
you
see
- Definitie en doel
- Relatie met Brand Identity
- Producten: Mock-up and Style Guides
- Richtlijnen: Contrast & Uniformity
- Richtlijnen: Internal and External Consistency
- Onderdelen: Color Palettes and Typography
SURFACE PLANE
what you see
onderdelen

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