There are almost a million mobile applications available for download in the app stores. However, a very small percentage of those apps have been successful. One thing common among all the ones that made it big is; the user experience. Mobile design is a great challenge for developers today. There isn’t much historical data available on mobile app usage and neither has there been much research on mobile app user experience. The challenges are many, fragmented mobile market, variety of input methods, and a very small canvas that might limit the scope of creativity. In this live webinar, Morgan Russell, an experienced UX and UI designer at Infostretch, shared her experience of developing mobile applications: •Mobile App Design: What’s different •Native mobile features and design elements •Understanding end user behavior •Translating wireframes into design •Inducing “wow” factor into your mobile apps

1. InfoStretch Webinar Mobile Application Design: It’s an Art, not a Science? Presenter: Morgan Russell UX/UI Design Lead, InfoStretch Corporation April, 2011 All trademarks are the property of their respective owners.©2004-2011 InfoStretch Corporation. All rights reserved.

2. Today’s Exploration 1. InfoStretch Overview 2. Mobile Scope 3. Mobile Ecosystem: Understanding the Basics 4. Mobile Design: The 7 Principles 5. Mobile Design: Custom vs Default Graphics INFOSTRETCH CORPORATE (p) (408) 727-1100 | (w) ww.infostretch.com | (e) info@infostretch.com | Presenter: Rutesh Shah

3. InfoStretch Overview

4. Mobile Facts Understanding the Mobile Market 1

5. Brief History & Context 1998 Nokia Increase in Design needs ‘02 Smartphone ’07 Mac Iphone Motorola Feature phone ‘08

6. Size and Scope of the Mobile Market Why does it matter?

7. Mobile Ecosystem Understanding the basics 2

8. What makes the mobile environment such a complicated space to design and develop?

9. The Mobile EcoSystem

11. Proprietary- not available on other devices, iPhoneMacOs,

13. Design Process & Ecosystem … Development Prototype Wireframe UI SiteMap & Design Choose your Device Strategy Context Goals & Needs

15. They are simple to deploy across multiple handsets.

16. They offer a better user experience & a rich design, tapping into device features & offline use.

18. They can be challenging (but not impossible) to support across multiple devices.

20. They can use all the same tools and techniques you might already use for desktop sites.

22. They can be difficult to support across multiple devices.

23. They offer users a limited experience.

24. Most mobile websites are simply desktop content reformatted for mobile devices.

26. Mobile Design The 7 Principles… 3

27. 1 The Art of Understanding Design is a conscious effort to impose a meaningful order. -Victor Papanek

28. The Art of Understanding Goals & Needs of End Users = Designing for Humans Who are your users? What do you know about them? What type of behavior can you assume or predict? What is happening? What are the circumstances in which they will best absorb the content you intend to present? When will they interact? When they are home and have large amounts of time? At work, where they have short periods of focus? During idle periods, while waiting for a train? Where are they? Are they in a public space or a private space? Are they inside or outside? Is it day or is it night? Why will they use your app? What value will they gain from your content or services in their present situation? How are they using their mobile devices? Are they held in the hand or in the pocket? How are they holding it? Open or closed? Portrait or landscape?

29. Design within reach

30. 4 Main Groups Serious Tools Fun Tools Fun Games Serious Entertainment

31. 2 Strategy The best place to begin a mobile strategy is by creating a product, not simply trying to re-imagine one for a small screen.

32. Strategy Taking a Web Experience & converting it to a smaller screen won’t work. View Southwest Airlines

33. 3 Context (Your differentiator) (Your solution) for (Your audience).

34. Task & Context Example: iBooks (Easy to use) (Access to a reading Library, similar to every day resources) for (Avid to Casual Readers)

35. 4 Use Case Scenarios Anyone can make the simple complicated. Design is making the complicated Intuitive.

36. Use Case Scenarios

37. 5 One Door Policy Good design is obvious. Great design is transparent. - Joe Sparano

38. SiteMaps One Door Policy – Show the door!

39. 6 Form & Function People ignore design that ignores people. - Frank Chimero

40. Wireframing & Prototyping

41. Wireframing & Prototyping High Fidelity StoryBoard Standalone Wireframes

42. 7 The Art of bringing it to Life The only important thing about design is how it relates to people. - Victor Papanek

43. Native Capabilities Camera – Main camera, front facing GPS Accelerometer Audio/Video Touch Interface Designing for Native Capabilities

44. Bring it to Life

45. Mobile Design Debate Graphic Types 3

46. Default Graphics vs Custom Graphics Top 4 Countdown of reasons to Use Default Graphics Budget Simple Functionality Serious Tool Iterative Approach

47. Default Graphics Vs Custom Graphics Graphics Top 4 Countdown Reasons to Use Custom Graphics Available Budget Improved Functionality Attention Getter Fighting the Status Quo Default Graphics Custom Graphics