It's a Mobile and Touch World

  • 3,878 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,878
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. “it’s a mobile & touch world”Frank GarofaloUI / 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 interfacesImage source: http://www.cssblog.es/guia-sobre-los-cursores-web-con-css/
  • 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. 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. same concepts apply to touch interfacesImage 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 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. 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 cuesImage source: http://www.pewter.it/productpage.asp?pid=1356&lingua=u
  • 14. visual cuesImage 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 contentImage 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 actionImage 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 mouseImage source: http://doyle-scienceteach.blogspot.com/2010_12_01_archive.html
  • 22. Mobile …and location sensitive interfaces
  • 23. location sensitivityImage source: http://www.cartoonstock.com/directory/y/you_are_here_sign.asp
  • 24. location sensitivity + relevant informationImage 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 cityImage 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 fromhuman-computer interaction
  • 32. shift fromhuman-computer interaction to human-data interaction
  • 33. shift fromhuman-computer interaction to human-data interaction (especially in a mobile & touch world)