Designing Great Mobile Apps

Download Designing Great Mobile Apps

Post on 18-Jan-2015

1.240 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

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.

TRANSCRIPT

<ul><li> 1. Designing Great Mobile Apps<br />Chris Griffith<br /></li></ul> <p> 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. 4. 5. 6. We need a mobile APP! NOW!<br /> 7. Building Mobile Apps is hard work.<br /> 8. 9. 10. Bored Users<br /> 11. Fickle Users<br /> 12. 13. It begins with a simple touch<br /> 14. 15. 16. 17. 18. 19. Theres Not an App for that!<br /> 20. But is it mobile?<br /> 21. Mobile Mindsets<br />Im here!<br />Im bored!<br />Im working!<br /> 22. Im working<br /> 23. 24. Im Here<br /> 25. 26. Im bored<br /> 27. 28. 29. What Makes Your App Special?<br /> 30. Building the User Experience<br /> 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. What is your apps quest?<br /> 33. Focal Task/Key Problem<br /> 34. What wrong a web app/site?<br /> 35. Designing for the tiny<br /> 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. With fingers, come hands<br /> 38. 39. Pixels Per Inch (PPI)<br />Data based on respective products published technical specifications<br /> 40. 41. 42. 43. 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. 46. 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. 49. 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. 52. 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. Combination Patterns<br /> 55. 56. Be careful of your navigation path<br /> 57. 58. 59. 60. 61. 62. 63. Put something on device<br /> 64. 65. Stand Out from the Crowd<br /> 66. Whats your style<br />Business<br />Sleek and cool<br />Gritty<br />Hipster<br />Fun and playful<br />Glittery?<br /> 67. 68. People judge an app by its cover<br />App Icon<br />Start Screen<br />Overall Look<br /> 69. Your App Icon == Your Brand<br /> 70. 71. 72. Its not a guessing game<br />http://glyphish.com/<br /> 73. Give Feedback<br />Did I touch it?<br />Is it working?<br />Is there a signal?<br /> 74. Design Tips <br />for the Developer<br /> 75. Provide surprises<br /> 76. 77. 78. Mobile is Everywhere<br /> 79. Now go build something!<br /> 80. Thanks!<br />chris.griffith@gmail.com<br />@chrisgriffith<br />http://chrisgriffith.wordpress.com/<br /></p>