Lecture 3

Design Thinking and Sketching

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

Class Activity

Lecture #2 2015 Winter Internship @Yonsei HCI Lab 2

Reviewing Pinterest Boards

Reviewing Social Model

Understanding the idea of

Persona, and the relationship to Design artifacts

1 2 3

Pinterest - Users - Use Context - Artifacts?!

- Devices - Services

- Interaction Models

Your pros and cons - Active entities - Groups and subgroups - System-related roles - Ambiance (Pressures and

influences) - Social relationships - Barriers

Design Thinking Paradigm - Participatory visioning techniques

DESIGN THINKING, IDEATION, AND SKETCHING

Textbook Chapter 7.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 3

INTRODUCTION

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 4

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

DESIGN PARADIGMS

• Engineering Paradigm

– a practical approach to usability with a focus on improving user

performance, mainly through evaluation and iteration.

– The engineering paradigm also had strong roots in human factors, where

work was studied, deconstructed, and modeled.

– Success was measured by how much the user could accomplish, and

alternative methods and designs were compared with statistical

summative studies.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 5

DESIGN PARADIGMS

• Human Information Processing (HIP) Paradigm

– based on the metaphor of “mind and computer as symmetrically coupled

information processors”

– About models of how information is sensed, accessed, and transformed in

the human mind and, in turn, how those models reflect requirements for

the computer side of the information processing, was defined by Card,

Moran, and Newell (1983) and well explained by Williges (1982).

– it is about human mental states and processes; it is about modeling

human sensing, cognition, memory, information understanding, decision

making, and physical performance in task execution.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 6

DESIGN PARADIGMS

• Design-Thinking Paradigm

– “phenomenological matrix.”

– brings a vision of the desired user experience and product appeal and how the design of

a product can induce that experience and appeal.

– They used participatory design techniques to experiment with and explore design

through early prototypes as design sketches.

– The design-thinking paradigm is about social and cultural aspects of interaction and the

design of “embodied interaction” because it is about interaction involving our whole

bodies and spirit, not just our fingertips on a keyboard. It is also about “situated” design

because it is about the notion of “place” with respect to our interaction with technology.

– A primary characteristic of the design-thinking paradigm is the importance of emotional

impact derived from design—the pure joy of use, fun, and aesthetics felt in the user

experience.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 7

DESIGN THINKING

• Design Thinking

– Design thinking is a mind-set in which the product concept and design for

emotional impact and the user experience are dominant. It is an approach

to creating a product to evoke a user experience that includes emotional

impact, aesthetics, and social- and value-oriented interaction. As a

design paradigm, design thinking is an immersive, integrative, and market-

oriented eclectic blend of art, craft, science, and invention.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 8

DESIGN THINKING

• Ideation

– Ideation is an active, creative, exploratory, highly iterative, fast-moving

collaborative group process for forming ideas for design. With a focus on

brainstorming, ideation is applied design thinking.

• Sketching

– Sketching is the rapid creation of free-hand drawings expressing preliminary

design ideas, focusing on concepts rather than details. Multiple sketches of

multiple design ideas are an essential part of ideation. A sketch is a

conversation between the sketcher or designer and the artifact.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 9

DESIGN PERSPECTIVES

• Ecological Perspective

– is about how the system or product works within its external environment.

– is about how the system or product is used in its context and how the system

or product interacts or communicates with its environment in the process.

within its external environment.

• Interaction Perspective

– is about how users operate the system or product.

• Emotional Perspective

– is about emotional impact and value-sensitive aspects of design.

– is about social and cultural implications, as well as the aesthetics and joy of

use.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 10

USER PERSONAS

• What Are Personas?

– Personas are a powerful supplement to work roles and user class

definitions. Storytelling, role-playing, and scenarios go hand in hand with

personas.

– A persona is not an actual user, but a pretend user or a “hypothetical

archetype” (Cooper, 2004).

– A persona represents a specific person in a specific work role and sub-

role, with specific user class characteristics. Built up from contextual

data, a persona is a story and description of a specific individual who has

a name, a life, and a personality.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 11

USER PERSONAS

• What Are Personas Used For? Why Do We Need Them?

– Edge cases and breadth

• Personas are essential to help overcome the struggle to design for the conflicting

needs and goals of too many different user classes or for user classes that are too

broad or too vaguely defined.

• What if the user wants to do X? Can we afford to include X? Can we afford to not

include X? How about putting it in the next version?

• “Sorry, but Noah will not need feature X.” Then someone says “But someone might.”

To which you reply, “Perhaps, but we are designing for Noah, not ‘someone.’”

– Designers designing for themselves

• Because of their very real and specific characteristics, personas hold designers’

feet to the fire and help them think about designs for people other than themselves.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 12

USER PERSONAS

• How Do We Make Them?

– Identifying candidate

personas

– Goal-based consolidation

– Selecting a primary persona

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 13

Figure 7-2 Overview of the process of creating a persona for design.

USER PERSONAS

• Mechanics of Creating Personas

– Your persona should have a first and last name to make it personal and

real.

– Mockup a photo of this person.

– Write some short textual narratives about their work role, goals, main

tasks, usage stories, problems encountered in work practice, concerns,

biggest barriers to their work, etc.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 14

USER PERSONAS

• Characteristics of Effective Personas

– Make your personas rich, relevant, believable, specific, and precise

– Make your personas “sticky”

– Where personas work best

• Goals for Design

– As Cooper (2004) tells us, the idea behind designing for a persona is that

the design must make the primary persona very happy, while not making

any of the selected personas unhappy. Buster will love it and it still works

satisfactorily for the others.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 15

USER PERSONAS

• Using Personas in Design

– As you converge on the final

design, the nonprimary personas

will be accounted for, but will

defer to this primary persona

design concerns in case of

conflict. If there is a design trade-

off, you will resolve the trade-off

to benefit the primary persona

and still make it work for the other

selected personas.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 16

Figure 7-3 Adjusting a design for the primary persona to work for all the selected personas

IDEATION

• Essential Concepts

– Iterate to explore

– Idea creation vs. critiquing

• Doing Ideation

– Set up work spaces

– Assemble a team

– Use ideation bin ideas to get started

– Brainstorm

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 17

IDEATION

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 18

Figure 7-4 The Virginia Tech ideation studio, the “Kiva” (photo courtesy of Akshay Sharma,Virginia Tech Department of Industrial Design).

IDEATION

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 19

Figure 7-4 Individual and group designer work spaces(photo courtesy of Akshay Sharma,Virginia Tech Department of Industrial Design).

IDEATION

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 20

Figure 7-6 Ideation brainstorming within the Virginia Tech ideation studio, Kiva (photo courtesy of Akshay Sharma, Department of Industrial Design).

SKETCHING

• Essential Concepts

– Sketching is essential to

ideation and design

– What sketching is and is not

– Sketches are not the same as

prototypes

– Sketching is embodied

cognition to aid invention

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 21

Figure 7-7 Comparison between Buxton design exploration sketches and traditional low-fidelity refinement prototypes.

SKETCHING

• Doing Sketching

– Stock up on sketching and mockup supplies

– Use the language of sketching

• Everyone can sketch; you do not have to be artistic

• Most ideas are conveyed more effectively with a sketch than with words

• Sketches are quick and inexpensive to create; they do not inhibit early exploration

• Sketches are disposable; there is no real investment in the sketch itself

• Sketches are timely; they can be made just-in-time, done in-the-moment, provided

when needed

• Sketches should be plentiful; entertain a large number of ideas and make multiple

sketches of each idea

• Textual annotations play an essential support role, explaining what is going on in

each part of the sketch and how

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 22

SKETCHING

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 23

Figure 7-8 A sketch to think about design (photo courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

SKETCHING

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 24

Figure 7-9 Freehand gestural sketches for the Ticket Kiosk System (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

SKETCHING

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 25

Figure 7-10 Ideation and design exploration sketches for the Ticket Kiosk System (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

SKETCHING

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 26

Figure 7-11 Designers doing sketching (photos courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

SKETCHING

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 27

Figure 7-12 Early ideation sketches of K-YAN (sketches courtesy of Akshay Sharma, Department of Industrial Design).

SKETCHING

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 28

Figure 7-13 Mid-fidelity exploration sketches of K-YAN (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

SKETCHING

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 29

Figure 7-14 Sketches to explore flip-open mechanism of K-YAN (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

SKETCHING

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 30

Figure 7-15 Sketches to explore emotional impact of form for K-YAN (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

SKETCHING

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 31

Figure 7-16 Examples of rough physical mockups (models courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

SKETCHING

• Physical Mockups as Embodied Sketches

– Just as sketches are two-dimensional visual

vehicles for invention, a physical mockup for

ideation about a physical device or product

is a three-dimensional sketch. Physical

mockups as sketches, like all sketches, are

made quickly, highly disposable, and made

from at-hand materials to create tangible

props for exploring design visions and

alternatives.

– A physical mockup is an embodied sketch

because it is an even more physical

manifestation of a design idea and it is a

tangible artifact for touching, holding, and

acting out usage

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 32

Figure 7-17 Example of a more finished looking physical mockup (model courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).

MORE ABOUT PHENOMENOLOGY

• The Nature of Phenomenology

– the philosophical examination of the foundations of experience and action.

– But it is not about logical deduction or conscious reflection on

observations of phenomena; it is about individual interpretation and

intuitive understanding of human experience.

• The Phenomenological View in Human–Technology Interaction

– an affective state arising within the user.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 33

MORE ABOUT PHENOMENOLOGY

• The Phenomenological Concept of Presence

– presence of technology as part of our lives:

– “We argue that the coming ubiquity of computational artifacts drives a shift from

efficient use to meaningful presence of information technology.”

– This is all about moving from the desktop to ubiquitous, embedded, embodied, and

situated interaction.

– the “new usability” as a shift from use to “presence.”

• The Importance of Phenomenological Context over Time

– Usage develops over time and takes on its own life, often apart from what designers

could envision. Users learn, adapt, and change during usage, creating a dynamic force

that gives shape to subsequent usage (Weiser, 1991).

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 34

Exercise 7-1: Creating a User Persona for Your System

• Goal

– Get some experience at writing a persona.

• Activities

– Select an important work role within your system. At least one user class for this work

role must be very broad, with the user population coming from a large and diverse group,

such as the general public.

– Using your user-related contextual data, create a persona, give it a name, and get a

photo to go with it.

– Write the text for the persona description.

• Deliverables

– One- or two-page persona write-up

• Schedule

– You should be able to do what you need to learn from this in about an hour.

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 35

Pastiche scenarios : Fiction as a resource for user centred design

• ABSTRACT

Pastiche scenarios draw on fiction as a resource to explore the interior ‘felt-life’ aspects of user experience and the complex social and cultural issues raised by technological innovations. This paper sets out an approach for their use, outlining techniques for the location of source material and presenting three case studies of pastiche scenario use. The first case study is an evaluation of the Apple iPod that explores the socio-cultural meanings of the technology. The second case study focuses on the participatory design of Net Neighbours, an online shopping system where volunteers shop as intermediaries for older people who do not have access to computers. The third is an in depth consideration of a conceptual design, the ‘cambadge’ a wearable lightweight web cam which, upon activation broadcasts to police or public websites intended to reduce older people’s fear of crime. This design concept is explored in depth in pastiche scenarios of the Miss Marple stories, A Clockwork Orange and Nineteen Eighty-four that reflect on how the device might be experienced not only by users but also by those it is used against. It is argued that pastiche scenarios are a useful complementary method for designers to reason about user experience as well as the broad social and cultural impacts of new technologies.

http://goo.gl/wWzAz0

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 36

Invisible Design Exploring Insights and Ideas through Ambiguous Film Scenario

• ABSTRACT

Invisible Design is a technique for generating insights and ideas with workshop participants in the early stages of concept development. It involves the creation of ambiguous films in which characters discuss a technology that is not directly shown. The technique builds on previous work in HCI on scenarios, persona, theatre, film and ambiguity. The Invisible Design approach is illustrated with three examples from unrelated projects; Biometric Daemon, Panini and Smart Money. The paper presents a qualitative analysis of data from a series of workshops where these Invisible Designs were discussed. The analysis outlines responses to the films in terms of; existing problems, concerns with imagined technologies and design speculation. It is argued that Invisible Design can help to create a space for critical and creative dialogue during participatory concept development.

http://goo.gl/hIfHN3

Lecture #3 2015 Winter Internship @Yonsei HCI Lab 37

Homework

Lecture #2 2015 Winter Internship @Yonsei HCI Lab 38

Brainstorming in Group

: Boost up your imagination for

Users, Use Cases, and Use Context

Review supplementaries Design Persona

1 2 3

Upload More photos, and sketches on Pinterest - Users - Use Context - Artifacts?!

- Devices - Services

- Interaction Models

- Watch Aland Cooper’s Talk on Persona

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

Your Blog Post #4 “Persona” Do the exercise #7-1 In some more varied forms - Persona Networks

- Primary Persona - Secondary Persona

- Value axis

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