Designing for Touch
•
3 likes•979 views
Presented at Altamont Group’s Product, Customer and User Experience Summit – June 16, 2014
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (9)
Similar to Designing for Touch
Similar to Designing for Touch (20)
More from Will Hacker
More from Will Hacker (10)
Recently uploaded
Recently uploaded (20)
Designing for Touch
- 1. Designing for Touch Will Hacker June 16, 2014 willhacker.net @willhacker 2014 Product, Customer & User Experience Summit
- 2. Intro
- 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. First Law of Touch Design
- 7. 7Designing for Touch | June 16, 2014 Who are using their fingers
- 8. 8Designing for Touch | June 16, 2014 We’re designing for her
- 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. 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. 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
- 14. 14Designing for Touch | June 16, 2014
- 15. 15Designing for Touch | June 16, 2014
- 16. 16Designing for Touch | June 16, 2014
- 17. Photo CaptionTest on Real Devices
- 18. Too Close
- 19. Hidden…
- 20. …Function s
- 21. Is That It?
- 22. OK, That’s It
- 23. Or Is It?
- 25. 25Designing for Touch | June 16, 2014 Huh?
- 27. Feedback
- 28. Target Size
- 29. Refined Focus
- 33. 33Designing for Touch | June 16, 2014
- 34. 34Designing for Touch | June 16, 2014
- 35. 35Designing for Touch | June 16, 2014
- 36. 36Designing for Touch | June 16, 2014
- 37. 37Designing for Touch | June 16, 2014
- 38. 38Designing for Touch | June 16, 2014
- 39. Form is Function
- 40. 40Designing for Touch | June 16, 2014
- 41. 41Designing for Touch | June 16, 2014
- 42. 42Designing for Touch | June 16, 2014 <form> <input type=“number” /> </form>
- 43. 43Designing for Touch | June 16, 2014
- 44. 44Designing for Touch | June 16, 2014
- 45. 45Designing for Touch | June 16, 2014 <form> <input type=“email” autocapitalize=“off” autocomplete=“off” /> </form>
- 46. A Framework for Mobile Design
- 47. Simplify
- 48. Prioritize
- 49. Bulletproof
- 50. Simplify
- 51. 51Designing for Touch | June 16, 2014
- 52. 52Designing for Touch | June 16, 2014
- 53. Prioritize
- 54. 54Designing for Touch | June 16, 2014
- 55. 55Designing for Touch | June 16, 2014
- 56. 56Designing for Touch | June 16, 2014
- 57. 57Designing for Touch | June 16, 2014
- 58. 58Designing for Touch | June 16, 2014
- 59. 59Designing for Touch | June 16, 2014
- 60. Responsiv e?
- 62. 62Designing for Touch | June 16, 2014 I’m not a device. Got it?!?
- 63. Bulletproof
- 64. 64Designing for Touch | June 16, 2014
- 65. 65Designing for Touch | June 16, 2014
- 66. 66Designing for Touch | June 16, 2014
- 68. When Not to Use Touch
- 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. 71Designing for Touch | June 16, 2014
- 77. 77Designing for Touch | June 16, 2014 Make Happy Fingers
- 78. Designing for Touch Will Hacker June 16, 2014 willhacker.net @willhacker 2014 Product, Customer & User Experience Summit
Editor's Notes
- 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