Photo by Kaboompics .

com from Pexels

Module 3

User Interaction Design

Information Technology and

Information Systems Department
 Course
Intended Synthesize information on how
to apply User Experience Design
Learning in a User Interaction Design.

Outcomes

Information Technology and

Information Systems Department
Topic Outline

Questions to
5 Major Characteristics Consider when
of Interaction Design Designing for
Interaction

2 4
User Interaction 5 Dimensions of Best Practices in UI
Design: Definition Interaction Design Design

1 3 5
Information Technology and
Information Systems Department
Topic 1

User Interaction Design: Definition

Information Technology and

Information Systems Department
 User Interaction
 This is the users exchange of actions with
a solution.
 Exchange of actions are composed of
physical and emotional aspects that are
triggered by the solution’s display, user’s
input and solution’s feedback. [1]

Information Technology and

Information Systems Department
 User Interaction
Design
 The design of interaction between the user
and the solution.
 The creation of communication between the
user and the solution.
 The process of making an assurance that the
user and the solution understands each
other.

Information Technology and

Information Systems Department
Photo by Christina Morillo from Pexels
 User Interaction
Design and User
Experience Design
 User Interaction Design and User Experience
are not the same.
 User Interaction Design is a part of User
Experience Design.

Image by Dan Saffer Information Technology and

Information Systems Department
 User Interaction
Designer
 User Interaction Designers focus on the way
users interact with products and they use
principles of good communication to create
desired user experiences. [1]

Photo by picjumbo.com from Pexels

Information Technology and

Information Systems Department
Topic 2

5 Major Characteristics of
Interaction Design
Information Technology and
Information Systems Department
5 Major Characteristics of Interaction Design
[3]

01 It changes situations by shaping and deploying artifacts.

02 It explores possible futures.

03 It frames the problem in parallel with possible solutions.

04 It requires thinking through “sketching” and other

“tangible representations”

05 It addresses instrumental, technical, aesthetic and ethical

aspects throughout the process.

Information Technology and

Information Systems Department
Topic 3

5 Dimensions of Interaction Design

Information Technology and

Information Systems Department
 Words
1D Words encompass text, which helps convey the right amount of
information to users. Example, like button labels, should be
meaningful and simple to understand. They should communicate
information to users without overwhelming them with too many
details.

Visual Representation

5 Dimensions of
2D Visual representations include typography, icons, and other
graphics with which users interact. Visual representations usually
supplement the words used to communicate information to users.

Interaction Design [4]

3D
Physical Objects or Space
Physical objects are a medium through which users interact with
the product or service. For instance, a user interacts with
 A useful model for understanding what computers and a mouse while sitting on a desk in an office space.
interaction design involves.
 Created by Gillian Crampton Smith, an Time
interaction design academic, with four 4D Time helps users understand visual changes in a UI; it also
dimensions.
helps users track their progress.
 Later revised with fifth dimension by Kevin
Silver.
Behavior
5D Behavior includes both action and reaction. Behavior is what
describes the mechanism of an interaction with a product.

Information Technology and

Information Systems Department
Topic 4

Important Questions Interaction

Designers Ask
Information Technology and
Information Systems Department
 Important Questions
Interaction Designers Ask
[4]

What can a user do with their mouse, finger, or stylus to

directly interact with the interface? This helps us define the
possible user interactions with the product.

What about the appearance (color, shape, size, etc.) gives the
user a clue about how it may function? This helps us give users
clues about what behaviors are possible.

Do error messages provide a way for the user to correct the

problem or explain why the error occurred? This lets us
anticipate and mitigate errors.

Information Technology and

Information Systems Department Photo by fauxels from Pexels
 Important Questions
Interaction Designers Ask
[4]

What feedback does a user get once an action is performed?

This allows us to ensure that the system provides feedback
in a reasonable time after user actions.
Are the interface elements a reasonable size to interact with?
Questions like this helps us think strategically about each
element used in the product.

Are familiar or standard formats used? Standard elements and

formats are used to simplify and enhance the learnability of a
product

Information Technology and

Information Systems Department
Photo by fauxels from Pexels
Topic 5

Best Practices in UI Design

Information Technology and
Information Systems Department
 Best Practices in UI
Design
[5]

Keep the interface simple.

Create consistency and use common UI elements.

Be purposeful in page layout.

Photo by Lukas from Pexels

Strategically use color and texture

Information Technology and

Information Systems Department
Best Practices in UI
Design
[5]

Use typography to create hierarchy and clarity.

Make sure that the system communicates

what’s happening.

Think about the defaults. Photo by Gustavo Fring from Pexels

Information Technology and

Information Systems Department
Summary

User Interaction is the users exchange of actions with a solution.

User Interaction Design is a he creation of communication between the user
and the solution..
User Interaction Designers focus on the way users interact with products and
they use principles of good communication to create desired user
experiences

Information Technology and

Information Systems Department
References

[1] Babich, Nick, “What is Interaction Design & How does it Compare to
UX?,” Adobe.com, October 16, 2019. [Online]. Available:
https://xd.adobe.com/ideas/principles/human-computer-
interaction/what-is-interaction-
design/#:~:text=Interaction%20designers%20are%20focused%20on,th
ey%20interact%20with%20a%20product. [Accessed July 27, 2020].
[2] Saffer, Dan, Designing for Interaction: Creating Innovative Applications
and Devices (2nd Edition) (Voices That Matter). New Riders. 2009
[3] Interaction Design Foundation, “5 Main Characteristics of Interaction
Design,” Interaction-Design.org, 2016. [Online]. Available:
https://www.interaction-design.org/literature/article/the-5-main-
characteristics-of-interaction-design. [Accessed July 27, 2020].

Information Technology and

Information Systems Department
References

[4] TeoYu Siang, “What is Interaction Design,” interaction-design.org, July

26, 2020. [Online]. Available: https://www.interaction-
design.org/literature/topics/usability-testing. [Accessed July 31, 2020]
[5] usability.gov, “User Interface Basics,” usability.gov, July 31, 2020.
[Online]. Available: https://www.usability.gov/what-and-why/user-
interface-design.html. [Accessed July 31, 2020]

Information Technology and

Information Systems Department
 Prepared by:
Mrs. Charlene I. Vergara – Gonzales, MIT,MTA

Information Technology and

Information Systems Department
 Information Technology and
Information Systems Department