ux playbook - 15 minutes to better performance

UX Playbook15 minutes to better performance.

TheoryDigital 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.

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

FontsAccessibility

Accessibility.FontsUse larger fonts.

Article TitleAuthor 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 TitleAuthor 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.FontsCut 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 TitleAuthor Name / DateLorem 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 TitleAuthor 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.FontsAllow for font sizing.

Accessibility.FontsWhen 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.

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.FontsIt’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.FontsBlack on white.

I repeat, black on white

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.

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.

LinksAccessibility

Accessibility.LinksNever underline text that are NOT links.

Links must be tab tested.

Alt and Title tags are mandatory.

WHERE’S THE LINK?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.

WHERE’S THE LINK?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.

WHERE’S THE LINK?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.

AnimationAccessibility

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

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

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

PlanningAccessibility

Accessibility.Planning1. 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.PlanningAccessibility must take significant form in your…

• User stories

• Journey maps

• Testing

• Development estimation

FormsAccessibility

(See Payments)

Accessibility.FormsForms are the most overlooked, under-scrutinized part of many digital products.

Forms are CRITICAL for:• Conversion• Participation• Retention• Income

Accessibility.FormsInputs (text, select, dropdowns…)

Email Address

john.smith@emailaddress.com

Email Address

Email Address

EX: john.smith@emailaddress.com

BAD

BETTERBEST

Accessibility.FormsTapable…

chris.feix.71@gmail.comEmail Address

EX: john.smith@emailaddress.com chris.feix.71@gmail.comEmail Address

EX: john.smith@emailaddress.com

Accessibility.FormsObfuscation

5oftT@c0Password

Must contain at least 8 characters comprised of letters, numbers, and at least one symbol.

••••••••Password

Must contain at least 8 characters comprised of letters, numbers, and at least one symbol.

SHOW

Accessibility.FormsObfuscation

5oftT@c0Password

Must contain at least 8 characters comprised of letters, numbers, and at least one symbol.

X HIDE PASSWORD

Accessibility.Forms

5Password

HINT:7 more charactersA numberA symbol

SHOW

5oftT@Password

HINT:2 more charactersA numberA symbol

SHOW

5oftT@c0Password

HINT:8 charactersA numberA symbol

SHOW

Expectation…

Accessibility.FormsInput masks…

Accessibility.FormsButtons…

CancelNext × Cancel Next ›

Accessibility.FormsButtons…

× Cancel Next › × Cancel Login

I forgot my password.?

Accessibility.FormsColor Placement

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

ReduceRetention

Retention.ReduceMuch 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

Retention.ReduceMuch 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

Retention.ReduceMuch 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

Retention.ReduceMuch 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

Retention.ReduceMuch 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

Retention.Reduce

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

PersonalizationConversion

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”)

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)

• 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”)

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”)

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”)

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”)

Conversion.Personalization

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

FormsConversion

Conversion.FormsHTML Attributes

Conversion.FormsHTML Attributes

Conversion.FormsHTML Attributes

Conversion.FormsPrefills and Typeahead

FramingConversion

Conversion.FramingKnow how the brain works.

Conversion.FramingKnow how the brain works.

Conversion.FramingKnow how the brain works.

Conversion.FramingStay out of peoples’ cerebral cortex!

Conversion.Framing

Conversion.Framing

Conversion.Framing

Conversion.Framing

Conversion.Framing

Conversion.Framing

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%

Completion34%

Conversion.Framing

DIGITAL$59/yr.

PRINT & DIGITAL$125/yr.

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%

Completion49%34%