SlideShare ist ein Scribd-Unternehmen logo
1 von 54
Downloaden Sie, um offline zu lesen
Human-Computer Interaction Course 2014: Lecture 3
Lora Aroyo Web & Media Group
HCI Design
Chapters 5, 9-11, 13-14
Human-Computer Interaction Course 2014: 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
Human-Computer Interaction Course 2014: 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 3
Human-Computer Interaction Course 2014: Lecture 3
Principle 1
User’s confusions with the UI:
consistency
exploiting
prior knowledgesee what they want to see
Lora Aroyo, Web & Media Group 4
people don’t read
Human-Computer Interaction Course 2014: 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 5
Human-Computer Interaction Course 2014: 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 6
Human-Computer Interaction Course 2014: 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 7
Human-Computer Interaction Course 2014: Lecture 3
Principles from Experience:
Affordance
The Principle of Affordance:
–  It Should Be Obvious How a Control Is Used
Lora Aroyo, Web & Media Group 8
Human-Computer Interaction Course 2014: 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 9
Human-Computer Interaction Course 2014: Lecture 3
Affordances of a Teapot?
Lora Aroyo, Web & Media Group 10
Human-Computer Interaction Course 2014: Lecture 3
Based on slide by Saul Greenberg
In graphical, screen-based interfaces:
–  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 11
Human-Computer Interaction Course 2014: Lecture 3
Constraints
•  Restricting interaction to reduce errors
Lora Aroyo, Web & Media Group 12
Human-Computer Interaction Course 2014: 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 13
Human-Computer Interaction Course 2014: 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
Human-Computer Interaction Course 2014: 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
Human-Computer Interaction Course 2014: 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 16
Human-Computer Interaction Course 2014: Lecture 3
Feedback
The Principle of Feedback:
–  It Should Be Obvious When a Control Has Been Used
Lora Aroyo, Web & Media Group 17
Human-Computer Interaction Course 2014: Lecture 3
Feedback and Explanations
Lora Aroyo, Web & Media Group 18
Human-Computer Interaction Course 2014: Lecture 3
From Bad to Better
Lora Aroyo, Web & Media Group 19
Human-Computer Interaction Course 2014: Lecture 3
Feedback
Lora Aroyo, Web & Media Group 20
Human-Computer Interaction Course 2014: Lecture 3
The Principle of Visibility:
–  It Should Be Obvious What a Control Is Used For
Visibility (perceived affordance)
Lora Aroyo, Web & Media Group 21
Human-Computer Interaction Course 2014: Lecture 3
Consistency
Uniformity in appearance, placement, and behavior
Lora Aroyo, Web & Media Group 22
Human-Computer Interaction Course 2014: Lecture 3
Structure & Consistency
Lora Aroyo, Web & Media Group 23
Human-Computer Interaction Course 2014: Lecture 3
Human-Computer Interaction Course 2014: 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 25
Human-Computer Interaction Course 2014: Lecture 3
Metaphors
Lora Aroyo, Web & Media Group 26
Human-Computer Interaction Course 2014: Lecture 3
Metaphors
Lora Aroyo, Web & Media Group 27
Facebook Timeline
Bookmark
Human-Computer Interaction Course 2014: 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 28
Human-Computer Interaction Course 2014: Lecture 3
What’s Wrong?
Lora Aroyo, Web & Media Group 29
Human-Computer Interaction Course 2014: 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 30
Human-Computer Interaction Course 2014: Lecture 3
Star Trek TOS: Command Controls
Lora Aroyo, Web & Media Group 31
Human-Computer Interaction Course 2014: 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
Human-Computer Interaction Course 2014: Lecture 3
DESIGN GUIDELINES &
RATIONALE
Lora Aroyo, Web & Media Group 33
Human-Computer Interaction Course 2014: 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 34
Human-Computer Interaction Course 2014: 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 35
Human-Computer Interaction Course 2014: 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 36
Human-Computer Interaction Course 2014: Lecture 3
DESIGN PRINCIPLES
Lora Aroyo, Web & Media Group 37
Human-Computer Interaction Course 2014: Lecture 3
Keep it Simple
Lora Aroyo, Web & Media Group 38
Human-Computer Interaction Course 2014: Lecture 3
Lora Aroyo, Web & Media Group 39
Human-Computer Interaction Course 2014: Lecture 3
All-in-One Doesn’t Work
Lora Aroyo, Web & Media Group 40
Human-Computer Interaction Course 2014: Lecture 3
Buy a drink with your cell phone
Human-Computer Interaction Course 2014: Lecture 3
A Way to Achieve It
Lora Aroyo, Web & Media Group 42
Human-Computer Interaction Course 2014: Lecture 3
Lora Aroyo, Web & Media Group 43
Human-Computer Interaction Course 2014: Lecture 3
Organization of the
UI in a
meaningful way
Lora Aroyo, Web & Media Group 44
Human-Computer Interaction Course 2014: 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 45
Human-Computer Interaction Course 2014: Lecture 3
Lora Aroyo, Web & Media Group 46
Human-Computer Interaction Course 2014: Lecture 3
Location on the screen
Lora Aroyo, Web & Media Group 47
Mind the typical Ads location
Use typical locations
Human-Computer Interaction Course 2014: 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 48
Human-Computer Interaction Course 2014: 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 49
Human-Computer Interaction Course 2014: 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 50
Human-Computer Interaction Course 2014: 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 51
Human-Computer Interaction Course 2014: Lecture 3
09/06/14Lora Aroyo, Intelligent Information Systems, VU University Amsterdam
Human-Computer Interaction Course 2014: 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 53
Human-Computer Interaction Course 2014: Lecture 3
Read more …

Weitere ähnliche Inhalte

Was ist angesagt?

HCI 3e - Ch 9: Evaluation techniques
HCI 3e - Ch 9:  Evaluation techniquesHCI 3e - Ch 9:  Evaluation techniques
HCI 3e - Ch 9: Evaluation techniquesAlan Dix
 
What is Human Computer Interraction
What is Human Computer InterractionWhat is Human Computer Interraction
What is Human Computer Interractionpraeeth palliyaguru
 
HCI - Chapter 4
HCI - Chapter 4HCI - Chapter 4
HCI - Chapter 4Alan Dix
 
HCI - Chapter 2
HCI - Chapter 2HCI - Chapter 2
HCI - Chapter 2Alan Dix
 
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirementsHCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirementsAlan Dix
 
HCI 3e - Ch 3: The interaction
HCI 3e - Ch 3:  The interactionHCI 3e - Ch 3:  The interaction
HCI 3e - Ch 3: The interactionAlan Dix
 
HCI 3e - Ch 6: HCI in the software process
HCI 3e - Ch 6:  HCI in the software processHCI 3e - Ch 6:  HCI in the software process
HCI 3e - Ch 6: HCI in the software processAlan Dix
 
HCI 3e - Ch 10: Universal design
HCI 3e - Ch 10:  Universal designHCI 3e - Ch 10:  Universal design
HCI 3e - Ch 10: Universal designAlan Dix
 
HCI 3e - Ch 16: Dialogue notations and design
HCI 3e - Ch 16:  Dialogue notations and designHCI 3e - Ch 16:  Dialogue notations and design
HCI 3e - Ch 16: Dialogue notations and designAlan Dix
 
Human computer interaction 3 4(revised)
Human computer interaction 3 4(revised)Human computer interaction 3 4(revised)
Human computer interaction 3 4(revised)emaan waseem
 
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface DesignAn Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface DesignJochen Wolters
 
HCI 3e - Ch 7: Design rules
HCI 3e - Ch 7:  Design rulesHCI 3e - Ch 7:  Design rules
HCI 3e - Ch 7: Design rulesAlan Dix
 
HCI 3e - Ch 8: Implementation support
HCI 3e - Ch 8:  Implementation supportHCI 3e - Ch 8:  Implementation support
HCI 3e - Ch 8: Implementation supportAlan Dix
 
Lecture 2: Human-Computer Interaction: Conceptual Design (2014)
Lecture 2: Human-Computer Interaction: Conceptual Design (2014)Lecture 2: Human-Computer Interaction: Conceptual Design (2014)
Lecture 2: Human-Computer Interaction: Conceptual Design (2014)Lora Aroyo
 
HCI 3e - Ch 20: Ubiquitous computing and augmented realities
HCI 3e - Ch 20:  Ubiquitous computing and augmented realitiesHCI 3e - Ch 20:  Ubiquitous computing and augmented realities
HCI 3e - Ch 20: Ubiquitous computing and augmented realitiesAlan Dix
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction DesignGraeme Smith
 

Was ist angesagt? (20)

HCI 3e - Ch 9: Evaluation techniques
HCI 3e - Ch 9:  Evaluation techniquesHCI 3e - Ch 9:  Evaluation techniques
HCI 3e - Ch 9: Evaluation techniques
 
Hci activity#3
Hci activity#3Hci activity#3
Hci activity#3
 
What is Human Computer Interraction
What is Human Computer InterractionWhat is Human Computer Interraction
What is Human Computer Interraction
 
Cognitive Walkthrough
Cognitive WalkthroughCognitive Walkthrough
Cognitive Walkthrough
 
HCI - Chapter 4
HCI - Chapter 4HCI - Chapter 4
HCI - Chapter 4
 
HCI - Chapter 2
HCI - Chapter 2HCI - Chapter 2
HCI - Chapter 2
 
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirementsHCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
 
HCI 3e - Ch 3: The interaction
HCI 3e - Ch 3:  The interactionHCI 3e - Ch 3:  The interaction
HCI 3e - Ch 3: The interaction
 
HCI 3e - Ch 6: HCI in the software process
HCI 3e - Ch 6:  HCI in the software processHCI 3e - Ch 6:  HCI in the software process
HCI 3e - Ch 6: HCI in the software process
 
HCI 3e - Ch 10: Universal design
HCI 3e - Ch 10:  Universal designHCI 3e - Ch 10:  Universal design
HCI 3e - Ch 10: Universal design
 
HCI Basics
HCI BasicsHCI Basics
HCI Basics
 
HCI 3e - Ch 16: Dialogue notations and design
HCI 3e - Ch 16:  Dialogue notations and designHCI 3e - Ch 16:  Dialogue notations and design
HCI 3e - Ch 16: Dialogue notations and design
 
Human computer interaction 3 4(revised)
Human computer interaction 3 4(revised)Human computer interaction 3 4(revised)
Human computer interaction 3 4(revised)
 
Chapter five HCI
Chapter five HCIChapter five HCI
Chapter five HCI
 
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface DesignAn Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
 
HCI 3e - Ch 7: Design rules
HCI 3e - Ch 7:  Design rulesHCI 3e - Ch 7:  Design rules
HCI 3e - Ch 7: Design rules
 
HCI 3e - Ch 8: Implementation support
HCI 3e - Ch 8:  Implementation supportHCI 3e - Ch 8:  Implementation support
HCI 3e - Ch 8: Implementation support
 
Lecture 2: Human-Computer Interaction: Conceptual Design (2014)
Lecture 2: Human-Computer Interaction: Conceptual Design (2014)Lecture 2: Human-Computer Interaction: Conceptual Design (2014)
Lecture 2: Human-Computer Interaction: Conceptual Design (2014)
 
HCI 3e - Ch 20: Ubiquitous computing and augmented realities
HCI 3e - Ch 20:  Ubiquitous computing and augmented realitiesHCI 3e - Ch 20:  Ubiquitous computing and augmented realities
HCI 3e - Ch 20: Ubiquitous computing and augmented realities
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 

Ähnlich wie Lecture 3: Human-Computer Interaction: HCI Design (2014)

Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 3: Human-Computer Interaction Course (2015) @VU University AmsterdamLecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 3: Human-Computer Interaction Course (2015) @VU University AmsterdamLora Aroyo
 
Lecture 4: Human-Computer Interaction: Prototyping (2014)
Lecture 4: Human-Computer Interaction: Prototyping (2014)Lecture 4: Human-Computer Interaction: Prototyping (2014)
Lecture 4: Human-Computer Interaction: Prototyping (2014)Lora Aroyo
 
Lecture 5: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 5: Human-Computer Interaction Course (2015) @VU University AmsterdamLecture 5: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 5: Human-Computer Interaction Course (2015) @VU University AmsterdamLora Aroyo
 
Lecture 4: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 4: Human-Computer Interaction Course (2015) @VU University AmsterdamLecture 4: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 4: Human-Computer Interaction Course (2015) @VU University AmsterdamLora Aroyo
 
Lecture 1: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 1: Human-Computer Interaction Course (2015) @VU University AmsterdamLecture 1: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 1: Human-Computer Interaction Course (2015) @VU University AmsterdamLora Aroyo
 
Lecture 2: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 2: Human-Computer Interaction Course (2015) @VU University AmsterdamLecture 2: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 2: Human-Computer Interaction Course (2015) @VU University AmsterdamLora Aroyo
 
What is IA/UX
What is IA/UXWhat is IA/UX
What is IA/UXPaul Kahn
 
Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...
Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...
Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...Plain Talk 2015
 
Learning From Users in their Natural Habitat -
Learning From Users in their Natural Habitat - Learning From Users in their Natural Habitat -
Learning From Users in their Natural Habitat - UXPA International
 
Learnersourcing: Improving Learning with Collective Learner Activity
Learnersourcing: Improving Learning with Collective Learner ActivityLearnersourcing: Improving Learning with Collective Learner Activity
Learnersourcing: Improving Learning with Collective Learner ActivityJuho Kim
 
Mugur Mocofan - Mobile learning study cases 2015
Mugur Mocofan - Mobile learning study cases 2015Mugur Mocofan - Mobile learning study cases 2015
Mugur Mocofan - Mobile learning study cases 2015Diana Andone
 
ResearchOps Berlin Meetup #2 - UX Maturity - How to Grow User Research in you...
ResearchOps Berlin Meetup #2 - UX Maturity - How to Grow User Research in you...ResearchOps Berlin Meetup #2 - UX Maturity - How to Grow User Research in you...
ResearchOps Berlin Meetup #2 - UX Maturity - How to Grow User Research in you...ResearchOps Meetup Berlin
 
Generating Mobile Application Onboarding Insights Through Minimalist Instruction
Generating Mobile Application Onboarding Insights Through Minimalist InstructionGenerating Mobile Application Onboarding Insights Through Minimalist Instruction
Generating Mobile Application Onboarding Insights Through Minimalist Instructioncolin gray
 
Designing and Evaluating a Contextual Mobile Application to Support Situated ...
Designing and Evaluating a Contextual Mobile Application to Support Situated ...Designing and Evaluating a Contextual Mobile Application to Support Situated ...
Designing and Evaluating a Contextual Mobile Application to Support Situated ...HCI Lab
 
Making the Switch From Wimba to Blackboard Collaborate
Making the Switch From Wimba to Blackboard CollaborateMaking the Switch From Wimba to Blackboard Collaborate
Making the Switch From Wimba to Blackboard CollaborateTerry Patterson
 
Usability session @ SEI Universidade do Minho
Usability session @ SEI Universidade do MinhoUsability session @ SEI Universidade do Minho
Usability session @ SEI Universidade do MinhoRuben Goncalves
 
Progress Report On Android Privacy Tools
Progress Report On Android Privacy ToolsProgress Report On Android Privacy Tools
Progress Report On Android Privacy ToolsJulie May
 
Requirements Engineering for the Humanities
Requirements Engineering for the HumanitiesRequirements Engineering for the Humanities
Requirements Engineering for the HumanitiesShawn Day
 

Ähnlich wie Lecture 3: Human-Computer Interaction: HCI Design (2014) (20)

Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 3: Human-Computer Interaction Course (2015) @VU University AmsterdamLecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam
 
Lecture 4: Human-Computer Interaction: Prototyping (2014)
Lecture 4: Human-Computer Interaction: Prototyping (2014)Lecture 4: Human-Computer Interaction: Prototyping (2014)
Lecture 4: Human-Computer Interaction: Prototyping (2014)
 
Lecture 5: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 5: Human-Computer Interaction Course (2015) @VU University AmsterdamLecture 5: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 5: Human-Computer Interaction Course (2015) @VU University Amsterdam
 
Lecture 4: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 4: Human-Computer Interaction Course (2015) @VU University AmsterdamLecture 4: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 4: Human-Computer Interaction Course (2015) @VU University Amsterdam
 
Lecture 1: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 1: Human-Computer Interaction Course (2015) @VU University AmsterdamLecture 1: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 1: Human-Computer Interaction Course (2015) @VU University Amsterdam
 
Lecture 2: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 2: Human-Computer Interaction Course (2015) @VU University AmsterdamLecture 2: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 2: Human-Computer Interaction Course (2015) @VU University Amsterdam
 
What is IA/UX
What is IA/UXWhat is IA/UX
What is IA/UX
 
Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...
Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...
Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...
 
Learning From Users in their Natural Habitat -
Learning From Users in their Natural Habitat - Learning From Users in their Natural Habitat -
Learning From Users in their Natural Habitat -
 
Learnersourcing: Improving Learning with Collective Learner Activity
Learnersourcing: Improving Learning with Collective Learner ActivityLearnersourcing: Improving Learning with Collective Learner Activity
Learnersourcing: Improving Learning with Collective Learner Activity
 
Mugur Mocofan - Mobile learning study cases 2015
Mugur Mocofan - Mobile learning study cases 2015Mugur Mocofan - Mobile learning study cases 2015
Mugur Mocofan - Mobile learning study cases 2015
 
ESWC 2014 Tutorial Part 4
ESWC 2014 Tutorial Part 4ESWC 2014 Tutorial Part 4
ESWC 2014 Tutorial Part 4
 
ResearchOps Berlin Meetup #2 - UX Maturity - How to Grow User Research in you...
ResearchOps Berlin Meetup #2 - UX Maturity - How to Grow User Research in you...ResearchOps Berlin Meetup #2 - UX Maturity - How to Grow User Research in you...
ResearchOps Berlin Meetup #2 - UX Maturity - How to Grow User Research in you...
 
Generating Mobile Application Onboarding Insights Through Minimalist Instruction
Generating Mobile Application Onboarding Insights Through Minimalist InstructionGenerating Mobile Application Onboarding Insights Through Minimalist Instruction
Generating Mobile Application Onboarding Insights Through Minimalist Instruction
 
Designing and Evaluating a Contextual Mobile Application to Support Situated ...
Designing and Evaluating a Contextual Mobile Application to Support Situated ...Designing and Evaluating a Contextual Mobile Application to Support Situated ...
Designing and Evaluating a Contextual Mobile Application to Support Situated ...
 
Crowdsourcing Software Evaluation
Crowdsourcing Software EvaluationCrowdsourcing Software Evaluation
Crowdsourcing Software Evaluation
 
Making the Switch From Wimba to Blackboard Collaborate
Making the Switch From Wimba to Blackboard CollaborateMaking the Switch From Wimba to Blackboard Collaborate
Making the Switch From Wimba to Blackboard Collaborate
 
Usability session @ SEI Universidade do Minho
Usability session @ SEI Universidade do MinhoUsability session @ SEI Universidade do Minho
Usability session @ SEI Universidade do Minho
 
Progress Report On Android Privacy Tools
Progress Report On Android Privacy ToolsProgress Report On Android Privacy Tools
Progress Report On Android Privacy Tools
 
Requirements Engineering for the Humanities
Requirements Engineering for the HumanitiesRequirements Engineering for the Humanities
Requirements Engineering for the Humanities
 

Mehr von Lora Aroyo

NeurIPS2023 Keynote: The Many Faces of Responsible AI.pdf
NeurIPS2023 Keynote: The Many Faces of Responsible AI.pdfNeurIPS2023 Keynote: The Many Faces of Responsible AI.pdf
NeurIPS2023 Keynote: The Many Faces of Responsible AI.pdfLora Aroyo
 
CATS4ML Data Challenge: Crowdsourcing Adverse Test Sets for Machine Learning
CATS4ML Data Challenge: Crowdsourcing Adverse Test Sets for Machine LearningCATS4ML Data Challenge: Crowdsourcing Adverse Test Sets for Machine Learning
CATS4ML Data Challenge: Crowdsourcing Adverse Test Sets for Machine LearningLora Aroyo
 
Harnessing Human Semantics at Scale (updated)
Harnessing Human Semantics at Scale (updated)Harnessing Human Semantics at Scale (updated)
Harnessing Human Semantics at Scale (updated)Lora Aroyo
 
Data excellence: Better data for better AI
Data excellence: Better data for better AIData excellence: Better data for better AI
Data excellence: Better data for better AILora Aroyo
 
CHIP Demonstrator presentation @ CATCH Symposium
CHIP Demonstrator presentation @ CATCH SymposiumCHIP Demonstrator presentation @ CATCH Symposium
CHIP Demonstrator presentation @ CATCH SymposiumLora Aroyo
 
Semantic Web Challenge: CHIP Demonstrator
Semantic Web Challenge: CHIP DemonstratorSemantic Web Challenge: CHIP Demonstrator
Semantic Web Challenge: CHIP DemonstratorLora Aroyo
 
The Rijksmuseum Collection as Linked Data
The Rijksmuseum Collection as Linked DataThe Rijksmuseum Collection as Linked Data
The Rijksmuseum Collection as Linked DataLora Aroyo
 
Keynote at International Conference of Art Libraries 2018 @Rijksmuseum
Keynote at International Conference of Art Libraries 2018 @RijksmuseumKeynote at International Conference of Art Libraries 2018 @Rijksmuseum
Keynote at International Conference of Art Libraries 2018 @RijksmuseumLora Aroyo
 
FAIRview: Responsible Video Summarization @NYCML'18
FAIRview: Responsible Video Summarization @NYCML'18FAIRview: Responsible Video Summarization @NYCML'18
FAIRview: Responsible Video Summarization @NYCML'18Lora Aroyo
 
Understanding bias in video news & news filtering algorithms
Understanding bias in video news & news filtering algorithmsUnderstanding bias in video news & news filtering algorithms
Understanding bias in video news & news filtering algorithmsLora Aroyo
 
StorySourcing: Telling Stories with Humans & Machines
StorySourcing: Telling Stories with Humans & MachinesStorySourcing: Telling Stories with Humans & Machines
StorySourcing: Telling Stories with Humans & MachinesLora Aroyo
 
Data Science with Humans in the Loop
Data Science with Humans in the LoopData Science with Humans in the Loop
Data Science with Humans in the LoopLora Aroyo
 
Digital Humanities Benelux 2017: Keynote Lora Aroyo
Digital Humanities Benelux 2017: Keynote Lora AroyoDigital Humanities Benelux 2017: Keynote Lora Aroyo
Digital Humanities Benelux 2017: Keynote Lora AroyoLora Aroyo
 
DH Benelux 2017 Panel: A Pragmatic Approach to Understanding and Utilising Ev...
DH Benelux 2017 Panel: A Pragmatic Approach to Understanding and Utilising Ev...DH Benelux 2017 Panel: A Pragmatic Approach to Understanding and Utilising Ev...
DH Benelux 2017 Panel: A Pragmatic Approach to Understanding and Utilising Ev...Lora Aroyo
 
Crowdsourcing ambiguity aware ground truth - collective intelligence 2017
Crowdsourcing ambiguity aware ground truth - collective intelligence 2017Crowdsourcing ambiguity aware ground truth - collective intelligence 2017
Crowdsourcing ambiguity aware ground truth - collective intelligence 2017Lora Aroyo
 
My ESWC 2017 keynote: Disrupting the Semantic Comfort Zone
My ESWC 2017 keynote: Disrupting the Semantic Comfort ZoneMy ESWC 2017 keynote: Disrupting the Semantic Comfort Zone
My ESWC 2017 keynote: Disrupting the Semantic Comfort ZoneLora Aroyo
 
Data Science with Human in the Loop @Faculty of Science #Leiden University
Data Science with Human in the Loop @Faculty of Science #Leiden UniversityData Science with Human in the Loop @Faculty of Science #Leiden University
Data Science with Human in the Loop @Faculty of Science #Leiden UniversityLora Aroyo
 
SXSW2017 @NewDutchMedia Talk: Exploration is the New Search
SXSW2017 @NewDutchMedia Talk: Exploration is the New SearchSXSW2017 @NewDutchMedia Talk: Exploration is the New Search
SXSW2017 @NewDutchMedia Talk: Exploration is the New SearchLora Aroyo
 
Europeana GA 2016: Harnessing Crowds, Niches & Professionals in the Digital Age
Europeana GA 2016: Harnessing Crowds, Niches & Professionals  in the Digital AgeEuropeana GA 2016: Harnessing Crowds, Niches & Professionals  in the Digital Age
Europeana GA 2016: Harnessing Crowds, Niches & Professionals in the Digital AgeLora Aroyo
 
"Video Killed the Radio Star": From MTV to Snapchat
"Video Killed the Radio Star": From MTV to Snapchat"Video Killed the Radio Star": From MTV to Snapchat
"Video Killed the Radio Star": From MTV to SnapchatLora Aroyo
 

Mehr von Lora Aroyo (20)

NeurIPS2023 Keynote: The Many Faces of Responsible AI.pdf
NeurIPS2023 Keynote: The Many Faces of Responsible AI.pdfNeurIPS2023 Keynote: The Many Faces of Responsible AI.pdf
NeurIPS2023 Keynote: The Many Faces of Responsible AI.pdf
 
CATS4ML Data Challenge: Crowdsourcing Adverse Test Sets for Machine Learning
CATS4ML Data Challenge: Crowdsourcing Adverse Test Sets for Machine LearningCATS4ML Data Challenge: Crowdsourcing Adverse Test Sets for Machine Learning
CATS4ML Data Challenge: Crowdsourcing Adverse Test Sets for Machine Learning
 
Harnessing Human Semantics at Scale (updated)
Harnessing Human Semantics at Scale (updated)Harnessing Human Semantics at Scale (updated)
Harnessing Human Semantics at Scale (updated)
 
Data excellence: Better data for better AI
Data excellence: Better data for better AIData excellence: Better data for better AI
Data excellence: Better data for better AI
 
CHIP Demonstrator presentation @ CATCH Symposium
CHIP Demonstrator presentation @ CATCH SymposiumCHIP Demonstrator presentation @ CATCH Symposium
CHIP Demonstrator presentation @ CATCH Symposium
 
Semantic Web Challenge: CHIP Demonstrator
Semantic Web Challenge: CHIP DemonstratorSemantic Web Challenge: CHIP Demonstrator
Semantic Web Challenge: CHIP Demonstrator
 
The Rijksmuseum Collection as Linked Data
The Rijksmuseum Collection as Linked DataThe Rijksmuseum Collection as Linked Data
The Rijksmuseum Collection as Linked Data
 
Keynote at International Conference of Art Libraries 2018 @Rijksmuseum
Keynote at International Conference of Art Libraries 2018 @RijksmuseumKeynote at International Conference of Art Libraries 2018 @Rijksmuseum
Keynote at International Conference of Art Libraries 2018 @Rijksmuseum
 
FAIRview: Responsible Video Summarization @NYCML'18
FAIRview: Responsible Video Summarization @NYCML'18FAIRview: Responsible Video Summarization @NYCML'18
FAIRview: Responsible Video Summarization @NYCML'18
 
Understanding bias in video news & news filtering algorithms
Understanding bias in video news & news filtering algorithmsUnderstanding bias in video news & news filtering algorithms
Understanding bias in video news & news filtering algorithms
 
StorySourcing: Telling Stories with Humans & Machines
StorySourcing: Telling Stories with Humans & MachinesStorySourcing: Telling Stories with Humans & Machines
StorySourcing: Telling Stories with Humans & Machines
 
Data Science with Humans in the Loop
Data Science with Humans in the LoopData Science with Humans in the Loop
Data Science with Humans in the Loop
 
Digital Humanities Benelux 2017: Keynote Lora Aroyo
Digital Humanities Benelux 2017: Keynote Lora AroyoDigital Humanities Benelux 2017: Keynote Lora Aroyo
Digital Humanities Benelux 2017: Keynote Lora Aroyo
 
DH Benelux 2017 Panel: A Pragmatic Approach to Understanding and Utilising Ev...
DH Benelux 2017 Panel: A Pragmatic Approach to Understanding and Utilising Ev...DH Benelux 2017 Panel: A Pragmatic Approach to Understanding and Utilising Ev...
DH Benelux 2017 Panel: A Pragmatic Approach to Understanding and Utilising Ev...
 
Crowdsourcing ambiguity aware ground truth - collective intelligence 2017
Crowdsourcing ambiguity aware ground truth - collective intelligence 2017Crowdsourcing ambiguity aware ground truth - collective intelligence 2017
Crowdsourcing ambiguity aware ground truth - collective intelligence 2017
 
My ESWC 2017 keynote: Disrupting the Semantic Comfort Zone
My ESWC 2017 keynote: Disrupting the Semantic Comfort ZoneMy ESWC 2017 keynote: Disrupting the Semantic Comfort Zone
My ESWC 2017 keynote: Disrupting the Semantic Comfort Zone
 
Data Science with Human in the Loop @Faculty of Science #Leiden University
Data Science with Human in the Loop @Faculty of Science #Leiden UniversityData Science with Human in the Loop @Faculty of Science #Leiden University
Data Science with Human in the Loop @Faculty of Science #Leiden University
 
SXSW2017 @NewDutchMedia Talk: Exploration is the New Search
SXSW2017 @NewDutchMedia Talk: Exploration is the New SearchSXSW2017 @NewDutchMedia Talk: Exploration is the New Search
SXSW2017 @NewDutchMedia Talk: Exploration is the New Search
 
Europeana GA 2016: Harnessing Crowds, Niches & Professionals in the Digital Age
Europeana GA 2016: Harnessing Crowds, Niches & Professionals  in the Digital AgeEuropeana GA 2016: Harnessing Crowds, Niches & Professionals  in the Digital Age
Europeana GA 2016: Harnessing Crowds, Niches & Professionals in the Digital Age
 
"Video Killed the Radio Star": From MTV to Snapchat
"Video Killed the Radio Star": From MTV to Snapchat"Video Killed the Radio Star": From MTV to Snapchat
"Video Killed the Radio Star": From MTV to Snapchat
 

Kürzlich hochgeladen

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 

Kürzlich hochgeladen (20)

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 

Lecture 3: Human-Computer Interaction: HCI Design (2014)

  • 1. Human-Computer Interaction Course 2014: Lecture 3 Lora Aroyo Web & Media Group HCI Design Chapters 5, 9-11, 13-14
  • 2. Human-Computer Interaction Course 2014: 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
  • 3. Human-Computer Interaction Course 2014: 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 3
  • 4. Human-Computer Interaction Course 2014: Lecture 3 Principle 1 User’s confusions with the UI: consistency exploiting prior knowledgesee what they want to see Lora Aroyo, Web & Media Group 4 people don’t read
  • 5. Human-Computer Interaction Course 2014: 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 5
  • 6. Human-Computer Interaction Course 2014: 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 6
  • 7. Human-Computer Interaction Course 2014: 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 7
  • 8. Human-Computer Interaction Course 2014: Lecture 3 Principles from Experience: Affordance The Principle of Affordance: –  It Should Be Obvious How a Control Is Used Lora Aroyo, Web & Media Group 8
  • 9. Human-Computer Interaction Course 2014: 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 9
  • 10. Human-Computer Interaction Course 2014: Lecture 3 Affordances of a Teapot? Lora Aroyo, Web & Media Group 10
  • 11. Human-Computer Interaction Course 2014: Lecture 3 Based on slide by Saul Greenberg In graphical, screen-based interfaces: –  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 11
  • 12. Human-Computer Interaction Course 2014: Lecture 3 Constraints •  Restricting interaction to reduce errors Lora Aroyo, Web & Media Group 12
  • 13. Human-Computer Interaction Course 2014: 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 13
  • 14. Human-Computer Interaction Course 2014: 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
  • 15. Human-Computer Interaction Course 2014: 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
  • 16. Human-Computer Interaction Course 2014: 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 16
  • 17. Human-Computer Interaction Course 2014: Lecture 3 Feedback The Principle of Feedback: –  It Should Be Obvious When a Control Has Been Used Lora Aroyo, Web & Media Group 17
  • 18. Human-Computer Interaction Course 2014: Lecture 3 Feedback and Explanations Lora Aroyo, Web & Media Group 18
  • 19. Human-Computer Interaction Course 2014: Lecture 3 From Bad to Better Lora Aroyo, Web & Media Group 19
  • 20. Human-Computer Interaction Course 2014: Lecture 3 Feedback Lora Aroyo, Web & Media Group 20
  • 21. Human-Computer Interaction Course 2014: Lecture 3 The Principle of Visibility: –  It Should Be Obvious What a Control Is Used For Visibility (perceived affordance) Lora Aroyo, Web & Media Group 21
  • 22. Human-Computer Interaction Course 2014: Lecture 3 Consistency Uniformity in appearance, placement, and behavior Lora Aroyo, Web & Media Group 22
  • 23. Human-Computer Interaction Course 2014: Lecture 3 Structure & Consistency Lora Aroyo, Web & Media Group 23
  • 25. Human-Computer Interaction Course 2014: 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 25
  • 26. Human-Computer Interaction Course 2014: Lecture 3 Metaphors Lora Aroyo, Web & Media Group 26
  • 27. Human-Computer Interaction Course 2014: Lecture 3 Metaphors Lora Aroyo, Web & Media Group 27 Facebook Timeline Bookmark
  • 28. Human-Computer Interaction Course 2014: 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 28
  • 29. Human-Computer Interaction Course 2014: Lecture 3 What’s Wrong? Lora Aroyo, Web & Media Group 29
  • 30. Human-Computer Interaction Course 2014: 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 30
  • 31. Human-Computer Interaction Course 2014: Lecture 3 Star Trek TOS: Command Controls Lora Aroyo, Web & Media Group 31
  • 32. Human-Computer Interaction Course 2014: 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
  • 33. Human-Computer Interaction Course 2014: Lecture 3 DESIGN GUIDELINES & RATIONALE Lora Aroyo, Web & Media Group 33
  • 34. Human-Computer Interaction Course 2014: 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 34
  • 35. Human-Computer Interaction Course 2014: 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 35
  • 36. Human-Computer Interaction Course 2014: 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 36
  • 37. Human-Computer Interaction Course 2014: Lecture 3 DESIGN PRINCIPLES Lora Aroyo, Web & Media Group 37
  • 38. Human-Computer Interaction Course 2014: Lecture 3 Keep it Simple Lora Aroyo, Web & Media Group 38
  • 39. Human-Computer Interaction Course 2014: Lecture 3 Lora Aroyo, Web & Media Group 39
  • 40. Human-Computer Interaction Course 2014: Lecture 3 All-in-One Doesn’t Work Lora Aroyo, Web & Media Group 40
  • 41. Human-Computer Interaction Course 2014: Lecture 3 Buy a drink with your cell phone
  • 42. Human-Computer Interaction Course 2014: Lecture 3 A Way to Achieve It Lora Aroyo, Web & Media Group 42
  • 43. Human-Computer Interaction Course 2014: Lecture 3 Lora Aroyo, Web & Media Group 43
  • 44. Human-Computer Interaction Course 2014: Lecture 3 Organization of the UI in a meaningful way Lora Aroyo, Web & Media Group 44
  • 45. Human-Computer Interaction Course 2014: 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 45
  • 46. Human-Computer Interaction Course 2014: Lecture 3 Lora Aroyo, Web & Media Group 46
  • 47. Human-Computer Interaction Course 2014: Lecture 3 Location on the screen Lora Aroyo, Web & Media Group 47 Mind the typical Ads location Use typical locations
  • 48. Human-Computer Interaction Course 2014: 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 48
  • 49. Human-Computer Interaction Course 2014: 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 49
  • 50. Human-Computer Interaction Course 2014: 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 50
  • 51. Human-Computer Interaction Course 2014: 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 51
  • 52. Human-Computer Interaction Course 2014: Lecture 3 09/06/14Lora Aroyo, Intelligent Information Systems, VU University Amsterdam
  • 53. Human-Computer Interaction Course 2014: 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 53
  • 54. Human-Computer Interaction Course 2014: Lecture 3 Read more …