Upload
chris-feix
View
138
Download
0
Embed Size (px)
Citation preview
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
Email Address
Email Address
BAD
BETTERBEST
Accessibility.FormsTapable…
[email protected] Address
EX: [email protected] [email protected] Address
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%