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
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
Notes de l'éditeur
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.