@paultrani

Paul Trani ptrani@adobe.com www.paultrani.com @paultrani

DOESN’T SUCKMobile Design and User Experience that

@paultrani

• Adobe Evangelist• Lynda.com author• Adobe Certified Instructor• Art school graduate

Live

Work

Love

Ride

Play

Paul Trani

@paultrani

WHY SHOULD YOU CARE?Question

@paultrani

Don’t Get Caught

@paultrani

Keys to Successful Mobile Design

1. Understand the User

2. Create Appropriate Content

3. Use Device Capabilities

4. Design for Device Constraints

5. Understand Design Fundamentals

@paultrani

THE MOBILE USERMobile Design/UX

@paultrani

Who is Your Target Audience?

Generation Y: 97% have a computer, 94% have a mobile phone.

In the next 5 years more transactions will happen on devices over desktops.

@paultrani

Development Inside Outside(partly cloudy)

Outside(sunny)

Where are They?

@paultrani

When Will They Interact?

Design for two minute tasks.

Make navigation shallow and easy.

@paultrani

600x1024

?

?

How Are They Holding the Device?

One hand? Two hands? Portrait? Landscape? Both?

@paultrani

Why Will They Use it?

Fun? Engaging? Informational? Helpful?

@paultrani

CONTENT WITHIN CONTEXTMobile Design/UX

@paultrani

Lack of Context

@paultrani

Create, Don’t Convert

@paultrani

Content

@paultrani(But have a link to the full site)

Content

@paultrani

USE DEVICE CAPABILITIESMobile Design/UX

@paultrani

Mulitouch Accelerometer

Orientation Microphone Keyboard Geolocation Camera GPS

Device Capabilities

@paultrani

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

Using Capabilities

@paultrani

Using Capabilities

@paultrani

DEVICE CONSTRAINTSMobile Design/UX

@paultrani

• Processing power of a computer 8 years old• Screen 1/3 the size

=

Device Constraints

@paultrani

Graphics

Consider bitmaps over vectors Keep bitmaps as small as possible Minimize number of vectors Test your animations with different qualities of Stage

Avoid, if possible: Filters Blend modes Transparency Perspective distortion

@paultrani

ActionScript

Set frame rate as low as possible Dynamically adjust frame rate Use enterFrame event when necessary Consolidate into a single handler instead of multiple ones

Avoid, if possible: High-frequency timers UpdateAfterEvent

@paultrani

Mobile/Tablet Device Sizes

1024x768

132ppi

1024x600

240ppi

854x480

240ppi

800x480

240ppi

480x320

163ppi

960x640

326ppi

120 ppi (low), 160 ppi (mid) or 240 ppi (high)

@paultrani

Dynamically Adjust Graphic Sizes

Create a button that’s ½” across three devices:

next_btn.width = Capabilities.screenDPI * .5;

@paultrani

Don’t Resize. Recreate.

Mobile Tablet

@paultrani

Don’t Resize. Recreate.

Mobile Tablet

@paultrani

iOS User Experience

Back

Home

New/Edit

@paultrani

Options Menu

Android User Experience

Back Home

@paultrani

BlackBerry Playbook User Experience

Application Switching

Application Switching

Minimize Application

Bring up Keyboard

Orientation Change

Context Menu or 2nd Navigation

@paultrani

Use Existing User Experience Metaphors

@paultrani

Leverage Real World Metaphors

The UK’s Most Popular Handheld

@paultrani

ELEMENTS OF SUCCESSFUL DESIGNLayout, Typography, Color

@paultrani

Bad News

@paultrani

LAYOUTElements of Successful Design

@paultrani

Elements of Successful Design

leading the eye

@paultrani

Start with a grid Layout Design AIR App: www.paultrani.com

@paultrani

One Column? Two?

@paultrani

Grid Structure

Divide the page into a grid

The eye naturally follows an “F” shape

@paultrani

Button Placement

42

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

@paultrani

Native Keyboard Placement

@paultrani

Design for Real Hand Sizes

The average fingertip is 3x larger than the hand cursor

Make your buttons 3x larger

45x45px15x15px

@paultrani

Space

Implies importance, elegance, and professionalism. 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

@paultrani

Space

Ross Kenneth Cole

@paultrani

Google

@paultrani

Examples

@paultrani

TYPOGRAPHYElements of Successful Design

@paultrani

Typography

■ Choose a font that fits the subject■ Don’t use more than three■ Font size around 24pt

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

Emil Ruder, Founder of Basel School of Design

@paultrani

Choosing a Font

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

@paultrani

Contrast

Size

Hierarchy

Focus on Clarity

@paultrani

Examples

@paultrani

COLOR THEORYElements of Successful Design

@paultrani

Color

■ 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

@paultrani

Color

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

@paultrani

Example

@paultrani

APPLICATION OF THE FUNDAMENTALSApplication

@paultrani

Etsy

@paultrani

Example

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

@paultrani

Product

@paultrani

Thank You

http://www.patterntap.com■http://www.webdesignerdepot.com ■http://www.alistapart.com ■www.paultrani.com■http://www.designmeltdown.com■http://www.smashingmagazine.com ■http://www.uxbooth.com ■http://www.colourlovers.com■http://www.webdesignerwall.com■http://thinkvitamin.com■http://www.noupe.com

Paul Trani ptrani@adobe.com www.paultrani.com