lecture 3: human-computer interaction course (2015) @vu university amsterdam
TRANSCRIPT
![Page 1: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/1.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Lora Aroyo Web & Media Group
HCI Design Chapters 5, 9-11, 13-14
![Page 2: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/2.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Interaction Design Concepts
• Design principles • Affordance, Constraints, and Mapping • Feedback • Visibility • Conceptual models • Other factors:
– transfer effects – cultural associations – individual differences
Lora Aroyo, Web & Media Group 2
![Page 3: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/3.jpg)
Human-Computer Interaction Course 2015: Lecture 3
![Page 4: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/4.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Four psychological Principles
1. Users See What They Expect to See
2. Users Have Difficulty Focusing on More than One Activity at a Time
3. It Is Easier to Perceive a Structured Layout
4. It Is Easier to Recognize Something than to Recall It
Lora Aroyo, Web & Media Group 4
![Page 5: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/5.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Principle 1
User’s confusions with the UI:
consistency
exploiting prior knowledge see what they want to see
Lora Aroyo, Web & Media Group 5
people don’t read
![Page 6: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/6.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Principle 2
Users Have Difficulty Focusing on More Than One Activity at a Time
– The Cocktail Party Effect
• Principle of Perceptual Organization – Group alike things together
• Principle of Importance – Prominent display for important items
Lora Aroyo, Web & Media Group 6
![Page 7: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/7.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Principle 3
It Is Easier to Perceive a Structured Layout
• Law of proximity • Law of similarity • Law of closure • Law of continuity • Law of symmetry
Lora Aroyo, Web & Media Group 7
![Page 8: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/8.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Principle 4
It Is Easier to Recognize Something Than to Recall It
• Principle of recognition • Knowledge in the head & Knowledge in the
world
Lora Aroyo, Web & Media Group 8
![Page 9: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/9.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Principles from Experience: Affordance It Should Be Obvious How a Control Is Used
Lora Aroyo, Web & Media Group 9
![Page 10: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/10.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Affordances
• The perceived and actual fundamental properties of the object that determine how it could possibly be used (Gibson 1977)
• Some affordances are obvious, some learned • Have suggestions or clues about to how to use these
properties • Can be dependent on the
– Experience – Knowledge – Culture of the actor
• Can make an action easy or difficult
Lora Aroyo, Web & Media Group 10
![Page 11: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/11.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Affordances of a Teapot?
Lora Aroyo, Web & Media Group 11
![Page 12: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/12.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Affordances of a Teapot?
Lora Aroyo, Web & Media Group 12
![Page 13: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/13.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Affordances of a Teapot?
Lora Aroyo, Web & Media Group 13
![Page 14: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/14.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Affordances of a Teapot?
Lora Aroyo, Web & Media Group 14
![Page 15: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/15.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Based on slide by Saul Greenberg
In graphical, screen-based UI: – designer has control over
perceived affordances • display screen • pointing device • selection buttons • keyboard
– afford touching – pointing – looking – clicking on every
pixel of the display
Affordances in Screen-based UI
Lora Aroyo, Web & Media Group 15
![Page 16: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/16.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Constraints
• Restricting interaction to reduce errors
Lora Aroyo, Web & Media Group 16
![Page 17: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/17.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Mappings
• Relationships between controls and their results • For devices, appliances
– natural mappings use constraints and correspondences in the physical world
• Controls on a stove • Controls on a car
– Radio volume » Knob goes left to right to control volume » Should also go in and out for front to rear speakers
• For computer UI design – mapping between controls and their actions on the computer
• Controls on a digital watch • Controls on a word processor program
Lora Aroyo, Web & Media Group 17
![Page 18: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/18.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Slide adapted from Saul Greenberg
Mapping Controls to Physical Outcomes
back right
front left
back left
front right
24 possibilities, requires: -visible labels -memory
arbitrary full mapping
back
front
front back
2 possibilities per side =4 total possibilities
paired
![Page 19: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/19.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Based on slide by Saul Greenberg
Transfer Effects
People transfer their expectations from familiar objects to similar new ones
– positive transfer: previous experience applies to new situation
– negative transfer: previous experience conflicts with new situation
![Page 20: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/20.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Visibility • Making it obvious which actions are available
Consistency
• Similar functions are performed in the same way • Identical terminology for identical operations
Feedback
• Send information about what is happening back to the user
Lora Aroyo, Web & Media Group 20
![Page 21: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/21.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Feedback
The Principle of Feedback: – It Should Be Obvious When a Control Has Been Used
Lora Aroyo, Web & Media Group 21
![Page 22: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/22.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Feedback and Explanations
Lora Aroyo, Web & Media Group 22
![Page 23: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/23.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Feedback and Explanations
Lora Aroyo, Web & Media Group 23
![Page 24: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/24.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Feedback and Explanations
Lora Aroyo, Web & Media Group 24
![Page 25: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/25.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Feedback and Explanations
Lora Aroyo, Web & Media Group 25
![Page 26: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/26.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Feedback and Explanations
Lora Aroyo, Web & Media Group 26
![Page 27: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/27.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Feedback and Explanations
Lora Aroyo, Web & Media Group 27
![Page 28: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/28.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Feedback and Explanations
Lora Aroyo, Web & Media Group 28
![Page 29: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/29.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Feedback and Explanations
Lora Aroyo, Web & Media Group 29
![Page 30: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/30.jpg)
Human-Computer Interaction Course 2015: Lecture 3
![Page 31: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/31.jpg)
Human-Computer Interaction Course 2015: Lecture 3
![Page 32: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/32.jpg)
Human-Computer Interaction Course 2015: Lecture 3
![Page 33: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/33.jpg)
Human-Computer Interaction Course 2015: Lecture 3
From Bad to Better
Lora Aroyo, Web & Media Group 33
![Page 34: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/34.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Feedback
Lora Aroyo, Web & Media Group 34
![Page 35: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/35.jpg)
Human-Computer Interaction Course 2015: Lecture 3
![Page 36: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/36.jpg)
Human-Computer Interaction Course 2015: Lecture 3
The Principle of Visibility: It Should Be Obvious What a Control Is Used For
Visibility (perceived affordance)
Lora Aroyo, Web & Media Group 36
![Page 37: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/37.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Consistency Uniformity in appearance, placement, and behavior
Lora Aroyo, Web & Media Group 37
![Page 38: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/38.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Structure & Consistency
Lora Aroyo, Web & Media Group 38
![Page 39: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/39.jpg)
Human-Computer Interaction Course 2015: Lecture 3
![Page 40: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/40.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Cultural Associations
• Groups of people learn idioms – red = danger, green = go
• But these differ in different places – Light switches
• America: down is off • Britain: down is on
– Faucets • America: counter-clockwise is on • Britain: counter-clockwise is off
Lora Aroyo, Web & Media Group 40
![Page 41: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/41.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Metaphors
Lora Aroyo, Web & Media Group 41
![Page 42: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/42.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Metaphors
Lora Aroyo, Web & Media Group 42
Facebook Timeline
Bookmark
![Page 43: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/43.jpg)
Human-Computer Interaction Course 2015: Lecture 3
What’s Wrong?
Lora Aroyo, Web & Media Group 43
![Page 44: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/44.jpg)
Human-Computer Interaction Course 2015: Lecture 3
What’s Wrong?
Mapping – we’d expect to go off, low, high Feedback – when lamp is on, hard to tell from switch position whether it’s in low or high mode
Lora Aroyo, Web & Media Group 44
![Page 45: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/45.jpg)
Human-Computer Interaction Course 2015: Lecture 3
What’s Wrong?
Lora Aroyo, Web & Media Group 45
![Page 46: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/46.jpg)
Human-Computer Interaction Course 2015: Lecture 3
What’s Wrong?
CONSISTENCY: Different procedure for setting different intervals of time. FEEDBACK: When timer is at a time under 15 minutes, hard to tell if it’s actually on or not (silent failure).
Lora Aroyo, Web & Media Group 46
![Page 47: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/47.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Star Trek TOS: Command Controls What’s Wrong?
Lora Aroyo, Web & Media Group 47
![Page 48: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/48.jpg)
Human-Computer Interaction Course 2015: Lecture 3
What’s Wrong?
Lora Aroyo, Web & Media Group 48
![Page 49: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/49.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Design Knowledge
• Design Principles – First Principles of Interactive Design – http://www.asktog.com/basics/firstPrinciples.html
• Design Rules – 8 Golden Rules – http://www.usask.ca/education/coursework/skaalid/theory/
interface.htm
![Page 50: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/50.jpg)
Human-Computer Interaction Course 2015: Lecture 3
DESIGN GUIDELINES & RATIONALE
Lora Aroyo, Web & Media Group 50
![Page 51: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/51.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Standards
• ISO 9241: Ergonomic requirements for office work with visual display terminals (VDTs) – defines usability as effectiveness, efficiency and satisfaction with
which users accomplish tasks • ISO 14915: Software ergonomics for multimedia user
interfaces – guidelines for design of multimedia interfaces
• ISO 13407: Human-centered design processes for interactive systems – management guidance through the development life-cycle
• ISO/CD 20282: Ease of operation of everyday products – four-part standard to ensure products can be used as consumers
expect them to
Lora Aroyo, Web & Media Group 51
![Page 52: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/52.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Guidelines (1/2)
• For optimizing the user experience – abstract guidelines (principles) applicable
during early life cycle activities – detailed guidelines (style guides) applicable
during later life cycle activities
• http://www.usability.gov/pdfs/guidelines.html
Lora Aroyo, Web & Media Group 52
![Page 53: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/53.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Guidelines (2/2)
• Accessibility • Page Layout
– Navigation, Scrolling and Paging, Headings, Titles, and Labels
• Content Organization – Text Appearance – Lists – Links – Screen–Based Controls (Widgets) – Graphics, Images, and Multimedia
• Search
Lora Aroyo, Web & Media Group 53
![Page 54: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/54.jpg)
Human-Computer Interaction Course 2015: Lecture 3
DESIGN PRINCIPLES
Lora Aroyo, Web & Media Group 54
![Page 55: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/55.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Keep it Simple
Lora Aroyo, Web & Media Group 55
![Page 56: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/56.jpg)
Human-Computer Interaction Course 2015: Lecture 3
All-in-One Doesn’t Work
Lora Aroyo, Web & Media Group 56
![Page 57: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/57.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Keep it Simple
Lora Aroyo, Web & Media Group 57
![Page 58: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/58.jpg)
Human-Computer Interaction Course 2015: Lecture 3
![Page 59: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/59.jpg)
Human-Computer Interaction Course 2015: Lecture 3
“Towards a science of simplicity”
• In his TED Talk “Towards a science of simplicity”, Harvard professor George Whitesides breaks ‘simple’ down into three characteristics:
• They are predictable • They are accessible • They serve as building blocks
http://www.ted.com/talks/george_whitesides_toward_a_science_of_simplicity
![Page 60: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/60.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Lora Aroyo, Web & Media Group 60
“Simplicity is the ultimate sophistication”
![Page 61: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/61.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Lora Aroyo, Web & Media Group 61
“Simplicity is the ultimate sophistication”
![Page 62: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/62.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Buy a drink with your cell phone
![Page 63: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/63.jpg)
Human-Computer Interaction Course 2015: Lecture 3
A Way to Achieve It
Lora Aroyo, Web & Media Group 63
![Page 64: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/64.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Lora Aroyo, Web & Media Group 64
![Page 65: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/65.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Organization of the UI in a meaningful way
Lora Aroyo, Web & Media Group 65
![Page 66: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/66.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Tolerance
Prevent user from making mistakes – Prevention – Recoverability
• Forward error recovery - system accepts the error and helps the user to accomplish their goal
• Backward error recovery – undo the effects of the previous interaction
Lora Aroyo, Web & Media Group 66
![Page 67: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/67.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Lora Aroyo, Web & Media Group 67
![Page 68: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/68.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Location on the screen
Lora Aroyo, Web & Media Group 68
Mind the typical Ads location Use typical locations
![Page 69: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/69.jpg)
Human-Computer Interaction Course 2015: Lecture 3
W3C Accessibility Guidelines
W3C Web Content Accessibility Guidelines http://www.w3.org/TR/WAI-WEBCONTENT/
1. Provide alternatives to auditory and visual content 2. Don’t rely on color alone 3. Use markup and style sheets properly 4. Clarify natural language usage
• abbreviation and foreign text 5. Create tables that transform gracefully 6. New technology pages transform gracefully
• accessible when newer technologies are not supported
Lora Aroyo, Web & Media Group 69
![Page 70: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/70.jpg)
Human-Computer Interaction Course 2015: Lecture 3
W3C Accessibility Guidelines
7. Ensure user control of time-sensitive content – pausing/stoping of animation, scrolling, etc.
8. Ensure direct accessibility of embedded UI 9. Design for device independence
– various input devices
10. Use interim solutions (for older browsers to function) 11. Use W3C technologies and guidelines 12. Provide context and orientation information 13. Provide clear navigation mechanisms 14. Ensure that documents are clear and simple
Lora Aroyo, Web & Media Group 70
![Page 71: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/71.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Style Guides
• A typical guide includes: – description of required interaction styles & user
interface controls – guidance on when and how to use the various styles
or controls – illustrations of styles and controls – screen templates
Lora Aroyo, Web & Media Group 71
![Page 72: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/72.jpg)
Human-Computer Interaction Course 2015: Lecture 3
![Page 73: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/73.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Example Style Guides
• Apple Interface Guidelines – http://developer.apple.com/DOCUMENTATION/UserExperience/
Conceptual/AppleHIGuidelines/
• Microsoft Windows XP UI Guidelines – http://www.microsoft.com/whdc/Resources/windowsxp/default.mspx
• IBM’s Common User Access – http://en.wikipedia.org/wiki/Common_User_Access
• Motif Style Guide – http://www.opengroup.org/motif/motif.data.sheet.htm
• Sun Microsystems’ Java Look and Feel – http://java.sun.com/products/jlf/ed2/book/HIGTitle.html
Lora Aroyo, Web & Media Group 73
![Page 74: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/74.jpg)
Human-Computer Interaction Course 2015: Lecture 3
08/06/15 Lora Aroyo, Intelligent Information Systems, VU University Amsterdam
![Page 75: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/75.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Design Rationale
• Design rationale is information that explains why a system is the way it is
• Benefits of design rationale – communication throughout life cycle – reuse of design knowledge across products – enforces design discipline – presents arguments for design trade-offs – organizes potentially large design space – capturing contextual information
• Process-oriented – preserves order of deliberation and decision making
• Structure-oriented – emphasizes post hoc structuring of considered design
alternatives
Lora Aroyo, Web & Media Group 75
![Page 76: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/76.jpg)
Human-Computer Interaction Course 2015: Lecture 3
![Page 77: Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam](https://reader034.vdocuments.us/reader034/viewer/2022042608/55be827bbb61ebae218b459c/html5/thumbnails/77.jpg)
Human-Computer Interaction Course 2015: Lecture 3
Read more …