Mobile design best practices

  • 6,333 views
Uploaded on

A talk I gave at Charlotte User Experience Meetup Group on what makes a great mobile app or site.

A talk I gave at Charlotte User Experience Meetup Group on what makes a great mobile app or site.

More in: Design , Technology , Business
  • 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
6,333
On Slideshare
0
From Embeds
0
Number of Embeds
15

Actions

Shares
Downloads
23
Comments
0
Likes
6

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

Transcript

  • 1. Hi.Tuesday, August 28, 12
  • 2. Event hashtag: #shutupnerdTuesday, August 28, 12
  • 3. Event hashtag: #cltuxTuesday, August 28, 12
  • 4. Mobile apps give a focused, quick and beautiful experience that you don’t usually get on the web.Tuesday, August 28, 12
  • 5. Mobile Design Best Practice #1 Focus.Tuesday, August 28, 12
  • 6. Science-based chart using hearts from The Legend of Zelda to represent how many chances users are willing to give you Nope. Yep.Tuesday, August 28, 12
  • 7. Tuesday, August 28, 12
  • 8. What users do to lame appsTuesday, August 28, 12
  • 9. What users do to boring appsTuesday, August 28, 12
  • 10. What you want them to doTuesday, August 28, 12
  • 11. Tuesday, August 28, 12
  • 12. Mobile Design Best Practice #2 Practice touch- based design.Tuesday, August 28, 12
  • 13. Mobile Design Best Practice #3 The fold is dead. Kind of. Well, mostly.Tuesday, August 28, 12
  • 14. Mobile Design Best Practice #4 Ask people to save only when it’s absolutely necessary.Tuesday, August 28, 12
  • 15. Tuesday, August 28, 12
  • 16. Mobile Design Best Practice #5 Plan it before you design it.Tuesday, August 28, 12
  • 17. Mobile Design Best Practice #6 Gestures should only augment your experience.Tuesday, August 28, 12
  • 18. Standard gestures you can use Tap & Hold Single Tap Double Tap Scroll Zoom Pinch Swipe FlickTuesday, August 28, 12
  • 19. Mobile Design Best Practice #7 Please God don’t abuse Push notifications.Tuesday, August 28, 12
  • 20. TweetBot’s notification choicesTuesday, August 28, 12
  • 21. Mobile Design Best Practice #8 Figure out where your app settings will live.Tuesday, August 28, 12
  • 22. iBooks’ settings live in two spotsTuesday, August 28, 12
  • 23. Mobile Design Best Practice #9 Don’t make users read a manual to use your app.Tuesday, August 28, 12
  • 24. Popular Science gets a little too nerdy with their instructionsTuesday, August 28, 12
  • 25. My reaction to this kind of nonsense.Tuesday, August 28, 12
  • 26. Tuesday, August 28, 12
  • 27. Mobile Design Best Practice #9.5ish Show, don’t tell.Tuesday, August 28, 12
  • 28. Coach mark examplesTuesday, August 28, 12
  • 29. Mobile Design Best Practice #10 Use the built-in apps as a starting point.Tuesday, August 28, 12
  • 30. Mobile Design Best Practice #11 Read Apple’s Human Interface Guidelines.Tuesday, August 28, 12
  • 31. Mobile Design Best Practice #12 Use caution when creating your own design patterns.Tuesday, August 28, 12
  • 32. So, how do I use this thing? Wait, books are under music?Tuesday, August 28, 12
  • 33. Mobile Design Best Practice #13 Ease up on the realism, man.Tuesday, August 28, 12
  • 34. Skeumorphic interfaces can add unnecessary complicationTuesday, August 28, 12
  • 35. Comparing iBooks, Kindle and InstapaperTuesday, August 28, 12
  • 36. Podcasts brings all kinds of goodies to the realism partyTuesday, August 28, 12
  • 37. Mobile Design Best Practice #13 Use a grid.Tuesday, August 28, 12
  • 38. Mobile Design Best Practice #14 Simplify forms.Tuesday, August 28, 12
  • 39. Example of how left-aligned form labels fail on mobile devices Thanks to @uxmovement for the imageTuesday, August 28, 12
  • 40. Mobile Design Best Practice #15 Be consistent.Tuesday, August 28, 12
  • 41. Example of a style guideTuesday, August 28, 12
  • 42. Mobile Design Best Practice #16 Make it look tappable.Tuesday, August 28, 12
  • 43. Mobile Design Best Practice #17 Give users feedback.Tuesday, August 28, 12
  • 44. Mobile Design Best Practice #18 Learn how to write good.Tuesday, August 28, 12
  • 45. Mobile Design Best Practice #19 Be social.Tuesday, August 28, 12
  • 46. Mobile Design Best Practice #20 Touch targets should be fingertip-sized.Tuesday, August 28, 12
  • 47. Apple’s Calculator app has some nice, tappable buttonsTuesday, August 28, 12
  • 48. Mobile Design Best Practice #21 Design for all environmentsTuesday, August 28, 12
  • 49. Mobile Design Best Practice #22 Use analytics.Tuesday, August 28, 12
  • 50. Mobile Design Best Practice #22 and a half Avoid religious debates.Tuesday, August 28, 12
  • 51. Mobile Design Best Practice #23 Listen to your users.Tuesday, August 28, 12
  • 52. Mobile Design Best Practice #24 Be bandwidth- friendly.Tuesday, August 28, 12
  • 53. Mobile Design Best Practice #25 Sync with iCloud.Tuesday, August 28, 12
  • 54. Mobile Design Best Practice #26 Don’t rely on ads.Tuesday, August 28, 12
  • 55. Put an ad on it is the new put a bird on itTuesday, August 28, 12
  • 56. Mobile Design Best Practice #27 Start and stop instantly.Tuesday, August 28, 12
  • 57. Mobile Design Best Practice #28 On iPads, take advantage of popovers.Tuesday, August 28, 12
  • 58. Things on iPad and iPhoneTuesday, August 28, 12
  • 59. Mobile Design Best Practice #who’s counting Remove chrome if possible.Tuesday, August 28, 12
  • 60. Try to hide tools when a user doesn’t need themTuesday, August 28, 12
  • 61. Mobile Design Best Practice #30 Don’t crowd the navigation bar.Tuesday, August 28, 12
  • 62. TweetBot’s navigation barTuesday, August 28, 12
  • 63. Don’t create a multi-segment back button Make the button the title of the previous screenTuesday, August 28, 12
  • 64. Mobile Design Best Practice #the end Have fun. Go make something great.Tuesday, August 28, 12
  • 65. Tuesday, August 28, 12
  • 66. Thanks!Tuesday, August 28, 12
  • 67. Resources • UXMovement • Apple Human Interface Guidelines • Android Design • Mobile PatternsTuesday, August 28, 12