The document discusses key aspects of usability as it relates to user experience (UX). It defines usability as a measure of how effectively, efficiently, and satisfactorily users can use a product to achieve goals. The document outlines several ways to design for optimal usability, including understanding user goals, mimicking the real world, limiting options, and thorough testing. It also describes the three main outcomes of a usable interface as easy first contact, ability to achieve objectives, and easy recall on subsequent visits.

1. USABILITY:
PART OF USER
EXPERIENCE (UX)
ITEC
80:
Usabil
ity
(P
art
of
UX)
Edneil D. Jocusol, ECT, MTM
Faculty, Dep. of Information Technology
Cavite State University - Gen. Trias
Soegaard, M. (2020, July 28). Usability: A part of the User Experience. The Interaction Design Foundation.
https://www.interaction-design.org/literature/article/usability-a-part-of-the-user-experience

2. WHAT IS
USABILITY?
Definition
Usability = "user-friendly" (1990s)
Usability is a measure of how well a
specific user in a specific context can
use a product/design to achieve a
defined goal effectively, efficiently and
satisfactorily. Designers usually measure
a design’s usability throughout the
development process—from wireframes
to the final deliverable—to ensure
maximum usability.
I
T
E
C
8
0
:
U
s
a
b
i
l
i
t
y
(
P
a
r
t
o
f
U
X
)
|
2
0
2
1

3. USER EXPERIENCE
USABILITY

4. LEVELS AS WORLD
VIEWS
Essential. To view a world one needs a view perspective.
Empirical. It arises from interaction with the world.
Complete. It consistently describes a whole world.
Subjective. We choose a view perspective, explicitly or not.
Exclusive. You cannot view the world in two different ways at
the same time, as you cannot sit in two places at once.
Emergent. One world view can emerge from another.
A world view is:
1.
2.
3.
4.
5.
6.
Q
U
I
C
K
R
E
V
I
E
W

6. “Usability is about human behavior. It
recognizes that humans are lazy, get
emotional, are not interested in putting a
lot of effort into, say, getting a credit
card and generally prefer things that are
easy to do vs. those that are hard to do.”
— DAVID MCQUILLEN, EX-SWISS BANKER AND FOUNDER
OF SUFFERFEST CYCLING WORKOUT RESOURCES
I
T
E
C
8
0
:
U
s
a
b
i
l
i
t
y
(
P
a
r
t
o
f
U
X
)
|
2
0
2
1

8. How to
Design for
Optimum
Usability?
Work with a clear understanding of users’goals and show it in
your design.
Mimic the real world regarding concepts, icons and language.
Present instantly understandable, jargon-free messages and
actions users can take—one chief action per screen.
Limit options to give a strong information scent on an
uncluttered display—show essential information for completing
tasks.
Keep content consistent.
Follow established norms regarding function and layout (e.g., logo
positioning, tappable buttons).
Use proper font size, color, contrast, whitespace, etc. to:
combine aesthetic appeal with scanning readability,
present a clear, logical information hierarchy,
design for accessibility.
1.
2.
3.
4.
5.
6.
7.

9. How to
Design for
Optimum
Usability?
8. Use chunking and emphasize key information at the beginning and
end of interactive sequences.
9. Offer informative feedback about system status.
10. Include helpful navigation systems and search functionality.
11. Allow for customizable controls, including shortcuts.
12. Avoid disruptions – e.g., forced logins/pop-ups.
13. Make forms easy to complete.
14. Include warnings and autocorrect features to minimize errors.
15. Make errors easy to diagnose.
16. Offer easy-to-understand help documentation.
17. Show clear contact options.
18. Provide a back button to undo actions.
19. Include ALT tags to show more information about images.
20. Consider server abilities regarding page-loading time and downtime.
21. Beware of in-app browsers and restriction in mobile design.
22. Make links active. Describe links accurately.
23. Use user personas.
24. Do thorough usability testing.

10. 3 MAIN OUTCOMES
OF A USABLE INTERFACE
FIRST CONTACT
I
T
E
C
8
0
:
U
s
a
b
i
l
i
t
y
(
P
a
r
t
o
f
U
X
)
|
2
0
2
1
It should be easy for the user
to become familiar with and
competent in using the user
interface on the first contact
withtheplatform.
OBJECTIVE
It should be easy for users to
achieve their objective in
using the platform (e.g. if
booking a flight, must be able
tobuyaticket).
RECALL
It should be easy to recall the
user interface and how to use
it on subsequent visits. (e,g,
second visit should be easy
andauto-pilot).

28. USABILITY TEST
Compare
&
Act
Users can navigate to “buy” button in 294 seconds, on average.
Returning users navigate to “buy” button in 209 seconds, on average.
18% of users bought a ticket on finding landing page.
42% of users went no further than the landing page.
Users can navigate to “buy” button in 198 seconds, on average.
Returning users navigate to “buy” button in 135 seconds, on average.
32% of users bought a ticket on finding landing page.
12% of users went no further than the landing page.
Our design
Happy Huzzah’s Getcha There, Inc.

29. FUNNEL
ANALYSIS
Bonnie, E. (2020, August 5). Funnel Analysis: How
Funnel Analytics Can Increase Conversions.
CleverTap. https://clevertap.com/blog/funnel-
analysis/
SOURCE:

30. USABILITY
ELEMENTS
Author/Copyright holder: yukti.io Copyright terms
and license: CC BY-SA 3.0
DISCLAIMER:

31. WEB DEVELOPMENT & DESIGN
CONSIDERATIONS FOR USABILITY
SERVER HTML VISUAL FACTORS
Speed
Downtime
Alt Tags
404 Not Found Page
Font size, branding, color,
navigation, content,
headings, & paragraphs

32. Corona, B. (2020, November 30). Image SEO: How to Optimize Images for Search | Image Alt Tag
SEO. Blue Corona. https://www.bluecorona.com/blog/image-seo-alt-tags-title-tags-in-between/

33. 404 ERROR
A 404 page is a landing page that tells your site viewers the requested page is unavailable
or, in some cases, doesn’t exist. It tells users the page cannot be accessed – and it can be
a major problem.
DEAD END! SECOND CHANCES!

34. COLOR
PSYCHOLOGY
Alzain, A. (2015). Abdulaziz Alzain on. Twitter.
https://twitter.com/aalzain/status/63357514037
5298048
SOURCE:

35. TAILORBRANDS
Tailor Brands is an automated branding platform. We give you all the tools you need to
turn your idea and business into a professional brand. Its mission is to democratize
branding, and make it simple for anyone to get their business off the ground.

36. TAILORBRANDS Customizations (Part 1)

37. TAILORBRANDS Customizations (Part 2)

38. TAILORBRANDS Customizations (Part 3)

39. TAILORBRANDS Customizations (Part 4)

40. TAILORBRANDS Customizations (Part 5)

41. FIVE (5)
DIMENSIONS OF
INTERACTIVE
DESIGN
CORE AREAS
Usability
Useful Content
Desirable and/or
Pleasurable Content
Accessibility
Credibility
1.
2.
3.
4.
5.
I
T
E
C
8
0
:
U
s
a
b
i
l
i
t
y
(
P
a
r
t
o
f
U
X
)
|
2
0
2
1

42. REFLECTION PAPER
Assessment
INSTRUCTIONS:
1. Write a 1 to 2-page essay/reaction paper.
2. Discuss the 5 Dimensions of Interactive Design (Slide 41) and 3 Main
Outcomes of Usable Interface (Slide 10) of www.facebook.com
3. The paper should be integrative (i.e., includes and connects insights from the
assigned website/platform) and answers the following questions:
a. What did I learn? What resonated with me?
b. Why does this learning matter or why is it significant?
c. How can I apply this to my project or workplace or how can I benefit from
my insights from the articles?