[HCI] Week 07 Conceptual Design

Lecture 7

Conceptual Design

Human Computer Interaction / COG3103, 2015 Fall Class hours : Tue 1-3 pm/Thurs 12-1 pm 13 & 15 October

Exercise 4-1: Flow Model Sketch for Your System

• Goal

– Get practice in making an initial flow model sketch for the work practice of an organization.

• Activities

– For your target system sketch out a flow model diagram, in the same style as our flow model sketch for MUTTS, shown in

Figure 4-3, showing work roles, information flow, information repositories, transactions, etc.

– Draw on your raw work activity data and construct a representation of the flow of data, information, and work artifacts.

– Even if there is no existing automated system, you should capture the flow of the manual work process.

– Start with representing your work roles as nodes, add in any other nodes for databases and so on.

– Label communication and flow lines.

– If you do not have enough contextual data from your limited data-gathering exercise, make some up to make this work.

• Deliverables

– A one-page diagram illustrating a high-level flow model for the existing work process of your target system.

• Schedule

– Given the simplicity of the domain, we expect this exercise to take about an hour.

Lecture #7 COG_Human Computer Interaction 2

Exercise 6-3: A Social Model for Your System

• Goal

– Get a little practice in making a social model diagram.

• Activities

– Identify active entities, such as work roles, and represent as nodes in the diagram.

– Include groups and subgroups of roles and external roles that interact with work roles.

– Include system-related roles, such as a central database.

– Include workplace ambiance and its pressures and influences.

– Identify concerns and perspectives and represent as attributes of nodes.

– Identify social relationships, such as influences between entities, and represent these as arcs between nodes in the

diagram.

– Identify barriers, or potential barriers, in relationships between entities and represent them as red bolts of lightning .

• Deliverables

– One social model diagram for your

• Schedule

– This could take a couple of hours.


Exercise 6-5: Creating a Flow Model for Your System

• Goal: Get a little practice in creating a flow model for an enterprise.

• Activities:

– Follow up on your flow model initial sketch that you did in Exercise 4-1.

– Again represent each work role or system entity as a node in the diagram.

– Use arcs between nodes to show all communication and coordination necessary to do the work of the

enterprise.

– Use arcs to represent all information flow and flow of physical artifacts.

– Include all forms of communication, including direct conversations, email, phones,

• letters, memos, meetings, and so on.

– Include both flow internally within the enterprise and flow externally with the rest of the world.

• Deliverables

– One flow model diagram for your system, with as much detail as feasible.

• Schedule

– This could take a couple of hours.


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.


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


Complete Chapter 6 Exercises

Complete Chapter 7-1 Exercises

1 2

Your Personal Blog Post #5 -Draw a flow model diagram for your system - Draw a Social Model diagram for your system

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

Pinterest “Sketch” Folder.

Submission Due : 11: 59 pm Sun. 11th October.

Complete Chapter 7-2 Exercises

3

Your Team Blog Post #3 - Try your Initial sketches - Upload source images to the

Pinterest “Sketch” Folder

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



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




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


Mid-Term Presentation Guideline

• Date/Time/Duration

– Tuesday, 27th October 2015

– 1 – 3 pm

– 20 mins for each team [15 min Presentation/ 5 min Q&A ]

• Presentation Document Content

– System Concept Statement

– Flow Model

– Social Model

– Persona

– Some sketches (as many as possible)

– Storyboard


Mid-Term Submission Guideline

• Post a blog

– Due until 11:59 pm (Mon) 26th Oct.

– Embed the presentation file from slideshare.

– 3 mins(max) concept movie

• Brief your product/service idea

• You can add your interview

– Compile into the Kickstarter format

• Your funding goal

• USP you need to promote

• https://www.kickstarter.com/projects/ostrich-pillow/batband


Education

[HCI] Week 07 Conceptual Design