The Touchable DesktopWhen Responsive Won’t FlyWill Hacker                 UX ThursdayUX Architect, Cars.com            Chi...
The Touchable DesktopApple
Cars.com
Flickr Photo: EU Design Studio, 2012
When Responsive   Won’t Fly
Content IsNavigation
Target
Chevrolet
Chevrolet
Cars.com
Cars.com
Cars.com
Cars.com
Source: http://lukew.com/touch
Tap Targets   andWhitespace
Flickr Photo: Lance Peterson, 2011
Mint.com
Mint.com
Fitbit
Smart
Smart
Google
Cars.com
Cars.com
Cars.com
Hover States
Fitbit
ReduceForm Friction
Macy’s
Amazon
<form><input         type=“email”         autocapitalize=“off”         autocomplete=“off”/></form>
Discover
Discover
<form><input type=“number” /></form>
Cars.com
Forms : Styles  .text-input {   .text-input {  margin:0;       margin:0 0 10px;  }               width:200px;             ...
Cars.com
UXTakeaways
• Content Is Navigation• Tap Targets and Spacing• No Hover on Tablets• Reduce Form Friction
The Touchable DesktopFlickr Photo: Fahad Khan Photography, 2012
Thank YouWill Hackerwillhacker.net@willhacker
The Touchable Desktop - UX Thursday 2013
Upcoming SlideShare
Loading in …5
×

The Touchable Desktop - UX Thursday 2013

1,315 views

Published on

Presented Jan. 24, 2013, in Chicago, at the first UX Thursday event sponsored by User Interface Engineering.

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,315
On SlideShare
0
From Embeds
0
Number of Embeds
400
Actions
Shares
0
Downloads
34
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • The first thing to consider is that on a tablet, content is navigation.
  • Discover is nice enough to explain why they need the last four digits of your SSN.
  • But wouldn’t it be nicer if they also gave you a keyboard with actual numbers on it.
  • Cars redesigned homepage using context appropriate keyboard.
  • The Touchable Desktop - UX Thursday 2013

    1. 1. The Touchable DesktopWhen Responsive Won’t FlyWill Hacker UX ThursdayUX Architect, Cars.com Chicago@willhacker Jan. 24, 2013
    2. 2. The Touchable DesktopApple
    3. 3. Cars.com
    4. 4. Flickr Photo: EU Design Studio, 2012
    5. 5. When Responsive Won’t Fly
    6. 6. Content IsNavigation
    7. 7. Target
    8. 8. Chevrolet
    9. 9. Chevrolet
    10. 10. Cars.com
    11. 11. Cars.com
    12. 12. Cars.com
    13. 13. Cars.com
    14. 14. Source: http://lukew.com/touch
    15. 15. Tap Targets andWhitespace
    16. 16. Flickr Photo: Lance Peterson, 2011
    17. 17. Mint.com
    18. 18. Mint.com
    19. 19. Fitbit
    20. 20. Smart
    21. 21. Smart
    22. 22. Google
    23. 23. Cars.com
    24. 24. Cars.com
    25. 25. Cars.com
    26. 26. Hover States
    27. 27. Fitbit
    28. 28. ReduceForm Friction
    29. 29. Macy’s
    30. 30. Amazon
    31. 31. <form><input type=“email” autocapitalize=“off” autocomplete=“off”/></form>
    32. 32. Discover
    33. 33. Discover
    34. 34. <form><input type=“number” /></form>
    35. 35. Cars.com
    36. 36. Forms : Styles .text-input { .text-input { margin:0; margin:0 0 10px; } width:200px; height:25px; .button{ } ... height:25px; .button { } ... height:30px; } .text-input:focus { background-color:#ffffe0; }
    37. 37. Cars.com
    38. 38. UXTakeaways
    39. 39. • Content Is Navigation• Tap Targets and Spacing• No Hover on Tablets• Reduce Form Friction
    40. 40. The Touchable DesktopFlickr Photo: Fahad Khan Photography, 2012
    41. 41. Thank YouWill Hackerwillhacker.net@willhacker

    ×