Your SlideShare is downloading. ×
  • Like
  • Save
The Touchable Desktop - UX Thursday 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The Touchable Desktop - UX Thursday 2013

  • 673 views
Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
673
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
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