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.

1. Designing for Touch
Not Just for Mobile Anymore
Paul D. Hibbitts
Interaction Design | Multi-device Experience | Education

2. http://www.flickr.com/photos/aecreations/3833459149/http://instagram.com/p/W2BuMLQLRB/#

3. http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/

4. Coming to a Screen NearYou?
http://incredibletogether.asus.com/vivobook.html

5. Notebook/desktop
touchscreen poll

6. Topics for Today
 Touch interaction guidelines
 Retrofitting an existing design (activity)
 Creating a new design (activity)

7. FYI:Touch friendly is also
a practical first step towards…
a multi-device friendly design!
and…
anytime, anywhere access
for our students!

8. Please Do Touch the Glass
http://www.flickr.com/photos/ebayink/6816581064/

9. https://www.youtube.com/watch?v=5adFf7-ZFv4

10. Touch Interaction Guidelines
 Touch Target Size
 Placement of Controls
 Behavior
 User Effort
 Gestures

11. Microsoft.comApple.com

13. Touch Target Size

14. Touch Target Size

15. Fingers,Thumbs and Placement
http://sarahlynndesign.com/blog/article/catering-to-touch-devices#

16. Placement of Touch Targets

17. Behavior

18. Behavior

19. User Effort

20. User Effort

21. Gestures
http://www.lukew.com/ff/entry.asp?1071

22. Gesture Discoverability
http://mobiledesignpatterngallery.com/

23. Retrofitting an Existing Design
http://www.flickr.com/photos/wsdot/6333431882/

24. Making an Existing Design
Touch Friendly
 Review touch interaction friendliness
 Keep overall design, adjust where needed

25. ACTIVITY
Touch Interaction
Friendliness Assessment
Please use the provided
one-page touch interaction design checklist

26. Creating a New Design
http://www.flickr.com/photos/trufflepig/1376217629/

27. Creating a New Design
That is Also Touch Friendly
 Apply a user-centered design process (as usual)
 Additional design issues
– Identify multi-device usage scenarios
– Envisioning multi-device designs

28. “User-centered design (UCD) is
an approach to design that
grounds the process in
information about the people
who will use the product.”
– UX Professionals Association

29. User-Centered Design
Analysis
Design
Evaluate
User Goals
& Learning
Objectives

30. Typical Analysis Techniques
 Interviews
 Observations
 Personas
 User Stories
 Scenarios

31. http://xkcd.com/773/

32. What is a User Story?
 A brief description of functionality that brings
value to the end-users of a product

33. Classic User Story Structure
“As a <role>,
I want to <goal/desire>
so that <benefit>”

34. Brainstorming Multi-device
User Stories
 First, assume same content for all devices
 Second, consider new possibilities of mobile
– Device capabilities
– Situational differences

35. This Multi-device User Story
Structure Can Help…
“As a <role> when/while <situation>,
I want to <goal/desire>
so that <benefit>”

36. Example User Story
“As a student, I want to access assignment
details when working with my project group
so that I can ensure we’re are on-track to meet
the assignment requirements”

37. 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

38. ACTIVITY
Brainstorm Multi-device
User Stories
“As a <role> when/while <situation>,
I want to <goal/desire> so that <benefit>”

39. http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand
Responsive Web Design

40. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

41. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

42. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

43. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

44. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

45. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

46. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

47. Responsive Web Design Changes
the Design Process Too
Traditional
1. User Research
2. Wireframes
3. Visual Design
4. Development
5. Delivery
Responsive Web Design
1. User Research
2. Content Prioritization
3. Development
– Sketch
– Wireframe
– Visual Design
– Prototype
– Test (and iterate)
4. Delivery

48. http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Responsive Web Design Sketch
Sheets, by Jeremy P. Alford

49. Using a Responsive HTML
Framework for Prototyping

50. 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 touchscreen
desktop/notebook, try online tools such as:
– Responsivator
(http://dfcb.github.io/Responsivator/)
– Responsive Design Boomarklet
(responsive.victorcoulon.fr/)

51. ResponsiveWeb Design
TestingTool Demo

52. It’s a Wrap
http://www.flickr.com/photos/katerha/6476170803/

53. Summary
 Make all of your websites touch-friendly… now!
 Touch-friendly design is a step towards better
multi-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

54. 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

55. Where to Next?
www.paulhibbitts.com/resources.html
– Multi-device experience design resources
– These slides (and previous presentations)

56. ThankYou! Further Questions?
Contact Info
Web: paulhibbitts.com
Email: paul@paulhibbitts.com
Twitter: @hibbittsdesign
LinkedIn: linkedin.com/in/paulhibbitts
Multi-device Course Companion Demo
hibbittsdesign.com/courses/cmpt-363-133-prototype/