Impetus webcast ‘User Experience Design for iPad Applications’ available at http://lf1.me/U8/

1. Impetus Technologies Inc.
User Experience Design For iPad
© 2014 1 Impetus Technologies
Applications
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

2. The Problem
• Why should you support the iPad
• How do you support the iPad?
• It’s going to cost more to develop for the iPad; is it worth it?
© 2014 2 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

3. What’s Different
• Screen size
• Additional UI elements
• Users’ expectations
• Revenue
© 2014 3 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

4. Screen Sizes
iPhone 320 ×480 640 ×960
iPad 1024 x 768 2048 × 1536
© 2014 4 Impetus Technologies
Legacy Retina
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

5. Additional UI Elemenets
• Popovers
• Split views
© 2014 5 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

6. Additional UI Elements
• Popovers
• Split views
© 2014 6 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

7. User’s Expectations
• Users expect a richer user experience
• Users expect higher fidelity artwork
© 2014 7 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

8. Revenue
• iPad apps tend to sell at a higher price
© 2014 8 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

9. Options
• Rely on the compatibility mode
• Create a universal app
• Create a version of your app for the iPad
© 2014 9 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

10. Compatibility Mode
• iPhone apps run in a compatibility mode
• No additional development effort
• This might be a reasonable choice
© 2014 10 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

11. © 2014 11 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

12. Universal App
• Simply scaling works but often does not yield the best results
• You should take advantage of available space
© 2014 12 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

13. Universal App
• For the iPhone, if you depend on the standard UI elements, you
can create a pretty good looking app
• For the iPad, it’s much harder
© 2014 13 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

14. iPad App
• iPad apps aren't’t oversized iPhone apps
• However, the development effort may not be significantly
more
• Avoid making users feel that they’re choosing between two
different apps
© 2014 14 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

15. How are Costs affected?
• Consider
• Design effort
• QA effort
• Engineering effort
© 2014 15 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

16. Poll
• What is the most difficult challenge you face in
developing for the iPad?
• Design
• Engineering staffing
• QA testing
• Cost
© 2014 16 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

17. And now we get technical
© 2014 17 Impetus Technologies

18. Designing your App
© 2014 18 Impetus Technologies

19. Keep Focused
• Give people innovative ways perform a clearly defined task
• Avoid adding features that are not directly related to the main task
• Don’t bring back the functionality you removed from your iPhone
© 2014 19 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59
app

20. Guidelines that Work
• Make it work seamlessly in either mode
• Minimize full frame swipes
• Reduce navigation to a sidebar or a popover
© 2014 20 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

21. Guidelines that Don’t
• Make apps look like physical objects
© 2014 21 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

22. Skeuomorphic Design
• Hard to say
• Hard to do
• Hard to measure results
© 2014 22 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

23. © 2014 23 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

24. No Tabs Bar
• The iPad tends to be used in a more relaxed mode
• Tab bar buttons can be hard to reach!
© 2014 24 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

25. Flip board : Your Social News
© 2014 25 Impetus Technologies
Magazine
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

26. © 2014 26 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

27. © 2014 27 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

28. USA TODAY for iPad
© 2014 28 Impetus Technologies

29. © 2014 29 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

30. © 2014 30 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

31. © 2014 31 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

32. Scrolling or Paging?
• Scrolling is easier than swiping from page to page
• Paging is better than scrolling
• No clear answer for all apps
© 2014 32 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

33. Use Gestures Wisely
• Remember that one hand is usually holding the device
• Introduce non-standard gestures through first-time tutorials
• Be aware of iOS-level gestures, including the four-finger swipe
up, five-finger swipe left or right, and five-finger pinch
© 2014 33 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

34. Be Thoughtful
• You don’t have to use the split view
© 2014 34 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

35. © 2014 35 Impetus Technologies
iA Writer

36. © 2014 36 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

37. Be Creative
• Flip board
• Paper
• Pennant
© 2014 37 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

38. © 2014 38 Impetus Technologies
Paper by Fifty Three

39. © 2014 39 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

40. © 2014 40 Impetus Technologies
Topps Pennant

41. © 2014 41 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

42. © 2014 42 Impetus Technologies Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

43. © 2014 43 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

44. Collecting Thoughts
• Minimize input, maximize output
• Don’t waste screen real estate and user attention on
secondary functions
• If it works on the iPad, with a few tweaks it will work
on a laptop
© 2014 44 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

45. © 2014 45 Impetus Technologies
A few other things

46. Artwork
• Adapt art to the screen size
• Scaling up an iPhone app to fill the iPad screen is not
recommended
© 2014 46 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

47. Default.png
• For iPhone and iPod touch launch images, include the status bar
region
• For iPad launch images, do not include the status bar region
• Most iPad applications should supply a launch image for each
orientation
© 2014 47 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

48. Icons
• You are supporting Retina displays, aren’t
you?
• The good news is you’ve already created
several of the icons you’ll need
© 2014 48 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

49. iPhone and
iPod touch
Application icon 57 x 57 114 x 114 72 x 72 144 x 144
© 2014 49 Impetus Technologies
High-resolution
iPhone and iPod
touch
Recorded version available at
iPad High-resolution iPad
http://www.impetus.com/webinar_registration?event=archived&eid=59
App icon for
the App Store
512 x 512 1024 x 1024 512 x 512 1024 x 1024
Launch image 320 x 480 640 x 960
768 x 1004
(portrait)
1024 x 748
(landscape)
1536 x 2008
(portrait)
2048 x 1496
(landscape)
Small icon for
Search results and
Settings
29 x 29 58 x 58
50 x 50
(Search results)
29 x 29
(Settings)
100 x 100
(Search results)
58 x 58
(Settings)

50. iPhone and
iPod touch
Application icon 57 x 57 114 x 114 72 x 72 144 x 144
© 2014 50 Impetus Technologies
High-resolution
iPhone and iPod
touch
Recorded version available at
iPad High-resolution iPad
http://www.impetus.com/webinar_registration?event=archived&eid=59
App icon for
the App Store
512 x 512 1024 x 1024 512 x 512 1024 x 1024
Launch image 320 x 480 640 x 960
768 x 1004
(portrait)
1024 x 748
(landscape)
1536 x 2008
(portrait)
2048 x 1496
(landscape)
Small icon for
Search results and
Settings
29 x 29 58 x 58
50 x 50
(Search results)
29 x 29
(Settings)
100 x 100
(Search results)
58 x 58
(Settings)

51. Payload Size
• Apps can be as large as 2GB, but be aware of download times
• Make efforts to minimize file size
• There is a 50MB limit for Over the Air downloads
© 2014 51 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

52. Developing a Universal App
• Consider defining separate view controller classes for
iPhone and iPad devices
© 2014 52 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

53. © 2014 53 Impetus Technologies
Case Study : Mail

54. © 2014 54 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

55. Case Study
• Mail on the iPhone is on the go
• Mail on the iPad encourages more in-depth use
• Users coming from the iPhone can navigate easily
© 2014 55 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

56. Case Study
• To enhance the mobile email experience, Mail on
iPad evolves the iPhone Mail UI in a number of
important ways
© 2014 56 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

57. Case Study
• People can use the app in any of the four orientations
• Most of the screen is reserved for the current
message
• A flatter hierarchy
• Drastically reduced full-screen transitions
© 2014 57 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

58. Case Study
• And a small amount of skeuomorphism
© 2014 58 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

59. © 2014 59 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

60. © 2014 60 Impetus Technologies
Case Study : iBooks

61. © 2014 61 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

62. © 2014 62 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

63. © 2014 63 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

64. © 2014 64 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

65. Case Study: Google Translate
© 2014 65 Impetus Technologies

66. © 2014 66 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

67. © 2014 67 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

68. © 2014 68 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

69. © 2014 69 Impetus Technologies
Summary

70. Summary
• Don’t just make your iPhone app bigger
• Do leverage your investment in iPhone development
• Do create a richer customer experience
• Do create greater customer engagement
© 2014 70 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

71. © 2014 71 Impetus Technologies
About Impetus

72. • Strategic partners for software product engineering and
R&D
• Thought leaders in cutting-edge technologies
• Mature processes and practices that are methodical, yet
flexible
• Diverse domain expertise
© 2014 72 Impetus Technologies
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59

73. © 2014 73 Impetus Technologies
Q & A

74. © 2014 74 Impetus Technologies
Thank You
Write to us at inquiry@impetus.com
Follow us on Twitter @impetustech
Recorded version available at
http://www.impetus.com/webinar_registration?event=archived&eid=59