1|P a g e

Table of Contents
Module 1

Lesson 1 – Design, Design, Design

Introduction 3

Activity and Analysis 3

Abstraction

What is Interaction Design 4

Interaction Design vs. Other approaches 5

Good and Poor Design 6

The User Experience 8

Usability and Usability Goals 9

Perception 12

Cognitive Aspects 14

Application 16

Closure 16

1| IT 126 Interaction Design

 Module

1
Interaction Design 101
In this Module

 Design, Design, Design

 Process of Interaction Design
 Being Social

Module Overview

Module 1 of Interaction Design introduces how vital interaction is in designing a product.

It discusses how it relates to the traditional human-computer interaction and other field
of design, introduction to UX and UI, presentation of perception, and cognition. In lesson
2, it will deal with the interaction design process, examining each process and giving real-
life examples. And the last part of the module will explain social interaction, which most
of us often use but barely even know. At the end of this module, students should be able
to:

 Describe what interaction design is and how it relates to human-computer

interaction and other fields
 Explain the difference between good and poor interaction design
 Discuss the relationship between the user experience and usability
 Examine what is cognition and its importance in interaction design

This module has three parts:

Lesson 1 – Design, Design, Design
Lesson 2 – Process of Interaction Design
Lesson 3 – Being Social

2| IT 126 Interaction Design

 Lesson 1 – Design, Design, Design

By the end of this lesson, you should be able to do the following:

 Understand what interaction design is and how it differs from other IT approaches
 Identify good and poor design based on usability and usability goals
 Evaluate the benefits of perception and cognitive aspects in designing interactive
products

Time Frame: 10 hours

Activity

Let's start the lesson with a question: For you, what are the characteristics of a good and
bad design? List them below.

Good Design Bad Design

Analysis

Before we proceed to the discussion, I am hoping you could answer the KWL chart below
about our topic.

What I know about the words

What I want to know What I learned
“interaction” and “design”

3| IT 126 Interaction Design

 Abstraction

Design is not just what it looks like and feels like. Design is how it works

Steve Jobs

What is Interaction Design?

By interaction design, we mean designing interactive products to support the way

people communicate and interact in their everyday and working lives.

SAFFER EMPHASIZES ITS ARTISTIC

ASPECTS: “THE ART OF
FACILITATING INTERACTIONS
BETWEEN HUMANS THROUGH
PRODUCTS AND SERVICES”

It is about creating user experiences that enhance and augment the way people work,
communicate, and interact. More generally, Winograd describes it as “designing spaces
for human communication and interaction” (1997, p. 160)

Figure 1.1 Interdisciplinary overlapping fields

4| IT 126 Interaction Design

Interaction Design vs. Other Approaches

The differences between interaction design and the other approaches referred to in
figure 1.1 are largely down to which methods, philosophies, and lenses they use to study,
analyze, and design computers. Another way they vary is in terms of the scope and
problems they address. For example, Information Systems is concerned with the
application of computing technology in domains like business, health, and education. In
contrast, Computer-Supported Cooperative Work (CSCW) is concerned with supporting
multiple people working together using computer systems (Greif, 1988).

How does interaction design differ from other approaches to the design of computer-
based systems, such as software engineering? A simple analogy to another profession
concerned with creating buildings may clarify this difference. In his account of interaction
design, Winograd (1997) asks how architects and civil engineers differ when faced with
building a house. Architects are concerned with the people and their interactions with
each other and with the house being built. For example, is there the right mix of family
and private spaces? Are the areas for cooking and eating near to each other? Will people
live in the room being designed in the way it was intended to be used?

In contrast, engineers are interested in issues to do with realizing the project. These
include practical concerns like cost, durability, structural aspects, environmental aspects,
fire regulations, and construction methods. Just as there is a difference between
designing and building a house, there is a distinction between designing an interactive
product and engineering the software for it.

ID is concerned with: HCI Process involves

 Theory  Design
 Research  Implementation
 Practice of designing user  Evaluation
experiences for all manner of
technologies, systems, and
products

5| IT 126 Interaction Design

Good and Poor Design

A central concern of interaction design is to develop interactive products that are usable.
Usable meant easy to learn, effective to use, and providing an enjoyable user
experience.

A good place to start thinking about how to design usable interactive products is to
compare examples of well and poorly-designed ones.

Example 1:

TIP 1:
UNDERSTAND WHAT YOUR USERS NEED, THEN DESIGN BASED ON
THAT. THIS HELPS REDUCE INFORMATION OVERLOAD.
HAVE LOTS OF INFORMATION TO CONVEY TO YOUR USERS?
TRY USING VISUALS INSTEAD OF TEXT.

6| IT 126 Interaction Design

Example 2:

TIP 2:

CLEVER DESIGNS SHOULD ALWAYS BE MADE AS FOOLPROOF AS

POSSIBLE, AND/OR TESTED ON ACTUAL USERS.
SOMETIMES, CLEVER DESIGNS CAN BACKFIRE AND HURT USABILITY.

Example 3:

TIP 3:
IN MAKING OR DESIGNING WEBSITES, ALWAYS LABEL YOUR
LINKS! YOU WOULDN’T LIKE TO EAT MYSTERY MEAT—AND
SIMILARLY, YOUR USERS WOULDN’T LIKE TO CLICK ON MYSTERY
LINKS.

7| IT 126 Interaction Design

 TIP 4:
ALWAYS MAKE YOUR ANIMATION PURPOSEFUL: TOO MUCH CAN
KILL THE UX OF A PRODUCT. BEAUTY HAS TO PULL ITS WEIGHT AND
BE FUNCTIONAL.

According to Rachel Nabors from W3C, these principles of animation should be observed:

 Think before creating it

 Think beyond the 12 principles of animation (Disney)
 Useful and necessary first, beauty second
 Aim to be fast
 Kill switch

The User Experience

The user experience (UX) is central to interaction design. This means how a product
behaves and is used by people in the real world.

As stressed by Garrett (2010, p. 10), “every product that is used by someone has a user
experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.” More
specifically, it is about how people feel about a product and their pleasure and
satisfaction when using it, looking at it, holding it, and opening or closing it.

It is essential to point out that one cannot design a user experience, only design for a
user experience. In particular, one cannot design a sensual experience but only create
the design features that can evoke it. For example, the outer case of a cell phone can be
designed to be smooth, silky, and fit in the palm of a hand; when held, touched, looked
at, and interacted with, that can provoke a sensual and satisfying user experience.

Conversely, if it is designed to be heavy and awkward to hold, it is much more likely to

end up providing a poor user experience, one that is uncomfortable and unpleasant.

8| IT 126 Interaction Design

Usability and Usability Goals

Usability refers to the quality of the interaction in terms of parameters such as time
taken to perform tasks, number of errors made and the time to become a competent
user.

Usability refers to ensuring that interactive products are easy to learn, effective to use,
and enjoyable from the user's perspective. It involves optimizing the interactions people
have with interactive products to enable them to carry out their activities at work, at
school, and in their everyday lives.

Usability Goals:

 effective to use (effectiveness)

 efficient to use (efficiency)
 safe to use (safety)
 have good utility (utility)
 easy to learn (learnability)
 easy to remember how to use (memorability)

Usability goals are typically operationalized as questions. The purpose is to provide the
interaction designer with a concrete means of assessing various aspects of an interactive
product and the user experience. By answering the questions, designers can be alerted
very early on in the design process to potential design problems and conflicts that they
might not have considered.

ONE OF THE KEY CHARACTERISTICS OF ID PROCESS IS FOR USABILITY

AND USER EXPERIENCE GOALS TO BE IDENTIFIED, CLEARLY
DOCUMENTED, AND AGREED UPON AT THE BEGINNING OF THE
PROJECT.

9| IT 126 Interaction Design

1. Effectiveness is a very general goal and refers to how good a system is at doing what it
is supposed to do.

Question:

Is the system capable of allowing people to learn well, carry out their work efficiently,
access the information they need, buy the goods they want, and so on?

2. Efficiency refers to the way a system supports users in carrying out their tasks. An
efficient way of supporting common tasks is to let the user use single button or key
presses.

Question:

Once users have learned how to use a product to carry out their tasks, can they sustain a
high level of productivity?

3. Safety involves protecting the user from dangerous conditions and undesirable situations.

Example: Where there are hazardous conditions-like X-ray machines or chemical plants--
operators should be able to interact with and control computer-based systems remotely.

Question:

What is the range of errors that are possible using the product and what measures are
there to permit users to recover easily from them?

4. Utility refers to the extent to which the system provides the right kind of functionality
so that users can do what they need or want to do.

Question:

Does the product provide an appropriate set of functions that will enable users to carry
out all their tasks in the way they want to do them?

10 | IT 126 Interaction Design

5. Learnability refers to how easy a system is to learn to use. It is well known that people
don't like spending a long time learning how to use a system.

This is for interactive products intended for everyday use(e.g., interactive TV, email) and
those used only infrequently (e.g., videoconferencing).

Question:

Is it possible for the user to work out how to use the product by exploring the interface
and trying out certain actions? How hard will it be to learn the whole set of functions in
this way?

6. Memorability refers to how easy a system is to remember how to use, once learned.
This is especially important for interactive systems that are used infrequently.

If users haven't used a system or an operation for a few months or longer, they should be
able to remember or at least rapidly be reminded how to use it.

Question:

What kind of interface supports have been provided to help users remember how to
carry out tasks, especially for products and operations they use infrequently?

Consider

Avoid

Table 1.1 User Experience Goals

11 | IT 126 Interaction Design

Perception

Our perception of the world around us is not a true depiction of what is actually there.
Our perceptions are heavily biased by at least three factors:

 The past: our experience

 The present: the current context
 The future: our goals

Experience—your past perceptions—can bias your current perception in several

different ways.

Figure 1.2 Building map or word? What you see depends on

what you were told to see

When your perceptual system has been primed to see building shapes, you see building
forms, and the white areas between the buildings barely register in your perception.
When your perceptual system has been primed to see text, you see text, and the black
spaces between the letters barely register.

Figure 1.3 Image showing the effect of mental priming of the

visual system. What do you see?

12 | IT 126 Interaction Design

Only after you are told that it is a Dalmatian dog sniffing the ground near a tree can your
visual system organize the image into a coherent picture. Moreover, once you’ve seen
the dog, it is hard to go back to see just a random collection of spots.

Figure 1.4 The “Next” button is perceived to be in a consistent

location, even when it isn’t.

Much of our lives are spent in familiar situations: the rooms in our homes, our yards, our
routes to and from school or work, our offices, neighborhood parks, stores, restaurants,
etc. Repeated exposure to each type of situation builds a pattern in our minds of what to
expect to see there. These perceptual patterns, which some researchers call frames,
include the objects or events encountered in that situation.

For example, if the positions of the "Next" and "Back" buttons on the last page of a
multistep dialog box2 switched, many people would not immediately notice the switch
(see Fig. 1.4). Their visual system would have been lulled into inattention by the buttons'
consistent placement on the several prior pages. Even after unintentionally going
backward a few times, they might continue to perceive the buttons in their standard
locations. This is why consistent placement of controls is a standard user-interface
guideline to ensure that reality matches the user's frame for the situation.

13 | IT 126 Interaction Design

Cognitive Aspects

The study of human cognition can help us understand these and other new kinds of
computer-augmented behaviors by examining humans’ abilities and limitations when
interacting with technologies.

• EXPERIENTIAL • FAST THINKING

• REFLECTIVE COGNITION • SLOW THINKING
NORMAN (1993) KAHNEMAN (2011)

Experiential Cognition or Fast Thinking

A state of mind in which we perceive, act, and react to events around us intuitively and
effortlessly. It requires reaching a certain level of expertise and engagement.

Example:

• driving a car
• reading a book
• having a conversation
• playing a video game

Reflective Cognition or Slow Thinking

Involve mental effort, attention, judgment, and decision making. This kind of cognition is
what leads to new ideas and creativity.

Example:

• designing
• learning
• writing a book

14 | IT 126 Interaction Design

Cognition has also been described in terms of specific kinds of processes

• attention
• perception
• memory
• learning
• reading, speaking, and listening
• problem solving, planning, reasoning, and decision making

It is important to note that many of these cognitive processes are interdependent:

several may be involved for a given activity

For example, when you try to learn material for an exam, you need to attend to the
material, perceive and recognize it, read it, think about it, and try to remember it.

Attention

• The process of selecting things to concentrate on

• Involves auditory and/or visual senses
• Auditory example: When someone calls your name during a queue
• Visual example: Scanning result of the lotto if you won
Attention allows us to focus information that is relevant to what we are doing.

Multitasking

While focusing on something (someone), we switch constantly between others.

For example

Every 5 or 10 minutes while writing this lecture, I check my email, breaking off sometimes
in mid-sentence to see who has sent me a message and then finding myself diverted to
looking at the latest news item or URL recommended by a colleague. Like nearly
everyone else, I am addicted; I can't stop myself from looking.

15 | IT 126 Interaction Design

 Application

Now, for your first exercise:

• Take at least three images showing billboards, signs, etc., which you think
shows bad/poorly executed design.

• Improve the design (you can use any medium: paint, Photoshop, drawing,
sketch)

• Explain why you consider them as poor design and why you made those
improvements

Use a PDF file to submit your activity together with the Activity and Analysis on page 3.

A link will be provided in the UVE and the filename should be Activity1_your Lastname.

Closure

Congratulations! You just completed Lesson 1. The knowledge and skills you gained in
this lesson will prepare you for the next about The Process of Interaction Design.

16 | IT 126 Interaction Design