Human Computer
Interaction
Hele Reader - Jaar 1
Layla van Hulst
,Inhoudsopgave
Chapter 1 – The Elements of User Experience ................................................................................................. 4
The Elements – Jesse James Garrett................................................................................................................... 4
User Experience Hierarchy of Needs model........................................................................................................ 4
Design Patterns .................................................................................................................................................. 5
Design Principles ................................................................................................................................................ 6
Design Principles Pt. 2 ........................................................................................................................................ 6
Introduction to Web Accessibility – Disabilities.................................................................................................. 7
Principles of Accessible Design ...................................................................................................................... 7
Navigating Content........................................................................................................................................ 7
Design for Keyboard-only and Assistive Technology Users ................................................................................ 7
Chapter Two – Tap is the new Click ................................................................................................................ 8
UI Paradigmas – The Evolution of User Interfaces ............................................................................................. 8
Classification of Interaction Styles ..................................................................................................................... 8
Interface Metaphors and Analogies ................................................................................................................... 9
How We Hold Our Handheld Devices ............................................................................................................... 10
Phone .......................................................................................................................................................... 10
Phablet ........................................................................................................................................................ 10
Tablets ......................................................................................................................................................... 11
Laptops ........................................................................................................................................................ 11
Lay-out for Handheld Devices .......................................................................................................................... 12
Fitts’ Law – Expandable Menus: Pull-Down, Square or Pie? ............................................................................ 12
Linear (or Drop-Down) Menus .................................................................................................................... 12
Rectangular (or Square) Menus .................................................................................................................. 13
Pie (or Radial) and Marking Menus ............................................................................................................. 13
Chrome (non-content) ...................................................................................................................................... 14
Maximize the Content-to-Chrome Ratio .......................................................................................................... 14
Touch Target Size – Go Big or Go Home ........................................................................................................... 15
Gestures in Touch User Interface ..................................................................................................................... 15
(Perceived) Affordance ..................................................................................................................................... 15
Discoverability of Gestures ............................................................................................................................... 16
Microinteractions – Triggers ............................................................................................................................ 16
Microinteractions – Feedback .......................................................................................................................... 17
Designing a VUI – Voice User Interface ............................................................................................................ 17
Chapter 3 – Forms are everywhere > Input and Forms Getting Input from Users ......................................... 19
Controls ............................................................................................................................................................ 20
Patterns ............................................................................................................................................................ 22
Pattern: Forgiving Format ........................................................................................................................... 22
Pattern: Structured Format ........................................................................................................................ 22
Pattern: Fill in the Blanks ............................................................................................................................ 22
Pattern: Input Hints .................................................................................................................................... 22
Pattern: Illustrated Choices ........................................................................................................................ 22
2
, Pattern: Input Prompt................................................................................................................................. 23
Pattern: Autocompletion ............................................................................................................................ 23
Pattern: Good Defaults ............................................................................................................................... 23
Specific Mobile Input Mechanisms ................................................................................................................... 24
Use Uniquely Mobile Input Mechanisms .......................................................................................................... 25
Organizing the Page ......................................................................................................................................... 25
Pattern: Responsive Disclosure .................................................................................................................. 26
Pattern: Responsive Enabling ..................................................................................................................... 26
Pattern: Animated Transitions ................................................................................................................... 27
Label Alignment in Forms ................................................................................................................................. 27
Right-Alined Labels ...................................................................................................................................... 27
Left-Aligned Labels: ..................................................................................................................................... 28
Labels Within Input ..................................................................................................................................... 28
Disabled Buttons Suck ...................................................................................................................................... 28
In-Page Editing ................................................................................................................................................. 29
Pattern: Single-Field Inline Edit .................................................................................................................. 29
Pattern: Multi-Field Inline Edit ................................................................................................................... 29
Pattern: Overlay Edit................................................................................................................................... 30
Error messages – Show the Solution ................................................................................................................ 31
Motivating users to give input – The Subtle Art of Seduction .......................................................................... 31
Coming on Too Strong – and how not to.......................................................................................................... 31
Design Better Forms ......................................................................................................................................... 32
3
, Chapter 1 – The Elements of User Experience
The Elements – Jesse James Garrett
Surface: buitenkant van een webpagina
(foto’s en tekst)
Skeleton: plaatsing content
Structure: navigatie, links en home
Scope: hoe werken kenmerken/functies
samen
Strategy: wat wil je uit de site halen?
__________________________________________________________________________________
User Experience Hierarchy of Needs model
Functional: ideeën beginnen als functionele oplossing
voor een probleem.
Reliable: Vertrouwen van de bruikbaarheid of
vertrouwen van de gegevens. (Denk aan online een
kaartje kopen, dit moet te vertrouwen zijn.)
Usable and convenient: Het fijn en gemakkelijk maken
om te gebruiken.
Pleasurable: Waar gemak zich focust op cognitie, is dit
level gericht op emoties. Hoe kan iets emotioneel
boeiend en gedenkwaardig zijn?
Meaningful: Dit is persoonlijk en subjectief. (Apple is
meer dan alleen elektronica.)
4
Interaction
Hele Reader - Jaar 1
Layla van Hulst
,Inhoudsopgave
Chapter 1 – The Elements of User Experience ................................................................................................. 4
The Elements – Jesse James Garrett................................................................................................................... 4
User Experience Hierarchy of Needs model........................................................................................................ 4
Design Patterns .................................................................................................................................................. 5
Design Principles ................................................................................................................................................ 6
Design Principles Pt. 2 ........................................................................................................................................ 6
Introduction to Web Accessibility – Disabilities.................................................................................................. 7
Principles of Accessible Design ...................................................................................................................... 7
Navigating Content........................................................................................................................................ 7
Design for Keyboard-only and Assistive Technology Users ................................................................................ 7
Chapter Two – Tap is the new Click ................................................................................................................ 8
UI Paradigmas – The Evolution of User Interfaces ............................................................................................. 8
Classification of Interaction Styles ..................................................................................................................... 8
Interface Metaphors and Analogies ................................................................................................................... 9
How We Hold Our Handheld Devices ............................................................................................................... 10
Phone .......................................................................................................................................................... 10
Phablet ........................................................................................................................................................ 10
Tablets ......................................................................................................................................................... 11
Laptops ........................................................................................................................................................ 11
Lay-out for Handheld Devices .......................................................................................................................... 12
Fitts’ Law – Expandable Menus: Pull-Down, Square or Pie? ............................................................................ 12
Linear (or Drop-Down) Menus .................................................................................................................... 12
Rectangular (or Square) Menus .................................................................................................................. 13
Pie (or Radial) and Marking Menus ............................................................................................................. 13
Chrome (non-content) ...................................................................................................................................... 14
Maximize the Content-to-Chrome Ratio .......................................................................................................... 14
Touch Target Size – Go Big or Go Home ........................................................................................................... 15
Gestures in Touch User Interface ..................................................................................................................... 15
(Perceived) Affordance ..................................................................................................................................... 15
Discoverability of Gestures ............................................................................................................................... 16
Microinteractions – Triggers ............................................................................................................................ 16
Microinteractions – Feedback .......................................................................................................................... 17
Designing a VUI – Voice User Interface ............................................................................................................ 17
Chapter 3 – Forms are everywhere > Input and Forms Getting Input from Users ......................................... 19
Controls ............................................................................................................................................................ 20
Patterns ............................................................................................................................................................ 22
Pattern: Forgiving Format ........................................................................................................................... 22
Pattern: Structured Format ........................................................................................................................ 22
Pattern: Fill in the Blanks ............................................................................................................................ 22
Pattern: Input Hints .................................................................................................................................... 22
Pattern: Illustrated Choices ........................................................................................................................ 22
2
, Pattern: Input Prompt................................................................................................................................. 23
Pattern: Autocompletion ............................................................................................................................ 23
Pattern: Good Defaults ............................................................................................................................... 23
Specific Mobile Input Mechanisms ................................................................................................................... 24
Use Uniquely Mobile Input Mechanisms .......................................................................................................... 25
Organizing the Page ......................................................................................................................................... 25
Pattern: Responsive Disclosure .................................................................................................................. 26
Pattern: Responsive Enabling ..................................................................................................................... 26
Pattern: Animated Transitions ................................................................................................................... 27
Label Alignment in Forms ................................................................................................................................. 27
Right-Alined Labels ...................................................................................................................................... 27
Left-Aligned Labels: ..................................................................................................................................... 28
Labels Within Input ..................................................................................................................................... 28
Disabled Buttons Suck ...................................................................................................................................... 28
In-Page Editing ................................................................................................................................................. 29
Pattern: Single-Field Inline Edit .................................................................................................................. 29
Pattern: Multi-Field Inline Edit ................................................................................................................... 29
Pattern: Overlay Edit................................................................................................................................... 30
Error messages – Show the Solution ................................................................................................................ 31
Motivating users to give input – The Subtle Art of Seduction .......................................................................... 31
Coming on Too Strong – and how not to.......................................................................................................... 31
Design Better Forms ......................................................................................................................................... 32
3
, Chapter 1 – The Elements of User Experience
The Elements – Jesse James Garrett
Surface: buitenkant van een webpagina
(foto’s en tekst)
Skeleton: plaatsing content
Structure: navigatie, links en home
Scope: hoe werken kenmerken/functies
samen
Strategy: wat wil je uit de site halen?
__________________________________________________________________________________
User Experience Hierarchy of Needs model
Functional: ideeën beginnen als functionele oplossing
voor een probleem.
Reliable: Vertrouwen van de bruikbaarheid of
vertrouwen van de gegevens. (Denk aan online een
kaartje kopen, dit moet te vertrouwen zijn.)
Usable and convenient: Het fijn en gemakkelijk maken
om te gebruiken.
Pleasurable: Waar gemak zich focust op cognitie, is dit
level gericht op emoties. Hoe kan iets emotioneel
boeiend en gedenkwaardig zijn?
Meaningful: Dit is persoonlijk en subjectief. (Apple is
meer dan alleen elektronica.)
4
