mobile design that doesn't suck

©2010 Adobe Systems Incorporated. All Rights Reserved.

Paul Trani [email protected] www.paultrani.com @paultrani

Mobile Design that Doesn’t Suck

mailto:[email protected]

http://www.paultrani.com/


• Adobe Flash Platform Evangelist• Lynda.com and Layers Magazine author• Adobe Certified Instructor• Art school graduate

Live

Work

Love

Ride

Play

Paul Trani


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

http://www.quantcast.com/docs/display/info/Mobile+Report


Case Study: Adidas


Because Ugly Doesn’t Sell


Most Common Mobile Design Mistakes

1 of5


Most Common Mobile Design Mistakes

1. No Mobile Site

2. Not Understanding the User

3. Lack of Context

4. Lack of Understanding Mobile Technology

5. Lack of Design Fundamentals


No Mobile Site1 of5


Don’t Make Me Work


Create, Don’t Convert


Not Understanding the User

2 of5


Who are the users?Anyone who interacts with content on their phone. (What phones?)

Men and women between 16-35.

The User


The User

Where are they?Design for all environments and account for screen glare.

Development Inside Outside(partly cloudy)

Outside(sunny)


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

The User


?

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 Context3 of5


Lack of Context


Proper Context


Neglecting Mobile Technology

4 of5


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

Mulitouch Accelerometer

Orientation Microphone Keyboard Geolocation

Camera GPS


Using Capabilities

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


Lack of Proper Design5 of5


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



LayoutGrid, Golden Ratio, Space, Balance, Hierarchy, Direction

TypographySerif vs. Sans

ColorColor Wheel, Color Choices, Meaning


GRIDStart with a


Grid Structure

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


One Column? Two?


PLACEMENT


Native Keyboard Placement


SIZE MATTERSMake it large, then make it larger.


Size Matters

■Mobilize, don’t miniaturize■Design for real hand sizes

“Miniaturizing treats the mobile environment and technology as a subset of the desktop environment.”

Barbara Ballard


Design for Real Hand Sizes

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

■ Make your buttons 3x larger■ Then make them even larger

45x45px15x15px


SPACE

Implies importance, elegance, and professionalism.


Space

■ Don’t try to be great, try to be invisible

“Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away”

Antoine de Saint-Exupery


Space

WalMart Target


■ Choose a font that fits the subject■ Don’t use more than three■ @font-face■ Flash

“Typography has one plain duty before it and that’s to convey information in writing.”

Emil Ruder, Founder of Basel School of Design

Typography


■ San-serif lack Serifs and are considered modern■ Understand type anatomy ■ Understand type measurements

Choosing a Font


Contrast

Size

Hierarchy

Focus on Clarity


■ Use color to create hierarchy, dominance, and balance■ Consistent use of a few colors makes a more cohesive design

“Use color to emphasize importance, not decorate a page.” Alexander White

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

Mulitouch Accelerometer

Orientation Microphone

Keyboard Geolocation

Camera GPS

4 4 4 4 4

4 4 4 4 4 4 4 4

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://www.adobetv.com/

http://www.RIAgora.com/



http://www.flashmobileblog.com/

http://www.flashmobileblog.com/

http://www.gotoandlearn.com/

http://www.gotoandlearn.com/

mobile design that doesn't suck

Documents

adobe certified instructor

doesnt suckpaul

mobile design

layers magazine author

art school graduate