Mobile Application Design: It’s an Art, not a Science?Presenter: Morgan RussellUX/UI Design Lead, InfoStretch Corporation
All trademarks are the property of their respective owners.©2004-2011 InfoStretch Corporation. All rights reserved.
InfoStretch Webinar
April, 2011
1. InfoStretch Overview2. Mobile Scope3. Mobile Ecosystem: Understanding the Basics4. Mobile Design: The 7 Principles5. Mobile Design: Custom vs Default Graphics
Today’s Exploration
INFOSTRETCH CORPORATE(p) (408) 727-1100 | (w) ww.infostretch.com | (e) [email protected] | Presenter: Rutesh Shah
Organization HQ in Silicon Valley Offices in New York, Seattle Offshore Centers in Mumbai & Ahmedabad, India 90+ Clients and 140+
Projects Well Established
Recruitment, retention and training programs
Skilled Project Management Team
Average 5 years experience Dynamic Team of 220+
Engineers Industry Expertise in Finance,
Retail, Mobile and Healthcare
Infrastructure Extensive Platform
Compatibility and Performance Test Labs
2000+ Mobile Handset Test Lab
ISO 9000-2001 Certified High Availability and 24 hours
secure offshore centers with DR capabilities.
People
Partners
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
InfoStretch Overview
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2010 InfoStretch Corporation. All rights reserved.
Mobile Facts
Understanding the Mobile Market
1
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2010 InfoStretch Corporation. All rights reserved.
Brief History & Context1998 Nokia
Motorola Feature phone ‘08
‘02 Smartphone ’07 Mac Iphone
Increase in Design needs
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2010 InfoStretch Corporation. All rights reserved.
Size and Scope of the Mobile Market
Why does it matter?
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Mobile EcosystemUnderstanding the basics
2
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
What makes the mobile environment such a complicated
space to design and develop?
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Services
Applications
Application Framework
s
Operating Systems
Platforms
Devices
Aggregators
Networks
Operators
The Mobile EcoSystem
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Mobile EcoSystemOperators- 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: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
EcoSystem ContinuedOperating 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: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Design Process & Ecosystem
Goals & Needs
Context
Strategy
Choose your Device
SiteMap & Design
Wireframe UI
Prototype
Development
…
Services
Applications
Application
Frameworks
Operating Systems
Platforms
Devices
Aggregators
Networks
Operators
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Mobile Websites vs Mobile Web Applications
Mobile Web Apps:Pros• They are easy to create, using basic
HTML, CSS, and JavaScript knowledge. • They are simple to deploy across
multiple handsets. • They offer a better user experience & a
rich design, tapping into device features & offline use.
• Content is accessible on any mobile web browser.
Cons• The optimal experience might not be
available on all handsets. • They can be challenging (but not
impossible) to support across multiple devices.
• They don’t always support native application features, like offline mode, location lookup, filesystem access, camera, and so on.
Mobile Websites Pros• They are easy to create, maintain, and
publish. • They can use all the same tools and
techniques you might already use for desktop sites.
• Nearly all mobile devices can view mobile websites.
Cons• The cons of mobile websites are: • They can be difficult to support across
multiple devices. • They offer users a limited experience. • Most mobile websites are simply desktop
content reformatted for mobile devices.
• They can load pages slowly, due to network latency.
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Overall Process at a Glance
User research/Market
researchUser Stories Mindmap Wireframes Prototype
End-user
Development team
Client
DesignerInterviews, Feedback
Branding, Interview, Feedback
Capabilities and constraints
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2010 InfoStretch Corporation. All rights reserved.
Mobile DesignThe 7 Principles…
3
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
1The Art of Understanding
Design is a conscious effort to impose a meaningful order.-Victor Papanek
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
The Art of Understanding
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?
Goals & Needs of End Users = Designing for Humans
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Design within reach
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
4 Main GroupsSerious ToolsFun ToolsFun GamesSerious Entertainment
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
StrategyThe best place to begin a mobile strategy is by creating a product, not simply trying to
re-imagine one for a small screen.
2
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
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: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Context(Your differentiator)
(Your solution) for (Your audience).
3
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Task & ContextExample: 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: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Use Case Scenarios
Anyone can make the simple complicated.
Design is making the complicated Intuitive.
4
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Use Case Scenarios
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
One Door Policy
5Good design is obvious.
Great design is transparent.- Joe Sparano
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
SiteMapsOne Door Policy – Show the door!
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Form & Function
6People ignore design that
ignores people.- Frank Chimero
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Wireframing & Prototyping
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Wireframing & Prototyping High Fidelity
StoryBoard Standalone Wireframes
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
The Art of bringing it to Life
7The only important thing
about design is how it relates to people.
- Victor Papanek
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Native CapabilitiesCamera – Main camera, front facingGPSAccelerometerAudio/VideoTouch Interface
Designing for Native Capabilities
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Bring it to Life
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Mobile Design DebateGraphic Types
3
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Default Graphics vs Custom GraphicsTop 4 Countdown of reasons to Use Default
Graphics
Budget
Simple Functionality
Serious Tool
Iterative Approach
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.
Default Graphics Vs Custom Graphics GraphicsTop 4 Countdown Reasons to Use Custom Graphics
Available BudgetImproved FunctionalityAttention GetterFighting the Status Quo
Default Graphics
Custom Graphics
Santa ClaraHeadquarters2880 Lakeside Drive, #200Santa Clara, CA 95054(408) 727-1100
Partners
New York17 Tanglewood Rd,Scarsdale, NY 10583(703) 395-9791
Seattle2550 3rd Ave, #712Seattle, WA 98121(206) 402-2426
Ahmedabad5th Floor, Regency Plaza, Anand Nagar, Ahmedabad-15, Gujarat, India91-79-40266266
MumbaiVashi InfoTech Park, B103, Tower # 1, Vashi Rail Station, New Mumbai, Maharashtra, India91-22-6947900
Website: www.infostretch.com
phone: (408) 727-1100 | website: www.infostretch.com | email: [email protected]
©2004-2011 InfoStretch Corporation. All rights reserved.