An Event Apart Notes: Josh Clark, Buttons are a Hack

Mobile and touch should be revolutionizing design and user experience.

We don’t want to touch a tiny link or button. Back button is just stupid. Fitz’s Law, make things fat proximal targets for easy touching.

People are lazy, let’s as designers LET people be lazy! Maybe even use the whole screen as your control.

Eliminate buttons if we can! Buttons aren’t evil, they just aren’t as relevant for touch. Gestures are the keyboard shortcuts of touch!

Big screens invite big gestures, don’t make people hit little specific buttons or links. Buttons are a HACK. Light switches are not intuitive, they are a learned behavior, an inspired hack introducing a middle man.

We don’t need an abstraction layer for uI controls. We can directly manipulate the object by touch.

The new Windows OS is leaning this way! Twitter iPad app is doing this. Rather than a back button or a UI, we just swipe our way through content.

The web sucks as coding gestures and is like the red-headed stepchild of interaction design. It trails behind proprietary technology. Flash helps bring standards, but we’re still waiting. But we can speed that process and push standards and agitating for more and better. We need to push for support for gestures (for now all we have is touchstart, touchmove and touchend: which aren’t very helpful and not widely supported).

The gesture conventions are tap and swipe. Plus there’s the emulator layer of the browser. As a community we need to figure out together what conventions there are and how to best apply them. It’s not easy to go beyone simple taps and swipes. jQuery mobile and Sencha touch are libraries that give us more events – these are really tuned with web-kit and are pretty big frameworks meant for creating html5 apps along the lines of PhoneGap. Touchy.js – more lightweight, but there are still some big holes.

http://bit.ly/ikeatouch – Direct interaction with the content itself.
http://bit.ly/ios-clear – Playing with objects as the interface.
Ipad App Touchup – lets you paint patters on images, but rather than adjusting brush size you adjust canvas size and the brush is always the size of your finger.

For mobile: clarity trumps density. The more features and controls we have, the more things get in the way. The more power we give people sometimes the more paralyzed they become. Swiss army giant pocket knife.

Gestures are invisible. So how do you find out (or instruct) about these controls – Finding what you can’t see. Create realistic user interfaces, with a little help, people will learn to work interfaces. Nearly everything has to be learned or taught: snooze alarm, qwerty keyboard. We always start with a physical reference. Social signifiers or cultural: who knows the salt vs pepper shakers? The only thing that matters is what the person that filled them thinks! Cut out the middle men and let the content be the control. Clear salt and pepper shakers! Let people interact with the content and not the buttons.

The medium is the message, The message is the medium.

Give obvious visual cues. Instructions are making things harder, nobody reads the manual!
How to use a magazine
How to use a book

It needs to become intuitive. Nature doesn’t have instructions, look at a toddler, we figure things out as we go. Use a book metaphor, but don’t break conventions. EMBRACE the metaphor! Don’t make me tap buttons if the interface makes me think otherwise. There is a digital advantage to random access navigation.

Toddlers are learning how to use iPads faster than adults. We’ve learned incorrect gestures and are not used to thinking about them. Approach apps and designs as we’re building them for children. Video games are great at teaching you how to use the interface, not with a manual, but by drawing you through the experience by:

  • coaching (with active discovery) – we learn by doing. Things that move can perhaps be moved by users.
  • leveling up – when you learn something, it moves on, demonstrate gradual progressive controls
  • power ups – efficiencies in the hands of experts. keyboard shortcuts. achievement based unlock tools by learning

We should be generously talking to each other about how were trying to use our gestures. It’s exciting to be involved in inventing the futures of how we’ll be using tools, be involved in the discussion. Have empathy for the users.