Winter 2014: Intro to HCI€¦ · * UX vx. IxD? * Other processes? 3 Thursday, January 16, 14. IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 The Elements of

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


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)



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?



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/



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




Other design processes?

6

Many.

Problem Synthesis

Design & Ideation

Evaluation of Solutions



Right now

7

Some human-centered foundationsObservations & design ethnographyInterviews & contextual inquiryCultural probes & collage

Problem Synthesis

Design & Ideation

Evaluation of Solutions



Agenda

* Review questions from Tuesday

* Foundations of Interaction

* Mental models

* Affordances & signifiers

* Designing for the ‘wild’

* Sketching crits

* Class brainstorm - project topics



Design of Everyday Things

Donald Norman

Originally, 1988, and then many revisions

This is the 2002 edition




• 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



Mental Models How does <x> work?



• 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


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











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 14









• 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














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



Communicating with users through design






• Feedback

• Constraints

• Affordances



Feedback

Show the effects of an action



Constraints

Prevent the ‘wrong’ action

21

http://lazytechguys.com/

Norman, Design of Everyday Things, p. 137


http://lazytechguys.com/news/business/sony-to-cease-production-of-optical-disc-drives-for-pcs/

http://lazytechguys.com/news/business/sony-to-cease-production-of-optical-disc-drives-for-pcs/


Technology Affordances

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



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/


http://www.flickr.com/photos/psmithy/2899364832/sizes/l/

http://www.flickr.com/photos/psmithy/2899364832/sizes/l/





• Feedback

• Constraints

• Affordances

• Signifiers?


\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



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



Plans and Situated Actions Lucy Suchman, PARC, 1980s

27

flickr.com/photos/imaginary/



“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



Design for the wild?“Experiencing the social and physical context [of a new object] while still in the design cycle”

29

Photo: Adaptive Path



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.



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.



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.



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!



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.


Documents

Winter 2014: Intro to HCI€¦ · * UX vx. IxD? * Other processes? 3 Thursday, January 16, 14. IN4MTX 131 : Intro to HCI : Winter 2013 : Ellie Harmon : 2014-01-16 The Elements of