Michael Mace, Head Mobile Strategist at User Testing, on Design Traps

685 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
685
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Michael Mace, Head Mobile Strategist at User Testing, on Design Traps

  1. 1. @usertesting @michaelmace @usertesting @michaelmace Four Traps The Most Common Mistakes Made by Companies Moving to a New Platform Results from real-world tests by
  2. 2. @usertesting @michaelmace @usertesting @michaelmace Look Over a User’s Shoulder •Test for usability and affinity •Check user “journeys” •Settle disputes Analytics tell you  What they did UserTesting tells you  Why  What they think
  3. 3. @usertesting @michaelmace @usertesting @michaelmace •Two startups, ten years at Apple, six years at Palm/PalmSource •Product, marketing, strategy roles •Blog: http://mobileopportunity.blogspot.com About Me
  4. 4. @usertesting @michaelmace @usertesting @michaelmace Summary • New computing paradigms usually cripple the current leaders • Four traps • New platforms require new reflexes • Ten steps to success
  5. 5. @usertesting @michaelmace @usertesting @michaelmace Agenda •Why transitions are dangerous •The four traps •How to avoid the traps
  6. 6. @usertesting @michaelmace @usertesting @michaelmace Agenda •Why transitions are dangerous •The four traps •How to avoid the traps
  7. 7. @usertesting @michaelmace @usertesting @michaelmace
  8. 8. @usertesting @michaelmace Leading applications @usertesting @michaelmace
  9. 9. @usertesting @michaelmace Leading applications @usertesting @michaelmace
  10. 10. @usertesting @michaelmace Leading vendors @usertesting @michaelmace
  11. 11. @usertesting @michaelmace Leading vendors @usertesting @michaelmace
  12. 12. @usertesting @michaelmace
  13. 13. @usertesting @michaelmace @usertesting @michaelmace Why? • Users reconsider commitments @usertesting @michaelmace
  14. 14. @usertesting @michaelmace @usertesting @michaelmace Why? • Rules of good product design change @usertesting @michaelmace
  15. 15. @usertesting @michaelmace @usertesting @michaelmace Why? • Leaders usually underestimate the challenge @usertesting @michaelmace
  16. 16. @usertesting @michaelmace @usertesting @michaelmace Threat and Opportunity •The good news: Incumbents are vulnerable •The bad news: So are you
  17. 17. @usertesting @michaelmace @usertesting @michaelmace Agenda •Why transitions are dangerous •Four traps •Legacy •How to avoid the traps
  18. 18. @usertesting @michaelmace @usertesting @michaelmace Legacy • “Porting” to the new platform • Usage flow driven by previous version • Too many or too few features • Broken features
  19. 19. @usertesting @michaelmace @usertesting @michaelmace PC Education Site
  20. 20. @usertesting @michaelmace @usertesting @michaelmace PC Education Site
  21. 21. @usertesting @michaelmace @usertesting @michaelmace Placing an Order
  22. 22. @usertesting @michaelmace @usertesting @michaelmace Rethink, Don’t Port • Learn the new paradigm 1. Best practice: Dedicated teams 2. Minimum necessary: Dedicated product manager(s) • Separate what you do from how you do it 1. Windows Mobile vs. Windows Phone • Break down your app 1. What do they need on this platform? 2. Multiple apps? • Focus on the mainstream 80%
  23. 23. @usertesting @michaelmace @usertesting @michaelmace Where Does the Device Live?
  24. 24. @usertesting @michaelmace @usertesting @michaelmace Agenda •Why transitions are dangerous •The four traps •Legacy •Fear •How to avoid the traps
  25. 25. @usertesting @michaelmace @usertesting @michaelmace Smartphone Fears • Hackers 1. Handset company, OS vendor, carrier, app developer
  26. 26. @usertesting @michaelmace @usertesting @michaelmace Smartphone Fears • Hackers 1. Handset company, OS vendor, carrier, app developer • Accidentally opting in
  27. 27. @usertesting @michaelmace @usertesting @michaelmace Smartphone Fears • Hackers 1. Handset company, OS vender, carrier, app developer • Accidentally opting in • Automatic social posts
  28. 28. @usertesting @michaelmace @usertesting @michaelmace Quotes • “I’m not going to like or dislike.” • “As soon as I’m done with this test I’m going to be checking on Facebook to see what kind of posting it did.” • “What are ‘social choices’? Are those apps I have to use with other people, or apps my friends shared with me?” Greg Nudelman, Android Design Patterns
  29. 29. @usertesting @michaelmace @usertesting @michaelmace What to Do • Use trustmarks • Display the opt-ins • Give absolute social clarity • Let people move between devices
  30. 30. @usertesting @michaelmace @usertesting @michaelmace Agenda •Why transitions are dangerous •The four traps •Legacy •Fear •Confusion •How to avoid the traps
  31. 31. @usertesting @michaelmace @usertesting @michaelmace Sources of Confusion • Unreadable elements 1. Too small
  32. 32. @usertesting @michaelmace @usertesting @michaelmace • Unreadable elements 1. Too small 2. Low contrast: Sunlight, saving batteries This text may disappear in direct sunlight This text may disappear in direct sunlight Sources of Confusion
  33. 33. @usertesting @michaelmace @usertesting @michaelmace • Unreadable elements 1. Too small 2. Low contrast: Sunlight, saving batteries This text may disappear in direct sunlight This text may disappear in direct sunlight Sources of Confusion
  34. 34. @usertesting @michaelmace Sources of Confusion • Unreadable elements 1. Too small 2. Low contrast: Sunlight, saving batteries • Unusable elements @usertesting @michaelmace
  35. 35. @usertesting @michaelmace Sources of Confusion • Unreadable elements 1. Too small 2. Low contrast: Sunlight, saving batteries • Unusable elements @usertesting @michaelmace
  36. 36. @usertesting @michaelmace @usertesting @michaelmace Sources of Confusion 2 • Cryptic buttons and text • Slow response • Menu madness • Lack of help • Beauty vs. productivity
  37. 37. @usertesting @michaelmace @usertesting @michaelmace Confusing Terms & Buttons
  38. 38. @usertesting @michaelmace @usertesting @michaelmace Icon Confusion @usertesting @michaelmace
  39. 39. @usertesting @michaelmace @usertesting @michaelmace
  40. 40. @usertesting @michaelmace @usertesting @michaelmace Bad News • Where there is no standard, Icons are just pretty pictures • Gestures and swipes too @usertesting @michaelmace
  41. 41. @usertesting @michaelmace @usertesting @michaelmace Menus, Menus, Menus
  42. 42. @usertesting @michaelmace @usertesting @michaelmace • Functionality is the highest form of beauty • Avoid confusing UI 1. When in doubt, use text 2. Avoid multilevel menus • Respond instantly 1. Button and window animation mask delays • Great help 1. Context sensitive, searchable, always available What to Do
  43. 43. @usertesting @michaelmace @usertesting @michaelmace Help Done Right: WebMD
  44. 44. @usertesting @michaelmace @usertesting @michaelmace Help Done Right: Snapseed
  45. 45. @usertesting @michaelmace @usertesting @michaelmace Agenda •Why transitions are dangerous •The four traps •Legacy •Fear •Confusion •Boredom •How to avoid the traps
  46. 46. @usertesting @michaelmace @usertesting @michaelmace Short Attention Span Theatre @usertesting @michaelmace
  47. 47. @usertesting @michaelmace @usertesting @michaelmace Top Turnoffs • What’s the point? • Too hard to learn • Too many social prompts • Too many or too few controls • B-o-r-i-n-g
  48. 48. @usertesting @michaelmace @usertesting @michaelmace Tone of Voice
  49. 49. @usertesting @michaelmace @usertesting @michaelmace Web App Design Ship an embarrassingly primitive version Where do we lose people? Guess why Build a fix
  50. 50. @usertesting @michaelmace @usertesting @michaelmace Web App Design Ship a slightly less embarrassing version Where do we lose people? Guess why Build a fix
  51. 51. @usertesting @michaelmace @usertesting @michaelmace Mobile App Design Ship an embarrassingly primitive version Get trashed in the App Store Desperately try to fix it “Mobile isn’t a good match for our business”
  52. 52. @usertesting @michaelmace @usertesting @michaelmace What to Do •Run both analytics and user tests •Analytics tell you what happened, user tests tell you why •Goal: No more guessing on what to fix •Test early, test often, before you ship •Test frequently, up to five users at a time, throughout the development process •Test for usability and emotional engagement
  53. 53. @usertesting @michaelmace @usertesting @michaelmace Agenda •Why transitions are dangerous •The four traps •How to avoid the traps
  54. 54. @usertesting @michaelmace @usertesting @michaelmace How to Integrate User Tests • Three-screen user testing (smartphone, tablet, computer) • Apps turned every week
  55. 55. @usertesting @michaelmace @usertesting @michaelmace Remember 1. Never just port; rethink 2. Design for the mainstream 80% 3. Avoid social anxiety 4. Make it work, then make it pretty 5. When in doubt, include text 6. Avoid multilevel menus 7. Respond instantly 8. Give superb help 9. Dedicated teams, or dedicated product managers 10. Test in small batches, throughout development
  56. 56. @usertesting @michaelmace @usertesting @michaelmace • Free test code: usertestme • Download the whitepaper: http://info.usertesting.com/ TheFourMobileTraps.html • mike@usertesting.com mobileopportunity.blogspot.com

×