Embed Size (px)
DESCRIPTION
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.
Citation preview
Designing Great Mobile Apps
Chris Griffith
These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
Disclaimer
We need a mobile APP!
NOW!
Building Mobile Apps is hard work.
Bored Users
Fickle Users
It begins with a simple touch…
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…
Device Resolution PPI Physical
Nexus One/ HTC Incredible 800x480 254 3.7”
HTC EVO/ HTC Desire HD 800x480 217 4.3”
Droid/ Droid 2 854x480 265 3.7”
Droid X 854x480 240 4.3”
Samsung Galaxy S Vibrant 800x480 232 4.0”
iPhone 3GS and lower 480x320 163 3.5”
iPhone 4 960x640 326 3.5”
iPad 1024x768 132 9.7”
Galaxy Tab 1024x600 170 7”
Blackberry Playbook 1024x600 170 7”
Data based on respective products published technical specifications
Pixels Per Inch (PPI)
Flat Card Pattern
Pros• Quick Focused Content• Varied Content Layout• Low Chrome
Cons• Traversing from start to end
of the stack• Issues of scaling the number
of cards• Tiny page dots
Tab/Nav Bar Pattern
Pros• Easy access to main sections• Easy overview of the
features and the context• Navigation marker
Cons• Limited number of tabs• Tab always on screen
List/Tree Pattern
Pros• Scales past 5 items• Direct interaction• Limited UI chrome
Cons• User must remember their
navigation path• Must travel to top node to
access another branch• Scroll risk
Dashboard Pattern
Pros• Reveals capabilities• Offers shortcuts to key
sections• Can be colorful and
engaging
Cons• 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
Business
GrittyHipster
Sleek and cool
Fun and playful
Glittery?
People judge an app by it’s cover
App Icon
Start Screen
Overall Look
Your App Icon == Your Brand
http://glyphish.com/
It’s not a guessing game…
Give Feedback
Did I touch it?
Is it working?
Is there a signal?
Provide surprises
Mobile is Everywhere
Now go build something!
Thanks!
@chrisgriffith
http://chrisgriffith.wordpress.com/
