26
Innovation Emotional Connection Know Your Audience Tablet Interaction Design Considerations User Assistance Prototypes, Demos, and User Testing Questions Designing Innovative and Engaging iPad Application User Experiences Mark Munzer Director of User Experience @ Peoplefluent

UPA - innovative iPad app design

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: UPA -  innovative iPad app design

Innovation

Emotional Connection

Know Your Audience

Tablet Interaction

Design Considerations

User Assistance

Prototypes, Demos,and User Testing

Questions

Designing Innovative and Engaging iPad Application User Experiences

Mark MunzerDirector of User Experience @ Peoplefluent

Page 2: UPA -  innovative iPad app design

Innovation and Design

“Innovation distinguishes between a leader and a follower”— Steve Jobs

"It's easy to come up with new ideas; the hard part is letting go of what worked for you two years ago, but will soon be out of date."— Roger von Oech

"There's 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

Page 3: UPA -  innovative iPad app design

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

Page 4: UPA -  innovative iPad app design

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

Page 5: UPA -  innovative iPad app design

Predictable Magic

Know Your Audience!

Executives

Managers

Human Resources

Free AgencyTalent

SupplierNetwork

Workers

Page 6: UPA -  innovative iPad app design

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

Page 7: UPA -  innovative iPad app design

iPad App – Nurse Preceptors Evaluate Clinical Competencies

Page 8: UPA -  innovative iPad app design

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.

Page 9: UPA -  innovative iPad app design

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.

Page 10: UPA -  innovative iPad app design

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

Page 11: UPA -  innovative iPad app design

Building emotional connections with executives and managers

Page 12: UPA -  innovative iPad app design

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.

Page 13: UPA -  innovative iPad app design

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.

Page 14: UPA -  innovative iPad app design

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, they're 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.

Page 15: UPA -  innovative iPad app design

Standard form controls are designed differently

• You do not see radio buttons, checkboxes, and tabs on most iPad apps.

Page 16: UPA -  innovative iPad app design

Cool UI Controls

• Unique controls are available (flipbook, carousel, map, etc).

Page 17: UPA -  innovative iPad app design

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.

Page 18: UPA -  innovative iPad app design

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.

Page 19: UPA -  innovative iPad app design

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.

Page 20: UPA -  innovative iPad app design

Gamification to build engagement

Page 21: UPA -  innovative iPad app design

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.

Page 22: UPA -  innovative iPad app design

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.

Page 23: UPA -  innovative iPad app design

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

Page 24: UPA -  innovative iPad app design

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

Page 25: UPA -  innovative iPad app design

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.

Page 26: UPA -  innovative iPad app design

Questions?