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.

Webinar: Mobile app design by Infostretch

1,743 views

Published on

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

Published in: Technology
  • Be the first to comment

Webinar: Mobile app design by Infostretch

  1. 1. InfoStretch Webinar<br />Mobile Application Design:<br />It’s an Art, not a Science?<br />Presenter: Morgan Russell<br />UX/UI Design Lead, InfoStretch Corporation<br />April, 2011<br />All trademarks are the property of their respective owners.©2004-2011 InfoStretch Corporation. All rights reserved.<br />
  2. 2. Today’s <br />Exploration<br />1. InfoStretch Overview<br />2. Mobile Scope<br />3. Mobile Ecosystem: Understanding the Basics<br />4. Mobile Design: The 7 Principles<br />5. Mobile Design: Custom vs Default Graphics<br />INFOSTRETCH CORPORATE<br />(p) (408) 727-1100 | (w) ww.infostretch.com | (e) info@infostretch.com | Presenter: Rutesh Shah<br />
  3. 3. InfoStretch Overview<br />
  4. 4. Mobile Facts<br />Understanding the Mobile Market<br />1<br />
  5. 5. Brief History & Context<br />1998 Nokia<br />Increase in Design needs<br />‘02 Smartphone<br />’07 Mac Iphone<br />Motorola Feature phone ‘08<br />
  6. 6. Size and Scope of the Mobile Market<br />Why does it matter?<br />
  7. 7. Mobile Ecosystem<br />Understanding the basics<br />2<br />
  8. 8. What makes the mobile environment such a complicated space to design and develop?<br />
  9. 9. The Mobile EcoSystem<br />
  10. 10. Mobile EcoSystem<br />Operators- Wireless carriers, Mobile Network Operators, Carriers What do they do?: Make the mobile ecosystem work with a reliable carrier network<br /> Example: Telefonia, Tmobile, Telecom, Verizon, Vodafone…<br />Networks - Cellular technology<br /> What do they Do? Networks essentially are radio & antennas that determine the capability of the network<br /> Example: GPRS, GSM, CDMA, HSPA and so on<br />Platform<br /> What do they do? Duty is to provide access to devices and run software and services on devices. <br />Three types: <br /><ul><li>Licensed- such as Java Me, Windows Mobile.
  11. 11. Proprietary- not available on other devices, iPhoneMacOs,
  12. 12. Open Source- freely available for users to download, such as Android (based on Java programming language)</li></li></ul><li>EcoSystem Continued<br />Operating Systems-<br />What do they do? Operating Systems have core services that enable applications to talk to each other and share data. Examples: Symbian, Windows Mobile, Linux, Mac OS X, Android<br />Application Framework<br /> What do they do? Run on top of operating systems, sharing core services such as communications, messaging, graphics, location, security, authentication and others. Although this is development related aspects, as a designer is it key to understanding design limitations.<br />Services<br />What do they do? Services include tasks, such as accessing the internet, sending a text msg, location based services.<br />
  13. 13. Design Process & Ecosystem<br />…<br />Development<br />Prototype<br />Wireframe UI<br />SiteMap & Design<br />Choose your Device<br />Strategy<br />Context<br />Goals & Needs<br />
  14. 14. Mobile Websites vs Mobile Web Applications<br />Mobile Web Apps:<br />Pros<br /><ul><li>They are easy to create, using basic HTML, CSS, and JavaScript knowledge.
  15. 15. They are simple to deploy across multiple handsets.
  16. 16. They offer a better user experience & a rich design, tapping into device features & offline use.
  17. 17. Content is accessible on any mobile web browser. </li></ul>Cons<br /><ul><li>The optimal experience might not be available on all handsets.
  18. 18. They can be challenging (but not impossible) to support across multiple devices.
  19. 19. They don’t always support native application features, like offline mode, location lookup, filesystem access, camera, and so on. </li></ul>Mobile Websites<br />Pros<br /><ul><li> They are easy to create, maintain, and publish.
  20. 20. They can use all the same tools and techniques you might already use for desktop sites.
  21. 21. Nearly all mobile devices can view mobile websites. </li></ul>Cons<br /><ul><li>The cons of mobile websites are:
  22. 22. They can be difficult to support across multiple devices.
  23. 23. They offer users a limited experience.
  24. 24. Most mobile websites are simply desktop content reformatted for mobile devices.
  25. 25. They can load pages slowly, due to network latency. </li></li></ul><li>Overall Process at a Glance<br />Client<br />Development team<br />End-user<br />Branding, Interview, Feedback<br />Designer<br />Capabilities and constraints <br />Interviews, Feedback<br />
  26. 26. Mobile Design<br />The 7 Principles…<br />3<br />
  27. 27. 1<br />The Art of Understanding<br />Design is a conscious effort to impose a meaningful order.<br />-Victor Papanek<br />
  28. 28. The Art of Understanding<br />Goals & Needs of End Users = Designing for Humans<br />Who are your users? What do you know about them? What type of behavior can you assume or predict? <br />What is happening? What are the circumstances in which they will best absorb the content you intend to present? <br />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? <br />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? <br />Why will they use your app? What value will they gain from your content or services in their present situation? <br />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? <br />
  29. 29. Design within reach<br />
  30. 30. 4 Main Groups<br />Serious Tools<br />Fun Tools<br />Fun Games<br />Serious Entertainment<br />
  31. 31. 2<br />Strategy<br />The best place to begin a mobile strategy is by creating a product, not simply trying to re-imagine one for a small screen.<br />
  32. 32. Strategy<br />Taking a Web Experience & converting it to a smaller screen won’t work.<br />View Southwest Airlines<br />
  33. 33. 3<br />Context<br />(Your differentiator) <br />(Your solution) for (Your audience).<br />
  34. 34. Task & Context<br />Example: iBooks<br />(Easy to use) (Access to a reading Library, similar to every day resources) for (Avid to Casual Readers)<br />
  35. 35. 4<br />Use Case Scenarios<br />Anyone can make the simple complicated.<br />Design is making the complicated Intuitive.<br />
  36. 36. Use Case Scenarios<br />
  37. 37. 5<br />One Door Policy<br />Good design is obvious. Great design is transparent.<br />- Joe Sparano<br />
  38. 38. SiteMaps<br />One Door Policy<br /> – Show the door!<br />
  39. 39. 6<br />Form & Function<br />People ignore design that ignores people.<br />- Frank Chimero<br />
  40. 40. Wireframing & Prototyping<br />
  41. 41. Wireframing & Prototyping<br />High Fidelity<br />StoryBoard<br />Standalone Wireframes<br />
  42. 42. 7<br />The Art of bringing it to Life<br />The only important thing about design is how it relates to people.<br />- Victor Papanek<br />
  43. 43. Native Capabilities<br />Camera – Main camera, front facing<br />GPS<br />Accelerometer<br />Audio/Video<br />Touch Interface<br />Designing for Native Capabilities<br />
  44. 44. Bring it to Life<br />
  45. 45. Mobile Design Debate<br />Graphic Types<br />3<br />
  46. 46. Default Graphics vs Custom Graphics<br />Top 4 Countdown of reasons to Use Default Graphics<br />Budget<br />Simple Functionality<br />Serious Tool<br />Iterative Approach<br />
  47. 47. Default Graphics Vs Custom Graphics Graphics<br />Top 4 Countdown Reasons to Use Custom Graphics<br />Available Budget<br />Improved Functionality<br />Attention Getter<br />Fighting the Status Quo<br />Default Graphics<br />Custom Graphics<br />

×