In UI Design, the “Obvious” Solution isn’t Necessarily the Best Solution

One of the nice things about the Mac OS X operating system is the attention and the little touches that may seem illogical at first but then make complete sense when you think about them.

One of these things is the scrollbar arrows. OS X scrollbars have two arrow buttons, up and down, just like Windows – but the difference is that they’re both located at the bottom. The up and down arrows are stuck together at the bottom of the scrollbar, like this:

<img class=”framed” title=”OS X scrollbars” src=”/images/0811/scrollbars.png” alt="” width=”93” height=”110” />

Why is it so? Isn’t it more logical to put the up arrow at the top, and down arrow at the bottom? Sure, that would seem to be the most straightforward solution – however, think about how you use those controls.

You move the mouse to the button and click on it to move the scrollbar in the direction of the arrow. What if you overrun a little? You’d need to move to the other button and click on that. Considering that you’re going to have to move your mouse to at least one arrow in the first place, Apple conveniently placed them together, so there is only one location to move the mouse to. If you click one button too many times, you have to move the cursor just a few pixels to get to the other button.

Once the user learns where both the scroll buttons are located, they’ll enjoy faster access to both of them. I think it’s a great example of an interface element where the most “obvious” approach isn’t necessarily the best one when you consider how that element is used.