Making User Interface Elements Difficult to Use By Intent

Jul 30 2010 by Jacob Gube | 23 Comments

Making User Interface Elements Difficult to Use By Intent

In modern web interface design, no other principle has been heralded and pushed onto us as much as the concept of user-centered design. User-centered design tells us that we should do everything we can to make our user interfaces as easy to use and as intuitive as possible.

However, a big part of designing user interfaces that are easy to use also involves figuring out what things should be a bit more difficult to use. It’s a counter-intuitive notion that’s central to effective user interface design.

Why Make Certain User Interface Items Difficult to Use?

I can think of 3 main reasons for making an interface element more burdensome to utilize:

  1. When using the interface element is costly to the user if used by accident
  2. When there’s an overall improvement to the UI as a whole
  3. When the cost of maintaining a feature is costly to the provider if used frequently

High Cost of an Error in Usage

When you accidentally delete a file or click on a button that you didn’t mean to, there’s going to be a cost. For example, recovering a deleted file in a traditional operating system such as Windows costs time. To get your deleted file back, you need to:

  1. Minimize your current application so that you can see your desktop
  2. Click on the Recycling Bin icon
  3. Locate the deleted document in your bin (or type in a search term if you have many files in your bin)
  4. Right-click on it to see and issue the restore command
  5. If you want to continue working on the document, you need to reopen it

That’s a costly mistake. Good user interfaces will have safeguards for this situation, such as obfuscating the visibility of the delete command and showing you a confirmation dialog that asks you if you really want to delete the file. Burdening the deletion process is a purposeful design choice to avoid the more costly event of accidentally deleting the document.

Example: Deleting Content in WordPress

In older versions of WordPress, when you deleted content by accident (such as that post draft you’ve been working on for a month), there was no simple way to recover from the mistake. There was a confirmation dialog window that asked you if you did in fact mean to delete the content, but if you’re quickly going through, say, spam comments and deleting them one by one, there will be accidents. In older versions of WordPress, when you delete something, it was irreversible.

Deleting Content in WordPress

To fix this, WordPress added an additional feature called Trash. It works much like the Recycling Bin in operating systems that temporarily house files you’ve deleted in case you want them back.

Deleting Content in WordPress

Although it’s now harder to permanently delete WordPress content since you have an additional step to go through to remove the stuff you deleted inside your Trash, by intent, the deletion process was extended and made more difficult to prevent the more costly event of accidentally deleting a post or comment.

Improving the Overall UI System

When there are a lot of interface items competing for your attention, the result is an intimidating and cognitively burdensome UI.

For newer users of the system, having too much noise going on all at once can slow down their ability to learn how the system functions.

But we want people to have ready access to all of these awesome features, so the tendency is to fit as many things as we can into our screens.

Fitt’s Law

To help explain the value of making some interface elements more difficult to use for the overall good of the system, I’ll borrow from Jeff Atwood’s discussion of the opposite of Fitts’ Law.

Fitts’ law is a human-computer interaction (HCI) model that predicts the speed in which someone can move to an objective. It applies to any human-computer interaction situations that involve human movement and a target.

In the context of graphical user interfaces on computer screens, the model attempts to quantify the factors that improve someone’s ability to, for example, point and click on an interface element such as a call to action button.

If that sounds too complicated, we can simplify the model this way: Things that are important and frequently used should be bigger and closer to the user.

It makes sense: Bigger things that are closer to us are easier to get to and touch than those that are smaller and farther away.

So, if Fitts’ Law states that interface elements that are essential to the user should be bigger and closer to them — or in the context of a computer screen, easier to find and see — Atwood looks at the problem in reverse and asks, "What should we do with UI elements we don’t want users to click on?"

The answer is simple. By logic, we make those UI elements more difficult to use, locate, and find by making them smaller and more distant to the user.

Doing this forces us to prioritize what interface elements are more important. In turn, this creates visual hierarchies in our UI elements that help the user understand how the system works.

Example: Freshbooks

One of my favorite apps, Freshbooks, demonstrates this point well.

The web app’s design smartly implements a logical visual arrangement of its interface elements to make things easier and more intuitive.

For example, in the Expenses tab, there are 6 commands you can perform from the top interface command set:

  1. Add a new expense
  2. Archive
  3. Delete
  4. Copy
  5. Convert to an invoice
  6. Search

Look at the variations in size, grouping and spacing of those commands. Some are close together, some are farther down to the right, Search is deemphasized.

Which command is the most important? Which one is the least important?

Counter-Example: Microsoft Word

Just because they’re our favorite whipping boy, let me follow the trend and pick on a Microsoft product: MS Word 2007.

Counter-Example: Microsoft Word

MS Word has a cluttered main menu, and there’s not a lot of thought put in, in terms of Fitt’s Law. They all seem of equal value and thus, it’s harder to find the things you need.

How many times do you need to adjust your document margins or theme? Probably just once.

How many times do you need the Acrobat tab? (Never in my case).

Should all of these options be shown by default, or should they be hidden and more difficult to access for the overall good and simplification of the UI?

By hiding some interface elements or by making them smaller, you are afforded with more room to work with for commands that are truly important and often used (such as styling commands for bolding and emphasizing text).

High Cost to the Provider

Some features might be too costly to us as providers if they’re used regularly. An example of this situation is in obfuscating or burdening the customer support process so that users are encouraged to help themselves before submitting a help ticket.

Let’s use a real-world analogy to explore this topic: Toilet paper in public restrooms. Toilet paper in public restrooms are typically provided free of charge as a courtesy to bathroom goers. You can guarantee that toilet paper in these restrooms will be as rough as sandpaper and manufactured as cheaply as possible.

The reason this is so is that it’s a free service. One of the ways to cut costs is to get the cheapest toilet paper possible.

But what if the public restroom operator had some spare money to spend? Should he/she improve the quality of their toilet paper?

Nope.

There are other benefits to keeping toilet paper as crappy as possible. By making toilet paper difficult to use, they discourage people from taking advantage of the offering unless they absolutely need to.

For instance, many would hesitate to take rolls of toilet paper home because they’re unbearable to use and they probably have better stuff waiting at home. Some might even refrain from using public restrooms if they know that in five minutes they’ll be at home and in the comfort of their own restroom.

It doesn’t take away from the user; they still have the feature (toilet paper) but they’re just less likely to use it if they can avoid it. There is no lack of feature availability, so it’s okay.

Example: Download Feature in Design Instruct

I’ll use an example closer to home. On Design Instruct, everything is free: You don’t have to pay a subscription fee to access the site, you don’t have to register to use any site feature, and you don’t have to jump through hoops to download stuff (such as Photoshop files and freebies).

On similar sites that provide free downloads, they’ll often have large call to action buttons placed prominently at the top of the web page, enticing the user to download their source file.

Download Feature in Design Instruct

on Design Instruct, the download feature is at the very bottom of the tutorial, as a link with a purposefully intimidating heading ("Download Source Files") and link name ("some_file_name").

Download Feature in Design Instruct

Our reasoning is to discourage the feature’s use unless you really need to. This is because the download feature, although great for our users that need it, costs us an arm and a leg in bandwidth and servers (we need a dedicated server and CDN just for these downloads).

The download option will be used more by long-time readers who are already familiar with the interface and less by one-time visitors who’ll never return to the site again.

The objective here is simple: we want to prioritize our resources in such a way that the readers who’ve been with us longer are the ones that are likely to take advantage of this feature.

Example: Minimizing Free Signups in Basecamp

Another example where this concept can be seen is in Basecamp’s pricing page. Basecamp offers a free plan, but they’d much prefer you sign up for their premium plans.

In the screenshot below, I’d wager that many people miss the "free plan" option and find it more difficult to click on because of the option’s size and position, especially when compared to UI elements around it.

Even though they want to make this option available, minimizing free signups versus premium signups is the objective of this screen.

Minimizing Free Signups in Basecamp

Further Reading

Here are a few articles related to this topic.

References

  1. Fitt’s Law

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

23 Comments

Uncleserb

July 30th, 2010

Interesting read, thx for sharing your thoughts on this!

;)

Alex W

July 30th, 2010

Very interesting read Jacob. I have thought about why sites make some things smaller, but not to this extent. This will be very helpful to me building UIs in the future; thanks!

Johan de Jong

July 30th, 2010

Great article, though there are 2 things I would like to say:

1) About the WordPress trash; although it’s a great feature to prevent deleting items, there’s a small “bug”. When you delete an item with the slug “test” and later create a new item with the slug “test” it will rename it to “test-2″ and sometimes it takes ages to find out why…

2) The second problem I see is at the Basecamp example; although it’s the purpose of ‘forcing’ people to signup for a paid plan, a lot of potentional users whould like to try-before-buy and since they can’t find the “free plan” or “demonstration” option they’ll leave and try to find another solution.

So making UI elements hard to use can mean you can drive people crazy or run away while that can never be intended.

Jordan Walker

July 30th, 2010

Great article with the benefit of making user interface elements difficult by design.

Bryan

July 30th, 2010

While I understand your points about Word 2007, they did have a good reason to create the ribbon interface. Microsoft released a questionnaire asking people to describe features they would like to see in the next version of Word. The results showed that a majority of features requested were already in the program. No one knew about them because they were buried in menus and dialog boxes. The ribbon was an attempt to bring these desirable features and other commonly used features into a position more easily discoverable.

Whether this worked or not, I don’t know. There are things that I have found easier to accomplish in Word 2007 vs Word 2003. I don’t know if this interface is easier for new comers to the program.

Also, the Acrobat tab is placed there by Adobe when you install Acrobat Pro. It is not Microsoft.

Robert

July 30th, 2010

Interesting article, I hadn’t considered intentionally making interface elements difficult to use. You have a lot of valid points but I don’t think your Word example works. The interface isn’t cluttered with every single menu option, that’s why there are tabs. If you don’t need to change page margins, don’t click on the page layout tab. Also, there’s an option to minimize the ribbon when you aren’t using it.

Brian

July 30th, 2010

Nice article. Brings out a couple of points that I’ve noticed in external systems but have been discouraged from using internally. Regarding Office 2007: Like many people, I found that everything seems to run together and disliked the fact that Microsoft didn’t provide a way to turn the ribbon off. I like the old toolbar model. I’ve watched a number of our trial users go through every group of options on the ribbon 3 or 4 times prior to finally finding the option they were looking for.

Martin

July 30th, 2010

Excellent article, especially the toilet paper analog (sorry, but I will just remember it forever) :)

Jacob Gube

July 30th, 2010

@Johan de Jong:
1) That’s a strange bug, however, the feature’s design still does illustrate the point I was trying to make.

2) That could be true, and I had originally intended to discuss that point in the article (opportunity costs). There’s a counter-argument to that: are your ideal customers people who can’t even take 10 seconds to evaluate the sign up page and read through it? It’s the same concept with Design Instruct’s download link — if you don’t even spend the time to read a tutorial, the comments, and discover the download link after finishing reading — will you really be someone who’s going to be converted into a long-time reader? The point of conversion, to me, isn’t the act of downloading something, but rather, in reading through the content and discovering later on that there is a download option for most tutorials. This would of course be different for sites that offer premium downloads — but our model is different.

@Bryan: A point about the Acrobat tab, I know it’s not a Microsoft feature. But it is still their interface that plugged that tab on there by default, instead of asking me if I wanted integration or not. I also know I can turn it off. But that’s not the point I was trying to make.

@Brian: I agree. That’s why I “downgraded” to Word 2003. I had to take that image off a machine that had 2007. It was a great experiment, but in my opinion, it failed. And I can only imagine how that would look like on small/low-resolution monitors (like 15-inch/17-inch LCDs)…

@Martin: Excellent. That was my intent — that way, if you forget to bookmark this page, you’ll remember the toilet paper analogy and can search it later. :)

Rod

July 30th, 2010

Interesting read, and something that interface designers deal with all of the time, whether consciously or not. The key is maintaing your UI on the right side of the line as to prevent user frustration and lack of interest.

Bryan McAnulty

July 30th, 2010

Great post Jacob. Everyone is so busy talking about making things easy to use, that we forget that certain things should purposely be made less accessible. I completely agree.

Pete

July 30th, 2010

Interesting read and quality explanations. Not sure I quite subscribe to the “difficult to use” phrasing. I’d tend to think of it more as a “do no harm” approach. Probably the same thing in the end.

Your examples, all of which were great, looked at this issue from a business/consumer perspective. There’s a significant amount of research out there surrounding Problem Based Learning and how this is accomplished in hypertext environments (aka websites/applications). In some cases fundamental UCD practices have been found to inhibit certain types of learning. One example would be “visited” links. In a hypertext environment where learning to formulate pathways and connect content to methodologies to practice (etc), displaying which links have been visited is limiting. For a learner repetition is key. So in this case when a learner feels they’ve “already been to this area of the site” it limits their ability to achieve repetition. Really skimming the surface here but there is a lot to be researched and learned in terms of learning and what role UCD/usability plays.

My blog is forthcoming but I’ll be researching this topic further over at my siteā€¦.

Vinh Khoa

July 30th, 2010

Interesting read, although I’m find the toilet paper anology a bit inappropriate. But I see what you’re trying to say there.

Thanks for sharing.

john

July 30th, 2010

I can think of a 4th reason, illustrated by two every-day live things:
1. In the NL most supermarkets have a designated path. You can not walk to the cash register directly.
2. Smart mail-order catalogs do not have an index.
Why? The owners want you to see everything, walk through the shop or browse through the catalog so you’ll see all the items they sell. Advertising.

sarfraz raza

July 31st, 2010

Excellent collection , really inspiring ideas about typography logo designs.

Robert

August 1st, 2010

hi jacob, nice well written article as always, very informative and well researched

but i have to disagree with you about the office 2007 counter-example
In my opinion microsoft as rarely as it is did a great job with ui in the office suit, in the odler versions you had to navigate through up to 4 menus to reach an action; with the tabbed bar you are there with on click. Esspecially for newbies i think it is way easier to navigate than in the old versions where you searched for 5 minutes to find a function and couldn’t remeber where it was the next time you needed it.
Besides that you forgot to mention another great feature the quick access bar next to the menu logo where you can put almost every command that exists in the program.
About the Acrobat Tab you just have to check the options for add-ins and disable it ^^, well word doesn’t ask but who would expect that ;D
So I like the navigation and were pretty quick familiar with it.

Keep up the great work on six revisions
Robert S.

Michael Tuck

August 1st, 2010

Nice article, Jacob. We’re tussling over the large and probably costly redesign for the History Commons; your article provides some excellent fodder for our decisions.

desinerd

August 2nd, 2010

I disagree about Microsoft Word example your explained above. Your argument would have been valid if Word launched on the Page Layout tab each time. Word always starts on the Home tab which only has the most commonly used buttons and menus (font, size, bold, italics, heading etc.)

Not only that, with the new ribbon interface, my Word documents are more semantic now. I use “Heading 1″ style when I create a level 1 heading (instead of increasing the font size and making it bold), just like I would use tag and not .heading class in HTML. I never used to do that with Word 2003. I have found so many new features which even though existed in 2003 but were unknown to be because of the multi-level menus.

David

August 5th, 2010

Really interesting article Jacob. Its good to understand the design decisions on websites like Basecamp, clearly at the top of their game with the design and usability. Articles like this help us all improve the way we go about designing interfaces.

Shane

August 6th, 2010

This was a great article Jacob!!! Very interesting and really got your points across with minimal content!!

Keep up the good work!!

Matthew Wehrly

August 23rd, 2010

Jacob, this was a great read! I think a lot of the points you have made are valid. Although I agree, the Microsoft Word 2007 ribbon could use more improvement, I think it was a step in the right direction. In many cases, the more the software can do, the muddier the UI gets. A lot of times, it is just the developer/designer trying to provide the user with all of the options in the fewest clicks. Whether that is a good thing or not, I don’t know. Thanks again for the article.

Kim Burgess

August 23rd, 2010

Nice article.

There was an additional reason that was omitted from the article – in some (limited) circumstances reducing the usability of a control can provide just enough cognitive overhead to make the interaction enjoyable. Take for example the ‘time wheels’ in Apple’s iOS. From a usability standpoint they are far from efficient, however, they add just enough interaction to make a trivial, boring task (setting a time/date/alarm) almost bearable.

Shauna

August 23rd, 2010

I actually kind of liked the Word counter-example. Even if Word starts on the Home ribbon (which someone pointed out), a lot of useful/important things are the same size. I’ve also found that people who are used to the older versions have a harder time transitioning, because they’re used to the old style. Users have gained various associations with the menus they had, and it tended to be difficult to unlearn that behavior. It didn’t help that while the ribbon is arguably an improvement, for reasons stated in previous comments, Microsoft kind of missed the mark, particularly with Word. Power Point is better, and from what I’ve seen and heard, Office 2010 is better still, so at least they’re learning from their mistakes.

Leave a Comment

Subscribe to the comments on this article.