Your SlideShare is downloading. ×
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


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
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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
      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
      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
      (p) (408) 727-1100 | (w) | (e) | Presenter: Rutesh Shah
    • 3. InfoStretch Overview
    • 4. Mobile Facts
      Understanding the Mobile Market
    • 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
    • 8. What makes the mobile environment such a complicated space to design and develop?
    • 9. The Mobile EcoSystem
    • 10. Mobile EcoSystem
      Operators- Wireless carriers, Mobile Network Operators, Carriers What do they do?: Make the mobile ecosystem work with a reliable carrier network
      Example: Telefonia, Tmobile, Telecom, Verizon, Vodafone…
      Networks - Cellular technology
      What do they Do? Networks essentially are radio & antennas that determine the capability of the network
      Example: GPRS, GSM, CDMA, HSPA and so on
      What do they do? Duty is to provide access to devices and run software and services on devices.
      Three types:
      • 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)
    • EcoSystem Continued
      Operating Systems-
      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
      Application Framework
      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.
      What do they do? Services include tasks, such as accessing the internet, sending a text msg, location based services.
    • 13. Design Process & Ecosystem

      Wireframe UI
      SiteMap & Design
      Choose your Device
      Goals & Needs
    • 14. Mobile Websites vs Mobile Web Applications
      Mobile Web Apps:
      • 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.
      • 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.
      Mobile Websites
      • 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.
      • 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.
    • Overall Process at a Glance
      Development team
      Branding, Interview, Feedback
      Capabilities and constraints
      Interviews, Feedback
    • 26. Mobile Design
      The 7 Principles…
    • 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
      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
      (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
      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
      Touch Interface
      Designing for Native Capabilities
    • 44. Bring it to Life
    • 45. Mobile Design Debate
      Graphic Types
    • 46. Default Graphics vs Custom Graphics
      Top 4 Countdown of reasons to Use Default Graphics
      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