Webinar: Mobile app design by Infostretch

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

mailto:[email protected]

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



Mobile Facts

Understanding the Mobile Market

1



Brief History & Context1998 Nokia

Motorola Feature phone ‘08

‘02 Smartphone ’07 Mac Iphone

Increase in Design needs



Size and Scope of the Mobile Market

Why does it matter?



Mobile EcosystemUnderstanding the basics

2



What makes the mobile environment such a complicated

space to design and develop?



Services

Applications

Application Framework

s

Operating Systems

Platforms

Devices

Aggregators

Networks

Operators

The Mobile EcoSystem



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)



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.



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



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.



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



Mobile DesignThe 7 Principles…

3



1The Art of Understanding

Design is a conscious effort to impose a meaningful order.-Victor Papanek



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



Design within reach



4 Main GroupsSerious ToolsFun ToolsFun GamesSerious Entertainment



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



StrategyTaking a Web Experience & converting it to a smaller screen won’t

work.View Southwest Airlines



Context(Your differentiator)

(Your solution) for (Your audience).

3



Task & ContextExample: iBooks(Easy to use) (Access to a reading Library, similar to every day

resources) for (Avid to Casual Readers)



Use Case Scenarios

Anyone can make the simple complicated.

Design is making the complicated Intuitive.

4



Use Case Scenarios



One Door Policy

5Good design is obvious.

Great design is transparent.- Joe Sparano



SiteMapsOne Door Policy – Show the door!



Form & Function

6People ignore design that

ignores people.- Frank Chimero



Wireframing & Prototyping



Wireframing & Prototyping High Fidelity

StoryBoard Standalone Wireframes



The Art of bringing it to Life

7The only important thing

about design is how it relates to people.

- Victor Papanek



Native CapabilitiesCamera – Main camera, front facingGPSAccelerometerAudio/VideoTouch Interface

Designing for Native Capabilities



Bring it to Life



Mobile Design DebateGraphic Types

3



Default Graphics vs Custom GraphicsTop 4 Countdown of reasons to Use Default

Graphics

Budget

Simple Functionality

Serious Tool

Iterative Approach



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



Technology

Webinar: Mobile app design by Infostretch