Finger Friendly Design
•
2 gefällt mir•1,587 views
Presented Feb. 21, 2015 at Chicago Web Conf.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Finger Friendly Design
Ähnlich wie Finger Friendly Design (20)
Mehr von Will Hacker
Mehr von Will Hacker (11)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Finger Friendly Design
- 1. Finger Friendly Design Will Hacker 2.21.2015 willhacker.net @willhacker Chicago WebConf 2015
- 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. First Law of Touch Design
- 6. 6Finger Friendly Design | 2.21.2015 Who are using their fingers
- 7. 7Finger Friendly Design | 2.21.2015 We’re designing for her
- 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. 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. 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. 12Finger Friendly Design | 2.21.2015 Touch Design Template Created by Steven Hoober http://4ourth.com/TouchTemplate/
- 13. 13Finger Friendly Design | 2.21.2015
- 15. 15Finger Friendly Design | 2.21.2015
- 16. Too Close
- 17. Too Close
- 20. Photo CaptionTest on Real Devices
- 21. Hidden…
- 22. …Functions
- 23. Is That It?
- 24. OK, That’s It
- 25. Or Is It?
- 27. 27Finger Friendly Design | 2.21.2015 Huh?
- 29. Feedback
- 30. Target Size
- 31. Refined Focus
- 35. 35Finger Friendly Design | 2.21.2015
- 36. 36Finger Friendly Design | 2.21.2015
- 37. 37Finger Friendly Design | 2.21.2015
- 38. 38Finger Friendly Design | 2.21.2015
- 39. 39Finger Friendly Design | 2.21.2015
- 40. 40Finger Friendly Design | 2.21.2015
- 41. Form is Function
- 42. 42Finger Friendly Design | 2.21.2015
- 43. 43Finger Friendly Design | 2.21.2015
- 44. 44Finger Friendly Design | 2.21.2015 <form> <input type=“number” /> </form>
- 45. 45Finger Friendly Design | 2.21.2015
- 46. 46Finger Friendly Design | 2.21.2015
- 47. 47Finger Friendly Design | 2.21.2015 <form> <input type=“email” autocapitalize=“off” autocomplete=“off” /> </form>
- 48. 48Finger Friendly Design | 2.21.2015
- 49. 49Finger Friendly Design | 2.21.2015 Make Happy Fingers
- 50. Finger Friendly Design Will Hacker 2.21.2015 willhacker.net @willhacker Chicago WebConf 2015
- 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. 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
Hinweis der Redaktion
- 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
- Contact interference - Conflicting swipe gestures
- Touch targets too small and too close. This is on a mobile-specific experience when people need information fast. Use buttons instead of links.
- 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.
- 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.
- Let people see what they are typing when creating a password.
- Appendix of Touch Design Resources
- Appendix of Touch Design Resources