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

scrollbars_hover_win7
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:

windows8scroll_nohover
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”

 

windows8scroll_arrowmisaligned
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:

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