UPA - innovative iPad app design


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Frustrating to use iPhone apps on an iPad (designed for small resolution and just doubled in size)Show examples of swipe, pinch, flipbook, carousel, etc.
  • Frustrating to use iPhone apps on an iPad (designed for small resolution and just doubled in size)Show examples of swipe, pinch, flipbook, carousel, etc.
  • Frustrating to use iPhone apps on an iPad (designed for small resolution and just doubled in size)Show examples of swipe, pinch, flipbook, carousel, etc.
  • Frustrating to use iPhone apps on an iPad (designed for small resolution and just doubled in size)Show examples of swipe, pinch, flipbook, carousel, etc.
  • Frustrating to use iPhone apps on an iPad (designed for small resolution and just doubled in size)Show examples of swipe, pinch, flipbook, carousel, etc.
  • UPA - innovative iPad app design

    1. 1. Designing Innovative and Engaging iPad Application User ExperiencesInnovationEmotional ConnectionKnow Your AudienceTablet InteractionDesign ConsiderationsUser AssistancePrototypes, Demos,and User TestingQuestions Mark Munzer Director of User Experience @ Peoplefluent
    2. 2. Innovation and Design“Innovation distinguishes between a leader and a follower”— Steve Jobs"Its easy to come up with new ideas; the hard part is letting go of what worked for youtwo years ago, but will soon be out of date."— Roger von Oech"Theres a way to do it better—find it.”— Thomas Edison"The world is but a canvas to our imaginations."— Henry David Thoreau“We made the buttons on the screen look so good you’ll want to lick them.”— Steve Jobs
    3. 3. iPad apps… creating an emotional connection • Design expressly for the imaginative power and hands-on appeal of mobile devices • Provide a hands-on experience using native gestures (touch, swipe, pinch) instead of traditional point and click • Design audience focused experiences that simplify sometimes-complex transactions for a focused experience on a high impact topic of interest • Offer “consumer” style capabilities consistent with how business people use consumer apps
    4. 4. Great business iPad apps… what can we learn from consumer iPad apps?Great iPad applications:• Are useful• Are intuitive and usable (usability does matter)• Are visually compelling (visual design does matter)• Create an immersive experience that excites users and drives engagement• May take advantage of mobility features (WIFI, 3G, offline usage)• May take advantage of iPad features (location services, camera, accelerometer, audio, video, etc.)• Secure
    5. 5. Know Your Audience! Executives Managers Human Resources Workers Free Agency Talent Supplier Network Predictable Magic
    6. 6. For some doctors, the iPad is claiming a key spot next to the stethoscope (source: Boston Globe, April 4, 2011)• At the launch of the iPad 2, Apple showed a video in which Dr. John Halamka, chief information officer at Beth Israel Deaconess, said the iPad “will change the way doctors practice medicine.”• …Halamka said “iPads are a great fit for doctors,” because, “… the ideal clinical device… has to weigh a pound, it has to last 10 hours, because that’s their shift, you have to be able to disinfect it so there’s no risk of contamination, and you have to be able to drop it 5 feet onto carpet without damage.’’ 2011 Peopleclick Authoria Proprietary & Confidential
    7. 7. iPad App – Nurse Preceptors Evaluate Clinical Competencies
    8. 8. Delight users with stunning graphics Consider replicating the look of high-quality or precious materials. If the effect of wood, leather, or metal is appropriate in your application, take the time to make sure the material looks realistic and valuable. For example, Notes reproduces the look of fine leather and meticulous stitching.
    9. 9. iPad Apps… different from websites• Focus your app (Essence). Websites often greet visitors with a large number of tasks and options from which they can choose, but this type of experience does not translate well to iOS apps. iOS users expect an app to do what it advertises, and they want to see useful content immediately.• Design for touch. Don’t try to replicate web UI design paradigms in your iOS app. Instead, get familiar with the UI elements and patterns of iOS and use them to showcase your content. Web elements you’ll need to re-examine include menus, interactions initiated by hovering, and links.• Let people scroll. Most websites take care to display the most important information in the top half of the page where it is seen first (“above the fold”), because people sometimes leave a page when they don’t find what they’re looking for near the top. But on iOS-based devices, scrolling is an easy, expected part of the experience. If you reduce font size or squeeze controls to fit your content into the space of a single device screen, you’re likely to end up with unreadable content and an unusable layout.
    10. 10. Design specifically for iPad.• Space is limited, but not as much as Smart Phone apps.• Don’t design an iPhone app and expect it to do double duty on an iPad! iPhone apps on iPad look bad Design specifically for iPad
    11. 11. Building emotional connections with executives and managers
    12. 12. Orientation (landscape vs portrait)• 2 orientations (landscape and portrait) present design challenges. Whatever their reason for rotating the device, people expect the app to maintain its focus on the primary functionality.
    13. 13. Touch spots have to be larger• Finger is larger than a mouse. Touch spots have to be larger. The comfortable minimum size of tappable UI elements is 44 x 44 points.
    14. 14. Touch Device Gestures• Application user interaction on touch devices is not the same as on web based apps. People make specific finger movements, called gestures, to operate the unique Multi-Touch interface of iOS-based devices.• When people directly manipulate onscreen objects instead of using separate controls to manipulate them, theyre more engaged with the task and they more readily understand the results of their actions. For example, instead of tapping zoom controls, people can use the pinch gestures to directly expand or contract an area of content.
    15. 15. Standard form controls are designed differently• You do not see radio buttons, checkboxes, and tabs on most iPad apps.
    16. 16. Cool UI Controls• Unique controls are available (flipbook, carousel, map, etc).
    17. 17. Physicality and Realism / Analog Mental Models / Metaphors• Ability to design digital UI and touch interactions that parallel analog mental models.• When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app.
    18. 18. Visual Transitions• Use of visual transitions and animations are common and expected.• Subtle animation can give people meaningful feedback that helps clarify the results of their actions.
    19. 19. Audio and Video• Use of audio and video is common.• Sound can also give people useful feedback. But sound shouldn’t be the primary or sole feedback mechanism because people may use their devices in places where they can’t hear or where they must turn off the sound.
    20. 20. Gamification to build engagement
    21. 21. Unique User Assistance Methods• Unique user assistance methods (nobody wants to read text based help). Mobile users have neither the time nor the desire to read through a lot of help content before they can benefit from an application.
    22. 22. Privacy / Security• Awareness of privacy/security issues. For example - multitasking, allows apps to remain in the background until they are launched again or until they are terminated. This should be considered when apps contain confidential information that requires log in.
    23. 23. iPad app prototypes• Before you invest significant engineering resources into the implementation of your design, it’s a really good idea to create prototypes for user testing.• In the very early stages of your design you can use paper prototypes or wireframes to lay out the main views and controls, and to map the flow among screens.• You’ll get more valuable feedback if you can put together a fleshed-out prototype that runs on the iPad. When people can interact with your prototype on an iPad, they’re more likely to uncover places where your app doesn’t function as they expect, or where the user experience is too complex.• Using a storyboard-based Xcode template.• Using HTML5/CSS3/JS
    24. 24. iPad app demos• Wrapping HTML prototypes to run natively on the iPad without a network connection. • A lot of technologies available to create native iOS wrapper (ex: Phonegap)• Presenting iPad apps on a projector (sales demo) • Use iPad to VGA adapter • Presentation mode (finger image)• Presenting iPad apps on a web conference (remote sales demo). • Running an iPad app/prototype on a Mac using iOS simulator (w/ Phone Finger) • Reflection - application for Mac leverages the AirPlay technology found in the iPad 2 to mirror the screen of iPad onto a Mac running Snow Leopard or higher
    25. 25. Usability testing iPad apps• We tested both remotely and in person. We had to test remotely to garner a decent sample size from the target audience.• For remote sessions, we created web-based version of the ipad app. User could click on hot spots to simulate swiping and page flipping. Not ideal, but workable. You can also use iOS simulator (if your app is a native app)• There was high correlations between lab and remote for task completion.• Post-task satisfaction ratings did not correlate as well. In person participants tended to provide higher ratings. But in general, the results between in-person and remote sessions appear to indicate that both lab and remote tests captured very similar information regarding usability.
    26. 26. Questions?