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...
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 />
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 />limi...
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 />
Mobile is Everywhere<br />
Now go build something!<br />
Upcoming SlideShare
Loading in...5
×

Designing Great Mobile Apps

1,288

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,288
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • UI prototyper 15 yrsDeveloping mobile for the past 4 yearsMgr 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
  • 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?
  • Tablets have much more screen real estate than their smartphone counter parts. To use the space well but still maintain consistency between the smartphone and tablet app a different design approach for showing information is needed.SolutionSplit View is a design approach that is often used on many desktop and web applications. Left side of the screen displays higher level categories and selecting one of them brings detailed info of the selection to the right side of the screen.
  • Action bar is a branded top bar of the application that provides easy access to relevant actions on the screen and a shortcut to application&apos;s home screen. The action bar can also be used to indicate use&apos;s location in the application.Consequences Very easy and fast access to relevant action on current screen.Easy access to application&apos;s home screen by clicking the application logo at left. This paradigm is already well known from web sites.opportunity to provide branding to the application.Helps user in navigation by indicating his / her current location in app.
  • 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.
    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 />
    1. A particular slide catching your eye?

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

    ×