Josh Clark’s presentation on touch design was one of the better presentations of the week – a combination of humor and good information, presented in one of the most charismatic sessions I saw. As I said after:
After seeing @globalmoxie speak, I need to tweak my #SxSW presentation with more humor/fart jokes
Here are the highlights of the session.
Presenters: Josh Clark
Hashtag: @globalmoxie
In the coming years, interfaces will lose the cursor, leaving only you and the device – or you and the content.
- Traditional point and click interfaces suck on large screens (Fitt’s law)
- Even on iPad email have to click small ‘back’ button several (million) times
- Buttons not always wrong – gives affordance of action but gestures can take over for some things AS SUPPLEMENTS
- Gestures are the keyboard shortcuts for touch
Big Screens Invite Big Buttons – buttons were needed as an abstraction for functionality and have a role still but there may be other, useful methods like touch, voice, etc
- Win8 supports gestures – goodbye passwords: Win8 will allow patterns on top of a picture
- Twitter on iPad almost did away with buttons entirely – can sweep instead (card metaphor)
- We need two things to make gestures on the web workable – real support for gestures across browsers and libraries, and gesture conventions.
- JavaScript only has limited gesture options – tap, swipe
- Conventions have yet to be established – apps all have own conventions, web apps have to avoid interfering with OS standard gestures
- JavaScript libraries can add some gestures
- JQuery mobile adds 3 gesture controls
- SenchaTouch adds 7-10 more for Webkit only
- Touchy.js – library adds function
Experiments in Touch
- IKEA app concept – http://bit.ly/ikeatouch
- Clear app – bit.ly//ios-clear
- TouchUp app ex. – to change brush size, can’t use pressure because inexact; this app uses pressure to change canvas size instead.
- Massive Swiss army knife example – Clarity trumps density; with design, more features = more controls
How do users discover gestures?
- Inherently invisible; the less it resembles a physical action, the harder to discover
- Google maps – 2-finger tap zooms out – how would you know that?
- Importance of Visual Cues – theOCDChef cutting board ex.
- Many aps often start with instruction screens on apps – have to then remember them, plus no context to the instructions
- Should include reference, but don’t make it a learning guide
- Best interfaces don’t need instructions
- Don’t make me use buttons if you create a gesture-style interface; if it looks like a physical object, people will try to interact accordingly
- Magazine examples are too literal – long swiping PDFs, but remove key pieces like a gesture to get to TOC
- Voice Memo app = bad metaphor for interaction: entire activity is focused on single small button in lower corner
- Amazing how quickly toddlers pick up interaction with an iPad – very young and very old pick it up quickly because they don’t have learned bad habits from years of cursor-based use
Play More Video Games
- Coaching
- Basic instructions and demonstration, practice
- Help them in the moment (overlays with instructions)
- Web version = coach marks
- Clippy issue: bad advice at wrong times
- Gesture without a visual aid is a suitcase without a handle
- Leveling up
- Teach when a skill is needed vs all at once – think of app having levels, and when you need to lead
- OS Lion scrolling ex. Upside down from previous version
- Power ups
- Areas where you can add skills for expert users
- Twitter app ex. – make them learn the long way, but after a time introduce a better way
My Tweets During Session
- In the coming years, interfaces will lose the cursor, leaving only you and the device – or you and the content. #TeachingTouch
- Gestures can take over for some things AS SUPPLEMENTS – Gestures are the keyboard shortcuts for touch #TeachingTouch
- Goodbye passwords… Gesture-based login with Windows 8: http://bit.ly/win8-login #SXtapworthy
- Touchy.js is a small javascript library to manage multitouch events: http://j.mp/wm9dxX #SXtapworthy
Links
- Official page (SxSW):Teaching Touch
on Lanyrd
Tags: Conferences, mobile, SxSW, touch design