IT-ELEC 4 Human Computer Interaction 2

Unit 2. Design, Prototyping, and Construction

Objectives

The main goals of this chapter are to accomplish the following:

•• Describe prototyping and the different types of prototyping activities.
•• Enable you to produce simple prototypes from the models developed during the requirements activity.
•• Enable you to produce a conceptual model for a product and justify your choices.
•• Explain the use of scenarios and prototypes in design.
•• Introduce both physical computing kits and software development kits and their role in construction.

Lesson 2: Conceptual Design

Conceptual design is concerned with developing a conceptual model. The idea of a conceptual model can be
difficult to grasp because these models take many different forms and there isn’t a definitive detailed characterization of
one.
Instead, conceptual design is best understood by exploring and experiencing different approaches to it, and the
purpose of this section is to provide some concrete suggestions about how to go about doing this.
A conceptual model is an outline of what people can do with a product and which concepts are needed for the
user to understand how to interact with it.
Contextual Design describes further activities that cover the whole design process. Trying to empathize with
users may not be the right approach, however, as discussed in the following “Dilemma” box.
Mood boards (traditionally used in fashion and interior design) may be used to capture the desired feel of a new
product (see Figure 2.1). This is informed by any data gathering or evaluation activities and considered in the context of
technological feasibility.

DILEMMA
Is Trying to Empathize with Users the Right Approach?
Empathizing with users who live in a very different context than the designers is not easy, no matter how much data is
collected. Interaction designers have tried several ways to understand situations that are outside their experience, two of
which are experience prototyping and the Third Age suit.
Developing an Initial Conceptual Model
The core components of the conceptual model are metaphor and analogies, the concepts to which users are exposed,
the relationship between those concepts, and the mappings between the concepts and user experience being
supported. Some of these will derive from the product’s requirements, such as the concepts involved in a task and their
relationships, such as through scenarios and use cases. Others such as suitable metaphors and analogies will be informed
by immersion in the data and attempting to understand the users’ perspectives.
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?
•• Which interaction type(s) would best support the users’ activities?
•• Do different interface types suggest alternative design insights or options?
All of these approaches provide different ways of thinking about the product and help generate potential conceptual
models
Interface Metaphors
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. For example, consider an educational
system to teach 6-year-olds mathematics. One possible metaphor is a classroom with a teacher standing at the front. But
considering the users of the product and what is likely to engage them, a metaphor that reminds them of something
enjoyable is more likely to keep them engaged, such as a ball game, the circus, a playroom, and so on.
When suitable metaphors have been generated, they need to be evaluated. Erickson (1990) suggests five
questions to ask:
•• How much structure does the metaphor provide? A good metaphor will provide structure—preferably familiar
structure.
•• How much of the metaphor is relevant to the problem? One of the difficulties of using metaphors is that users may
think they understand more than they do and start applying inappropriate elements of the metaphor to the product,
leading to confusion or false expectations.
•• Is the interface metaphor easy to represent? A good metaphor will be associated with particular physical, visual, and
audio elements, as well as words.
•• Will your audience understand the metaphor?
•• How extensible is the metaphor? Does it have extra aspects that may be useful later?

Activity 2.4
One of the disadvantages of the restaurant metaphor is the need to have a shared experience when members of the
group are in different locations. Another possible interface metaphor for the group travel organizer is the travel
consultant. A travel consultant discusses the requirements with the traveler(s) and tailors the vacation accordingly,
offering maybe two or three alternatives, but making most of the decisions on the travelers’ behalf. Ask the earlier five
questions about this metaphor.
__________________________________________________________________________________________________
__________________________________________________________________________________________________
______________________________________________

Interaction Types
There are five different types of interaction: instructing, conversing, manipulating, exploring, and responding. Which type
of interaction is best suited to the current design depends on the application domain and the kind of product being
developed. For example, a computer game is most likely to suit a manipulating style, while a software application for
drawing or drafting has aspects of instructing and conversing.
Interface Types
Considering different interfaces at this stage may seem premature, but it has both a design and a practical
purpose. When thinking about the conceptual model for a product, it is important not to be unduly influenced by a
predetermined interface type. Different interface types prompt and support different perspectives on potential user
experiences and possible behaviors, hence prompting alternative design ideas.
To illustrate this, we consider a subset of the interfaces, “Interfaces,” and the different perspectives they bring to
the group travel organizer.
•• Shareable Interface The travel organizer has to be shareable, as it is intended to be used by a group of people and it
should be exciting and fun. The design issues for shareable interfaces, which were introduced in Chapter 7, will need to
be considered for this system. For example, how best (whether) to use the individuals’ own devices such as smartphones
in conjunction with a shared interface. Allowing group members to interact at a distance suggests the need for multiple
devices, so a combination of form factors is required.
•• Tangible Interface Tangible interfaces are a kind of sensor-based interaction, where blocks or other physical objects
are moved around. Thinking about a travel organizer in this way conjures up an interesting image of people collaborating,
maybe with the physical objects representing themselves while traveling, but there are practical problems of having this
kind of interface, as the objects may be lost or damaged.
•• Virtual Reality The travel organizer seems to be an ideal product for making use of a virtual reality interface, as it
would allow individuals to experience the destination and maybe some of the activities available. Virtual reality would
not be needed for the whole product, just for the elements where users want to experience the destination.
Activity 2.5
Consider the new navigation app for a large shopping center.
1. Identify tasks associated with this product that would best be supported by each of the interaction types instructing,
conversing, manipulating, exploring, and responding.
__________________________________________________________________________________________________
__________________________________________________________________________________________________
_______________________________________________________________

Expanding the Initial Conceptual Model

For prototyping or testing with users, these ideas need some expansion. Examples include which functions the
product will perform and which the user will perform, how those functions are related, and what information is required
to support them. Some of this will have been considered during the requirements activity and will evolve after
prototyping and evaluation.

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? Or does it wait until it is given a preferred choice?
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. They may also be related through any number of possible categorizations, for instance, all
functions relating to privacy on a smartphone or all options for viewing photographs on a social networking site. The
relationships between tasks may constrain use or may indicate suitable task structures within the product.
What Information Is Needed?
What data is required to perform a task? How is this data to be transformed by the system? Data is one of the
categories of requirements identified and captured through the requirements activity. During conceptual design, these
requirements are considered to ensure that the model provides the information needed to perform the task.

Lesson 3: Concrete Design

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. Producing a prototype inevitably means making some concrete decisions, albeit tentatively, and since
interaction design is iterative, some detailed issues will come up during conceptual design, and vice versa.
Concrete design also deals with issues related to user characteristics and context. Two aspects that have drawn
particular attention for concrete design are discussed in this section: accessibility and inclusiveness; and designing for
different cultures. Accessibility refers to the extent to which a product is accessible to as many people as possible, while
inclusiveness means being fair, open, and equal to everyone. The aim of inclusive design is to empower users in their
everyday and working lives (Rogers and Marsden, 2013).
After collecting the prototypes, they were classified into the following categories, Virtual and Abstract. The
virtual were divided in two sub-categories: Concrete and Semi-Concrete (See Figs. 3.1, and 3.2).

Lesson 4: Generating Prototypes

This section illustrates how prototypes may be used in design, and it demonstrates how prototypes may be
generated from the output of the requirements activity—producing a storyboard from a scenario and an index card-
based prototype from a use case. Both of these are low-fidelity prototypes.
Generating Storyboards
A storyboard represents a sequence of actions or events that the user and the product go through to achieve a
goal. A scenario is one story about how a product may be used to achieve that goal. A storyboard can be generated from
a scenario by breaking the scenario into a series of steps that focus on interaction and creating one scene in the
storyboard for each step. The purpose for doing this is twofold: first to produce a storyboard that can be used to get
feedback from users and colleagues and second to prompt the design team to consider the scenario and the product’s
use in more detail. For example, consider the scenario for the travel organizer developed. This can be broken down into
six main steps.
1. Will, Sky, and Eamonn gather around the organizer, but Claire is at her mother’s house.
2. Will tells the organizer their initial idea of a sailing trip in the Mediterranean.
3. The system’s initial suggestion is that they consider a flotilla trip, but Sky and Eamonn aren’t happy.
4. The travel organizer shows them some descriptions written by young people about flotilla trips.
5. Will confirms this recommendation and asks for details.
6. The travel organizer emails details of the different options.

c
Activity 2.6
Scenario: A technological developed futuristic one-stop car shop. Using this scenario, develop a storyboard that focuses
on the environment of the user. As you draw this storyboard, write down the design issues that it prompts. Refer to
figure 4.1 as a guide.
__________________________________________________________________________________________________
________________________________________

Generating Card-Based Prototypes

Card-based prototypes are commonly used to capture and explore elements of an interaction, such as dialog
exchanges between the user and the product. The value of this kind of prototype lies in the fact that the interaction
elements can be manipulated and moved around in order to simulate interaction with a user or to explore the user’s
end-to-end experience.
This may be done as part of the evaluation or in conversations within the design team. If the storyboard focuses
on the screens, this can be translated almost directly into a card-based prototype and used in this way. Another way to
produce a card-based prototype is to generate one from a use case output from the requirements activity.