Solving the Bottom Bar Problem with Fitt’s Law

by 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).

Solving the Bottom Bar Problem with Fitt’s LawYouTube bottom bar

Solving the Bottom Bar Problem with Fitt’s Law

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.]


Solving the Bottom Bar Problem with Fitt’s Law Solving the Bottom Bar Problem with Fitt’s Law

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

6 Responses to “Solving the Bottom Bar Problem with Fitt’s Law”

  1. Mathew Sanders

    Aug 29th, 2010

    There are a couple of comments I want to add here.

    The first is that screen edges represent a very special case of Fitt’s law. As you mention, this is because the pointer remains at the edge regardless of how much you move it (‘infinite’ height/width). But this special case is very tightly linked to use of a pointing device like a mouse, and doesn’t apply to direct pointing/touch interactions.

    In addition, like you mention, infinite height only happens when you’re at the edge of the screen (as opposed to just the edge of the window). Because by default every operating system I’m aware of places the dock/taskbar at the bottom of the screen then for the majority of people this special case of Fitt’s law will not apply.

    However the general rule of Fitt’s law will still apply – that things that are bigger or closer will be easier to select.

    I think it’s great you’re teaching people about Fitt’s law, but I think your suggested changes to the bottom bar oppose the principle of Fitt’s law.

    Secondly, I don’t agree about the removal of thumbnails. I believe that compared to text, a thumbnail would be much more effective in giving people an overview of what’s coming up (if you’re interested Google “gist image perception”).

    Finally, what interests me is that I’m a fairly regular visitor to YouTube (probably a couple of times a day) who creates playlists, but I’ve never seen this feature before. I’m not very familiar with, but from what I’ve seen I think the biggest usability barrier with this feature is that people don’t know how to activate it (and then deactivate it).

    • anthony

      Aug 29th, 2010

      Hi Mathew.
      Thanks for the comments. I agree with you that in this case Fitt’s law will only apply to the mouse and not touchscreen interactions. Most operating system docks are at the bottom, but they are all customizable, so not all users will have their docks at the bottom. Some will have them to the left or right, or some might choose to hide them. Nevertheless, that does not mean having targets along the edges is a bad thing. In fact, it is MUCH BETTER to have it to the edge then a few pixels off the edge because that creates extra space that require homing movements of higher accuracy to land exactly on the target. The edges are more clear and distinct, and thus it will still help users who don’t browse at max size or have bottom docks.

      I think the thumbnails do provide value as well. But in a tight space like this it’s best not to use the thumbnails because for the thumbnails to be effective they have to be a certain size (larger), and for the bottom bar to be effective it has to be a certain size (smaller) to be effective. If you want to check out the YouTube playlist the link is at the TOP of the article.

      • TuringTest

        Sep 3rd, 2010

        I think you should clarify that Fitt’s law does apply in every case, even when the control doesn’t stay at the screen’s edge.

        Fitt’s law works for every point of the screen, not just the edges. It predicts how long it will take pointing to a target given the target size and the distance from the origin.

        It’s incorrect to say that ” Fitt’s law will only apply to the mouse and not touch screen interactions”. Of course Fitt’s law applies to touch interactions! It will predict a different target time for them, because they don’t benefit from the “infinitely high controls” effect.

  2. Gekkor McFadden

    Apr 11th, 2011

    Fitts law is like most laws – an encapsulation of fashionable dogma in the form of a rule.

    Rules are to be broken.

    • Farry Jakir

      May 6th, 2012

      Well, no they’re not. I see where you’re coming from, but you’re really wrong. Choosing to view these concepts as fashionable dogma is likely to undermine that which they bring and halt the progress of UX towards the ‘ultimate interface’

      • mikey

        Nov 20th, 2012

        I am interested in the concept of ‘ultimate interface’ I think it is an impossibility because world itself is constantly changing.

        The only interface that approaches ultimate and has stood the test of time (in my opinion) is the human female reproduction organ.

Leave a Comment