Paul Trani - WVnyc2012
-
Upload
webvisions -
Category
Technology
-
view
1.392 -
download
0
description
Transcript of 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
Thursday, January 19, 12
@PaulTrani
Designer or Developer?
Thursday, January 19, 12
@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
Thursday, January 19, 12
@PaulTrani
Web Design
Thursday, January 19, 12
@PaulTraniThursday, January 19, 12
@PaulTrani
Maslow’s Hierarchy of Needs
Functionality
Self-Actualization
Self-Esteem
Love
Safety
Physiological
Thursday, January 19, 12
@PaulTrani
Design Hierarchy of Needs
Creativity
Proficiency
Usability
Reliability
Functionality
Self-Actualization
Self-Esteem
Love
Safety
Physiological
Thursday, January 19, 12
Functionality
Thursday, January 19, 12
@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
Thursday, January 19, 12
@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
Thursday, January 19, 12
@PaulTrani
Responsive Web Design
Thursday, January 19, 12
@PaulTrani
jQuery
jQuery Plugins for responsive design:
• http://masonry.desandro.com http://alpha.patterntap.com
• http://responsejs.com
• http://fittextjs.com
Thursday, January 19, 12
@PaulTrani
Web App vs. Native App
Thursday, January 19, 12
@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
Thursday, January 19, 12
@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
Thursday, January 19, 12
@PaulTrani
Check Box
Thursday, January 19, 12
@PaulTrani
Combo Box
Thursday, January 19, 12
@PaulTrani
Date Picker
Thursday, January 19, 12
@PaulTrani
Tab Navigator
Thursday, January 19, 12
@PaulTrani
Back Button ... ?
Thursday, January 19, 12
@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
Thursday, January 19, 12
@PaulTrani
Frameworks
!"#$%!"#$%&
Flash Pro/Builder
xui
Thursday, January 19, 12
@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.
Thursday, January 19, 12
Reliability(The User Experience)
Thursday, January 19, 12
@PaulTrani
User Experience
“The way a person feels about using a product, system or service.”
Thursday, January 19, 12
@PaulTraniThursday, January 19, 12
@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
Thursday, January 19, 12
@PaulTrani
Outside Factors
• Pricing
• Friends' opinions (apps)
• Media reports
• Marketing
Thursday, January 19, 12
@PaulTrani
Mobile Users Lean Towards Apps
Thursday, January 19, 12
Usability
Thursday, January 19, 12
@PaulTrani
Dinner or Takout?
Thursday, January 19, 12
@PaulTrani
Look Inside!
Formats!
Add to Cart!
Selling?
More buying choices!
Recommendations!
Shipping info!
Other categories!
Kindle!
Kindle!
Kindle!
Wish list!
Dinner
Thursday, January 19, 12
@PaulTrani
Takeout
Look Inside!
Add to Cart!
Wish list!
Thursday, January 19, 12
@PaulTrani
Where is the website/app being used?
(Development)Thursday, January 19, 12
@PaulTrani
Where is the website/app being used?
Thursday, January 19, 12
@PaulTrani
Where is the website/app being used?
Thursday, January 19, 12
@PaulTrani
Where is the website/app being used?
Thursday, January 19, 12
@PaulTrani
Design for Real Hand Sizes
45x45px15x15px
Thursday, January 19, 12
@PaulTrani
Hand Comes with a Finger
Thursday, January 19, 12
@PaulTrani
How are they holding a phone?
Thursday, January 19, 12
@PaulTrani
How are they holding a tablet?
Thursday, January 19, 12
@PaulTrani
Phone Tablet
Tablet Layout Design
Thursday, January 19, 12
@PaulTrani
Phone Tablet
Scale
Tablet Layout Design
Thursday, January 19, 12
@PaulTrani
Phone Tablet
Tablet Layout Design
Thursday, January 19, 12
@PaulTrani
Phone Tablet
Show/Hide
Tablet Layout Design
Thursday, January 19, 12
@PaulTrani
Phone Tablet
Tablet Layout Design
Thursday, January 19, 12
@PaulTrani
Phone Tablet
Split
Tablet Layout Design
Thursday, January 19, 12
@PaulTrani
Phone Tablet
Tablet Layout Design
Thursday, January 19, 12
@PaulTrani
Phone Tablet
Expand/Collapse
Tablet Layout Design
Thursday, January 19, 12
Proficiency
Thursday, January 19, 12
@PaulTrani
The user already understands some metaphors.
Thursday, January 19, 12
@PaulTrani
Physical Metaphors
Thursday, January 19, 12
@PaulTraniThursday, January 19, 12
@PaulTraniThursday, January 19, 12
@PaulTrani
Desktop Metaphors
Thursday, January 19, 12
@PaulTrani
Desktop Metaphors
Thursday, January 19, 12
@PaulTrani
Mobile Metaphors
Thursday, January 19, 12
Creativity
Thursday, January 19, 12
@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
@PaulTrani
Leading the eye.
Thursday, January 19, 12
@PaulTrani
Golden Ratio
&'(")*$$'+,#-(./0
Thursday, January 19, 12
@PaulTrani
Golden Ratio
Thursday, January 19, 12
@PaulTrani
Golden Ratio
Layout Design App
Thursday, January 19, 12
@PaulTrani
Golden Ratio
Thursday, January 19, 12
@PaulTrani
Which object is easier to look at?
Thursday, January 19, 12
@PaulTrani
Sharp corners take focus outside the rectangle.
Thursday, January 19, 12
@PaulTrani
Rounded corners take focus inside the rectangle.
Thursday, January 19, 12
@PaulTrani
Thank You!
@[email protected]• http://www.paultrani.com • http://www.designmeltdown.com• http://www.mobileawesomeness.com• http://www.thefwa.com
Thursday, January 19, 12