Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

User Experience Design for iPad Applications- Impetus Webinar

837 views

Published on

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

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

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

×