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

5,111 views
4,678 views

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
27 Likes
Statistics
Notes
No Downloads
Views
Total views
5,111
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
116
Comments
3
Likes
27
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
  • Designing Great Mobile Apps

    1. Designing Great Mobile Apps<br />Chris Griffith<br />
    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. My Mobile App Portfolio<br />
    4. We need a mobile APP!NOW!<br />
    5. Building Mobile Apps is hard work.<br />
    6. Bored Users<br />
    7. Fickle Users<br />
    8. It begins with a simple touch…<br />
    9. Gestures can be a mystery<br />
    10. Designing for Dummies<br />
    11. There’s Not an App for that!<br />
    12. But is it mobile?<br />
    13. Mobile Mindsets…<br />I’m here!<br />I’m bored!<br />I’m working!<br />
    14. I’m working<br />
    15. I’m Here<br />
    16. I’m bored<br />
    17. What Makes Your App Special?<br />
    18. Building the User Experience<br />
    19. 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 />
    20. What is your app’s quest?<br />
    21. Focal Task/Key Problem<br />
    22. What wrong a web app/site?<br />
    23. Designing for the tiny<br />
    24. 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 />
    25. With fingers, come hands…<br />
    26. Pixels Per Inch (PPI)<br />Data based on respective products published technical specifications<br />
    27. 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 />
    28. 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 />
    29. 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 />
    30. 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 />
    31. Combination Patterns<br />
    32. Be careful of your navigation path<br />
    33. Put something on device<br />
    34. Stand Out from the Crowd<br />
    35. What’s your style<br />Business<br />Sleek and cool<br />Gritty<br />Hipster<br />Fun and playful<br />Glittery?<br />
    36. People judge an app by it’s cover<br />App Icon<br />Start Screen<br />Overall Look<br />
    37. Your App Icon == Your Brand<br />
    38. It’s not a guessing game…<br />http://glyphish.com/<br />
    39. Give Feedback<br />Did I touch it?<br />Is it working?<br />Is there a signal?<br />
    40. Design Tips <br />for the Developer<br />
    41. Provide surprises<br />
    42. Mobile is Everywhere<br />
    43. Now go build something!<br />
    44. Thanks!<br />chris.griffith@gmail.com<br />@chrisgriffith<br />http://chrisgriffith.wordpress.com/<br />

    ×