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

  1. Amazon.com C
  2. Ebay.com D
  3. Walmart.com F
  4. Apple.com D
  5. HomeDepot.com F
  6. BestBuy.com F
  7. Macys.com F
  8. Costco.com B
  9. QVC.com F 10.Wayfair.com F 42

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

  1. Make the image and product card title one clickable link.

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

  1. The set of filters should have a heading, whether it’s hidden or not. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 289

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. COPYRIGHT SAPIENTRAZORFISH | CONFIDENTIAL 290

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