Buttons were an inspired UI hack, but now we've got better options

Josh Clark on the future of touch and other types of UI.

If you’ve ever seen a child interact with an iPad, you’ve seen the power of the touch interface in action. Is this a sign of what’s to come — will we be touching and swiping screens rather tapping buttons? I reached out to Josh Clark (@globalmoxie), founder of Global Moxie and author of “Tapworthy,” to get his thoughts on the future of touch and computer interaction, and whether or not buttons face extinction.

Clark says a touch-based UI is more intuitive to the way we think and act in the world. He also says touch is just the beginning — speech, facial expression, and physical gestures are on they way, and we need to start thinking about content in these contexts.

Clark will expand on these ideas at Mini TOC Austin on March 9 in Austin, Texas.

Our interview follows.

Are we close to seeing the end of buttons?

Josh Clark: I frequently say that buttons are a hack, and people sometimes take that the wrong way. I don’t mean it in a particularly negative way. I think buttons are an inspired hack, a workaround that we’ve needed just to get stuff done. That’s true in the real world as well as the virtual: A light switch over here to turn on a light over there isn’t especially intuitive, and it’s something that has to be learned, and re-learned for every room we walk into. That light switch introduces a middle man, a layer of separation between the action and the thing you really want to work on, which is the light. The switch is a hack, but a brilliant one because it’s just not practical to climb up a ladder in a dark room to screw in the light bulb.

Buttons in interfaces are a similar kind of hack — an abstraction we’ve needed to make the desktop interface work for 30 years. The cursor, the mouse, buttons, tabs, menus … these are all prosthetics we’ve been using to wrangle content and information.

With touchscreen interfaces, though, designers can create the illusion of acting on information and content directly, manipulating it like a physical object that you can touch and stretch and drag and nudge. Those interactions tickle our brains in different ways from how traditional interfaces work because we don’t have to process that middle layer of UI conventions. We can just touch the content directly in many cases. It’s a great way to help cut through complexity.

The result is so much more intuitive, so much more natural to the way we think and act in the world. The proof is how quickly people with no computing experience — people like toddlers and seniors — take so quickly to the iPad. They’re actually better with these interfaces than the rest of us because they aren’t poisoned by 30 years of desktop interface conventions. Follow the toddlers; they’re better at it than we are.

So, yes, in some contexts, buttons and other administrative debris of the traditional interface have run their course. But buttons remain useful in some contexts, especially for more abstract tasks that aren’t easily represented physically. The keyboard is a great example, as are actions like “send to Twitter,” which don’t have readily obvious physical components. And just as important, buttons are labeled with clear calls to action. As we turn the corner into popularizing touch interactions, buttons will still have a place.

What kinds of issues do touch- and gesture-oriented interfaces present?

Josh Clark: There are issues for both designers and users. In general, if a touchscreen element looks or behaves like a physical object, people will try to interact with it like one. If your interface looks like a book, people will try to turn its pages. For centuries, designers have dressed up their designs to look like physical objects, but that’s always just been eye candy in the past. With touch, users approach those designs very differently; they’re promises about how the interface works. So designers have to be careful to deliver on those promises. Don’t make your interface look like a book, for example, if it really works through desktop-like buttons. (I’m looking at you, Contacts app for iPad.)

So, you can create really intuitive interfaces by making them look or behave like physical objects. That doesn’t mean that everything has to look just like a real-world object. Windows Phone and the forthcoming Windows 8 interface, for example, use a very flat tile-like metaphor. It doesn’t look like a 3-D gadget or artifact, but it does behave with real-world physics. It’s easy to figure out how to slide and work the content on the screen. People figure that stuff out really quickly.

The next hurdle — and the big opportunity for touch interfaces — is moving to more abstract gestures: two- and three-finger swipes, a full-hand pinch, and so on. In those cases, gestures become the keyboard shortcuts of touch and begin to let you create applications that you play more than you use, almost like an instrument. But wait, here I am talking about abstract gestures; didn’t I just say that abstractions — like buttons — are less than ideal? Well, yeah, the trouble is you don’t want to have the overhead of processing an interface, of thinking through how it works. The thing about physical abstractions (like gestures) versus visual abstractions (like buttons) is that physical actions can be absorbed into muscle memory. That kind of subconscious knowledge is actually much faster than visual processing — it’s why touch typists are so much faster than people who visually peck at the keys. So, once you learn and absorb those physical actions — a two-finger swipe always does this or that — then you can actually move really quickly through an interface in the same way a pianist or a typist moves through a keyboard. Intent fluidly translated to action.

But how do you teach that stuff? Swiping a card, pinching a map, or tapping a photo are all based on actions we know from the physical world. But a two-finger swipe has no prior meaning. It’s not something we’ll guess. Gestures are invisible with no labels, so that means they have to be taught.

Screenshot from Apple’s trackpad tutorial.

In what ways can UI design alleviate these learning issues?

Josh Clark: Designers should approach this by thinking through how we learn any physical action in the real world: observation of visual cues, demonstration, and practice. Too often, designers fall back on instruction manuals (iPad apps that open with a big screen of gesture diagrams) or screencasts. Neither are very effective.

Instead, designers have to do a better job of coaching people in context, showing our audiences how and when to use a gesture in the moment. More of us need to study video game design because games are great at this. In so many video games, you’re dropped into a world where you don’t even know what your goal is, let alone what you’re capable of or what obstacles you might encounter. The game rides along with you, tracking your progress, taking note of what you’ve encountered and what you haven’t, and giving in-context instruction, tips, and demonstrations as you go. That’s what more apps and websites should do. Don’t wait for people to somehow find a hidden gesture shortcut; tell people about it when they need it. Show an animation of the gesture and wait for them to copy it. Demonstration and practice — that’s how we learn all physical actions, from playing an instrument to learning a tennis serve.

How do you see computer interaction evolving?

Josh Clark: It’s a really exciting time for interaction design because so many new technologies are becoming mature and affordable. Touch got there a few years ago. Speech is just now arriving. Computer vision with face recognition and gesture recognition like Kinect are coming along. So, we have all these areas where computers are learning to understand our particularly human forms of communication.

In the past, we had to learn to act and think like the machine. At the command line, we had to write in the computer’s language, not our own. The desktop graphical user interface was a big step forward in making things more humane through visuals, but it was still oriented around how computers saw the world, not humans. When you consider the additions of touch, speech, facial expression, and physical gesture, you have nearly the whole range of human (and humane) communication tools. As computers learn the subtleties of those expressions, our interfaces can become more human and more intuitive, too.

Touchscreens are leading this charge for now, but touch isn’t appropriate in every context. Speech is obviously great for the car, for walking, for any context where you need your eyes elsewhere. We’re going to see interfaces that use these different modes of communication in context-appropriate combinations. But that means we have to start thinking hard about how our content works in all these different contexts. So many are struggling just to figure out how to make the content adapt to a smaller screen. How about how your content sounds when spoken? How about when it can be touched, or how it should respond to physical gestures or facial expressions? There’s lots of work ahead.

Josh Clark: I’m sure that all kinds of new displays will have a role in the digital future. I’m not especially clever about figuring out which technology will be a huge hit. If someone had told me five years ago that the immediate future would be all about a glass phone with no buttons, I’d have said they were nuts. I think both software and context and, above all, human empathy make the difference in how and when a hardware technology becomes truly useful. The stuff I’ve seen of the heads-up-display glasses seems a bit awkward and unnatural. The twitchy way you have to move your head to navigate the screen seems to ask you to behave a little robot-like. I think trends and expectations are moving in an opposite direction — technology that adapts to human means of expression, not humans adapting to technology.

I agree touch screens are more intuitive and if used properly can immerse people in their applications in so many creative ways. Buttons are decades away from being “a hack” though. The same children interacting with the Ipad will still use button keyboards once older until a touchscreen keyboard that is functional for lengthy text is developed, or some other creative form of silent text capturing is created. Touchscreen keyboards these days will not cut it even if word recognition and auto-correct were perfect; this is why people connect their bluetooth wireless keyboards to their Ipads. The day where buttons are completely useless are for future generations, nothing soon, but the usages of touch/gesture in this article are interesting.

Anonymous

I’m confused, touch screens are interactive but gestures are not? So, the idea of manual manipulation is inherent but cognitive dissonance arises because there is no inherent metaphor.

Which means, its all learned behavior anyhow, there is no such thing as ‘natural interfaces’. Stop trying.

datenwolf

Touchscreens are images behind glass. They don’t cater to the haptic feedback of mechanical switches. Did you ever try to write a longer text with just a touchscreen? Every touch typist (or the irony) cringes when comes typing on a touch screen.

I agree with most of the stuff in this article, but I don’t think that designers should focus so exclusively on making interfaces intuitive. Intuitiveness is nice, but it’s really just a means toward the end of enabling users to do what they want, hopefully as easily and efficiently as possible and with minimal frustration.

A lot of the time, interfaces succeed at being intuitive, but fail at being efficient. This is the case with many mouse-based interfaces. One way that you can sometimes manage to make an intuitive AND efficient interface is to have redundant methods of interaction. A good example of this is the mouse-based/keyboard-shortcut-based duality in many applications.

Ideally, you want to make an interface which can be interacted with in an intuitive way, with the more efficient methods being gradually taught to the user as time goes on. Listing keyboard shortcuts alongside mouse-driven menu items is a step in the right direction, but interactive feedback would be a big improvement.

Christian Sciberras

Absolute BS. There is no way buttons can be replaced with swiping….just like you simply can’t replace doors with teleports – in the end, it just doesn’t make sense.

On the other hand, swiping has its place, and works best when used appropriately.

I’ve seen one too many prototype UIs aimed at flabbergasting and complicated swiping, sliding fading animations. The end result is an unusable bloat. People want responsiveness, not delayed UI interactions.

brian

You defeat your own argument in the first paragraph. How can a sensible design for a light switch be a hack. Placing the switch near the bulb would be daft , hence the remote switch!
User of intervening mechanism is natural to humans. For example a rope to lower a light chandler so the candles can be lit – or opening a cupboard door.
The concept of a button is just as much a gesture as a swipe, whether it be a physical button or a touch.
and hey – we all like to have our own buttons pressed, not going to give that up for a gesture :)

http://marshallphayes.com Marshall

I like the thoughts about touch interfaces and I think that’s where we are currently, but I also think we are moving quickly to speech with Siri and other applications. The enormous advantage that speech has over touch is the fact that we don’t physically have to move or look at what we are doing. This way we can multitask a lot easier and get more done. Or play more. Here is an example of what I mean

If a 3 year old can interact with devices through speech I think the rest of us are headed quickly into that direction.

The Code Warrior

I think maybe I’m misunderstanding their intent here or this guy has taken the context from a developers perspective to a users visual experience. Having been a developer for almost twenty years now the notion of “buttons” is still alive and well and not some intuitive hack. Though the interface is now touch, the underlying design is still a button from a programmers point of view. Whether a user taps, slides, whatever, it still creates references to objects and classes by triggering events which is all that buttons do. Like another person said, until autocorrect, auto type, and voice recognition get to the point of usability, buttons will always be here, only the way a user interacts with them change. Even in Metro apps you still create buttons manually by alloting sections of the GUI For the user to manipulate. Albeit, they are not referred to as buttons anymore but the premise behind these “events” is still derived from MFC CButton classes rewritten to MFC.

btw. Metro is going to be Microsoft’s Achilles heel. Developers will like it, users in the business world will hate it. IMO.

http://tbldevelopmentfirm.com/services/interactive-design-graphical-user-interface David Woodfin

Hi,
Thank you for your nice article. It will help me.
Thanks

Featured Video

The growing role of software architects: “Architecture has become much more interesting now because it’s become more encompassing," says Neal Ford, software architect and meme wrangler at ThoughtWorks.