User Experience Design for iPad Applications- Impetus Webinar

795 views

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
795
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

User Experience Design for iPad Applications- Impetus Webinar

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. © 2014 11 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  12. 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. 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. 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. 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. 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. 17. And now we get technical © 2014 17 Impetus Technologies
  18. 18. Designing your App © 2014 18 Impetus Technologies
  19. 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. 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. 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. 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. 23. © 2014 23 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  24. 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. 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. 26. © 2014 26 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  27. 27. © 2014 27 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  28. 28. USA TODAY for iPad © 2014 28 Impetus Technologies
  29. 29. © 2014 29 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  30. 30. © 2014 30 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  31. 31. © 2014 31 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  32. 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. 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. 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. 35. © 2014 35 Impetus Technologies iA Writer
  36. 36. © 2014 36 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  37. 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. 38. © 2014 38 Impetus Technologies Paper by Fifty Three
  39. 39. © 2014 39 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  40. 40. © 2014 40 Impetus Technologies Topps Pennant
  41. 41. © 2014 41 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  42. 42. © 2014 42 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  43. 43. © 2014 43 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  44. 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. 45. © 2014 45 Impetus Technologies A few other things
  46. 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. 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. 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. 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. 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. 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. 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. 53. © 2014 53 Impetus Technologies Case Study : Mail
  54. 54. © 2014 54 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  55. 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. 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. 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. 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. 59. © 2014 59 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  60. 60. © 2014 60 Impetus Technologies Case Study : iBooks
  61. 61. © 2014 61 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  62. 62. © 2014 62 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  63. 63. © 2014 63 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  64. 64. © 2014 64 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  65. 65. Case Study: Google Translate © 2014 65 Impetus Technologies
  66. 66. © 2014 66 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  67. 67. © 2014 67 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  68. 68. © 2014 68 Impetus Technologies Recorded version available at http://www.impetus.com/webinar_registration?event=archived&eid=59
  69. 69. © 2014 69 Impetus Technologies Summary
  70. 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. 71. © 2014 71 Impetus Technologies About Impetus
  72. 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. 73. © 2014 73 Impetus Technologies Q & A
  74. 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

×