Course Code: ITE 399 – HUMAN COMPUTER INTERACTION

MODULE #2 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Lesson title: Basics of Interaction Design 1 Materials:

Lesson Objectives: SAS

References:

At the end of this module, student should be able to: https://www.uxbooth.com/articles/

complete-beginners-guide-to-
interaction-design/
1. Identify the importance of Interaction Design.

2. Understand related Interaction Design concepts. https://www.interaction-design.org/

literature/topics/ui-design
3. Create simple Interaction Design plan.

https://www.interaction-design.org/
literature/topics/ux-design

A. LESSON PREVIEW
Introduction
Interaction Design has its origins in web and graphic design, but has grown into a realm on its
own. Far from merely working with text and pictures, interaction designers are now responsible for
creating every element on the screen that a user might swipe, click, tap, or type. In short, the
interactions make up the user’s experience, hence interaction design intersects and overlaps with
experience design.
Interaction design began the day the first screen was designed to hold more than static copy.
Everything from a button to a link to a form field is part of interaction design. Over the past several
decades, interaction design has evolved to facilitate interactions between people and their
environment. Unlike user experience design, which accounts for all user-facing aspects of a system,
interaction designers are only concerned with the specific interactions between users and a screen.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #2 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

B.MAIN LESSON
Common Interaction Design Methodology
Goal-Driven Design
Goal-driven design was popularized by Alan Cooper. He defined goal-driven design as design
that holds problem solving as a highest priority. In other words, goal-driven design focuses first on
satisfying specific needs and desires of the end-user, as opposed to older methods of design which
focused on what capabilities were available on the technology side of things.
1. Design first; program second. In other words, goal-driven design begins with considerations
for how users interact (and how things look), rather than beginning with technical
considerations.
2. Separate responsibility for design from responsibility for programming. This refers to the
necessity of having an interaction designer who can champion the end-user, without worrying
about the technical constraints. A designer should be able to trust his or her developer to
handle the technical aspects; in fact, Cooper suggests that to do otherwise places the designer
in a conflict of interest.
3. Designers are responsible for product quality and user satisfaction. Though stakeholders
or clients will have their own objectives, the interaction designer has a responsibility to the
person on the other side of the screen.
4. Personas. Alan emphasized the need to connect personas back to the product, that is, where
will this person use this? Who are they? What do they want to accomplish?
5. Work in teams of two. Interaction designers should never work solo. Collaboration with
others, which Cooper calls “design communicators”, is key. The design communicator Alan
envisioned was typically a copywriter intended to provide marketing copy for products. Today
that has expanded to include a project manager, content strategist, information architect, and
many others.

Usability
Usability is one of the key concepts in HCI. It is concerned with making systems easy to learn
and use. Usability may feel like a vague term, but at its heart, designers are simply asked, “Can
someone easily use this?”. A usable system is:
● easy to learn
● easy to remember how to use
● effective to use
● efficient to use
● safe to use

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #2 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

● enjoyable to use

Why is usability important? Many everyday systems and products seem to be designed with
little regard to usability. This leads to frustration, wasted time and errors. This list contains examples
of interactive products: mobile phone, computer, personal organizer, remote control, soft drink
machine, coffee machine, ATM, ticket machine, library information system, the web, photocopier,
watch, printer, stereo, calculator, video game etc. How many are actually easy, effortless, and
enjoyable to use?
For example, a photocopier might have buttons like these on its control panel. Imagine that
you just put your document into the photocopier and set the photocopier to make 15 copies, sorted
and stapled. Then you push the big button with the "C" to start making your copies.
What do you think will happen?
(a)The photocopier makes the copies correctly.
(b)The photocopier settings are cleared and no copies are made.
If you selected (b) you are right! The "C" stands for clear, not copy. The copy button is
actually the button on the left with the "line in a diamond" symbol. This symbol is widely used on
photocopiers, but is of little help to someone who is unfamiliar with this.

The Five Dimensions

Gillian Crampton Smith, an academic in interaction design, introduced the concept of four
dimensions of an “interaction design language.” In other words, these dimensions make up the
interactions themselves, and as a result, they make up the communication between a user and the
screen. The four original dimensions are words, visual representations, physical objects or
space, and time. More recently, Kevin Silver, an interaction designer, has added a fifth
dimension, behavior.
● 1D: words should be simple to understand, and written in such a way that they communicate
information easily to the end user.
● 2D: visual representations are all graphics or images, essentially everything that is not text.
They should be in moderation and not overwhelm.
● 3D: physical objects or space refers to the physical hardware, whether it is a mouse and
keyboard, or a mobile device a user interacts.
● 4D: time is the length that the user spends interacting with the first three dimensions. It
includes the ways in which the user might measure progress, as well as sound and animation.
● 5D: behavior was added by Kevin Silver. It is the emotions and reactions that the user has
when interacting with the system.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #2 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Using these five dimensions, an interaction designer can pay attention to the very experience
the user has when communicating and connecting with a system.

Cognitive Psychology
Cognitive psychology is the study of how the mind works, and what mental processes take
place there. According to the American Psychological Association, these processes include
“attention, language use, memory, perception, problem solving, creativity, and thinking.”
While psychology is an immensely broad field, a few key elements of cognitive psychology are
particularly valued, and in fact may have helped form the field of interaction design. Don Norman
named a few:
● Mental models are the images in a user’s mind that inform their expectation of a certain
interaction or system. By learning the user’s mental model, interaction designers can create
systems that feel intuitive.
● Interface metaphors make use of known actions to lead users to new actions. For example,
the trash icon on most computers resembles a physical trash can, in order to alert a user to the
expected action
.
Affordances are things that are not only designed to do something, but are designed
to look like they are designed to do something. A button that looks like a physical object you can
push, for example, is an affordance designed so that someone unfamiliar with the button will still
understand how to interact with it.

UI Design
User interface (UI) design is what process designers use to build interfaces in software or
computerized devices, focusing on looks or style. Designers aim to create interfaces which users find
easy to use and pleasurable. UI design refers to graphical user interfaces and other forms—e.g.,
voice-controlled interfaces.

User interfaces are the access points where users interact with designs. They come in three
formats:
1. Graphical user interfaces (GUIs)—Users interact with visual representations on digital
control panels. A computer’s desktop is a GUI.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #2 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

2. Voice-controlled interfaces (VUIs)—Users interact with these through their voices. Most

smart assistants—e.g., Siri on iPhone and Alexa on Amazon devices—are VUIs.
3. Gesture-based interfaces—Users engage with 3D design spaces through bodily motions:
e.g., in virtual reality (VR) games.

To design effective UIs, you should consider:

● Users judge designs quickly and care about usability and likeability.
● They don’t care about your design, but about getting their tasks done easily and
with minimum effort.
● Your design should therefore be “invisible”: Users should not focus on it but on
completing tasks: e.g., ordering pizza on the FoodPanda app.
● So, understand the users’ contexts and task flows (which you can find from,
e.g., customer journey maps), to fine-tune the best, most intuitive UIs that deliver
seamless experiences.
● UIs should also be enjoyable (or at least satisfying and frustration-free).
● When your design predicts users’ needs, they can enjoy more personalized and
immersive experiences. Delight them, and they will keep returning.
● Where appropriate, elements of gamification can make your design more fun.
● UIs should communicate brand values and reinforce users’ trust.
● Good design is emotional design. User’s associate good feelings with brands that
speak to them at all levels and keep the magic of pleasurable, seamless
experiences alive.

UX Design
“User Experience Design” is often used interchangeably with terms such as “User Interface
Design” and “Usability.” However, while usability and user interface (UI) design are important aspects,
they are merely subsets of UX design. A
UX designer is concerned with the entire
process of acquiring and integrating a
product, including aspects of branding,
design, usability and function. It is a story
that begins before the device is even in the
user’s hands.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #2 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

For example, when using a physical device, such as a computer mouse, we can control some
aspects of the product that influence whether the user enjoys looking at, feeling and holding it:
● The way it fits in their hand. Is it snug? Is it too big and cumbersome?
● The weight. Does it affect their ability to move it as they wish?
● Its ease of use. Can they use it automatically, or do they have to think hard about it to achieve
a goal? 
When a person uses a digital product, such as a computer application, a few aspects that we
can influence include:
● How intuitively they can navigate through the system.
● The cues that help guide them to their goal.
● The visibility of the essential aspects of a task at the appropriate time.

As a UX designer, you should consider the Why, What and How of product use.

The Why involves the users’ motivations for adopting a product, whether they relate to a task they
wish to perform with it or to values and views that users associate with the ownership and use of the
product. The What addresses the things people can do with a product—its functionality. Finally,
the How relates to the design of functionality in an accessible and aesthetically pleasant way.
UX designers start with the Why before determining the What and then, finally, the How to
create products that users can form meaningful experiences with. In software designs, you must
ensure the product’s “substance” comes through an existing device and offers a seamless, fluid
experience.

Skill-building Activities
Instruction: INPUT and Modeling. Identify your favorite mobile apps and list down what
makes them your favorite.
Mobile Apps Why is it your favorite
app?
1.

2.

3.

4.

5.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #2 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Exercise 2: The Usability of the app.

Instruction: Of the mobile apps that you listed, determine what type of usability each app
belongs to. You can write several apps in one category.
Usability Mobile
Apps

Easy to learn

Easy to remember how to

use

Effective to use

Efficient to use

Safe to use

Enjoyable to use

Check For Understanding

Instruction: Identification, write what is being asked in the following statements.
_________1. This design methodology focuses
first on satisfying specific needs and desires of
the end-user, as opposed to older methods of
design which focus on capabilities that are
available on the technology side of things.
_________2. This refers to the necessity of
having an interaction designer who can
champion the end-user
_________3. This methodology implies that
interaction designers should never work solo.
_________4. It basically means “Can someone
easily use this?”
_________5. It basically asks: “How many
ways can a user interact with the system?”
_________6. This methodology implies that all
graphics or images, essentially everything that
is not textm should be in moderation and not
overwhelm.
_________7. It refers to the physical hardware

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #2 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

_________8. It is the study of how the mind _________9. It refers to the surface and
works, and what mental processes take place overall feel of a design.
there _________10. In this UI, users interact with
visual representations on digital control panels.

LESSON WRAP-UP
Thinking about Learning
a) Mark your place in the work tracker which is simply a visual to help you track how much work
you have accomplished and how much work there is left to do.
Period 1 Period 2 Period 3

1 2 3 4 5 6 7 8 9 1 11 12 13 14 1 16 17 18 19 20 2 22 23 24 25 26
0 5 1

b) Think about your learning by filling up “My Learning Tracker”. Write the learning targets, score,
and learning experience for the session and deliberately plan for the next session.
Date Learning Target/Topic Scores Action Panel

What’s the What module # did you do? What were What contributed to the quality of
date today? What were the learning targets? your scores in your performance today? What will
What activities did you do? the activities? you do next session to maintain
your performance or improve it?

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #2 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Question/s you want to ask the teacher about this module is/are:
________________________________________________________________________________
________________________________________________________________________________

This document is the property of PHINMA EDUCATION