Your SlideShare is downloading. ×
0
Designing Great Mobile Apps<br />Chris Griffith<br />
Disclaimer<br />These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work...
My Mobile App Portfolio<br />
We need a mobile APP!NOW!<br />
Building Mobile Apps is hard work.<br />
Bored Users<br />
Fickle Users<br />
It begins with a simple touch…<br />
Gestures can be a mystery<br />
Designing for Dummies<br />
There’s Not an App for that!<br />
But is it mobile?<br />
Mobile Mindsets…<br />I’m here!<br />I’m bored!<br />I’m working!<br />
	I’m working<br />
	I’m Here<br />
I’m bored<br />
What Makes Your App Special?<br />
Building the User Experience<br />
An effortless experience requires<br />streamlined choices of features<br />limited attention<br />limited time<br />limit...
What is your app’s quest?<br />
Focal Task/Key Problem<br />
What wrong a web app/site?<br />
Designing for the tiny<br />
Rule of Thumbs<br />The average fingertip is 3x larger than the hand cursor<br />Make your buttons 3x larger<br />Then mak...
With fingers, come hands…<br />
Pixels Per Inch (PPI)<br />Data based on respective products published technical specifications<br />
Flat Card Pattern<br />Pros<br />Quick Focused Content<br />Varied Content Layout<br />Low Chrome<br />Cons<br />Traversin...
Tab/Nav Bar Pattern<br />Pros<br />Easy access to main sections<br />Easy overview of the features and the context<br />Na...
List/Tree Pattern<br />Pros	<br />Scales past 5 items<br />Direct interaction<br />Limited UI chrome<br />Cons<br />User m...
Dashboard Pattern<br />Pros	<br />Reveals capabilities<br />Offers shortcuts to key sections<br />Can be colorful and enga...
Combination Patterns<br />
Be careful of your navigation path<br />
Put something on device<br />
Stand Out from the Crowd<br />
What’s your style<br />Business<br />Sleek and cool<br />Gritty<br />Hipster<br />Fun and playful<br />Glittery?<br />
People judge an app by it’s cover<br />App Icon<br />Start Screen<br />Overall Look<br />
Your App Icon == Your Brand<br />
It’s not a guessing game…<br />http://glyphish.com/<br />
Give Feedback<br />Did I touch it?<br />Is it working?<br />Is there a signal?<br />
Design Tips <br />for the Developer<br />
Provide surprises<br />
Upcoming SlideShare
Loading in...5
×

Designing Great Mobile Apps

4,309

Published on

This is my presentation that I gave at 360Flex Denver.

So you want to build a mobile app? Unfortunately so does everyone else. But don't worry, this session will explore how you can set your application apart from the competition. We will explore a variety of topics including: visual design, common mobile UI patterns, challenges of mobile and touch interfaces, and how prototyping can give you an edge.

Published in: Technology
3 Comments
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,309
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
116
Comments
3
Likes
26
Embeds 0
No embeds

No notes for slide
  • UI prototyper 15 yrsMgr SDFUGACPFC Community Manager
  • Who has built apps for iOS? Android? Playbook? Other? None?
  • Building mobile apps are hard
  • Mobile devices are not the same as a desktopAbout the same CPU power as a desktop computer of 7 years ago and about 1/3 of the screenComputerBig ScreenPower SupplyConsistent NetworkKeyboardMouseChairDeskMobileSmall ScreenBatteryInconsistent NetworkFingersSensors
  • Context
  • IF you don’t get it right in your first outing, most will NOT be back
  • Careless !=Dumd
  • People want simplicity and ease
  • Play
  • Learn
  • Communicate
  • 4,000 patents on file for mousetraps
  • Your goal is find the missing mousetrap OR find a way to build a new and better mousetrap
  • Need to make the most of the user’s time and attention.
  • What’s around me? What can I do, Where can I go?
  • Quick learning curveCan be be used in short burstsKey component to many successful mobile apps.
  • Focused on the micro task of logging your run and routes.
  • An effortless experience requires streamlined choices of features-limited attention-limited time-limited pixels-limited processing power-limited connectivity
  • In Badge BookletsWhat’s My Schedule?Surprises!This session is not right for me, what can I go see?
  • Browser chromeSellingCan’t access all of the deviceBut can have a wider reach
  • iPhone – 15/16th of inch
  • Don’t crowd me inGive your UI some room to breatheYour UI needs to viewable from a distance
  • This pattern breaks you app into focused sub-tasksEarly Android UI patterns had the tab bar at the top of the screen, but can anyone tell me the issue with that location?
  • Paper Prototype
  • UI template files available for both iOS and AndroidBuild only want you need
  • Your App icon is your welcome mat.Design your icons for all the devices supported size: 29px, 36px, 48px, 57px, 72px, 512px
  • Focus on start up time.iOS does a great job of hiding this with their start screensBut this is not the time to recreate a Skip Intro UXOnce they are there, welcome them, show them around
  • Remember: users want quick easy access to your app, not to play an icon guessing game
  • Hidden elements
  • Hidden elements
  • Hidden elements
  • Transcript of "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. My Mobile App Portfolio<br />
    6. 6.
    7. 7.
    8. 8. We need a mobile APP!NOW!<br />
    9. 9. Building Mobile Apps is hard work.<br />
    10. 10.
    11. 11.
    12. 12. Bored Users<br />
    13. 13. Fickle Users<br />
    14. 14.
    15. 15. It begins with a simple touch…<br />
    16. 16. Gestures can be a mystery<br />
    17. 17. Designing for Dummies<br />
    18. 18.
    19. 19.
    20. 20.
    21. 21.
    22. 22.
    23. 23. There’s Not an App for that!<br />
    24. 24. But is it mobile?<br />
    25. 25. Mobile Mindsets…<br />I’m here!<br />I’m bored!<br />I’m working!<br />
    26. 26. I’m working<br />
    27. 27.
    28. 28. I’m Here<br />
    29. 29.
    30. 30. I’m bored<br />
    31. 31.
    32. 32.
    33. 33. What Makes Your App Special?<br />
    34. 34. Building the User Experience<br />
    35. 35. 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 />
    36. 36. What is your app’s quest?<br />
    37. 37. Focal Task/Key Problem<br />
    38. 38. What wrong a web app/site?<br />
    39. 39. Designing for the tiny<br />
    40. 40. 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 />
    41. 41. With fingers, come hands…<br />
    42. 42.
    43. 43.
    44. 44. Pixels Per Inch (PPI)<br />Data based on respective products published technical specifications<br />
    45. 45.
    46. 46.
    47. 47.
    48. 48.
    49. 49. 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 />
    50. 50.
    51. 51.
    52. 52. 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 />
    53. 53.
    54. 54.
    55. 55. 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 />
    56. 56.
    57. 57.
    58. 58. 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 />
    59. 59. Combination Patterns<br />
    60. 60.
    61. 61. Be careful of your navigation path<br />
    62. 62.
    63. 63.
    64. 64. Put something on device<br />
    65. 65.
    66. 66. Stand Out from the Crowd<br />
    67. 67. What’s your style<br />Business<br />Sleek and cool<br />Gritty<br />Hipster<br />Fun and playful<br />Glittery?<br />
    68. 68.
    69. 69. People judge an app by it’s cover<br />App Icon<br />Start Screen<br />Overall Look<br />
    70. 70. Your App Icon == Your Brand<br />
    71. 71.
    72. 72.
    73. 73. It’s not a guessing game…<br />http://glyphish.com/<br />
    74. 74. Give Feedback<br />Did I touch it?<br />Is it working?<br />Is there a signal?<br />
    75. 75. Design Tips <br />for the Developer<br />
    76. 76. Provide surprises<br />
    77. 77.
    78. 78.
    79. 79.
    80. 80. Mobile is Everywhere<br />
    81. 81. Now go build something!<br />
    82. 82. Thanks!<br />chris.griffith@gmail.com<br />@chrisgriffith<br />http://chrisgriffith.wordpress.com/<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×