UX Playbook - 15 Minutes to Better Performance

UX Playbook
15 minutes to better performance.

Theory
Digital UX is to make very difficult decisions with screen space,
interactions, content, and branding.
Then, follow up with rigorous monitoring, testing, and subtle
improvements.
It takes time (patience), monetary investment, trust in the
processes, and most importantly a great team.

Intro…
Get out your product and follow along.

Intro…
Get out your product and follow along.
Also, bring a snack, this may take a
while.

Accessibility
What good is a design…
if it’s not accessible?

Accessibility.Fonts
Use larger fonts.
Article Title
Author Name / Date
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.
Article Title
Author Name / Date
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.

Accessibility.Fonts
Cut the number of fonts down to
ONE.
“Not very stylish.”, you say?
Fine… I’ll give you TWO.
(PS: This presentation is Roboto Black (900) &
Roboto Light (300). Yes, technically ONE font; but the
weight extremes make it seem like TWO.)
Article Title
Author Name / Date
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
Article Title
Author Name / Date
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially
unchanged.

Accessibility.Fonts
Allow for font sizing.

Accessibility.Fonts
When in doubt, use serif
fonts when they are smaller.
(Though no concrete evidence has ever surfaced
to argue either way. AND there are exceptions.)
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when
an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
LoremIpsumissimplydummy text of the printingandtypesettingindustry.LoremIpsumhas beenthe industry'sstandard
dummytext eversincethe 1500s,when anunknown printertooka galleyof typeand scrambleditto make atypespecimen
book. Ithassurvivednot onlyfivecenturies,but alsothe leapintoelectronictypesetting,remainingessentiallyunchanged.

Accessibility.Fonts
It’s much more important to
use fonts that have
monospacing and consistent
x-height and ascender /
descender values.
Also try to choose something
with open counters.

Accessibility.Fonts
Black on white.
I repeat, black on white
Lorem Ipsumis simply dummytext of the printingand typesetting industry.Lorem Ipsumhas beenthe industry's
standard dummytext ever since the 1500s, whenanunknownprinter took a galley of type and scrambled it to makea
type specimenbook. It hassurvived not only five centuries,butalso the leap into electronic typesetting, remaining
essentially unchanged.
Lorem Ipsumis simply dummytext of the printingand typesetting industry.Lorem Ipsumhas beenthe industry's
standard dummytext ever since the 1500s, whenanunknownprinter took a galley of type and scrambled it to makea
type specimenbook. It hassurvived not only five centuries,butalso the leap into electronic typesetting, remaining
essentially unchanged.

Accessibility.Links
Never underline text that are
NOT links.
Links must be tab tested.
Alt and Title tags are
mandatory.
WHERE’STHELINK?
LoremIpsum is simply dummy textof theprinting and typesettingindustry. LoremIpsum has
beentheindustry's standard dummy text eversince the1500s,whenan unknown printertook
a galley of typeand scrambled it to makea typespecimen book.
WHERE’STHELINK?
WHERE’STHELINK?

Accessibility.Animation
Sometimes it’s a good idea to disable
most animation via cookies if you are
sure the user is older or has
accessibility issues.

Accessibility.Animation
Always use subtle, helpful animation.
Animation for animation sake is
usually not a good UX practice,
regardless of the user.

Accessibility.Planning
1. Hire a professional.
2. GET THEM INVOLVED ON THE GROUND LEVEL.
1. Use the guide: http://webaim.org/standards/508/checklist
2. Use this guide too: https://www.w3.org/TR/WCAG20/
3. Creating Accessible Videos: http://www.washington.edu/accessibility/videos/

Accessibility.Planning
Accessibility must take significant form in your…
• User stories
• Journey maps
• Testing
• Development estimation

Forms
Accessibility
(See Payments)

Accessibility.Forms
Forms are the most overlooked, under-scrutinized part of many digital products.
Forms are CRITICAL for:
• Conversion
• Participation
• Retention
• Income

Accessibility.Forms
Inputs (text, select, dropdowns…)
Email Address
john.smith@emailaddress.com
Email Address
Email Address
EX: john.smith@emailaddress.com
BAD
BETTE
R
BEST

Accessibility.Forms
Tapable…
chris.feix.71@gmail.com
Email Address
chris.feix.71@gmail.com
Email Address

Accessibility.Forms
Obfuscation
5oftT@c0
Password
Must contain at least 8 characters comprised of letters,
numbers, and at least one symbol.
••••••••
Password
SHOW

Accessibility.Forms
Obfuscation
5oftT@c0
Password
X HIDE PASSWORD

Accessibility.Forms
5
Password
HINT:
7 more characters
A number
A symbol
SHOW
5oftT@
Password
HINT:
2 more characters
A number
A symbol
SHOW
5oftT@c0
Password
HINT:
8 characters
A number
A symbol
SHOW
Expectation…

Accessibility.Forms
Input masks…

Accessibility.Forms
Buttons…
CancelNext × Cancel Next ›

Accessibility.Forms
Buttons…
× Cancel Next › × Cancel Login
I forgot my password.?

Accessibility.Forms
Color Placement

Retention
Driving traffic to a product is the second hardest task of any
company - retaining those customers is paramount.

Retention.Reduce
Much of what goes on a page can
be removed if:
• Main navigation is muy facil
• Search optimization has been
properly implemented
• Your marketing people aren’t total
douchebags

Conversion
If it can’t convert a user into a customer, what good is it?

Conversion.Personalization
• Allow users to switch currency (€/$/£)
• Allow users to switch pricing monthly/yearly
• Indicate that users can cancel any time
• Indicate what group each pricing plan is for (e.g. freelancers)
• Avoid mentioning “account” anywhere
(nobody *wants* to create an account)
• Allow users to switch table/slider views
• Allow users to select features of interest
• Allow users to configure their own pricing plan
• Make sure each section drops a bit of delight
• Provide a way out if a user isn’t interested
(“buy our books instead”)

• Allow users to switch currency (€/$/£)
• Allow users to switch pricing monthly/yearly
• Indicate that users can cancel any time
• Indicate what group each pricing plan is for (e.g. freelancers)
• Avoid mentioning “account” anywhere
(nobody *wants* to create an account)
• Small commitments are better than big ones,
• Allow users to switch table/slider views
• Allow users to select features of interest
• Allow users to configure their own pricing plan
• Make sure each section drops a bit of delight
• Provide a way out if a user isn’t interested
(“buy our books instead”)

Provide a way out if a user isn’t interested…
(“buy our books instead, join the club, subscribe for free tips”)

Conversion.Forms
HTML Attributes

Conversion.Forms
Prefills and Typeahead

Conversion.Framing
Know how the brain works.

Conversion.Framing
Stay out of peoples’ cerebral cortex!

Profits 21%
Form Completion 54%
Conversion.Framing
77% 19% 3% |
1% .
2% 9% 33%
66%

Conversion.Framing
DIGITAL
$59/yr.
PRINT & DIGITAL
$125/yr.

Conversion.Framing
DIGITAL
$59/yr.
PRINT & DIGITAL
$125/yr.
68% 32%
Completion
34%

Conversion.Framing
DIGITAL
$59/yr.
PRINT & DIGITAL
$125/yr.
PRINT
$125/yr.

Conversion.Framing
DIGITAL
$59/yr.
PRINT & DIGITAL
$125/yr.
PRINT
$125/yr.
16%
68%
0% 84%
32%
Completion
49%
34%

UX Playbook - 15 Minutes to Better Performance

UX Playbook - 15 Minutes to Better Performance

Recommended

More Related Content

Viewers also liked

Viewers also liked(18)

Similar to UX Playbook - 15 Minutes to Better Performance

Similar to UX Playbook - 15 Minutes to Better Performance(20)

Recently uploaded

Recently uploaded(20)

UX Playbook - 15 Minutes to Better Performance

Editor's Notes