Your SlideShare is downloading. ×
ETUG Spring 2013 - Designing for Touch: Not Just for Mobile Anymore
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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 …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Designing for TouchNot Just for Mobile AnymorePaul D. HibbittsInteraction Design | Multi-device Experience | Education
  • 2.
  • 3.
  • 4. Coming to a Screen NearYou?
  • 5. Notebook/desktoptouchscreen poll
  • 6. Topics for Today  Touch interaction guidelines  Retrofitting an existing design (activity)  Creating a new design (activity)
  • 7. FYI:Touch friendly is alsoa practical first step towards…a multi-device friendly design!and…anytime, anywhere accessfor our students!
  • 8. Please Do Touch the Glass
  • 9.
  • 10. Touch Interaction Guidelines  Touch Target Size  Placement of Controls  Behavior  User Effort  Gestures
  • 11.
  • 12. Touch Target Size
  • 13. Touch Target Size
  • 14. Fingers,Thumbs and Placement
  • 15. Placement of Touch Targets
  • 16. Behavior
  • 17. Behavior
  • 18. User Effort
  • 19. User Effort
  • 20. Gestures
  • 21. Gesture Discoverability
  • 22. Retrofitting an Existing Design
  • 23. Making an Existing DesignTouch Friendly  Review touch interaction friendliness  Keep overall design, adjust where needed
  • 24. ACTIVITYTouch InteractionFriendliness AssessmentPlease use the providedone-page touch interaction design checklist
  • 25. Creating a New Design
  • 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. “User-centered design (UCD) isan approach to design thatgrounds the process ininformation about the peoplewho will use the product.”– UX Professionals Association
  • 28. User-Centered DesignAnalysisDesignEvaluateUser Goals& LearningObjectives
  • 29. Typical Analysis Techniques  Interviews  Observations  Personas  User Stories  Scenarios
  • 30.
  • 31. What is a User Story?  A brief description of functionality that bringsvalue to the end-users of a product
  • 32. Classic User Story Structure“As a <role>,I want to <goal/desire>so that <benefit>”
  • 33. Brainstorming Multi-deviceUser Stories  First, assume same content for all devices  Second, consider new possibilities of mobile– Device capabilities– Situational differences
  • 34. This Multi-device User StoryStructure Can Help…“As a <role> when/while <situation>,I want to <goal/desire>so that <benefit>”
  • 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. 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. ACTIVITYBrainstorm Multi-deviceUser Stories“As a <role> when/while <situation>,I want to <goal/desire> so that <benefit>”
  • 38. Web Design
  • 39. Hand:
  • 40. Hand:
  • 41. Hand:
  • 42. Hand:
  • 43. Hand:
  • 44. Hand:
  • 45. Hand:
  • 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. Web Design SketchSheets, by Jeremy P. Alford
  • 48. Using a Responsive HTMLFramework for Prototyping
  • 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. ResponsiveWeb DesignTestingTool Demo
  • 51. It’s a Wrap
  • 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. Resources Shared Today  One-Page Touch Interaction Design Checklist–  Multi-device User Story Template–  Responsive Web Design Sketch Sheets–
  • 54. Where to Next?– Multi-device experience design resources– These slides (and previous presentations)
  • 55. ThankYou! Further Questions?Contact InfoWeb: paulhibbitts.comEmail: paul@paulhibbitts.comTwitter: @hibbittsdesignLinkedIn: Course Companion