Mobile Design that Doesn't Suck

Mobile Design
that Doesn’t Suck
Paul Traniptrani@adobe.comwww.paultrani.com @paultrani

Paul Trani
Work
Ride
Live
Love
Play
Adobe Flash Platform Evangelist
Lynda.com and Layers Magazine author
Adobe Certified Instructor
Art school graduate

Why Should I Care?

Don’t Get Caught…
“Mobile Internet Usage Will be a Boon to Consumers and Some Companies Will Likely Win Big While Many Will Wonder What Just Happened.”
Barbera Ballard, author Designing Mobile User Experience

Mobile Usage
U.S. Mobile Web Usage Grew 110% Last Year
Bigger than desktop browsing in 5 years
http://www.quantcast.com/docs/display/info/Mobile+Report

Case Study: Adidas

Because Ugly Doesn’t Sell

Most Common Mobile Design Mistakes
1
of
5

Most Common Mobile Design Mistakes
No Mobile Site
Not Understanding the User
Lack of Context
Lack of Understanding Mobile Technology
Lack of Design Fundamentals

No Mobile Site
1
of
5

Don’t Make Me Work

Create, Don’t Convert

Not Understanding
the User
2
of
5

The User
Who are the users?
Anyone who interacts with content on their phone. (What phones?)
Men and women between 16-35.

The User
Where are they?
Design for all environments and account for screen glare.
Development
Inside
Outside
(partly cloudy)
Outside
(sunny)

The User
When will they interact?
During idle periods of time.
Design for 1 minute tasks.
Make navigation shallow and easy.

The User
How are they holding it?
Design fro portrait and landscape.
?
?
?

The User
Why will they use your app?
Valuable, appropriate content.

Content

Content
(But have a link to the full site)

Lack of Context
3
of
5

Lack of Context

Proper Context

Neglecting Mobile Technology
4
of
5

Mobile Device Constraints
=
Processing power of a computer 8 years ago
Screen 1/3 the size

Mobile Device Constraints

Optimization
Use bitmaps over vectors
Avoid, if possible:
Filters
Transparency
Blend modes
Perspective distortion

Additional Capabilities

Using Capabilities
Click for more info?
Swipe for additional items?
Pinch to zoom?
GPS for nearby stores?

Lack of Proper Design
5
of
5

Elements of Successful Design

Use Existing Design Standards

Leverage Real World Metaphors
The UK’s Most Popular Handheld

Leverage Real World Metaphors

It’s about leading the eye

Layout
Grid, Golden Ratio, Space, Balance, Hierarchy, Direction
Typography
Serif vs. Sans
Color
Color Wheel, Color Choices, Meaning

GRID
Start with a

Grid Structure
Divide the page into a grid
The eye naturally follows an “F” shape

One Column? Two?

PLACEMENT

44
Placement
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

Native Keyboard Placement

SIZE MATTERS
Make it large, then make it larger.

Size Matters
“Miniaturizing treats the mobile environment and technology as a subset of the desktop environment.”
Barbara Ballard
Mobilize, don’t miniaturize
Design for real hand sizes

Design for Real Hand Sizes
45x45px
15x15px
The average fingertip is 3x larger than the hand cursor
Make your buttons 3x larger
Then make them even larger

SPACE
Implies importance, elegance, and professionalism.

Space
“Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away”
Antoine de Saint-Exupery
Don’t try to be great, try to be invisible

Space
WalMart
Target

Layout
Typography
Serif vs. Sans
Color

Typography
“Typography has one plain duty before it and that’s to convey information in writing.”
Emil Ruder, Founder of Basel School of Design
Choose a font that fits the subject
Don’t use more than three
@font-face
Flash

Choosing a Font
San-serif lack Serifs and are considered modern
Understand type anatomy
Understand type measurements

Focus on Clarity
Contrast
Size
Hierarchy

Layout
Typography
Serif vs. Sans
Color

“Use color to emphasize importance, not decorate a page.”
Alexander White
Use color to create hierarchy, dominance, and balance
Consistent use of a few colors makes a more cohesive design
Color

Color
Choose colors using The Color Wheel
Warm colors bring elements forward
Cool colors move elements back
Find contemporary colors using Kuler

Flash Player 10.1

Additional Capabilities
In the Browser
Beyond the Browser

planning
We want to sell you stuff you don’t need.

Resources
www.adobetv.com
www.bytearray.org
http://www.RIAgora.com
http://www.flashmobileblog.com
http://www.gotoandlearn.com

http://blogs.msdn.com	18
http://www.globalnerdy.com	17
http://marcbreidbach.posterous.com	10
http://storify.com	6
http://www.onhuge.com	4
http://www.slidescene.com	4
http://www.id-design.ca	2
http://www.mefeedia.com	1
http://fundacionincap.edu.co	1
http://www.froggyliens.com	1

Mobile Design that Doesn't Suck

by paultrani on Sep 17, 2010

Accessibility

Tags

Upload Details

Usage Rights

10 Embeds 64

Statistics

Mobile Design that Doesn’t Suck — Presentation Transcript