Tag: Experiences

innoutburger-restaurant-website-on-mobile
23 Jun

How Web Designers Can Help Restaurants Move Into Digital Experiences

by TBSCategories: News

How Web Designers Can Help Restaurants Move Into Digital Experiences

How Web Designers Can Help Restaurants Move Into Digital Experiences

Suzanne Scacca

As much as I’ve always loved the experience of going out to eat and ordering in takeout, it’s very rare that I enjoy visiting a restaurant’s website. But I get it. The restaurant industry tends to run on very slim profit margins, so it’s hard to justify spending money on a professionally designed website when all they want it to do is list their hours of operation and menu.

However, I envision all that changing in 2020 (and beyond) as restaurants are forced to expand into digital in order to survive. Unlike a website that a novice might hack together with a cheap site builder, establishing a competitive digital presence isn’t something they’re going to be able to do on their own.

That’s why web designers should seriously start thinking about expanding into this niche.

How Web Designers Can Help Restaurants Move into Digital

Usually, when something serious shakes up the restaurant industry, those that want to survive will adopt newer and better technologies to adapt. So, it’s not like restaurants are strangers to digital transformation. Until now, though, the focus has mainly been on investing in technology that improves how they work in-house.

With everything that’s happened in 2020, though, restaurants are going to need web designers’ help in doing three things that ensure their survival in an increasingly digital world:

1. Modernize The Restaurant Website

Whenever I write one of these posts, I spend time reviewing a few dozen websites to find the best examples to make my point. I’m not going to lie, this one was tough. While I knew I could turn to national chain restaurants to find modern-looking websites, I had a really hard time with others.

While it’s not impossible to find an independent restaurant operator or local chain that has a great-looking website in 2020, I’d say that at least half of them are way behind the times, if they even have a website at all.

Remember when websites were designed like this?

A blurred-out website to demonstrate how independent restaurants still have unresponsive designs
An outdated restaurant website in 2020, blurred out to protect its identity. (Source: Anonymous) (Large preview)

I’ve blurred out the restaurant’s name and details to protect its identity, but you can still get a sense of how bad this design is for 2020.

Restaurant websites can’t afford to be crappy, non-responsive placeholders anymore. They need to become impressive digital presences that set the stage for what customers will experience when interacting with restaurants as diners.

Let’s take a look at how In-N-Out Burger has nailed modern web design. The first thing you’ll notice is it’s a responsive design. On desktop, the website fits the full width of the screen, so there’s no wasted space around the border. It looks good on a mobile device, too:

In-N-Out Burger website on mobile
The In-N-Out Burger mobile website is responsive and easy to read. (Source: In-N-Out Burger) (Large preview)

Also, take notice of the images. This is a burger joint, so you should expect the website to be full of burger photos, which it is. However, there’s something interesting to note about the burgers you find on the site.

In-N-Out Burger website photos and transitions
The In-N-Out Burger website uses perfectly framed images and well-chosen transitions. (Source: In-N-Out Burger) (Large preview)

When someone enters a page where there’s a burger photo, the food slides into the frame as if someone were sliding it over to a customer in the restaurant. It’s a neat little transition and many visitors to the site might not even realize what’s happening, but it makes the experience feel more lifelike and interactive.

Transitions aren’t the only things you can do to create this sort of experience. Background videos taken within the establishment work just as well as it gives customers the opportunity to walk through the establishment instead of relying on static images that only paint part of the picture.

Another thing restaurant websites need to improve is how they’re organized.

When people are ready to go out to eat or to dine in, don’t waste their time trying to force the restaurant’s history down their throats (which many of these sites surprisingly do). The navigation as well as the order in which CTAs appear on the home page should reflect the actions customers want to take.

The thought process most likely goes like this:

  1. “I’m not sure what to order. Where’s the menu?” (Menu)
  2. “Do I need to make a reservation or can we just go whenever?” (Reservations)
  3. “Where is this place again?” (Locations or Contact)

Or, these days, #2 looks more like this:

  • “Do they do takeout? I wonder if they’ll deliver it.” (Order Online)

There are other things customers might want to do on the website. Like buy gift cards or merchandise, sign up for rewards or apply for a job.

So, while the above tasks should be a priority in terms of what visitors see first, make sure to look at the site’s data to see what else they’re interested in doing. Then, make sure those popular actions take center stage in the navigation and site design.

2. Empower Them to Diversify Their Income

Under normal circumstances, profitability is a problem for many restaurants. Add a crisis to the mix and it’s going to become downright impossible to generate any profit — that is if they rely solely on dine-in business.

Long before COVID-19, consumers were already showing a growing preference for digital dining solutions.

According to Peapod, 77% of U.S. consumers said they preferred eating at home than going out. But that doesn’t necessarily translate to ordering in from a restaurant.

  • 27% preferred to order groceries online and pick them up from the store.
  • 26% planned to use grocery delivery.
  • 20% were interested in meal kits.

Then, you have information from Technomic and the National Restaurant Association that found that about 60% of all restaurant sales in the U.S. come from off-premise dining.

For restaurants that haven’t yet made the leap to digital dining options, they’re going to have to ASAP. This isn’t just a temporary thing either.

Restaurants that fail to digitize going forward won’t survive.

“

So, web designers are going to be needed to help them build out the following:

  • An online ordering system for their website or a link to an external service,
  • A reservation system (for when in-house dining is available).

That’s just the bare minimum though. For instance, this is what Snooze Eatery has done:

Snooze Eatery online delivery or pickup
Snooze Eatery advertises delivery or pickup on its website. (Source: Snooze Eatery) (Large preview)

The first thing visitors see on the website is the online ordering option. When they click “Place Your Order”, they’re taken to the restaurant’s proprietary ordering portal:

Snooze Eatery online ordering portal
Snooze Eatery’s online ordering portal. (Source: Snooze Eatery) (Large preview)

This in and of itself is a great solution for restaurants to have available through their websites as it allows them to control the ordering process and capture more of the profits (but that’s up to your clients to decide, of course). That said, many restaurants are getting creative and going beyond traditional online ordering options.

Below the fold on the Snooze Eatery site, visitors will find this banner:

Snooze Eatery neighborhood provisions: family-style meal kits and food essentials
Snooze Eatery now offers neighborhood provisions. (Source: Snooze Eatery) (Large preview)

As I mentioned earlier, there’s a good number of people who want to be able to order food online but then prepare it for themselves at home. While that would previously have left restaurants high and dry, that’s not the case anymore as many restaurants are expanding their offering to include family-style meal kits and groceries like Snooze.

This alone means that web designers are going to become increasingly more important for restaurants. And don’t expect the work to end there. Restaurants will also need your help building other monetized offerings into their websites. For instance:

  • Gift cards;
  • Merchandise;
  • Subscription services for meal kits, alcohol deliveries and more;
  • Online memberships for cooking classes, premium recipes, etc.

If they don’t have one yet, they’ll also probably need help creating a rewards and account management system as well.

3. Fix Their Brand Images on Third-party Sites

Although the website should be the engine that powers everything for the business online, restaurants need other sites to help with visibility, too. For example:

  • Facebook to share photos, advertise location information and collect customer reviews;
  • Instagram to share photos, restaurant updates and customer-generated content;
  • Yelp and TripAdvisor to collect customer reviews and feedback;
  • Google My Business to create a local presence in Google search and Maps as well as to collect reviews;
  • Delivery services like DoorDash to outsource delivery to;
  • Reservation sites like OpenTable to outsource reservation bookings to.

If customers are looking for restaurants online, they need to be willing and able to meet them where they are… before eventually bringing them to the website.

Although it’s ultimately the restaurant’s responsibility to create these pages, you should provide assistance when it comes to the visual branding piece. For one, it ensures that there’s some consistency between all their platforms. Also, it enables you to fill in missing pieces that restaurateurs might not think about.

Let’s take a look at Rhode Island staple, IGGY’S:

IGGY’S website with picture of clamcakes and 3 options for online ordering
IGGY’S website visitors are introduced to the restaurant with an image of its iconic clamcakes. (Source: IGGY’S) (Large preview)

The waterfront eatery immediately gets down to business and provides visitors with 3 options for ordering online (based on which location they want to go to).

Here’s what the online ordering portal looks like:

IGGY’S online ordering portal
IGGY’S restaurant’s online ordering portal. (Source: IGGY’S) (Large preview)

Notice how good this looks. It takes what would otherwise be a text-only menu and turns it into something much more attractive and, arguably, more effective in driving up sales.

Now, contrast that with IGGY’S online ordering through DoorDash:

DoorDash online ordering for IGGY’s
DoorDash customers can order online from IGGY’s restaurant. (Source: DoorDash) (Large preview)

The items on this page rarely come with descriptions or images.

Now, IGGY’S is a well-known restaurant around Rhode Island, so this might not be a dealbreaker for online customers. However, new customers might approach the menu with more trepidation than the one available through the IGGY’S website since it’s devoid of details.

This is where your visual-centric approach comes in handy. By making sure each item comes with a high-resolution and mouth-watering photo (the same as the one used on the site), you can optimize this sales opportunity for them.

It’s also important to ensure the brand elements are consistently presented. That way, if an existing customer runs across their favorite restaurant on DoorDash, they won’t hesitate to order because they’ll instantly know it’s their favorite restaurant.

For example, the logo on DoorDash is nothing like the one on the website in terms of quality or looks:

DoorDash logo and location information for IGGY’S RI
The DoorDash logo for IGGY’S doesn’t match the one on the website. (Source: DoorDash) (Large preview)

Be it the logo or another branded element, you want to make sure that 1) it matches the website and 2) looks good. This goes for online ordering sites like DoorDash as well as all the other ones I mentioned earlier.

Wrapping Up

We’re at a point now where restaurants can no longer be reluctant or stingy about improving their digital presence. And, as a web designer, this should get you excited.

There’s a lot you can do to help businesses in this space beyond designing basic websites. Because so much of their digital transformation involves making sales online, you’ll get to design experiences that are intuitive, modern, and mouth-watering while also creating new monetized pathways for them.

Smashing Editorial (ra, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
equivalent-experiences-headings
05 Jun

Equivalent Experiences: Thinking Equivalently

by TBSCategories: News

Equivalent Experiences: Thinking Equivalently

Equivalent Experiences: Thinking Equivalently

Eric Bailey

This is the second of two articles on the topic of how digital accessibility is informed by equivalency. Previously, we have learned about the underlying biases that inform digital product creation, what isn’t an equivalent experience, the compounding effects of inaccessible design and code, and powerful motivating forces for doing better.

In this article, I will discuss learning how to embrace an equivalent, inclusive mindset. I will also provide practical, robust ways to improve your websites and web apps by providing solutions to common, everyday barriers cited by the people I interviewed.

Setting A Standard

The Web Content Accessibility Guidelines (WCAG) outlines in painstaking detail how to craft accessible digital experiences. While a long and dense document, it is incredibly comprehensive — to the point where it’s been codified as an international standard. For over 10 years, we’ve had a globally agreed upon, canonical definition of what constitutes as usable.

How Would I?

If you need a little help constructing the initial mental framework the WCAG gets at, a question I always ask myself when making something is, “How would I use this if…” It’s a question that gets you to check all the biases that might be affecting you in the moment.

Examples could be:

  • How would I use this if…
    • …I can’t see the screen?
    • …I can’t move my arms?
    • …I’m sensitive to flashing and strobing animation?
    • …English isn’t my primary language?
    • …I have a limited budget for bandwidth?
    • …I’ve set a large default type size?
    • …and so on.

A Gentle Introduction

If you’re looking for a more approachable resource for how to dig into what the WCAG covers, the Inclusive Design Principles would be a great place to start. The seven principles it describes all map back to WCAG success criterion.

Screenshot of the top portion of the Inclusive Design Principles website. It includes a simple illustration of three hot air balloons floating in front of a cloud and sun. It also has the intro paragraph, “These Inclusive Design Principles are about putting people first. It’s about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really.” The contributors are listed as Henny Swan, Ian Pouncey, Heydon Pickering, and Léonie Watson
(Large preview)

Learn From The People Who Actually Use It

You don’t have to take my word for it. Here are some common issues cited by the people I interviewed, and how to fix them:

Wayfinding

Headings

Heading elements are incredibly important for maintaining an equivalent, accessible experience.

When constructed with skill and care, heading elements allow screen reader users to quickly determine the contents of a page or view and navigate to content relevant to their interests. This is equivalent to how someone might quickly flit around, scrolling until something that looks pertinent comes into view.

A graphic showing how nested heading elements correspond to the layout of a design for a site called SkyList. The first level heading is “Types of Clouds,” which maps to the page’s h1 element. The three h2 heading elements read, “High,” “Mid-level,” and “Low.” Each of these headings is represented in the design as a shaded area. Within each area are card designs, including an image placeholder, a title, and a paragraph placeholder. The h3 heading elements for the High section cards are “Cirrus,” “Cirrostratus,” and “Cirrocumulus.” The h3 heading elements for the Mid-level section cards are “Altocumulus,” “Altostratus,” and “Nimbostratus.” The h3 heading elements for the Low section cards are “Cumulus,” “Stratus,” “Cumulonimbus,” and “Stratocumulus.”
The HeadingsMap browser extension lets you view a page’s heading hierarchy. (Large preview)

Justin Yarbrough voices poorly-authored heading elements as a concern, and he’s not alone.

WebAIM’s screen reader survey cites headings as the most important way to find information. This survey is well-worth paying attention to, as it provides valuable insight into how disabled people actually use assistive technology.

Landmarks

In addition to heading elements, another way to determine the overall structure and layout are landmarks. Landmarks are roles implicitly described by HTML sectioning elements, used to help describe the overall composition of the main page or view areas.

A ‘holy grail’ layout showing a header element row stretching across three columns. Below that is another row with three columns, using nav, main, and aside elements. Below that is a third and final column-stretching row using the footer element. Each element is also labeled with its corresponding landmark.
These are five of the eight landmark HTML elements and the roles using them create. (Large preview)

Here’s what Justin has to say:

“If I’m just trying to find the main content, I’ll first try the Q JAWS shortcut key to see if a main region’s set up. If not, I’m just more or less stuck trying to scan the page to find it arrowing through the page.”

Much as how we might use a layer group name of “primary nav” in our design file, or a class name of c-nav-primary in our CSS, it’s important we also use a nav sectioning element to describe our main site navigation (as well as any other navigation the page or view contains).

Doing so ensures intent is carried all the way through from conception, to implementation, to use. The same notion carries through for the other HTML sectioning elements that create landmarks for assistive technology.

Labeled Controls

Brian Moore tells us about “form fields with no label or at least one that isn’t programmatically associated so it doesn’t read anything.”

It’s another frustratingly common problem.

Providing a valid for/id attribute pairing creates a programmatic association between form inputs and the label that describes what it does. And when I say label, I mean the label element. Not a clickable div, a placeholder, aria-label, or some other brittle and/or overwrought solution. label elements are a tried-and-true solution that enjoys wide and deep support for accessibility.

In addition, a label element should not be used by itself, say for a label on a diagram. This might seem counter-intuitive at first, but please bear with me.

<!-- Please do this --> <label for="your-name">Your name</label> <input type="text" id="your-name" name="your-name" autocomplete="name">  <!-- Don’t do this --> <label for="eye">Cornea</label> <label for="eye">Pupil</label> <label for="eye">Lens</label> <label for="eye">Retina</label> <label for="eye">Optic Nerve</label> <img id="eye" alt="A diagram of the human eye." src="parts-of-the-eye.png" />

The same kinds of assistive technology that let a person jump to headings and landmarks also allow them to jump to input labels. Because of this, there is the expectation that when a label element is present, there is also a corresponding input it is associated with.

Alternative Descriptions

If you have low or no vision, and/or have difficulty understanding an image, HTML’s alt attribute (and not the title attribute) provides a mechanism to understand what the image is there for. The same principle applies for providing captions for video and audio content like podcasts.

Kenny Hitt mentions that when:

“…someone posts something on Twitter, if it’s just an unlabeled image, I don’t even take the time to participate in the conversation. When you start every conversation by asking what’s in the picture, it really derails things.”

Up until last week, the only way for Twitter to provide alternative descriptions for its images was to enable an option buried away in the subsection of a preference menu. Compare this to a platform like Mastodon, where the feature is enabled by default.

Soren Hamby, mentions Stitcher, a popular podcast app. “The onboarding was a lot of themed graphics, but the alt text for each one was ‘unselected’ and for the same image with a check over it was selected. I think it would be reasonable for them to say ‘sci-fi genre selected’ […] it’s such a small thing but it makes all the difference.”

Ensuring that alternate description content is concise and descriptive is just as important as including the ability to add it. Daniel Göransson, a developer for Axess Lab, has a great article on how to write them effectively.

Robust, accessible features can also be part of evaluation criteria, as well as a great method for building customer loyalty. Soren mentions that they are “often the deciding factor, especially between services.” In particular, they cite Netflix’s audio descriptions.

ARIA

One topic Daniel Göransson’s article on alternative descriptions mentions is to not over-describe things. This includes information like that it is an image, who the photographer is, and keyword stuffing.

The same principle applies for Accessible Rich Internet Applications (ARIA). ARIA is a set of attributes designed to extend HTML to fill in the gaps between interactive content and assistive technology. When ARIA is used to completely replace HTML, it oftentimes leads to an over-described experience.

Brian explains: “There seems to be a perception that more ARIA fixes accessibility and it can help, but too much either reads wrong things or just talks way too much. If on screen text of one or two words is good enough for everyone else, it is good enough for screen reader users too. We don’t need whole sentence or two descriptions of buttons or links i.e ‘link privacy policy’ is far better than something like ‘this link will open our privacy policy, this link will open in a new window’ when the on screen link text is ‘privacy policy.’”

The First Rule of ARIA Use advises us to only use it when a native element won’t suffice. You don’t need to describe what your interactive component is or how it works, the same way you don’t need to include the word “image” in your alternative description.

Provided that you use the appropriate native HTML element, assistive technology will handle all of that for you. Do more, more robustly, with less effort? Sounds great to me!

A code sample of an anchor element wrapping an image, with an alt description that reads, “A cat wearing a party hat.” Arrows from the HTML elements and attributes point towards how everything combines to create a phrase spoken aloud by a screen reader. The phrase reads, “Link. Image. A cat wearing a party hat.
(Large preview)

Unlike most of HTML, CSS, and JS, the success of implemented ARIA is contextual, variable, and largely invisible. In spite of this, we seem to be slathering ARIA onto everything without bothering to check not only if it actually works, but also what the people who actually use it think of it.

Support for ARIA is fragmented across operating systems, browsers, and assistive technology offerings, all their respective versions, and every possible permutation of all three. Simply put, writing ARIA and trusting it will work as intended isn’t enough.

If misconfigured and/or over-applied, ARIA can break. It may not report actual functionality, announce the wrong functionality, and (accurately or inaccurately) over-describe functionality. Obviously, these experiences aren’t equivalent.

Representation matters. To get a better understanding of how the ARIA code you wrote actually works, I recommend hiring people to tell you. Here are four such services that do exactly that:

Contrast

Color Contrast

Color contrast is another common issue, one whose severity often seems to be downplayed. If I could wager a guess, it’s because it’s easy to forget that other people’s vision might be different than your own. Regardless, it is a concern that affects a wide swath of the global population, and we should treat the issue with the seriousness it deserves.

The Click-Away Pound Survey tells us that out of the top issues faced by users with access needs, contrast and legibility weighs in as the fifth most significant issue. On top of that, it has increased as a concern, going from 44% of respondents in 2016 to 55% in 2019.

We live in an age where there’s more color contrast checking resources than I can count. Products like Stark can help designers audit their designs before it is translated into code. Tools like Eightshape’s Contrast Grid and Atul Varma’s Accessible color palette builder let you craft your design systems with robust, accessible color combinations out of the gate.

A side-by-side comparison demonstrating acceptable and bad color contrast ratios. The first example shows black text on a dark yellow background, with a passing contrast ratio of 9.89:1. The second example shows light gray text on a light blue background, with a failing contrast ratio of 2.13:1. The text for both examples reads, “The lighting collection ranges from timeless classics to contemporary designs that make for perfect additions to any home and space.”
(Large preview)

The somewhat ironic thing about color contrast is how, ah, visible it is. While some of the previous accessibility issues are invisible—hidden away as the underlying code—contrast is a pretty straightforward issue.

Mostly, contrast is a binary scenario, in that you either can or cannot see content. So, the next time you check your website or webapp with an automated accessibility checker such as Deque’s axe, don’t be so quick to downplay the color contrast errors it reports.

High Contrast

There are technology solutions for situations where even satisfactory color contrast ratios isn’t sufficient—namely, inverted colors mode and High Contrast Mode. Many participants I interviewed mentioned using these display modes during their daily computer use.

Provided you use semantic HTML, both of these modes don’t need much effort on the development end of things to work well. The important bit is to check out what you’re building in these two modes to make sure everything is working as intended.

Striving For Perfection

To quote Léonie Watson,

“Accessibility doesn’t have to be perfect, it just needs to be a little bit better than yesterday.”

By understanding both why, and how to improve your digital accessibility experiences in ways that directly address common barriers, you’re able to provide meaningful and enjoyable experiences to all.

Further Reading

Thank you to Brian Moore, Damien Senger, Jim Kiely, Justin Yarbrough, Kenny Hitt, and Soren Hamby for sharing their insights and experiences.

Smashing Editorial (ra, il)


Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
logo-red-20
27 May

Equivalent Experiences: What Are They?

by TBSCategories: News

Equivalent Experiences: What Are They?

Equivalent Experiences: What Are They?

Eric Bailey

If you spend enough time interacting with digital accessibility practitioners, you may encounter the phrase “equivalent experience.” This saying concisely sums up a lot of the philosophy behind accessibility work.

Our industry tends to place a lot of focus on how, often at the expense of why. For accessibility-related concerns, it is vital to learn about the history, and lived experiences of disabled people as a context for understanding the need for design and code created with access in mind.

This is the first of two articles on the topic of equivalency, and how it relates to digital accessibility. It will help us define what an equivalent experience is. Once we have a common understanding established, I’ll then discuss how to go about implementing equivalent experiences for common accessibility-related issues.

The State Of Things

The truth of the matter is that even though we live in a multi-device world full of smartphones, augmented reality, voice assistants, and IoT smart sensors, our default is still predominately:

  • Visual,
  • large screen,
  • fast connection,
  • powerful computer and display,
  • male,
  • white,
  • wealthy,
  • young,
  • Western,
  • technologically-literate,
  • and abled.

This is reflective of the biases that are inherent in how we design, develop and grow products.

The previous list may not be the most comfortable thing to read. If you haven’t closed the browser tab already, take a moment to consider your daily workflows, as well as who your coworkers are, and you’ll begin to understand what I’m getting at.

At its core, delivering an equivalent experience is ultimately about preserving intent — with the intent being the motivating force behind creating a website or web app and all the content and features it contains.

This translates to making the meaning behind every interaction, every component, every photo or illustration, every line of code being understandable by the widest range of people, regardless of their device or ability.

Prior Art

I’m not the first person to discuss this topic (and hopefully not the last). Speaker, trainer, and consultant Nicolas Steenhout is one such advocate. His great post, Accessibility is about people, not standards, is well worth reading.

If you’re the kind of person who is into podcasts, his A11y Rules has a wonderful series called Soundbites. It features “short discussions with people with disabilities about the barriers they encounter on the web.” These insightful interviews also touch on what this article discusses.

What Isn’t An Equivalent Experience?

Showing examples of what something is not can be a way to help define it. For equivalent experiences, an example would be a web app geared towards use by the general public not having a mobile breakpoint.

The Dashboard view for WageWorks’ non-responsive website being viewed on an iPhone. Prompts to order commuting benefits are present, but are really tiny as it is assuming I’m viewing this on a laptop or desktop
It’s not difficult to imagine a situation where I’d want to adjust my work benefits while on the go. (Large preview)

With this example, everyone using a device with a small display is forced to pinch, pan, and zoom to get what they need. Here, the burden is placed on anyone whose only crime was using a smartphone.

Most likely, whoever conceived of, designed, and developed this didn’t stop to think about circumstances other than their own. In this sort of (unfortunately still all too common) scenario, I all but guarantee that the web app looks great on the laptops or desktops of the designers and developers who made it.

People using a smartphone to access this website are victims of circumstance. The extra effort someone needs to do to get it to work indirectly communicates that they weren’t a priority, and therefore not valued. If you’ve used the web for any significant portion of time, I’m willing to bet this, or a similar experience has happened to you.

This example is also a hop, skip, and a jump away from another common, yet serious accessibility issue we often don’t consider: screen zooming:

Screen Zooming

Screen zooming is when someone is prevented from being able to zoom their displays and make text larger—many native mobile apps are guilty of this. When you disallow this sort of behavior, you’re telling prospective users that unless they have vision similar to you, you aren’t interested in them being able to use your app.

For this scenario, a gentle reminder that we will all get older, and with aging comes a whole host of vision-related concerns. A question you should be asking yourself is if your future self will be capable of using the things your present self is making. A follow-up question is if you’re also asking the people you’re managing this.

Accessible Experiences Aren’t Necessarily Equivalent Ones

This might be a little difficult of a concept to grasp at first. Let’s use this Rube Goldberg machine made by Joseph Herscher to pass the pepper to his dinner guest to compare:

To pass the pepper, the machine, sends it through an elaborate system of weights, counterweights, ramps, rolling objects, catapults, guillotines, burners, timers, carousels, etc. — all constructed from commonly found kitchen items. While this setup will technically ensure the pepper is passed, it is an annoying, overwrought, time-intensive process.

Many digital experiences are a lot like a Rube Goldberg machine when it comes to accessibility. Since accessibility issues are so prevalent, many forms of assistive technology provide a large suite of features to allow their user to work around common obstacles.

Unfortunately, discovering obstacles, and then figuring out and activating the appropriate combination of features to overcome them can take a disproportionate amount of time and effort.

To say it another way: A simple click on a button for an abled person may take far more time and effort for a disabled person, depending on how the button has been made.

Chilling Effects

Frustratingly, the extra time and effort a disabled person has to put into operating a technically accessible experience may feed back into their disability condition(s). For example, the presence of a motor control disability such as arthritis may make the overall experience even more taxing.

Cognitive accessibility concerns are also another important thing to consider. What may seem easy to understand or intuitive to use for one person may not be for another. This is especially prevalent in situations where there is:

Cognitive accessibility isn’t an abstract concern, either. Poor user interface design that ignores the circumstances of the end user and dumps too much cognitive load onto them can have very real, very serious consequences.

Screenshot of the ProPublica featured called, “Collision Course: The Navy Installed Touch-screen Steering Systems To Save Money. Ten Sailors Paid With Their Lives.” The intro paragraph reads, “When the USS John S. McCain crashed in the Pacific, the Navy blamed the destroyer’s crew for the loss of 10 sailors. The truth is the Navy’s flawed technology set the McCain up for disaster.” In the background are two large touchscreens with complicated-looking virtual dials, sliders, and other widgets. The touchscreens are placed in front of a ship’s window, with a foggy, stormy sea outside.
The military is full of examples of poor interfaces being forced on people who don’t have a choice in the matter. It’s also one of the origins of Inclusive Design thinking. (Large preview)

Compounding Effects

These factors are not mutually exclusive. Proponents of Spoon Theory know that inaccessible experiences conspire to sap a person’s mental and physical energy, leaving them exhausted and demotivated. Worse, these sorts of scenarios are often more than just a person perpetually operating at a diminished capacity.

Frustrating digital experiences can lead to a person abandoning them outright, internalizing the system’s fault as their own personal failure. This abandonment may also translate to a person’s willingness and ability to operate other digital interfaces. In other words: the more we turn people away, the more they’ll stop trying to show up.

Don’t Take My Word For It

To make the abstract immediate, I reached out on Twitter to ask people about their experiences using assistive technology to browse the web.

I also took a purposely loose definition of assistive technology. All-too-often we assume the term “accessible” only means “works in a screen reader.” The truth of the matter is that assistive technology is so much more than that.

The way the web is built — its foundational principles and behaviors — make it extraordinarily adaptable. It’s us, the people who build on and for the web, who break that. By failing to consider these devices and methods of interacting with web content, we implicitly drift further away from equivalency.

Consistency

For some, assistive technology can mean specialized browser extensions. These micro-apps are used to enhance, augment, and customize a browsing experience to better suit someone’s needs.

Damien Senger, digital designer, uses a browser extension called Midnight Lizard to enforce a similar experience across multiple websites. This helps them “to focus on the content directly and to limit having too big differences between websites. It is also helping me to avoid too harsh color contrasts that are really uncomfortable.“

Damien also writes, “Often websites are really difficult to read for me because either of the lack of consistency in the layout, too narrow lines or just not enough balance between font size and line height. Related to that, color can create a lot of unhelpful distraction and I am struggling when too harsh contrast is nearby text.”

How To Maintain Equivalency

In addition, Damien also augments their browsing experience by using ad blocking technology “not only for ads but to block animations or content that are too distracting for my ADHD.”

It’s not too difficult to imagine why distracting and annoying your users is a bad idea. In the case of ads, the industry is unregulated, meaning that rules to prohibit ADHD, migraine, and/or seizure-triggering animations aren’t honored. Through this lens, an ad blocker is a form of consumer self-defense.

Kenny Hitt also chimes in about ads: “…regardless of the platform, the thing that annoys me most are websites with ads that essentially cause the site to constantly auto update. This prevents me as a screen reader user from reading the content of those websites.”

Again, a lack of regulation means the user must take measures into their own hands to keep the experience equivalent.

How To Maintain Equivalency

Opportunity

A lack of an equivalent experience translates directly to lost opportunity. Many individuals I spoke with mentioned that they’d abandon a digital experience that was inaccessible more often than not.

Brian Moore mentions, “there are web sites where I like their products a lot but won’t buy them because the site itself is such a struggle, and attempts to reach out have met with either silence or resistance to taking any action.”

Brian cites the Fluance website as the most recent example. The bugs present in its shopping user flows prevents him from buying high-end consumer audio equipment.

Fluance’s entire web presence exists to sell products. While updating a website or web app to be accessible can be an effort-intensive process, it would definitely be in Fluance’s best interest to make sure its checkout user flow is as robust as it could be.

Screenshot of the Fluance website, showing their Signature Series Surround Sound Home Theater 7.1 Channel Speaker System priced at $ 1,609.99 USD
Those lost sales add up. (Large preview)

Opportunity isn’t limited to just e-commerce, either. As more and more services digitize, we paradoxically push more people out of being to live in the society that relies on these digitized services—people with protected rights. Again, this shift away from an equivalent experience is the culprit.

Justin Yarbrough was “applying for an accessibility-related job with the Arizona Department of Economic Security over the summer, where they wanted me to take an assessment. The button to start the assessment was a clickable div. They wound up waving the assessment requirement for the position.”

Jim Kiely tells me about his brother, who “has stopped paying his water bill online because the city water website [doesn’t] work well with a screen reader and high contrast.”

Personally, I have friends who have been prevented from submitting résumés to multiple sites because their job application portals were inaccessible.

How To Maintain Equivalency

Adaptability

Soren Hamby, product marketing manager and design advocate, writes of their experiences using screen magnification software and screen reading capabilities. Soren has “varying levels of vision so [they] tend to not always need the same level of accommodation.”

Of note, Soren mentions their struggles with grocery delivery apps, specifically “the carts often only read the quantities rather than the item name. It’s much easier to order with a sighted person.”

There are three things to consider here:

First is the surface-level acknowledgment that the app operates differently for different people, the main point this article is driving at.

Second is the fact that Soren uses multiple forms of assistive technology, with the mix a shifting combination depending on a combination of their task at hand and how well the digital interface meets their access needs.

How To Maintain Equivalency

  • Make sure that the labels for your interactive controls are relevant and concise.
  • Incorporate disability scenarios and conditions into your design personas.
  • Avoid using absolute length units. (No, seriously.)
  • Avoid setting maximum widths and heights.
  • Avoid using fixed and sticky-scrolling components, especially larger-sized ones.
  • Test your layouts by zooming and/or increasing your default type size to make sure that content does not get obscured.

This brings us to our third and most important point:

Autonomy

Having to rely on the help of a sighted person to order groceries is not ideal. For many, the acquiring, preparation, and consuming of food can be highly personal acts. Being forced to incorporate outside assistance into this process is far different than willingly inviting someone in to share an experience. The same notion applies to every other digital product, as well.

Kenny also mentions grocery apps: “…my local Kroger grocery store has started an app redesign in June 2019 that is breaking accessibility with their app.” In discussing this regression, he goes on to elaborate, “Because I can’t financially change to another business, I won’t let it drop. Kroger is going to discover that I don’t stop with a problem. Persistence in solving problems is a requirement for any disabled person if you want to succeed in the world.”

Three screenshots from the redesigned Kroger app, including the home section, shop section, and weekly ads.
This app looks great, provided you can see it. (Large preview)

Equality

Kroger would be wise to listen to Kenny’s feedback. The grocery company Winn-Dixie was recently successfully sued for not being operable with a screen reader. The lawsuit argued that the grocer’s website was heavily integrated with their physical stores, and therefore violated the Americans with Disabilities Act (ADA).

Another recent case involves the Domino’s Pizza franchise. Taken all the way to the Supreme Court, the ruling clearly and unambiguously states that preventing someone from using a website or app, simply because they used screen reading software, is unconstitutional.

For both cases, the cost to implement fixes were far cheaper than going to court—something to think about the next time you’re deciding where to order pizza.

Despite some ugly misconceptions about the ruling, the evidence is clear: in the United States, there is now legal precedent for private companies to be sued for violating civil rights via an inaccessible digital experience. Europe and some parts of Asia have similar laws, as well.

How To Maintain Equivalency

Reactivity

Another way to maintain an equivalent experience — one that is often not thought about — is to give reports about accessibility issues the same weight and concern as other software bugs.

Reported accessibility issues are oftentimes downplayed and ignored, or are sent to someone ignorant of the issue and/or powerless to fix it.

Kenny, who started using a computer with a screen reader in 1984 says, “When I run into accessibility issues nowadays, I’ll try reporting it, when I get the usual response from the feedback of the person not caring, I just give up and walk away. If [the response] comes from somebody in marketing who doesn’t understand accessibility, I just give up and go away. There’s no point in trying to teach these people about accessibility.”

Kenny’s view is shared by many others in the disability community. Remember what I said about compounding effects earlier.

Brian reports that,

“If I find significant issues with a site, I do report it. Depending on who I talk to it ranges from ‘here’s what doesn’t work’ to all kinds of technical detail about why if I can get to the right people.”

Getting it to the right people is key. Another part of equivalent experience is handling feedback in a timely and constructive way, much as how you would with any other issue with your product or service.

Responding to an accessibility issue is easy:

  • Thank the person for taking the time and effort to report the issue.
  • Acknowledge the issue and identify what person or team will be handling it.
  • Ask clarifying questions as needed.
  • Offer potential workarounds, with the understanding that they’re only temporary until the underlying issue is addressed.
  • Offer to involve them in the process, including notifying them when the issue has been fixed.

Being open, honest, and transparent about your bug fixing process goes a long way to establishing trust in a population that has historically and routinely been overlooked.

Also know that assigning someone to mind an email address to conduct tasks on behalf of an assistive technology user is not an appropriate, effective, or sustainable solution. Remember the concerns surrounding autonomy discussed earlier.

How To Maintain Equivalency

  • Create an accessibility statement, including known issues, a tentative timeline for their fixes, and easy to discover contact information.
  • Ensure that anyone customer-facing (quality assurance, customer support, marketing, etc.) are trained on protocol for accessibility-related issue reporting.
  • Quantify accessibility-related issues, both internal and reported.
  • Be on the lookout for patterns and trends with discovered accessibility issues, as they represent learning opportunities.
  • Understand that not all platforms to collect feedback are created equal.

Motivation

We’ve covered actual people’s everyday frustrations, as well as civil rights and the current legal landscape. If these don’t motivate you, allow me to present another factor to consider: profit.

There are two provoking studies I’d like to call attention to, but they are by no means the only studies performed in this space.

The cover page of The Purchasing Power of Working-Age Adults With Disabilities report placed over a screenshot of the Click Away Pound Survey homepage
(Large preview)

First is the Click Away Pound Survey, a survey conducted in both 2016 and 2019 to “explore the online shopping experience of people with disabilities and examine the cost to business of ignoring disabled shoppers.”

The survey discovered that more than 4 million people abandoned a retail website because of the access barriers they found. These people represent 17.1 billion pounds (~$ 21.1 billion USD) in lost potential revenue.

Second is the The Purchasing Power of Working-Age Adults With Disabilities (PDF), conducted in 2018 by the American Institutes for Research. This study discovered that there is an estimated $ 490 billion in disposable income amongst disabled working-age adults. That’s billion with a capital B.

There are two of the (many) takeaways from these studies I’d like to highlight:

First is that from a historical perspective, the web is still very much new. On top of that, its ubiquity is even more recent, meaning that use by the general population is a small sliver of the amount of time it’s been around.

Second is that the general population contains many people who are disabled, and that their needs are not being met. These unmet needs represent billions of dollars of potential revenue.

This is a gigantic market that we, as an industry, are only now becoming aware of. Rather than approaching accessibility with a mindset of risk aversion, why not use this learning as a great way to view your current and future business opportunities?

Let’s Not Stop Here

Too often we think of accessibility as a problem to be solved, rather than a way of looking at the world. Equivalent experiences necessitate that we question our assumptions and biases and think about experiences outside of our own. It can be an uncomfortable thing to think about at first, but it’s all in the service of making things usable for all.

As web professionals, it is our job, and our privilege to ensure that the experiences we deliver are equivalent. In the second part, we’ll investigate how to do just that.

Further Reading

Thank you to Brian Moore, Damien Senger, Jim Kiely, Justin Yarbrough, Kenny Hitt, and Soren Hamby for sharing their insights and experiences.

Smashing Editorial (ra, il)


Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
01-oreo
10 Apr

Privacy UX: Better Cookie Consent Experiences

by TBSCategories: News

Privacy UX: Better Cookie Consent Experiences

Privacy UX: Better Cookie Consent Experiences

Vitaly Friedman

With the advent of the EU General Data Protection Regulation (GDPR) in May 2018, the web has turned into a vast exhibition of consent pop-ups, notifications, toolbars, and modals. While the intent of most cookie-related prompts is the same — to get a user’s consent to keep collecting and evaluating their behavior the same ol’ way they’ve been doing for years — implementations differ significantly, often making it ridiculously difficult or simply impossible for customers to opt out from tracking.

On top of that, many implementations don’t even respect users’ decisions anyway and set cookies despite their choices, assuming that most people will grant consent regardless.

Admittedly, they aren’t entirely wrong. In our research, the vast majority of users willingly provide consent without reading the cookie notice at all. The reason is obvious and understandable: many customers expect that a website “probably wouldn’t work, or the content wouldn’t be accessible otherwise.” Of course, that’s not necessarily true, but users can’t know for sure unless they try it out. In reality, though, nobody wants to play ping-pong with the cookie consent prompt, and so they click the consent away by choosing the most obvious option: “OK.”

Note: It’s important to understand that cookies and consent mechanisms discussed in this article go beyond GDPR. In Europe, they are addressed by a separate piece of legislation, the ePrivacy Directive, which is currently in draft for a revamp (as of April 2019). It may be finalized by summer 2019. We do not know what its final form will take, but it will determine the future of cookie consent prompts.

Now, with this common behavior online, what might come across is that cookie prompts aren’t particularly useful, and that’s partly true. But they certainly helped raise awareness about privacy and data collection on the web. In fact, users now know that websites track their data, which they weren’t aware of a few years ago. But they often see it as a necessary evil in exchange for accessing the content “for free.”

It’s not that users always happily share their personal data, but they don’t really feel that revoking consent is a viable alternative. To many of them, the only reasonable option is to provide consent while opting in for an ad-blocker extension or any other tracking blocker in their browser.

oreo website
Cookie consent pop-ups don’t have to be tiny and unreadable. We could try to integrate them into our overall experience too. Case in point: Oreo, with an Oreo’s cookie displayed as a cookie consent prompt. (Large preview)

Since cookie consent prompts always stand in the way of the content, they are often dismissed almost instinctively, not unlike carousels during onboarding. Hence, from the designer’s perspective, spending weeks refining that one-of-a-kind prompt might be a waste of time. (Sorry for crushing your dreams at this point.)

Iamsterdam.com cookies
Iamsterdam.com allows visitors to adjust cookie settings and explains the different types of cookies, with an option to easily opt out from certain ones. (Large preview)

Since many websites heavily rely on collecting data, running A/B tests, and serving users with targeted advertising, often the design of the cookie consent notice is heavily influenced by business requirements and business goals. Is it acceptable for the business to allow users to quickly dismiss all tracking? Which cookies are (apparently) required for the site to work, and which ones are optional? Which cookies should be selected for approval by default, and which ones would require a manual opt-in? Should the customer be able to easily revoke the consent once it’s provided, and if so, how exactly would it be done if they don’t have an account on the site?

These business decisions have a major impact on design decisions, although from the user’s side, the optimal design would be quite obvious: no cookie consent at all. That would mean, for example, that users could define privacy settings in their browsers, and choose what cookies they’d like to provide consent to. The browser would then send a hint to each website a user chooses to visit and automatically opt-in or opt-out cookie settings, depending on the provided preferences.

Users now know that websites track their data, which they weren’t aware of a few years ago. But they often see it as a necessary evil in exchange for accessing the content “for free.”

“

In fact, a Do Not Track (DNT) header is already implemented and widely supported by browsers (although it was removed from Safari to prevent potential use for fingerprinting), yet there is no established mechanism for transforming this preference into a granular selection of accepted cookie groups. It shouldn’t be very surprising that most advertisers wouldn’t be particularly happy about this pattern gaining traction either, but perhaps it could be a slightly better way forward, as preferred by users, to no cookie consent at all.

Admittedly, users sometimes find a way around anyway. Some users who already use an ad-blocker are using a cookie prompt blocker as well. The latter, however, usually grants full consent on user’s behalf by default. Obviously, it goes against the very purpose of the cookie prompt in the first place, and ideally such extensions would automatically opt in only for essential cookies while opting out for everything else (if it’s possible at all).

As designers, though, we have a legal obligation to explain what happens to a user’s data and how it will be stored within the mandate of provided business requirements. As Geoffrey Keating mentioned in his article, “The Cookie Law and UX,” focusing specifically on legislation in Ireland, according to the Office of the Data Protection Commissioner, “the minimum requirement is clear communication to the user as to what he/she is being asked to consent to in terms of cookies usage and a means of giving or refusing consent.”

It’s worth noting that consent has to be “unambiguous” and “freely given,” as it must “leave no doubt as to the data subject’s intention, should be an active indication of the user’s wishes and can only be valid if the data subject is able to exercise a real choice.” Hence, silent, pre-ticked checkboxes or inactivity shouldn’t constitute consent.

This might sound obvious, but some solutions explore the uncharted legal territory that’s left for interpretation. For instance, sometimes the website visitor “automatically submits a cookie consent by clicking a link on the website”, and sometimes you can choose which actions are “obvious enough” for you to perceive them as a silent consent. Obviously, this isn’t an informed decision and such technique rightly belongs to the realm of mischievous culprits that should be avoided at all costs.

With this in mind, there are a couple of options we could consider:

Avoid Optional Cookies And Keep Only Functional Ones: No Prompt Required

It might appear that every single website needs to display a cookie consent notice to their European visitors, but if your website doesn’t collect, track, and evaluate any personal data from users, or it collects only anonymous data, you may not need one. In fact, one of the fundamental principles of the Privacy by Design framework is that non-essential cookies should be off by default and the user needs to actively opt in.

Now, cookies might be required for maintaining the logged-in state or user preferences, for example, and according to EU regulations you don’t need explicit consent for that. That’s also why many prompts have functional cookies enabled by default, without an option to disable them. And some sites, like GOV.UK, merely inform users about cookies, not requiring any input at all, but also not providing a choice to opt out from the optional Google Analytics cookie.

gov.uk
GOV.UK stores at least 18 cookies, and many of them are required for better experience; e.g. to track progress when applying for a licence, multivariate testing, making secure connections to websites, YouTube videos, email subscription updates. However, only one cookie is optional: Google Analytics (anonymized). (Large preview)

Not every website can get away without ad-related third-party cookies, though. One seemingly light way out would be to add a plain notification such as “By using our website, you are consenting to our use of cookies.” But this alone isn’t enough. As we need an active indication of the user’s consent, we have to require some sort of unambiguous action. For that reason, some sites add a “close” icon, making the consent box appear as a notification that can be dismissed. To ensure a more obvious acknowledgement, it’s a good idea to replace the “close” icon with a button. In many implementations, the button would simply say “Close” or “Save” or “Continue,” although “Accept and continue” is more clear.

In most cases, the notification doesn’t disappear until it is acted upon, hence being the very first thing that users see when visiting any page on the website. Do you need user consent on every page, though? You could be more selective and ask for the cookie consent only when it’s actually required; for example, when the user is setting up an account or wants to save their settings.

twitter website
Twitter informs its visitors about the cookies used, but there is no option to adjust cookie preferences. The prompt will be clicked away by clicking on the ‘×’ in the top-right corner. Beware, however: some people see it as consent, while others see it as postponing the decision for a later time, similar to snoozing notifications. (Large preview)
resharper
JetBrains chose to display a plain text-only prompt as if it were in a terminal window. There are balanced options to opt in or opt out of cookie consent. (Large preview)

Allowing Users To Adjust Privacy Settings

While the previous option dictates complete obedience or complete lock-out, you could be more empathetic to the user’s intent. The user might have strong feelings about the exposure of their personal data, so providing a way out — not dissimilar to the personal questions we mentioned earlier — could keep them on the site. To achieve that, we could add an option to change settings, followed by an overview of different groups of cookies, with some of them being required for the site to function flawlessly, and others being optional.

The grouping could relate to the purpose of cookies such as advertising, analytics and statistics, or testing. It could also be much broader, allowing users to choose between “I am OK with personalized ads” or “I do not want to see personalized ads”. It’s also a good idea to explain to the user which features on the site will be unavailable once a certain group of cookies is blocked. TrustArc does that with a slider, allowing for a number of privacy levels, from allowing only required cookies to functional cookies to advertising cookies, while also showing its impact on the overall functionality of the site.

nngroup
On Nielsen Norman group, all cookies are grouped. Necessary cookies can’t be opted out of, but all other groups can be dismissed with a few taps. Ideally, there’d be a way to opt out from all optional ones at once. (Large preview)
mailchimp
Tabbed groups for cookies on MailChimp. (Large preview)
the-guardian 'your privacy' page
(Large preview)
the-guardian 'your privacy' page
The Guardian provides clear options which have equal weight on the ‘Your privacy’ page (not in the initial prompt, though). The modal on the front page is large but it provides clear options. (Large preview)
the daily mash privacy settings
The Daily Mash provides an option to adjust privacy settings (albeit de-emphasized), and in the settings panel visitors can easily reject or accept all cookies. Also, ‘Save & Exit’ is a very clear label for a button at the bottom. The experience might not be delightful, but it’s pretty clear. (Large preview)
myfitnespal cookies settings
MyFitnessPal, powered by TrustArc, displays a slider which explains which functionality is allowed or disallowed with every group of cookies. (Large preview)
cookies settings
A fantastic pattern on how a cookie settings dashboard could be designed to improve transparency. A mock-up by Matthias Ott and Joschi Kuphal built at the last @indiewebcamp in Dusseldorf. You can also download the Adobe XD source file, kindly provided by the authors. (Large preview)

In terms of layout, the prompt could be subtle and hardly noticeable, or obvious and difficult to ignore. We could place it in the header of the page, or at the bottom of the viewport, or we could also position it in the center of the page as a modal. All of these options could be floating and persistent as the user scrolls the page, thereby blocking access to a portion of the content (or entire content) until consent is granted.

De Telegraaf, for example, places a verbose cookie consent in the middle of the page, blurring out the content underneath, literally hijacking the page and standing in the way. It shouldn’t be a big revelation that from all the options we’ve tested, this one seems to be the most annoying one to users. In general, subtle prompts should be preferred, and the less space they need to be displayed, the better the overall user’s reaction has been.

telegraaf cookie consent prompt
It’s becoming common to blur out the content while displaying a cookie consent prompt. This technique brings focus to the prompt, but it also makes visitors more likely to click it away, often trading privacy for access to content. A slightly more subtle prompt would be more effective and helpful as users might browse around and leave without committing. Example: Telegraaf.nl. (Large preview)
pathe cookie consent prompt
Blurring out the content is rarely a good idea. Also, there’s a very clear primary action and secondary action in play here. It doesn’t look like a fair choice between the two options. Example: Pathe.nl. (Large preview)
empire-bio cookie consent
Can you spot the cookie? A little notification in the bottom-right corner asks for the user’s consent on Empirebio.dk. (Large preview)
hoistgroup cookie
On HoistGroup, there is no way to dismiss cookies — they are required, and there is no way out. (Large preview)
zeitonline cookie
On Zeit Online, there is no way to dismiss cookies — they are required, and there is no way out. (Large preview)
ticketveiling cookie prompt
Ticketveiling.nl displays a cookie prompt at the bottom, but also a chat widget. Only one interviewed person expected that the chat was here to provide help with the cookie settings. It’s probably a good idea to not display the widget alongside the cookie display prompt, though. (Large preview)

Appearance And Wording On Buttons

We also need to give some thought to the appearance of the consent form, especially to the design of buttons and the wording on those buttons. Wording such as “Just proceed” or “Save and Exit” or “Continue using the site” nudges users to move on with a default option, and in fact, many users are likely to do just that. It’s more respectful to have two buttons, a primary one for granting consent, and a secondary one for adjusting settings, with both buttons having neutral microcopy such as “Accept” and “Reject,” or “Okay” and “No, thanks.” That’s the path we’ve chosen with Smashing Magazine.

smashing cookie options
Accept or dismiss. It shouldn’t be harder than that. (Large preview)
nhs options for cookies
NHS provides very clear options to accept cookies or ‘Turn cookies off’. (Large preview)
nhs cookie settings
Large radio buttons to select what kind of cookies the visitor accepts. A fantastic example of privacy settings designed in an honest and transparent way. The only missing bit is to opt out from all optional cookies by default. Example: NHS. (Large preview)
fandom cookie choice
Accept or reject with a single tap, although both options don’t have the same weight. Example: Fandom.com. (Large preview)

It shouldn’t be surprising that of all the options, users feel surprisingly pleased and appreciative of the option to reject all cookies with a single click on a button. Some users were surprised that this option was even provided, and while a majority chose to grant consent, every fifth user refused consent. By doing so, they assumed the website would be fully functional without cookies, and rightfully so.

Not many users would consider revoking or adjusting cookie settings after granting consent, but when asked to do so, they expected to find the options in the header or the footer of the website, either in the privacy policy or in the cookie policy. It’s not very surprising, and of course that’s where we need to place the options to adjust settings should the user wish to do so.

jamie-oliver cookie preferences
(Large preview)
jamie-oliver cookie preferences
By default, all options on the Jamie Oliver website are off, with an option to turn them on. However, the main call-to-action button is ‘Accept recommended settings’, which turns all toggles to on. The option to proceed without cookies is positioned at the very bottom of the page, with a subtle ‘Close’. It’s probably not obvious enough, and another button on the top would be more helpful. (Large preview)

Users Understand When They Are Being Tricked

So far, the entire experience should be quite straightforward, right? Well, if a business model heavily relies on collecting and tracking data, you might be forced into shady areas when selecting anything but the easiest option is confusing and generates a lot of work. In our interviews, users could easily see through the companies’ agendas, even saying something along the lines of “Ah, I see what you did there.” Some things were less obvious than others, though.

Whenever the cookie consent suggested an option to review cookies or adjust cookie settings, users expected to see an overview of all cookies and be able to adjust which cookies should be allowed to be set and which not. In terms of interface design, usually it’s done with tabbed sections within a cookie consent widget, with some groups selected by default. It’s common to see functional cookies, analytics cookies, advertising cookies, and website settings cookies. This level of granular control isn’t often expected but it’s considered to be helpful and friendly, and as such preferred — however, only if the entire category of cookies could be unselected at once, with a single tap on a single checkbox.

Oddly enough, some implementations go to extremes, providing users with an overwhelming overview of every single cookie set by third parties. It’s not uncommon for all of them to be opted in by default, and opting out requires a tap on every single one of them, one by one. It might not seem like a big deal with five cookies, but it’s a monstrosity with over 250 cookies generously provided by dozens of trackers on the site. In such cases, many users gave up after a few opt-outs, providing full access to their data and moving on.

kayak cookie prompt
What would you expect to happen when clicking on the ‘close’ icon? How is a click on a button different from a click on the cross? Is there a difference? On Kayak, users were confused during the test. (Large preview)

Unfortunately, that’s just scratching the surface. Imagine a cookie settings prompt with a “Close ×” button. What behavior would you expect from clicking “Close”? Would you expect the prompt to be dismissed and then eventually reappear? Or would you expect all tracking scripts to be opted out by default? Opted in? Unsurprisingly, most users weren’t even thinking that far — they just wanted the pop-up to disappear. Nobody expected the trackers to be opted out by default, yet many users felt that it was a “temporary thing” that would show up again “at some point.” In practice, almost all of the time, closing the prompt was perceived by website owners as user consent and, in fact, all cookies were stored to their full extent. That’s not necessarily what the user was expecting.

speisekarte privacy policy
A slightly confusing experience on Speisekarte.de, with an option to accept or ‘deselect all’ options in the top-left corner, in the same color, with a delimiter > in between. Also, the wording ‘Agree and Proceed’ or ‘Learn more’ isn’t obvious. (Large preview)

The wording on buttons and links caused major confusion for users. On Speisekarte.de, you can either “Agree and Proceed” (primary, large green button) or “Learn more” (subtle grey link, not even underlined). What would you expect to appear after clicking “Learn More”? While many users expect a privacy policy to appear, the action actually prompts the management of cookies, with 405 ad selection, delivery, and reporting partners, 446 information storage and access partners, 274 content selection, delivery, and reporting partners, 372 measurement partners and 355 personalization partners. “Agree and Proceed” grants access to the storage and evaluation of customers’ personal data for 1,852 partners. That’s not too shabby, isn’t it?

It’s not obvious that the listing area for all those partners is scrollable at all, and there is no obvious way to unselect all of them. Would you find it enjoyable to manually opt out 1,852 toggles, one by one? Probably not. As it turns out, you can “deselect all” partners in the top-left corner of the window — however, this option is conveniently presented in a way that resembles breadcrumb navigation rather than a button. And, of course, all partners are opted in by default. That’s deceptive, dishonest, and disrespectful.

Once you get into the habit of rejecting cookies by default, you can find a number of shady and questionable practices that seem to be widespread. Sometimes companies place Facebook and Twitter tracking cookies in the “Necessary” category. Sometimes the option to reject cookies is conveniently hidden behind an extra “Manage” option. And sometimes there is an option to opt out from analytics, but a user is automatically opted in for “Anonymous analytics.”

Some companies go beyond that, inventing new ways of making business should the user wish to avoid tracking. Sometimes it shows up with a “Premium EU Subscription” without on-site advertising and tracking scripts, and sometimes with a website being unavailable, or an “EU experience” (which, frankly, is much faster and lightweight than its non-EU counterpart). Not a single person accessing the site appreciated either of these options. That shouldn’t be a big revelation, but there is a significant amount of users who, being confronted with such treatment, have nothing left but to leave the site in search for alternatives.

usa-today EU experience
USA Today provides an EU experience which happens to be much cleaner and faster than the original one. For EU visitors, the ‘site does not collect personally identifiable information or persistent identifiers from, deliver a personalized experience to, or otherwise track or monitor persons reasonably identified as visiting our Site from the European Union.’ (Large preview)
the-washington-post Premium EU Subscription
The Washington Post has introduced a ‘Premium EU Subscription’ that doesn’t contain any on-site advertising or third-party ad tracking. (Large preview)
los-angeles-times' message stating that the website was unavailable in most European countries
For a while, Los Angeles Times displayed a message stating that the website was unavailable in most European countries. (Large preview)

Guidelines And Strategies For Better Design

According to the EU regulation, each cookie, its provider, purpose, expiry date, and type should be explained and elaborated in detail in a privacy policy, and many services such as TrustArc, IAB Consent Framework, Cookiebot, OneTrust, Cookie Consent, and many others provide this feature out of the box. They also provide an option to customize which groups of cookies should be presented as choices to the user, and while the default experience is decent, often it can be used to make it unnecessarily difficult for the customer to adjust their settings.

sourceforge privacy settings
(Large preview)
sourceforge privacy settings
(Large preview)
sourceforge privacy settings
Clear options, honest experience, transparent interface. A great example on Sourceforge. (Large preview)

At the end of the day, we need to provide good experiences while also achieving our business goals. We can do that with a series of steps:

  1. We need to audit and group all cookies required on the site;
  2. We need to decide how each of these groups would be labelled, which ones would be required, and which would be optional;
  3. We need to understand what impact disabling a group of cookies would have on the functionality of the site, and communicate each choice to the user;
  4. Last but not least, we need to decide what settings should be selected by default, and what customization options we want to present to the user.

The simplest design pattern seems to be obvious. If you need user consent, display a narrow notification notice in the header or at the bottom of the viewport. No need to blur out or darken the content to make the notification noticeable; just make sure it doesn’t blend in with the rest of the site. If possible, allow users to accept or reject cookies with two obvious buttons: “Okay” and “No, thanks.” Otherwise, provide an option to adjust settings, following an overview of cookie categories. There, you have to make obvious the consequences each choice has on the website functionality, and enable users to “Approve all” or “Reject all” cookies at once — for the entire site, and for each category.

Where to place the notification notice? The position doesn’t seem to really matter — it didn’t make any difference in decision-making. The overlay covering half of the page, however, was perceived as the most annoying option — and it shouldn’t be too surprising as it literally blocks a large portion of the content on the page. Most users almost instinctively know what they are presented with, and they also know what action they’d prefer to take to get on with the site, so lengthy explanations are ignored or dismissed as swiftly as push notifications or permission requests.

In the next article of the series, we’ll look into notifications UX and permission requests, and how we can design the experience around them better — and with user’s privacy in mind.

A kind thank you to Heather Burns for reviewing this article before publication.

Smashing Editorial (yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

buzzfeed-navigation
11 Feb

A/B Testing For Mobile-First Experiences

by TBSCategories: News

A/B Testing For Mobile-First Experiences

A/B Testing For Mobile-First Experiences

Suzanne Scacca

Your client’s website is done. They’re thrilled with it. You and your team are satisfied with the results. And visitor reception looks good so far.

While I recognize that a lot of research, experimentation, analysis and review went into the creation of the website, is that all there is to building a winning website these days? I’d argue that the mobile-first web has added a layer of complexity that few are fully prepared for.

Which is why your work shouldn’t stop when you hit the “Publish” button.

If you’re not yet performing post-launch A/B testing for your website clients, that’s a big mistake. Although we have a massive amount of case studies and other research at our disposal that confirm how to design for conversion on desktop, the mobile experience is still relatively new. At least the mobile-first experience as we know it today.

The following guide includes tips for A/B testing for mobile websites and will get you thinking about conversion rate optimization in other ways than just “Buy This Now”.

A Brief Introduction To A/B Testing For Mobile

Once a website has gone live, Google Analytics and any conversion rate optimization (CRO) tools you hook up to the site will start feeding you data about your users. If you choose to do something with these valuable insights, you have two options:

  1. Identify obstacles in the experience and implement changes to the site to resolve them.
  2. Identify a single obstacle in the experience, hypothesize why it occurred and create an alternative version of the site to test the resolution.

The first option seems cut-and-dried. The data tells you there is an issue; you create a solution for it. But like I mentioned already, the chances of succeeding when shooting from the hip like that only work with tried and true desktop design techniques. Even then, it can still be risky if your audience doesn’t align with the average online user’s behavior.

The second option, on the other hand, allows designers to more safely implement changes to a mobile website. Until you have a clear picture of the mobile user’s journey through your website (which, realistically, could involve them jumping from a mobile device to desktop at some point), mobile A/B testing must be an essential part of your job as a web designer.

This is how A/B testing works:

  • Identify a part of the website that you believe needs a change. (This should be based on findings in your data or direct reports from users about problematic experiences.)
  • Hypothesize why there is friction and how you think it can be resolved.
  • Choose just one element to change.
  • Using A/B testing software, set up your test variables. You should pit the control (i.e. original version of the site) against a variation of the element.
  • Run the test against equal parts of mobile visitors.
  • Let the test run for two to four weeks.
  • Monitor results to make sure you’re generating sufficient data and take note of any anomalies along the way.
  • End the test and review the results.
  • If there’s a significant margin between the control and variation results, use your mobile A/B testing tool (like VWO) to implement the winner.

It’s okay if you find that the control is the winner. Take what you’ve learned and apply it to your A/B testing efforts going forward.

Recommended reading: How To Conduct Usability Studies With Participants With Disabilities

Tips For A/B Testing For Mobile-First Experiences

You’re here because you want to know how to increase conversions on the websites you build for clients. The tips below will force you to step outside typical conversion rate optimization planning and think outside the box as you test your theories.

Tip #1: Stop Thinking About Mobile vs. Desktop A/B Testing

With traditional A/B testing, you typically have verifiable proof of what works and what doesn’t. You tweak the wording on a call-to-action and more users click to buy the product. You change the color of the shirt in a photo and sales go up by 25%. You move the placement of the CTA to the bottom of the post and more readers subscribe.

In other words, you know that a change you made will directly impact the business’s bottom line.

However, when it comes to mobile, it’s not that easy.

Qubit published a report called The Influence of Mobile Discovery in 2018.

Qubit mobile halo effect
Qubit demonstrates growth in the mobile halo effect. (Source: Qubit) (Large preview)

The above image depicts the differences in the mobile halo effect from 2016 to 2017.

The mobile halo effect is a term Qubit uses to describe how the activity that takes place on mobile directly influences what happens on desktop. Qubit’s research of over 1.2 billion customer interactions with the web found:

Analyzing the cohort of users in our dataset who logged into their accounts on more than one type of device shows that mobile activity directly influences an average of 19% of computer revenue. In some sub-verticals, this influence is much higher, with Fashion seeing an average of 24%, while some retailers receive as many as 1 in 3 of their computer transactions as a result of mobile-browsing.

What’s more, this information only accounts for mobile users who logged into a website from multiple devices. Qubit suspects that people who simply discover a website through mobile also lead to this halo effect. This, in turn, drives up the value of desktop conversions because of how helpful mobile is during the discovery phase of the customer journey.

This is why you can’t just look at mobile-only results on a mobile-first A/B test.

Instead, conduct your tests in the following manner:

  • Run your test with mobile visitors.
  • Review the results from your A/B testing tool to see if you were able to remove the obstacle from the mobile experience.
  • Then, look at your Google Analytics results from the same time period. Even if mobile traffic continued to drop off at the same point, you may find that desktop traffic and engagement increased as a result.

In sum, don’t go into mobile A/B testing thinking that everything you do must result in a greater amount of sales, subscribers or members on mobile. Instead, focus on how to improve the experience as a whole so that it improves your overall conversion rate.

Tip #2: Start with the Header

Remember that there are four micro-moments (or motivations) that drive mobile users to a website:

  1. I want to know.
  2. I want to go.
  3. I want to do.
  4. I want to buy.

With such a clear purpose driving their journey to and hopefully through your mobile site, don’t force them to wait for what they’re asking for. In terms of design, this translates to shortening their pathway — either to conversion or to completing the mobile experience before moving to desktop.

When you begin mobile-first A/B testing, look at elements that provide an answer to the micro-moments that are most relevant to your website.

Is there a way to place them in the header of the website or within the first scroll or two of the home page? Or can you at least design a one-click shortcut in the navigation to take them to it?

Here are some ideas:

1. I want to know.

Websites with lots of content would do well to test whether or not rearranging the navigation and putting emphasis on relevant and timely categories helps with conversion.

BuzzFeed takes this theory a step further:

BuzzFeed mobile navigation
BuzzFeed doesn’t hide its mobile navigation. (Source: BuzzFeed) (Large preview)

In addition to customizing the navigation regularly, BuzzFeed has chosen to leave the main navigation out in the open on mobile, with a fun selection of emojis to draw attention to the timeliest of categories.

Another way to answer the “I want to know” search is by providing a point of contact in as streamlined a fashion as possible as SensesLab has done:

SensesLab contact shortcut
The SensesLab includes a recognizable “mailto” icon in the header. (Source: SensesLab) (Large preview)

The “Mail” icon in the top-right corner takes mobile visitors to the Contact page. However, this is no ordinary contact page. While an introduction to their point of contact and email address is given, it’s the contact form below that really shines:

SensesLab contact form
The SensesLab provides a super mobile-friendly contact form at the shortcut. (Source: SensesLab) (Large preview)

The entire form fits within an entire screen-grab on my iPhone above. There’s no wasting of time by providing instructions on how to fill out the form or anything like that. Users just need to click on the highlighted fields to personalize their responses.

Even better:

SensesLab contact form fields
The SensesLab uses user-friendly contact form fields. (Source: SensesLab) (Large preview)

SensesLab has anticipated their responses and provided pre-populated answers along with custom keyboards to shorten the amount of time anyone has to spend filling this out.

2. I want to go.

I think the solution to test for with this one is obvious. In other words:

Where in the header or above the fold do you place the reservation buttons?

Just don’t be afraid to think outside the box with this. For example, this is The Assemblage website:

The Assemblage 'Book Tour' button
The Assemblage includes a ‘Book a Tour’ icon on the mobile home page. (Source: The Assemblage) (Large preview)

The Assemblage is a coworking space located in New York City. While the mobile site could’ve easily prioritized conversions up top (i.e. “Get your membership now!”), it instead provides a shortcut that makes more sense.

With the focus on booking a tour, mobile visitors can easily claim a date and time. Then, worry about learning all about and seeing the workspace in person later.

The Assemblage books tours
The Assemblage prioritizes booking tours of the cowork space. (Source: The Assemblage) (Large preview)

Completing the booking process is incredibly easy on mobile, too.

There are other ways to think outside the box when it comes to designing and testing for “I want to go”. This next example combines two micro-moments and does so in a really unique way, in my opinion.

This is Visit California:

Visit California Map icon
Visit California uses a recognizable Map icon in its header. (Source: Visit California) (Large preview)

Among the well-chosen icons its placed in the header of the site, Visit California also includes a “Map” icon. After all, what is one of the main reasons why someone would visit this site?

“I want to go to California and need suggestions!”

Now, behind this map icon is not a reservation system, enabling users to book their trip to California. With a site promoting travel to such an expansive location, users are more likely to use this site to gather information to decide where to go. The Map icon, then, is their key to drilling down deeper into those answers:

Visit California regions
Visit California’s Map navigation options. (Source: Visit California) (Large preview)

This is a unique and visually stimulating way to get research topics and answers into the hands of people who want it.

3. I want to do.

This question is an interesting one to design and A/B test for.

On the one hand, you’d assume that “I want to do” would be answered by articles that provide a how-to for the desired task. When that’s the case, the abundantly sized search bar from Kitchn is a good idea to test for:

Kitchn mobile search
Kitchn uses a search bar that’s comparable in size to the header bar. (Source: Kitchn) (Large preview)

It’s clear what Kitchn users want to do when they get here: search for recipes. And with a magazine of Kitchn’s size, that could be a difficult task to accomplish by using the traditional navigation. Instead, this search bar that’s nearly comparable in size to the entire header bar provides a faster solution.

But then you have the other kind of “I want to do” situation to design for — the one where the visitor of your mobile site wants to go out in the real world and get something done. This is similar to the “I want to go” solution from The Assemblage.

ReShape is a fitness center in Poland:

ReShape home page
ReShape’s home page looks like your typical fitness center website. (Source: ReShape) (Large preview)

Once you open the navigation on this website, users encounter a number of options to learn about the fitness center and its services.

ReShape navigation calendar
ReShape includes a navigational shortcut for mobile customers. (Source: ReShape) (Large preview)

What’s nice about this, however, is that the website allows current customers to cut the line and schedule a class right away through the calendar icon. There’s no need to download and use a separate mobile app. It’s all right on the mobile website and it’s easy to do, too:

ReShape mobile scheduling
ReShape makes scheduling fitness classes through mobile a breeze. (Source: ReShape) (Large preview)

When the success of the website and business is contingent upon getting customers to actually do something, don’t bury it in the mobile experience.

4. I want to buy.

Lastly, there’s the “I want to buy” scenario you have to test for.

While the hypothesis for this kind of test is going to be easy enough to figure out — “I want to get more mobile customers to make a purchase” — it’s how you use your design to compel them to do so that’s going to be difficult. Because, again, you have to remember that mobile conversion isn’t simple.

One example I really like of this comes from The Bark, a magazine for dog owners.

The Bark hello bar
The Bark hello bar commands attention without being pushy. (Source: The Bark) (Large preview)

What’s nice about this design is that there are two actions competing against one another:

  1. The content of the website that allows visitors to peruse articles for free.
  2. The unobtrusive yet boldly designed sticky bar with an attractive offer to convert.
The Bark subscription
The Bark subscription page for mobile. (Source: The Bark) (Large preview)

As more and more we move away from pop-ups and with the sidebar having little to no place on mobile, we’re running out of options for ways to jump into the experience and say:

Hey! Buy this now!

You could place banners in-line with the content, but that may be too disruptive for your users. While I’d assume that a sticky bar that can easily be dismissed is the better way to compel mobile visitors to convert, this is why we have A/B testing. To let us know what exactly our specific audience will do when confronted with a Buy (Subscribe) CTA on mobile.

And if they don’t want to convert there, that’s fine. At least you’ve done your due diligence in testing alternative scenarios to see if you can improve your success rate.

Tip #3: Encourage Users to Save Instead

This last point is a good segue into what I’m going to talk about next:

There are just some websites that won’t convert well on mobile.

Although research on Generation Z as consumers is still relatively new, many suggest that they are going to be true multichannel shoppers. Most of their research will be done on mobile devices, but the preferred shopping experience will be from a computer or in person.

Whether or not that’s true for Gen Z, millennials or any other generation of consumer, I think it’s a smart idea to test for this hypothesis. Until your mobile conversion rates are consistently and significantly higher than desktop and in-person conversion, encouraging mobile users to “Save” their progress on your site might be the better design choice.

As you work on designing and redesigning websites this year, you might want to save yourself the trouble of committing solely to a conversion funnel. Instead, build in shortcuts to “Save” on the mobile experience like:

  • Sign up for an account.
  • Save products to your cart or wish list.
  • Save an article or feed for future reading.
  • Share your email address for future updates.
  • Sign up for a free demo and we’ll take care of the rest.

Then, when the site is live, test how the conversion rates are affected with or without them.

Here are some neat examples of websites that use “Save” features well on mobile.

This is Entrepreneur magazine:

Entrepreneur Save function
Entrepreneur has a “Save” content icon in its header. (Source: Entrepreneur) (Large preview)

See that icon in the header between the search magnifying glass and account settings? This is where Entrepreneur enables regular readers to save content for future consumption:

Entrepreneur Save folder
Entrepreneur’s well-organized “Save” folder for readers. (Source: Entrepreneur) (Large preview)

As you can see, readers can save all sorts of content under this Save feature, making it easy to return to Entrepreneur articles any time, any place and from any device.

Then, there’s the example of Zendesk:

Zendesk free demo button
Zendesk offers a free demo and trial right away. (Source: Zendesk) (Large preview)

For those of you designing websites for service providers and SaaS companies, this is an excellent way to help your users “Save” their progress. I know it might not look that way at first glance, but let me explain:

Zendesk isn’t wasting anyone’s time with an overlong description of what it does and why people need to purchase its help desk software. Instead, it’s clearly summarized what users can expect and then provides two appealing calls-to-action. Regardless of which option the mobile user chooses, Zendesk requires them to provide contact information.

So, let’s say a mobile user fills out the form to enter the demo. They get inside it, but then realize they’re short on time or just don’t want to interact with it on mobile. Fine. Zendesk now has their information and will be in touch soon to follow up about the experience. The mobile user can then re-enter the experience from their preferred device when the inevitable follow-up email reminds them to do so.

Tip #4: A/B Test Your Page and Post Length

Another suggestion I’m going to make for mobile-first A/B testing is content length.

I actually touched on the subject of brevity in my previous article, How Web Designers Can Contribute to Mobile-First Marketing. However, I didn’t talk about how you can use A/B testing to confirm whether or not that’s the right path for your website.

There are case studies and research reports galore that discuss the subject of ideal content length for both desktop and mobile. Some are emphatic that shorter is always better, which is why I think we’ve seen such a huge push for video over written content in past years.

But then there are some who suggest that length should be determined on a case-by-case basis.

Take the Neil Patel blog, for instance. If I had to guess, I’d say that his articles are between 2,000 and 5,000 words on average — even on mobile. Considering Patel is a multi-millionaire, I don’t suspect that his lengthy posts have hurt the success of his brand in the least bit.

So, again, this is why we need A/B testing — just to confirm our suspicions and put any fears we might have about the efficacy of a site’s design or content to rest.

Unless your client comes to you as a well-known brand and they’ve already proved they can produce successful 2K-word posts like Patel, you have to test this.

Talk to your writers and marketers and ask them to create two different versions of your content for the first month or two. This includes the home page, blog posts, product pages and any other key pages in the user’s journey. Run a test to see if the length of the page on mobile affects readability as well as conversions.

You can then use these results to refine the rest of the content on your site, making sure you’re providing mobile users with the ideal reading experience wherever they go.

Wrapping Up

The goal in mobile-first A/B testing is to inspire mobile visitors to keep moving through the experience. Even if the element you’ve chosen to test doesn’t directly lead to conversion, the improvements you make should eventually trickle down to that final step, no matter which device it takes place on.

Just don’t forget to study your desktop analytics while running mobile-first A/B tests. While test results might not show you what you were hoping to see, looking at the overall picture might.

Smashing Editorial (ra, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

improving-mental-health-access-to-care-map
12 Oct

Designing Experiences To Improve Mental Health

by TBSCategories: News

Designing Experiences To Improve Mental Health

Designing Experiences To Improve Mental Health

Marli Mesibov

Did you know that a simple search for “depression” on the iPhone App Store brings up 198 results? In the Android Play Store, it brings up 239. The categories range from “Medical” to “Health & Fitness” to “Lifestyle.” The apps themselves offer everything from “depressing wallpaper” to “mood tracker” to “life coach.” We are approaching a golden age of digital therapeutics and design for mental health — if we as UX practitioners do our jobs well.

Given the plethora of apps available, you might assume that there are already dozens of wonderful digital therapies available for people struggling with mental health disorders. But — according to initial studies by clinical psychologists — you would be wrong. Most apps are useless at best, and harmful at worst, due primarily to a disconnect between the designers building the apps and the patients and providers in the field of mental health.

As of July 2017, 28% of digital health apps on the App Store were focused on mental health and behavioral disorders.
As of July 2017, 28% of digital health apps on the App Store were focused on mental health and behavioral disorders. (Large preview)

Some apps (mostly within the Lifestyle category) are harmless but useless. Emo Wallpaper, for example, is appropriately named and makes no claims to treat mental illness. It is intended as entertainment for people who are having a tough day. But there are more dangerous examples. One of the worst (since removed from the App Store) was iBipolar, which recommended that people in the middle of a manic episode drink hard liquor to help them sleep. Not only is this bad advice — alcohol does not lead to healthy sleep — but alcoholism is a problem for many people with bipolar disorder. The app was actively harmful.

Prescription drugs are regulated by the FDA, while mobile apps are not. How can we as UX designers create better apps to improve mental health treatment?

Are Apps The Answer?

Approximately one in five American adults experience mental illness each year. For some people, this can refer to a temporary depressive episode brought on by grief, such as the death of a loved one, or severe anxiety caused by external factors like a stressful job. For nearly 1 in 25 Americans (about 10 million people) it’s a chronic condition, such as bipolar disorder, chronic depression, or schizophrenia. Yet only about 40% of people experiencing mental illness are receiving treatment.

Recommended reading: Mental Health: Let’s Talk About It

The reasons vary. For some, they are undiagnosed or may refuse treatment. They may struggle with the stigma attached to mental illness. But for many, there is a lack of access. The association Mental Health America has studied and reported on what “limited access” means, and identified four systemic barriers:

  1. Lack of insurance or inadequate insurance;
  2. Lack of available treatment providers:
  3. Lack of available treatment types (inpatient treatment, individual therapy, intensive community services);
  4. Insufficient finances to cover costs — including, copays, uncovered treatment types, or when providers do not take insurance.
Access to Care Map, from Mental Health America
Access to Care Map, from Mental Health America (Large preview)

With that in mind, it would appear that a mobile-based solution is the obvious answer. And yet there are plenty of inherent challenges. Key among them is the gap between the clinicians treating patients and the UX practitioners working on mental health design.

Bridge The Gap Between Clinicians And Designers

About two years ago, I began research in the mental health design space. As a UX practitioner who focuses in health care, I wanted to learn how people struggling with mental health issues differed from people struggling with other chronic illnesses. I thought the work would entail an audit of the App Store and Play Store, a few weeks of interviewing clinicians to learn about the space, and then perhaps building an app with my team.

Instead, the work has continued ever since. At the time I interviewed ten clinicians, four behavior change designers, and five UX designers who had designed apps in the mental health space. But from these interviews I learned that there are two reasons why the design for mental health is lagging behind design for other healthcare needs. Those two reasons have changed my entire perspective on what we need to do to improve design in the space. It resulted in the creation of a few guidelines which I now hope to popularize.

Here is an overview of the research I conducted, and the two themes that emerged.

The Research

I initially assumed there were no apps available. And yet my audit of the App Store and Play Store uncovered hundreds of existing apps. Obviously, building an app was not the problem. But I began to wonder: why aren’t these apps used? (Few were downloaded, and I had never heard of any of them — for all that I work in the healthcare space!) And why are those that are used unsuccessful? To find that out, I needed more research.

Over the course of a few months, I interviewed therapists, psychiatrists, psychologists, and social workers. On the design side, I interviewed behavior change analysts, UX designers, and anyone I could find who had been involved in designing an app to improve mental health.

Some questions I asked the designers included:

  • What do you feel is missing from the field of mental health, if anything?
  • What are some of the top challenges you face when designing for people with mental health challenges?
  • What examples exist of poorly designed interventions for mental health? What examples exist of well-designed interventions?
  • If they had designed an app: What was the goal of the intervention you designed?
    • How did you test it?
    • Who did you test it with?
    • Was it successful? Why/why not?

Meanwhile, some of the questions I asked clinicians were:

  • How do you diagnose a patient’s mental health?
  • What barriers exist to patients’ improving their mental health?
  • What technology currently helps patients improve or deal with their mental health/illness?
  • How can technology benefit your patients?
  • What are one or two important pieces of advice you wish more people knew when creating applications/tools to help improve mental health from afar?

After the interviews, I came away with two new understandings:

Problem #1: Designers Don’t Know What Clinicians Know

Many designers told me they were starting from scratch. They did research with patients and learned what patients thought they needed from an app. But very few spoke with healthcare providers. As a result, the designers were missing the clinical expertise.

For example, a clinician shared with me that:

“What people say they want is not often what they want.”

Broadly, patients want to feel better. In a user interview, they might say they want to take their medication, or follow a meal plan, or meet some other goal. So the designer builds an app that allows them to set goals and deadlines. But as the clinician explained it:

“Change is scary, so when [patients] find out that feeling better requires change, that is a barrier.”

The app was designed to meet what patients said they needed, not what clinical expertise shows they will respond to.

When I asked one psychiatrist what apps she might recommend to her patients, she said:

“I wish I knew what I could recommend. Nothing is clearly safe, evidence-based, and tested.”

She explained to me that she once recommended a suicide hotline, but that it made people wait on hold for 20 minutes. After that experience, she said, “never again.”

When it comes to mobile apps, the risk is even greater — she worries that an app may have good intentions, but it might not be right for a particular patient. Or it may have the right elements, but the language could be inadvertently guilt-inducing or triggering.

In short, the mental health world does not need more apps, or more technology. As psychiatrist and Digital Psychiatry Director John Torous said in a recent article:

“Digital tools like fitness trackers present great opportunity to improve care […but…] they need to be utilized in the right way.”

In other words, patients need apps their providers have helped to build, and validate as useful.

Recommended reading: Dealing With Loud And Silent Burnout

Problem #2: Design Moves Fast

I already knew that designers move fast. It’s part of the tech world’s MO — just think of Facebook’s motto, “move fast and break things.” The catch is that second part: when we move fast, we break things. This is great when we’re breaking through assumptions, or breaking features that would otherwise cause issues post-launch. But it’s very bad when the things we might break are people.

To quote Sara Holoubek, founder and CEO of Luminary Labs:

“[I]t’s one thing to move fast and break things with a consumer internet app. It’s another thing when tech is used to improve human life.”

Designers are often up against deadlines. Some work for large healthcare companies that want to launch in time for a specific trade show, or before a competitor gets to market. This is very different from the world of health care, which tends to move very slowly, waiting for compliance or FDA approval, clinical trials, and multiple rounds of validation.

The challenge is adding the clinical expertise and knowledge to the design process, without hampering designers’ ability to move quickly.

Mental Health Design Guidelines

To that end, my team determined that we did not need to build a new app. After all, the mental health field is broad, and there is no one app that will reach everyone. What we need is to popularize the guidelines and communication methodologies that health providers know and use. We need to share that knowledge with designers.

During our clinical interviews, I noticed patterns. For example, though not every therapist said it the same way, they all mentioned how important friends, family, or community are for someone struggling with mental health issues. From this, we created a guideline called “Human.”

Thus, we created a set of six guidelines. Clinicians, researchers, behavior change analysts, and health writers have weighed in on the guidelines, and continue to refine them. They draw attention to six steps that any designer needs to follow in order to create an app that will live up to any provider’s standards.

HEALTH
Are you building a mental health app? Focus on HEALTH. (Large preview)

1. Human

As I noted above, there are systemic barriers to mental health care. For the many people who can’t afford or can’t find a therapist, mobile apps seem like a magical solution. 95% of Americans now own a cell phone! That means mobile apps could ostensibly make mental health care accessible to 95% of the population.

But technology is not the same as a human therapist, family member, or friend. As one behavior change specialist I interviewed shared, “The human-to-human connection is very important. In mental health, it is important to have a person who you can talk to and understand the other person is there for you.” Social support increases motivation, and people are vital for crises — although algorithms are working to identify a risk of suicide, the device alone is not enough to overcome the urge.

With that in mind, our first guideline is to be human. Encourage connection to external supports in addition to providing value in the app. And provide the ability to connect to a therapist or 9-1-1, as MY3 does.

The MY3 app encourages human connections. Having a therapist, friend, family member, or other human support correlates to lower rates of suicide and depression.
The MY3 app encourages human connections. Having a therapist, friend, family member, or other human support correlates to lower rates of suicide and depression. (Large preview)

2. Evidence-Based

Mental health professionals spend years training to treat mental health illnesses. Many professionals specialize in one or two specific types of treatment, such as talk therapy, Cognitive Behavioral Therapy (CBT), Dialectical Behavioral Therapy (DBT), or other treatment frameworks.

These therapies have specific activities associated with them; they encourage patients to develop certain skills, and they even make specific language choices. Any designer building a mental health app needs to begin by choosing one of these evidence-based therapy styles to follow. What’s more, other designers and users can help evaluate UI and short-term efficacy, but make sure to also bring in clinicians to ensure the app is properly representing the therapy.

Our second guideline is: to be evidence-based. Keep problem #1 in mind: the clinicians know how to treat their patients. We as designers can’t simply replace clinical knowledge with effective UI. The two need to work hand in hand, as Pear Therapeutics THRIVETM app does.

Pear Therapeutics app is undergoing extensive research, including clinical trials with mental health professionals, and applying for FDA clearance.
Pear Therapeutics app is undergoing extensive research, including clinical trials with mental health professionals, and applying for FDA clearance. (Large preview)

3. Accepting

I frequently hear people talk about a favorite coach or friend who gave them “tough love.” Many people seem to see tough love as a way of accusing someone of failure, and thus prompting them to do better. (Perhaps our fictional film coaches are to blame.)

In reality, fear of failure is exactly what stops many people from trying something new. This includes seeking mental health treatment. To make matters worse, low motivation is a core symptom of many mental health illnesses. Thus, angry or accusatory language can truly harm people. Instead, our third guideline is to be accepting. Reinforce how capable a person is, and show empathy in how you communicate.

Sanofi’s RA Digital Companion is designed for people with Rheumatoid Arthritis (RA). The app understands that many people with RA suffer from depression, and focuses on acceptance.

Sanofi’s RA Digital Companion app focuses on helpful resources and uses encouraging language.
Sanofi’s RA Digital Companion app focuses on helpful resources and uses encouraging language. (Large preview)

4. Lasting

When Pokémon Go launched, it became a nationwide craze just seven days later with an estimate of more than 65 million users. Yet the craze passed in only two months. The problem? Pokémon Go focused on short-term motivators, such as badges and gamification (as many apps do). To create a successful app that people use consistently, the motivation needs to become internal.

What does that mean? External motivators come from outside sources. Internal motivators connect to core values, such as “I want to succeed in my career” or “I care about my children.” These motivators can’t be taken away by another person, but they are not always clear. Our fourth guideline is to be lasting. This means that you should connect to an individual’s internal motivations, and help them feel responsible and in control, as Truth Initiative’s BecomeAnEX program does.

The BecomeAnEX app helps people quitting smoking to focus on their goals and internal motivators. It looks at the lasting benefits as well as how someone is feeling today, so that quitting becomes more than an impulse.
The BecomeAnEX app helps people quitting smoking to focus on their goals and internal motivators. It looks at the lasting benefits as well as how someone is feeling today, so that quitting becomes more than an impulse. (Large preview)

5. Tested

This should come as no surprise to any UX practitioner: testing is key! Clinicians and patients can and should be a part of the design process. Usability testing will help identify things you may not have considered, for example, someone having an anxiety attack may have trouble pressing small buttons. Or someone with schizophrenia having an auditory hallucination may struggle to focus on a busy page of text.

Obviously, our fifth guideline is: Be Tested. Ideally, clinical testing can become a part of more mental health apps, but even if it’s not an option usability testing should be. As noted above, design moves fast. Don’t let design move so fast that you make poor assumptions.

Recommended reading: How To Deliver A Successful UX Project In The Healthcare Sector

6. Holistic

Lastly, we found that many apps are isolated to accomplishing a single task. And that’s fine for something like Instagram — you post photos, or you look at photos. But mental health is intrinsically linked to how people see themselves. With that in mind, a successful intervention has to fit into a person’s daily life.

This is our sixth and final guideline: be holistic. One example of this is the app Happify. While it’s far from perfect, it does an excellent job of offering options. A gratitude journal may help for one time, and the community is helpful at other times.

For any designer working on an app, it’s important to note how an app becomes holistic: the key is to learn about the target audience. Be specific: gender, age, culture, and diagnoses all impact the way a person deals with a mental illness. That’s why researchers like Dr. Michael Addis focus on specific segments of the population, as he does in his book Invisible Men: Men’s Inner Lives and Consequences of Silence.

Happify learns a lot about you as an individual before recommending anything. They ask about things that may not seem important, because they understand the holistic nature of mental health.
Happify learns a lot about you as an individual before recommending anything. They ask about things that may not seem important, because they understand the holistic nature of mental health. (Large preview)

Moving Forward

There is an overarching theme to these guidelines: what works for you as a designer may not work for your end-user. Of course, that’s the tenant of UX! Yet somehow, when it comes to health care, we as UX professionals tend to forget this. We are not healthcare providers. And even those of us who have experience as patients have only our own experiences to draw on.

These guidelines are not perfect, but they are a start. Over time I hope to finesse them with additional insight from providers, as well as from the designers beginning to use them. We are on the cusp of a new world of digital health care, where designers and providers and patients must work hand-in-hand to create seamless experiences to promote health and well being.

For anyone interested in getting involved, I am continuing to work on new initiatives to continually improve design for mental health. Feel free to share your experiences in the comments, or learn more at Mad*Pow.

Smashing Editorial (cc, ra, il)


Articles on Smashing Magazine — For Web Designers And Developers

advertisement-12
19 Jun

Designing Mobile Experiences For Millennial Shoppers

by TBSCategories: News

   

The average American spends at least five hours per day on their smartphone. So, why is it so hard to make mobile ads work? Marketers toil over clicks and conversions on highly targeted ads, but users, tired of intrusive banners, keep installing ad blockers.

Designing Mobile Marketing Experiences For Millennial Shoppers

With $ 100 billion in annual mobile ad spend at stake, someone has to figure out a way to fix this disconnect.

The post Designing Mobile Experiences For Millennial Shoppers appeared first on Smashing Magazine.

Smashing Magazine

advertisement-2
03 May

Designing Voice Experiences

by TBSCategories: News

   

Voice-based interfaces are becoming commonplace. Voice assistants such as Siri and Cortana have been around for a few years, but this past holiday season, voice-driven devices from Amazon and Google made their way into millions of homes.

Designing Voice Experiences

Recent analysis from VoiceLabs estimates that 24.5 million voice-driven devices will be shipped this year, almost four times as many as last year. As experience designers, we now have the opportunity to design voice experiences and interfaces!

The post Designing Voice Experiences appeared first on Smashing Magazine.

Smashing Magazine

advertisement-11
18 Apr

How To Prototype IoT Experiences: Configuring The Software (Part 2)

by TBSCategories: News

   

In the first article of this series, we walked through how to put together the hardware board and all of its additional components into a single rig. I also gave you a glimpse of the decision-making process behind the selection of the board.

How To Prototype IoT Experiences: Configuring The Software (Part 2)

In this second (and last) article of the series, we will go over the code that will drive the sensor and the communication to the cloud. Additionally, we will configure a custom dashboard on Adafruit IO, so that we can visualize our data in real time.

The post How To Prototype IoT Experiences: Configuring The Software (Part 2) appeared first on Smashing Magazine.

Smashing Magazine

advertisement-7
11 Apr

How To Prototype IoT Experiences: Building The Hardware (Part 1)

by TBSCategories: News

   

The world is constantly evolving with frameworks, such as the Internet of Things (IoT) and virtual reality (VR). These and many others are opening opportunities to rethink how we approach prototyping: They introduce avenues to marry the digital software with the tangible aspect of the overall user engagement.

How To Prototype IoT Experiences: Building The Hardware (Part 1)

This two-article series will introduce readers of different backgrounds to prototyping IoT experiences with minimum code knowledge, starting with affordable proof of concept platforms, before moving to costly commercial offerings.

The post How To Prototype IoT Experiences: Building The Hardware (Part 1) appeared first on Smashing Magazine.

Smashing Magazine

Newer postsOlder posts
×

Powered by WhatsApp Chat

WhatsApp Chat is free, download and try it now here!

× Chat with Us