A presentation at Accessing Higher Ground 2018 in in Denver, CO, USA by Karen Hawkins
Making Websites Usable, Not Just Accessible NOVEMBER 14, 2018 Karen Hawkins, Publicis Sapient COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 1
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 2
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 3
Myth #1 COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 5
Accessibility can be taken care of by front end developers, and nobody else needs to concern themselves with it
Business Development Leads Copywriters User Experience Designers Quality Assurance Professionals Visual Designers Project Managers Content Strategists Front End Developers Account Leads Strategists
Myth #2 COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 9
Accessible design is ugly
Myth #3 COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 13
Accessible sites take much more effort to build
Myth #4 COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 18
You can implement an accessible site and call it a day
So what is accessibility, really? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 22
“Accessibility means access. It refers to the ability for everyone, regardless of disability or special needs, to access, use and benefit from everything within their environment.” - CANADIAN NATIONAL INSTITUTE FOR THE BLIND COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 23
The thing is… COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 24
We all face accessibility barriers
26
27
28
29
We All Face Accessibility Barriers “We need to consider that many of us are only temporarily able-bodied. At any given moment, we could be juggling multiple tasks that take an eye or an ear or a finger away. We could be exhausted or sick or stressed. Our need for an accessible web might last a minute, an hour, a day, or the rest of our lives. We never know.” - ROBIN CHRISTOPHERSON (@usa2day)
People With Disabilities (US, 2016) USUS Population Population 16% 16% 16% 6.4% Ambulatory 4.8% Cognitive 2.5% Hearing 2.3% Sight COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 31
People With Disabilities (US, 2016): Web Impacting USUS Population Population 16% 16% 10% COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 6.4% Ambulatory 4.8% Cognitive 2.5% Hearing 2.3% Sight 32
How Many People Are Affected? USUS Population Population US Population Canadian Population “Web Disabilities” Pop. (US) 0 COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 50,000,000 100,000,000 150,000,000 200,000,000 250,000,000 300,000,000 350,000,000 33
35 MILLION PEOPLE COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 34
E-Commerce and Web Accessibility Timeline 1991: 1995: Internet opened to commercial use 1989: First web browser Amazon, eBay, Yahoo launch 1998: 2009: Google, Paypal launch Bitcoin launches 2001: 1994: rd First 3 party credit card services COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 1997: Dell.com $1M sales Walmart.com founded, B2B commerce reached $700B in transactions 2007: Flipkart launches, eBay earns $52B in auctions 2010: Groupon launches 2014: Apple Pay launches 2017: eComm is 10+% of US retail sales 2016: 1.61B people bought goods online 35
E-Commerce and Web Accessibility Timeline 1991: 1995: Internet opened to commercial use 1989: First web browser “Outspoken” Screen reader Amazon, eBay, Yahoo launch 1998: 2009: Google, Paypal launch Bitcoin launches 2001: 1994: rd First 3 party credit card services 1997: Dell.com $1M sales 1993: “Lynx” Text browser First accessibility guidelines COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL Walmart.com founded, B2B commerce reached $700B in transactions 1998: WCAG 1.0 2000: Section 508 (US gov) 2007: Flipkart launches, eBay earns $52B in auctions 2014: Apple Pay launches 2010: Groupon launches 2005: 2008: 2014: AODA WCAG 2.0 AODA Level A law enacted compliance (Ontario), mandatory VoiceOver (Ontario) 2010: added to Mac US DOJ OSX considers ADA for the web 2017: eComm is 10+% of US retail sales 2016: 1.61B people bought goods online Section 508 refresh to WCAG 2.0 2021: AODA Level AA compliance mandatory (Ontario) 36
E-Commerce and Web Accessibility Timeline 1991: 1995: Internet opened to commercial use 1989: First web browser “Outspoken” Screen reader Amazon, eBay, Yahoo launch 1998: 2009: Google, Paypal launch Bitcoin launches 2001: 1994: rd First 3 party credit card services 1997: Dell.com $1M sales 1993: “Lynx” Text browser First accessibility guidelines COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL Walmart.com founded, B2B commerce reached $700B in transactions 1998: WCAG 1.0 2000: Section 508 (US gov) 2007: Flipkart launches, eBay earns $52B in auctions 2014: Apple Pay launches 2010: Groupon launches 2005: 2008: 2014: AODA WCAG 2.0 AODA Level A law enacted compliance (Ontario), mandatory VoiceOver (Ontario) 2010: added to Mac US DOJ OSX considers ADA for the web 2017: eComm is 10+% of US retail sales 2016: 1.61B people bought goods online Section 508 refresh to WCAG 2.0 2021: AODA Level AA compliance mandatory (Ontario) 37
E-Commerce and Web Accessibility Timeline 1991: 1995: Internet opened to commercial use 1989: First web browser “Outspoken” Screen reader Amazon, eBay, Yahoo launch 1998: 2009: Google, Paypal launch Bitcoin launches 2001: 1994: rd First 3 party credit card services 1997: Dell.com $1M sales 1993: “Lynx” Text browser First accessibility guidelines COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL Walmart.com founded, B2B commerce reached $700B in transactions 1998: WCAG 1.0 2000: Section 508 (US gov) 2007: Flipkart launches, eBay earns $52B in auctions 2014: Apple Pay launches 2010: Groupon launches 2005: 2008: 2014: AODA WCAG 2.0 AODA Level A law enacted compliance (Ontario), mandatory VoiceOver (Ontario) 2010: added to Mac US DOJ OSX considers ADA for the web 2017: eComm is 10+% of US retail sales 2016: 1.61B people bought goods online Section 508 refresh to WCAG 2.0 2021: AODA Level AA compliance mandatory (Ontario) 38
E-Commerce and Web Accessibility Timeline 1991: 1995: Internet opened to commercial use 1989: First web browser “Outspoken” Screen reader Amazon, eBay, Yahoo launch 1998: 2009: Google, Paypal launch Bitcoin launches 2001: 1994: rd First 3 party credit card services 1997: Dell.com $1M sales 1993: “Lynx” Text browser First accessibility guidelines COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL Walmart.com founded, B2B commerce reached $700B in transactions 1998: WCAG 1.0 2000: Section 508 (US gov) 2007: Flipkart launches, eBay earns $52B in auctions 2014: Apple Pay launches 2010: Groupon launches 2005: 2008: 2014: AODA WCAG 2.0 AODA Level A law enacted compliance (Ontario), mandatory VoiceOver (Ontario) 2010: added to Mac US DOJ OSX considers ADA for the web 2017: eComm is 10+% of US retail sales 2016: 1.61B people bought goods online Section 508 refresh to WCAG 2.0 2021: AODA Level AA compliance mandatory (Ontario) 39
So in 20 years, how have we done? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 40
Top 10 Grossing eCommerce Sites Accessibility Scorecard 1. Amazon.com 2. Ebay.com 3. Walmart.com 4. Apple.com 5. HomeDepot.com 6. BestBuy.com 7. Macys.com 8. Costco.com 9. QVC.com 10.Wayfair.com © Copyright Publicis.Sapient | Confidential 41
Top 10 Grossing eCommerce Sites Accessibility Scorecard © Copyright Publicis.Sapient | Confidential
35 MILLION PEOPLE COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 43
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 44
WHY THE @^(&$ IS THIS STILL TRUE IN 2018? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 45
It’s a design issue COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 46
“Design is not just what it looks like and feels like. Design is how it works.” - STEVE JOBS COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 47
How The Web Works COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 48
How The Web Works COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 49
How The Web Works COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 50
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 51
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 52
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 53
Let’s explore this concept of a linear experience. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 54
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 55
We need to imagine all that content is just in one long list
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 57
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 58
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 59
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 60
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 61
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 62
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 63
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 64
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 65
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 66
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 67
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 68
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 69
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 70
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 71
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 72
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 73
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 74
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 75
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 76
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 77
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 78
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 79
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 80
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 81
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 82
So I want to say again… COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 83
It’s a design issue COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 84
And who’s the right person to design such experiences? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 85
Business Development Leads Copywriters User Experience Designers Quality Assurance Professionals Visual Designers Project Managers Content Strategists Front End Developers Account Leads Strategists
User Experience Designers
Almost anyone can make a site accessible. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 88
Almost anyone can make a site accessible. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL But it isn’t necessarily usable. 89
YOUR TOOLS IN DESIGNING ACCESSIBLE EXPERIENCES COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 90
ACCESSIBLE EXPERIENCE TOOLS Your Tools In Designing Accessible Experiences § Focus Order § Reading Order § Apple’s VoiceOver Rotor or NVDA’s Elements List COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 91
ACCESSIBLE EXPERIENCE TOOLS Guideline 2.4.3 (A) Focus Order The navigation order of links, form elements, etc. is logical and intuitive. 1 2 COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 3 92
ACCESSIBLE EXPERIENCE TOOLS Guideline 1.3.2 (A) Meaningful Sequence The reading and navigation order (determined by code) is logical and intuitive. 2 1 3 4 COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 5 93
Focus Order = Tab Mode Meaningful Sequence = Reading Mode COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 94
ACCESSIBLE EXPERIENCE TOOLS VoiceOver’s Rotor Links The Rotor lists common elements, and allows the user to navigate directly to the element of their choosing. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL Open Menu Amazon Try Prime Halloween costume shop EN Hello. Sign in Account & Lists Orders Try Prime 0 items in cart Your Amazon.com Today’s Deals Gift Cards Registry Sell Treasure Truck Help 95
ACCESSIBLE EXPERIENCE TOOLS VoiceOver’s Rotor Links Open Menu Amazon Try Prime Halloween costume shop EN Hello. Sign in Account & Lists Orders Try Prime 0 items in cart Your Amazon.com Today’s Deals Gift Cards Registry Sell Treasure Truck Help COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 96
ACCESSIBLE EXPERIENCE TOOLS VoiceOver’s Rotor 2: 2: 2: 2: 2: 2: 2: 2: 2: 2: 2: Headings Your bedroom oasis Deal of the Day Find cool tech gifts Sign in for the best experience Today’s Deals Toys & Games best sellers Books best sellers Clothing, Shoes & Jewelry best… Most wished for in Video Games Home & Kitchen best sellers Kitchen & Dining best sellers COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL Form Controls Button All Departments search in collap… All Departments menu item Amazon Devices menu item Amazon Warehouse menu item Appliances menu item Apps & Games menu item Arts, Crafts & Sewing menu item Automotive parts & Accessories… Baby menu item Beauty & Personal Care menu item Books menu item CDs & Vinyl menu item Cell Phone & Accessories menu… Landmarks Banner Navigation Search Main Your recently viewed items More on Amazon.com navigation 97
Umm, I get what links are. But what the heck are headings, form controls and landmarks? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 98
Let’s Talk Headings COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 99
ACCESSIBLE EXPERIENCE TOOLS Headings Headings show the structure of a web page or application, similar to an outline for an essay. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 100
ACCESSIBLE EXPERIENCE TOOLS Headings § One <h1> per page, reserved for the main heading § <h2> to <h6> are decreasingly important § Nested structure COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 101
H2 ACCESSIBLE EXPERIENCE TOOLS Headings H3 H3 H3 H3 NOTE: H2 Even though headings are structurally H3 H3 nested, they can still be styled any way you want. NOTE TO DESIGNERS: H3 It’s important that in the style guide, you account for all heading levels. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 102
ACCESSIBLE EXPERIENCE TOOLS Headings 2: 2: 2: 2: 2: 2: 2: 2: 2: 2: 2: COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL Headings Your bedroom oasis Deal of the Day Find cool tech gifts Sign in for the best experience Today’s Deals Toys & Games best sellers Books best sellers Clothing, Shoes & Jewelry best… Most wished for in Video Games Home & Kitchen best sellers Kitchen & Dining best sellers 103
Let’s Talk Form Controls COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 104
ACCESSIBLE EXPERIENCE TOOLS Forms Forms are typically made up of a set of form controls (i.e. checkboxes, radio buttons, text fields, etc.) and labels for those controls. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 105
ACCESSIBLE EXPERIENCE TOOLS Forms It is imperative that each form control has a meaningful label. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 106
ACCESSIBLE EXPERIENCE TOOLS Forms Form Controls Button All Departments search in collap… All Departments menu item Amazon Devices menu item Amazon Warehouse menu item Appliances menu item Apps & Games menu item Arts, Crafts & Sewing menu item Automotive parts & Accessories… Baby menu item Beauty & Personal Care menu item Books menu item CDs & Vinyl menu item Cell Phone & Accessories menu… COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 107
Let’s Talk Landmarks COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 108
ACCESSIBLE EXPERIENCE TOOLS Landmarks § HTML 5 has the ability to designate sections of the page. § There is no visible alteration to the web design, making it unobtrusive and invisible to sighted users. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 109
ACCESSIBLE EXPERIENCE TOOLS Landmarks Landmarks Banner Navigation Search Main Your recently viewed items More on Amazon.com navigation COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 110
So, to reiterate… COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 111
ACCESSIBLE EXPERIENCE TOOLS Your Tools In Designing Accessible Experiences § Focus Order § Reading Order § Apple’s VoiceOver Rotor or NVDA’s Elements List COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 112
Kool. But how do you put these tools to use? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 113
Think linearly COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 114
Provide context COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 115
Provide multiple avenues for the user to find their way COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 116
Let the user decide what’s important to them COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 117
Limit the effort COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 118
LET’S GET INTO THE WEEDS COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 119
Product Cards COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 120
PRODUCT CARDS Product Card Examples COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 121
But first… COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 122
Let’s Talk Links COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 123
PRODUCT CARDS The Link Problem A link’s purpose should be easy to determine from the link text alone.
But so many product card links lack context. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 125
PRODUCT CARDS The Link Problem: Experience #1 § [Link] See recipe
PRODUCT CARDS The Link Problem: Experience #1 § [Link] See recipe § [Link] See recipe
PRODUCT CARDS The Link Problem: Experience #1 § [Link] See recipe § [Link] See recipe § …
PRODUCT CARDS The Link Problem: Experience #1 § [Link] See recipe § [Link] See recipe § … § [Link] See recipe
But the product images also tend to be links. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 130
PRODUCT CARDS The Link Problem: Experience #2 § [Link] Recipe name 1
PRODUCT CARDS The Link Problem: Experience #2 § [Link] Recipe name 1 § [Link] See recipe
PRODUCT CARDS The Link Problem: Experience #2 § [Link] Recipe name 1 § [Link] See recipe § [Link] Recipe name 2
PRODUCT CARDS The Link Problem: Experience #2 § [Link] Recipe name 1 § [Link] See recipe § [Link] Recipe name 2 § [Link] See recipe
PRODUCT CARDS The Link Problem: Experience #2 § [Link] Recipe name 1 § [Link] See recipe § [Link] Recipe name 2 § [Link] See recipe § …
PRODUCT CARDS The Link Problem: Experience #2 § [Link] Recipe name 1 § [Link] See recipe § [Link] Recipe name 2 § [Link] See recipe § … § [Link] See recipe
Better yet, the product name is also the link. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 137
PRODUCT CARDS The Link Problem: Experience #3 § [Link] Recipe name 1
PRODUCT CARDS The Link Problem: Experience #3 § [Link] Recipe name 1 § [Link] Recipe name 1
PRODUCT CARDS The Link Problem: Experience #3 § [Link] Recipe name 1 § [Link] Recipe name 1 § [Link] Recipe name 2
PRODUCT CARDS The Link Problem: Experience #3 § [Link] Recipe name 1 § [Link] Recipe name 1 § [Link] Recipe name 2 § [Link] Recipe name 2
PRODUCT CARDS The Link Problem: Experience #3 § [Link] Recipe name 1 § [Link] Recipe name 1 § [Link] Recipe name 2 § [Link] Recipe name 2 § …
PRODUCT CARDS The Link Problem: Experience #3 § [Link] Recipe name 1 § [Link] Recipe name 1 § [Link] Recipe name 2 § [Link] Recipe name 2 § … § [Link] Recipe name x
PRODUCT CARDS The Link Problem: Experience #3 § [Link] Recipe name 1 § [Link] Recipe name 1 § [Link] Recipe name 2 § [Link] Recipe name 2 § … § [Link] Recipe name x § [Link] Recipe name x
So what’s a gal to do? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 145
PRODUCT CARDS Link Tip #1 If the link text is ambiguous, we can add context by using hidden text so that only the screen reader accesses it.
PRODUCT CARDS Link Tip #1 § [Link] See recipe, recipe name 1
PRODUCT CARDS Link Tip #1 § [Link] See recipe, recipe name 1 § [Link] See recipe, recipe name 2
PRODUCT CARDS Link Tip #1 § [Link] See recipe, recipe name 1 § [Link] See recipe, recipe name 2 § …
PRODUCT CARDS Link Tip #1 § [Link] See recipe, recipe name 1 § [Link] See recipe, recipe name 2 § … § [Link] See recipe, recipe name x
PRODUCT CARDS Link Tip #2 Just don’t make the link text ambiguous.
PRODUCT CARDS Link Tip #2 § [Link] Gifts Under Twenty Dollars
PRODUCT CARDS Link Tip #2 § [Link] Gifts Under Twenty Dollars § [Link] Gifts Under Fifty Dollars
PRODUCT CARDS Link Tip #2 § [Link] Gifts Under Twenty Dollars § [Link] Gifts Under Fifty Dollars § …
PRODUCT CARDS Link Tip #2 § [Link] Gifts Under Twenty Dollars § [Link] Gifts Under Fifty Dollars § … § [Link] Floral Liqueurs
PRODUCT CARDS Link Tip #3 Make the image and product card name one clickable link.
PRODUCT CARDS Link Tip #3 § [Link] Recipe name 1
PRODUCT CARDS Link Tip #3 § [Link] Recipe name 1 § [Link] Recipe name 2
PRODUCT CARDS Link Tip #3 § [Link] Recipe name 1 § [Link] Recipe name 2 § …
PRODUCT CARDS Link Tip #3 § [Link] Recipe name 1 § [Link] Recipe name 2 § … § [Link] Recipe name x
OK kool. Back to Product Cards. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 161
PRODUCT CARDS Product Card Examples COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 162
PRODUCT CARDS Example Experience #1 What’s the linear experience within this product card?
PRODUCT CARDS Example Experience #1 § [Link] (102 PCS)Magnetic Building Blocks Educational Stacking Toddler Toys for Preschool Boys Grils Educational and Creative Imagination Development by Mibote
PRODUCT CARDS Example Experience #1 § [Link] (102 PCS)Magnetic Building Blocks Educational Stacking Toddler Toys for Preschool Boys Grils Educational and Creative Imagination Development by Mibote § [Link] (102 PCS)Magnetic Building Blocks Educational Stacking Toddler Toys for Preschool Boys Grils Educational and Creative Imagination Development by Mibote
PRODUCT CARDS Example Experience #1 § [Link] (102 PCS)Magnetic Building Blocks Educational Stacking Toddler Toys for Preschool Boys Grils Educational and Creative Imagination Development by Mibote § [Link] (102 PCS)Magnetic Building Blocks Educational Stacking Toddler Toys for Preschool Boys Grils Educational and Creative Imagination Development by Mibote § C, D, N, Dollar, 49, Point, 9, 9
PRODUCT CARDS Example Experience #1 § [Link] (102 PCS)Magnetic Building Blocks Educational Stacking Toddler Toys for Preschool Boys Grils Educational and Creative Imagination Development by Mibote § [Link] (102 PCS)Magnetic Building Blocks Educational Stacking Toddler Toys for Preschool Boys Grils Educational and Creative Imagination Development by Mibote § C, D, N, Dollar, 49, Point, 9, 9 § Prime
PRODUCT CARDS Example Experience #1 § [Link] (102 PCS)Magnetic Building Blocks Educational Stacking Toddler Toys for Preschool Boys Grils Educational and Creative Imagination Development by Mibote § [Link] (102 PCS)Magnetic Building Blocks Educational Stacking Toddler Toys for Preschool Boys Grils Educational and Creative Imagination Development by Mibote § C, D, N, Dollar, 49, Point, 9, 9 § Prime § Star, Star, Star, Star, Star, Down Arrow, 321
PRODUCT CARDS Example Experience #1 Did they miss anything?
PRODUCT CARDS Example Experience #1 Yeah. ”Bestseller”. Because the text is baked into the image.
PRODUCT CARDS Example Experience #2 Let’s look at another linear example.
PRODUCT CARDS Example Experience #2 § [Link] George Women’s Woven Cami
PRODUCT CARDS Example Experience #2 § [Link] George Women’s Woven Cami § [Button] Yellow
PRODUCT CARDS Example Experience #2 § [Link] George Women’s Woven Cami § [Button] Yellow § …
PRODUCT CARDS Example Experience #2 § [Link] George Women’s Woven Cami § [Button] Yellow § … § [Link] George Women’s Woven Cami
PRODUCT CARDS Example Experience #2 § [Link] George Women’s Woven Cami § [Button] Yellow § … § [Link] George Women’s Woven Cami § Sizes X, S, Dash, X, X, L
PRODUCT CARDS Example Experience #2 § [Link] George Women’s Woven Cami § [Button] Yellow § … § [Link] George Women’s Woven Cami § Sizes X, S, Dash, X, X, L § Star, Star, Star, Star, Star, 0 Reviews
PRODUCT CARDS Example Experience #2 § [Link] George Women’s Woven Cami § [Button] Yellow § … § [Link] George Women’s Woven Cami § Sizes X, S, Dash, X, X, L § Star, Star, Star, Star, Star, 0 Reviews § Dollar, 997
PRODUCT CARDS Example Experience #2 § [Link] George Women’s Woven Cami § [Button] Yellow § … § [Link] George Women’s Woven Cami § Sizes X, S, Dash, X, X, L § Star, Star, Star, Star, Star, 0 Reviews § Dollar, 997 § [Button] Add to cart
PRODUCT CARDS Example Experience #2 Again, did they miss anything?
PRODUCT CARDS Example Experience #2 Yes. “Exclusive”. Because the text is baked into the image.
PRODUCT CARDS Example Experience #3 What about list view product cards?
OK. So they pretty much suck. How do we make them better? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 183
PRODUCT CARDS Making Accessible Product Cards
PRODUCT CARDS Making Accessible Product Cards 2. Ensure pricing is marked up properly. 3. Avoid strikethroughs for pricing.
PRODUCT CARDS Making Accessible Product Cards 2. Ensure pricing is marked up properly.
PRODUCT CARDS Making Accessible Product Cards 2. Ensure pricing is marked up properly. Dollar sixty five X
PRODUCT CARDS Making Accessible Product Cards 2. Ensure pricing is marked up properly. Dollar sixty five Five hundred seventy five dollars zero zero cents X OK
PRODUCT CARDS Making Accessible Product Cards 3. Avoid strikethroughs for pricing.
PRODUCT CARDS Making Accessible Product Cards 3. Avoid strikethroughs for pricing. Sixteen thousand dollars nine thousand nine hundred ninety eight dollars X
PRODUCT CARDS Making Accessible Product Cards 4. Consider the experience of ratings and reviews.
PRODUCT CARDS Making Accessible Product Cards 4. Consider the experience of ratings and reviews. What should this experience be?
PRODUCT CARDS Making Accessible Product Cards 4. Consider the experience of ratings and reviews. § [Link] Rated 5 out of 5 by 321 people. See all ratings and reviews.
PRODUCT CARDS Making Accessible Product Cards 4. Consider the experience of ratings and reviews. How about if we added a separate link instead? Read Reviews >
PRODUCT CARDS Making Accessible Product Cards 4. Consider the experience of ratings and reviews. § Rated 5 out of 5 by 321 people Read Reviews >
PRODUCT CARDS Making Accessible Product Cards 4. Consider the experience of ratings and reviews. § Rated 5 out of 5 by 321 people § [Link] Read all ratings and reviews Read Reviews >
PRODUCT CARDS Making Accessible Product Cards 5. Consider the experience of swatches.
PRODUCT CARDS Making Accessible Product Cards 5. Consider the experience of swatches. § [Button] Display colour brown, selected
PRODUCT CARDS Making Accessible Product Cards 5. Consider the experience of swatches. § [Button] Display colour brown, selected § [Button] Display colour blue
PRODUCT CARDS Making Accessible Product Cards 5. Consider the experience of swatches. § [Button] Display colour brown, selected § [Button] Display colour blue § (Enter) The image changed to blue
PRODUCT CARDS Making Accessible Product Cards 5. Consider the experience of swatches. § [Button] Display colour brown, selected § [Button] Display colour blue § (Enter) The image changed to blue Note: When I go to the Product Detail Page I expect that the blue shirt will be displayed / selected.
PRODUCT CARDS Making Accessible Product Cards 6. All linked images must have descriptive text. Hence, images that serve as links can never be decorative.
PRODUCT CARDS Making Accessible Product Cards 6. All linked images must have descriptive text. Hence, images that serve as links can never be decorative. § pwp_sheet2
PRODUCT CARDS Making Accessible Product Cards 6. All linked images must have descriptive text. Hence, images that serve as links can never be decorative. § pwp_sheet2 § pwp_sheet2
PRODUCT CARDS Making Accessible Product Cards 6. All linked images must have descriptive text. Hence, images that serve as links can never be decorative. § pwp_sheet2 § pwp_sheet2 § pwp_sheet2
PRODUCT CARDS Making Accessible Product Cards 6. All linked images must have descriptive text. Hence, images that serve as links can never be decorative. § pwp_sheet2 § pwp_sheet2 § pwp_sheet2 § space 924593_100 image
PRODUCT CARDS Making Accessible Product Cards 6. All linked images must have descriptive text. Hence, images that serve as links can never be decorative. § pwp_sheet2 § pwp_sheet2 § pwp_sheet2 § space 924593_100 image Obviously, anything would be better!
PRODUCT CARDS Making Accessible Product Cards 7. Don’t use images of text. Use real text.
PRODUCT CARDS Making Accessible Product Cards 7. Don’t use images of text. Use real text. § You have to present the same information to all users.
PRODUCT CARDS Making Accessible Product Cards 7. Don’t use images of text. Use real text. § You have to present the same information to all users. § If you bake text into an image, it will never get read by the screen reader.
PRODUCT CARDS Making Accessible Product Cards 7. Don’t use images of text. Use real text. § You have to present the same information to all users. § If you bake text into an image, it will never get read by the screen reader. § You have to allow all text to be resized up to 200% without losing readability or functionality.
Wow, eh? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 212
OK. One more thing. Let’s talk “adding to cart”. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 213
PRODUCT CARDS Adding A Product To The Cart What do you expect to happen when you add a product to the cart?
PRODUCT CARDS Adding A Product To The Cart What do you expect to happen when you add a product to the cart? § [Button] Add to cart, LEGO Friends Mia’s Tree House 41335
PRODUCT CARDS Adding A Product To The Cart What do you expect to happen when you add a product to the cart? § [Button] Add to cart, LEGO Friends Mia’s Tree House 41335 § (Enter)
PRODUCT CARDS Adding A Product To The Cart What do you expect to happen when you add a product to the cart? § [Button] Add to cart, LEGO Friends Mia’s Tree House 41335 § (Enter) § One item was added to your cart, LEGO Friends Mia’s Tree House 41335
PRODUCT CARDS Adding A Product To The Cart What do you expect to happen when you add a product to the cart? § [Button] Add to cart, LEGO Friends Mia’s Tree House 41335 § (Enter) § One item was added to your cart, LEGO Friends Mia’s Tree House 41335 § You now have 2 items in your cart
PRODUCT CARDS Adding A Product To The Cart What do you expect to happen when you add a product to the cart? § [Button] Add to cart, LEGO Friends Mia’s Tree House 41335 § (Enter) § One item was added to your cart, LEGO Friends Mia’s Tree House 41335 § You now have 2 items in your cart Note: The focus remains on the “Add to Cart” button.
PRODUCT CARDS Adding A Product To The Cart § One item was added to your cart, LEGO Friends Mia’s Tree House 41335 § You now have 2 items in your cart
PRODUCT CARDS Adding A Product To The Cart § One item was added to your cart, LEGO Friends Mia’s Tree House 41335 § You now have 2 items in your cart
PRODUCT CARDS Designing Linear Product Cards Summary § [Link] Product name § Short description (optional) § The price was $XX.xx § Now the price is $YY.yy § You save $ZZ.zz § Offer valid through April 15, 2018 § Rated 4 out of 5 stars by 274 people § [Link] Read reviews § Available sizes, small to extra large § [Link] View size chart § Available colours, red, blue, green, yellow § [Link] See more details about product name
PRODUCT CARDS WCAG 2.0 Guidelines That Apply To Product Cards PERCEIVABLE UNDERSTANDABLE § 1.1.1 (A) Non-Text Content § 3.2.2 (A) On Input § 1.3.1 (A) Information and Relationships § 3.2.4 (AA) Consistent Identification § 1.3.2 (A) Meaningful Sequence § 1.4.1 (A) Use of Colour § 1.4.3 (AA) Contrast Minimum § 1.4.4 (AA) Resize Text § 1.4.5 (AA) Images of Text OPERABLE ROBUST § 2.4.3 (A) Focus Order § 4.1.1 (A) Parsing § 2.4.4 (A) Link Purpose In Context § 4.1.2 (A) Name, Role and Value COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 223
The Mini Cart COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 224
MINI CARTS Mini Cart Examples COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 225
MINI CARTS A Linear Mini Cart Experience Let’s walk through a linearly designed mini cart experience. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 226
MINI CARTS A Linear Mini Cart Experience § Shopping Cart, 3 items, [collapsed, pop up button] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 227
MINI CARTS A Linear Mini Cart Experience § Shopping Cart, 3 items, [collapsed, pop up button] § (ENTER) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 228
MINI CARTS A Linear Mini Cart Experience § Shopping Cart, 3 items, [collapsed, pop up button] § (ENTER) § Shopping Cart, 3 items, estimated subtotal forty dollars, [expanded, pop up button] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 229
MINI CARTS A Linear Mini Cart Experience § Shopping Cart, 3 items, [collapsed, pop up button] § (ENTER) § Shopping Cart, 3 items, estimated subtotal forty dollars, [expanded, pop up button] § (TAB) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 230
MINI CARTS A Linear Mini Cart Experience § Shopping Cart, 3 items, [collapsed, pop up button] § (ENTER) § Shopping Cart, 3 items, estimated subtotal forty dollars, [expanded, pop up button] § (TAB) § [Button] Close Shopping Cart COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 231
MINI CARTS A Linear Mini Cart Experience § Shopping Cart, 3 items, [collapsed, pop up button] § (ENTER) § Shopping Cart, 3 items, estimated subtotal forty dollars, [expanded, pop up button] § (TAB) § [Button] Close Shopping Cart § (TAB) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 232
MINI CARTS A Linear Mini Cart Experience § Shopping Cart, 3 items, [collapsed, pop up button] § (ENTER) § Shopping Cart, 3 items, estimated subtotal forty dollars, [expanded, pop up button] § (TAB) § [Button] Close Shopping Cart § (TAB) § [Link] Product Title ABC, size medium, colour blue, unit price ten dollars, quantity 2, subtotal Product Title ABC twenty dollars COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 233
MINI CARTS A Linear Mini Cart Experience § Shopping Cart, 3 items, [collapsed, pop up button] § (ENTER) § Shopping Cart, 3 items, estimated subtotal forty dollars, [expanded, pop up button] § (TAB) § [Button] Close Shopping Cart § (TAB) § [Link] Product Title ABC, size medium, colour blue, unit price ten dollars, quantity 2, subtotal Product Title ABC twenty dollars § (TAB) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 234
MINI CARTS A Linear Mini Cart Experience § Shopping Cart, 3 items, [collapsed, pop up button] § (ENTER) § Shopping Cart, 3 items, estimated subtotal forty dollars, [expanded, pop up button] § (TAB) § [Button] Close Shopping Cart § (TAB) § [Link] Product Title ABC, size medium, colour blue, unit price ten dollars, quantity 2, subtotal Product Title ABC twenty dollars § (TAB) § [Button] Edit Product Title ABC COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 235
MINI CARTS A Linear Mini Cart Experience § Shopping Cart, 3 items, [collapsed, pop up button] § (ENTER) § Shopping Cart, 3 items, estimated subtotal forty dollars, [expanded, pop up button] § (TAB) § [Button] Close Shopping Cart § (TAB) § [Link] Product Title ABC, size medium, colour blue, unit price ten dollars, quantity 2, subtotal Product Title ABC twenty dollars § (TAB) § [Button] Edit Product Title ABC § (TAB) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 236
MINI CARTS A Linear Mini Cart Experience § Shopping Cart, 3 items, [collapsed, pop up button] § (ENTER) § Shopping Cart, 3 items, estimated subtotal forty dollars, [expanded, pop up button] § (TAB) § [Button] Close Shopping Cart § (TAB) § [Link] Product Title ABC, size medium, colour blue, unit price ten dollars, quantity 2, subtotal Product Title ABC twenty dollars § (TAB) § [Button] Edit Product Title ABC § (TAB) § [Button] Remove Product Title ABC from shopping cart COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 237
MINI CARTS A Linear Mini Cart Experience § (TAB) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 238
MINI CARTS A Linear Mini Cart Experience § (TAB) § [Link] Product Title DEF, size medium, colour red, unit price twenty dollars, quantity 1, subtotal Product Title DEF twenty dollars COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 239
MINI CARTS A Linear Mini Cart Experience § (TAB) § [Link] Product Title DEF, size medium, colour red, unit price twenty dollars, quantity 1, subtotal Product Title DEF twenty dollars § (TAB) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 240
MINI CARTS A Linear Mini Cart Experience § (TAB) § [Link] Product Title DEF, size medium, colour red, unit price twenty dollars, quantity 1, subtotal Product Title DEF twenty dollars § (TAB) § [Button] Edit Product Title DEF COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 241
MINI CARTS A Linear Mini Cart Experience § (TAB) § [Link] Product Title DEF, size medium, colour red, unit price twenty dollars, quantity 1, subtotal Product Title DEF twenty dollars § (TAB) § [Button] Edit Product Title DEF § (TAB) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 242
MINI CARTS A Linear Mini Cart Experience § (TAB) § [Link] Product Title DEF, size medium, colour red, unit price twenty dollars, quantity 1, subtotal Product Title DEF twenty dollars § (TAB) § [Button] Edit Product Title DEF § (TAB) § [Button] Remove Product Title DEF from shopping cart COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 243
MINI CARTS A Linear Mini Cart Experience § (TAB) § [Link] Product Title DEF, size medium, colour red, unit price twenty dollars, quantity 1, subtotal Product Title DEF twenty dollars § (TAB) § [Button] Edit Product Title DEF § (TAB) § [Button] Remove Product Title DEF from shopping cart § (TAB) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 244
MINI CARTS A Linear Mini Cart Experience § (TAB) § [Link] Product Title DEF, size medium, colour red, unit price twenty dollars, quantity 1, subtotal Product Title DEF twenty dollars § (TAB) § [Button] Edit Product Title DEF § (TAB) § [Button] Remove Product Title DEF from shopping cart § (TAB) § [Link] Checkout, 3 items, estimated subtotal forty dollars COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 245
MINI CARTS A Linear Mini Cart Experience § (TAB) § [Link] Product Title DEF, size medium, colour red, unit price twenty dollars, quantity 1, subtotal Product Title DEF twenty dollars § (TAB) § [Button] Edit Product Title DEF § (TAB) § [Button] Remove Product Title DEF from shopping cart § (TAB) § [Link] Checkout, 3 items, estimated subtotal forty dollars § (TAB) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 246
MINI CARTS A Linear Mini Cart Experience § (TAB) § [Link] Product Title DEF, size medium, colour red, unit price twenty dollars, quantity 1, subtotal Product Title DEF twenty dollars § (TAB) § [Button] Edit Product Title DEF § (TAB) § [Button] Remove Product Title DEF from shopping cart § (TAB) § [Link] Checkout, 3 items, estimated subtotal forty dollars § (TAB) § [Link] View cart COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 247
MINI CARTS A Linear Mini Cart Experience Question: Would the experience be any different if we used icons instead of visually apparent links? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 248
MINI CARTS A Linear Mini Cart Experience Question: Would the experience be any different if we used icons instead of visually apparent links? Answer: The layout would likely be different, so the linear order might be different. But the experience of each icon should be the same as its respective link representation. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 249
MINI CARTS A Linear Mini Cart Experience Question: Would the experience be any different if we used icons instead of visually apparent links? Answer: The layout would likely be different, so the linear order might be different. But the experience of each icon should be the same as its respective link representation. New Linear Tab Order: § [Link] Product Title ABC, size medium, colour blue, unit price ten dollars, quantity 2, subtotal Product Title ABC twenty dollars COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 250
MINI CARTS A Linear Mini Cart Experience Question: Would the experience be any different if we used icons instead of visually apparent links? Answer: The layout would likely be different, so the linear order might be different. But the experience of each icon should be the same as its respective link representation. New Linear Tab Order: § [Link] Product Title ABC, size medium, colour blue, unit price ten dollars, quantity 2, subtotal Product Title ABC twenty dollars § (TAB) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 251
MINI CARTS A Linear Mini Cart Experience Question: Would the experience be any different if we used icons instead of visually apparent links? Answer: The layout would likely be different, so the linear order might be different. But the experience of each icon should be the same as its respective link representation. New Linear Tab Order: § [Link] Product Title ABC, size medium, colour blue, unit price ten dollars, quantity 2, subtotal Product Title ABC twenty dollars § (TAB) § [Button] Edit Product Title ABC COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 252
MINI CARTS A Linear Mini Cart Experience Question: Would the experience be any different if we used icons instead of visually apparent links? Answer: The layout would likely be different, so the linear order might be different. But the experience of each icon should be the same as its respective link representation. New Linear Tab Order: § [Link] Product Title ABC, size medium, colour blue, unit price ten dollars, quantity 2, subtotal Product Title ABC twenty dollars § (TAB) § [Button] Edit Product Title ABC § (TAB) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 253
MINI CARTS A Linear Mini Cart Experience Question: Would the experience be any different if we used icons instead of visually apparent links? Answer: The layout would likely be different, so the linear order might be different. But the experience of each icon should be the same as its respective link representation. New Linear Tab Order: § [Link] Product Title ABC, size medium, colour blue, unit price ten dollars, quantity 2, subtotal Product Title ABC twenty dollars § (TAB) § [Button] Edit Product Title ABC § (TAB) § [Button] Remove Product Title ABC from shopping cart COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 254
MINI CARTS A Linear Mini Cart Experience Back to the “remove” button for a moment. Question: What would happen if you hit “enter”? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 255
MINI CARTS A Linear Mini Cart Experience Back to the “remove” button for a moment. Question: What would happen if you hit “enter”? Answer: The product would be removed from your cart. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 256
MINI CARTS A Linear Mini Cart Experience Back to the “remove” button for a moment. Question: What would happen if you hit “enter”? Answer: The product would be removed from your cart. Experience: Product Title DEF removed from shopping cart. Updated shopping cart, 2 items, estimated subtotal twenty dollars COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 257
MINI CARTS A Linear Mini Cart Experience Question: Where should the focus be? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 258
MINI CARTS A Linear Mini Cart Experience Question: Where should the focus be? Answer: § Mini Cart Icon? § Close Button? § Other? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 259
MINI CARTS Designing Linear Mini Carts Summary § [Button] Close shopping cart § Shopping cart, x items § [Link] Product Title (including important features) § [Button] Edit Product Title § [Button] Remove Product Title from shopping cart § Estimated subtotal § [Link] Checkout, x items, estimated subtotal § [Link] View cart COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 260
One more thing… COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 261
MINI CARTS Make The Mini Cart A Landmark Landmarks Banner Navigation Search Main Your recently viewed items More on Amazon.com navigation Shopping Cart COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 262
MINI CARTS WCAG 2.0 Guidelines That Apply To Mini Carts PERCEIVABLE § 1.1.1 (A) Non-Text Content UNDERSTANDABLE § 3.2.4 (A) Consistent Identification § 1.3.1 (A) Information and Relationships § 1.3.2 (A) Meaningful Sequence § 1.4.1 (A) Use of Colour § 1.4.3 (AA) Contrast Minimum § 1.4.4 (AA) Resize Text OPERABLE ROBUST § 2.4.3 (A) Focus Order § 4.1.1 (A) Parsing § 2.4.4 (A) Link Purpose In Context § 4.1.2 (A) Name, Role and Value § 2.4.6 (AA) Headings and Labels COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 263
Filters COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 264
FILTERS Filter Examples COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 265
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 266
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Filters COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 267
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Filters § Best for COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 268
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Filters § Best for § COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 269
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Filters § Best for § § [Link] Studio Classes COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 270
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Filters § Best for § § [Link] Studio Classes § [Link] Gym Workouts COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 271
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Filters § Best for § § [Link] Studio Classes § [Link] Gym Workouts § COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 272
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Innovations COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 273
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Innovations § COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 274
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Innovations § § [Link] Air Max COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 275
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Innovations § § [Link] Air Max § [Link] Nike Air COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 276
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Innovations § § [Link] Air Max § [Link] Nike Air § [Link] Nike Free COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 277
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Innovations § § [Link] Air Max § [Link] Nike Air § [Link] Nike Free § [Link] More COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 278
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Customise COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 279
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Customise § COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 280
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Customise § § [Link] Customise with NikeiD COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 281
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Customise § § [Link] Customise with NikeiD § Colour COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 282
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Customise § § [Link] Customise with NikeiD § Colour § COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 283
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Customise § § [Link] Customise with NikeiD § Colour § § [Link] 7ptZ81hZ8yzZoi3 COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 284
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Customise § § [Link] Customise with NikeiD § Colour § § [Link] 7ptZ81hZ8yzZoi3 § [Link] 7ptZahpZ8yzZoi3 COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 285
FILTERS Current State Experience Example Let’s walk through a fairly simple filter experience that isn’t accessible. § Customise § § [Link] Customise with NikeiD § Colour § § [Link] 7ptZ81hZ8yzZoi3 § [Link] 7ptZahpZ8yzZoi3 § [Link] 7ptZ9i1Z8yzZoi3 COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 286
Like, OMG! COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 287
Let’s improve the experience, shall we? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 288
FILTERS Making Accessible Filters
FILTERS Making Accessible Filters
FILTERS Making Accessible Filters 1. The set of filters should have a heading, whether it’s hidden or not. 2. Each category should be a heading, whether it’s an accordion or not. Headings 1: Women’s Gym and Training Shoes 2: Filters 3: Best For 3: Innovations 3: Customise 3: Colour COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 291
FILTERS Making Accessible Filters 1. The set of filters should have a heading, whether it’s hidden or not. 2. Each category should be a heading, whether it’s an accordion or not. Headings 1: Women’s Gym and Training Shoes 2: Filters 3: Best For 3: Innovations 3: Customise 3: Colour COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 292
FILTERS Making Accessible Filters 3. Think critically about filter headings. Ideally, they would indicate the category’s true function. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 293
FILTERS Making Accessible Filters 3. Think critically about filter headings. Ideally, they would indicate the category’s true function. Headings 1: Women’s Gym and Training Shoes 2: Filters 3: Best For 3: Innovations 3: Customise 3: Colour COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 294
FILTERS Making Accessible Filters 3. Think critically about filter headings. Ideally, they would indicate the category’s true function. Headings 1: Women’s Gym and Training Shoes 2: Filters 3: Filter category Best For 3: Filter category Innovations 3: Filter category Customise 3: Filter category Colour COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 295
FILTERS Making Accessible Filters 3. Think critically about filter headings. Ideally, they would indicate the category’s true function. Headings 1: Women’s Gym and Training Shoes 2: Filters 3: Best For options 3: Innovations options 3: Customise options 3: Colour options COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 296
FILTERS Making Accessible Filters 4. Think critically about filter names. Ideally, they are distinct and descriptive. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 297
FILTERS Making Accessible Filters 4. Think critically about filter names. Ideally, they are distinct and descriptive. Form Controls Studio classes Gym workouts Air max Nike air Nike free Customize with NIKEid White Grey Orange COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 298
FILTERS Making Accessible Filters 4. Think critically about filter names. Ideally, they are distinct and descriptive. Form Controls Best for, studio classes Best for, gym workouts Innovations, air max Innovations, Nike air Innovations, Nike free Customise, customize with NIKEid Colour, white Colour, grey Colour, orange COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 299
FILTERS Making Accessible Filters 4. Think critically about filter names. Ideally, they are distinct and descriptive. Form Controls Filter on best for, studio classes Filter on best for, gym workouts Filter on innovations, air max Filter on innovations, Nike air Filter on innovations, Nike free Filter on customise, customize with NIKEid Filter on colour, white Filter on colour, grey Filter on colour, orange COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 300
FILTERS Making Accessible Filters 4. Think critically about filter names. Ideally, they are distinct and descriptive. Form Controls Filter on best for, studio classes, checkbox unchecked Filter on best for, gym workouts, checkbox unchecked Filter on innovations, air max, checkbox unchecked Filter on innovations, Nike air, checkbox unchecked Filter on innovations, Nike free, checkbox unchecked Filter on customise, customize with NIKEid, checkbox unchecked Filter on colour, white, checkbox unchecked Filter on colour, grey, checkbox unchecked Filter on colour, orange, checkbox unchecked COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 301
FILTERS Making Accessible Filters 5. If using checkboxes, mark them up properly so that the user knows each checkbox’s state: whether the checkbox is checked or unchecked. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 302
FILTERS Making Accessible Filters 5. If using checkboxes, mark them up properly so that the user knows each checkbox’s state: whether the checkbox is checked or unchecked. § Filter on Innovations, Air Max [checkbox, unchecked] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 303
FILTERS Making Accessible Filters 5. If using checkboxes, mark them up properly so that the user knows each checkbox’s state: whether the checkbox is checked or unchecked. § Filter on Innovations, Air Max [checkbox, unchecked] § (Tab) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 304
FILTERS Making Accessible Filters 5. If using checkboxes, mark them up properly so that the user knows each checkbox’s state: whether the checkbox is checked or unchecked. § Filter on Innovations, Air Max [checkbox, unchecked] § (Tab) § Filter on Innovations, Nike Air [checkbox, unchecked] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 305
FILTERS Making Accessible Filters 5. If using checkboxes, mark them up properly so that the user knows each checkbox’s state: whether the checkbox is checked or unchecked. § Filter on Innovations, Air Max [checkbox, unchecked] § (Tab) § Filter on Innovations, Nike Air [checkbox, unchecked] § (Tab) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 306
FILTERS Making Accessible Filters 5. If using checkboxes, mark them up properly so that the user knows each checkbox’s state: whether the checkbox is checked or unchecked. § Filter on Innovations, Air Max [checkbox, unchecked] § (Tab) § Filter on Innovations, Nike Air [checkbox, unchecked] § (Tab) § Filter on Innovations, Nike Free [checkbox, unchecked] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 307
FILTERS Making Accessible Filters 6. If using accordions, mark them up properly so that the user knows each accordion’s state: whether the accordion is open or closed. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 308
FILTERS Making Accessible Filters 6. If using accordions, mark them up properly so that the user knows each accordion’s state: whether the accordion is open or closed. § Best For [dimmed expanded, button] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 309
FILTERS Making Accessible Filters 6. If using accordions, mark them up properly so that the user knows each accordion’s state: whether the accordion is open or closed. § Best For [dimmed expanded, button] § Innovations [dimmed expanded, button] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 310
FILTERS Making Accessible Filters 6. If using accordions, mark them up properly so that the user knows each accordion’s state: whether the accordion is open or closed. § Best For [dimmed expanded, button] § Innovations [dimmed expanded, button] § Customise [dimmed expanded, button] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 311
FILTERS Making Accessible Filters 6. If using accordions, mark them up properly so that the user knows each accordion’s state: whether the accordion is open or closed. § Best For [dimmed expanded, button] § Innovations [dimmed expanded, button] § Customise [dimmed expanded, button] § Colour [dimmed expanded, button] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 312
FILTERS Making Accessible Filters 7. Inform the user how many filters are in each list. 8. Include the number of items to which the filter applies. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 313
FILTERS Making Accessible Filters 7. Inform the user how many filters are in each list. 8. Include the number of items to which the filter applies. (12) (47) (0) § Filter on Innovations, Air Max [checkbox, unchecked, thirty six products], [list 8 items] (36) (10) (16) (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 314
FILTERS Making Accessible Filters 7. Inform the user how many filters are in each list. 8. Include the number of items to which the filter applies. (12) (47) (0) § Filter on Innovations, Air Max [checkbox, unchecked, thirty six products], [list 8 items] § (Tab) (36) (10) (16) (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 315
FILTERS Making Accessible Filters 7. Inform the user how many filters are in each list. 8. Include the number of items to which the filter applies. (12) (47) (0) § Filter on Innovations, Air Max [checkbox, unchecked, thirty six products], [list 8 items] § (Tab) (36) (10) (16) § Filter on Innovations, Nike Air [checkbox, unchecked, ten products] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL (11) 316
FILTERS Making Accessible Filters 7. Inform the user how many filters are in each list. 8. Include the number of items to which the filter applies. (12) (47) (0) § Filter on Innovations, Air Max [checkbox, unchecked, thirty six products], [list 8 items] § (Tab) (36) (10) (16) § Filter on Innovations, Nike Air [checkbox, unchecked, ten products] (11) § (Tab) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 317
FILTERS Making Accessible Filters 7. Inform the user how many filters are in each list. 8. Include the number of items to which the filter applies. (12) (47) (0) § Filter on Innovations, Air Max [checkbox, unchecked, thirty six products], [list 8 items] § (Tab) (36) (10) (16) § Filter on Innovations, Nike Air [checkbox, unchecked, ten products] (11) § (Tab) § Filter on Innovations, Nike Free [checkbox, unchecked, sixteen products] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 318
FILTERS Making Accessible Filters 7. Inform the user how many filters are in each list. 8. Include the number of items to which the filter applies. (12) (47) (0) § Filter on Innovations, Air Max [checkbox, unchecked, thirty six products], [list 8 items] § (Tab) (36) (10) (16) § Filter on Innovations, Nike Air [checkbox, unchecked, ten products] (11) § (Tab) § Filter on Innovations, Nike Free [checkbox, unchecked, sixteen products] § More [collapsed, button] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 319
FILTERS Making Accessible Filters (12) (47) (0) (36) Sidebar: More what? (10) (16) (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 320
FILTERS Making Accessible Filters Sidebar: More what? (12) (47) (0) § More innovation options? § More innovation filters? § More filters in category innovations? (36) (10) (16) § Other? (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 321
FILTERS Making Accessible Filters (12) (47) (0) (36) Sidebar: Mark it up properly as an accordion. (10) (16) (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 322
FILTERS Making Accessible Filters Sidebar: Mark it up properly as an accordion. (12) (47) (0) § More innovation options [collapsed, button]? § More innovation filters [collapsed, button]? § More filters in category innovations [collapsed, button]? (36) (10) (16) § Other? (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 323
FILTERS Making Accessible Filters (12) (47) (0) (36) 9. Provide a Bypass Block to the set of filters. (10) (16) (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 324
FILTERS Making Accessible Filters 9. Provide a Bypass Block to the set of filters. (12) (47) (0) § Websites need a mechanism for keyboard users to bypass blocks of content, like filters. (36) (10) (16) (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 325
FILTERS Making Accessible Filters 9. Provide a Bypass Block to the set of filters. (12) (47) (0) § Websites need a mechanism for keyboard users to bypass blocks of content, like filters. § Bypass blocks are typically hidden by default and (36) (10) (16) appear visible when in their focused state. (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 326
FILTERS Making Accessible Filters 9. Provide a Bypass Block to the set of filters. (12) (47) (0) § Websites need a mechanism for keyboard users to bypass blocks of content, like filters. § Bypass blocks are typically hidden by default and appear (36) (10) (16) visible when in their focused state. § They should be purposefully designed, with their look (11) and feel displayed in the style guide. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 327
FILTERS Making Accessible Filters (12) (47) (0) (36) 10. Provide Bypass Blocks within each filter category. (10) (16) (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 328
FILTERS Making Accessible Filters 10. Provide Bypass Blocks within each filter category. (12) (47) (0) § After the last filter in a category, you should include a bypass link to the product grid. (36) (10) (16) (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 329
FILTERS Making Accessible Filters 10. Provide Bypass Blocks within each filter category. (12) (47) (0) § After the last filter in a category, you should include a bypass link to the product grid. § It should be situated between the last facet in (36) (10) (16) the current category and the heading of the next category. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL (11) 330
Why would I do that? How is this going to help a user? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 331
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 332
FILTERS Making Accessible Filters (12) (47) (0) 11. Provide context to the user on each filter selection. (36) (10) (16) (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 333
FILTERS Making Accessible Filters 11. Provide context to the user on each filter selection. (12) (47) (0) § Filter on Best For, Gym Workouts [checkbox, unchecked, forty-seven products] (36) (10) (16) (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 334
FILTERS Making Accessible Filters 11. Provide context to the user on each filter selection. (12) (47) (0) § Filter on Best For, Gym Workouts [checkbox, unchecked, forty-seven products] § (Enter) (36) (10) (16) (11) COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 335
FILTERS Making Accessible Filters 11. Provide context to the user on each filter selection. (3) (47) (0) § Filter on Best For, Gym Workouts [checkbox, unchecked, forty-seven products] § (Enter) (18) (7) (2) § Filter on Best For, Gym Workouts [checkbox, checked, forty-seven products] COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL (9) 336
FILTERS Making Accessible Filters 11. Provide context to the user on each filter selection. (3) (47) (0) § Filter on Best For, Gym Workouts [checkbox, unchecked, forty-seven products] § (Enter) (18) (7) (2) § Filter on Best For, Gym Workouts [checkbox, checked, forty-seven products] (9) § Now displaying 53 products COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 337
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 338
How else can I help the user get back and forth easily? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 339
FILTERS Making Accessible Filters Landmarks 13. Make the filter a landmark. 14. Make the product grid a landmark. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL Navigation Search Shopping Cart Filters Products Secondary Navigation 340
FILTERS Making Accessible Filters Summary Form Controls Filter on best for, studio classes, checkbox unchecked, 12 products Filter on best for, gym workouts, checkbox unchecked, 47 products Filter on innovations, air max, checkbox unchecked, 36 products Filter on innovations, Nike air, checkbox unchecked, 10 products Filter on innovations, Nike free, checkbox unchecked, 16 products Filter on customise, customize with NIKEid, checkbox unchecked, 11 products Filter on colour, white, checkbox unchecked Filter on colour, grey, checkbox unchecked Filter on colour, orange, checkbox unchecked (12) (47) (0) (36) (10) (16) (11) Headings 1: Women’s Gym and Training Shoes 2: Filters 3: Filter category Best For 3: Filter category Innovations 3: Filter category Customise 3: Filter category Colour COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL Landmarks Navigation Search Shopping Bag Filters Products Secondary Navigation 341
FILTERS WCAG 2.0 Guidelines That Apply To Filters PERCEIVABLE § 1.1.1 (A) Non-Text Content UNDERSTANDABLE § 3.2.2 (A) On Input § 1.3.1 (A) Information and Relationships § 1.3.2 (A) Meaningful Sequence § 1.4.1 (A) Use of Colour § 1.4.3 (AA) Contrast Minimum § 1.4.4 (AA) Resize Text OPERABLE ROBUST § 2.4.1 (A) Bypass Blocks § 4.1.1 (A) Parsing § 2.4.3 (A) Focus Order § 4.1.2 (A) Name, Role and Value § 2.4.6 (AA) Headings and Labels COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 342
Where else do we see components having similar relationships and design considerations? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 343
Product Detail Page COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 344
PRODUCT DETAILS Product Detail Page Examples COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 345
PRODUCT DETAILS Improving The Product Detail Page Usability Question: What components shown here have a dependent relationship? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 346
PRODUCT DETAILS Improving The Product Detail Page Usability Question: What components shown here have a dependent relationship? Answer: § Image Gallery § Swatches COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 347
PRODUCT DETAILS Improving The Product Detail Page Usability Question: How can I quickly and easily navigate from the image gallery to the swatches? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 348
PRODUCT DETAILS Improving The Product Detail Page Usability Question: How can I quickly and easily navigate from the image gallery to the swatches? Answer 1: Similar to filters and the product grid, we could provide strategically placed bypass links to facilitate toggling between the two sections. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 349
PRODUCT DETAILS Improving The Product Detail Page Usability Question: How can I quickly and easily navigate from the image gallery to the swatches? Answer 2: Make the image gallery and the product details landmarks. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL Landmarks Navigation Search Shopping Cart Image Gallery Product Details Secondary Navigation 350
PRODUCT DETAILS Improving The Product Detail Page Usability Landmarks Navigation Search Shopping Cart Image Gallery Product Details Secondary Navigation COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 351
PRODUCT DETAILS Improving The Product Detail Page Usability Question: How can I quickly and easily navigate from the image gallery to the swatches? Answer 3: Design a meaningful heading structure. Note: The “Image Gallery” heading is hidden. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL Headings 1: Women’s Oceanside Tunic Dress UPF 50+ 2: Image Gallery 2: Select Color 2: Select Fit 2: Select Size 2: Highlights 2: Details 2: Fabric Details 2: Size Chart 352
PRODUCT DETAILS Improving The Product Detail Page Usability Headings 1: Women’s Oceanside Tunic Dress UPF 50+ 2: Image Gallery 2: Select Color 2: Select Fit 2: Select Size 2: Highlights 2: Details 2: Fabric Details 2: Size Chart COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 353
PRODUCT DETAILS Improving The Product Detail Page Usability Question: How can I quickly and easily navigate from the image gallery to the swatches? Answer 4: Ensure the controls provide meaningful context. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL Form Controls Select color pattern 1 button Select color pattern 2 button Select color coral waterfront print button Select color pattern 4 button Select fit regular button Select size small 6 to 8 button Select size large 14 to 16 button Select quantity 1 edit text Add to bag button Add to wish list button Highlights collapsed button Details collapsed button Fabric details collapsed button Size chart collapsed button 354
PRODUCT DETAILS Improving The Product Detail Page Usability Form Controls Select color pattern 1 button Select color pattern 2 button Select color coral waterfront print button Select color pattern 4 button Select fit regular button Select size small 6 to 8 button Select size large 14 to 16 button Select quantity 1 edit text Add to bag button Add to wish list button Highlights collapsed button Details collapsed button Fabric details collapsed button Size chart collapsed button COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 355
Kool. But like, what’s the biggest usability problem on the Product Detail Page? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 356
The reading order COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 357
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 358
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 359
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 360
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 361
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 362
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 363
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 364
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 365
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 366
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 367
So is there a better way to design this page? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 368
Well, yeah COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 369
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 370
OK. So I want to take a sec to ask… COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 371
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 372
IN SUMMARY COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 373
I want you to know… COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 374
COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 375
What Have We Not Talked About? § Product Grid § Image Gallery § Carousels § Pan and Zoom § Navigation § Expand Image § Header § Footer § Forms § Audio § Video § Controls § Labels § Radio Buttons § Placeholder Text § Sliders § Error Messaging § Etc. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL § Search § Tables § Maps § Alerts § Modals § CAPTCHA § Pagination 376
So I want to reiterate… COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 377
Think linearly COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 378
Provide context COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 379
Provide multiple avenues for the user to find their way COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 380
Let the user decide what’s important to them COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 381
Limit the effort COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 382
Questions? COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 383
THANKS! COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 384
Almost anyone today can make a website accessible. But that doesn’t mean that people using assistive technologies can USE them! Technically, the site can pass the WCAG guidelines, but the user is still unable to accomplish their goals, or they are forced to do so in a cumbersome, unintuitive way that ALWAYS takes way too much time. It’s quite the understatement to say that an individual using a screen reader does not experience the ease with which a sighted person using a mouse pointer enjoys.
Well, I aim to change that. As a user experience professional, I’ve done extensive research on the most usable ways to design common user interface elements that will benefit user experience regardless of input mechanism. During this presentation, I will walk the audience through more accessible AND usable common web components and flows. Examples include: product cards, E-Commerce shopping carts, search results pages, toggling between the filter and the product grid on a PLP, and more.
for free. You
can too.