1

04 Design Solution
CII-4N3 Interaction Design
 2

Learning Outcomes
Students are able to explain the definition of a persona, the
importance of a persona, the stages of defining a persona.
Students are able to define a persona.
 3

Topics
Scenarios and Design Requirements
Framework and Refinement (Designing the Product)
 4

Scenarios and Design

Requirements
 Bridging the Research-Design Gap
5

• Developing stories or scenarios as a means of imagining ideal user

interactions
• Using those scenarios to extract design requirements
• Using these requirements in turn to define the product’s fundamental
interaction framework
• Filling in that framework with ever-increasing amounts of design detail
 6

Scenarios: Narrative as a
Design Tool
 Scenarios versus use cases and user stories
7

• Scenarios and use cases are both methods of describing the user’s
interaction with a system. However, they serve very different functions.
• Scenarios are an iterative means of defining a product’s behavior from the
standpoint of specific users (personas). This includes not only the system’s
functionality, but the priority of functions and how those functions are
expressed in terms of what the user sees and how she interacts with the
system.
• User stories are much more like informally phrased requirements than they
are like scenarios; they don’t describe the user’s entire flow at a big-picture
level or describe what the user’s end goal is.
Example : “As a user, I would like to log in to my online banking account.”
 Scenario-based design
8

• Scenarios are paradoxically concrete but rough, tangible but flexible … they
implicitly encourage “what-if?” thinking among all parties.
• They permit the articulation of design possibilities without undermining
innovation
• Scenarios compel attention to the use that will be made of the design
product.
• They can describe situations at many levels of detail, for many different
purposes, helping to coordinate various aspects of the design project.

John M. Carroll in his book Making Use

 Persona –based scenario
9

• Persona-based scenarios are concise narrative descriptions of one or more

personas using a product or service to achieve specific goals.
• They allow us to start our designs from a story describing an ideal experience
from the persona’s perspective, focusing on people and how they think and
behave, rather than on technology or business goals.
 10

Design Requirements: The

“What”
of Interaction
 Overview
11

• The Requirements Definition phase determines the what of the design: what information
and capabilities our personas require to accomplish their goals.
• It is critical to define and agree on the what before we move on to the next question: how
the product looks, behaves, operates, and feels
• Proposing a solution without clearly defining and agreeing on the problem leaves you
without a clear, objective method of evaluating the design’s fitness.
• Discovering requirements focuses on exploring the problem space and defining what will be
developed.
• In the case of interaction design, this includes: understanding the target users and their
capabilities; how a new product might support users in their daily lives; users’ current tasks,
goals, and contexts; constraints on the product’s performance; and so on.
 Requirements definition process
12

• The process of discovering requirements is iterative, allowing requirements

and their understanding to evolve.
• The Requirements Definition process consists of the following five steps.
• Although these steps proceed in roughly chronological order, they represent
an iterative process.
• Designers can expect to cycle through Steps 3 through 5 several times until
the requirements are stable
 Step 1: Create problem and vision statements
13

• The problem statement defines the purpose of the design initiative.

• A design problem statement should concisely reflect a situation that needs
changing, for both the personas and the business providing the product to
the personas.
• Often a cause-and-effect relationship exists between business concerns and
persona concerns.
• Example of problem statement’s template:
 Step 1 (cont.)
14

• The vision statement is an inversion of the problem statement that serves as

a high-level design objective or mandate.
• In the vision statement, you lead with the user’s needs, and you transition
from those to how the design vision meets business goals
• Example of vision statement’s template:
 Step 2: Explore and brainstorm
15

• Exploration, as the term suggests, should be unconstrained and uncritical.

• Air all the wacky ideas you’ve been considering (plus some you haven’t), and
be prepared to record them and file them for safekeeping until much later in
the process. You don’t know if any of them will be useful in the end, but you
might find the germ of something wonderful that will fit into the design
framework you later create.
• Don’t spend too much time on the brainstorming step. If you find your ideas
getting repetitious, or the popcorn stops popping, that’s a good time to stop.
 Step 3: Identify persona expectations
16

• For each primary and secondary persona, we identify the following:

• Attitudes, experiences, aspirations, and other social, cultural, environmental,
and cognitive factors that influence the persona’s expectations
• General expectations and desires the persona may have about the
experience of using the product
• Behaviors the persona will expect or want from the product
• How that persona thinks about basic elements or units of data (For example,
in an e‑mail application, the basic elements of data might be messages and
people.)
 Step 4: Construct context scenarios
17

• Context scenarios should be broad and relatively shallow in scope. They should not describe
product or interaction detail but rather should focus on high-level actions from the user’s
perspective.
• It is important to map out the big picture first so that we can systematically identify design
requirements. Only then can we design appropriate interactions and interfaces.
• Context scenarios address questions such as the following:
 In what setting(s) will the product be used?
 Will it be used for extended amounts of time?
 Is the persona frequently interrupted?
 Do several people use a single workstation or device?
 With what other products will it be used?
 What primary activities does the persona need to perform to meet her goals?
 What is the expected end result of using the product?
 How much complexity is permissible, based on persona skill and frequency of use?
 Step 4 (cont.)
18

The following is the first iteration of a context scenario for a primary persona for a personal digital assistant
(PDA) type phone, including both the device and its service. Our persona is Vivien Strong, a real-estate
agent in Indianapolis, whose goals are to balance work and home life, close the deal, and make each client
feel like he or she is her only client.
 Step 5: Identify design requirements
19

• After you are satisfied with an initial draft of your context scenario, you can
analyze it to extract the personas’ needs or design requirements. These
design requirements can be thought of as consisting of objects, actions, and
contexts.
• We prefer not to think of requirements as identical to features or tasks. Thus,
a requirement from the preceding scenario might read as follows:

Call (action) a person (object) directly from an appointment (context).

 20

Framework and
Refinement (Designing the
Product)
 Creating the Design Framework
21

• The Design Framework defines the overall structure of the users’ experience.
• This includes the underlying organizing principles and the arrangement of
functional elements on the screen, work flows, interactive behaviors and the
visual and form languages used to express information, functionality, and
brand identity.
• Form and behavior must be designed in concert
• The Design Framework is made up of an interaction framework, a visual
design framework, and sometimes an industrial design framework.
• In other reference, the design framework result wireframe & conceptual
model
 22

• At this phase in a project, interaction designers use scenarios and

requirements to create rough sketches of screens and behaviors that make
up the interaction framework.
• Concurrently, visual designers use visual language studies to develop a visual
design framework that is commonly expressed as a detailed rendering of a
single screen archetype.
• Industrial designers execute form language studies to work toward a rough
physical model and industrial design framework.
• Service designers build models of the information exchange for each touch
point in a service framework.
Defining the interaction framework
23

1. Define form factor, posture, and

input methods.
2. Define functional and data
elements.
3. Determine functional groups and
hierarchy.
4. Sketch the interaction framework.
5. Construct key path scenarios.
6. Check designs with validation
scenarios

Read Alan Cooper, et. al. 2014. About Face - The Essential of Intraction
Design - 4th Edition. J. Wiley & Sons , Inc. Chapter 5
Page 121 - 131
 Initial Conceptual Model
24

• This section introduces approaches that help to produce an initial conceptual

model. In particular, it considers the following:
• How to choose interface metaphors that will help users understand the product?
Interface metaphors combine familiar knowledge with new knowledge in a way that will help users
understand the product. Choosing suitable metaphors and combining new and familiar concepts
requires a balance between utility and relevance, and it is based on an understanding of the users
and their context
• Which interaction type(s) would best support the users’ activities?
Most conceptual models will include a combination of interaction types, and different parts of the
interaction will be associated with different types
• Do different interface types suggest alternative design insights or options?
Different interface types prompt and support different perspectives on potential user experiences
and possible behaviors, hence prompting alternative design ideas.
Considering interfaces at this point also takes one step toward producing practical prototypes.
 Expanding the Initial Conceptual Model
25

• What Functions Will the Product Perform?

This question is about whether the product or the user takes responsibility for different
parts of the overall goal. For example, the travel organizer is intended to suggest specific
vacation options for a group of people, but is that all it should do? What about if it
automatically reserved the bookings?
• How Are the Functions Related to Each Other?
Functions may be related temporally; for example, one must be performed before another,
or two can be performed in parallel
• What Information Is Needed?
What data is required to perform a task? How is this data to be transformed by the system?
For example, identifying potential vacations for a group of people using the travel organizer
requires the following: what kind of vacation is required; available budget; preferred
destinations (if any); preferred dates and duration (if any); how many people it is for; and are
there any special requirements (such as disability) within the group?
 Refining the Form and Behavior
26

• When a solid, stable framework definition is reached, designers see the

remaining pieces of the design begin to fall smoothly into place: Each
iteration of the key path scenarios adds detail that strengthens the product’s
overall coherence and flow.
• The design is translated from the sketched storyboards into a final, concrete
form, full-resolution screens that depict the user interface at the pixel level
• The basic process of design refinement follows the same steps we used to
develop the design framework, this time at deeper and deeper levels of detail
• In other reference, refining the form and behavior also called concrete design
 Concrete Design
27

• Conceptual design and concrete design are closely related. The difference
between them is rather a matter of changing emphasis: during design,
conceptual issues will sometimes be highlighted, and at other times, concrete
detail will be stressed
• There are many aspects to the concrete design of interactive products: visual
appearance such as color and graphics, icon design, button design, interface
layout, choice of interaction devices, and so on
• Concrete design also deals with issues related to user characteristics and
context
 28

Reference

• Alan Cooper, et. al. 2014. About Face - The Essential of Intraction Design -
4th Edition. J. Wiley & Sons , Inc. Chapter 4 & 5
• Jenny Preece, Yvonne Rogers, Helen Sharp. 2019. Interaction Design_beyond
Human-Computer –Interaction- 5th Edition, J. Wiley & Sons . Chapter 12
Questions
29