Interaction Design For Keyboard / Touchscreen Hybrids: How Your Designs Need To Change John Whalen, UX Lead & Founder Brilliant Experience User Focus 2012 - UXPA-DC Learn how interaction design is changing in the era of "tablet transformers" and "touchscreen laptops". When do users click or touch? How do interaction designs need to change to provide a great user experience? Using some of the biggest sites on the web built here in Washington (e.g., Marriott, Living Social, USA Today) we will reveal the strengths and weaknesses of state-of-the-art designs. In a live "UX cage match" volunteers from the audience will race to find the answer to questions using different sorts of devices (small tablet, tablet with keyboard, tablet transformer, laptop), demonstrating the unique benefits and constraints of each device type. After that we will show clips from our research revealing how current designs fall short for users of touch/type hybrids. Based on the data we collected we will attempt to answer the key UX question: How are interaction design patterns changing and how will my site need to change to accommodate the next wave of devices?

1. The hybrids
are coming!
@johnwhalen #userfocus 1

2. Brilliant Experience
User Research Strategy & Ideation User Experience
Mobile Apps
@johnwhalen #userfocus

3. Brilliant Experience
@johnwhalen #userfocus

4. 1.The hybrids are coming!
2. How behavior is changing.
3. How your team should adapt.

5. 31%
of US mobile phone
23%of adults get
owners also have a news on at least
tablet computer two devices
More web connected
devices than people
by the end of 2012
@johnwhalen #userfocus Source: http://ow.ly/ektFj

6. Touch devices are proliferating
Hmm,
what’s
this?
@johnwhalen #userfocus Sources: http://ow.ly/ekMrR, http://ow.ly/ekMg3

7. Touch Type
@johnwhalen #userfocus

8. Should we build a hybrid?
@johnwhalen #userfocus Source: http://ow.ly/ekNxO

9. iPad Hybrid:
Touch + Type
@johnwhalen #userfocus

10. ASUS Android Hybrid:
Touch + Type
@johnwhalen #userfocus

11. Microsoft Surface Hybrid
@johnwhalen #userfocus

12. @johnwhalen #userfocus
Ultrabook 12

13. 40+ Ultrabooks by end in 2012!
@johnwhalen #userfocus

14. 1.The hybrids are coming!
2. How behavior is changing.
3. How your team should adapt.

15. Our study:

16. @johnwhalen #userfocus

17. @johnwhalen #userfocus

18. @johnwhalen #userfocus

19. @johnwhalen #userfocus

20. @johnwhalen #userfocus

21. @johnwhalen #userfocus

22. @johnwhalen #userfocus

23. @johnwhalen #userfocus

24. @johnwhalen #userfocus

25. @johnwhalen #userfocus

26. What we found:
@johnwhalen #userfocus

27. People use touch more than expected.
Source: http://intel.com
@johnwhalen #userfocus

28. Interaction 1. Form field touched to select
@johnwhalen #userfocus

29. Interaction 2: Finger scrolling (right hand)
@johnwhalen #userfocus

30. Interaction 3: Finger select
@johnwhalen #userfocus

31. Interaction 4: “Thumbs Up”
@johnwhalen #userfocus

32. “There is something about the
interaction of actually touching the
screen and pressing a button that feels
more engaging.” (Sonia, 26-United States)
@johnwhalen #userfocus

33. 1.The hybrids are coming!
2. How behavior is changing.
3. How your team should adapt.

34. 1. Place actions in easy to click locations
Source: lukew.com
@johnwhalen #userfocus

35. @johnwhalen #userfocus 35

36. @johnwhalen #userfocus 36

37. 2. Ensure targets are sufficiently large
Source: lukew.com
@johnwhalen #userfocus 37

38. Touch target sizes
23 x 23px (6mm)
Source: lukew.com
@johnwhalen #userfocus 38

39. @johnwhalen #userfocus

40. Reconsider your responsive designs
@johnwhalen #userfocus

41. @johnwhalen #userfocus 41

42. 3. Limit the number of clickable items
down the right where people scroll
@johnwhalen #userfocus

43. 3. Limit the number of clickable items
down the right where people scroll
@johnwhalen #userfocus

44. 4. Reconsider your responsive designs -
account for touch on large screens
@johnwhalen #userfocus

45. In Summary
1. The hybrids are coming!
2. How behavior is changing.
3. How your team should adapt.
@johnwhalen #userfocus

46. 1. The hybrids are coming!
@johnwhalen #userfocus 46

47. 2. Behavior is changing
Finger form Finger
selecting scrolling
Touch
selecting “Mr Thumbs”
@johnwhalen #userfocus 47

48. 3. How your team should adapt:
1. Put actions in touch friendly locations
@johnwhalen #userfocus 48

49. How your team should adapt:
2. Make sure your targets are large enough
@johnwhalen #userfocus 49

50. How your team should adapt:
3. Avoid links on right side of forms where
people scroll
@johnwhalen #userfocus 50

51. How your team should adapt:
4. Reconsider your responsive designs -
account for touch on large screens
@johnwhalen #userfocus 51

52. Brilliant Experience
@johnwhalen #userfocus

53. John Whalen
jw@brilliantexperience.com
@johnwhalen
User Research Strategy User Experience
Mobile
BrilliantExperience.com