[hci] week 10. conceptual design

Lecture 10

Conceptual Design

Human Computer Interaction/COG3103, 2016 Fall Class hours : Monday 1-3 pm/Wendseday 2-3 pm Lecture room : Widang Hall 209 7th November

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 #10 COG_Human Computer Interaction 2

Exercise 7-2: Practice in Ideation and Sketching

• Goal

– To get practice in ideation and sketching for design.

• Activities

– Doing this in a small group is strongly preferable, but you can do it with one other person.

– Get out blank paper, appropriate size marking pens, and any other supplies you might need for sketching.

– Start with some free-flow ideation about ways to design a new and improved concept of your system. Do not limit

yourself to conventional designs.

– Go with the flow and see what happens.

– Start with design sketches in the ecological perspective.

– Make some sketches from an interaction perspective showing different ways you can operate the system.

– Make sketches that project the emotional perspective of a user experience with your product. This might be more

difficult, but it is worth taking some time to try.

– Ideate. Sketch, sketch, and sketch. Brainstorm and discuss.

• Deliverables

– A brief written description of the ideation process and its results, along with all your supporting sketches.

• Schedule

– Give yourself enough time to really get engaged in this activity.


Homework


Make a Kickstarter Page of your

project

Complete Chapter 7-1 Exercises

1 2

Start up your Kickstarter Page - Sign-up - Make a page and

fill up with your project ideas so far

- Send me an email of the preview page link

- Link a button to your blog

Your Team Blog Post #7 - Create a user persona - Upload source images to the

Pinterest “persona” Folder.

Submission Due : 11: 59 pm Fri. 4th November


3

Your Team Blog Post #8 - Try your Initial sketches - Make a Pinterest Account - Update your sketches everyday - Upload source images to the

Pinterest “Sketch” Folder - Send me an email of your

Pinterest page - Link a button to your blog

MENTAL MODEL & CONCEPTUAL DESIGN

Textbook Chapter 8.


INTRODUCTION


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


MENTAL MODELS


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


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


CONCEPTUAL DESIGN


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

CONCEPTUAL DESIGN


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


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

CONCEPTUAL DESIGN


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


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


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


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


STORYBOARDS


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


Figure 8.10, cont’d

STORYBOARDS


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


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).

STORYBOARDS



STORYBOARDS


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



• Embodiment

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

manifestation in world.”

– Central to idea of phenomenological interaction

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

comes from our location in a physical and social world of embodied

factors.”




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)


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.


Summary of the Flow of Activities in Chapters 3 through 9


Homework


Upload multiple storyboard doodling

on pinterest


1 2

Upload on the “sketch” board - Upload storyboard

related sketches - Upload multiple

storyboard doodling to test your varied ideas

Your Team Blog Post #9 - Hand-sketched pictures - Sketches of devices and

screens - Physical user actions - Cognitive user actions in

“thought balloons” - More flow diagrams

Submission Due : 11: 59 pm Fri. 11th November

Update the Kickstarter Page of your project

3

After Sketching and making storyboard - Pick 1-2 sketches - Add one final storyboard

[hci] week 10. conceptual design

Education