Resistance is Useful! UI/UX Case Study: the indelicate art of friction

We at Propelics frequently brag about how our Enterprise Mobile Apps are “streamlined,” “intuitive” and frictionless. In fact, last year I wrote this blog post on the subject. But there are times when a little UI/UX friction is actually desirable. You might want to slow the user down to ensure data captured is correct or to prevent users from taking an incorrect path. You might want to add friction to prevent a user from deleting important information. Or you might add friction in order to discourage the use of a particular feature. For more abstract ways friction can improve your UX, check out Dina Chaiffetz’s article. This post is meant to demonstrate a few basic methods for adding friction to your application. Consider the case we all see most often, the ol’ Add Promotion Code link:

In this case, the user must expand the promotion code panel in order to reveal the text field. Is it any wonder Amazon (and so many other online vendors) want to conceal this? They might argue that hiding the field cleans up the UI but on the desktop, screen real estate is plentiful so I doubt this is the real reason.
Compare this to the mobile checkout in Amazon’s iOS app. Here, you’ll notice a couple more examples of friction. First, the Place Order button isn’t a button at all but has been replaced by a swipe gesture. Why? Because it’s easier to accidentally tap a button than to swipe one, so the gesture prevents users from making a potentially costly mistake.
Take a close look at this screen. See a way to enter a promo code? Not one that’s immediately intuitive, anyway. What’s the average buyer going to do here? Skip trying to enter a promo code, most likely. But it’s there—the promo code field. And the way to get to it is by tapping “Pay with.” Which of course no one is likely to do—except those who need to change their payment method.
Don’t get me wrong. The interaction is elegant and economical and the way the interface animates is thoughtful and helps keep the user from losing her place—all evidence to suggest a lot of thought was also given to how they would go about concealing the promo field.
Note that Amazon was kind enough to align “Gift cards & promotional codes” at the bottom of the screen such that it remains visible no matter how long the user’s list of payment methods is (the text field itself, however, is below the fold).
So that’s nice.

In contrast, Newegg has the perfect opportunity to clean up its UI by collapsing these Service Plan options during checkout, but it doesn’t. Instead, they shove all of their Service Plan options in your face, fully exposed, like a cat laying on its back so you’ll rub its belly (or in this case, purchase a Service Plan from it):
…but then they make you enter your email address before you can use a Promo Code:

At least they don’t make you click a link to expand the Email panel.
Now, while none of these examples are Enterprise Mobile Apps, they provide some wonderful examples of how friction may be applied to control user behavior. Particularly when we compare their mobile and desktop variations. Since eBay’s motives are pretty obvious and transparent (i.e. maximize profit), we can use their techniques as a guidepost for our own work.
Lets consider all the features eBay intentionally hides in an effort to discourage user-interaction with those items:

Ending an auction

It’s obvious why eBay would want to hide this feature. They didn’t get where they are today by encouraging people to end their auctions early. Oddly enough, this used to be a more complex process in the iPhone app. eBay previously hid the feature in a “More actions” drop-down. I’m assuming eBay received complaints about this because now “End Item” is right there in the listing.
However, when it comes to the desktop version, things are still complicated and weird. As you can see below, the End Item link should appear right below Revise your item. But it doesn’t. Because that would be too easy.

Instead, they bury it in the seller’s admin page where users may still find it concealed under “More actions.” Any time you hide interaction in a dropdown menu, you’ve added a considerable amount of friction to the task. Alternately, users may click the checkbox beside the listing, then click the (more immediately apparent) “End” button, as shown.

This represents a third form of friction. Best used when trying to apply the same action to multiple items (e.g. delete or print), here it seems a bit out of place. UX Side Note: the fact that one path reads “End Item” while the other reads simply “End” is a UX no-no that makes this unnecessarily confusing for the user. And in case you were wondering, the checkbox to the left of all the buttons serves an (albeit unintuitive) Check All function.
After clicking End (or End Item) the user must tell eBay why he is ending the auction (who knows why this is important to eBay). Again, there is inexplicably some variation in the wording of the choices, depending on where you’re reading them.
Once an item receives bids, the process of ending an auction early becomes even more complicated and involves notifying all your bidders. Why couldn’t eBay save users the trouble and notify your bidders automatically? Take a guess why. More barriers = fewer auctions ending early = more cash for eBay.

Finding the item number
Why would eBay want to hide the item number, you ask? Simple. Sniping applications ask for it. So my guess is when people let a snipe application bid for them they’re less engaged with the auction versus the manic bidding they might engage in if they’re actively watching the item disappear before their eyes.
In the iPhone app, the item number is hidden behind a Show More link:


On the desktop, eBay achieves a similar friction by hiding the number ‘below the fold.’ Expanding the browser window on a big monitor doesn’t help. The featured information scales and the number remains obscured off-screen. Further, eBay employs an additional form of friction here, that is, the item number is in a teeny tiny font, making it hard to read. I’m surprised they didn’t reduce the contrast by also making the number light gray.


Searching sold items
Similarly, searching sold items is another behavior eBay would prefer to discourage. Users will often use this feature to conduct price research. The risk is that a user might determine an item she was going to bid on is overpriced based on past auction results. Again, this is hidden under a “show more” link, though this one’s even harder to find as this submenu is itself stored under “Refine.”
The path is Refine —> show more —> Sold Items


Meanwhile, in the desktop version, the link copy is inexplicably changed to “Sold listings” and appears below the fold in the left-hand column.

As we’ve seen, friction can be achieved by placing an item off-screen or at the perimeter of the screen. Similarly, the Hootsuite iPhone app creates friction by placing confirmation buttons that must be tapped sequentially in different locations on the screen, making them harder to tap, thus ensuring the interaction was intentional on the user’s part.


Notice that in step one (at left), the user’s finger is up at the top-right of the screen, to tap “Next,” but must then travel to near the bottom of the screen to tap one of the final Send options.
So there you have it—a few simple methods of creating friction to help control or inhibit specific user behaviors (without having to resort to forms). If your organization needs help building its enterprise mobile apps, or is looking to refine or update the UI/UX of its existing apps, check out our Mobile UI/UX Design Kickstart. Whether your company is redesigning an existing app (or suite of apps) wants to add new devices to its portfolio, our Mobile UI/UX Design Kickstart will be the most frictionless way to achieve your business goals.