[hci] week 03 affordance & uaf
TRANSCRIPT
Lecture 3
Affordance & UAF
Human Computer Interaction / COG3103, 2015 Fall Class hours : Tue 1-3 pm/Thurs 12-1 pm 15th September
AFFORDANCES DEMYSTIFIED Textbook Chapter 20.
Lecture #3 COG_Human Computer Interaction 2
WHAT ARE AFFORDANCES?
• The Concept of Affordance
– In HCI design, where we focus on helping the user, an affordance is
something that helps a user do something.
– In interaction design, affordances are characteristics of user interface
objects and interaction design features that help users perform tasks.
Lecture #3 COG_Human Computer Interaction 3
WHAT ARE AFFORDANCES?
• Definitions of the Different Kinds of Affordance (Hartson, 2003)
– Cognitive affordances help users with their cognitive actions:
thinking, deciding, learning, remembering, and knowing about things.
– Physical affordances help users with their physical actions: clicking,
touching, pointing, gesturing, and moving things.
– Sensory affordances help users with their sensory actions: seeing,
hearing, and feeling (and tasting and smelling) things.
– Functional affordances help users do real work (and play) and get
things done, to use the system to do work.
Lecture #3 COG_Human Computer Interaction 4
A LITTLE BACKGROUND
• Who “invented” the concept of affordances?
– Norman did introduce the concept to HCI (1990)
– The concept itself goes back at least as far as James J. Gibson (1977,
1979)
– Gibson is a perceptual psychologist who took an “ecological” approach
to perception, meaning he studied the relationship between a living being
and its environment, in particular what the environment offers or affords
the animal.
– In his ecological view, affordance is reckoned with respect to the
animal/user, which is part of the affordance relationship.
Lecture #3 COG_Human Computer Interaction 5
A LITTLE BACKGROUND
• And after
– Gaver(1991) sees affordances in design as a way of focusing on strengths
and weaknesses of technologies with respect to the possibilities they
offer to people who use them. He extends the concepts by showing how
complex actions can be described in terms of groups of affordances,
sequential in time and/or nested in space, showing how affordances can
be revealed over time, with successive user actions, for example, in the
multiple actions of a hierarchical drop-down menu.
– McGrenere and Ho (2000) may think design of cognitive affordances is
acknowledged to be about design for the cognitive part of usability, ease
of use in the form of learnability for new and intermittent users
Lecture #3 COG_Human Computer Interaction 6
FOUR KINDS OF AFFORDANCES IN UX DESIGN
• Cognitive Affordance
– Cognitive affordance is a design feature that helps, aids, supports, facilitates,
or enables thinking, learning, understanding, and knowing about something.
Cognitive affordances play starring roles in interaction design, especially for
less experienced users who need help with understanding and learning.
– Symbol of an icon
– The form of a clear and concise button label
• Feed forward : semantics or meaning of user interface artifacts.
– Feedback
• helping a user know what happened after a button click.
• helps users in knowing whether the course of interaction has been successful so
far.
Lecture #3 COG_Human Computer Interaction 7
FOUR KINDS OF AFFORDANCES IN UX DESIGN
• Physical Affordance
– Physical affordance is a design feature that helps, aids, supports,
facilitates, or enables doing something physically. Adequate size and
easy-to-access location could be physical affordance features of an
interface button design enabling users to click easily on the button.
– Fitts’ law (Fitts, 1954; MacKenzie, 1992), physical disabilities and
limitations, and physical characteristics of interaction devices and
interaction techniques.
Lecture #3 COG_Human Computer Interaction 8
𝑇 = 𝑎 + 𝑏 log 2 (1 + 𝐷𝑊
)
FOUR KINDS OF AFFORDANCES IN UX DESIGN
• Sensory Affordance
– Sensory affordance is a design feature that helps, aids, supports,
facilitates, or enables user in sensing (e.g., seeing, hearing, feeling)
something. Sensory affordance is associated with the “sense-ability”
characteristics of user interface artifacts, especially when it is used to
help the user sense (e.g., see) cognitive affordances and physical
affordances.
– noticeability, discernability, legibility (in the case of text), and audibility (in
the case of sound) of features or devices associated with visual, auditory,
haptic/tactile, or other sensations.
Lecture #3 COG_Human Computer Interaction 9
FOUR KINDS OF AFFORDANCES IN UX DESIGN
• Sensory Affordance (continued)
– Why do we call it “sensory affordance” and not “perceptual affordance?”
• In the general context of psychology, the concepts of sensing and perception
are intertwined. To avoid this association, we use the term “sensing” instead
of “perception” because it excludes the component of cognition usually
associated with perception (Hochberg, 1964). This allows us to separate the
concepts of sensory and cognitive affordance into mostly non-overlapping
meanings.
Lecture #3 COG_Human Computer Interaction 10
FOUR KINDS OF AFFORDANCES IN UX DESIGN
• Functional Affordance
– Functional affordances connect physical user actions to invoke system, or
back end, functionality. Functional affordances link usability or UX to
usefulness and add purpose for physical affordance. They are about
higher level user enablement in the work domain and add meaning and
goal orientation to design discussions.
– an affordance helps or aids the user in doing something.
– We use the term functional affordance to denote this kind of higher level
user enablement in the work domain.
Lecture #3 COG_Human Computer Interaction 11
FOUR KINDS OF AFFORDANCES IN UX DESIGN
Lecture #3 COG_Human Computer Interaction 12
Cognitive affordance Design feature that helps users in knowing Something
A button label that helps users know what will happen if they click on it
Physical affordance Design feature that helps users in doing a physical action in the interface
A button that is large enough so that users can click on it accurately
Sensory affordance Design feature that helps users sense something (especially cognitive affordances and physical affordances)
A label font size large enough to be discerned
Functional affordance Design feature that helps users accomplish work (i.e., usefulness of a system function)
The internal system ability to sort a series of numbers (invoked by users clicking on the Sort button)
Table 20-1 Summary of affordance types
AFFORDANCES IN INTERACTION DESIGN
• Communication and Cultural Conventions
• Cognitive Affordance as “Information in the World”
• Affordance Roles—An Alliance in Design
Lecture #3 COG_Human Computer Interaction 13
FALSE COGNITIVE AFFORDANCES MISINFORM AND MISLEAD
Lecture #3 COG_Human Computer Interaction 14
Figure 20-1 A door with a confusing sign containing conflicting cognitive affordances.
FALSE COGNITIVE AFFORDANCES MISINFORM AND MISLEAD
Lecture #3 COG_Human Computer Interaction 15
Figure 20-2 False cognitive affordances in a form letter that looks like an affordance to cut.
FALSE COGNITIVE AFFORDANCES MISINFORM AND MISLEAD
Lecture #3 COG_Human Computer Interaction 16
Figure 20-3 False cognitive affordances in a menu bar with links that look like buttons.
FALSE COGNITIVE AFFORDANCES MISINFORM AND MISLEAD
Lecture #3 COG_Human Computer Interaction 17
Figure 20-4 Radio switch with mixed affordances.
FALSE COGNITIVE AFFORDANCES MISINFORM AND MISLEAD
Lecture #3 COG_Human Computer Interaction 18
Figure 20-5 Useless dial marks between power settings on a microwave.
USER-CREATED AFFORDANCES AS A WAKE-UP CALL TO DESIGNERS
Lecture #3 COG_Human Computer Interaction 19
Figure 20-6 Misdirection in a cognitive affordance.
USER-CREATED AFFORDANCES AS A WAKE-UP CALL TO DESIGNERS
Lecture #3 COG_Human Computer Interaction 20
Figure 20-7 Glass door with a user added cognitive affordance (arrow) indicating proper operation.
USER-CREATED AFFORDANCES AS A WAKE-UP CALL TO DESIGNERS
Lecture #3 COG_Human Computer Interaction 21
Figure 20-8 A user-created cognitive affordance explaining copier darkness settings.
USER-CREATED AFFORDANCES AS A WAKE-UP CALL TO DESIGNERS
Lecture #3 COG_Human Computer Interaction 22
Figure 20-9 A user-made automobile cup-holder artifact, used with permission from Roundel magazine, BMW Car Club of America, Inc. (Howarth, 2002).
USER-CREATED AFFORDANCES AS A WAKE-UP CALL TO DESIGNERS
Lecture #3 COG_Human Computer Interaction 23
Figure 20-10 A user-created cognitive affordance to help users know how to insert blank letterhead stationery.
EMOTIONAL AFFORDANCES
Lecture #3 COG_Human Computer Interaction 24
Figure 20-11 A user-created cognitive affordance added to a roadside sign; see arrow on post to left of the sign.
EMOTIONAL AFFORDANCES
• Affordances that help lead users to a positive emotional response.
– This means features or design elements that make an emotional
connection with the user. These will include design features that connect
to our subconscious and intuitive appreciation of fun, aesthetics, and
challenges to growth.
– This new kind of affordance plays well into the original Gibson ecological
view of affordances that are about the relationship between a living being
and its environment. This is just what we are talking about with respect to
emotional impact, especially phenomenological aspects.
– Gibson’s affordances are about values and meanings that can be
perceived directly in the environment.
Lecture #3 COG_Human Computer Interaction 25
EMOTIONAL AFFORDANCES
• Emotional Impact
– Emotional impact is the affective component of user experience that
influences user feelings. Emotional impact includes such effects as
pleasure, fun, joy of use, aesthetics, desirability, pleasure, novelty,
originality, sensations, coolness, engagement, novelty, and appeal and
can involve deeper emotional factors such as self-expression, self-
identity, a feeling of contribution to the world, and pride of ownership.
Lecture #3 COG_Human Computer Interaction 26
THE INTERACTION CYCLE AND THE USER ACTION FRAMEWORK
Textbook Chapter 21.
Lecture #3 COG_Human Computer Interaction 27
INTRODUCTION
• Interaction Cycle and User Action Framework (UAF)
– The Interaction Cycle is our adaptation of Norman’s “stages-of-action”
model (Norman, 1986) that characterizes sequences of user actions
typically occurring in interaction between a human user and almost any
kind of machine. The User Action Framework (Andre et al., 2001) is a
structured knowledge base containing information about UX design,
concepts, and issues.
– Within each part of the UAF, the knowledge base is organized by
immediate user intentions involving sensory, cognitive, or physical actions.
Lecture #3 COG_Human Computer Interaction 28
INTRODUCTION
• Need for a Theory-Based Conceptual Framework
– “Classification lies at the heart of every scientific field. Classifications
structure domains of systematic inquiry and provide concepts for
developing theories to identify anomalies and to predict future research
needs.”
Lecture #3 COG_Human Computer Interaction 29
INTRODUCTION
• The UAF is such a classification structure for UX design concepts,
issues, and principles, designed to:
– Give structure to the large number of interaction design principles, issues,
and concepts
– Offer a more standardized vocabulary for UX practitioners in discussing
interaction design situations and UX problems
– Provide the basis for more thorough and accurate UXproblem analysis
and diagnosis
– Foster precision and completeness of UX problem reports based on
essential distinguishing characteristics
Lecture #3 COG_Human Computer Interaction 30
THE INTERACTION CYCLE
Lecture #3 COG_Human Computer Interaction 31
Figure 21-1 Norman’s (1990) stages-of action model, adapted with permission.
THE INTERACTION CYCLE
• Gulfs between User and System
– The gulf of execution
– The gulf of evaluation
Lecture #3 COG_Human Computer Interaction 32
THE INTERACTION CYCLE
• From Norman’s Model to Our Interaction Cycle
– Partitioning the model
– Adding outcomes and system response
– The resulting Interaction Cycle
Lecture #3 COG_Human Computer Interaction 33
THE INTERACTION CYCLE
Lecture #3 COG_Human Computer Interaction 34
Figure 21-1 Norman’s (1990) stages-of action model, adapted with permission.
THE INTERACTION CYCLE
• Example: Creating a Business Report as a Task within the Interaction
Cycle
Lecture #3 COG_Human Computer Interaction 35
Calculate monthly profits for last quarter
Write summary, including graphs, to show company
performance
Create table of contents
Print the report
Open spreadsheet program
Call accounting department and ask for numbers for each month
Create column headers in spreadsheet for expenses and revenues in each product category
Compute profits
THE INTERACTION CYCLE
• Cooperative User-System Task Performance within the Interaction
Cycle
– Primary tasks
– Path variations in the Interaction Cycle
• Multiuser tasks (Figure 21-3)
– Secondary tasks, intention shifts, and stacking
• Secondary tasks and intention shifts
• Stacking and restoring task context
• Example of stacking due to intention shift (Figure 21-4)
Lecture #3 COG_Human Computer Interaction 36
THE INTERACTION CYCLE
Lecture #3 COG_Human Computer Interaction 37
Figure 21-3 Multiuser interaction, system events, and asynchronous external events within multiple Interaction Cycles.
THE INTERACTION CYCLE
Lecture #3 COG_Human Computer Interaction 38
Figure 21-4 Stacking and returning to Interaction Cycle task context instances.
THE USER ACTION FRAMEWORK—ADDING A STRUCTURED KNOWLEDGE BASE TO THE INTERACTION CYCLE
Lecture #3 COG_Human Computer Interaction 39
Figure 21-5 Basic kinds of user actions in the Interaction Cycle as the top-level UAF structure.
THE USER ACTION FRAMEWORK—ADDING A STRUCTURED KNOWLEDGE BASE TO THE INTERACTION CYCLE
• From the Interaction Cycle to the User Action Framework (Figure 21-5)
• Interaction Style and Device Independent
• Common Design Concepts Are Distributed
• Completeness
Lecture #3 COG_Human Computer Interaction 40
INTERACTION CYCLE AND USER ACTION FRAMEWORK CONTENT CATEGORIES
• Planning (Design Helping User Know What to Do)
– a typical sequence of planning activities :
• Identify work needs in the subject matter domain (e.g., communicate with
someone in writing)
• Establish goals in the work domain to meet these work needs (e.g., produce a
business letter)
• Divide goals into tasks performed on the computer to achieve the goals (e.g.,
type content, format the page)
• Spawn intentions to perform the steps of each task (e.g., set the left margin)
Lecture #3 COG_Human Computer Interaction 41
INTERACTION CYCLE AND USER ACTION FRAMEWORK CONTENT CATEGORIES
• Planning (Design Helping User Know What to Do)
– Planning concepts
– Planning content in the UAF
• User model and high-level understanding of system
• Goal decomposition
• Task/step structuring and sequencing, workflow
• User work context, environment
• User knowledge of system state, modalities, and especially active modes
• Supporting learning at the planning level through use and exploration
Lecture #3 COG_Human Computer Interaction 42
INTERACTION CYCLE AND USER ACTION FRAMEWORK CONTENT CATEGORIES
• Translation (Design Helping User Know How to Do Something)
– Translation concepts
– Translation content in the UAF
• Existence of a cognitive affordance to show how to do something
• Presentation (of a cognitive affordance)
• Content, meaning (of a cognitive affordance)
• Task structure, interaction control, preferences and efficiency
• Support of user learning about what actions to make on which UI objects and
how through regular and exploratory use
Lecture #3 COG_Human Computer Interaction 43
INTERACTION CYCLE AND USER ACTION FRAMEWORK CONTENT CATEGORIES
• Physical Actions (Design Helping User Do the Actions)
– Physical actions—concepts
• sensing the objects in order to manipulate them
• Manipulation
– Physical actions content in the UAF
• Existence of necessary physical affordances in user interface
• Sensing UI objects for and during manipulation
• Manipulating UI objects, making physical actions
Lecture #3 COG_Human Computer Interaction 44
INTERACTION CYCLE AND USER ACTION FRAMEWORK CONTENT CATEGORIES
• Outcomes (Internal, Invisible Effect/Result within System)
– Outcomes—concepts
– Outcomes content in the UAF
• Existence of needed functionality or feature (functional affordance)
• Existence of needed or unwanted automation
• Computational error
• Results unexpected
• Quality of functionality
Lecture #3 COG_Human Computer Interaction 45
INTERACTION CYCLE AND USER ACTION FRAMEWORK CONTENT CATEGORIES
• Assessment (Design Helping User Know if Interaction Was Successful)
– Assessment concepts
– Assessment content in the UAF
• Existence of feedback or indication of state or mode
• Presentation (of feedback)
• Content, meaning (of feedback)
Lecture #3 COG_Human Computer Interaction 46
ROLE OF AFFORDANCES WITHIN THE UAF
Lecture #3 COG_Human Computer Interaction 47
Figure 21-6 Affordances connect users with design.
ROLE OF AFFORDANCES WITHIN THE UAF
Lecture #3 COG_Human Computer Interaction 48
Figure 21-7 Interaction cycle of the UAF indicating affordance related user actions.
PRACTICAL VALUE OF UAF
• Advantage of Vocabulary to Think About and Communicate Design
Issues
• Advantage of Organized and Structured Usability Data
• Advantage of Richness in Usability Problem Analysis Schemes
• Advantage of Usability Data Reuse
Lecture #3 COG_Human Computer Interaction 49
TALES OF THINGS IoT Case Study 01
Lecture #5 IIT_UX Theory 50
Tales of Things : Web
Lecture #5 IIT_UX Theory 51
Tales of Things : Mobile
Lecture #5 IIT_UX Theory 52
Related Links
• App Site
– http://talesofthings.com/
• Book
– http://themobilestory.com/ch-19-tales-of-things/
• Conference
– http://dh2011abstracts.stanford.edu/xtf/view?docId=tei%2Fab-
158.xml%3Bquery%3D%3Bbrand%3Ddefault
• News
– http://bookleteer.com/blog/2010/08/tales-of-things/
Lecture #5 IIT_UX Theory 53
TALES OF THINGS Reviews
Lecture #5 IIT_UX Theory 54
Question 1
• Draw the interaction cycle of “Tales of Things”
– Note to what your goal of “Tales of Things” was.
– Describe the example world of “Tale of Things” use context
– Describe your gulf of execution to use “Tales of Things”
– Describe your gulf of evaluation to use “Tale of Things”
Lecture #5 IIT_UX Theory 55
THE INTERACTION CYCLE
Lecture #5 IIT_UX Theory 56
Figure 21-1 Norman’s (1990) stages-of action model, adapted with permission.
Question 2
• Translate the cycle into the UAF
– Tell your stories of experiencing ToT
– What did you plan?
– What were the steps of the translation?
– Explain your physical action to the app.
– What was the outcomes of ToT following to your physical action?
– Were the system feedbacks proper?
Lecture #5 IIT_UX Theory 57
THE INTERACTION CYCLE
Lecture #5 IIT_UX Theory 58
Figure 21-1 Norman’s (1990) stages-of action model, adapted with permission.
Question 3
• Analysis/Design your own ToT use case.
– Who are the users?
– What do they use ToT for?
– What use context will they be in to access the ToT process(or Interaction
Cycle)?
Lecture #5 IIT_UX Theory 59
THE INTERACTION CYCLE
• Example: Creating a Business Report as a Task within the Interaction
Cycle
Lecture #5 IIT_UX Theory 60
Calculate monthly profits for last quarter
Write summary, including graphs, to show company
performance
Create table of contents
Print the report
Open spreadsheet program
Call accounting department and ask for numbers for each month
Create column headers in spreadsheet for expenses and revenues in each product category
Compute profits
Homework
• Compile 3 items below in a new post on your blog.
– The link of your own ToT post.
– Your app assessment brief : 1 page
– Answers to the 3 questions
• Due until
– 11:59 pm Sunday 20th September
Lecture #5 IIT_UX Theory 61
ToT QR Code
Lecture #5 IIT_UX Theory 62
Homework
• Fill up the team-up form
– http://goo.gl/forms/hAR0aXrMtN
– Submit until 11:59 pm Sunday 20th September 2015
Lecture #3 COG_Human Computer Interaction 63