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:
- Users will miss functionality by not knowing some text chunks are clickable, which is a Bad Thing
- 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?
- Redesign the entire OS. No.
- 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:
- When the cursor was on top of something actionable it turned into a pointer finger
- 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!
John vs. Internet 
Yeah…this is an annoying problem. It’s especially an issue in the Windows Store on Windows 8, where the category titles are clickable, although it’s not obvious…
Pingback: Dew Drop – November 19, 2012 (#1,445) | Alvin Ashcraft's Morning Dew
I thought the problem was already solved on web interfaces. Underline the links?
that could work, especially on lower end devices where the particular kind of capacitive display needed to sense hover is uneconomical. However I feel that underlining all actionable things all the time would make the UI look cluttered
The UI, formerly known as Metro, simply is an adventure game. It’s made by developers who spent many long nights sitting in front of their C64 playing Maniac Mansion. Fiddling around with a new toy and discovering new things sure is great. But that’s not the best approach for a device you want to work with. Every new version of Office made users ask “where the hell do we find this and that now?” Obviously this approach of ever-changing things is brought to the next level. But to me, a system stands and falls with usability. And I really think usability is degrading constantly. Not only with respect to software, but some technical devices too.
Sad to see this kind of evolution, as generations of developers really did a great job in the past. But maybe there is hope …
I’d already decided that I wasn’t going near windows 8 on a PC without even considering how bad the lack of hover is. This is a seriously well thought out suggestion and MS should seriously consider it.
Andy
Thank you!
Yeah, I guess… but the hyperlinks in sites aren’t always obvious either. Like yours. I think one of the worst design decisions ever, and has been taken on by the masses, was to remove the text decoration from hyperlinks.
I have a hard time differentiating colour, so the links in your text aren’t obvious.
From the user’s perspective, I fail to see how hovering your finger all over the screen looking for clickable text cues is an improvement over random clicking at text elements. The hover is just a cool effect. I don’t think it helps discoverability.
This is why I dislike the Metro Religion (what I define as the extreme adherence to its design philosophy at the expense of UX) while liking a lot of the Metro philosophy itself (less chrome, typographical emphasis, high contrast, etc.).
The solution to this problem is not hovering, it’s SANITY. If something isn’t working well, but follows Metro 100%, maybe it’s time to bend the rules a little for the sake of usability?
I understand what you mean about metro as religion. However I do think hover would still help because it is not the only means of discovering, but rather an enhancement of a users existing guesses as to where to touch that already narrows it down. Plus it would be pretty cool to see 🙂
Great post! But, I am dying of laughter that this is a problem! I am skipping windows 8. If MS figures it out, soon we will have an online store in windows 7 and new features. Maybe even a tablet that supports win32 in a novel new way. So much market share but yet so much stupidity.
So, instead of poking around everywhere on the screen, the user will wander his finger above the screen to figure out what is clickable and what is not. It is a strange way to fix a huge UI design flaw. A user should see at the first glance what he can interact with. Fixing such an issue by adding hardware is IMHO a terrible workaround.Looks like with windows 8, we have the worst of both worlds – a pretty terrible desktop experience and a not so good touch tablet experience…
Shortly speaking, idiotic MS design must go away and old, good, PROPERLY LOOKING BUTTONS should come back.
To keep things clean, I use shadowed text, shadowed images (for example click-able chart legends), on click the link turns flat, now add that floating touch. But then some designers might make the text green with a bright red shadows (like some ’90’s websites) and the floating touch a swirling toilet seat (win7)
There’s trade-offs with every approach
Even hover requires tedious exploration. It’s useful as a “what does this do?” tool, but it’s not anywhere close to a solution for identifying active real estate on the UI.
Discoverability is the next frontier. (Unless we just keep using drop-down menus)
Hover is almost as annoying as clicking. It’s a kludge but a button that highlights all clickable elements might work in siutations where they don’t overlap. Too bad there isn’t a gesture for it.
perhaps waving your hovered hand across like some sort of wizard?
Hover works great with a mouse. With a finger, you probably cover up most of the word, so you won’t see the effect. Hovering a finger all around the screen, is much more tiring than using a mouse to hover over everything.
Mike, good point but at least in my head it works. My eyes see the word before my finger gets there, and uses a response on hover to either validate or invalidate whether it is clickable, having already identified and retained the word in short-term memory.
And the hovering takes place in the context of moving the finger over to the text as one would do anyway. At least, that is how I would envision it 🙂
If responses don’t include “IMHO”, are they really the opinion of the sender? m-m-m Hovering over that a while.
For those of us luddites who really didn’t mind underlined links and found them extremely obvious/utilitarian, why couldn’t our friends at MS just offer that as an option — you know, something like SHOW LINKED TEXT UNDERLINED SAVE
Hey, reading the last comments I suddenly found the ultimate solution! What we need to make a touch screen interface better is simply feedback. But not only visual, because we can’t see through our fingers, but sensual. So the screen should simply vibrate, when a finger touches a clickable region. Guess I should file a patent application now?
The best solution however would be to develop the new RKD (Retina Klystron Display) which is able to send microwaves into the finger, when you touch a (hot) link. That makes sense to me.
Your fix could help the user and improve the interface… but that is what it is: a patch up. That won’t solve the things in the grand scheme of things.
It is a flawed UI and will remain so. (This saddens me because I loved Metro when they introduced it.)
Perhaps it’s time to bring back “Blink”. Nothing says “click me” like blink.
Seriously though, it could be less harsh. Define both end colours and period and have it swing gracefully between.