paul trani - wvnyc2012

Things Every Designer Should Know when Creating for Devices

Paul Trani, Adobe Evangelist @paultrani

Thursday, January 19, 12

Paul Trani@paultrani [email protected]

• Adobe Evangelist• Lynda.com author• 15 years of agency/design experience• 4 year old at heart


mailto:[email protected]

mailto:[email protected]

@PaulTrani

Designer or Developer?


@PaulTrani

What do you need to know to design successfully for mobile?

designfundamentals user experience

user interface designsmartphone vs. tablets

iOS

AndroidWindows Phone

Sencha Touch

PhoneGap

jQuery Mobile


@PaulTrani

Web Design


@PaulTraniThursday, January 19, 12

@PaulTrani

Maslow’s Hierarchy of Needs

Functionality

Self-Actualization

Self-Esteem

Love

Safety

Physiological


@PaulTrani

Design Hierarchy of Needs

Creativity

Proficiency

Usability

Reliability

Functionality

Self-Actualization

Self-Esteem

Love

Safety

Physiological


Functionality


@PaulTrani

Smartphone Platform Market Share

0%

12.5%

25%

37.5%

50%

Google RIM Apple Microsoft5%28%17%46% 8%25%32%29%

Dec 2010 Oct 2011


@PaulTrani

HTML 5

Offline / Storage

Realtime / Communication

File / Hardware Access

Semantics & Markup

Graphics / Multimedia

CSS3 Media Queries / Fonts / Transitions / Rounded Corners

http://mobilehtml5.orghttp://html5boilerplate.com


http://mobilehtml5.org/

http://mobilehtml5.org/

http://html5boilerplate.com

http://html5boilerplate.com

@PaulTrani

Responsive Web Design


http://www.bostonglobe.com






















































http://theexpressiveweb.com

http://theexpressiveweb.com

@PaulTrani

jQuery

jQuery Plugins for responsive design:

• http://masonry.desandro.com http://alpha.patterntap.com

• http://responsejs.com

• http://fittextjs.com


http://masonry.desandro.com/

http://masonry.desandro.com/

http://alpha.patterntap.com/

http://alpha.patterntap.com/

http://responsejs.com/

http://responsejs.com/

http://fittextjs.com/

http://fittextjs.com/

@PaulTrani

Web App vs. Native App


@PaulTrani

Web Apps

HTML5}Strengths

• Easier to learn

• Reusability across platforms

• Larger development base

Weaknesses

• Poor device and OS integration

• Lower performance

• Doesn’t have platform look and feel


@PaulTrani

• Embed a chromeless browser in a native app

• Create a “bridge” between the browser and the native code

• Package the web app with the native code and deploy

PhoneGap


@PaulTrani

Check Box


@PaulTrani

Combo Box


@PaulTrani

Date Picker


@PaulTrani

Tab Navigator


@PaulTrani

Back Button ... ?


@PaulTrani

Native Mobile Apps

Objective C

Java (Harmony)

Java J2ME

.NET

Strengths

• Great integration with OS and device

• Better performance

• Better user experience

• Supported by platform manufacturer

Weaknesses

• Platform dependent

• Multiple skill-set and tool requirement

• Higher TCO (true cost of ownership)

• More difficult learning curve


@PaulTrani

Frameworks

!"#$%!"#$%&

Flash Pro/Builder

xui


@PaulTrani

Appcelerator Titanium

Titanium supports all of the iPhone, iPad and Android UI, including table views, scroll views, native buttons, switches, tabs, popovers and more.


Reliability(The User Experience)


@PaulTrani

User Experience

“The way a person feels about using a product, system or service.”


@PaulTrani

Single Experiences

Single experiences influence the overall user experience

• Key click affects the experience of typing a text message

• Typing a message affects the experience of text messaging

•The experience of text messaging affects the overall user experience with the phone


@PaulTrani

Outside Factors

• Pricing

• Friends' opinions (apps)

• Media reports

• Marketing


@PaulTrani

Mobile Users Lean Towards Apps


Usability


@PaulTrani

Dinner or Takout?


@PaulTrani

Look Inside!

Formats!

Add to Cart!

Selling?

More buying choices!

Recommendations!

Shipping info!

Other categories!

Kindle!

Kindle!

Kindle!

Wish list!

Dinner


@PaulTrani

Takeout

Look Inside!

Add to Cart!

Wish list!


@PaulTrani

Where is the website/app being used?

(Development)Thursday, January 19, 12

@PaulTrani

Where is the website/app being used?


@PaulTrani

Design for Real Hand Sizes

45x45px15x15px


@PaulTrani

Hand Comes with a Finger


@PaulTrani

How are they holding a phone?


@PaulTrani

How are they holding a tablet?


@PaulTrani

Phone Tablet

Tablet Layout Design


@PaulTrani

Phone Tablet

Scale



@PaulTrani

Phone Tablet



@PaulTrani

Phone Tablet

Show/Hide



@PaulTrani

Phone Tablet



@PaulTrani

Phone Tablet

Split



@PaulTrani

Phone Tablet



@PaulTrani

Phone Tablet

Expand/Collapse



Proficiency


@PaulTrani

The user already understands some metaphors.


@PaulTrani

Physical Metaphors


@PaulTrani

Desktop Metaphors


@PaulTrani

Mobile Metaphors


Creativity


@PaulTrani

Attractive Things Work Better

Two ATMs, exact in function:

• One had the buttons arranged attractively.

• “Attractive” ATM was proven to be easier to use.

http://www.jnd.orgThursday, January 19, 12

http://www.jnd.org

http://www.jnd.org

@PaulTrani

Leading the eye.


@PaulTrani

Golden Ratio

&'(")*$$'+,#-(./0


@PaulTrani

Golden Ratio


@PaulTrani

Golden Ratio

Layout Design App


@PaulTrani

Golden Ratio


@PaulTrani

Which object is easier to look at?


@PaulTrani

Sharp corners take focus outside the rectangle.


@PaulTrani

Rounded corners take focus inside the rectangle.


@PaulTrani

Thank You!

@[email protected]• http://www.paultrani.com • http://www.designmeltdown.com• http://www.mobileawesomeness.com• http://www.thefwa.com


http://www.designupdate.com

http://www.designupdate.com

http://www.designmeltdown.com

http://www.designmeltdown.com

http://www.mobileawesomeness.com

http://www.mobileawesomeness.com

http://www.thefwa.com

http://www.thefwa.com

paul trani - wvnyc2012

Technology