Affordance, discoverability and death to the scroll bar!

There has been a lot of drama lately about major changes to the UI of some popular OSes. A lot of this drama can be boiled down to It's different! It takes me out of my comfort zone! But of course nobody is honest enough to say that straight out. Instead they will claim the UI is not intuitive.

Claiming an interface is intuitive (or not) is a red flag for me. It is unlikely that anyone using the word knows much about UI (and UX and IX), for the simple reason that there is no such thing as an intuitive interface. All interfaces must be learned, including how to suckle a mother's breast.

Features of an interface that can be quantified are discoverability (how easy it is to learn) and affordance (how easy it is to use).

We will start with affordance; it basically measures how easy one element of the UI is to use (eg, click) relative to surrounding elements. Concretely, bigger things are easier to click on then smaller things; things at the edge of the screen are easier to mouse over then things towards the center.

One example of affordance nightmares are the up and down (left/right) arrows of scroll bars, compared to using the gutters for (pretty much) the same purpose. (Visual guide to the scroll bar to your right, my left) The arrow buttons are small, on the order of 12x12 = 144 pixels on a screen that is 1920x1080=2073600 pixels. It is hard to get your mouse over them to click. And all that effort is rewarded by moving the text by a mere 30-40 pixels. (On a side note, a sure way to drive me nuts is to scroll through a page by repeatedly clicking on the down arrow.)

Compare the uselessness of these arrows to the gutters that are right below (or beside or above) the arrows. First, by being long (if narrow) and on the edge of the screen, they are relatively easy to hit (unless the content nearly fits in the window, in which case they are useless). And they reward you by moving the content of the window by roughly the height of the window; what was at the bottom of the window should now be at the top.

But of course scroll bars are pretty much obsolete. The page up/down keys, the space bar (in browsers) and most importantly the mouse wheel are all have much higher affordance. The scroll bar can be reduced to a line within a line, representing the current position within the full content of the window. This is the case in Android on my Nexus 7, even though the screen is a whopping 1280 x 800 pixels. Compare this to the VGA 640x480 pixel screens that used to be wide spread. We ran Windows 3.11 on those computers, and had massive 8-pixel scrollbars (1.25% of the screen width). 16-bit windows also had a bug in that if the content was large enough, the slider would be reduced to just a few pixels high (or wide), dropping its affordance close to zero.

On to discoverability; this is a measure of easy it to find out how to do something. Common things should be easy to discover but it should still be easy to discover rare things. Android 4.2 on my Nexus is a joy in this regard. I assume the other phone/tablet OSes are similarly as good.

You can poke at anything on the screen. "Hey look, a little bluetooth logo, I want to turn that off. [poke] [poke] Hey look! I just drew down a window that contains the 3 pieces of commonly used information (user, WiFi SSID, battery charge), 4 of the commonly adjusted settings (airplane mode, bluetooth, auto rotate, brightness) and a button to get to the settings app.

And because pretty much nothing looks like a traditional button everything could be a button. Poke it and find out!

The traditional menu bar is something of a discoverability nightmare. Pretty much every function of the application gets stuffed in a menu or sub menu. There are so many that people never explore what they do. They've learned to locate the 5 functions they need to get their work done and ignore the rest.