Designing Great Mobile Apps
Upcoming SlideShare
Loading in...5

Designing Great Mobile Apps



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

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.



Total Views
Views on SlideShare
Embed Views



6 Embeds 11 5 2 1 1 1 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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 Designing Great Mobile Apps Presentation Transcript

  • Designing Great Mobile Apps
    Chris Griffith
  • Disclaimer
    These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
  • My Mobile App Portfolio
  • We need a mobile APP!NOW!
  • Building Mobile Apps is hard work.
  • Bored Users
  • Fickle Users
  • It begins with a simple touch…
  • Gestures can be a mystery
  • Designing for Dummies
  • There’s Not an App for that!
  • But is it mobile?
  • Mobile Mindsets…
    I’m here!
    I’m bored!
    I’m working!
  • I’m working
  • I’m Here
  • I’m bored
  • What Makes Your App Special?
  • Building the User Experience
  • An effortless experience requires
    streamlined choices of features
    limited attention
    limited time
    limited pixels
    limited processing power
    limited connectivity
  • What is your app’s quest?
  • Focal Task/Key Problem
  • What wrong a web app/site?
  • Designing for the tiny
  • Rule of Thumbs
    The average fingertip is 3x larger than the hand cursor
    Make your buttons 3x larger
    Then make them even larger
  • With fingers, come hands…
  • Pixels Per Inch (PPI)
    Data based on respective products published technical specifications
  • Flat Card Pattern
    Quick Focused Content
    Varied Content Layout
    Low Chrome
    Traversing from start to end of the stack
    Issues of scaling the number of cards
    Tiny page dots
  • Tab/Nav Bar Pattern
    Easy access to main sections
    Easy overview of the features and the context
    Navigation marker
    Limited number of tabs
    Tab always on screen
  • List/Tree Pattern
    Scales past 5 items
    Direct interaction
    Limited UI chrome
    User must remember their navigation path
    Must travel to top node to access another branch
    Scroll risk
  • Dashboard Pattern
    Reveals capabilities
    Offers shortcuts to key sections
    Can be colorful and engaging
    Falling out of favor
    Return Navigation mystery
    Hub-Spoke navigation
  • Combination Patterns
  • Be careful of your navigation path
  • Put something on device
  • Stand Out from the Crowd
  • What’s your style
    Sleek and cool
    Fun and playful
  • People judge an app by it’s cover
    App Icon
    Start Screen
    Overall Look
  • Your App Icon == Your Brand
  • It’s not a guessing game…
  • Give Feedback
    Did I touch it?
    Is it working?
    Is there a signal?
  • Design Tips
    for the Developer
  • Provide surprises
  • Mobile is Everywhere
  • Now go build something!
  • Thanks!