Your SlideShare is downloading. ×
0
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Webinar: Mobile app design by Infostretch
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webinar: Mobile app design by Infostretch

1,314

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 …

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,314
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Hello & Welcome to the InfoStretch sponsored Webinar: Mobile Application Design; its an art not a science. I’m Morgan, Lead UX Designer for InfoStretch Mobile Solutions
  • In Today’s Webinar we will review the scope of the mobile market, then dive into the Mobile ecosystem, and dive into the 7 main principles of Mobile Design. Lastly, we will review some key points on Custom Graphics vs Default graphics. What does that mean? And best practices!
  • Let’s begin… Mobile Facts…understanding Mobile
  • The complexities of the mobile ecosystem make mobile design appear like a rocket science, however this technology must be converted into an art and that is key to engagement from the users. The conversion must be made with the simplitistic ideals in order to keep engagment.Simplification means once users have a relatively brief period of experience with the software, their mental model of how the interface behaves is well formed and fully embedded. This is known technically as schema formation. In truly great user interfaces, this critical bit of skill acquisition takes place during a specific use cycle known as the First User Experience or FUE. When users are able to construct a robust schema quickly, they routinely rate the user interface as “simple”. It is possible to create a user interface solution that is initially perceived by users as simple. However, the challenge is to create a desire by users to continue interaction with a system over time and that is the balance of UX simplicity and Design aesthitic.
  • Transcript

    • 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. 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. InfoStretch Overview<br />
    • 4. Mobile Facts<br />Understanding the Mobile Market<br />1<br />
    • 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. Size and Scope of the Mobile Market<br />Why does it matter?<br />
    • 7. Mobile Ecosystem<br />Understanding the basics<br />2<br />
    • 8. What makes the mobile environment such a complicated space to design and develop?<br />
    • 9. The Mobile EcoSystem<br />
    • 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. Proprietary- not available on other devices, iPhoneMacOs,
    • 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. 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. 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. They are simple to deploy across multiple handsets.
    • 16. They offer a better user experience & a rich design, tapping into device features & offline use.
    • 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. They can be challenging (but not impossible) to support across multiple devices.
    • 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. They can use all the same tools and techniques you might already use for desktop sites.
    • 21. Nearly all mobile devices can view mobile websites. </li></ul>Cons<br /><ul><li>The cons of mobile websites are:
    • 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.
    • 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. Mobile Design<br />The 7 Principles…<br />3<br />
    • 27. 1<br />The Art of Understanding<br />Design is a conscious effort to impose a meaningful order.<br />-Victor Papanek<br />
    • 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. Design within reach<br />
    • 30. 4 Main Groups<br />Serious Tools<br />Fun Tools<br />Fun Games<br />Serious Entertainment<br />
    • 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. Strategy<br />Taking a Web Experience & converting it to a smaller screen won’t work.<br />View Southwest Airlines<br />
    • 33. 3<br />Context<br />(Your differentiator) <br />(Your solution) for (Your audience).<br />
    • 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. 4<br />Use Case Scenarios<br />Anyone can make the simple complicated.<br />Design is making the complicated Intuitive.<br />
    • 36. Use Case Scenarios<br />
    • 37. 5<br />One Door Policy<br />Good design is obvious. Great design is transparent.<br />- Joe Sparano<br />
    • 38. SiteMaps<br />One Door Policy<br /> – Show the door!<br />
    • 39. 6<br />Form & Function<br />People ignore design that ignores people.<br />- Frank Chimero<br />
    • 40. Wireframing & Prototyping<br />
    • 41. Wireframing & Prototyping<br />High Fidelity<br />StoryBoard<br />Standalone Wireframes<br />
    • 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. 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. Bring it to Life<br />
    • 45. Mobile Design Debate<br />Graphic Types<br />3<br />
    • 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. 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 />

    ×