79
Designing Great Mobile Apps Chris Griffith

Designing Great Mobile Apps

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Designing Great Mobile Apps

Designing Great Mobile Apps

Chris Griffith

Page 2: Designing Great Mobile Apps

These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.

Disclaimer

Page 3: Designing Great Mobile Apps
Page 4: Designing Great Mobile Apps
Page 5: Designing Great Mobile Apps
Page 6: Designing Great Mobile Apps

We need a mobile APP!

NOW!

Page 7: Designing Great Mobile Apps

Building Mobile Apps is hard work.

Page 8: Designing Great Mobile Apps
Page 9: Designing Great Mobile Apps
Page 10: Designing Great Mobile Apps

Bored Users

Page 11: Designing Great Mobile Apps

Fickle Users

Page 12: Designing Great Mobile Apps
Page 13: Designing Great Mobile Apps

It begins with a simple touch…

Page 14: Designing Great Mobile Apps
Page 15: Designing Great Mobile Apps
Page 16: Designing Great Mobile Apps
Page 17: Designing Great Mobile Apps
Page 18: Designing Great Mobile Apps
Page 19: Designing Great Mobile Apps

There’s Not an App for that!

Page 20: Designing Great Mobile Apps

But is it mobile?

Page 21: Designing Great Mobile Apps

Mobile Mindsets…

I’m here!

I’m bored!

I’m working!

Page 22: Designing Great Mobile Apps

I’m working

Page 23: Designing Great Mobile Apps
Page 24: Designing Great Mobile Apps

I’m Here

Page 25: Designing Great Mobile Apps
Page 26: Designing Great Mobile Apps

I’m bored

Page 27: Designing Great Mobile Apps
Page 28: Designing Great Mobile Apps
Page 29: Designing Great Mobile Apps

What Makes Your App Special?

Page 30: Designing Great Mobile Apps

Building the User Experience

Page 31: Designing Great Mobile Apps

An effortless experience requires streamlined choices of features

limited attention

limited time

limited pixels

limited processing power

limited connectivity

Page 32: Designing Great Mobile Apps

What is your app’s quest?

Page 33: Designing Great Mobile Apps

Focal Task/Key Problem

Page 34: Designing Great Mobile Apps

What wrong a web app/site?

Page 35: Designing Great Mobile Apps

Designing for the tiny

Page 36: Designing Great Mobile Apps

Rule of Thumbs

• The average fingertip is 3x larger than the hand cursor

• Make your buttons 3x larger

• Then make them even larger

Page 37: Designing Great Mobile Apps

With fingers, come hands…

Page 38: Designing Great Mobile Apps
Page 39: Designing Great Mobile Apps

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)

Page 40: Designing Great Mobile Apps
Page 41: Designing Great Mobile Apps
Page 42: Designing Great Mobile Apps
Page 43: Designing Great Mobile Apps
Page 44: Designing Great Mobile Apps

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

Page 45: Designing Great Mobile Apps
Page 46: Designing Great Mobile Apps
Page 47: Designing Great Mobile Apps

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

Page 48: Designing Great Mobile Apps
Page 49: Designing Great Mobile Apps
Page 50: Designing Great Mobile Apps

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

Page 51: Designing Great Mobile Apps
Page 52: Designing Great Mobile Apps
Page 53: Designing Great Mobile Apps

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

Page 54: Designing Great Mobile Apps

Combination Patterns

Page 55: Designing Great Mobile Apps
Page 56: Designing Great Mobile Apps

Be careful of your navigation path

Page 57: Designing Great Mobile Apps
Page 58: Designing Great Mobile Apps
Page 59: Designing Great Mobile Apps
Page 60: Designing Great Mobile Apps
Page 61: Designing Great Mobile Apps
Page 62: Designing Great Mobile Apps
Page 63: Designing Great Mobile Apps

Put something on device

Page 64: Designing Great Mobile Apps
Page 65: Designing Great Mobile Apps

Stand Out from the Crowd

Page 66: Designing Great Mobile Apps

What’s your style

Business

GrittyHipster

Sleek and cool

Fun and playful

Glittery?

Page 67: Designing Great Mobile Apps
Page 68: Designing Great Mobile Apps

People judge an app by it’s cover

App Icon

Start Screen

Overall Look

Page 69: Designing Great Mobile Apps

Your App Icon == Your Brand

Page 70: Designing Great Mobile Apps
Page 71: Designing Great Mobile Apps
Page 72: Designing Great Mobile Apps

http://glyphish.com/

It’s not a guessing game…

Page 73: Designing Great Mobile Apps

Give Feedback

Did I touch it?

Is it working?

Is there a signal?

Page 74: Designing Great Mobile Apps

Provide surprises

Page 75: Designing Great Mobile Apps
Page 76: Designing Great Mobile Apps
Page 77: Designing Great Mobile Apps

Mobile is Everywhere

Page 78: Designing Great Mobile Apps

Now go build something!

Page 79: Designing Great Mobile Apps

Thanks!

[email protected]

@chrisgriffith

http://chrisgriffith.wordpress.com/