Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
“it’s a mobile & touch world”Frank GarofaloUI / Human Factors Engineer,Esri Professional Services
credit  This presentation is based on a keynote and a break-out session  at SXSW Interactive 2012.  Keynote “Ambient Locat...
overview & objective  Perspectives on mobile / touch devices and location sensitive  applications.
move away from point and click interfacesImage source: http://www.cssblog.es/guia-sobre-los-cursores-web-con-css/
focus on the content within the interface                       & interact with the content directlyImage source: http://l...
Fitt’s Law: further away a target, the harder it is to hitReference http://en.wikipedia.org/wiki/Fittss_lawImage source: h...
same concepts apply to                                            touch interfacesImage source: http://www.maplesoft.com/a...
gestures  “Gestures are the keyboard shortcuts of touch”  •   5 fingers  •   Swipe right / left  •   Pinch the entire screen
gestures  •   Gesture-based Passwords  •   Slide content panels in and out with gestures  •   Gesture conventions are stil...
instead of changing the brush size,                              change the drawing canvas sizeImage sources: http://itune...
touch interfaces  •   Remove visual clutter  •   Challenge: “finding what you cannot see”       -   Needs to try to resemb...
touch interfaces  •   With a little help, people will learn to use your app  •   Follow social conventions when providing ...
visual cuesImage source: http://www.pewter.it/productpage.asp?pid=1356&lingua=u
visual cuesImage source: http://www.mysaltandpeppershakers.com/salt-pepper-shakers-adding-beauty-to-the-table-top/
visual cues      …why have a “label” when you can see the contentImage source: http://www.made-in-china.com/showroom/zbreg...
touch interfaces  •   Embrace the interface… if it looks like a physical object                            “make it realis...
Image source: http://www.subtraction.com/2011/03/28/an-illustration-for-stack-america
just-in-time assistance  Providing in context help /assistance just as a person is about  to perform the task / action for...
just as your about to take on a challenge,         the games provides a suggestion for a new actionImage source: http://xx...
teach as you go …novice to expert to master  1)   Coaching       -   Active discovery, mentoring       -   Temporary overl...
this generation is growing up with touch devices                (as a baby sitter), not desktop mouseImage source: http://...
Mobile …and location sensitive interfaces
location sensitivityImage source: http://www.cartoonstock.com/directory/y/you_are_here_sign.asp
location sensitivity                                            + relevant informationImage source: http://creativeliberty...
proximity to things around you  Geo-fencing!  -   Provide relevant options based on location & proximity
actions to trigger interactions
“smart house” -   Setup a geo-fence around your house -   When you are within x miles from your house,     turn on lights ...
“smart bus stop”  -   Setup a geo-fence around a bus stop  -   Automatically notified of the next arriving bus
“real game of pac-man”            -     Setup geo-fences randomly around a cityImage source: http://www.coolest-gadgets.co...
…an interface that responds to your actions  -   Formulate some parameters to be responsive      -   Who are you      -   ...
shift fromhuman-computer interaction
shift fromhuman-computer interaction            to  human-data interaction
shift fromhuman-computer interaction            to  human-data interaction      (especially in a  mobile & touch world)
It's a Mobile and Touch World
Upcoming SlideShare
Loading in …5
×

It's a Mobile and Touch World

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

  • Be the first to comment

It's a Mobile and Touch World

  1. 1. “it’s a mobile & touch world”Frank GarofaloUI / Human Factors Engineer,Esri Professional Services
  2. 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. 3. overview & objective Perspectives on mobile / touch devices and location sensitive applications.
  4. 4. move away from point and click interfacesImage source: http://www.cssblog.es/guia-sobre-los-cursores-web-con-css/
  5. 5. focus on the content within the interface & interact with the content directlyImage source: http://latimesblogs.latimes.com/technology/2010/04/ipad-kindle-ebook-sleep.html (Photo credit: Jay L. Clendenin / Los Angeles Times)
  6. 6. Fitt’s Law: further away a target, the harder it is to hitReference http://en.wikipedia.org/wiki/Fittss_lawImage source: http://www.videojug.com/film/golf-fairway-woods-and-hybrids
  7. 7. same concepts apply to touch interfacesImage source: http://www.maplesoft.com/applicationbriefs/touch_screen.aspx
  8. 8. gestures “Gestures are the keyboard shortcuts of touch” • 5 fingers • Swipe right / left • Pinch the entire screen
  9. 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. 10. instead of changing the brush size, change the drawing canvas sizeImage 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. 11. touch interfaces • Remove visual clutter • Challenge: “finding what you cannot see” - Needs to try to resemble physical action - Needs to provide cues
  12. 12. touch interfaces • With a little help, people will learn to use your app • Follow social conventions when providing cues
  13. 13. visual cuesImage source: http://www.pewter.it/productpage.asp?pid=1356&lingua=u
  14. 14. visual cuesImage source: http://www.mysaltandpeppershakers.com/salt-pepper-shakers-adding-beauty-to-the-table-top/
  15. 15. visual cues …why have a “label” when you can see the contentImage source: http://www.made-in-china.com/showroom/zbregal/product-detailGJnEyaQoumON/China-Salt-and-Pepper-Bottle.html
  16. 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. 17. Image source: http://www.subtraction.com/2011/03/28/an-illustration-for-stack-america
  18. 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. 19. just as your about to take on a challenge, the games provides a suggestion for a new actionImage source: http://xxlightsourcexx.deviantart.com/art/Mario-vs-Bowser-146659053
  20. 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. 21. this generation is growing up with touch devices (as a baby sitter), not desktop mouseImage source: http://doyle-scienceteach.blogspot.com/2010_12_01_archive.html
  22. 22. Mobile …and location sensitive interfaces
  23. 23. location sensitivityImage source: http://www.cartoonstock.com/directory/y/you_are_here_sign.asp
  24. 24. location sensitivity + relevant informationImage source: http://creativeliberty.wordpress.com/2011/07/17/surfs-up-condensed-top-creativity-links-for-july-17-2011/
  25. 25. proximity to things around you Geo-fencing! - Provide relevant options based on location & proximity
  26. 26. actions to trigger interactions
  27. 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. 28. “smart bus stop” - Setup a geo-fence around a bus stop - Automatically notified of the next arriving bus
  29. 29. “real game of pac-man” - Setup geo-fences randomly around a cityImage source: http://www.coolest-gadgets.com/20060708/play-pacman-against-insects/
  30. 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. 31. shift fromhuman-computer interaction
  32. 32. shift fromhuman-computer interaction to human-data interaction
  33. 33. shift fromhuman-computer interaction to human-data interaction (especially in a mobile & touch world)

×