Your SlideShare is downloading. ×

Top 10 Considerations for Kickass Mobile Design

494
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
494
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
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 Mobile Application Design: It’s an Art, not a Science? Presenter: Morgan Russell UX/UI Design Lead, InfoStretch Corporation April, 2011All 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 GraphicsINFOSTRETCH CORPORATE(p) (408) 727-1100 | (w) ww.infostretch.com | (e) info@infostretch.com | Presenter: Rutesh Shah
    • 3. InfoStretch Overview Organization People Infrastructure  HQ in Silicon Valley  Skilled Project Management  Extensive Platform Compatibility  Offices in New York, Seattle Team and Performance Test Labs  Offshore Centers in Mumbai  Average 5 years experience  2000+ Mobile Handset Test Lab & Ahmedabad, India  Dynamic Team of 220+  ISO 9000-2001 Certified  90+ Clients and 140+ Projects Engineers  High Availability and 24 hours  Well Established Recruitment,  Industry Expertise in Finance, secure offshore centers with retention and training Retail, Mobile and Healthcare  DR capabilities. programs Partnersphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 4. 1 Mobile Facts Understanding the Mobile Marketphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2010 InfoStretch Corporation. All rights reserved.
    • 5. Brief History & Context 1998 Nokia ‘02 Smartphone ’07 Mac Iphone Motorola Feature phone ‘08phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2010 InfoStretch Corporation. All rights reserved.
    • 6. Size and Scope of the Mobile Market Why does it matter?phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2010 InfoStretch Corporation. All rights reserved.
    • 7. 2 Mobile Ecosystem Understanding the basicsphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 8. What makes the mobile environment such a complicated space to design and develop?phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 9. The Mobile EcoSystem Services Application Frameworks Operating Applications Systems Devices Networks Platforms Aggregators Operatorsphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 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 Platform 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. • Proprietary- not available on other devices, iPhone MacOs, • Open Source- freely available for users to download, such as Android (based on Java programming language)phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 11. 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. Services What do they do? Services include tasks, such as accessing the internet, sending a text msg, location based services.phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 12. Design Process & Ecosystem … Development Servic es Prototype Applicati on Framewor ks SiteMap & Design Applications Operating Systems Choose your Device Network Devices Strategy s Context Platforms Aggregators Operators Goals & Needsphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 13. Mobile Websites vs Mobile Web Applications Mobile Web Apps: Mobile Websites Pros Pros • They are easy to create, using basic HTML, • They are easy to create, maintain, and CSS, and JavaScript knowledge. publish. • They are simple to deploy across multiple • They can use all the same tools and handsets. techniques you might already use for desktop sites. • They offer a better user experience & a • Nearly all mobile devices can view mobile rich design, tapping into device features websites. & offline use. • Content is accessible on any mobile web Cons browser. •The cons of mobile websites are: Cons •They can be difficult to support across multiple • The optimal experience might not be devices. available on all handsets. •They offer users a limited experience. • They can be challenging (but not •Most mobile websites are simply desktop impossible) to support across multiple content reformatted for mobile devices. devices. •They can load pages slowly, due to network latency. • They don’t always support native application features, like offline mode, location lookup, filesystem access, camera, and so on.phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 14. Overall Process at a Glance Client Developme Branding, nt team End-user Interview, Feedback Capabilities Interviews, Designer and Feedback constraints User research/Market User Stories Mindmap Wireframes Prototype researchphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 15. 3 Mobile Design The 7 Principles…phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2010 InfoStretch Corporation. All rights reserved.
    • 16. 1 The Art of Understanding Design is a conscious effort to impose a meaningful order. -Victor Papanekphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 17. 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?phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 18. Design within reachphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 19. 4 Main Groups Serious Tools Fun Tools Fun Games Serious Entertainmentphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 20. 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.phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 21. StrategyTaking a Web Experience & converting it to a smaller screen won’t work.View Southwest Airlines phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com ©2004-2011 InfoStretch Corporation. All rights reserved.
    • 22. Context 3 (Your differentiator) (Your solution) for (Your audience).phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 23. Task & Context Example: iBooks (Easy to use) (Access to a reading Library, similar to every day resources) for (Avid to Casual Readers)phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 24. Use Case Scenarios 4 Anyone can make the simple complicated. Design is making the complicated Intuitive.phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 25. Use Case Scenariosphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 26. 5 One Door Policy Good design is obvious. Great design is transparent. - Joe Sparanophone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 27. SiteMaps One Door Policy – Show the door!phone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 28. 6 Form & Function People ignore design that ignores people. - Frank Chimerophone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 29. Wireframing & Prototypingphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 30. Wireframing & Prototyping High Fidelity StoryBoard Standalone Wireframesphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 31. The Art of bringing it to Life 7 The only important thing about design is how it relates to people. - Victor Papanekphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 32. Designing for Native Capabilities Native Capabilities Camera – Main camera, front facing GPS Accelerometer Audio/Video Touch Interfacephone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 33. Bring it to Lifephone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 34. 3 Mobile Design Debate Graphic Typesphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 35. Default Graphics vs Custom Graphics Top 4 Countdown of reasons to Use Default Graphics Budget Simple Functionality Serious Tool Iterative Approachphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 36. Default Graphics Vs Custom Graphics Graphics Reasons to Use Custom Graphics Top 4 Countdown Default Available Budget Graphics Improved Functionality Attention Getter Fighting the Status Quo Custom Graphicsphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.
    • 37. Website: www.infostretch.comSanta Clara New York Seattle Ahmedabad MumbaiHeadquarters 17 Tanglewood Rd, 2550 3rd Ave, #712 5th Floor, Regency Vashi InfoTech Park,2880 Lakeside Drive, #200 Scarsdale, NY 10583 Seattle, WA 98121 Plaza, Anand Nagar, B103, Tower # 1,Santa Clara, CA 95054 (703) 395-9791 (206) 402-2426 Ahmedabad-15, Vashi Rail Station,(408) 727-1100 Gujarat, India New Mumbai, 91-79-40266266 Maharashtra, India 91-22-6947900 Partnersphone: (408) 727-1100 | website: www.infostretch.com | email: info@infostretch.com©2004-2011 InfoStretch Corporation. All rights reserved.