Reducing User Interface Friction

May 17, 2007

Tantek elik recently wrote a great entry on cognitive load in user interface, comparing instant messaging and email:

To instant message (IM) someone, you merely:

  1. switch to your IM client
  2. double click their name
  3. type your message
  4. press return

To email someone, you have to:

  1. switch to your email client
  2. choose "New/Compose Message" from the interface
  3. type the recipient's name (autocomplete in most email programs typically helps to reduce this to 3-4 keystrokes)
  4. type tab or return to go to the next field (typically another to or cc field)
  5. type tab or return again to go to the subject field
  6. think up a subject (or ideally skip it)
  7. type a subject (or ideally skip it)
  8. type tab or return again to go to the message body field
  9. type in your message
  10. click send

Ideally, assuming no subject (which is atypical), and only typing 3 letters to autocomplete the recipients name, that's ten steps-- more than 3x the interface overhead of IM.

Jan Miksovsky covers similar ground when enumerating the hurdles at the entrance to a website:

  1. Figure out what the service does, and whether it meets your needs.
  2. Find the entry point for signing up.
  3. Pick a user ID.
  4. If the user ID isn't an email address, enter their email address.
  5. Pick a password.
  6. Enter the password again to confirm it.
  7. Pick the password several more times to comply with arbitrary security requirements.
  8. Write down the password somewhere before you forget the new variation of your usual password that finally made it past the arbitrary security requirements.
  9. Enter personal data used to configure the service to your needs. Comply with (or carefully turn down) requests for demographic data for marketing purposes. This may include opting out of requests to be added to email newsletters.
  10. Agree to terms of use and other legal agreements.
  11. Activate their account. The user might need to switch to a completely different application-- their email client-- and look for a message from the service.
  12. Download software. If the service entails client software or browser plug-ins, the user has an additional dozen hurdles to jump through: the browser's save dialog, progress dialog, "Are you sure you want to run this?" dialog, an elevate-to-administrator security dialog, and probably a firewall dialog-- not to mention the software's own overly long sequence of setup questions.

John Gruber offers another example comparing calendar entry overhead:

My typical usage [in iCal]:

  1. Double-click on the date of the event in month view.
  2. Type the event name.
  3. Tab past Location.
  4. Tab past "all-day" checkbox.
  5. Tab past Month.
  6. Tab past Day.
  7. Tab past Year.
  8. Enter the hour.
  9. Enter the minutes.
  10. Swap the AM/PM.

Compare and contrast to the event entry UI for the calendar feature in Backpack:

  1. Double-click on the date of the event in month view.
  2. Type the time and name of the event.

Whether you call it cognitive load, a sequence of hurdles, interface overhead, or just plain excise, it all adds up to the same thing: interface friction for the user. Sand in the gears of their mind. One more unnecessary thing they have to think about before using your application.

How many steps does it take to do something in your application? Have you counted? Have you thought about ways to reduce or eliminate those steps for your users? If not, you absolutely should be. Fire up your application and start counting as you click and type through the most common user scenarios. I think you'll be unpleasantly surprised.

Some interface friction is inevitable. But it is possible to reduce interface friction to an absolute minimum. One of the best "frictionless" sign-up user interfaces I've ever seen is at reddit. If you click any element that requires login, you're presented with an overlay <div> that allows you to sign up in a single step and also complete the action you originally clicked on, in one fell swoop:

Reddit login

Reduced interface friction goes a long way toward explaining the popularity of services like twitter and tumbr. What's the minimum amount of effort a user can expend to produce something? The answer could be a key competitive advantage.

That single input box on the Google homepage starts to look more and more like an optimal user experience. It might be unrealistic to reduce your application's UI to a single text box-- but you should continually strive to reduce the friction of your user interface.

Posted by Jeff Atwood
38 Comments

I find myself constantly oscillating between teaching good UI practices to programmers and just focusing on getting experts for the job. For someone who is reasonably intelligent and has a great deal of experience using software (that would pretty much cover all programmers), is designing a truly effective UI simply a matter of stopping and putting in the time and effort to think about it, or is it really a skill beyond most purely technical types?

Rex on May 18, 2007 2:09 AM

When I first began writing web interfaces for databases, I used a simple redirect to send the user back to a page that I dictated after the form's action page had worked its magic. After growing headaches accompanying growing applications, I switched to using window.open links that brought the forms up in their own window, so that the form could be submitted and the action page could then close the window and plop the user right back where he/she was before filling out the form and even reload that page if need be. Then I found AJAX, sweet, sweet AJAX, and all of my interface woes have ended.

Mattkins on May 18, 2007 2:22 AM

@ Rex :
Most programmers feel like everyone around knows at least enough to use a computer while most users don't. A "don't make me think" way of programming isn't and will never be easy to put in place.

You got to sit down and prepare in advance how you application is going to be used by your future users.

Monkios on May 18, 2007 2:24 AM

There is another side to cognitive friction (beside the number of steps/choices involved) that I'm aware of:

It has to do with how closely the tasks the user is required to perform correspond to the human brain's expectations.

I wrote a piece a while ago on the superb example Apple's iPhone sets for mobile phone makers in this regard: http://www.alhome.net/index.php/two-words-for-apple-thank-you/. Say I want to zoom in a picture, well I'd simple stretch it with my fingers. I think this is the most natural way you can go about achieving this task!

AL on May 18, 2007 2:57 AM

I am going through this very same problem at work right now. We have a page where customers can signup to receive a monthly safety tip newsletter. The Business Area wants to make it as simple as possible to signup (understandable) and Security wants us to send an "opt-in" email to the customer for verification before signing the customer up (understandable). Neither side wants to back-down because they both think they are right and here I am, the programmer, stuck in the middle. They are both right, but where do you draw the line between best practices and best usability?

Mike on May 18, 2007 2:58 AM

Mike-- look at Truemors.

http://www.truemors.com/

Sometimes you *have* to add friction to reduce the way anonymity can devalue a website.

Jeff Atwood on May 18, 2007 3:29 AM

Heh. Reminds me of something...

See, i wanted to listen to "Grey Street" by Dave Matthews Band. In order to do this, i would need to:
1) Launch a music player (one click, but i didn't have a mouse attached, so 5-10 keystrokes)
2) Search for the song (another five or so keystrokes)
3) Play the song (one keystroke)

In the end, this sounded like just entirely too much work, so i just turned on the radio, and spent the rest of the time thinking, not for the first time, how nice it'd be to have a proper command line on the taskbar...

...Now, if only i wasn't so disgustingly lazy...

Shog9 on May 18, 2007 3:38 AM

At the same time in the comparison between email and IM, look at the difference in what it takes to add a user to the list. IM applications are not something I have used frequently in about 5 years, but in most cases it took jumping through a couple of seemingly unnecessary hoops, where email applications just tend to add users to the list (sometimes even when you don't want them to).

I think the primary problem with email interfaces is that the simplest email applications have been around for a very long time and no one's thought to change much about the interface (except perhaps making a BCC harder to accomplish, because few people use it often enough to keep it in that line of fields).

Another issue is that users typically start their email either to read their messages or to write a message, and most developers have trouble finding a way to make users happy regardless of why they opened the application. It would probably make sense to give users a method for opening their email application in a compose mode that for just those situations in which they want to send an email (for instance, bringing the application up in the background with the Compose/New Message dialogue in the foreground as if they had gone through the steps of opening the application and hitting the New Message button).

IM applications have the annoying habit of defaulting to interrupting whatever you're doing by popping up a message whenever someone feels like sending you one, unless you trudge through some configuration dialogues to figure out how to suppress the interference.

Developers tend to see user interfaces as a series of required and optional inputs and outputs, and users often see only their own irritants when evaluating applications. If 90% of your users don't use 90% of your functionality, you still have to figure out how much of the 10% that 90% uses overlaps.

Vizeroth on May 18, 2007 3:46 AM

Here's a good site on interface design and one about Human Cognitive Abilities from Berkeley:

http://www.usernomics.com/user-interface-design.html

http://www2.sims.berkeley.edu/academics/courses/is213/s99/Lectures/Lecture8/sld001.htm

Simplified design has always been a good practice. Basically, the more your application can do in one key or button press the better. Of course there are always limitations to this whole thing based on requirements for data collection, et.al.

As far as email goes, I'm kinda partial to Thunderbird. Its recipient boxes are quite intuitive in that you don't have to type, just click and drag and click again. For more recipients, move down one box and repeat. However, this requires entries in your address book. That too is rather nice in that Thunderbird will automagically add any newly typed address. Then, it's subject (if desired) and body combined with send. Granted, it's not perfect, but it's leaning in the right direction.

What is truly needed to really bring this all to a simple interface design is Matrix-like connections. Then we are all networked and we don't need to use these software interfaces. Or, the Star Trek: Next Generation computer. ("Computer." "Yes, captain?" "Send my mother an email.")

There is the "new" technique of user acceptance. That's where you dummy up an interface and populate dummy data then give it to a set of users to see how they like it. Then, with ears open and mouth shut, you listen to them and take copious amounts of notes. Then go back to your computer and try again. Once you have another "prototype" you start back at giving it to the set of users then repeat until the users say, "I like it!"

This all depends on what the other departments (security, business, etc.) all say. But however it's presented, user acceptance should always include interface design. It's the user that's going to be using the application more than the developer probably will and that's the person who should drive your interface design, the user.

All the design courses/classes/seminars/websites in the world don't mean a thing unless the user, the one using the application, feels comfortable and possibly (hopefully) productive. Just like using a graphics program for graphics design, good UI design doesn't come easy, it takes practice.

John Baughman on May 18, 2007 4:51 AM

I'd love to be able to have my email subject show up as the first x number of characters of the email body for people already in my address book. That would save one step.

Yaacov on May 18, 2007 6:41 AM

If you skip a subject line on an email to me, it will almost guarantee a do-not-pass-go trip into the circular file. And more than 80% of the emails I send are replies to a previous email, building the dreaded reply-stack that is the best thing since continuous compilation for us highly multitasked people. With a reply the steps divolve to:
1) Select Email to reply to
2) Click Reply (or Reply All)
3) Start Typing
4) Click Send.

The value of email is it's permanance, and the value in IM is it's immediacy. If I have a right-now-quick-question then IM is usually a good way to get what I want. But if I think that I will need that info next week (or later) then it better be in an email or it will get lost forever. I just found an email in my files from 2002 (using the awesum X1 desktop search) that gave me the registration code for a required utility that is no longer supported. Back in the day I would have thought that I only needed that one time, but my email archives saved the day 5 years later.

But, I will agree with the reduction in distinct actions to accomplish a task. To paraphrase: Make it as simple as needed, but not any simpler. I use client side scripting to add logic to most of my apps to smooth the interface, especially as the user fills in data. Default (but allow changes) is the best way to speed the user to the final click, but still allow power users to change things. The best example would be a cart checkout that remembers your name, address and payment info, but lets you change any part of it.

Chubber on May 18, 2007 7:34 AM

Regarding IM, an important second step is missing: _searching_ for your friend in the list. This would be either scrolling list up and down or typing several first characters of their name. Double-click can be used only if your contact list has about 7 persons, so you can immediately see contact you need. Sometimes searching can be hard because some user changed his nickname or you just forgot it.
On the other hand, replying to IM is even simpler - just type and press Return.

Iggi on May 18, 2007 12:46 PM

Regarding IM, an important second step is missing: _searching_ for your friend in the list. This would be either scrolling list up and down or typing several first characters of their name. Double-click can be used only if your contact list has about 7 persons, so you can immediately see contact you need. Sometimes searching can be hard because some user changed his nickname or you just forgot it.
On the other hand, replying to IM is even simpler - just type and press Return.

Iggi on May 18, 2007 12:50 PM

About sending Emails: If you are using Outlook Express, you have an area with your Adressbook. The process would be:

1. switch to Outlook Express
2. double click receivers name
3. click into subject
4. type subject
5. press tab
6. type your message
7. press ctrl+return

If you don't want a subject you can spare 2 steps. The comparison is IM 4 steps, Email 5 steps.

Hinek on May 19, 2007 2:29 AM

Rex wrote:
"is designing a truly effective UI simply a matter of stopping and
putting in the time and effort to think about it, or is it really a
skill beyond most purely technical types?"

How about the purely artsy types write the programs, then.
I'm sure those will be *much* more useable.
:D

Scott Lanning on May 19, 2007 2:30 AM

Hey Jeff, Great Article.

Just letting you know you mispelled 'tumblr' as 'tumbr' at the end of the article. I love the service and want it to get the maximum attention possible. Feel free to delete this comment.

Henry on May 19, 2007 3:01 AM

I started using Quicksilver in place of the finder in OSX for exactly this reason - I want my interface to present me options that most frequently correspond to my actual work process. With QS, it becomes trivial to locate data from one source (address book), insert it into an application (email client), fill in data from another source (URL from the current web browser) and execute an action. It's down to about 6 keystrokes

michael lee on May 19, 2007 3:05 AM

JEFF CAN YOU MAKE AN ARTICLE ABOUT HOW PEOPLE SHOULD REDIRECT AFTER A POST ON THE WEB?

It's so annoying these days to see "Should you repost form data that expired from the cache" messages. Do non-programmer types understand them? And the implications? People can resubmit orders, and so forth. A really badly designed site could charge them twice.

Instead, the simple solution is redirecting after any kind of POST. That way if you refresh, everything is cool. Also on a related note, if you set session variables (e.g. indicating that you're logged in) and you go back, the pages should redisplay since the session has changed. So for example, you're not logged in, then you log in and you go back. You shouldn't be logged out as a result. You should instead see a page as you would have seen it if you had been logged in the first time.

Just a thought/request :)
Greg

GregMagarshak on May 19, 2007 4:20 AM

Personally, I have no problem opening a terminal and running /var/qmail/bin/qmail-inject to send an email. The fact that its all keyboard based and is conceptually straightforward makes it just as smooth as the shorter examples mentioned above.

HN on May 19, 2007 5:40 AM

"works good on smaller not-for-profit web sites, but on a lot of the stuff I work with, the more data we can gather from a user, the more money that user is worth to us."

Nuts to that. We hear that from our clients, but it's not true. All you wind up doing is annoying some users off and getting a lot of bad data from the users who do sign up. Better to get them to sign up in a simple way and then give them a reason to send you info about them.

Tom Clancy on May 19, 2007 12:55 PM

I've also found, from my own experience, that if you introduce new paradigms other than:

1) What people would naturally be used to
2) What people have learned to accept over the years (e.g. retyping their password, saying .com at the end of a domain)

or break people's expectations from 1) and 2), then many people will be frustrated, or scared. Much more than I thought. I consider myself to be a very aware user interface developer. In fact, designing human interfaces is one of my favorite parts of coding.

Once, I had made a program called Tabbed, which put tabs on the bottom of internet explorer windows and explorer windows, and enabled people to browse their files and websites in multiple tabs, just like with Firefox. I felt that was sorely needed by IE users at the time.

People liked the program. However, when it came time to register (it expired after 7 days), they were directed to the website I set up, tabbed.org, where they were guided through a minimalist and dead simple signup process. (Minimalist also allowed me to make the site quickly in php.)

Long story short, the idea was for them to create a username and password before paying for the program. This would enable them to use the program on ANY COMPUTER in ANY LIBRARY or at their company, after they had registered it (the program was extremely lightweight and required no installation on any windows platform, so it could be used in almost any environment -- that was the point).

Well, even though I had planned these benefits for those who register, people didn't get it. They also found it very weird that the program sent no confirmation email to them, and simply proclaimed THANK YOU FOR REGISTERING YOUR USERNAME AND PASSWORD on the site. Long story short, I got one guy ranting on download.com twice under different nicknames that the program is good "but beware! Cheap or cheat? It may cheat you of your money!" even though he had never registered it himself. Well after that almost no one downloaded the program (another 100 people over the next 2 months).

Long story short,

1) Don't break user expectations or introduce new paradigms without properly explaining to the users what's going on!

2) I'm writing a much better tabbed program now. Anyone want to help/join me? Email gregory@gregory.net :)

GregMagarshak on May 19, 2007 1:31 PM

I'm suprised no-one has mentioned gtalk and gmail yet. Like most good IM clients gtalk can log conversations. But it does it in an infinately more friendly way - it can place conversations in your inbox as though it were a brief flurry of email exchange (using gmails conversation threading concepts). That means that, should you need to find something you said to somebody at sometime using either email or IM you just have to search through your inbox to find it. It makes IM less transient.

[ICR] on May 19, 2007 1:33 PM

"That single input box on the Google homepage starts to look more and more like an optimal user experience. It might be unrealistic to reduce your application's UI to a single text box"

Didn't the above just describe the DOS prompt? The single text box is easy to use IF YOU KNOW HOW TO USE IT; when there are many options it's always better to have different boxes for different questions.

:-)

Rob Bohn on May 21, 2007 5:20 AM

Hmm.. the email example seems deliberately contrived to make the point.
Especially the use of the keyboard rather than the mouse (in my experience most novice users will use the mouse for almost everything).

Here is how I send email via my chosen web-based email:

1) Right-click on tray notifier and choose "Compose a new email"
2) double click recipient's name on list
3) click in body area
4) type message.
5) press Send

(That is via FastMail.fm: http://www.fastmail.fm/mail/?STKI=50734 but I imagine it is roughly the same with most modern web-based email).

Graham Stewart on May 21, 2007 10:13 AM

I really like geni here.
www.geni.com
nothing to type in. just start. afterwards you can register what you did by entering your mail.

Christoph Richter on May 22, 2007 7:06 AM

The IM and email comparison is not on an equal basis. The number of steps for each relates (roughly) to the purpose each addresses. IM is quick, instantaneous and thus should involve few steps; the task is very straightforward. Email is a more in-depth task, often has more permanence than IM. But there are times when we use email when IM would be more efficient.

I really like Gmail because it has less friction than, say, Outlook. I also love Google Calendar's simple item entry. One click, enter appointment and time (haircut 12pm), and the calendar will automatically interpret the time into an actual appointment time, same as Backpack. Nice!

Andrew on May 23, 2007 5:04 AM

That's why I hate forms that have a dozen dropdowns with Yes/No type answers instead of radio buttons. It may not seem like a lot (two clicks for a dropdown vs one for a radio button) but that's 12 extra clicks when you add it up!

slapout on May 23, 2007 12:29 PM

I'd prefer a more keyboard* oriented interface for any task that requires the use of keyboard*. *single method interface

Email or IM task should be entirely keyboard driven since most of the input will be characters, not mouse input. Alternative to keyboard should be voice/pen. Obviously when using voice the entire task should be voice based with no pen/mouse/keyboard.

This I think is the biggest failing of Windows UI since everything you do requires you to switch between mouse and keyboard constantly.

To accommodate this without entirely rewriting Windows Microsoft could start from the Start key such that: Press Start key - list of icons are shown: email, note, play, etc - intellisense style typing of the command - type e, press TAB - command "email" matched, depending on the program, either launch the app or expand syntax window that allows you to continue like: e(INTELLISENSE-email)s(INTELLISENSE-send)TABj(INTELLISENSE-jeff@bla.bla)TABsubjectTAB and so on.

So sort of Intellisense 2nd generation and now behind the Start key. The current behaviour where it start searching the index for everything including mails and so on at the moment you press the first key is similar to VB background compilation - whole lot of cycles and disk IO and you get 99.9% noise in the results.

Expanding this same interface to voice or pen input would be really easy too so you'd have a constant single interface and simple API to build it on.

droid on May 24, 2007 5:55 AM

Tantek's example is silly. He's smart, but here is trying to make a point, but he loses credibility. He enumerated all clicks and keys for one example, but not for the other...

Mike on June 4, 2007 3:30 AM

Another example of frictionless website is DropBoks. It is the easiest and the simplest files backup application I have ever seen.
http://www.dropboks.com/

Reazal on June 6, 2007 4:03 AM

In KDE 4, you should be able to just go to the Communicate menu, then pick the person's name, then a menu pops up asking "Send this person an email" or "IM this person" or something. Much more streamlined.

Mike on June 7, 2007 3:51 AM

I know..I completely agree with you that a good design goes a long way while a bad UI can really take your happiness away.

After reading your piece i checked out Reddit and...what a relief!!!!

Arjita on July 19, 2007 1:34 PM

I know..I completely agree with you that a good design goes a long way while a bad UI can really take your happiness away.

After reading your piece i checked out Reddit and...what a relief!!!!

Arjita on July 19, 2007 1:35 PM

Great article.

You security word for entering this comment shows a good deal about friction. The maker of this page has been forced to add friction to the comment entering process for security reasons, but has minimized this friction by making the security word easily repeatable and legible. Gmail signup does the same.

I hate those pages where the security words are hardly recoqnisable by humans as well. If a human cannot enter it; who is supposed to sign up?

Thomas on September 17, 2007 6:44 AM

It really boils down to the way you're used to use your computer. I send an e-mail this way (Microsoft Outlook 2007, but is the same for any other e-mail client I know of):

1. window-key+R type mailto: enter - this is all too fast not to be considered just 1 step...
2. 2-3 characters for name
3. then quick tab thrice (I have the bcc field always visible, and it's really just one fast step)
4. 1-3 words in the subject (do you really have to think about it?...)
5. quick tab to body + write whatever you want + quick CTRL+ENTER - gone!

To reply:
1. I'm already reading the e-mail I want to reply to (don't leave that for later!) so the first step is just to hit CTRL+R
2. type your answer (simplified signature for replies and forwards is already there) and hit CTRL+ENTER - it's done!

If it's something like Hi, just to remind you to send me that pic you took of us last weekend. Cheers! (signature is already there), the whole process takes really just 10 seconds...

Plus, I find IM so distracting I make a huge effort to keep that list small and turn down many people. If you really want to get things done at work, you can't use it too much (same with Twitter).

Of course there are those times (5-6 a day, at least), when IM becomes invaluable, but e-mail is still a VERY valuable and pratical tool.


Cheers!

Fernando Martins on January 15, 2009 7:29 AM

Consider also the context for the use of email and IM and event the phone for business communications rather than personal communications.

"New" e-Mail's are often replies to old subjects and the recipient has to determine if the subject line is relevant to the current message. And people forget that they actually have to explain and include details rather or else a flurry of small, inefficient messages go back and forth... which leads to IM.

IM is probably the worst "tool" for business use. Totally distracting mini-messages that may or may not include an instant response from the other end; thus sucking your time instead of allowing you to focus on what you really need to do (in most of our cases this is to program!).

A few years ago I was often reminded by a former colleague that 20 odd years ago you would have your secretary take your draft message and formally type it out before you reviewed it and it was then mailed. A response wasn't expected for at least a week. It sounds inefficient but at least people would take the time to plan and think about what is being said. Something we are all guilty of being too impatient for these days.

Welcome to the age of instant communications. I'm still waiting on the content to catch up ;)

Chris Adamson on February 6, 2010 10:08 PM

Regarding Reddits simple log in screen. This works good on smaller not-for-profit web sites, but on a lot of the stuff I work with, the more data we can gather from a user, the more money that user is worth to us.

Then there is also the concept of combatting fraud. Or spam, take Captcha's....an annoying step, but greatly effective.

Something I do in my day job is optimization testing, checking the conversion rates of different pages compared to other content. It would be a very interesting study to have a complex sign up page, and a very simple one, and A/B test them at an even 50% split of visitors.

My guess is that the actual conversation rate would not be very different, if the quality of the site itself was up to par.

I've been reading this blog for a while not Jeff. Good job :)

Jon H on February 6, 2010 10:08 PM

That’s something to be proud of That’s a life you can hang your hat on That’s a chin held high as the tears fall down A gut sucked in, a chest stuck out Like a small

town flag a-flyin’ Or a newborn baby cryin’ In the arms of the woman that you love That’s something to be proud of That’s something to be proud of That’s a life you can

hang your hat on You don’t need to make a million Just be thankful to be workin’ If you’re doing what you’re able And putting food there on the table And providing for

the family that you love That’s something to be proud of”{Something to be proud of} Imagine me and you I do I think about you day and night It’s only right To think

about the girl you love And hold her tight So happy together
http://www.airjordan-sale.com

cmm1224 on July 22, 2010 12:50 AM

The comments to this entry are closed.