UX for PMs

Moyosore Fagbenro
 table of contents

1 The UX of UI 3
Some Meat
intro
UX Strategy
What are we here
for?
2 Where does the PM
fit?
 Let’s Define Some Terms
■ User Experience: focuses on getting to know users well, including what
they need, what they value, what they can do(abilities), and what they can't
do (limitations) . Includes all the ways the end user interacts (physical,
digital etc) with the company, its services, and its products

■ User Interface: what you use to interact with a product. Covers all the
visual and interactive parts of a product's interface, including typography,
colour palettes, animations, and touch points for navigation

■ Usability: a characteristic of the UI that looks at how easy it is to learn,

how well it works, how pleasant it is to use etc.
“The first requirement for an exemplary
user experience is to meet the exact
needs of the customer, without fuss or
bother. Next comes simplicity and
elegance that produce products that are
a joy to own, a joy to use. ”
Don Norman and Jakob Nielsen,
Founders - Nielsen Norman Group,
Elements of User Experience

Useful Credible Usable

fulfill a need Establish Trust easy to use

Accessible Desirable
Usable for people with diverse
Findable
evoke emotion and
Content Should be navigable
abilities appreciation
 Some Fields of UXD
ensuring a smooth online With voice user interfaces,
experience for the user the system understands
voice commands, and
responds either by speaking
back, or by showing a visual
response. e.g Amazon Alexa
Voice
Design

Augmented reality Design for the

allows you to add Web, App & Intangible. Planning
non-physical (or digital) Software and organising
items to the existing Design people,
world around you infrastructure,
while virtual reality communication, and
VR & AR Service
completely immerses material parts of a
you in a computerized Design Design service in order to
world. improve its quality
and interaction.
 Components of User Experience I
User Research Content Strategy Usability Evaluation
focuses on understanding user focuses on writing and curating focuses on how well users can learn
behaviors, needs, and motivations useful content by planning how it and use a product to achieve their
through observation techniques, task will be created, delivered, and goals. It also refers to how satisfied
analysis, and other feedback guided. users are with that process.
methodologies.

Information Accessibility
Architecture (IA) focuses on how a disabled individual
focuses on how information is organized, accesses or benefits from a site,
structured, and presented to users. system or application.
 Components of User Experience II
Visual Design Interaction Design (IxD)
focuses on ensuring an aesthetically pleasing focuses on creating engaging interactive
interface that is in line with brand goals. systems with well thought out behaviors.

User Interface Design Analytics

focuses on anticipating what users might need to focuses on collecting, reporting, and
do and ensuring that the interface has elements analysing data about how users behave.
that are easy to access, understand, and use to
facilitate those actions.
 Focus of this Presentation

UI Usability
Colour theory, typography, UI
design patterns, Visual Function, Usefulness,
Hierarchy, Princples of Design Adaptablabilty, Inclusion
Does this
sound
familiar?...
Is there
anything
wrong with
this?
Source: @badbad_ux
Is there
anything
wrong with
this?
Source: @badbad_ux
What’s
wrong
wrong with
this?
Source: @badbad_ux
Improving the
UX of UI
The meat
UX – U = X
UX Without User Research
Is Not UX
The success of a product depends on how
users feel about it which can happen in
seconds or even milliseconds.

Users decide if they want to use a site or

come back to it by asking, "Does it help
me?" How easy is it to use? Am I happy or
pleased with how this works for me? All of
these questions are answered by a good
user experience.

Source: @badbad_ux
 How to put the ‘U’ in UX

1 2 3

task analysis & Prototype & test Iterative Design &

field studies low-fidelity ideas User Testing
 What makes a Product Usable?
Learnability Efficiency Utility
How easy is it for users to do How quickly can users do tasks Does it do what users need?
basic tasks the first time they use once they know how the
the design? design works?

Errors Memorability Satisfaction

How many errors do users make, How easy is it for users to get How pleasant is it to use
how bad are these errors, and back up to speed when they the design
how easy is it for them to rectify haven't used the design for a
them? while?
Jakob’s 10
Usability
Heuristics
#1: Visibility of
system status Validation, notifications, and status
indicators

Progress Bars
The design should always keep
Micro interactions - clicks
users informed of what's going
Haptic Responses
on by giving them feedback in a
reasonable amount of time.
Create an interaction that
#2: Match between
works like one in the real
world. e.g. Buttons acting like system and the real
Buttons in real life by being
“clickable”
world…
Never assume that our own
interpretations and The design should speak the users'
understanding of words or
objects match those of our
language. Use words, phrases, and ideas
users. that the user already knows instead of
internal jargon. Follow the rules of the
real world and put information in a way
that makes sense.
#3: User control A Back link which returns users to a

and freedom previous page or screen

A Cancel link which allows the user to

Users often perform actions by quit a task or multi-step process

mistake. Enable users to quickly A Close link which allows users to

close a new view
correct mistakes or backtrack on
An Undo option (and a
choices made, Users can stay in corresponding redo option) to allow
users to backtrack on a change to a
charge of the system and avoid UI element

getting stuck and frustrated by using

exits.
#4: Consistency
and standards Different words or commands
for the same action
Reduce cognitive load
Placing controls for the same
feature in many different
Users shouldn't have to guess places
what different words,
situations, or actions mean.
Stick to platform and industry
standards.
Avoid slips by
#5: Error prevention
providing helpful
constraints and good Good error messages are important, but
defaults.
the best designs carefully prevent
Prevent mistakes by problems from happening in the first
removing memory
burdens, supporting place. The two types of errors are slips
undo, and warning and mistakes. Slips are unconscious errors
your users.
caused by inattention. Mistakes are
conscious errors based on a mismatch
between the user’s mental model and the
design.
#6: Recognition Offer help in context,
instead of giving users a

rather than recall

long tutorial to
memorize.

Use Default values and

Make sure the user doesn't have to labelled Icons

remember too much by displaying

elements, actions, and options.
Information that is needed to use the
design should be easy to find or easy
to see.
#7: Flexibility and
efficiency of use Provide accelerators like keyboard
shortcuts and touch gestures.
Flexible processes can be carried Provide personalization by adapting
out in different ways, so that content and functionality to each user's
needs
people can pick whichever method
Allow for customization, so they can
works for them. The design should choose how they want it to work.
work for both beginners and
experts. Allow users to tailor
frequent actions
 #8: Aesthetic &
Keep the content and
visual design of UI
minimalist design
focused on the Interfaces shouldn't have information that
essentials.
isn't needed or isn't important.
Set the content and
features in order of It means that the content and design
importance so that
they support the main should be focused on what's most
goals. important. Make sure that the interface's
visual elements support the user's main
goals.
#9: Help users Use traditional error

recognize, diagnose,
message visuals, like
bold, red text.

and recover from Tell users what went

wrong in language they

errors
will understand — avoid
technical jargon.

Error messages should be expressed Offer users a solution,

like a shortcut that can
in plain language (no error codes), solve the error
precisely indicate the problem, and immediately.

constructively suggest a solution.

#10: Help and
documentation Make sure that the help Information are
easy to find.
Help and documentation content Whenever you can, give the user the
should be easy to search and documentation at the exact moment
they need it.
focused on what the user is
Use your FAQ section!
trying to do. Keep it short and list
the specific steps that need to be
taken.
Let’s see some
examples!
Source: Nussi Einhorn, Intent UX.com

Source: Nielsen Norman

Group - Top 10
Application-Design Mistakes
A UX strategy is a plan of actions
designed to reach an improved
future state of the Company’s
user experience over an
established period of time.

Keywords are great for getting attention

 UX & PMs
Set the UX
Create Clear Design
Vision and
Documentation
Goals

Collaborate COMMUNICATE
Spread the design-centered culture
UX is EVERYONE’s across the organization

Responsiblity Optimize the design process through

facilitating proper communication
 Thank you!
References
● https://careerfoundry.com/en/blog/ux-design/what-is-user-experience-ux-design-everything-you-n
eed-to-know-to-get-started/
● https://www.usability.gov/what-and-why/user-experience.html
● https://www.nngroup.com/articles/usability-101-introduction-to-usability/
● https://bootcamp.uxdesign.cc/user-experience-for-product-managers-part-1-6fd3cc276fbf

● CREDITS: This presentation template was created by Slidesgo,

https://www.nngroup.com/articles/ux-without-user-research/
● including icons by Flaticon, and infographics & images by Freepik
https://www.nngroup.com/articles/ten-usability-heuristics/
● https://www.nngroup.com/articles/indicators-validations-notifications/
● https://www.nngroup.com/articles/ux-strategy/