Embracing Friction in UX

What is Friction in Design?

Originating from classical mechanics, friction is defined as a force that resists the relative motion of two touching objects sliding against each other. The concept of friction can be lent to the realm of usability design where the user and the interface are two entities moving against one another, creating an abrasive opposition as the user travels through their intended task flow. The more friction present, the more effort the user must input into the system in order to complete the end goal.

Friction Chart

Image via https://trackandfieldphysics.weebly.com/friction.html

Friction in UX is generally defined as anything that prevents or slows down the user from completing their intended task.

Friction typically varies in nature. For a user, it can be exiting out of a newsletter signup or an advertisement before being able to read a news article, it can be unclear language on a homepage, or it can be having to create an account in order to apply for a job position.

User interface friction can manifest in a number of ways but is widely regarded as a substandard practice in UX Design school of thought. Steve Krug’s book ‘Don’t Make Me Think’ (an integral piece of literature for every UX designer), covers principles of good usability design in human-computer interaction. Krug’s sentiment, aligned with many other usability design pioneers, is that good UX should require the absolute minimum amount of cognitive effort and steps necessary to complete a task.

From a designer’s perspective, minimizing friction means establishing a clear information hierarchy, applying common UX standards, reducing visual load, and constructing a stable intrinsic system logic to help users establish usage habits.

Image via https://www.csail.mit.edu/

In most cases, the concept of avoiding friction should be universally applied to create seamless digital user experiences. Sometimes, especially when designing highly critical systems, a frictionless experience may not always hold the best interest of the user.

A lack of friction seems appealing at first, but when it begins to compromise other usability constraints such as user security and safety, it’s advantageous to realize that friction can have an intended function in usability design.

In this article, I will demonstrate a handful of scenarios where friction can be employed in usability design for the ultimate benefit of the user, the product itself, and those that it effects.

 

 

Using Protective Friction for Error Prevention

Here is an Amazon Dash Button. Simply press the button and an order is made instantaneously on your Amazon account for the respective product. This purely frictionless

Amazon Dash Button

Image via https://www.digitaltrends.com/home/what-is-an-amazon-dash-button/

experience is borderline magical, right? There you are tending to your weekly load of laundry and you realize you’re out of Tide Pods, you hit the button and instantly, the words “Tide Pods”’ will never see the face of your grocery shopping list again!

What if every interaction was this simple?

Maybe in the interest of laundry affairs, a lack of friction is appropriate. But what if permanently wiping your computer’s hard drive or sending out a false ballistic missile threat alert to 1.2 million people in Hawaii was just as easy as pressing a button to order Tide Pods?

It is clear that some mistakes are not as easily forgiven.

Emergency Alert Notification

Image via https://www.theverge.com/2018/1/13/16888390/hawaii-missile-emergency-alert-false-alarm

Now you’re catching my drift. Not every interaction is and should be created equally…

If more tiers of friction were implemented in the emergency alert interface, the admin user wouldn’t have mistakenly alerted 1.2 million people that a ballistic missile was currently heading their way and widespread existential panic could have been avoided.

It is important to recognize digital interfaces as tools that can impact our physical world and understand that we should take appropriate precautions to maintain safety when using them.

 

Enhancing Security

As the internet continues to become more globally adopted, it also grows increasingly more dangerous. Behind every corner of the internet, someone or something is lurking, waiting to access your personal data.

2 Step Verification

Image via https://www.smashingmagazine.com/2018/01/friction-ux-design-tool/

These days, creating an account is more complex than ever, you have to provide an email, a phone number, and answers to personal security questions just to complete onboarding.

Although tedious, introducing multi-faceted security layers is not there just to annoy you as a user. In the long-run, the overhead friction will prevent the chances of a loss of security down the road.

When you leave your car parked on the street you lock the doors to prevent any possible theft. Why wouldn’t you respect your digital possessions the same and lock your figurative online doors as well? Yes, It takes a few extra steps, but it’s integral to protecting your computerized belongings.

Deceptive Friction

Make Users Feel Good

Have you heard the term “labor leads to love”?

In 2011, business researchers from Yale, Harvard, and Duke conducted a study where individuals reported feeling more in-control, competent, accomplished, and placed a disproportionately high value on products they partially created. They named this cognitive bias the IKEA effect. In order for the IKEA effect to take place, the reward must be superior to the amount of effort required.

IKEA Effect

This same philosophy can be applied to digital interfaces. For example, Instagram offers a platform for expression, but no content itself–it’s up to you to do that part on your own. The more creative effort the user puts into constructing their digital persona, the more valued it becomes by that user as a result.

If Instagram provided the content itself, there would be no allure in the diversity of expression generated by the user-base. There’s no fool-proof formula for establishing a noteworthy Instagram page, and that’s all of the enchantment!

Boost Credibility

As machines become increasingly more powerful, computations that used to take days at a time are now performed in seconds. The rate at which our gadgets become speedier does not exactly parallel the level of faith humans have in them. This becomes evident when we take a look at a case study where our products became so fast that we still didn’t always believe when something important occurred instantly. And thus, artificial waiting was born.

Wells Fargo Eye Scanning

Image via https://www.magzter.com/news/865/2348/032016/tb9sm

In 2016, Wells Fargo introduced biometric authentication via eye scanning–users could now sign into their Wells Fargo app with a nimble eye scan. This innovative feature greatly streamlined the login process since users no longer had to manually input a username and password to be authenticated.

The assumption that a streamlined login process would naturally become adopted ignored a key insight–users must trust the action in order to embrace it.

Instead of receiving feedback that mobile app users were delighted by the new, frictionless process, Wells Fargo instead discovered that customers felt the validation was far too hurried to possibly be accurate. Given the sensitivity of the app context, users expressed apprehension and an unwillingness to use an “unreliable” login gateway to access their finances.

Despite this feedback, there was no fundamental reason to actually slow the eye-scanning computation. Instead, the solution was to introduce artificial waiting (also named the labor illusion by Harvard researchers) to the interface to build trust and communicate to the user that the system is computing properly. This way, users can use the simplified login process without feeling like it would allow any user with eyes to access their account.

illusion by Harvard researchers) to the interface to build trust and communicate to the user that the system is computing properly. This way, users can use the simplified login process without feeling like it would allow any user with eyes to access their account.

This case study illustrates that facilitating user adoption entails more than just the existence of cutting-edge technology. It is imperative that the interface communicates to the user generally what is taking place behind the scenes in a way that’s straightforward for the user to interpret.

User-Improving Friction

Alter Behavior

When strategically architected, friction can guide users in an intended direction. Nudging is a theory derived from behavioral science that purposes indirect suggestions and positive reinforcement as methods to influence the decision making of an individual.

For example, an office building that reduces how frequently the main elevator returns to the lobby from every 45 seconds to every 90 seconds will ‘nudge’ a fraction of the elevator-users to take the stairs instead.

Nudging essentially adds small tricks to change behavior (for the better) without limiting the options available. We can observe the same concept in user interfaces.

Slack is a professional instant-messaging platform that facilitates communication for remote teams. Given that it is used in a professional setting, it is likely to assume that a

Slack Notifications

Image via https://www.smashingmagazine.com/2018/01/friction-ux-design-tool/

percentage of its users allow for push notifications due to high priority. Understanding this, the system alerts a user attempting to send a message to group members in alternate time zones with a message double-checking that they want to confirm this action. This added layer of friction doesn’t eliminate the option to continue sending the message, but it causes the user to deliberate if this is in fact what they are intending to do. Potentially disturbing a team member in another time zone might not be at the forefront of the sender’s mind, so an extra step to communicate this consequence instills responsibility when using the product.

 

Build User Skills

Mario Kart Friction

Image Via https://giphy.com/gifs/mario-kart-donkey-kong-M6zlLCAQALGta

The epitome of building user skills through friction is video games. Essentially the entire premise of video games is to gradually increase friction at a relative rate as the game player improves in skill. If the game has too much friction, the user can’t advance and is discouraged. If the game doesn’t have enough friction, it is unrewarding and uninteresting.

Another setting we can observe this is on is educational platforms. When learning a subject, the student will begin on easier assignments and advance onto harder ones as they travel onward through the course. Circling back to an earlier section referencing making users feel good about themselves, friction in this context adds a sense of achievement.

Increase Product Value

Snapchat UX

Image via https://www.business2community.com/social-media/snapchat-brands-navigate-interface-01592279

A high level of friction can also induce exclusivity in some user interfaces. Snapchat, for example, doesn’t follow traditional UX guidelines and patterns. Many have ridiculed Snapchat for being unintuitive and not exercising better navigational standards. In response, Snapchat’s CEO, Evan Spiegel has said

“It’s simply anti-adult… This is by design. We’ve made it very hard for parents to embarrass their children.”

Unassociating with other social media platforms like Facebook that have been widely adopted across all age groups, Snapchat’s manifesto is to maintain the age-exclusivity of their product by, you guessed it… friction!

Juxtaposing Snapchat, Product Hunt applies friction to maintain the caliber of its platform. Product Hunt operates on the basis that its users make superior tech product recommendations. If the community allowed any and everybody to become a contributor, the quality of suggested products would be diluted and overcrowded. To be a contributor, you can’t just sign up with an email, you have to jump through a few hoops first to prove yourself worthy.

Although it can be hard to admit, sometimes not inviting everybody to the party can make the party better for those that are already there. Friction as a filter for those who are the intended users of the product preserves a level of integrity that isn’t mutually offered when it’s all-inclusive.

Moving Forward in Design

Sometimes it is difficult to grasp the fact that digital systems can have tangible impacts on our physical lives. Designers have a large responsibility to uphold standards of security, safety, and ease of use throughout usability design but it is important to remember none of which should be exploited at the compromise of another. Generally, unwanted friction should always be eliminated, but it is important to remember that not all types of friction are insidious. Whether it is about slightly nudging users, maintaining exclusivity, slowing down risky actions, teaching responsibility, or boosting credibility, don’t be reluctant to leverage some friction if it will evolve the user experience and the context demands it.

Flexbox (flexible box layout)

More and more often I’ve been hearing, reading and sneaking peaks at code that is utilizing flexbox. What! Have we finally reached the tipping point!? Are we really finally ready to start using flexbox for our client projects? I first starting reading about flexbox years ago, but because of a lack of browser support, I quickly put it out of my mind as a viable layout tool. Perhaps it may be time to give it a little more attention. This week’s technical discussion focuses on just what flexbox offers, how it works and whether or not it’s time to start implementing this extremely promising tool. So I rolled up my sleeves, did some internet digging to unearth an answer to my first question: Just what is flexbox anyway!?

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Mozilla Developer Network

What is flexbox?

How do I start using flexbox?

It didn’t take long to realize that if we were going to use flexbox, we would need to be a bit more accommodating than traditional CSS. Well, this is nothing too new with CSS3 as we’ve been leveraging browser prefixes for quite some time, but what is unusual about flexbox it that it has evolved over time and we as CSS authors/developers, need to write both ‘Old’ and ‘New’ syntax.

According to Chris Coyier back in 2013, we can combine the two syntaxes to achieve pretty good browser support. If it turns out to be as powerful and useful as the promise – this would be a small price to pay I think. Added bonus – we can quickly assess just how out of date information on the web is, simply by reviewing the syntax that is being used. Bad news – there is also something that authors call a “tween” state that was created as a bridge from old and new. I’m going to focus on the new syntax.

Here’s an example of the different flexbox syntaxes:

Core Concepts

It seems the backbone concept of flexbox is that it consists of Flex Containers and Flex Items

Flex Container

Declared on a parent element using the display property. display: flex or display inline-flex

Flex Items

No real surprise, flex items are positioned inside of a flex container along with something called a “flex line”.

flexbox-1

Flex Line

The concept of a flex line is that by default all flex items line up in a row on a single axis. Flex line is not something that is declared or explicitly stated in the code, but the concept can be modified with some specific css properties such as flex-direction and flex-wrap. A rope analogy is also used to explain this concept: Imagine a rope that is anchored to opposite sides of a container with items attached to it.

flexbox-lines

Flex Direction

Changing the orientation and direction of the items on a line is easy using the flex-direction property. flex-direction accepts four values:

Flex Wrap

While the default behavior is that all flex items link us on a single line, entirely unlike what an actual stretched line or rope would do, flex lines can be extended to multiple lines using a property called flex-wrap. Using a property called justify-content on the flex container, you can easily align your elements left, right or center.

For this one, let’s actually look at a little code to see how things are coming together. Here’s some sample markup of an outer flex-container with multiple flex items inside of it.

<div class="flex-wrapper">
     <div>A</div>
     <div>B</div>
     <div>C</div>
     <div>D</div>
     <div>E</div>
     <div>F</div>
     <div>G</div>
     <div>H</div>
     <div>I</div>
     <div>J</div>
     <div>K</div>
     <div>L</div>
</div>

The corresponding css to start flexing our muscles…doh!  Thanks to The Ultimate Flexbox Cheat Sheet for helping with the backward compatibility and notation.  Sidenote: Formatting styles have been removed.

#flex-wrapper {
    /* flexbox setup */
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

 #flex-wrapper>div {
    /* flex items */
    flex: 1;  /* each flex item will have the same size */
 }

flex items line up on a row

Ok – here we see a screenshot of all the flex items lining up nicely along a horizontal flex line from left to right. Problem is, there’s not a lot of space for content – so let’s add a bit of flex-wrap and let’s set a min-width on our flex-items just so that we can see what’s going on.

#flex-wrapper {
    /* flexbox setup */
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

 #flex-wrapper>div {
    /* flex items */
    flex: 1;  /* each flex item will have the same size */
    min-width: 50px;
 }

Now, this is interesting. As you can see, because we added the flex-wrap and min-width properties, our flex line is now wrapping to a new line. What is perhaps unexpected is that all the items on the second line are stretched to take up the additional space that is available. Is anyone getting any ideas?

flex-wrap

Big & Simple

Order

What I didn’t cover yet in regards to the flex line concept, is a really big change in the way that I’d previously thought about laying out content. Items on a flex-line can be reordered right in the css layer! This is potentially a huge idea and one that could allow semantic markup to become even more achievable. By simply placing a css property called order on a flex-item, you can reposition it on your flex line. The value that is placed on order is simply an integer. Using my previous example, I want to try to take the second flex-item ‘B’ and place it at the end of the flex line. Using one very simple line of css proved to be all I needed! (background color added for drama)

#flex-wrapper>:nth-child(2) {
    order: 12;
}

flex order

Nested Flex Lines

Flex items are the direct children of a flex-container, so inheritance does not apply very deeply. The good news is that you can create as many flex containers as you need to and they can all behave independently of one another. Imagine a site layout where you have a left and right rail with a large center area for your main content. You can layout your main areas with a flex-container and then place another flex-container in your main content to handle a series of elements – like a list of products, or images or both. This nested flex line can have a different orientation, order or any other flexbox attribute. Good to know.

Flex Grow and Flex Shrink

Flex-items can easily be assigned values that allow them to grow or shrink relative to the other items on the line. Unitless values serve as the proportion. e.g. an item that has been given the property of flex-grow: 2 will be twice as big as the other items on the line. Flex-shrink behaves the same way: flex-shrink: 2 (no negative values).

Flex Basis

According to Chris Coyier, flex-basis “defines the default size of an element before remaining space is distributed”. Hmmm, I’ll need to think on that one. Length (2em, 200px, etc) or keyword values (which is pretty much limited to ‘auto’ as I understand it) are accepted and they seem to have a rather different impact on items. Check out this graphic to make sense of things. If flex-basis is set to 0, the extra space around it is not factored in. If set to auto (keyword), the extra space is distributed by its flex-grow value, any other value, I assume, works that into the equation. I suggest messing around with some code to understand the relationship between flex-basis, flex-grow and flex-shrink – which leads to the next core concept: the flex shortcut.

Shortcut

There is an important short cut for flex-items – called simply flex. flex is a combination of flex-grow and flex-shrink(optional) and flex-basis(optional). Default = 0 1 auto

RECOMMENDED over using individual properties.

.item {
 flex: 1 0 0;
}

 

Centering Things (Vertical Centering) using flexbox

Perhaps the most out-of-the (flex) box functionality that will be used by almost everyone immediately is the illusive vertical-centering! CSS developers have been searching for over a decade for a clean, semantically accurate, non-nested, flexible (I could go on) way to center an element in a vertical space. Imagine a container that has a fixed height. You have an image that is dynamically added and can have a variety of orientations and dimensions. You want to center that image in the container both horizontally and vertically regardless of its size. Seems easy – but as you probably know, it can be a major headache!

Enter flexbox.

It really couldn’t be easier, and it works on both horizontal and vertical flex lines. Simply add the justify-content property to your flex-container and give it a value of ‘center‘ – BAM – you’re done. Adding align-items: center; takes care of the horizontal centering. This is huge people!

 

#flex-wrapper.horiz {
    flex-direction: row;
    -webkit-justify-content: center;
    justify-content: center;
}

#flex-wrapper.vert {
    -webkit-align-items: center;
    align-items: center;
}

<div id="flex-wrapper" class='horiz'>
    <div>A</div>
</div>

<div id="flex-wrapper" class='vert'>
    <div>B</div>
</div>

<div id="flex-wrapper" class='horiz vert'>
    <div>C</div>
</div>

 

flexbox-centering

Conclusion … Is it time to start using flexbox?

While I feel I’ve only scratched the surface and I haven’t dug deep into browser support and what can and can’t be accomplished, I’ve now read enough from developers who I respect who seem to be working flexbox into their daily workflow. Like any project check out sites like canisuse.com and consider your audience. On one hand, Microsoft support is (not surprisingly) poor, but to their credit, they were early adopters of some of the concepts. Controlled environments and responsive apps using technologies like Cordova seem to be excellent candidates to get started, and from what I can tell flexbox is not going away and will continue to be adopted more and more. I plan on finally getting on board – that I can say with certainty!

 

View the original slide deck on Slideshare.net: Slideshow Presentation