Do top and bottom Web page toolbars add Clutter?

In the past few years toolbars have started to appear on popular social networking websites like Facebook; product review sites like CNET; news sites like Reuters and the Huffington Post and social tool services like HootSuite. Today, it seems more Web page-level toolbars are inhabiting our screens. The result: less control of the web page, the session or the redirect experience...and a more cluttered web browsing session.

The new generation of dynamic toolbars sneak past several classic usability principles (visibility of system status; user control and freedom) and the blooper of cluttering screen layout. Bear these in mind if you consider using a toolbar or toolbar service.

Toolbar you're the devil

Let's back up from Web page-level toolbars and look at the toolbar user experience historically. Toolbars suck. This really becomes apparent when you go into user's homes on a field study and see Firefox or IE browsers loaded down with 2-7 toolbars. Here's what that looks like:

(I have actually seen user computers that look like this- just jaw dropping!)

Any toolbar on a page or Social Media service has to live with this reality or user environment constraint: 

Browsers are serving up unwilling toolbars--on top of your toolbar!

Hint: Users don't naturally manage toolbars but normally take what's given to them- now a commonly bundled "gift" from downloading common software like AIM, Open Office, Java and more.

Why users don't do this is the subject of Configuration Hell. I don't know how many users I have said "You don't have to have it like that if you don't want..." (I wanted to change it selfishly just so I could see the full screen for evaluation purposes!)

Conclusion: Toolbars make for poor user experience.

5 toolbar "Worst Practices" and hints at what works (if you are going the toolbar route)

1. Don't ever put navigation stuff on the bottom of the screen.

The only successful exception I have seen to this rule in interface design is the Mac OS. In the early Dot Com period I noticed designers (using Macs) placing main navigation as a bottom of the page toolbar. That didn't last long for a reason: it's the area of the screen where people do not look!

Reuters uses a bottom toolbar for latest topics, log-in and save items...but now there is too much going on and it is difficult to notice. CBS News on the other hand sticks to a simple and small social toolbar for Facebook and Twitter linking. Less is more with toolbars.

2. Don't surprise users and "force" them to loose control.

One of the ways we encounter toolbars is through a re-direct or link from a social service like Twitter to a web page. Some of you, like many users in a recent usability study I conducted at Experience Dynamics, have probably not noticed the dozens of web pages with toolbars carefully trimming the top or bottom of a page. If you have noticed your first reaction was probably to close it, or remove it, or inspect it. This moves you from being in control to seeking to re-gain control of the layout.

Worse on sites you trust and visit intentionally, toolbars just seem to add more things to deal with- more to look at, more to manage. Here's a new top toolbar on UX Matters, a popular usability resource site. It suddenly appears only when you scroll and stays there until you reach the top again. What do you think? Makes me feel like something strange just happened. The New York Times top tool bar seems better integrated visually and behaviorally into the page. 

Hootsuite, a proponent of the new wave of toolbars (the toolbar is a viral tool itself), has redesigned it several times- the latest offers a quick way to close the toolbar. Many more social toolbars are following suit.

I wonder if closing the toolbar is one of the main tasks you promote, does that not tell you it shouldn't be there in the first place?

Enough can not be said about giving users control of their experience (user control). Toolbar user experience reminds us of that.

"As a rule of thumb, users want to know: what is happening, why it is happening and what effect it has on their actions and the systems actions. They want to have the option to cancel and the option to change what is happening. They want to have the power to control their experience of the product". -Frank Spillers

3. Don't put useful features that enhance site user experience in the toolbar.

If you have decided to use a toolbar, keep its purpose very shallow: do not use it as a place to stick site features or tools that normally would go on the rest of the page.

For example, CNET recently moved their product wish list (My Lists) and recently viewed products to a bottom toolbar. Sears.com uses a left toolbar for cart, profile, lists and assistance but it is lost in the left side as it competes with more relevant product category navigation.

Instead, important site features should stay where they are (e.g. cart or help top left) or be made available on the page as page level tools. Persistent toolbars that sub-plant site features, while a helpful idea, can be lost in the fog of a page adding unnecessary clutter. 

4. Don't use a toolbar just for stats or frivolous information.

Many sites seem to think they need a toolbar. The Jerusalem Post uses their toolbar gratuitously to share the page, translate, track # of users, announce new features and stories. The Huffington Post on the other hand uses the bottom toolbar to promote its Facebook strategy solely. Again, less is more with a toolbar strategy.

5. Don't do it just because you see it being done.

It's tempting to feel like something just became normal on the Web, because you are seeing it everywhere. There are serious potential side effects from Borrowing Design Ideas from Others (see my earlier post). It's interesting to note that Facebook's new Social Graph strategy launched this past Spring, has an interesting bottom toolbar (social toolbar plug in) that offers integration to Facebook- chat; friends; Like button etc. Of all the "social plug-ins" the Like and Friend Recommendations seem to be the most heavily adopted by sites on the Internet, NOT the toolbar. I think I have seen the Facebook toolbar plug-in on only one site so far.

Don't get me wrong, new innovations are welcome- if you read this blog you'll know I'm not pessimistic about new advances unlike some usability guru critics you may also follow. The golden rule is to do usability testing. If it's new and you're concerned enough by it, put it in front of your users for feedback.

In the case of toolbars, I wouldn't advise wasting your time usability testing them. I think I've found one or two out of twenty that don't get in my way and that's not high enough to be a fan.

Which makes me wonder, is there a toolbar for managing or removing toolbars? ;-)

Best wishes,
Frank Spillers, MS

Comments

[Frank Spillers]

Mtidwell- I don't think so, I went to the site to check it out- and didn't even notice it! (and that was the purpose of the visit). It took me lots of looking around- i was so compelled by the great design of the top nav and main marquee area.

I wouldn't recommend it- for the reasons mentioned in this post. Good luck!

[Mtidwell]

I have found one very nice way of breaking rule #1 and yet still maintain visibility. You can find it at http://sandals.com - the toolbar is always visible, even though it is at the bottom of the page... I plan on using this for some of my hotel clients

[Paul]

Mentioning usability testing, check www.userfeel.com, seems interesting.