Just Enough Feedback
In a fascinating article about how retailers study buying habits a few years ago, the New York Times described why the original Febreze odor neutralizer didn’t sell:
The reason Febreze wasn’t selling […] was that people couldn’t detect most of the bad smells in their lives. If you live with nine cats, you become desensitized to their scents. If you smoke cigarettes, eventually you don’t smell smoke anymore. Even the strongest odors fade with constant exposure.
There were no indicators that the product was needed or was working. There was no trigger to use it, and no feeling of success when it did.
There was insufficient feedback to the user.
So they added perceptible feedback — more perfume — which made using the product a rewarding part of the user’s normal activity.
Sales exploded. Mission accomplished.
No feedback is bad. Therefore, more is better. Right?
You’ve probably seen examples most of these:
- An icon that moves to reveal hidden content
- A button that presses itself
- Page turn effects in an ebook reader
- Hyperactive animated menus
- Pictures and text that fly into place as you scroll the page
- Galleries that flex and flow around your mouse
- The classic Skip Intro
- A loading icon just for a web form
- Sparkles from your mouse cursor
When you click through those links, you’ll mostly find a good idea gone a bit too far.
Perhaps we should look to other, more mature user interfaces that have been evolving for at least a decade longer than the web.
Windows: tons of feedback
Microsoft Windows, still the undisputed king of desktop computing, makes sure you know what’s up. Every time you plug in a mouse or a keyboard, it chimes. And when you unplug, it chimes. Turn the PC on, a Windows orchestra plays you a welcoming tune. Turn the PC off, Windows plays some piano and a morose violin. Open a folder in Windows Explorer, it makes a click sound (in case your mouse wasn’t clicky enough?). Open a folder, click sound. Click the back button, click sound.
Windows also provides plenty of on-screen feedback as well. When it finds some WiFi, it puts up a notification bubble. If it can’t find some WiFi, it puts up a notification bubble.
Device notifications are some of the worst. I recently installed a driver for a USB-OBDII reader, and Windows gave me a whole series notification bubbles in the corner of the screen: Device detected, driver needed, driver found, driver installed, new device detected with new driver… interspersed with a couple of chatty Wizards. Even just plugging in a flash card reader gives me a bunch of bubbles:
Windows 8, to be fair, is much better about this. I plugged in a USB DVD-writer made by Samsung, and it quietly showed an icon in the task bar, which then quietly went away. Done.
It still makes cheerful and mournful chimes when I plug/unplug that drive, though. Or keyboard, or anything else.
Windows generally wants to give me way, way more information than I want or need. But its heart is in the right place.
Mac: barely any feedback
At the other end of the spectrum, Macs for the most part just quietly do stuff. When I plug in a keyboard, there’s no notification bubble or sound.
Ditto keyboards, scanners, flash card readers, hard drives, and that Samsung DVD-R drive I mentioned earlier.
The Mac supplies feedback sometimes. For bluetooth keyboards and mice, there is an on-screen notification when a device is connected, lost, or turned off/on:
(The same style is used for screen brightness and keyboard backlighting. Those shouldn’t need feedback at all: you see the effect immediately. I have no idea what the thinking there was.)
That’s about it, though. Macs join and leave WiFi networks with no fanfare, quietly mount hard drives and USB sticks on the desktop, and so forth. Macs aren’t very chatty. They mostly try to stay out of your way. But sometimes this makes it hard to figure out why iPhoto can’t see your digital camera.
What needs feedback?
We saw in the examples earlier that it’s quite possible to overload a user with feedback. A good UI designer will be thoughtful about what needs feedback, and when.
Most website feedback can be grouped into three categories:
- Drawing Attention
Acknowledgement and Waiting indicators confirm that the user’s action has been acknowledge and implies a timeframe for completion. Or as the Nielsen/Norman Group puts it, Progress Indicators Make a Slow System Less Insufferable.
Usability studies have found that we tend to not notice new or changed content on-screen. Drawing attention to these changes is actively helpful to the user.
But beyond these cases, “feedback” is not useful and can be distracting. There’s a difference between animations that surprise and delight, and animations that just get in the way. And there is a difference between feedback that tells you the website is listening to you, and feedback that just slows down the user.
Speaking of slow: Websites are slow. Really slow. Really, really slow.
The average internet connection speed in the US over the past two decades has gone from 1,800 bytes per second to 2.3 million bytes per second — literally more than 1,000 times faster! And yet, page loads are not getting any better.
This year, the average size of the top 1000 websites’ pages hit 1.96 MB. At best we can expect those pages to take three seconds to load. Real world research shows that real world results are even worse still: In 2013, top retail websites took an average of 7 seconds to load. And that’s 15% worse than 2011.
Effectively, we’ve been teaching people that web sites are slow and unresponsive for over twenty years.
Feedback mechanisms such as hover effects and loading bars were created to paper over this unpleasantness. As it appears we won’t be giving them up anytime soon, we might as well do them right.
Time threshold for feedback
Based on usability studies, if an action takes more than a tenth of a second, you’ll notice it. We can maintain our sense of flow for about a second, and actions taking that long are tolerable. Our attention wanders quickly, though: 10 seconds is the extreme limit of patience.
From these bounds we can develop a rule of thumb for websites:
- Anything taking 250ms or more needs feedback. (Since users are accustomed to a slow web, we can be a little more liberal than a tenth of a second.)
- Actions longer than one second need a progress indicator to assure the user something is happening
- Actions longer than 10 seconds will probably lose you users.
(Human working memory maxes out at 20 seconds. If an action takes that long, your interface had better be prepared to remind the user what they were doing and guide them back into their workflow.)
Humans really hate to wait… but if you give them something to do, it’s much more tolerable. Or, “Occupied time feels shorter than unoccupied time,” as David Maister put it.
During long tasks, use interactive or active feedback to keep the user engaged, or at least confident that their waiting is not in vain.
Techniques range from pure distraction (“Look, a kitten!”) to trivial side tasks (“Did you know?”) to careful manipulation of our perception of time (variable speed progress bar).
Good feedback is just barely enough feedback
Feedback effects, such as hover states, expanding menus, animated transitions, table highlighting, and so forth, should happen without delay, but take no longer than the task itself requires. Keep the user engaged, but don’t delay them unnecessarily.
There is only one case where however much you do it’s never enough:
- Charles Duhigg, How Companies Learn Your Secrets, New York Times, Feb. 16, 2012 ↩
- image credit: Apple, Leave The Skeuomorphism Alone ↩
- With apologies to Hyperbole and a Half. ↩
- Change Blindness: Why People Don’t See What Designers Expect Them To See, Kathryn Whitenton, Nielsen/Norman Group, 2015 ↩
- The fastest and slowest broadband speeds in America, Reid Wilson, Washington Post, January 9, 2014.] ↩
- Actually 1.96 MB, and 125 requests. Most browsers will only establish up to four connections per server, meaning they’re trying to stuff over 30 requests into each of four pipes, with a typical 50–150ms latency. Assuming an average 75ms latency, we’re looking at 2.25 seconds just in request overhead, plus 0.8 seconds to transfer data, then at best we can expect that average web page to take three seconds to load. Also, sorry for the recursive footnotes. ↩
- Top Retail Websites Not Getting Faster: Average Web Page Load Time Is 7.25 Seconds ↩
- It takes 6 seconds on average for a web page to load: What’s taking so long? ↩
- At iMarc we very hard to ensure our pages are on-screen within a second or two. Performant websites are out there, but they’re all too rare. ↩
- Further reading: Response Times, an excerpt from Jakob Nielsen’s seminal 1993 book Usability Engineering. ↩
- Nielsen again provides the research: Website Response Times ↩
- Unless you’re creating interfaces for medical equipment or vehicles, where lives are at stake. If you use websites for those applications, I question your sanity. ↩
- Also from Nielsen: Short-Term Memory and Web Usability ↩
- Maister had a lot of other great observations on waiting; his article The Psychology of Waiting Lines is well worth your time. ↩
- Harrison, C., Amento, B., Kuznetsov, S., and Bell, R. 2007. Rethinking the Progress Bar. In Proceedings of the 20th Annual ACM Symposium on User interface Software and Technology (Newport, Rhode Island, USA, October 07–10, 2007). UIST ’07. ACM, New York, NY. 115–118. ↩
- I may be somewhat biased. ↩