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!

chris.griffith@gmail.com

@chrisgriffith

http://chrisgriffith.wordpress.com/