AEA12, Buttons Are a Hack

AEA12, Buttons Are a Hack Picture

Touch is leading us to a future with less and less chrome, possibly even none at all, as gestures replace familiar buttons, menus, and tabs. Find out why our beloved buttons are weak replacements for manipulating content directly. Learn practical principles for designing mobile interfaces that are both more fun and more intuitive. But hang on: if there are no visible controls, how do users figure out how to use the damn thing? Learn to teach users new interfaces and gesture vocabularies by making it effortless to discover invisible gestures. This talk explains the power of animation, reveals the influence of game design, and offesr techniques to build native and web apps according to the new rules of touchscreen design.

Buttons are a Hack
The new rules of designing for touch.

Josh Clark
Tapworthy
@globalmoxie

You can’t be a futurist without being a historian. The importance of history is its role in the future. We can prepare our work now for what is to come.

How do we design for speech (Siri) and texture (touch)?


Touch is going to remove the administrative junk that have been added for the desktop GUI. Touch cuts through complexity and allows us to work with information.

What’s the big deal?

The traditional UI doesn’t work as well. Tiny tap targets on a big beautiful screen. The further the target is away and the smaller the target is, the harder it is to hit the goal.

The buttons that work well on a phone are the exact same size as on the large screen of an iPad. We should try alternative to buttons. Let people be lazy. Swipes allow people to be lazy.

There are problems with accessibility and discoverability. Taxi driver with a hook will have problems with any touch screen.

Gestures are the keyboard shortcuts of touch!

Examples of gestures:

  • Reeder: Pinch
  • Twitter: No back button. Tap to view. Swipe to go back.

The challenge: How do I imagine my data with physicality? That’s where we need to do our thinking.

Big screens invite big gestures.

Buttons are a hack. An inspired hack. Both physical and virtual. A light switch on one wall allows us to turn on a light on another wall. Because screwing in a light bulb every time you want to use the bathroom is not practical.

Windows is even getting in on it. Windows 8 based on touch. This is not an evolution of Windows. It’s a replacement!

What about the web?

Browsers are not good at touch. It’s hard to code gestures in JavaScript. We need better touch events.

  • touchstart
  • touchmove
  • touchend

The browser hems you in. Limited amount of wiggle room in the browser. Limited to tap and swipe in the browser.

The focus on browsers is a problem for our community. The web isn’t about browsers! The web is viewed in apps, books, and other containers where you don’t have control of the browser.

We’ve got to get our touchscreen mojo on!

The web (browser) is inside every application instead of every application being inside the web (browser). - Luke Wroblewski

It’s hard to build browsers in the browser based web but easier in apps.

  • Flickr Slideshows - swipes
  • NY Times Carousel - swipes
  • Google Images - swipes
  • Browser Ninja - http://bit.ly/browser-ninja
  • Adobe Proto - uses shorthand gestures to build prototypes.
  • Clear - http://bit.ly/ios-clear - To do list app, swipes, pinches. More like playing an instrument as opposed to using an app.
  • TouchUp app - instead of decreasing the size of the brush (your finger), it increases the size of the image

How do you build physicality into your websites.

Finding What You Can’t See

How do we teach touch? Especially unlabeled and abstract gestures. The less a gesture resembles a real life gesture or a desktop convention then the more likely your gesture is an easter egg and that’s no good.

  • The Alarm Clock - You can turn it off while you are unconscious!
  • Touch Typing - Could you write the keys out in order? It’s all Muscle Memory

Social and UI conventions are not evenly understood. Example: Salt and Pepper shakers.

Who needs a control when you have the content itself? How can I let people interact with the content and not the interface? Isn’t’ there a possibility that the content is the control?

How do we teach people?

  • We use instructions - magazine apps (The New Yorker).  Presented to you before you even see the app. Makes the app seem complicated. We don’t read the manual!
  • We use screencasts - Our Choice book - http://bit.ly/our-choice - We don’t watch the screencasts.

Nature doesn’t have instructions. Not saying that nature is an easy interface. It’s complicated. All of your users have this wealth of experience of how the real world works.

You’ve got to do it right. Your interface metaphors need to inform your user how to use your application. Apple Address Book swiping doesn’t turn the page but deletes content, for example.

Find a three year old and use them as your beta tester. They won’t get what the app does but they can test out your user interface.

Think of yourself as a novice user.

A gesture without a visual aid is inert.

Play more video games.

  • Coaching - done better than Clicky. “Are you trying to write a letter?”
  • Leveling Up - Ease your users into the app. As they demonstrate proficiency, show them new tips. Demonstration and practice. Think about your apps as levels.
  • Power Up - Mastery is where the power ups come in. A reward. An achievement. Not just a useless badge.

All of these things need to be discoverable. Coach in the moment.

Everything starts with visual understanding.

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins