Designing for Touch
Will Hacker
June 16, 2014
willhacker.net
@willhacker 2014 Product, Customer & User Experience Summit
Intro
Designing for Touch | June 16, 2014 3
I Write Things…
Mobile Focused
• Why we prototype
• Mobile design concepts
• Specifi...
First Law of Touch Design
Don’t
Target
Devices
Design for
People
7Designing for Touch | June 16, 2014
Who are using their fingers
8Designing for Touch | June 16, 2014
We’re designing for her
Touch Design Mechanics
10Designing for Touch | June 16, 2014
Source: UXmatters
Author: Steven Hoober
URL: http://www.uxmatters.com/mt/archives/20...
11Designing for Touch | June 16, 2014
Source: UXmatters
Author: Steven Hoober
URL: http://www.uxmatters.com/mt/archives/20...
12Designing for Touch | June 16, 2014
Source: UXmatters
Author: Steven Hoober
URL: http://www.uxmatters.com/mt/archives/20...
Touch Design Challenges
14Designing for Touch | June 16, 2014
15Designing for Touch | June 16, 2014
16Designing for Touch | June 16, 2014
Photo CaptionTest on Real Devices
Too Close
Hidden…
…Function
s
Is That It?
OK,
That’s It
Or Is It?
No Visual
Cue to
Swipe
25Designing for Touch | June 16, 2014
Huh?
Touch Design Concepts
Feedback
Target Size
Refined
Focus
Clarity of
Informatio
n
Reduce
Distraction
Content is Navigation
33Designing for Touch | June 16, 2014
34Designing for Touch | June 16, 2014
35Designing for Touch | June 16, 2014
36Designing for Touch | June 16, 2014
37Designing for Touch | June 16, 2014
38Designing for Touch | June 16, 2014
Form is Function
40Designing for Touch | June 16, 2014
41Designing for Touch | June 16, 2014
42Designing for Touch | June 16, 2014
<form>
<input type=“number” />
</form>
43Designing for Touch | June 16, 2014
44Designing for Touch | June 16, 2014
45Designing for Touch | June 16, 2014
<form>
<input
type=“email”
autocapitalize=“off”
autocomplete=“off”
/>
</form>
A Framework for Mobile Design
Simplify
Prioritize
Bulletproof
Simplify
51Designing for Touch | June 16, 2014
52Designing for Touch | June 16, 2014
Prioritize
54Designing for Touch | June 16, 2014
55Designing for Touch | June 16, 2014
56Designing for Touch | June 16, 2014
57Designing for Touch | June 16, 2014
58Designing for Touch | June 16, 2014
59Designing for Touch | June 16, 2014
Responsiv
e?
People or
Devices?
62Designing for Touch | June 16, 2014
I’m not a device. Got it?!?
Bulletproof
64Designing for Touch | June 16, 2014
65Designing for Touch | June 16, 2014
66Designing for Touch | June 16, 2014
Simply
Prioritize
Bulletproof
When Not to Use Touch
Whenever
Possible
Designing for Touch | June 16, 2014 70
Sensors Are Your Friend
• Camera
• Microphone
• GPS
• Compass
• Accelerometer
• Ema...
71Designing for Touch | June 16, 2014
No
(or fewer)
Fingers
Required
Tying It Together
Think
Finger
Friendly
Simplify
Prioritize
Bulletproof
Explore
Touchless
Inputs
77Designing for Touch | June 16, 2014
Make Happy Fingers
Designing for Touch
Will Hacker
June 16, 2014
willhacker.net
@willhacker 2014 Product, Customer & User Experience Summit
Upcoming SlideShare
Loading in...5
×

Designing for Touch

480

Published on

Presented at Altamont Group’s Product, Customer and User Experience Summit – June 16, 2014

Published in: Design, Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
480
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • If your users are doing this, you are asking too much of them and not enough of your design team.
  • A 2.5 Year-Old Has A First Encounter with An iPad

    http://www.youtube.com/watch?v=pT4EbM7dCMs
  • Source: UXmatters
    Author: Steven Hoober
    URL: http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php

  • Source: UXmatters
    Author: Steven Hoober
    URL: http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php

  • Source: UXmatters
    Author: Steven Hoober
    URL: http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php

  • Contact interference - Conflicting swipe gestures
  • Touch targets too small and too close.

    This was after an NY Times website redesign for tablet users.

    Maybe they want people to use the app.

    But they shouldn’t force them to.
  • Feedback is immediate and extends to beyond the area obscured by the thumb.
  • Edward Tufte refers to the pixels to data ratio. This design fails Tufte’s test by including so called “pixel junk”.

    But the use of the frosted background, large font, and central location bring the most important information to the forefront.
  • Chevy’s website has swipable panels in its slideshow and gives indications at the top left and lower right that there is more content in each direction.

    After one panel slides, it’s apparent how it works.
  • Chevy’s website has swipable panels in its slideshow and gives indications at the top left and lower right that there is more content in each direction.

    After one panel slides, it’s apparent how it works.
  • Chevy’s website has swipable panels in its slideshow and gives indications at the top left and lower right that there is more content in each direction.

    After one panel slides, it’s apparent how it works.
  • Staples site uses the same visual pattern and the left and right arrows can be tapped.

    But there is no swipe gesture support.
  • The links for Vehicle Tools are too close together and it’s easy to tap the wrong one on a tablet.

    The three bottom buttons are nicely sized and spaced for fingers.
  • The links for Vehicle Tools are too close together and it’s easy to tap the wrong one on a tablet.

    The three bottom buttons are nicely sized and spaced for fingers.
  • Chevy asks for a numeric value, but gives you a default QWERTY keyboard.
  • The user has to switch keyboards to get to the numeric values.
  • This HTML5 form input eliminates the need for keyboard switching by serving up a contextually appropriate keyboard.
  • Chevy asks for an email address, but gives you a default QWERTY keyboard.
  • Keyboard switching is again needed to the @ sign.
  • This HTML5 form input eliminates the need for keyboard switching by serving up a contextually appropriate keyboard.
  • I’m going to show you a simple framework I use when thinking about these things on mobile devices.
  • TripAdvisor desktop profile management
  • TripAdvisor mobile profile management
  • TripAdvisor account creation – desktop and mobile
  • TripAdvisor account creation – desktop fields dropped from mobile
  • Get the basic info up front and create the account
    Email them saying they can click through to answer four more questions right away
    Or they can wait and finish when that are at their computer
  • Gmail email deletion
  • Amazon delete from cart
  • Facebook deactivate account
    Can only deactivate, not delete
    And you have to enter password to do it
  • iOS 8 will allow you to scan a credit card to fill in a web form with payment information.
  • Flickr Photo: Fahad Khan Photography, 2012
  • Designing for Touch

    1. 1. Designing for Touch Will Hacker June 16, 2014 willhacker.net @willhacker 2014 Product, Customer & User Experience Summit
    2. 2. Intro
    3. 3. Designing for Touch | June 16, 2014 3 I Write Things… Mobile Focused • Why we prototype • Mobile design concepts • Specific features in Axure 7 AxureMobileBook.com
    4. 4. First Law of Touch Design
    5. 5. Don’t Target Devices
    6. 6. Design for People
    7. 7. 7Designing for Touch | June 16, 2014 Who are using their fingers
    8. 8. 8Designing for Touch | June 16, 2014 We’re designing for her
    9. 9. Touch Design Mechanics
    10. 10. 10Designing for Touch | June 16, 2014 Source: UXmatters Author: Steven Hoober URL: http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php
    11. 11. 11Designing for Touch | June 16, 2014 Source: UXmatters Author: Steven Hoober URL: http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php
    12. 12. 12Designing for Touch | June 16, 2014 Source: UXmatters Author: Steven Hoober URL: http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php
    13. 13. Touch Design Challenges
    14. 14. 14Designing for Touch | June 16, 2014
    15. 15. 15Designing for Touch | June 16, 2014
    16. 16. 16Designing for Touch | June 16, 2014
    17. 17. Photo CaptionTest on Real Devices
    18. 18. Too Close
    19. 19. Hidden…
    20. 20. …Function s
    21. 21. Is That It?
    22. 22. OK, That’s It
    23. 23. Or Is It?
    24. 24. No Visual Cue to Swipe
    25. 25. 25Designing for Touch | June 16, 2014 Huh?
    26. 26. Touch Design Concepts
    27. 27. Feedback
    28. 28. Target Size
    29. 29. Refined Focus
    30. 30. Clarity of Informatio n
    31. 31. Reduce Distraction
    32. 32. Content is Navigation
    33. 33. 33Designing for Touch | June 16, 2014
    34. 34. 34Designing for Touch | June 16, 2014
    35. 35. 35Designing for Touch | June 16, 2014
    36. 36. 36Designing for Touch | June 16, 2014
    37. 37. 37Designing for Touch | June 16, 2014
    38. 38. 38Designing for Touch | June 16, 2014
    39. 39. Form is Function
    40. 40. 40Designing for Touch | June 16, 2014
    41. 41. 41Designing for Touch | June 16, 2014
    42. 42. 42Designing for Touch | June 16, 2014 <form> <input type=“number” /> </form>
    43. 43. 43Designing for Touch | June 16, 2014
    44. 44. 44Designing for Touch | June 16, 2014
    45. 45. 45Designing for Touch | June 16, 2014 <form> <input type=“email” autocapitalize=“off” autocomplete=“off” /> </form>
    46. 46. A Framework for Mobile Design
    47. 47. Simplify
    48. 48. Prioritize
    49. 49. Bulletproof
    50. 50. Simplify
    51. 51. 51Designing for Touch | June 16, 2014
    52. 52. 52Designing for Touch | June 16, 2014
    53. 53. Prioritize
    54. 54. 54Designing for Touch | June 16, 2014
    55. 55. 55Designing for Touch | June 16, 2014
    56. 56. 56Designing for Touch | June 16, 2014
    57. 57. 57Designing for Touch | June 16, 2014
    58. 58. 58Designing for Touch | June 16, 2014
    59. 59. 59Designing for Touch | June 16, 2014
    60. 60. Responsiv e?
    61. 61. People or Devices?
    62. 62. 62Designing for Touch | June 16, 2014 I’m not a device. Got it?!?
    63. 63. Bulletproof
    64. 64. 64Designing for Touch | June 16, 2014
    65. 65. 65Designing for Touch | June 16, 2014
    66. 66. 66Designing for Touch | June 16, 2014
    67. 67. Simply Prioritize Bulletproof
    68. 68. When Not to Use Touch
    69. 69. Whenever Possible
    70. 70. Designing for Touch | June 16, 2014 70 Sensors Are Your Friend • Camera • Microphone • GPS • Compass • Accelerometer • Email (not a sensor, but as an input)
    71. 71. 71Designing for Touch | June 16, 2014
    72. 72. No (or fewer) Fingers Required
    73. 73. Tying It Together
    74. 74. Think Finger Friendly
    75. 75. Simplify Prioritize Bulletproof
    76. 76. Explore Touchless Inputs
    77. 77. 77Designing for Touch | June 16, 2014 Make Happy Fingers
    78. 78. Designing for Touch Will Hacker June 16, 2014 willhacker.net @willhacker 2014 Product, Customer & User Experience Summit

    ×