A compilation of my notes from sessions I attended at SXSW Interactive 2012 about user experience for mobile and touch devices.

1. “it’s a mobile & touch world”
Frank Garofalo
UI / Human Factors Engineer,
Esri Professional Services

2. credit
This presentation is based on a keynote and a break-out session
at SXSW Interactive 2012.
Keynote “Ambient Location and the Future of the Interface”
presented by Amber Case (Geoloqi.com)
http://schedule.sxsw.com/2012/events/event_IAP992057
Session “Teaching Touch: Tapworthy Touchscreen Design”
presented by Josh Clark (Global Moxie)
http://schedule.sxsw.com/2012/events/event_IAP10988

3. overview & objective
Perspectives on mobile / touch devices and location sensitive
applications.

4. move away from point and click interfaces
Image source: http://www.cssblog.es/guia-sobre-los-cursores-web-con-css/

5. focus on the content within the interface
& interact with the content directly
Image source: http://latimesblogs.latimes.com/technology/2010/04/ipad-kindle-ebook-sleep.html (Photo credit: Jay L. Clendenin / Los Angeles Times)

6. Fitt’s Law: further away a target, the harder it is to hit
Reference http://en.wikipedia.org/wiki/Fitts's_law
Image source: http://www.videojug.com/film/golf-fairway-woods-and-hybrids

7. same concepts apply to
touch interfaces
Image source: http://www.maplesoft.com/applicationbriefs/touch_screen.aspx

8. gestures
“Gestures are the keyboard shortcuts of touch”
• 5 fingers
• Swipe right / left
• Pinch the entire screen

9. gestures
• Gesture-based Passwords
• Slide content panels in and out with gestures
• Gesture conventions are still evolving / refining
- don’t rely on just gestures (offer as shortcuts)

10. instead of changing the brush size,
change the drawing canvas size
Image sources: http://itunes.apple.com/us/app/touchup-for-ipad/id365465261?mt=8 / http://jquerymobile.com/demos/1.1.0/docs/forms/slider/ /
http://gestureworks.com/support/supported-gestures/pinch-zoom/

11. touch interfaces
• Remove visual clutter
• Challenge: “finding what you cannot see”
- Needs to try to resemble physical action
- Needs to provide cues

12. touch interfaces
• With a little help, people will learn to use your app
• Follow social conventions when providing cues

13. visual cues
Image source: http://www.pewter.it/productpage.asp?pid=1356&lingua=u

14. visual cues
Image source: http://www.mysaltandpeppershakers.com/salt-pepper-shakers-adding-beauty-to-the-table-top/

15. visual cues
…why have a “label” when you can see the content
Image source: http://www.made-in-china.com/showroom/zbregal/product-detailGJnEyaQoumON/China-Salt-and-Pepper-Bottle.html

16. touch interfaces
• Embrace the interface… if it looks like a physical object
“make it realistic”
• Nature doesn’t have an instruction manual / help-doc

17. Image source: http://www.subtraction.com/2011/03/28/an-illustration-for-stack-america

18. just-in-time assistance
Providing in context help /assistance just as a person is about
to perform the task / action for the first time.
Think about playing a video game as a novice….

19. just as your about to take on a challenge,
the games provides a suggestion for a new action
Image source: http://xxlightsourcexx.deviantart.com/art/Mario-vs-Bowser-146659053

20. teach as you go …novice to expert to master
1) Coaching
- Active discovery, mentoring
- Temporary overlays, animations, visual cues
2) Leveling Up
- People are most prime to learn a skill when its needed
- Level 1 introductory, show skills
3) Power Ups
- Evolving to expert
- “Unlock” shortcut with explicit animation or message

21. this generation is growing up with touch devices
(as a baby sitter), not desktop mouse
Image source: http://doyle-scienceteach.blogspot.com/2010_12_01_archive.html

22. Mobile …and location sensitive interfaces

23. location sensitivity
Image source: http://www.cartoonstock.com/directory/y/you_are_here_sign.asp

24. location sensitivity
+ relevant information
Image source: http://creativeliberty.wordpress.com/2011/07/17/surfs-up-condensed-top-creativity-links-for-july-17-2011/

25. proximity to things around you
Geo-fencing!
- Provide relevant options based on location & proximity

26. actions to trigger interactions

27. “smart house”
- Setup a geo-fence around your house
- When you are within x miles from your house,
turn on lights and raise temp
- When you leave the geo-fence,
turn off any lights that are on and lower temp
- Your mobile device becomes a remote control for the world

28. “smart bus stop”
- Setup a geo-fence around a bus stop
- Automatically notified of the next arriving bus

29. “real game of pac-man”
- Setup geo-fences randomly around a city
Image source: http://www.coolest-gadgets.com/20060708/play-pacman-against-insects/

30. …an interface that responds to your actions
- Formulate some parameters to be responsive
- Who are you
- What do you need / want to do
- Where are who
- What is around you
- Here and now (ie. physical buildings, current events)
- In the future or past

31. shift from
human-computer interaction

32. shift from
human-computer interaction
to
human-data interaction

33. shift from
human-computer interaction
to
human-data interaction
(especially in a
mobile & touch world)