Upload
dsdlab
View
314
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Lecture 11
Citation preview
Lecture 11
Design Thinking to Conceptual Design
Human Computer Interaction / COG3103, 2014 Fall Class hours : Tue 1-3 pm/Thurs 12-1 pm 14 October
DESIGN THINKING, IDEATION, AND SKETCHING
Textbook Chapter 7.
Lecture #11 COG_Human Computer Interaction 2
INTRODUCTION
Lecture #11 COG_Human Computer Interaction 3
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 #11 COG_Human Computer Interaction 4
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 #11 COG_Human Computer Interaction 5
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 #11 COG_Human Computer Interaction 6
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 #11 COG_Human Computer Interaction 7
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 #11 COG_Human Computer Interaction 8
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 #11 COG_Human Computer Interaction 9
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 #11 COG_Human Computer Interaction 10
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 #11 COG_Human Computer Interaction 11
USER PERSONAS
• How Do We Make Them?
– Identifying candidate
personas
– Goal-based consolidation
– Selecting a primary persona
Lecture #11 COG_Human Computer Interaction 12
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 #11 COG_Human Computer Interaction 13
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 #11 COG_Human Computer Interaction 14
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 #11 COG_Human Computer Interaction 15
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 #11 COG_Human Computer Interaction 16
IDEATION
Lecture #11 COG_Human Computer Interaction 17
Figure 7-4 The Virginia Tech ideation studio, the “Kiva” (photo courtesy of Akshay Sharma,Virginia Tech Department of Industrial Design).
IDEATION
Lecture #11 COG_Human Computer Interaction 18
Figure 7-4 Individual and group designer work spaces(photo courtesy of Akshay Sharma,Virginia Tech Department of Industrial Design).
IDEATION
Lecture #11 COG_Human Computer Interaction 19
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 #11 COG_Human Computer Interaction 20
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 #11 COG_Human Computer Interaction 21
SKETCHING
Lecture #11 COG_Human Computer Interaction 22
Figure 7-8 A sketch to think about design (photo courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
SKETCHING
Lecture #11 COG_Human Computer Interaction 23
Figure 7-9 Freehand gestural sketches for the Ticket Kiosk System (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
SKETCHING
Lecture #11 COG_Human Computer Interaction 24
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 #11 COG_Human Computer Interaction 25
Figure 7-11 Designers doing sketching (photos courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
SKETCHING
Lecture #11 COG_Human Computer Interaction 26
Figure 7-12 Early ideation sketches of K-YAN (sketches courtesy of Akshay Sharma, Department of Industrial Design).
SKETCHING
Lecture #11 COG_Human Computer Interaction 27
Figure 7-13 Mid-fidelity exploration sketches of K-YAN (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
SKETCHING
Lecture #11 COG_Human Computer Interaction 28
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 #11 COG_Human Computer Interaction 29
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 #11 COG_Human Computer Interaction 30
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 #11 COG_Human Computer Interaction 31
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 #11 COG_Human Computer Interaction 32
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 #11 COG_Human Computer Interaction 33
MENTAL MODELS AND CONCEPTUAL DESIGN
Textbook Chapter 8.
Lecture #11 COG_Human Computer Interaction 34
INTRODUCTION
Lecture #11 COG_Human Computer Interaction 35
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 #11 COG_Human Computer Interaction 36
MENTAL MODELS
Lecture #11 COG_Human Computer Interaction 37
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 #11 COG_Human Computer Interaction 38
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 #11 COG_Human Computer Interaction 39
CONCEPTUAL DESIGN
Lecture #11 COG_Human Computer Interaction 40
Figure 8-3 Designer workflow and connections among the three conceptual design perspectives.
CONCEPTUAL DESIGN
Lecture #11 COG_Human Computer Interaction 41
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 #11 COG_Human Computer Interaction 42
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 #11 COG_Human Computer Interaction 43
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 #11 COG_Human Computer Interaction 44
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 #11 COG_Human Computer Interaction 45
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 #11 COG_Human Computer Interaction 46
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 #11 COG_Human Computer Interaction 47
STORYBOARDS
Lecture #11 COG_Human Computer Interaction 48
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 #11 COG_Human Computer Interaction 49
Figure 8.10, cont’d
STORYBOARDS
Lecture #11 COG_Human Computer Interaction 50
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 #11 COG_Human Computer Interaction 51
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 #11 COG_Human Computer Interaction 52
Figure 8.12, cont’d
STORYBOARDS
Lecture #11 COG_Human Computer Interaction 53
Figure 8.12, cont’d
STORYBOARDS
Lecture #11 COG_Human Computer Interaction 54
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 #11 COG_Human Computer Interaction 55
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 #11 COG_Human Computer Interaction 56
DESIGN FOR EMBODIED INTERACTION
Lecture #11 COG_Human Computer Interaction 57
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 #11 COG_Human Computer Interaction 58
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.
Lecture #11 COG_Human Computer Interaction 59
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 #11 COG_Human Computer Interaction 60