Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Great Mobile Apps

A talk I recently gave at the Designer/Developer Workflow Conference. It is a revised and expanded version from the one I gave at 360|Flex.

  • Login to see the comments

Designing Great Mobile Apps

  1. 1. Designing Great Mobile Apps<br />Chris Griffith<br />
  2. 2. Disclaimer<br />These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.<br />
  3. 3.
  4. 4.
  5. 5.
  6. 6. We need a mobile APP! NOW!<br />
  7. 7. Building Mobile Apps is hard work.<br />
  8. 8.
  9. 9.
  10. 10. Bored Users<br />
  11. 11. Fickle Users<br />
  12. 12.
  13. 13. It begins with a simple touch…<br />
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 18.
  19. 19. There’s Not an App for that!<br />
  20. 20. But is it mobile?<br />
  21. 21. Mobile Mindsets…<br />I’m here!<br />I’m bored!<br />I’m working!<br />
  22. 22. I’m working<br />
  23. 23.
  24. 24. I’m Here<br />
  25. 25.
  26. 26. I’m bored<br />
  27. 27.
  28. 28.
  29. 29. What Makes Your App Special?<br />
  30. 30. Building the User Experience<br />
  31. 31. An effortless experience requires <br />streamlined choices of features<br />limited attention<br />limited time<br />limited pixels<br />limited processing power <br />limited connectivity<br />
  32. 32. What is your app’s quest?<br />
  33. 33. Focal Task/Key Problem<br />
  34. 34. What wrong a web app/site?<br />
  35. 35. Designing for the tiny<br />
  36. 36. Rule of Thumbs<br />The average fingertip is 3x larger than the hand cursor<br />Make your buttons 3x larger<br />Then make them even larger <br />
  37. 37. With fingers, come hands…<br />
  38. 38.
  39. 39. Pixels Per Inch (PPI)<br />Data based on respective products published technical specifications<br />
  40. 40.
  41. 41.
  42. 42.
  43. 43.
  44. 44. Flat Card Pattern<br />Pros<br />Quick Focused Content<br />Varied Content Layout<br />Low Chrome<br />Cons<br />Traversing from start to end of the stack<br />Issues of scaling the number of cards<br />Tiny page dots<br />
  45. 45.
  46. 46.
  47. 47. Tab/Nav Bar Pattern<br />Pros<br />Easy access to main sections<br />Easy overview of the features and the context<br />Navigation marker<br />Cons<br />Limited number of tabs<br />Tab always on screen<br />
  48. 48.
  49. 49.
  50. 50. List/Tree Pattern<br />Pros <br />Scales past 5 items<br />Direct interaction<br />Limited UI chrome<br />Cons<br />User must remember their navigation path<br />Must travel to top node to access another branch<br />Scroll risk<br />
  51. 51.
  52. 52.
  53. 53. Dashboard Pattern<br />Pros <br />Reveals capabilities<br />Offers shortcuts to key sections<br />Can be colorful and engaging<br />Cons<br />Falling out of favor<br />Return Navigation mystery<br />Hub-Spoke navigation<br />
  54. 54. Combination Patterns<br />
  55. 55.
  56. 56. Be careful of your navigation path<br />
  57. 57.
  58. 58.
  59. 59.
  60. 60.
  61. 61.
  62. 62.
  63. 63. Put something on device<br />
  64. 64.
  65. 65. Stand Out from the Crowd<br />
  66. 66. What’s your style<br />Business<br />Sleek and cool<br />Gritty<br />Hipster<br />Fun and playful<br />Glittery?<br />
  67. 67.
  68. 68. People judge an app by it’s cover<br />App Icon<br />Start Screen<br />Overall Look<br />
  69. 69. Your App Icon == Your Brand<br />
  70. 70.
  71. 71.
  72. 72. It’s not a guessing game…<br />http://glyphish.com/<br />
  73. 73. Give Feedback<br />Did I touch it?<br />Is it working?<br />Is there a signal?<br />
  74. 74. Design Tips <br />for the Developer<br />
  75. 75. Provide surprises<br />
  76. 76.
  77. 77.
  78. 78. Mobile is Everywhere<br />
  79. 79. Now go build something!<br />
  80. 80. Thanks!<br />chris.griffith@gmail.com<br />@chrisgriffith<br />http://chrisgriffith.wordpress.com/<br />

×