I hate Windows 8 scrollbars and here’s why

Anyone that has talked to me knows that I’m not a huge fan of Windows 8 by any stretch of the imagination.  However its a bit unfair to turn my nose up at the whole operating system (especially when there are some really great parts!) so I thought I’d break down a bit about what I don’t like.

Today’s focus is on the scrollbars in Windows 8 (and back-ported to Windows 7 inside IE10/IE11).

Scrollbars are one of the necessities of an OS to let you get to content beyond the visible container you’re looking at… and each part of it serves a specific purpose.

The arrows at each end are “buttons”, the part that slides up and down (or left to right) is the “thumb”, and it slides along the “track”.  There’s actually been a bunch of advancements with scrollbars since they were first used.

For starters the size of the thumb used to be fixed (same as the arrow buttons) but by making it proportional the user gets a visual clue as to how much content there is to scroll and subsequently makes scrolling more controllable and easier (bigger target, easier to hit a la Fitts’s Law).  Secondly when horizontal and vertical scrollbars are used together there is a little box in the (typically) bottom right corner where they meet that is empty.  Some smart developer felt this was a good place to put some diagonal lines (often referred to as a grippy) to enable a user to grab the corner and stretch the container/window to a new size (ever wish this worked on textarea elements in Internet Explorer?).  Finally although one can debate the true usefulness of it, clicking in an empty spot on the track will scroll the container to that position.  This helps a lot when you have a 500 page document and you want to quickly scroll to 300-400 pages down.

So here’s a few screenshots of a typical scrollbar in Windows 7:

Windows 7 default scrollbar
Windows 7 default scrollbar

and here it is being moused over

Windows 7 scrollbar moused over

This interface feature has been refined over the years ever since Microsoft introduced Windows 3.x such that now the bar is a nice soft gray color with slightly rounded corners and with shading, highlights and a gradient that gives it that 3D look that literally makes you want to bring your mouse over and interact with it.

The control supports visual states for “normal”, “hover”, & “click/drag” and was IMHO pretty much perfect, better than Windows XP, 2000, 98, 95, etc.


Now of course Windows 8 comes along with their “flat” UI to try and bridge the “simple” tablet UI with the desktop.  This is no easy task and well I fear that with a “compromised” tablet and desktop interface neither extreme is really ideal and everything became a muddled sacrificed UI.

Here’s the scrollbars in Windows 8:

Windows 8 scrollbar missing hover / mouseover state

In this shot you can see there is no hover state for the arrows and all the graphical details, soft ergonomic curves that afforded discover-ability are gone. e.g. “sexy-factor of zero”


Windows 8 scrollbar arrow is lopsided

When actually clicked the arrow looks peculiar like it wasn’t built properly… the arrow is not centered as one would expect and the result looks like a graphical glitch.

I think it would look much better if the arrow was centered on the “button” like this:

What the Windows 8 scrollbar arrow should have looked like

I’d still argue that these scrollbars (especially on the desktop) just seem completely out of place and look ugly.  It reminds me of using Balsamic (a tool I love) or similar to quickly mockup UI screens where there is an intentional effort to make it look rough and unfinished… only Microsoft actually shipped this!

What’s your thoughts? Do you like the Windows 8 scrollbars? Do you think they should support a mouseover / hover event like all the other controls? I’d love to hear your thoughts.


6 thoughts on “I hate Windows 8 scrollbars and here’s why

  1. My biggest beef is that the scroll handles are invisible, at least in browsers. So on a looong page, I have no cue as to where I am on the page. No bar to declare if I’m near the bottom or middle, etc. Just a blank scroll bar with no handle. When I try and grab the invisible handle, my page jumps to accomidate where the curser is in the bar- (higher or lower). Very Annoying!!

    At first I thought it was the browser itself but have realized no, it’s W8x’s handling.

  2. It’s true. Scrollbars in W8 are ugly, very ugly. I really like how W8 looks like. It’s nice designed and simple, but the scrollbars looks like someone forgot to draw them properly and left it in some unfinished state. I looked in the net how to change it, at least a color, but there is no way! Why, oh why?

  3. It’s also immediately obvious in the upper screenshot (W7) which element is the actual scrollbar and which is the space in which it scrolls. The scrollbar is the 3D-looking object thing with the three dashes in it, regardless of whether it’s large or small relative to the unoccupied space.

    The W8/W10 scrollbar lacks this – you click on either the light or the dark rectangle. Your lowest screenshot about what the scrollbar should have looked like is a great example where a user might just click on the light-grey rectangle instead of the dark-grey rectangle. Or the other way around. 50/50 chance of winning with every click!

  4. Graphic artists who design software decided scroll bars were ugly, so they did everything they could to hide them, completely ignoring the fact that most of us like to look at our actual work and reach for the scrollbar using our peripheral vision, which means scroll bars need to be clearly visible with good contrast. I hope this horrific trend will go the way of the hockey-puck mouse, another idea that made sense to artistic sensibilities, but did not work worth a damn.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s