ETUG Spring 2013 - Designing for Touch: Not Just for Mobile Anymore


Published on

While student use of tablets and mobile phones continues to experience tremendous growth, touchscreens are destined for even broader use with the release of such products as Windows 8 and the Google Chomebook Pixel. In this session user experience consultant Paul Hibbitts shares some of his core design techniques and principles to create touch-friendly websites. Techniques such as user stories and responsive design sketching will be explored, along with touchscreen interaction design principles.

In addition to discussion, participants will undertake several workshop activities. While not required, participants are encouraged to bring a touch-enabled device along with a notebook to the session.

Published in: Design, Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

ETUG Spring 2013 - Designing for Touch: Not Just for Mobile Anymore

  1. 1. Designing for TouchNot Just for Mobile AnymorePaul D. HibbittsInteraction Design | Multi-device Experience | Education
  2. 2.
  3. 3.
  4. 4. Coming to a Screen NearYou?
  5. 5. Notebook/desktoptouchscreen poll
  6. 6. Topics for Today  Touch interaction guidelines  Retrofitting an existing design (activity)  Creating a new design (activity)
  7. 7. FYI:Touch friendly is alsoa practical first step towards…a multi-device friendly design!and…anytime, anywhere accessfor our students!
  8. 8. Please Do Touch the Glass
  9. 9.
  10. 10. Touch Interaction Guidelines  Touch Target Size  Placement of Controls  Behavior  User Effort  Gestures
  11. 11.
  12. 12. Touch Target Size
  13. 13. Touch Target Size
  14. 14. Fingers,Thumbs and Placement
  15. 15. Placement of Touch Targets
  16. 16. Behavior
  17. 17. Behavior
  18. 18. User Effort
  19. 19. User Effort
  20. 20. Gestures
  21. 21. Gesture Discoverability
  22. 22. Retrofitting an Existing Design
  23. 23. Making an Existing DesignTouch Friendly  Review touch interaction friendliness  Keep overall design, adjust where needed
  24. 24. ACTIVITYTouch InteractionFriendliness AssessmentPlease use the providedone-page touch interaction design checklist
  25. 25. Creating a New Design
  26. 26. Creating a New DesignThat is Also Touch Friendly  Apply a user-centered design process (as usual)  Additional design issues– Identify multi-device usage scenarios– Envisioning multi-device designs
  27. 27. “User-centered design (UCD) isan approach to design thatgrounds the process ininformation about the peoplewho will use the product.”– UX Professionals Association
  28. 28. User-Centered DesignAnalysisDesignEvaluateUser Goals& LearningObjectives
  29. 29. Typical Analysis Techniques  Interviews  Observations  Personas  User Stories  Scenarios
  30. 30.
  31. 31. What is a User Story?  A brief description of functionality that bringsvalue to the end-users of a product
  32. 32. Classic User Story Structure“As a <role>,I want to <goal/desire>so that <benefit>”
  33. 33. Brainstorming Multi-deviceUser Stories  First, assume same content for all devices  Second, consider new possibilities of mobile– Device capabilities– Situational differences
  34. 34. This Multi-device User StoryStructure Can Help…“As a <role> when/while <situation>,I want to <goal/desire>so that <benefit>”
  35. 35. Example User Story“As a student, I want to access assignmentdetails when working with my project groupso that I can ensure we’re are on-track to meetthe assignment requirements”
  36. 36. Tips for Creating User Stories  Write from the end-user perspective  Keep stories brief and as simple as possible  Start with broad/high-level stories,and decompose into smaller stories as needed  Use the “five Whys” to help reveal goals/value  Identify expected usage priority
  37. 37. ACTIVITYBrainstorm Multi-deviceUser Stories“As a <role> when/while <situation>,I want to <goal/desire> so that <benefit>”
  38. 38. Web Design
  39. 39. Hand:
  40. 40. Hand:
  41. 41. Hand:
  42. 42. Hand:
  43. 43. Hand:
  44. 44. Hand:
  45. 45. Hand:
  46. 46. Responsive Web Design Changesthe Design Process TooTraditional1.  User Research2.  Wireframes3.  Visual Design4.  Development5.  DeliveryResponsive Web Design1.  User Research2.  Content Prioritization3.  Development–  Sketch–  Wireframe–  Visual Design–  Prototype–  Test (and iterate)4.  Delivery
  47. 47. Web Design SketchSheets, by Jeremy P. Alford
  48. 48. Using a Responsive HTMLFramework for Prototyping
  49. 49. Testing Responsive Web Designs  Start with smallest device size on hand  Try it out on as many devices as possible  To supplement your testing using a touchscreendesktop/notebook, try online tools such as:– Responsivator(– Responsive Design Boomarklet(
  50. 50. ResponsiveWeb DesignTestingTool Demo
  51. 51. It’s a Wrap
  52. 52. Summary  Make all of your websites touch-friendly… now!  Touch-friendly design is a step towards bettermulti-device support  But, don’t let devices become your focus  Let’s always think first about user needs  Bring your designs to life as early as possible
  53. 53. Resources Shared Today  One-Page Touch Interaction Design Checklist–  Multi-device User Story Template–  Responsive Web Design Sketch Sheets–
  54. 54. Where to Next?– Multi-device experience design resources– These slides (and previous presentations)
  55. 55. ThankYou! Further Questions?Contact InfoWeb: paulhibbitts.comEmail: paul@paulhibbitts.comTwitter: @hibbittsdesignLinkedIn: Course Companion