Thoughts and Rants on Software Design

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

Comments on: "I hate Windows 8 scrollbars and here’s why" (3)

  1. Ivan Mendoza said:

    Very good article, i totally agree with you

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

  3. 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?

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: