Blog

Or search support forum

What's Global Moxie?

Global Moxie specializes in mobile design strategy and user experience for a multiscreen world. We offer consulting services, training, and product-invention workshops to help creative organizations build tapworthy mobile apps and effective websites. We're based in Brooklyn, NY. Learn more.

On Shelves

Books by Josh Clark

Tapworthy: Designing Great iPhone Apps

Best iPhone Apps: The Guide for Discriminating Downloaders

iWork ’09: The Mising Manual

Moxiemail

Enter your e-mail to receive occasional updates:

New Rule: Every Desktop Design Has To Go Finger-Friendly

Posted Nov 5, 2012

Touch has landed on the desktop. A whole new category of touch devices is flooding the consumer market in coordination with the release of Windows 8: touchscreen laptops and tablet/keyboard combos. These new hybrid combinations of touch and keyboard create a new ergonomic environment... and fresh demands on designers.

Like tablets before them, the ergonomics of these hybrid gizmos demand UI conventions that depart from desktop layouts of similar screen size. The hybrids not only need big touch targets to accommodate clumsy fingers, but they also need controls and navigation conveniently placed where hands naturally come to rest. Designing for touch introduces elements of industrial design: physical comfort and ease are critical considerations.

Unfortunately, the top-of-screen navigation and menus of traditional desktop layouts are outright hostile to hybrid ergonomics. Tried-and-true desktop conventions have to change to make room for fingers and thumbs. For now at least, the solution is not just a matter of designing separate interfaces for touch and non-touch gadgets. That won’t fly, because as designers (and especially web designers) we often don’t have enough information about the device.

After poking at this problem for a few weeks, my conclusion is: every desktop UI should be designed for touch now. When any desktop machine could have a touch interface, we have to proceed as if they all do.

Walk with me.

Gorilla Arms Get a Rest

Hybrids require us to move our hands back and forth between the keyboard and the touchscreen just behind it. Before this new onslaught of hybrids arrived, many (including a dismissive Steve Jobs) criticized the concept as untenable: people wouldn’t want to shuttle their hands back and forth to point at the screen. The effort would be too much, too inefficient, and the result would be the fatigue of “gorilla arms.” It’s a criticism leveled at Minority Report-style interfaces of science fiction, too: who wants to work with your arms constantly in the air?

Early returns suggest those initial worries were unfounded. People do embrace touch with these hybrids, but they do it by barely lifting their arms. In usability studies by John Whalen of Brilliant Experience and by Intel,1 newcomers shifted naturally to interacting directly with the touchscreen, ignoring any mouse or trackpad. Despite the availability (and greater precision) of these time-tested pointers, people said the touchscreen felt more intimate and direct. The hand became their preferred pointer for buttons, scrolling, you name it. Even expert users accustomed to tabbing between fields switched to independently selecting form fields by touch.

There seems to be something irresistible about the touchscreen, even when more precise or efficient options are available. Jeff Atwood put it nicely in his review of Microsoft’s Surface tablet:

I’ve stopped thinking of touch as some exotic, add-in technology contained in specialized devices. I belatedly realized that I love to touch computers. And why not? We constantly point and gesture at everything in our lives, including our screens. It’s completely natural to want to interact with computers by touching them. That’s why the more unfortunate among us have displays covered in filthy fingerprints. …

After living with the Surface RT for a few days now, I’m convinced that this form factor is the replacement and way forward for the stagnant laptop. I can’t even remember the last time I was this excited about a computer. The more I use it, the more I think that touch plus keyboard is the future of all laptops.

But what about those gorilla arms? John Whalen’s research found that people avoid raising their arms with hybrids by instead resting them alongside the keyboard, keeping a loose grip at the bottom corners of the screen. (Among other things, this grip helps to steady a sometimes floppy laptop screen when you tap at it.)

Hybrid arm and thumb position
People who use hybrids tend to rest their arms alongside the keyboard with a loose grip on the bottom corners of the screen.

As with any handheld touchscreen device, the way you hold the thing informs where primary controls should go. So this bottom-corner grip has important implications for the visual layout of websites and apps on hybrid devices. But first, to basics...

Rule of Thumb

Designing for touch means designing for fingers, yes, but to be more specific, you’re really designing for thumbs. On every handheld touchscreen, from phones to tablets to hybrids, the thumbs call the shots. Here’s why.

Phones: One Hand Means One Thumb

On phones, the best interfaces optimize for a one-handed grip, because it’s at once the most freeing and the most limiting. It’s freeing because it lets you do things with the other hand—write, sip coffee, hold a baby—a fact that makes it the most common grip. But it’s limiting because working a phone one-handed means working it with your thumb. Thumbs separate us from the beasts, but alas, when it comes to driving software, thumbs lack both reach and dexterity.

Phone thumb zone

This peculiar combination of freedom and constraint requires specific design concessions, most of them imposed by thumbspan. While a thumb can manage to sweep most of the screen on all but the most oversized phones, only about a third of the screen is in truly effortless territory—at the bottom of the screen on the side opposite the thumb. When holding a phone in the right hand, for example, the thumb falls naturally in an arc at the bottom left corner of the screen.

This is a big reason why apps and mobile operating systems pin primary controls to the bottom edge of the screen—precisely the opposite of typical desktop layouts. (It’s not only simple comfort and convenience that drive screen-bottom conventions, though. It’s also the awkward fact that fingers obscure the screen. Pushing controls below the content keeps hovering hands out of the way.)

Tablets: On the Edges

Tablets are trickier because we hold them so many different ways. We grab, tilt, lean, cradle, and clench in a whole variety of embraces, many of which depend upon stance. The rule of thumb still applies to these guys, except that the thumb zone changes. The special headache here is that the thumb zone isn’t consistent even for individual devices; it changes depending on posture.

Standing up, you use two hands to tap away on a large tablet like iPad. You likely hold it halfway up the sides for leverage (hold it too close to the bottom, and the thing goes floppy.) Or perhaps you have one arm wrapped around it like a clipboard while you tap with the other hand. Sitting at a table, you’re likely to prop a tablet with one hand at the lower third and tap with the other. Reclining in an armchair, you tend to rest it in your lap and tap with the other hand. Lying down or reclining, you rest the thing on your belly or nestled in a blanket, propping it with one hand, tapping with the other. In all of these grips, fingers fall in different places on the device.

When it comes to tablets, in other words, we’re all hands. We roam all over the things—all over, that is, except the top and bottom edges. As varied as tablet grips can be, two things are true for all of them. First, we tend to hold tablets at the sides; though the specific location wanders up and down, thumbs tend to settle at the middle- to top-third of the screen.

Second, the larger the screen, the harder it is to take in the whole thing at a glance as you can on a phone. On larger tablets, as with print design, our visual attention naturally focuses on the top of the tablet, and the design’s information hierarchy should reflect that.

These factors mean eyes and thumbs naturally occupy the top half of tablets, with thumbs straddling the edges. Spreading navigation and primary controls across the bottom—the standard pattern for phones—turns out to be ergonomically hostile on tablets. Sometimes the bottom isn’t even visible at all. In the laziest and perhaps most common of positions—lying down or reclining—the bottom bezel tends to disappear into blankets, sweaters, and soft bellies.

Tablet navigation and other frequent controls should hug the sides or top corners for easy thumb access. Avoid forcing people to lift and haul their entire arms over to the top or bottom edges for frequent touch targets. Some arm lifting is of course inevitable. Tablets are thumb and index-finger devices, with the index finger driving interaction inside the tablet’s canvas. You have to move your arm for that, no way around it, but focusing navigation around the thumb as the anchor at least means that you can spare your arm the most frequent taps. The top corners are within thumb striking distance while also remaining in the tablet’s primary visual area.

Tablet thumb zone
A typical grip puts the thumb zone at the sides and top third of larger tablets like iPad.

But what happens when we strap a keyboard onto the thing?

Hybrids: All thumbs

Here again, the rule of thumb calls the shots. You’ll recall that hybrid users frequently adopt a bottom-corner grip, resting their arms alongside the keyboard. Placing primary controls and navigation in easy reach of bottom-corner thumbs means you avoid gorilla arms. The result is a vertically flipped version of the thumb zone we saw for standalone tablets.

Hybrid thumb zone

Not everyone adopts the bottom grip, though. Others (especially newcomers) go freeform, jabbing their index finger at the screen. This approach unhinges the hands from the screen edges, giving freedom to roam the interface. Still, the center of the screen tends to be an easier touch than the corners with this technique. Trouble is, this finger hot zone is exactly the reverse of the thumb zone.

Hybrid finger zone

The upshot: optimizing for thumbs means a subpar experience for the index finger—and vice versa. One layout has to win, though, and as with every other touch device, the winner is the thumb. John Whalen’s study suggests that hybrid users begin to prefer thumb use over time, with expert users going nearly all thumbs, reaching them in and out of the screen from the edges to drive interaction. Once again, thumbs are the primary utility pointer.

Cluster primary controls and gestures for hybrid screens around the bottom corners and sides. That’s one reason Windows 8 uses edge gestures to summon system and app controls. A swipe from the right edge conjures the system charms, and a swipe from the bottom edge brings up a shelf of app tools.

What all of this adds up to: input type and grip should drive the placement of controls, not screen size. For web designers in particular, this is a big headache.

A Touching Problem for Responsive Design

For most of its short history, web-design practice has focused on the visual—on screen size. It’s not yet in our industry’s DNA to consider physicality and environment in our layouts. That’s why many are still surprised at the idea that they can’t just use their legacy desktop layout on iPad, even though the screen size is the same. The layout looks good, sure, but that rarely means it’s also finger-friendly.

The rise of the hybrids means touch is no longer the sole province of phones and tablets. It’s arrived on desktops and laptops, too. Most desktop website layouts, however, are not optimized for touch. They challenge our clumsy fingers and thumbs with small touch targets for links and menus, or they lean on hover interactions that can’t be triggered by touch at all. Few sites place primary navigation in easy reach of the thumb zone for either tablets or hybrids; they favor cursor-friendly screen-top navigation instead.

Ideally, we would all tweak our CSS to accommodate a range of input types in the same way responsive design has encouraged us to accommodate a range of screen sizes. Responsive web designers have so far used screen size as a proxy to assume support for touch. “If it’s a small screen, it’s touch. If it’s a big screen, it’s mouse-driven.” That distinction was already in trouble with large tablets like the iPad, and hybrids break that approach even more.

Unfortunately, we don’t yet have media queries to specifically target touch devices, but that may change soon. Recent draft proposals for CSS4 include a pointer media query to target gadgets with “fine” or “coarse” pointing tools. A mouse, trackpad, stylus or any other precision accessory would be a fine pointer, while fingers would be coarse. This would allow you to create specific rules to pamper fat fingers:

/* Make input fields taller for touch */
@media (pointer:coarse) {
    input[type=”text”] {
        min-height:44px;
    }
}

This will get us part of the way, although it’s not clear whether a browser with a keyboard/mouse and a touchscreen should identify itself as coarse or fine. Even better would be targeting the combination specifically. As we’ve already seen, the layout for a touch-keyboard hybrid should be different from that of a touch-only tablet, because the ergonomics are different. That makes it important to identify not only the availability of touch but whether it’s combined with other input types. It would be helpful if media queries could target additional input types. While we’re at it, it would be great to have http headers that announce to the back-end server what type of device it’s dealing with:

“Hi, I’m a touchscreen!”
“Howdy, I’m a touch-keyboard hybrid.”
“Greetings, I have no screen at all...”

Until we get these “Hello, my name is” name tags in CSS or http, we have to make do. There’s only one sensible way to do that:

Assume every screen your website serves is a touchscreen

If a device can be used for touch, its interface should be finger-friendly. This isn’t a problem that’s specific to touch, either; it’s just that touch got here first. A new desktop design language is needed, one that replaces cursor-only interactions with conventions flexible enough to handle any of several potential input styles. For the moment, that means covering touch-only, keyboard and mouse, or these new touch-keyboard hybrids. It won’t stop there; even more input methods are on their way.

Windows 8 is one of the first ambitious—and imperfect—efforts to try to address this thorny issue. It’s the first attempt at an operating system whose interface can handle any input (from handwriting to speech to touch) and any output (screens of any size or no-screen spoken experiences). That’s a hard problem, and Microsoft is wrestling with it earlier than most of us, but it’s a problem all of us will have to address in the very near future.

Despite their valiant effort, however, Microsoft’s designers still run headlong into a collision of input styles, which is probably unavoidable. You see this, for example, in the difference between the desktop-style Internet Explorer and the Metro-style Internet Explorer. Both are present in Windows 8, and the one you get depends on what mode you’re using. They have very different interfaces, with the desktop layout tuned for mouse and Metro tuned for fingers. The address bar, for example, slips to the bottom for the Metro version, as Matthew Honan describes in his Surface review:

Web browsing works well. I liked having the ability to swap between multiple browser windows by right clicking, but the address bar on the bottom side is something I still haven’t gotten used to. It makes sense when you are using the device in touch mode, because that’s where your thumbs naturally land, but it’s just plain odd with a keyboard.

New Navigation Standards for the Desktop

So how to build this new touch-and-every-other-input desktop experience? This one is going to take some time. Luke Wroblewski and Jason Weaver shared some useful suggestions this week for responsive navigation across touchscreen devices, and it’s exactly the kind of exploration we need.2

I’d add to Luke and Jason’s work a few guidelines to inform how we might evolve our desktop designs:

  • Pin controls to the left and right edges for easy thumb access on both tablets and hybrids.
  • Favor the left for primary controls. Most index-finger users use their right hand for poking the canvas, leaving the left hand in place for thumb navigation.
  • Treat hover as an enhancement, not a requirement.
  • Make sure all touch targets are large enough to accommodate fat fingers.

As we’ve seen over and over again in the last few years, the growing range of devices and platforms continues to make our work both more exciting and more challenging. Our job is getting harder, but it’s also our job, period. The ideal of the web, after all, is a platform that can be accessed from any device, no matter what its input or output method. For now, that means opening up all desktop layouts for easy finger-tapping.


  1. Luke described the Intel study as part of the fine video series he created for the company about adapting desktop interfaces for touch. 
  2. I quibble a bit with Jason’s and Luke’s strict emphasis on bottom corners on tablets and hybrids; I’d nudge those up the side to accommodate more varied thumb grips. 

Tags: , , , , , , ,

Want more? Recent blog entries...

Comments

16 comment(s) on this page. Add your own comment below.

Nov 5, 2012 5:23pm [ 1 ]

The next level of CSS Media Queries does expose features for detecting if you're dealing with a touch device:

These were separated into two features rather than a single 'touch' feature because the two aspects drive different features, in different ways. I gave examples further up - a tablet pen doesn't need extra-large touch targets, but it can't do :hover, while a Wiimote needs large targets and can :hover.

Once browsers support these (I believe they're being experimentally implemented in Chrome right now), it'll be a lot easier to adapt your layouts for touch devices without getting into the hell of device detection.

Nov 5, 2012 5:29pm [ 2 ]

Thanks for that, Tab. I definitely agree that those will be super-helpful (as would http headers that identify broad class of input type), although I think they could go even farther. As I wrote above:

This will get us part of the way, although it’s not clear whether a browser with a keyboard/mouse and a touchscreen should identify itself as coarse or fine. Even better would be targeting the combination specifically. As we’ve already seen, the layout for a touch-keyboard hybrid should be different from that of a touch-only tablet, because the ergonomics are different. That makes it important to identify not only the availability of touch but whether it’s combined with other input types. It would be helpful if media queries could target additional input types.

Nov 5, 2012 10:14pm [ 3 ]

As of Modernizr 2.6, testing for multi-touch support via a media query, which is how Firefox 4 exposes that for Windows 7 tablets, has been refined for the better.

This was due to Modernizr.touch == false on Windows Phone 7.5 and a few other issues getting Modernirz.touch to return the applicable touch event model.

The rabbit hole starts here https://github.com/Modernizr/Modernizr/issues/548

Nov 5, 2012 10:28pm [ 4 ]

@Gray Ghost Visuals: Detecting touch events definitely gets you closer, but the difference between detecting JavaScript touch support and touch hardware is an important one. Hopefully over time they will become one and the same. For now, though, they aren't. I think I have it right, for example, that Symbian browsers don't support touch events even on touch devices. Here again, it would be useful to detect not only touch but combinations of touch/keyboard.

Nov 5, 2012 10:39pm [ 5 ]

@Josh Clark: Definitely... when a keyboard is supplied with the device.

Nov 6, 2012 3:06am [ 6 ]

@tab: I made a handy tool to test the presence of the new touch-friendly media queries — http://jordanm.co.uk/palmreader

I would like to see the day where we build for touch first. Hover would be treated as an additional layer of interaction. What excites me about touch is that there is no middleman between you and the interface, YOU are the input, not some piece of hardware. This gives touch based devices an immediate intimacy and sense of immersion which you wouldn't previously have found sitting upright in an ergonomic workstation interacting with a web product through various hardware input devices.

moodthy
Nov 6, 2012 8:31am [ 7 ]

Great article and much to think over. I'm not sure, however, that I would agree that users necessarily want different layouts based on devices simply because we are entering an age where more and more people will be accessing the same website through multiple devices: e.g. work computer, home computer, phone, tablet (or friends tablet when visiting and wanting to look something up) and might not want to have to re-orientate themselves with a new layout for each site. We've had a few redesigns in my company and there's ALWAYS some kind of outcry no matter how much better and simplified the new layout is, so I know that the user resistance to change is there. I admit I'm basing this on my own use case as a visitor as well, since I use websites for eccommerce and reference very frequently from assorted devices and I find I have a kind of muscle memory for hitting the spots on screen/device that lead me to where i need to go as quickly as possible. Having a new layout for each device would really mess this up and add a layer of mental resetting for me with each device, like "ok, for this one i need to hit third up from the sides", etc.

Nov 6, 2012 9:13am [ 8 ]

@moodthy: Great point. While we're accustomed to seeing very different layouts on phones vs desktop or large tablets, it may be somewhat more confusing to see the layout change across similar screen sizes—or even on the same device. That's part of the confusion that people are encountering in Windows 8 when they swap between Metro and desktop modes.

That's why I think the best solution, at least for now, is to have a single touch-friendly layout for all screen sizes. When we're able to start detecting touch vs mouse more reliably, it will likely make sense to start with touch-friendly as our default and then enhance that design for mouse by perhaps adding denser info and reducing touch target sizes.

An important first step in making touch-friendly desktop designs means moving navigation and primary controls from screen top to left/right edges (or perhaps off-screen, available with a swipe or click, like charms in Windows 8). Left-edge navigation, for example, is easier for touch without penalizing mouse users.

Jake Rayson
Nov 9, 2012 3:58pm [ 9 ]

This is all very well but what is that menu I see up there, top right? Eh?

Only joshing, this is excellent and exciting stuff :) Feels like the floodgates have opened, first mobile, responsive and now touch. Let's get building that side navigation…

Polly Shelton
Nov 13, 2012 3:52pm [ 10 ]

Really great and exciting article, Josh. I agree that the advent of hybrid multitouch desktop interfaces is here and appreciate your thoughtful analysis and synthesis of some of the current research in the area. I do worry however about the longer term effects of these inefficient, "gorilla arm" style interactions as well as adoption and continuation of use if users experience fatigue over time (how soon will the novelty wear thin?). Similar to what you mentioned, I also anticipate a more multi-sensory and flexible future whereby the user interface will be able to accept many forms of input seamlessly, and therefore second the comments around the importance of maintaining consistency across devices and modes of interaction rather than developing different layouts and navigation schemes optimised for touch/mouse/etc. Insightful stuff, looking forward to the next instalment!

Jason Towers
Nov 13, 2012 8:29pm [ 11 ]

Josh, your argument is pretty hard to refute. Unfortunately you've given me a lot of extra work to do -- my job is easier when I don't have to rethink anything! :) And another vote from me for consistency rather than different layouts for different devices.

Thanks for a well-written and thorough article.

Dermot Doherty
Nov 27, 2012 1:15am [ 12 ]

Nice article. Makes the days of browser incompatibilities seem like a walk on the park.

Alex Debkaliuk
Jan 4, 2013 8:16am [ 13 ]

Thanks, good food for thought.

Paul Christian
Feb 7, 2013 4:05pm [ 14 ]

Nice article! Good one. Not sure I've seen many examples of finger-friendly design on the desktop yet though. I mean, I see a picture of Win8... but... lets not go there.

Patrick H. Lauke
Aug 5, 2013 6:36pm [ 15 ]

An exceedingly late comment on this, but as you've recently tweeted the link to your post again, a quick answer regarding the pointer and hover CSS media features: unless it's been changed, on multi-input devices these will refer to the least capable device, per spec. So on a device with touch AND mouse/trackpad, pointer will still be coarse. Also - again, if this hasn't been changed since - these features don't change dynamically (e.g. pointer doesn't flip from coarse to fine if the user changes from using touchscreen to using the trackpad). All this makes them fairly useless at this stage, IMHO.

Jerry Summers
Feb 28, 2014 5:33pm [ 16 ]

You believe everyone needs to use touchscreen...

Try using excel with a touchscreen interface and tell me how well that works.

Add a Comment

Don't be shy.

(Use Markdown for formatting.)

This question helps prevent spam:

Download Big Medium
Try it free for 30 days, or buy to unlock.

State of Josh's Brain

Twittering

Follow me on Twitter

    Snapping

    Latest photos