Your SlideShare is downloading. ×

The Touchable Desktop - UX Thursday 2013

699

Published on

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

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
699
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
34
Comments
0
Likes
4
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
  • 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.
  • Transcript

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

    ×