Lesson01

Interaction design
• Accessibility and Inclusiveness
• Usability and User Experience Goals

http://fpt.edu.vn 12/01/24 2
1. What is Accessibility?
•Accessibility is the concept of whether a product or
service can be used by everyone—however they
encounter it. Accessibility laws exist to aid people with
disabilities, but designers should try to accommodate
all potential users in many contexts of use anyway. To
do so has firm benefits—notably better designs for all.

http://fpt.edu.vn 12/01/24 3
http://fpt.edu.vn 12/01/24 4
Accessibility vs Usability
•Since they have similarities, accessibility is sometimes confused
with usability. Both overlap and are vital parts of user experience
(UX) design, but there are also key distinctions between them.
Usability is concerned with whether designs are effective, efficient
and satisfying to use. Theoretically, this means that usability includes
accessibility, since a product that is inaccessible is also unusable to
someone with a disability; practically, however, usability tends not to
specifically focus on the user experience of people with
disabilities. Accessibility, on the other hand, is concerned with
whether all users are able to access an equivalent user experience,
however they encounter a product or service (e.g., using assistive
devices). Unlike usability, accessibility focuses on people with
disabilities.
http://fpt.edu.vn 12/01/24 5
Accessible Designs Help Everyone
•Accessibility is not only the right thing to do, but often
also brings benefits to all users. That’s because accessibility
features that help people with disabilities often help other
people, too. For instance, video captions that help people with
hearing difficulties also help a person who is watching the video
on mute (e.g., in a social media feed). Legible, high-contrast text
that helps people with vision difficulties also helps people with
perfect eyesight who are using the app outdoors in bright
sunlight. Many users—whatever their abilities—will face
challenges due to demanding contexts. When you design
for all ability levels, you can create products and services anyone
can use and enjoy—or at least find helpful or calming.
http://fpt.edu.vn 12/01/24 6
Although accessibility is a critical factor that impacts design,
many brands overlook it. Based on a 2011 World Health
Organization report concerning disability, however, you’ll
exclude about 15% of Earth’s population if you don’t make your
design accessible. Furthermore, many jurisdictions—including
the E.U.—have penalties for failure to create accessible
designs. However, designing for accessibility makes sense on
more than a legal level; it brings benefits, including these:
o Improved SEO from semantic HTML
o Opportunities to reach more users on more devices, in
more settings/environments
o Enhanced public image for your brand

http://fpt.edu.vn 12/01/24 7
Types of Accessibility Issues
You should consider the number and types of potential
accessibility issues users will have. These are common barriers:
•Visual (e.g., color blindness)
•Motor/mobility (e.g., wheelchair-user concerns)
•Auditory (hearing difficulties)
•Seizures (especially photosensitive epilepsy)
•Learning/cognitive (e.g., dyslexia)
Ability barriers can also arise for any user:
•Incidental (e.g., sleep-deprivation)
•Environmental (e.g., using a mobile device underground)

http://fpt.edu.vn 12/01/24 8
Practical Guidelines for Accessibility
•The World Wide Web Consortium (W3C) stipulates standards for
accessible design in its latest Web Content Accessibility Guidelines
(WCAG). You can follow these essential points to accommodate users
with diverse abilities:
•Use a content management system (CMS) supporting accessibility
standards (e.g., WordPress). Whenever you amend any pre-used
template, ensure themes were designed for accessibility.
•Include personas with varying abilities.
•Use header tags in text (optimally, use CSS for consistency
throughout). Move consecutively from one heading level to the next
(without skipping).
•Use alt text on content-enhancing images.

http://fpt.edu.vn 12/01/24 9
• Have a link strategy (i.e., describe the link before inserting it –
e.g., “Read more about the Interaction Design Foundation,
at their website” Offer visual cues (e.g., PDF icons), underline
links and highlight menu links on mouseover.
• Improve visibility with careful color selection and high contrast.
• Reference shapes to help guide users (e.g., “Click the square
button”).
• Consider how screen readers handle forms. Label fields and
give descriptions to screen readers via tags. Make the tab
order visually ordered. Assign an ARIA required or not required
role to each field (know how to use ARIA). Avoid the asterisk
convention

http://fpt.edu.vn 12/01/24 10
• Use proper HTML elements in lists. Don’t put them on
the same line as text.
• Present dynamic content carefully, including slideshows.
Consult ARIA standards for overlays, etc.
• Validate markup using the W3 standards site to
ensure all browsers can read your code.
• Offer transcriptions for audio resources,
captions/subtitles for video.
• Make content easily understandable – simpler language
reaches more users, as do effective information
hierarchy, progressive disclosure and prompting.

http://fpt.edu.vn 12/01/24 11
• Try using your design without a mouse. It can be hard to
scroll.
• Use tools such as WAVE and Color Oracle to test your design’s
accessibility.
Naturally, you should test for accessibility on users themselves.
Note that while it’s impossible to cover all use cases, your
efforts to reach all users can yield many rewards—sometimes
in unexpected areas.

http://fpt.edu.vn 12/01/24 12
Accessibility: Usability for all
Good accessibility is crucial to making your website or app a
success. Not only is designing for accessibility required by law in
many countries—if you fail to consider accessibility, you are
excluding millions of people from using your product. The UN
estimates that more than 1 billion people around the world live
with some form of disability and as populations age over the
coming years, that number is expected to rise rapidly. Add to
that the 10 percent of people who suffer from color blindness,
and you start to get an idea of why accessibility is so important—
not just for moral and legal reasons, but also so that your
products can reach their full potential. You need to design for
accessibility!

http://fpt.edu.vn 12/01/24 13
So… what is a proven and pain-free way to well-executed
accessibility? If you’ve ever tried to optimize your site or
app for accessibility, you’ll know it can be a complex and
intimidating task… and it can therefore be very tempting
to leave it until last or, worse still, avoid it altogether. By
understanding that accessibility is about more than just
optimizing your code, you’ll find you can build it into your
design process. This will ensure you are taking a disability
advocacy approach, and keeping the focus on your users
throughout the development process.

http://fpt.edu.vn 12/01/24 14
This course will help you achieve exactly that—from
handling images to getting the most out of ARIA markup,
you’ll learn how to approach accessibility from all
angles. You’ll gain practical, hands-on skills that’ll enable
you to assess and optimize for common accessibility
issues, as well as show you how to place an emphasis on
the quality of the user experience by avoiding classic
mistakes. What’s more, you’ll also come away with the
knowledge to conduct effective accessibility testing
through working with users with disabilities.

http://fpt.edu.vn 12/01/24 15
• The course includes interviews with an accessibility
specialist and blind user, as well as multiple real-world
examples of websites and apps where you can
demonstrate your skills through analysis and
accessibility tests. Not only will this give you a more
practical view of accessibility, but you’ll also be able to
optimize your websites and mobile apps in an expert
manner—avoiding key mistakes that are commonly
made when designing for accessibility.

http://fpt.edu.vn 12/01/24 16
• You will be taught by Frank Spillers, CEO of the award-
winning UX firm Experience Dynamics, and will be able
to leverage his experience from two decades of working
with accessibility. Given that, you will be able to learn
from, and avoid, the mistakes he’s come across, and
apply the best practices he’s developed over time in
order to truly make your accessibility efforts shine. Upon
completing the course, you will have the skills required
to adhere to accessibility guidelines while growing your
awareness of accessibility, and ensuring your
organization’s maturity grows alongside your own.

http://fpt.edu.vn 12/01/24 17
2. Usability and User Experience Goals
•ISO Definition: Usability is concerned with the “effectiveness,
efficiency and satisfaction with which specified users achieve
specified goals in particular environments” whilst user experience
is concerned with “all aspects of the user’s experience when
interacting with the product, service, environment or facility”
•Aim: In terms of a web site, the aim of usability is to make that web
site easy to use whilst the aim of user experience is to make the user
happy before, during and after using that web site.
Thus, usability relates to the ease with which users can achieve their
goals while interacting with a web site while user experience is
concerned with the way users perceive their interaction with that web
site

http://fpt.edu.vn 12/01/24 18
• Defined as a Process: “User experience (UX) design is the
process of creating 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.”
• Defined as a Question: Usability can be modeled as the
question “Can the user accomplish their goal?” whilst user
experience can be phrased as “Did the user have as
delightful an experience as possible?”

http://fpt.edu.vn 12/01/24 19
• Defined as a Metaphor: So as to illustrate
the contrast between usability and user interface, experts have
compared them to science (usability) vs. art (user experience) and a
freeway (usability) vs. a twisting mountain road (user experience) . In
essence, this metaphorical representation of these two terms focuses
on defining something that is usable as functional, simple and requires
less mental effort to use. Thus, a freeway is usable since it has no
oncoming traffic, enables you to get from point A to point B in a fast
manner and has consistent signage, hence requiring little learnability.
In terms of usability, a freeway is highly usable but it is boring when
assessed in terms of user experience. In contrast, something that
focuses on user experience is depicted as highly emotional. Thus, a
twisting mountain road is less usable but, because of its scenery, the
smell of nature and the excitement of the climb, it conveys a pleasant
user experience.

http://fpt.edu.vn 12/01/24 20
• Resources Required: Usability involves those employees
who influence the user interface design of a web site whilst
user experience requires the collective and seamless effort
of employees from various departments including
engineering, marketing, graphical and industrial design and
interface design
• Impact: Although user experience requires more effort to do
well, its results have a better impact . When done properly,
user experience effectively enhances the relationship
between the user and the brand. This is because “true user
experience goes far beyond giving customers what they say
they want, or providing checklist features”

http://fpt.edu.vn 12/01/24 21
• Effect on User Interface: A usable user interface is
one which is typically intuitive, simple or extremely
learnable. A user interface whose aim is to create a
positive user experience is one which is pleasing to
the user. This does not mean that when the focus is
on user experience, the user interface is not usable.
To the contrary, user experience professionals
typically hand over their designs
to usability professionals so that they can validate
them

http://fpt.edu.vn 12/01/24 22
The relationship between usability and user experience
•Usability is a narrower concept than user experience since it only
focuses on goal achievement when using a web site. By contrast,
user experience is a “consequence of the presentation, functionality,
system performance, interactive behaviour, and assistive capabilities
of the interactive system”. This essentially means that user
experience includes aspects such as human factors, design,
ergonomics, HCI, accessibility, marketing as well as usability. An
alternative way to look at this relationship is by subdividing user
experience into utility, usability, desirability and brand experience.
This is best illustrated by representing these sub divisions as
concentric circles where the innermost circle is the most basic aspect
of user experience as shown in the diagram below:

http://fpt.edu.vn 12/01/24 23
http://fpt.edu.vn 12/01/24 24