Day 4: Mental Models, Affordances, Signifiers Winter 2014: Intro to HCI

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

1

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) IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

2

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? IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

3

The Elements of User Experience

Jesse James Garrett [email protected]

A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered 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 beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements.

Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding

Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding

Interface Design Navigation Design

Information Design Interaction Information Design Architecture

Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality

Functional Content Specifications Requirements

Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site

Information Architecture: structural design of the information space to facilitate intuitive access to content Content Requirements: definition of content elements required in the site in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site

User Needs Site Objectives Abstract

Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components

Visual Design

Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel")

task-oriented

Completion

Concrete

time

Web as software interface

30 March 2000

Conception

information-oriented

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 a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. © 2000 Jesse James Garrett

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

http://www.jjg.net/ia/

4

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.

http://www.ixda.org/node/19039

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

5

Problem Synthesis

Evaluation of Solutions

Other design processes? IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

Design & Ideation

Many. 6

Problem Synthesis

Evaluation of Solutions

Right now IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

Design & Ideation

Some human-centered foundations

Observations & design ethnography Interviews & contextual inquiry Cultural probes & collage

7

Agenda * Review questions from Tuesday * Foundations of Interaction * Mental models * Affordances & signifiers * Designing for the ‘wild’ * Sketching crits * Class brainstorm - project topics IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

8

Design of Everyday Things Donald Norman Originally, 1988, and then many revisions This is the 2002 edition

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

9

Design of Everyday Things •

A set of design principles, grounded in psychology and applied to ‘everyday’ objects doors, tea kettles, and personal technologies

• • • •

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

Conceptual (Mental) Models Feedback Constraints Affordances

10

Mental Models IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

How does work? 11

Mental Models: Thermostats •

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?

http://www.thecarconnection.com/image/ 100255248_2009-nissan-rogue-fwd-4-door-stemperature-controls

http://fultonstreetplumbingandheating.info/ Thermostat.php

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

12

Two Theories of Home Heat Control Kempton, Willet. 1986. in Cognitive Science (10) p. 75-90.

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

13

Mental Models: Thermostats

http://fultonstreetplumbingandheating.info/ Thermostat.php

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

14

Mental Models: Thermostats •

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?

http://www.thecarconnection.com/image/ 100255248_2009-nissan-rogue-fwd-4-door-stemperature-controls

http://fultonstreetplumbingandheating.info/ Thermostat.php

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

15

Mental Models: Thermostats

http://fultonstreetplumbingandheating.info/ Thermostat.php

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

16

“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.” – Don Norman

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

17

Communicating with users through design

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

18

Design of Everyday Things •

A set of design principles, grounded in psychology and applied to ‘everyday’ objects doors, tea kettles, and personal technologies

• • • •

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

Conceptual (Mental) Models Feedback Constraints Affordances

19

Feedback Show the effects of an action

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

20

Constraints http://lazytechguys.com/

Prevent the ‘wrong’ action

Norman, Design of Everyday Things, p. 137

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

21

Technology Affordances Bill Gaver. 1991. Conference on Human Factors in Computing Systems (CHI)

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

22

Technology Affordances *

properties of the world that are

compatible with and relevant for people’s interactions

*

suggest to the user what to do and/

*

“without significant intermediate

or how to do it

stages involving memory or inferences”

*

“complementarity of the acting organism and the acted-upon environment”

http://www.flickr.com/photos/psmithy/ IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

23

Design of Everyday Things •

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

A set of design principles, grounded in psychology and applied to ‘everyday’ objects doors, tea kettles, and personal technologies

• • • •

Conceptual (Mental) Models

•

Signifiers?

Feedback Constraints Affordances

24

photos from flickr users: jurek_durczak, nitz, thejof

Signifiers: Clues in the world, clues about the world \IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

25

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:

• •

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

Ed Hutchins Jim Hollan

26

flickr.com/photos/imaginary/

Plans and Situated Actions IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

Lucy Suchman, PARC, 1980s 27

“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 Navigational tools from Buxton, p. 36 IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

28

Photo: Adaptive Path

Design for the wild? IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

“Experiencing the social and physical

context [of a new object] while still in the design cycle”

29

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.

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

30

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.

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

31

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.

IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

32

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! IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

33

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. IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 Thursday, January 16, 14

34