by anthony on 08/27/10 at 5:14 pm
A growing trend in web design is the bottom bar. YouTube’s playlist bar is a good example. In my previous article, I identified the problems with their bottom bar, and one of the biggest ones is that it’s too complex in its display and function. A bottom bar should be simple, compact and utility focused. Users weren’t happy with the playlist bar because it intruded on their space and content. It focused too much on visual appeal when instead it should’ve focused on usefulness and convenience. Luckily, thanks to Fitt’s law, there is a better way to design the bottom bar to create a better user experience.
Fitt’s law basically states that the time required to move to a target is the function of the target size and distance to the target. Since the bottom bar lives on the edge of the web page it makes it easy and efficient to acquire because the pointer remains at the screen edge regardless of how much further the mouse moves. In other words, you could fling your mouse pointer to the bottom of the screen as fast as you can and you would still hit the target because the edges of the screen have infinite height and width. The result is fewer errors, faster acquisition of the target and a significant reduction in homing movements.
However, there are a few exceptions when Fitt’s law won’t apply no matter how you design the bar. If the user has their operating system dock at the bottom or if they don’t maximize their browser at 100% then Fitt’s law won’t apply. Nevertheless, there are users who don’t have docks at the bottom and do browse at 100% (such as myself), and for those users Fitt’s law would apply.
YouTube’s bar fails to make use of Fitt’s law by choosing to use the collapse/uncollapse functionality. When the bar is uncollpased the items in the playlist are no longer flush to the edge. Also, their decision to include the thumbnails makes the bar appear larger than needed. The item titles are far more important than the thumbnails because users often scan the titles to see what item they’re on and what item will play next. By omitting the collapse and thumbnail features you are able to apply Fitt’s law to the bottom bar. I wireframed my version of the bottom bar below (click image to enlarge).
My bottom bar that uses Fitt’s law
My version is simple, intuitive and utility focused, which is all that a bottom bar needs to be effective. The arrows on the left are pagination arrows that scroll each row of items. This means no more awkward scrolling with the horizontal bar. Also, the items are flush to the edge making them fast and easy to click on. You no longer have to uncollapse the bar to get to your playlist items. The red highlighting clearly indicates which item you’re on and what items are next. You still have the autoplay and shuffle options to the right. The icons speak for themselves, but for users who aren’t familiar with what they mean a tooltip balloon will popup when users mouseover the icons. This is consistent with YouTube’s user interface because they use the same technique with their video features. This bar makes use of Fitt’s law. The result is a bar that is easy to use and gets the job done. It does not intrude over user content or space. It does not move up and down to confuse the user. It isn’t bloated with complicated features users don’t need. Instead, it’s simple and to the point making it a good user experience.
The bottom bar gives designers the great opportunity to use Fitt’s law on the web. There are practically no other good ways to apply Fitt’s law to the browser edges than with the bottom bar. At the top edge of the browser you have the toolbar, to the right edge you have the scrollbar, and to the left and right edges you have margins. Only the bottom is where there’s an opportunity to apply Fitt’s law. It’s a shame nobody is taking advantage of the bottom edge correctly to get an edge over the competition.
[Update: Reuters uses a bottom bar for personalized content when you view an article. It follows Fitt's law and is very easy and efficient to use.]