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:
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.
Of course in System Preferences this can be changed, though I wonder what amount of people even know about that.
Hm. Makes sense to me. but… I’ve always wondered what’s so good about having that window resize thing only in the bottom right corner. I’ll admit that I do most of my work on a pc, but use a mac all the time (through synergy - too cool!)… I find being able to resize a window on any side is much better.
Chris: Great point. I think the window resize thing is a victory of style over substance. It’s “cleaner” to drop the borders and just have the window edges emphasized with a shadow. It’s “cleaner” to have a nice little “resize corner”. It’s a very difficult call to make because at least for me, the windows do look a lot nicer without the bulky borders — but of course there is a sacrifice to make. They chose the simpler appearance over easier function. I personally don’t have a problem with that, but I can see how it can be annoying to many.
Well.. having said that, they don’t really have to add visual “borders” around the edges — they can just use the edge to resize. I think the best thing for Apple would be to keep the current mode as default if they want to, but at least have an option to enable all edge resizing because it’s a very common complaint.
When UI elements have direct hardware counterparts, it’s even better!
Example 1: The Mouse Wheel makes the scrollbar buttons secondary. Because of the Mouse Wheel, all controls with a scrollbar has become more usable.
Example 2: Touch screens (iPhone 3G or Microsoft Surface) eliminates the need to use the mouse cursor.
The real question is… who the hell doesn’t have a mouse with a scroll wheel still?
I would argue that the windows system of arrows on the top and bottom of the scroll bar is superior. Not only is it more intuitive, It is virtually impossible to miss the arrow button and scroll the page in the wrong direction.
I think the mac system is more of an outdated design element that stems from their long time refusal to adopt the scroll wheel. As thenonhacker said, the mouse wheel makes scroll arrows virtually useless. The only useful functionality of the scroll bar at this point, is speedy access to a different section of the page through the click-and-drag scrolling method.
Dmitry, I thought it was because if you only allow resizing in one spot you can then allow the window to be dragged from the window border, which is useful. (Have you ever put the top of a window outside the screen edge on windows? It can be hard to get it back…)
As a Windows user mostly and a Mac user sometimes (definately not a fanboy)… I get caught on this with windows all the time. Photoshop, large image…
Scroll wheel drives me nuts.
The two arrows in the bottom corner are actually the application of Fitts’ Law, a scientifically measurable benefit to the user. Nice post Dmitry. Mac have a number of these well thought out usability improvements… If I recall Jared Spool discusses some in one of his spoolcasts.
Nice post!
A compromise between the OSX and the Windows approach is implemented in KDE on Linux. There is a top arrow at the to of the scrollbar and both arrows on the bottom. I think it’s a good idea, because every user feels alright while working with the GUI.
Yah - there are a lot of great features in OSX. Admittedly, though, a tweak I would want is one at the top and the bottom simply because I am lazy and there are times when my mouse is near the top.
There might be a tweak in system preferences, but unfortunately I won’t be able to look until I get home tonight.
Totally agree! Apple have really thougt this one through.
You always spot the right thing. Great article!
Certain things can be taken for granted, and I think it is great that you take the time to point them out.
@Jonathan it must bother you that Windows becomes more and more like Mac OS X with each release. :)
TinkerTool (free) lets you put both arrows at the bottom and at the top.
Much the best solution.
[...] Usability Post: In UI Design, the “Obvious” Solution isn’t Necessarily the Best Solution [...]
Although I’m normally in favour with the authors, this one doesn’t really make sense to me.
Sure, having all controls in 1 place is convenient, but why on earth would someone look for the ‘up’ arrow at the bottom? Of course, after a while people figure this out, but it’s still weird if people try to figure this out for the first time (which shouldn’t be necessary from a usability point of view).
@ Daniel: TinkerTool offers exactly the solution I was thinking about, although that clutters your valueable screen real estate.
Furthermore, having 2 identical controls on different locations can easily trigger the expectation that each has its own function.
Inge: I think this comes down to this — you only have to figure out the tool once, yet you may have to use it for years. The benefit of cutting out on mouse cursor movements outweighs the initial learning curve because it will save a lot more time as it accumulates.
[...] Usability Post » In UI Design, the “Obvious” Solution isn’t Necessarily the Best Solution "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. " (tags: interface ui design usability osx apple) [...]
The problem in putting both at bottom is that when you want to go up, you want to see the scrolled info at the top of the page(at the top of your screen).
Thats why the scroll up button must be at the top, because the info scrolled will appear there.
In safari if you press the scroll down button the info will appear in the bottom and your view will be there too.
Its no so comfortable to press a button in the bottom and see the changes at the top because your eyes will have more work goinf from bottom to top to see the info.
@Dmitry: I have years working on windows and some time working with OsX and in both system I have never press any button without having to see it first.
Assuming that every time you use a control you have to see it first, we can conclude that in OsX you need to “see” at bottom to go to “top” and in Windows you need to “see” at “top” to go to “top”.
And it don’t mind if you have 2, 5 or 10 years workin with the OS, because you never “learn” the “exact” position of a button.
There is the clear benefit in windows.
@Dmitry: a follow-up question, then, from your response to Inge:
If you’re right about consolidating the arrow controls, why would you stick them at the bottom of the window, as opposed to the top? Since most applications that reside in windows have the rest of their UI elements at the top (menus, toolbars, etc), why wouldn’t you want to put both arrows near the top to, as you argue, reduce mouse movement?
Tibbsy: Good question, and I’m honestly not sure. I think it may be a logical grouping of the window resize corner together with the scrollbar controls — i.e. they are somewhat related as they both manipulate window size/contents to reveal more, rather than directly perform actions. Another reason may be that there’s less chance of missing the button and hitting another critical button by accident (since as you mentioned, there’s more controls at the top).
Open Terminal and run this command:
defaults write “Apple Global Domain” AppleScrollBarVariant DoubleBoth
Tada! Now you have double buttons on both the bottom and top!
Thanks for the tip Jordan :)
@Tibbsy,
Presumably in an open window you’ll usually need to scroll down first as your initial scrolling action (think web-browser). So you would probably look to the bottom corner first for a way to do this.
Just theorizing though :)
Good point Myles. Scrolling down will be the main action because we always start at the top.
Good point. I hate the windows scrollbars when I’m using a mousepad.
Sorry but I have to agree with Laren on all of his points… and I prefer the windows version even if the OSX choice seems to be more logical at first (unordinary solutions always look useful at first as you are optimistic that they’ll improve your workflow but they aren’t always good in real world…)
I don’t often speak up with eye tracking as an example but I feel I have to.
Laren people click scroll bars all the time without looking at them. I know this because I have seen it on lots of eye tracking studies.
What you think you do is not necessarily what you actually do.
Well no matter if you’re a Windows or a Mac user, if you need to use any of those 2, you’ll find where the controls are and use them… WOW it took me 0.001 miliseconds more than on the other… Big deal man. Instead of wondering if it’s better or not, focus on the main reason why you’re doing that (in this example, scrolling up/down).
And in fact, I never ever use the scroll arrows, if Im reading a text and need to scroll a little, I use the scroll wheel and if I need to scroll a lot to go to another part of the page y pres down the scroll wheel (you know that’s a button right?) and drag the mouse to vary the speed until y get to the desired portion of the page.
Hope that helps.
Juan: Thanks for your comment. Cutting out a second here, and a second there will literally save hours and days over the years you use that software, especially on actions we use hundreds and thousands times a day. I think that’s a pretty big deal.
Of course most of us use scrollwheels, but that doesn’t mean some people still don’t use the arrows. When you stop focusing on the little details is when you start making mediocre products.
I’ve disabled the buttons some time ago because it looks cool and I’ve never missed them.
I only used them on the iBook G3 because it was the only computer that couldn’t scroll I’ve ever used. (Additionally the trackpad was too bad to use the scrollbar)
Could you have chosen a worse example?
Watch Windows users on a mac: They will fail entering an email. Seems illogical at first but then make complete sense when you think about them. Or?
I would like to see the scrollbar buttons at both the top and bottom so I could use whichever one is closer.
Best solution isn’t necessary the right solution: habits are hard to strike.
[...] 使用时，大拇指在４，６间移动的成本是要大于在２，８之间移动，因为大拇指在４，６之间横移还需要中指与无名指协助移动手机，而在２、８之间上下只需要大拇指上下移动便可。由于上下翻页的使用频率超高，４、６的设计并不完善，就好像windows的滚动条上下键相隔十万八千里，而apple的滚动条则紧紧相邻。 [...]
the thing is : no one click the arrows, people click and drag the lift..
so the big deal is to highlight the lift more than making ergonomic arrows.
so for that I `ll give a better point to windows scrollbars which highlight more the fact that the lift of the scrollbars is moving between the 2 arrows..
Marc, you don’t click the arrows, but others do. I often navigate through my usability test recording by jumping through each mouse click on the recording.
I’ve noticed that lots of people use the arrows. It’s quite annoying when you’re trying to skip through a recording and the participant has clicked on the scrollbar arrows half a dozen times. every time they scroll up or down.
I feel that the scroller itself should have a down and up arrows and in the middle of the scroller there should be some space to hold and move it up or down by any amount if a user wants to scroll the page according to his/her wish.
Jonathan, Macs have been using scroll wheels for some time now.