In what will hopefully be the first of many “Metro++” blog posts on improving the Metro experience, I wanted to focus on discoverability of functionality. One of the weaknesses in Metro as it now exists is that the emphasis on typography instead of chrome means that it isn’t always clear when any particular piece of text is meant to be clickable and do something, and when it is meant to simply be read. This has two negative consequences:

1. Users will miss functionality by not knowing some text chunks are clickable, which is a Bad Thing
2. Once they grasp that some text is clickable, they will try poking (or if using Metro with a mouse, clicking) all over all the time to discover the Metro app’s functionality by trial and error—which at least works, but isn’t particularly elegant, and would be seen as a downgrade compared to iOS and Android which better delineate between clickable text elements and non-clickable elements by making the former more button-like

Case-in-point. I only accidentally discovered that header was clickable

Now, how can Microsoft (or an OEM with some significant rights to customize the OS) solve this problem?

1. Redesign the entire OS. No.
2. Delineate between clickable and non-clickable text with additional graphical elements. In the Metro UI guidelines, MS shows how to make a clear distinction between graphical elements that serve as buttons and those that don’t: Put them in a circle or a box. A circle/oval would be impossible and look out of place. A rectangle around actionable text would work, but add a lot of clutter, especially if there is a lot of actionable text. So…No, but getting warmer.

What it would look like to button-ize everything: a cluttered mess

I think the solution is right under our nose…or somewhere between the nose and the screen. I am of course referring to smell-based computing the hover!

Crafting Hover

Hover (or onMouseOver) rose to prominence in the early-ish days of the WWW as a mass phenomenon. HTTP websites were a new concept for millions of people accessing the Web for the first time, and much as in Metro today, there was some confusion in what text was clickable (this can still be witnessed today by watching your parents trying to navigate the Internet). This was solved in two ways:

1. When the cursor was on top of something actionable it turned into a pointer finger
2. When the cursor was on top of a UI element (such as a nav menu) that was actionable, the element would change color or to another graphic thanks to the power of this newfangled thing called JavaScript

Of course both of those relied on a cursor, which doesn’t exist in a touch interface. Can we make an equivalent of this “I’m here, but not clicking on it” function in a touch screen?

YES WE CAN*

*with the help of some clever capacitive technology

Capacitive touch screens work by sensing a disturbance in The Force the electrical field around the screen, not just at the immediate glass surface. It is actually entirely possible to sense a finger wandering around above the screen without actually touching it, as Sony recently demonstrated with “floating touch” in their Xperia Sola. And so it is possible to have mouseOver effects in the Metro interface! When the finger is near a clickable block of text, that text could highlight itself in a number of ways, but I think 2 good ones would be:

1. Underline, a la IE in the late 90s

OPTION 1: Underline on mouseover

2. A glowing effect around the actionable text

Option 2: Glowing effect on hover

Any of these would address this discoverability shortcoming in Metro, and also look pretty darn cool and futuristic, which helps sell devices at retail, and adds another layer of sophistication in human-device interaction that would make iOS and Android look a bit dull by comparison. Also in Metro, an added bonus is the ability to have graceful degradation from Touch to Mouse, since the onHover signals can just as well apply to MouseOvers. So, that’s what I’d like to see. Get to it, Microsoft!