Designing for TouchNot Just for Mobile AnymorePaul D. HibbittsInteraction Design | Multi-device Experience | Education
http://www.flickr.com/photos/aecreations/3833459149/http://instagram.com/p/W2BuMLQLRB/#
http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/
Coming to a Screen NearYou?http://incredibletogether.asus.com/vivobook.html
Notebook/desktoptouchscreen poll
Topics for Today  Touch interaction guidelines  Retrofitting an existing design (activity)  Creating a new design (acti...
FYI:Touch friendly is alsoa practical first step towards…a multi-device friendly design!and…anytime, anywhere accessfor ou...
Please Do Touch the Glasshttp://www.flickr.com/photos/ebayink/6816581064/
https://www.youtube.com/watch?v=5adFf7-ZFv4
Touch Interaction Guidelines  Touch Target Size  Placement of Controls  Behavior  User Effort  Gestures
Microsoft.comApple.com
Touch Target Size
Touch Target Size
Fingers,Thumbs and Placementhttp://sarahlynndesign.com/blog/article/catering-to-touch-devices#
Placement of Touch Targets
Behavior
Behavior
User Effort
User Effort
Gestureshttp://www.lukew.com/ff/entry.asp?1071
Gesture Discoverabilityhttp://mobiledesignpatterngallery.com/
Retrofitting an Existing Designhttp://www.flickr.com/photos/wsdot/6333431882/
Making an Existing DesignTouch Friendly  Review touch interaction friendliness  Keep overall design, adjust where needed
ACTIVITYTouch InteractionFriendliness AssessmentPlease use the providedone-page touch interaction design checklist
Creating a New Designhttp://www.flickr.com/photos/trufflepig/1376217629/
Creating a New DesignThat is Also Touch Friendly  Apply a user-centered design process (as usual)  Additional design iss...
“User-centered design (UCD) isan approach to design thatgrounds the process ininformation about the peoplewho will use the...
User-Centered DesignAnalysisDesignEvaluateUser Goals& LearningObjectives
Typical Analysis Techniques  Interviews  Observations  Personas  User Stories  Scenarios
http://xkcd.com/773/
What is a User Story?  A brief description of functionality that bringsvalue to the end-users of a product
Classic User Story Structure“As a <role>,I want to <goal/desire>so that <benefit>”
Brainstorming Multi-deviceUser Stories  First, assume same content for all devices  Second, consider new possibilities o...
This Multi-device User StoryStructure Can Help…“As a <role> when/while <situation>,I want to <goal/desire>so that <benefit>”
Example User Story“As a student, I want to access assignmentdetails when working with my project groupso that I can ensure...
Tips for Creating User Stories  Write from the end-user perspective  Keep stories brief and as simple as possible  Star...
ACTIVITYBrainstorm Multi-deviceUser Stories“As a <role> when/while <situation>,I want to <goal/desire> so that <benefit>”
http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brandResponsive Web Design
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
Responsive Web Design Changesthe Design Process TooTraditional1.  User Research2.  Wireframes3.  Visual Design4.  Developm...
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheetsResponsive Web Design SketchSheets, by Jeremy P. ...
Using a Responsive HTMLFramework for Prototyping
Testing Responsive Web Designs  Start with smallest device size on hand  Try it out on as many devices as possible  To ...
ResponsiveWeb DesignTestingTool Demo
It’s a Wraphttp://www.flickr.com/photos/katerha/6476170803/
Summary  Make all of your websites touch-friendly… now!  Touch-friendly design is a step towards bettermulti-device supp...
Resources Shared Today  One-Page Touch Interaction Design Checklist– http://bit.ly/etugtouchguidelines  Multi-device Use...
Where to Next?www.paulhibbitts.com/resources.html– Multi-device experience design resources– These slides (and previous pr...
ThankYou! Further Questions?Contact InfoWeb: paulhibbitts.comEmail: paul@paulhibbitts.comTwitter: @hibbittsdesignLinkedIn:...
ETUG Spring 2013 - Designing for Touch: Not Just for Mobile Anymore
Upcoming SlideShare
Loading in...5
×

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

1,511

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,511
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
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. http://www.flickr.com/photos/aecreations/3833459149/http://instagram.com/p/W2BuMLQLRB/#
  3. 3. http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/
  4. 4. Coming to a Screen NearYou?http://incredibletogether.asus.com/vivobook.html
  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 Glasshttp://www.flickr.com/photos/ebayink/6816581064/
  9. 9. https://www.youtube.com/watch?v=5adFf7-ZFv4
  10. 10. Touch Interaction Guidelines  Touch Target Size  Placement of Controls  Behavior  User Effort  Gestures
  11. 11. Microsoft.comApple.com
  12. 12. Touch Target Size
  13. 13. Touch Target Size
  14. 14. Fingers,Thumbs and Placementhttp://sarahlynndesign.com/blog/article/catering-to-touch-devices#
  15. 15. Placement of Touch Targets
  16. 16. Behavior
  17. 17. Behavior
  18. 18. User Effort
  19. 19. User Effort
  20. 20. Gestureshttp://www.lukew.com/ff/entry.asp?1071
  21. 21. Gesture Discoverabilityhttp://mobiledesignpatterngallery.com/
  22. 22. Retrofitting an Existing Designhttp://www.flickr.com/photos/wsdot/6333431882/
  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 Designhttp://www.flickr.com/photos/trufflepig/1376217629/
  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. http://xkcd.com/773/
  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. http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brandResponsive Web Design
  39. 39. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  40. 40. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  41. 41. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  42. 42. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  43. 43. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  44. 44. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  45. 45. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  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. http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheetsResponsive 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(http://dfcb.github.io/Responsivator/)– Responsive Design Boomarklet(responsive.victorcoulon.fr/)
  50. 50. ResponsiveWeb DesignTestingTool Demo
  51. 51. It’s a Wraphttp://www.flickr.com/photos/katerha/6476170803/
  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– http://bit.ly/etugtouchguidelines  Multi-device User Story Template– http://sdrv.ms/16LnYoQ  Responsive Web Design Sketch Sheets– http://bit.ly/etugsketchsheets
  54. 54. Where to Next?www.paulhibbitts.com/resources.html– Multi-device experience design resources– These slides (and previous presentations)
  55. 55. ThankYou! Further Questions?Contact InfoWeb: paulhibbitts.comEmail: paul@paulhibbitts.comTwitter: @hibbittsdesignLinkedIn: linkedin.com/in/paulhibbittsMulti-device Course Companion Demohibbittsdesign.com/courses/cmpt-363-133-prototype/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×