Your SlideShare is downloading. ×
Designing for Touch
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing for Touch

447

Published on

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

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
447
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 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
    • 5. Don’t Target Devices
    • 6. Design for People
    • 7. 7Designing for Touch | June 16, 2014 Who are using their fingers
    • 8. 8Designing for Touch | June 16, 2014 We’re designing for her
    • 9. Touch Design Mechanics
    • 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
    • 13. Touch Design Challenges
    • 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?
    • 24. No Visual Cue to Swipe
    • 25. 25Designing for Touch | June 16, 2014 Huh?
    • 26. Touch Design Concepts
    • 27. Feedback
    • 28. Target Size
    • 29. Refined Focus
    • 30. Clarity of Informatio n
    • 31. Reduce Distraction
    • 32. Content is Navigation
    • 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?
    • 61. People or Devices?
    • 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
    • 67. Simply Prioritize Bulletproof
    • 68. When Not to Use Touch
    • 69. Whenever Possible
    • 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
    • 72. No (or fewer) Fingers Required
    • 73. Tying It Together
    • 74. Think Finger Friendly
    • 75. Simplify Prioritize Bulletproof
    • 76. Explore Touchless Inputs
    • 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

    ×