FM-AA-CIA-15 Rev.

0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 4

STUDY GUIDE FOR MODULE NO. 4

Unit 4 – UX: Emotion and Experience

MODULE OVERVIEW

User experience (UX) design is the process design teams use to create products that provide
meaningful and relevant experiences to users. This involves the design of the entire process
of acquiring and integrating the product, including aspects of branding, design, usability and
function.

MODULE LEARNING OBJECTIVES

At the end of this, students are expected to:

1. Explain the difference of UX vs UI.
2. Discuss the 4 stages of UX.
3. Explain the user persona, use cases, user flows, wireframes and prototypes.

LEARNING CONTENTS (UX vs UI)

It is the process of enhancing user satisfaction with a product improving:

• Usability
• Accessibility
• Pleasure
The people you have eavesdropped on are actually discussing two professions that, despite having
been around for decades, and in theory for centuries, have been defined by the tech industry as UX
and UI design.

UX design refers to the term “user experience design”, while UI stands for “user interface design”.
Both elements are crucial to a product and work closely together. But despite their professional
relationship, the roles themselves are quite different, referring to very different aspects of the
product development process and the design discipline. Before we consider the key differences
between UX and UI, let’s first define what each term means individually.

User experience design is a human-first way of designing products. Don Norman, a cognitive
scientist and co-founder of the Nielsen Norman Group Design Consultancy, is credited with coining
the term “user experience” in the late 1990s. Here’s how he describes it:

“User experience encompasses all aspects of the end-user’s interaction with the company, its

PANGASINAN STATE UNIVERSITY 1

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 4

services, and its products.”

– Don Norman, Cognitive Scientist & User Experience Architect

For now, here’s what you need to know about UX design in a nutshell:

• User experience design is the process of developing and improving the quality of interaction
between a user and all facets of a company.
• User experience design is, in theory, a non-digital (cognitive science) practice, but used and
defined predominantly by digital industries.
• UX design is NOT about visuals; it focuses on the overall feel of the experience.

Despite it being an older and more practiced field, the question of “What is user interface design?”
is difficult to answer because of its broad variety of misinterpretations. While user experience is a
conglomeration of tasks focused on the optimization of a product for effective and enjoyable use,
user interface design is its complement; the look and feel, the presentation and interactivity of a
product.

What you need to know about UI:

• User interface design is a purely digital practice. It considers all the visual, interactive elements
of a product interface—including buttons, icons, spacing, typography, color schemes, and
responsive design.
• The goal of UI design is to visually guide the user through a product’s interface. It’s all about
creating an intuitive experience that doesn’t require the user to think too much!
• UI design transfers the brand’s strengths and visual assets to a product’s interface, making sure
the design is consistent, coherent, and aesthetically pleasing.

The main difference to bear in mind is this: UX design is all about the overall feel of the experience,
while UI design is all about how the product’s interfaces look and function.

Hopefully you’re now starting to see how UX and UI design are indeed two very different things. To
summarize:

• UX design is all about identifying and solving user problems; UI design is all about creating
intuitive, aesthetically-pleasing, interactive interfaces.

PANGASINAN STATE UNIVERSITY 2

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 4

• UX design usually comes first in the product development process, followed by UI. The UX
designer maps out the bare bones of the user journey; the UI designer then fills it in with visual
and interactive elements.
• UX can apply to any kind of product, service, or experience; UI is specific to digital products and
experiences.

• LEARNING ACTIVITY 1

Create a user persona, wireframes and low fidelity prototype of the proposed application.

LEARNING CONTENTS (Four Stage of UX)

Figure 1. The 4 Stages of UX

1. Research
The first step to both UI and UX design starts with research. Understanding who your audience is,
what their needs are and what purpose they will be using your site or app for. Some forms of
research include interviewing potential customers or users and finding competitors. It is important
that both the UI designers and UX developers are involved in the process so that everyone can
brainstorm, make suggestions and come up with solutions to roadblocks and problem areas.

2. Analysis
By researching your audience and competitors, you can start to understand their needs, their
lifestyle or hidden preferences. You can then develop a product (website) that suits your audience
and caters to their needs. By interviewing core stakeholders or potential customers, you might find
out, for example, that they do not like to spend a lot of time at order checkout. This will inform your
site navigation, layout etc. After your analysis is done, you can create your personas, storyboards
and create tangible tasks for your design team.

PANGASINAN STATE UNIVERSITY 3

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 4

3. Design
By starting with a mockup, you can create different versions for yourself. This is the exploratory
phase that will lead to sitemaps, wireframes and prototypes.

Sitemaps show the structure of a website and the relationship between different pages. It shows
where content goes and what is missing. Sitemaps also helps you see how a user will navigate the
site and if it is user-friendly.

Wireframes help you envision a floor plan for your website or app. This way you will be able to
understand where content goes and what type of design you want to see. A wireframe will help you
visualize where elements will be placed.

Prototypes allow you to transform your wireframe into an interactive design. At this stage, you can
conduct user-testing and receive feedback on what they liked or disliked about the interactions. At
this point both UI and UX designers can be involved and determine any problem areas before
coding the website.

4. User Testing
You can now conduct a thorough testing of the prototype you have built. You can do this by looking
at user interactions on your website, sending out surveys or questionnaires and interviewing users
to help further simplify your website or identify problem areas. It’s important you do this as soon as
possible to avoid issues being unattended to. This may mean you have to return to the early stages
in the process where you were first building out your design.

LEARNING ACTIVITY 2

Write-up regarding the proposed Web/Mobile App (Concept Paper) (Collaborative)

LEARNING CONTENTS (the user persona, use cases, user flows, wireframes and prototypes.)

User Persona
Fictional character which you can create based upon your research in order to represent the
different user types that might want to use your service, product, or site.

Help uncover the different ways:

• People search for
• Buy
• Use products

PANGASINAN STATE UNIVERSITY 4

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 4

Whether you’re developing a smartphone app or a mobile-responsive website, it’s very important to
understand who will be using the product. In order to solve a real user problem, you need to have a
clear problem statement in mind; in order to write this problem statement, you first need to
understand your users and their needs.

Knowing your audience will help influence the features and design elements you choose, thus
making your product more useful. A persona clarifies who is in your target audience by answering
the following questions:

Who is my ideal customer?

What are the current behavior patterns of my users?
What are the needs and goals of my users?
What issues and pain-points do they currently face within the given context?
Understanding the needs of your users is vital to developing a successful product. Well-defined
personas will enable you to efficiently identify and communicate user needs. Personas will also help
you describe the individuals who use your product, which is essential to your overall value
proposition.

Personas help with strategizing and making smart design decisions. They make real users
memorable for the product team, helping to focus efforts and build empathy.

How to create a user persona?

Whether you’re working independently or as part of a dedicated product team, these are the four
stages of creating a user persona:

1. Choose questions for your survey

2. Set up a survey on popular page
3. Analyze your data
4. Build persona

PANGASINAN STATE UNIVERSITY 5

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 4

Figure 2. The User Persona

Use Cases

Graphical representation of how users will perform tasks. It outlines, from a user’s point of view, a
system’s behavior as it responds to a request. Each use case is represented as a sequence of
simple steps, beginning with a user's goal and ending when that goal is fulfilled. This Includes:
• Actor
• Use Case
• Relationship

Figure 3. Use Case Diagram

PANGASINAN STATE UNIVERSITY 6

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 4

Benefits of Use Cases

Use cases add value because they help explain how the system should behave and in the process,
they also help brainstorm what could go wrong. They provide a list of goals and this list can be
used to establish the cost and complexity of the system. Project teams can then negotiate which
functions become requirements and are built.

Wireframes
A skeleton representation of the UI and the various components that makes up the UI.
The aim of a wireframe is to provide a visual understanding of a page early in a project to get
stakeholder and project team approval before the creative phase gets under way. Wireframes can
also be used to create the global and secondary navigation to ensure the terminology and structure
used for the site meets user expectations.

Figure 4. The Wireframes

Advantages of Wireframing
One of the great advantages of wireframing is that it provides an early visual that can be used to
review with the client. Users can also review it as an early feedback mechanism for prototype
usability tests. Not only are wireframes easier to amend than concept designs, once approved by
the client and the users they provide confidence to the designer.
Disadvantages of Wireframing
As the wireframes do not include any design, or account for technical implications, it is not always
easy for the client to grasp the concept. The designer will also have to translate the wireframes into
a design, so communication to support the wireframe is often needed to explain why page elements
are positioned as they are. Also, when content is added, it might initially be too much to fit within the
wireframe layout, so the designer and copywriter will need to work closely to make this fit.

PANGASINAN STATE UNIVERSITY 7

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 4

Prototyping
A creation of the initial UI design which may be interactive or may not be interactive.
An experimental process where design teams implement ideas into tangible forms from paper to
digital. Teams build prototypes of varying degrees of fidelity to capture design concepts and test on
users. With prototypes, you can refine and validate your designs so your brand can release the right
products.

Figure 5. Sample Prototyping

Why should we prototype?
• Obtain early feedback on design alternatives
• Give concrete examples to elicit feedback
• Show what is possible
• Create better designs
• Useful in communicating concepts
Usability Reporting - Observe real users using the product through a variety of means.
Slit Testing - Testing the effectiveness of one design iteration over another.
Analytics Reporting - Gaining additional insights such time spent on pages, bounce rate and
more.

LEARNING ACTIVITY 3

1. Watch the following video about prototypes and wireframes in youtube and make a reflection in 1
whole sheet of paper. The links of the following videos are in below:
https://www.youtube.com/watch?v=miVcrftnhzM

https://www.youtube.com/watch?v=hBjlDJGyFL8
2. Create a user persona, use case diagram, wireframe and low fidelity prototype for the mobile/web
app that you proposed

PANGASINAN STATE UNIVERSITY 8

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 4

SUMMARY

❖ UX design refers to the term “user experience design”, while UI stands for “user interface
design”. Both elements are crucial to a product and work closely together.
❖ User experience (UX) Design: is the process design teams use to create products that
provide meaningful and relevant experiences to users.
❖ User Interface (UI) Design: the means by which the user and a computer system interact, in
particular the use of input devices and software.
❖ User Persona - a Fictional character which you can create based upon your research in
order to represent the different user types that might want to use your service, product, or
site.
❖ Understanding who your audience is, what their needs are and what purpose they will be
using your site or app for. Some forms of research include interviewing potential customers
or users and finding competitors.
❖ You can then develop a product (website) that suits your audience and caters to their
needs. By interviewing core stakeholders or potential customers, you might find out, for
example, that they do not like to spend a lot of time at order checkout.
❖ Sitemaps - how the structure of a website and the relationship between different pages.
❖ Wireframes - help you envision a floor plan for your website or app.
❖ Prototypes - allow you to transform your wireframe into an interactive design.
❖ Usability Reporting - Observe re al users using the product through a variety of means.
❖ Slit Testing - Testing the effectiveness of one design iteration over another.
❖ Analytics Reporting - Gaining additional insights such time spent on pages, bounce rate and
more.

REFERENCES

Dix, A., Finlay, J. Abowd, G. D., and Beale, R. (2004). Human Computer Interaction, 3rd ed.
Pearson Education Ltd.

E-SOURCES:
https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-
guide/

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

https://www.fivestardev.com/blog/4-steps-ui-and-ux-process

http://hci.liacs.nl/lectures

PANGASINAN STATE UNIVERSITY 9