Lecture 4

Conceptual Design

2015 Winter Internship Seminar @Yonsei HCI Lab Track II : Prototypes and Evaluations Class hours : Fri. 14:00 – 15:30 23rd January, 2015

Class Activity

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 2

Reviewing Pinterest Boards

Reviewing Social Model & Persona Review Papers

1 2 3

Pinterest - Users - Use Context - Artifacts?!

- Devices - Services

- Interaction Models

Your Blog Post #3 “Social Model” Your Blog Post #4 “Persona”

- Watch Aland Cooper’s Talk on Persona

- Review two related papers - Blythe, 2006 - Briggs, 2012

MENTAL MODELS AND CONCEPTUAL DESIGN

Textbook Chapter 8.

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 3

INTRODUCTION

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 4

Figure 8-1 You are here; the second of three chapters on creating an interaction design in the context of the overall Wheel lifecycle template.

MENTAL MODELS

• Designer’s mental model

– Vision of how system works as held by designer

• What the system is

• How it is organized

• What it does and how

• User’s mental model

– Description of how system works as held by user

• Conceptual design is what we use to connect the two

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 5

MENTAL MODELS

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 6

Figure 8-2 Mapping the designer's mental model to the user's mental model.

MENTAL MODELS

• Designer’s Mental Model

– Designer’s mental model in the ecological perspective: Describing what

the system is, what it does, and how it works within its ecology

– Designer’s mental model in the interaction perspective: Describing how

users operate it

– Designer’s mental model in the emotional perspective: Describing

intended emotional impact

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 7

CONCEPTUAL DESIGN

• Leverage Metaphors in Conceptual Design

– Metaphors in the ecological perspective

– Metaphors in the interaction perspective

– Metaphors in the emotional perspective

• Conceptual Design from the Design Perspectives

– Conceptual design in the ecological perspective

– Conceptual design in the emotional perspective

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 8

CONCEPTUAL DESIGN

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 9

Figure 8-3 Designer workflow and connections among the three conceptual design perspectives.

CONCEPTUAL DESIGN

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 10

Figure 8-4 Part of a conceptual design showing immersion in the emotional perspective (sketch courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

CONCEPTUAL DESIGN

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 11

Figure 8-5 Early conceptual design ideas from the ecological perspective(sketch courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

CONCEPTUAL DESIGN

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 12

Figure 8-6 Ecological conceptual design ideas focusing on a feature for a smart ticket to guide users to seating (sketch courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

CONCEPTUAL DESIGN

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 13

Figure 8-7 Ecological conceptual design ideas focusing on a feature showing communication connection with a smartphone (sketch courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

CONCEPTUAL DESIGN

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 14

Figure 8-8 Ecological conceptual design ideas focusing on the features for communicating and social networking (sketch courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

CONCEPTUAL DESIGN

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 15

Figure 8-9 Part of a conceptual design in the interaction perspective(sketch courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

STORYBOARDS

• Making Storyboards to Cover All Design Perspectives

– Hand-sketched pictures annotated with a few words

– All the work practice that is part of the task, not just interaction with the

system, for example, include telephone conversations with agents or roles

outside the system

– Sketches of devices and screens

– Any connections with system internals, for example, flow to and from a

database

– Physical user actions

– Cognitive user actions in “thought balloons”

– Extra-system activities, such as talking with a friend about what ticket to buy

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 16

STORYBOARDS

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 17

Figure 8-10 Example of a sequence of sketches as a storyboard in the ecological perspective (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

STORYBOARDS

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 18

Figure 8.10, cont’d

STORYBOARDS

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 19

Figure 8-11 Part of a different Ticket Kiosk System storyboard in the ecological perspective(sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

STORYBOARDS

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 20

Figure 8-12 Sample sketches for a similar concert ticket purchase storyboard in the interaction perspective (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 21

Figure 8.12, cont’d

STORYBOARDS

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 22

Figure 8.12, cont’d

STORYBOARDS

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 23

Figure 8-13 Storyboard transition frame with thought bubble explaining state change (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

DESIGN FOR EMBODIED INTERACTION

• Embodied interaction

– Involves user’s physical body in interaction with technology

– In a natural way, such as by gestures

• Moving interaction off screen and into action-situated real world

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 24

DESIGN FOR EMBODIED INTERACTION

• Embodiment

– “How nature of living entity’s cognition shaped by form of its physical ma

nifestation in world.”

– Central to idea of phenomenological interaction

– Dourish: “How we understand the world, ourselves, and interaction come

s from our location in a physical and social world of embodied factors.”

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 25

DESIGN FOR EMBODIED INTERACTION

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 26

Figure 8-14 The Scrabble Flash Cube game.

UBIQUITOUS AND SITUATED INTERACTION

• Ubiquitous, Embedded, and Ambient Computing

– Ubiquitous interaction is interaction occurring not just on computers and

laptops but potentially everywhere in our environment. Interactive

devices are being worn by people; embedded within appliances, homes,

offices, stereos and entertainment systems, vehicles, and roads; and

finding their way into walls, furniture, and objects that we carry.

• Situated Awareness and Situated Action

– In a social interaction setting, this can help find other people and can help

cultivate a feeling of community and belonging (Sellen et al., 2006)

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 27

Exercise 8-2: Storyboard for Your System

• Goal

– Get a little practice in sketching storyboards.

• Activities

– Sketch storyboard frames illustrating narrative sequences of action in each of the three perspectives.

– Include things like these in your storyboards:

• Hand-sketched pictures annotated with a few words

• All the work practice that is part of the task, not just interaction with the system, for example, include telephone conversations with agents

or roles outside the system

• Sketches of devices and screens

• Any connections with system internals, for example, flow to and from a database

• Physical user actions

• Cognitive user actions in “thought balloons”

• Extra-system activities, such as talking with a friend about what ticket to buy

– For the ecological perspective, illustrate high-level interplay among human users, the system as a whole, and the surrounding

context.

– In the interaction perspective, show screens, user actions, transitions, and user reactions.

– Use storyboards in the emotional perspective to illustrate deeper user experience phenomena such as fun, joy, and aesthetics.

• Schedule

– You decide how much time you can afford to give this. If you cannot do this exercise in all three perspectives, just pick one, perhaps

the ecological perspective.

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 28

Homework

Lecture #4 2015 Winter Internship @Yonsei HCI Lab 29

Do More Sketches Find Your Metaphor

Candidates

Storyboard For your System

1 2 3

Upload on Pitnerest Find Comparative Systems. Find Comparative Use Cases.

- Metaphors in the

ecological perspective - Metaphors in the

interaction perspective - Metaphors in the

emotional perspective

Your Blog Post #4 “Storyboard” Do the exercise #8-2

Submission Due : 11: 59 pm, Mon. 26th Jan. 2015