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.

This entry was posted in blog and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Leave a Reply

Subscribe without commenting

  • Recent Posts

    speaker-lineup

    Presenting at WordCamp Atlanta – Child Themes

    The presentation? Your firstborn child theme. Child themes 101+2. I’m speaking at wordcamp atlanta this afternoon about themes and child themes. I’ll update this post with post-presentation notes. Learn how to mod themes the right way. Using child themes you won’t loose your edits when there’s a theme update. (101) We’ll go over the advantages [...]

    hooks-nutshell

    Hooks, In a Nutshell – WP Daily

    I’ve published another article over on wpdaily.co exploring the concept of hooks. I remember when starting out that people kept mentioning hooks and filters and actions and… it took a while to grasp what they each meant. I think the first time I started to grasp it was when I read the codex and saw [...]

    speaker-lineup

    Speaker at WordCamp Atlanta 2013

    I’m excited to be speaking at WordCamp Atlanta again this year! The time is quickly approaching for WordCamp Atlanta 2013, March 15-16. I spoke last year and discussed the process of going from Photoshop PSD to WordPress Theme, here are my slides and notes for that WordCamp Presentation. This year I’m speaking along the same [...]

    many-theme-options

    WP Features: Theme or Plugin

    Reading my wpdaily.co updates today and saw this post talking about WordPress theme features. Eric explains the debate: Generally-speaking, the conversations have always circled around features: There are those that believe every feature you could ever imagine should be included like text color, font selector, and more. On the flip-side, there are those that feel [...]

    Packery Preview, from Metafizzy & descended from Masonry

    David Desandro / metafizzy, maker of masonry and isotope of which I’m a big fan and user of has been busy with a new project called Packery. Packery, looks to be a child of Masonry. As you would expect it seems to be pushing things much further and addressing a few pain points of masonry. [...]

    trent-walton-thumb

    On Going Responsive (responding to Where to Start)

    I needed to write this up about going responsive in response after reading Where to Start (by Trent Walton of Paravel) about getting started with responsive web design. Thanks for sharing your thoughts Trent, I agree whole heartedly. In my experience it is the same. I wanted to share his post and also add my [...]

  • Recent Comments

    Jenny

    Jenny

    It doesn’t work! Give back “sintax error”
    Evan Mullins

    Evan Mullins

    The keystore is used for creating valid apps that are associated with the author. It is not...
    Rohan Dave

    Rohan Dave

    I am new in android and have certain question about KeyStore. Is KeyStore used in user...
    arpit

    arpit

    very useful thank you …..
    Duan

    Duan

    @ugh You’re joking, right? I do some basics in Flash, but come on – all you do is...
    Cátia Vala

    Cátia Vala

    Thank you so much Evan! That’s great! Keep going with your amazing work. :)