Mobile Design Best Practices

Transcript

1. 1.

   Hi. Tuesday, August 28, 12

2. 2.

   #shutupnerd Event hashtag: Tuesday, August 28, 12

3. 3.

   #cltux Event hashtag: Tuesday, August 28, 12

4. 4.

   Mobile apps give a focused, quick and beautiful experience that

   you don’t usually get on the web. Tuesday, August 28, 12
5. 5.

   Focus. Mobile Design Best Practice #1 Tuesday, August 28, 12

6. 6.

   Yep. Science-based chart using hearts from The Legend of Zelda

   to represent how many chances users are willing to give you Nope. Tuesday, August 28, 12
7. 7.

   Tuesday, August 28, 12

8. 8.

   What users do to lame apps Tuesday, August 28, 12

9. 9.

   What users do to boring apps Tuesday, August 28, 12

10. 10.

    What you want them to do Tuesday, August 28, 12

11. 11.

    Tuesday, August 28, 12

12. 12.

    Mobile Design Best Practice #2 Practice touch- based design. Tuesday,

    August 28, 12
13. 13.

    Mobile Design Best Practice #3 The fold is dead. Kind

    of. Well, mostly. Tuesday, August 28, 12
14. 14.

    Mobile Design Best Practice #4 Ask people to save only

    when it’s absolutely necessary. Tuesday, August 28, 12
15. 15.

    Tuesday, August 28, 12

16. 16.

    Mobile Design Best Practice #5 Plan it before you design

    it. Tuesday, August 28, 12
17. 17.

    Mobile Design Best Practice #6 Gestures should only augment your

    experience. Tuesday, August 28, 12
18. 18.

    Standard gestures you can use Tap & Hold Single Tap

    Double Tap Flick Scroll Zoom Pinch Swipe Tuesday, August 28, 12
19. 19.

    Mobile Design Best Practice #7 Please God don’t abuse Push

    notifications. Tuesday, August 28, 12
20. 20.

    TweetBot’s notification choices Tuesday, August 28, 12

21. 21.

    Mobile Design Best Practice #8 Figure out where your app

    settings will live. Tuesday, August 28, 12
22. 22.

    iBooks’ settings live in two spots Tuesday, August 28, 12

23. 23.

    Mobile Design Best Practice #9 Don’t make users read a

    manual to use your app. Tuesday, August 28, 12
24. 24.

    Popular Science gets a little too nerdy with their instructions

    Tuesday, August 28, 12
25. 25.

    My reaction to this kind of nonsense. Tuesday, August 28,

    12
26. 26.

    Tuesday, August 28, 12

27. 27.

    Mobile Design Best Practice #9.5ish Show, don’t tell. Tuesday, August

    28, 12
28. 28.

    Coach mark examples Tuesday, August 28, 12

29. 29.

    Mobile Design Best Practice #10 Use the built-in apps as

    a starting point. Tuesday, August 28, 12
30. 30.

    Mobile Design Best Practice #11 Read Apple’s Human Interface Guidelines.

    Tuesday, August 28, 12
31. 31.

    Mobile Design Best Practice #12 Use caution when creating your

    own design patterns. Tuesday, August 28, 12
32. 32.

    So, how do I use this thing? Wait, books are

    under music? Tuesday, August 28, 12
33. 33.

    Mobile Design Best Practice #13 Ease up on the realism,

    man. Tuesday, August 28, 12
34. 34.

    Skeumorphic interfaces can add unnecessary complication Tuesday, August 28, 12

35. 35.

    Comparing iBooks, Kindle and Instapaper Tuesday, August 28, 12

36. 36.

    Podcasts brings all kinds of goodies to the realism party

    Tuesday, August 28, 12
37. 37.

    Mobile Design Best Practice #13 Use a grid. Tuesday, August

    28, 12
38. 38.

    Mobile Design Best Practice #14 Simplify forms. Tuesday, August 28,

    12
39. 39.

    Example of how left-aligned form labels fail on mobile devices

    Thanks to @uxmovement for the image Tuesday, August 28, 12
40. 40.

    Mobile Design Best Practice #15 Be consistent. Tuesday, August 28,

    12
41. 41.

    Example of a style guide Tuesday, August 28, 12

42. 42.

    Mobile Design Best Practice #16 Make it look tappable. Tuesday,

    August 28, 12
43. 43.

    Mobile Design Best Practice #17 Give users feedback. Tuesday, August

    28, 12
44. 44.

    Mobile Design Best Practice #18 Learn how to write good.

    Tuesday, August 28, 12
45. 45.

    Mobile Design Best Practice #19 Be social. Tuesday, August 28,

    12
46. 46.

    Mobile Design Best Practice #20 Touch targets should be fingertip-sized.

    Tuesday, August 28, 12
47. 47.

    Apple’s Calculator app has some nice, tappable buttons Tuesday, August

    28, 12
48. 48.

    Mobile Design Best Practice #21 Design for all environments Tuesday,

    August 28, 12
49. 49.

    Mobile Design Best Practice #22 Use analytics. Tuesday, August 28,

    12
50. 50.

    Mobile Design Best Practice #22 and a half Avoid religious

    debates. Tuesday, August 28, 12
51. 51.

    Mobile Design Best Practice #23 Listen to your users. Tuesday,

    August 28, 12
52. 52.

    Mobile Design Best Practice #24 Be bandwidth- friendly. Tuesday, August

    28, 12
53. 53.

    Mobile Design Best Practice #25 Sync with iCloud. Tuesday, August

    28, 12
54. 54.

    Mobile Design Best Practice #26 Don’t rely on ads. Tuesday,

    August 28, 12
55. 55.

    Put an ad on it is the new put a

    bird on it Tuesday, August 28, 12
56. 56.

    Mobile Design Best Practice #27 Start and stop instantly. Tuesday,

    August 28, 12
57. 57.

    Mobile Design Best Practice #28 On iPads, take advantage of

    popovers. Tuesday, August 28, 12
58. 58.

    Things on iPad and iPhone Tuesday, August 28, 12

59. 59.

    Mobile Design Best Practice #who’s counting Remove chrome if possible.

    Tuesday, August 28, 12
60. 60.

    Try to hide tools when a user doesn’t need them

    Tuesday, August 28, 12
61. 61.

    Mobile Design Best Practice #30 Don’t crowd the navigation bar.

    Tuesday, August 28, 12
62. 62.

    TweetBot’s navigation bar Tuesday, August 28, 12

63. 63.

    Don’t create a multi-segment back button Make the button the

    title of the previous screen Tuesday, August 28, 12
64. 64.

    Mobile Design Best Practice #the end Have fun. Go make

    something great. Tuesday, August 28, 12
65. 65.

    Tuesday, August 28, 12

66. 66.

    Thanks! Tuesday, August 28, 12

67. 67.

    Resources • UXMovement • Apple Human Interface Guidelines • Android

    Design • Mobile Patterns Tuesday, August 28, 12