Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Finger Friendly Design
Will Hacker
2.21.2015
willhacker.net
@willhacker
Chicago
WebConf
2015
Finger Friendly Design | 2.21.2015 2
Intro
Lead Interaction Designer,
GE Capital
5+ years of mobile design
Author / Mobile...
First Law of Touch Design
Don’t Target
Devices
Design for
People
6Finger Friendly Design | 2.21.2015
Who are using their fingers
7Finger Friendly Design | 2.21.2015
We’re designing for her
Touch Design Mechanics
9Finger Friendly Design | 2.21.2015
Source: UXmatters
Author: Steven Hoober
URL: http://www.uxmatters.com/mt/archives/2013...
10Finger Friendly Design | 2.21.2015
Source: UXmatters
Author: Steven Hoober
URL: http://www.uxmatters.com/mt/archives/201...
11Finger Friendly Design | 2.21.2015
Source: UXmatters
Author: Steven Hoober
URL: http://www.uxmatters.com/mt/archives/201...
12Finger Friendly Design | 2.21.2015
Touch Design Template
Created by Steven Hoober
http://4ourth.com/TouchTemplate/
13Finger Friendly Design | 2.21.2015
Touch Design Challenges
15Finger Friendly Design | 2.21.2015
Too Close
Too Close
Scroll Inside
a Scroll
Scroll Inside
a Scroll
Photo CaptionTest on Real Devices
Hidden…
…Functions
Is That It?
OK,
That’s It
Or Is It?
No Visual
Cue to
Swipe
27Finger Friendly Design | 2.21.2015
Huh?
Touch Design Concepts
Feedback
Target Size
Refined
Focus
Clarity of
Information
Reduce
Distraction
Content is Navigation
35Finger Friendly Design | 2.21.2015
36Finger Friendly Design | 2.21.2015
37Finger Friendly Design | 2.21.2015
38Finger Friendly Design | 2.21.2015
39Finger Friendly Design | 2.21.2015
40Finger Friendly Design | 2.21.2015
Form is Function
42Finger Friendly Design | 2.21.2015
43Finger Friendly Design | 2.21.2015
44Finger Friendly Design | 2.21.2015
<form>
<input type=“number” />
</form>
45Finger Friendly Design | 2.21.2015
46Finger Friendly Design | 2.21.2015
47Finger Friendly Design | 2.21.2015
<form>
<input
type=“email”
autocapitalize=“off”
autocomplete=“off”
/>
</form>
48Finger Friendly Design | 2.21.2015
49Finger Friendly Design | 2.21.2015
Make Happy Fingers
Finger Friendly Design
Will Hacker
2.21.2015
willhacker.net
@willhacker
Chicago
WebConf
2015
Finger Friendly Design | 2.21.2015 51
Appendix: Touch Design Resources
• Steven Hoober | Touch Overlays: http://4ourth.com...
Finger Friendly Design | 2.21.2015 52
Appendix: Touch Design Resources
• Will Hacker | Mobile Design Framework: http://uxm...
Upcoming SlideShare
Loading in …5
×

Finger Friendly Design

1,319 views

Published on

Presented Feb. 21, 2015 at Chicago Web Conf.

Published in: Design
  • Be the first to comment

Finger Friendly Design

  1. 1. Finger Friendly Design Will Hacker 2.21.2015 willhacker.net @willhacker Chicago WebConf 2015
  2. 2. Finger Friendly Design | 2.21.2015 2 Intro Lead Interaction Designer, GE Capital 5+ years of mobile design Author / Mobile Prototyping with Axure 7 willhacker.net / @willhacker
  3. 3. First Law of Touch Design
  4. 4. Don’t Target Devices
  5. 5. Design for People
  6. 6. 6Finger Friendly Design | 2.21.2015 Who are using their fingers
  7. 7. 7Finger Friendly Design | 2.21.2015 We’re designing for her
  8. 8. Touch Design Mechanics
  9. 9. 9Finger Friendly Design | 2.21.2015 Source: UXmatters Author: Steven Hoober URL: http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php
  10. 10. 10Finger Friendly Design | 2.21.2015 Source: UXmatters Author: Steven Hoober URL: http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php
  11. 11. 11Finger Friendly Design | 2.21.2015 Source: UXmatters Author: Steven Hoober URL: http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php
  12. 12. 12Finger Friendly Design | 2.21.2015 Touch Design Template Created by Steven Hoober http://4ourth.com/TouchTemplate/
  13. 13. 13Finger Friendly Design | 2.21.2015
  14. 14. Touch Design Challenges
  15. 15. 15Finger Friendly Design | 2.21.2015
  16. 16. Too Close
  17. 17. Too Close
  18. 18. Scroll Inside a Scroll
  19. 19. Scroll Inside a Scroll
  20. 20. Photo CaptionTest on Real Devices
  21. 21. Hidden…
  22. 22. …Functions
  23. 23. Is That It?
  24. 24. OK, That’s It
  25. 25. Or Is It?
  26. 26. No Visual Cue to Swipe
  27. 27. 27Finger Friendly Design | 2.21.2015 Huh?
  28. 28. Touch Design Concepts
  29. 29. Feedback
  30. 30. Target Size
  31. 31. Refined Focus
  32. 32. Clarity of Information
  33. 33. Reduce Distraction
  34. 34. Content is Navigation
  35. 35. 35Finger Friendly Design | 2.21.2015
  36. 36. 36Finger Friendly Design | 2.21.2015
  37. 37. 37Finger Friendly Design | 2.21.2015
  38. 38. 38Finger Friendly Design | 2.21.2015
  39. 39. 39Finger Friendly Design | 2.21.2015
  40. 40. 40Finger Friendly Design | 2.21.2015
  41. 41. Form is Function
  42. 42. 42Finger Friendly Design | 2.21.2015
  43. 43. 43Finger Friendly Design | 2.21.2015
  44. 44. 44Finger Friendly Design | 2.21.2015 <form> <input type=“number” /> </form>
  45. 45. 45Finger Friendly Design | 2.21.2015
  46. 46. 46Finger Friendly Design | 2.21.2015
  47. 47. 47Finger Friendly Design | 2.21.2015 <form> <input type=“email” autocapitalize=“off” autocomplete=“off” /> </form>
  48. 48. 48Finger Friendly Design | 2.21.2015
  49. 49. 49Finger Friendly Design | 2.21.2015 Make Happy Fingers
  50. 50. Finger Friendly Design Will Hacker 2.21.2015 willhacker.net @willhacker Chicago WebConf 2015
  51. 51. Finger Friendly Design | 2.21.2015 51 Appendix: Touch Design Resources • Steven Hoober | Touch Overlays: http://4ourth.com/TouchOverlay/ • Steven Hoober | Touch Template: http://4ourth.com/TouchTemplate/ • Steven Hoober | Misconceptions About Touch: http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions- about-touch.php • Josh Clark | Designing for Fingers and Thumbs: http://www.uxmatters.com/mt/archives/2013/11/design-for-fingers-and-thumbs- instead-of-touch.php • Android Design: https://developer.android.com/design/index.html • iOS Design: https://developer.apple.com/library/ios/documentation/UserExperience/Concep tual/MobileHIG/
  52. 52. Finger Friendly Design | 2.21.2015 52 Appendix: Touch Design Resources • Will Hacker | Mobile Design Framework: http://uxmag.com/articles/making- mobile-design-more-productive-in-three-simple-steps • Will Hacker | Sketching a Mobile UX: http://www.uxmatters.com/mt/archives/2014/12/sketching-your-way-to-a- mobile-ux-design.php

×