IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Day 4: Mental Models, Affordances, Signifiers
Winter 2014: Intro to HCI
1Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Agenda
* Review questions from Tuesday (10 min)
* Foundations of Interaction (40 min)
* Mental models
* Affordances & signifiers
* Designing for the ‘wild’
* Sketching crits (15min)
* Class brainstorm - project topics (15min)
2Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Questions from Tuesday
* What is the dialog? Does art have a dialog, too? Artists take the viewer into account, too. Design involves art.
* Admin stuff: Slides before class? Grades online? Groups?
* UI Tools?
* UX vx. IxD?
* Other processes?
3Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James [email protected]
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
4Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Stewart Dean:
The answer, in my view, comes down to one thing - the culture of the company that you are working in.
I am a User Experience Architect (I do design but it's a title that's easier to separate from visual design). User Experience is the umbrella term for all things that relate to creating an interactive experience. I do interactive design and user interface design as part of my job, as well as user research, business analysis and a bunch of other stuff. Most of what I do fits within the rough remit of user entered design.
5
http://www.ixda.org/node/19039
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Other design processes?
6
Many.
Problem Synthesis
Design & Ideation
Evaluation of Solutions
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Right now
7
Some human-centered foundationsObservations & design ethnographyInterviews & contextual inquiryCultural probes & collage
Problem Synthesis
Design & Ideation
Evaluation of Solutions
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Agenda
* Review questions from Tuesday
* Foundations of Interaction
* Mental models
* Affordances & signifiers
* Designing for the ‘wild’
* Sketching crits
* Class brainstorm - project topics
8Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Design of Everyday Things
Donald Norman
Originally, 1988, and then many revisions
This is the 2002 edition
9Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Design of Everyday Things
• A set of design principles, grounded in psychology and applied to ‘everyday’ objects - doors, tea kettles, and personal technologies
• Conceptual (Mental) Models
• Feedback
• Constraints
• Affordances
10Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Mental Models How does <x> work?
11Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
• If it’s too cold, how do you bring it up to a comfortable temperature quickly?
• Car: max out the temperature, max out the fan
• Home:
• max out the thermostat and then turn it down when it reaches the right temp?
• just set it to the right temp and wait?
12
http://www.thecarconnection.com/image/100255248_2009-nissan-rogue-fwd-4-door-s-
temperature-controls
http://fultonstreetplumbingandheating.info/Thermostat.php
Mental Models: Thermostats
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Two Theories of Home Heat Control
Kempton, Willet. 1986. in Cognitive Science (10) p. 75-90.
13Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 14
Mental Models: Thermostats
http://fultonstreetplumbingandheating.info/Thermostat.php
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
• If it’s too cold, how do you bring it up to a comfortable temperature quickly?
• Car: max out the temperature, max out the fan
• Home:
• max out the thermostat and then turn it down when it reaches the right temp?
• just set it to the right temp and wait?
15
http://www.thecarconnection.com/image/100255248_2009-nissan-rogue-fwd-4-door-s-
temperature-controls
http://fultonstreetplumbingandheating.info/Thermostat.php
Mental Models: Thermostats
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 16
Mental Models: Thermostats
http://fultonstreetplumbingandheating.info/Thermostat.php
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
– Don Norman
“Good design is an act of communication between the designer and the user, except that all the communication has to come about by the appearance of the device itself.”
17Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Communicating with users through design
18Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Design of Everyday Things
• A set of design principles, grounded in psychology and applied to ‘everyday’ objects - doors, tea kettles, and personal technologies
• Conceptual (Mental) Models
• Feedback
• Constraints
• Affordances
19Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Feedback
Show the effects of an action
20Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Constraints
Prevent the ‘wrong’ action
21
http://lazytechguys.com/
Norman, Design of Everyday Things, p. 137
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Technology Affordances
Bill Gaver. 1991. Conference on Human Factors in Computing Systems (CHI)
22Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Technology Affordances
* properties of the world that are compatible with and relevant for people’s interactions
* suggest to the user what to do and/or how to do it
* “without significant intermediate stages involving memory or inferences”
* “complementarity of the acting organism and the acted-upon environment”
23
http://www.flickr.com/photos/psmithy/
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Design of Everyday Things
• A set of design principles, grounded in psychology and applied to ‘everyday’ objects - doors, tea kettles, and personal technologies
• Conceptual (Mental) Models
• Feedback
• Constraints
• Affordances
• Signifiers?
24Thursday, January 16, 14
\IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Signifiers: Clues in the world, clues about the world25
phot
os fr
om fl
ickr u
sers
: jure
k_du
rcza
k, n
itz, t
hejo
f
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
A little history about HCI & ideas of human cognition
• Don Norman is at UCSD
• Also in the UCSD Cog Sci department, are the folks working on distributed cognition:
• Ed Hutchins
• Jim Hollan
26Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Plans and Situated Actions Lucy Suchman, PARC, 1980s
27
flickr.com/photos/imaginary/
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
“Design for the Wild”
• Bill Buxton. 2007. From Sketching User Experiences
• How do people act “brilliantly” even in new/novel situations?
• Tools don’t just enhance action, they change our understanding of the whole situation
• They redefine the problem and alter the set of potential possibilities for action
28
Navigational tools from Buxton, p. 36
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Design for the wild?“Experiencing the social and physical context [of a new object] while still in the design cycle”
29
Photo: Adaptive Path
Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Questions about Sketching
* Do we get our sketchbooks back?
* Notes, fragments, words in sketches?
* What if sketches don’t make something new? Can we rearrange existing objects in a new way to solve problem?
* What level of detail is appropriate?
* Engineering drawings are strict, fascinated by idea of ambiguous and fluid sketching.
* Sketching is challenging for me because of drawing skills, because of confidence in ideas, etc.
30Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Sketching Share Time! (15 m)
* Group up with the people near you: 3-5 people per group
* Exchange feedback and critique at least 1 sketch from each person -- pay attention to what kinds of feedback are helpful and what isn’t helpful.
* Group members should sign the back of eachothers’ sketches. Please make sure today’s date is on there, too.
* Take notes (on the back of the sketch would be fine) about the feedback you get.
31Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
Brainstorming Topics (15 minutes)
* Good topic: How do people share photos? How could we improve photo sharing? // Bad topic: Re-design Instagram
* Good topic: How can we help people find new music? // Bad topic: Re-design Pandora
* Good topic: How can we support runners? // Bad topic: Create an application to log runs via GPS
* Good topic: How can we support goals of sustainability? // Bad topic: How can we convince people to use recycling bins.
32Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
For Tuesday
* No reading response. Please still read!
* Kolko, Jon. “Thinking about People” from Thoughts on Interaction Design. 2011. pp. 20-39
* Moggridge, Bill. “People” from Designing Interaction. 2007. pp. 664-681″
* Design Resources:
* SITRA – Ethnography Fieldguide.
* AIGA – Ethnography Primer.
* Stanford D-School Understand Mixtape
* D0: Choose a topic + list a site
* Email me or come to my office hours if you have question about this!
33Thursday, January 16, 14
IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16
References
* Kempton, Willet. 1986. “Two Theories of Home Heat Control” in Cognitive Science (10). 75-90
* Norman, Donald. 2002 [1988]. The Design of Everyday Things. Basic Books.
* Osbeck, Lisa, et. al. 2011 Science as Psychology. Cambridge Press.
* Suchman, Lucy. Plans and Situated Actions.
* Gaver, Bill. “Technology Affordances.” CHI 1991. pp. 79-84.
* Norman, Don. “Signifiers not Affordances.” Interactions. November+December 2008, pp. 18-19.
* Buxton, Bill. “Design for the Wild” in Sketching User Experiences. 2007. pp. 27-39.
34Thursday, January 16, 14