Things every designer should know about creating for devices

1. Things Every Designer Should Know
when Creating for Devices
Paul Trani, Adobe Evangelist
@paultrani
Thursday, January 19, 12

2. Paul Trani
@paultrani
ptrani@adobe.com
• Adobe Evangelist
• Lynda.com author
• 15 years of agency/design experience
• 4 year old at heart
Thursday, January 19, 12

3. Designer or Developer?
@PaulTrani
Thursday, January 19, 12

4. jQuery Mobile
design Sencha Touch
fundamentals
iOS user experience
What do you need to know to design successfully for mobile?
smartphone vs. tablets user interface design
Windows Phone
Android PhoneGap
@PaulTrani
Thursday, January 19, 12

5. Web Design
@PaulTrani
Thursday, January 19, 12

6. @PaulTrani
Thursday, January 19, 12

7. Maslow’s Hierarchy of Needs
Self-
Actualization
Self-Esteem
Love
Safety
Physiological
@PaulTrani
Thursday, January 19, 12

8. Design Hierarchy of Needs
Self-
Creativity
Actualization
Self-Esteem Proficiency
Love Usability
Safety Reliability
Physiological Functionality
@PaulTrani
Thursday, January 19, 12

9. Functionality
Thursday, January 19, 12

10. Smartphone Platform Market Share
50%
37.5%
25%
12.5%
29% 46% 32% 17% 25% 28% 8% 5%
0%
Google RIM Apple Microsoft
Dec 2010 Oct 2011
@PaulTrani
Thursday, January 19, 12

11. HTML 5
Offline / Storage
Realtime / Communication
File / Hardware Access
Semantics & Markup
Graphics / Multimedia
CSS3 Media Queries / Fonts / Transitions / Rounded Corners
http://html5boilerplate.com http://mobilehtml5.org
@PaulTrani
Thursday, January 19, 12

12. Responsive Web Design
@PaulTrani
Thursday, January 19, 12

13. jQuery
jQuery Plugins for responsive design:
• http://masonry.desandro.com http://alpha.patterntap.com
• http://responsejs.com
• http://fittextjs.com
@PaulTrani
Thursday, January 19, 12

14. Web App vs. Native App
@PaulTrani
Thursday, January 19, 12

15. Web Apps
}
Strengths
• Easier to learn
• Reusability across platforms
• Larger development base
Weaknesses
HTML5
• Poor device and OS integration
• Lower performance
• Doesn’t have platform look
and feel
@PaulTrani
Thursday, January 19, 12

16. PhoneGap
• 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
@PaulTrani
Thursday, January 19, 12

17. Check Box
@PaulTrani
Thursday, January 19, 12

18. Combo Box
@PaulTrani
Thursday, January 19, 12

19. Date Picker
@PaulTrani
Thursday, January 19, 12

20. Tab Navigator
@PaulTrani
Thursday, January 19, 12

21. Back Button ... ?
@PaulTrani
Thursday, January 19, 12

22. Native Mobile Apps
Strengths
• Great integration with OS
Objective C and device
• Better performance
• Better user experience
Java (Harmony) • Supported by platform manufacturer
Weaknesses
• Platform dependent
Java J2ME
• Multiple skill-set and tool
requirement
• Higher TCO
.NET (true cost of ownership)
• More difficult learning curve
@PaulTrani
Thursday, January 19, 12

23. Frameworks
!"#$%&
!"#$%
Flash Pro/Builder
xui
@PaulTrani
Thursday, January 19, 12

24. Appcelerator Titanium
Titanium supports all of the iPhone, iPad and
Android UI, including table views, scroll views,
native buttons, switches, tabs, popovers and more.
@PaulTrani
Thursday, January 19, 12

25. Reliability
(The User Experience)
Thursday, January 19, 12

26. User Experience
“The way a person feels about using a product, system or service.”
@PaulTrani
Thursday, January 19, 12

27. @PaulTrani
Thursday, January 19, 12

28. 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
Thursday, January 19, 12

29. Outside Factors
• Pricing
• Friends' opinions (apps)
• Media reports
• Marketing
@PaulTrani
Thursday, January 19, 12

30. Mobile Users Lean Towards Apps
@PaulTrani
Thursday, January 19, 12

31. Usability
Thursday, January 19, 12

32. Dinner or Takout?
@PaulTrani
Thursday, January 19, 12

33. Dinner
Other categories!
Look Inside! Add to Cart!
Wish list!
Shipping info!
Kindle!
Kindle!
Kindle! Selling?
More buying
Formats! choices!
Recommendations!
@PaulTrani
Thursday, January 19, 12

34. Takeout
Look Inside!
Add to Cart!
Wish list!
@PaulTrani
Thursday, January 19, 12

35. Where is the website/app being used?
(Development) @PaulTrani
Thursday, January 19, 12

36. Where is the website/app being used?
@PaulTrani
Thursday, January 19, 12

37. Where is the website/app being used?
@PaulTrani
Thursday, January 19, 12

38. Where is the website/app being used?
@PaulTrani
Thursday, January 19, 12

39. Design for Real Hand Sizes
15x15px 45x45px
@PaulTrani
Thursday, January 19, 12

40. Hand Comes with a Finger
@PaulTrani
Thursday, January 19, 12

41. How are they holding a phone?
@PaulTrani
Thursday, January 19, 12

42. How are they holding a tablet?
@PaulTrani
Thursday, January 19, 12

43. Tablet Layout Design
Phone Tablet
@PaulTrani
Thursday, January 19, 12

44. Tablet Layout Design
Scale
Phone Tablet
@PaulTrani
Thursday, January 19, 12

45. Tablet Layout Design
Phone Tablet
@PaulTrani
Thursday, January 19, 12

46. Tablet Layout Design
Show/Hide
Phone Tablet
@PaulTrani
Thursday, January 19, 12

47. Tablet Layout Design
Phone Tablet
@PaulTrani
Thursday, January 19, 12

48. Tablet Layout Design
Split
Phone Tablet
@PaulTrani
Thursday, January 19, 12

49. Tablet Layout Design
Phone Tablet
@PaulTrani
Thursday, January 19, 12

50. Tablet Layout Design
Expand/Collapse
Phone Tablet
@PaulTrani
Thursday, January 19, 12

51. Proficiency
Thursday, January 19, 12

52. The user already understands some metaphors.
@PaulTrani
Thursday, January 19, 12

53. Physical Metaphors
@PaulTrani
Thursday, January 19, 12

54. @PaulTrani
Thursday, January 19, 12

55. @PaulTrani
Thursday, January 19, 12

56. Desktop Metaphors
@PaulTrani
Thursday, January 19, 12

57. Desktop Metaphors
@PaulTrani
Thursday, January 19, 12

58. Mobile Metaphors
@PaulTrani
Thursday, January 19, 12

59. Creativity
Thursday, January 19, 12

60. 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.org @PaulTrani
Thursday, January 19, 12

61. Leading the eye.
@PaulTrani
Thursday, January 19, 12

62. Golden Ratio
&'(")*$$'+,#-(./0
@PaulTrani
Thursday, January 19, 12

63. Golden Ratio
@PaulTrani
Thursday, January 19, 12

64. Golden Ratio
Layout Design App
@PaulTrani
Thursday, January 19, 12

65. Golden Ratio
@PaulTrani
Thursday, January 19, 12

66. Which object is easier to look at?
@PaulTrani
Thursday, January 19, 12

67. Sharp corners take focus outside the rectangle.
@PaulTrani
Thursday, January 19, 12

68. Rounded corners take focus inside the rectangle.
@PaulTrani
Thursday, January 19, 12

69. Thank You!
@paultrani
ptrani@adobe.com
• http://www.paultrani.com
• http://www.designmeltdown.com
• http://www.mobileawesomeness.com
• http://www.thefwa.com
@PaulTrani
Thursday, January 19, 12