Mobile Application

Design & Development

Hi. Im Ronnie.
Hi. Im Ronnie.
Technical Director at R/GA
Hi. Im Ronnie.
Technical Director at R/GA

@ronnieliew
Nike+ GPS
Nike+ GPS
Nike Lab
Gap Merry Mix It
Gap StyleMixer
Target Gift Finder
Target Gift Globe
My Kia Soul
Neuvo
Todays Talk
 Todays Talk

Terminology
 Todays Talk

Terminology
Mobile Landscape Today
 Todays Talk

Terminology
Mobile Landscape Today
How not to do mobile app
Terminology
 Definition of
Mobile application
Compact software programs that perform
specific tasks for the mobile user.

A software application that runs in a handheld

device such as a smartphone or other portable
device.
Native App

Mobile Web App

 Native Mobile Web

Internet Access Not required Required

Performance
Hardware access
OS access
Hardware & Platform
dependent
Installation Must be installed URL link

Distribution App store Not required

Updates Reinstallation Simple

Mobile Landscape Today
Developing mobile apps
is not new.
 Challenges
+
Opportunities
Fragmented landscape
Guidelines to navigate
this maze.
 How not to do
mobile applications
 #1
Dont assume a need.
You need to have one. Really?
You need to have one. Really?

Use case of mobile apps

You need to have one. Really?

Use case of mobile apps

Solve a real problem

 #2
Dont be
short-sighted.
Its not an after-thought or add-on
Its not an after-thought or add-on

Plan ahead or at least consider about it.

Its not an after-thought or add-on

Plan ahead or at least consider about it.

Plan for flexibility

Its not an after-thought or add-on

Plan ahead or at least consider about it.

Plan for flexibility

Portable data
 #3
Dont downplay
choice of platforms.
Platforms that your users on
Platforms that your users on

Other major players in the market

Platforms that your users on

Other major players in the market

Only installed apps get used

 1st Quarter 2010 Worldwide Smartphone Market Share
50%
Market Share

25%

0%
Symbian RIM iOS Android Windows Linux Others
Mobile

Source: Gartner (May 2010)

Gartner Says Worldwide Mobile Phone Sales Grew 17 Per Cent in First Quarter 2010
http://www.gartner.com/it/page.jsp?id=1372013
 March 2010 Mobile Platform Market Share: iOS vs Andriod (By region)

US

UK

India

China

Hong Kong

Taiwan

Malaysia

Singapore

Thailand

Australia

0% 25% 50% 75% 100%

iOS Android All others

Source: AdMob
AdMob Mobile Metrics Report March April May 2010
AdMob Mobile Metrics Report - Southeast Asia Q1 2010
 #4
Dont gloss over
bits & bytes.
Native or mobile web app
Native or mobile web app

Understand the limitations

Native or mobile web app

Understand the limitations

Technical approach is critical & has

repercussion
 #5
Dont go
chasing waterfall
Waterfall approach is
clumsy & high-risk
Waterfall approach is
clumsy & high-risk

Do paper prototyping
Waterfall approach is
clumsy & high-risk

Do paper prototyping

Build quick prototypes

Waterfall approach is
clumsy & high-risk

Do paper prototyping

Build quick prototypes

Test theories quickly

 #6
Dont assume browsers
are equal.
Mobile browsers are not
desktop browsers
Mobile browsers are not
desktop browsers

Flash plugin not available

on iOS
Mobile browsers are not
desktop browsers

Flash plugin not available

on iOS

Media format support

Mobile browsers are not
desktop browsers

Flash plugin not available

on iOS

Media format support

 Picnik
Photo editing application
VS.
VS.
 YouTube
Popular social video sharing site
 #7
Dont downplay
user experience.
... mobile-optimized experiences produced an
average 75% higher rate of engagements per
visit for mobile user.

Source: Ed Hewett, Omniture

Do Mobile-optimized Experiences Improve Engagement
on Super Phones and Tablets like the iPad?
Optimize for mobile experience
Optimize for mobile experience

Simple, clear navigation - Pick key functions

that are critical
Optimize for mobile experience

Simple, clear navigation - Pick key functions

that are critical

Less is more
Online photo management and
sharing application
VS.
VS.
VS.
VS.
Amazon.com
Online shopping site
VS.
VS.
VS.
VS.
 #8
Dont be online only.
Some of us are WiFi only
Some of us are WiFi only

Cache retrieved data

Some of us are WiFi only

Cache retrieved data

Show the last-known state

Some of us are WiFi only

Cache retrieved data

Show the last-known state

Pass the NYC subway test

 Gothere.sg
iPhone application for getting
around in Singapore
Gothere.sg
Gothere.sg
 Gothere.sg
Warns the user that there is no
Internet connection but doesnt
stop the user from using it.
 Gothere.sg
Alternate routes are cached and
still accessible to the user when
the app is offline.
 Gothere.sg
Alternate route with cached map
images
 Flipboard
iPad application -
magazine styled visuals
for your social feeds
Must be connected to use
Must be connected to use

No caching of previous data

Must be connected to use

No caching of previous data

Why make it so hard ?

 #9
Dont favour branding
over users.
 Avoid displaying an About window, a splash
screen, or providing any other type of startup
experience that prevents people from using
your application immediately
Source: Apple
iOS Reference Library
iPhone Human Interface Guidelines
Avoid favoring
branding over user
experience
Avoid favoring
branding over user
experience

Splash screens are evil

... I don't need three splash screens telling me
I'm playing Scrabble, made by EA, and Every
Word Counts... I want to load the game and
play, not wait through their branding...
- App Store comment
 #10
Dont load too much
too fast
Short attention span
Short attention span

Intense period of activity

Short attention span

Intense period of activity

Load in small chunks &

only what is needed
Short attention span

Intense period of activity

Load in small chunks &

only what is needed

Interruptible
 #11
Dont re-invent
the wheel.
Convention works
Convention works

Forget that special revolutionary

drop-down menu
Convention works

Forget that special revolutionary

drop-down menu

Be the user - Dont try

technology for technology
 Source: Smashing Magazine
iPhone Apps Design Mistakes: Over-Blown Visuals
http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
 Source: Smashing Magazine
iPhone Apps Design Mistakes: Over-Blown Visuals
http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
 VS.

Source: Smashing Magazine

iPhone Apps Design Mistakes: Over-Blown Visuals
http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
 VS.

Source: Smashing Magazine

iPhone Apps Design Mistakes: Over-Blown Visuals
http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
 #12
Dont do roll-overs.
Roll-overs are so 1990s
Roll-overs are so 1990s

Extra step
Roll-overs are so 1990s

Extra step

And it doesnt work. Really. No cursor.

 #13
Dont forget
to guide users.
Guide your user along
Guide your user along

Loading, updating in progress

Guide your user along

Loading, updating in progress

Display user-friendly error

messages
 #14
Dont disrupt the
experience.
Be gentle to the user
Be gentle to the user

Built-in browsers
Be gentle to the user

Built-in browsers

Inform & let the user decide

 #15
Dont squeeeze the
world in.
 Average screen sizes
breach 2.5 inch mark

Source: IE Market Research Corporation (IEMR)

2Q.2009 Global Mobile Handset Specifications Database

2.5 = 6.35 cm
3.5 = 8.89cm
 Average screen sizes
breach 2.5 inch mark
2.5

Source: IE Market Research Corporation (IEMR)

2Q.2009 Global Mobile Handset Specifications Database

2.5 = 6.35 cm
3.5 = 8.89cm
 Average screen sizes
breach 2.5 inch mark
2.5

3.5

Source: IE Market Research Corporation (IEMR)

2Q.2009 Global Mobile Handset Specifications Database

2.5 = 6.35 cm
3.5 = 8.89cm
Physically tiny screen
Physically tiny screen

Avoid pixel/small fonts

 44px

44px

44px

Source: From Click To Tap

http://www.slideshare.net/maxvoltar/from-click-to-tap
Give enough space 44px

44px

44px

Source: From Click To Tap

http://www.slideshare.net/maxvoltar/from-click-to-tap
Give enough space 44px

Account for accidental

touches 44px

44px

Source: From Click To Tap

http://www.slideshare.net/maxvoltar/from-click-to-tap
Give enough space 44px

Account for accidental

touches 44px

Think Bigger hit-area 44px

Source: From Click To Tap

http://www.slideshare.net/maxvoltar/from-click-to-tap
 #16
Dont make user type.
"Given the typical input limitations of a mobile
device, the interface must as far as possible
minimize user input.Where possible, use
selection lists, radio buttons and other controls
that do not require typing."
Source: Mobile Web Best Practice, W3C
 "Although unavoidable in forms that need
information form the user, avoid using text boxes
and text areas as much as possible. Its difficult
for the user to enter content into free text inputs
such as text boxes..."
Source: Mobile Design and Development, Brian Fling
Tiny keyboard - typing sucks
Tiny keyboard - typing sucks

You need slender fingers

Tiny keyboard - typing sucks

You need slender fingers

Pre-populate what you can

Tiny keyboard - typing sucks

You need slender fingers

Pre-populate what you can

Give options and let users

pick / auto-complete
 #17
Dont forget to test.
Always test with actual devices
Always test with actual devices

Usability testing
Always test with actual devices

Usability testing

Moving in and out of WiFi zones

Always test with actual devices

Usability testing

Moving in and out of WiFi zones

No connectivity
Re-cap
Dont...
 Dont...
... assume a need
 Dont...
... assume a need

... be short-sighted
 Dont...
... assume a need

... be short-sighted

... trivialize choice of platform

 Dont...
... assume a need

... be short-sighted

... trivialize choice of platform

... gloss over bits & bytes

 Dont...
... assume a need ... go chasing waterfall

... be short-sighted

... trivialize choice of platform

... gloss over bits & bytes

 Dont...
... assume a need ... go chasing waterfall

... be short-sighted ... assume browsers are equal

... trivialize choice of platform

... gloss over bits & bytes

 Dont...
... assume a need ... go chasing waterfall

... be short-sighted ... assume browsers are equal

... trivialize choice of platform ... downplay user experience

... gloss over bits & bytes

 Dont...
... assume a need ... go chasing waterfall

... be short-sighted ... assume browsers are equal

... trivialize choice of platform ... downplay user experience

... gloss over bits & bytes ... be online only

Dont...
 Dont...
... favour branding over users
 Dont...
... favour branding over users

... load too much too fast

 Dont...
... favour branding over users

... load too much too fast

... re-invent the wheel

 Dont...
... favour branding over users

... load too much too fast

... re-invent the wheel

... do roll-overs
 Dont...
... favour branding over users

... load too much too fast

... re-invent the wheel

... do roll-overs

... forget to guide your users

 Dont...
... favour branding over users ... disrupt the experience

... load too much too fast

... re-invent the wheel

... do roll-overs

... forget to guide your users

 Dont...
... favour branding over users ... disrupt the experience

... load too much too fast ... squeeze the world in

... re-invent the wheel

... do roll-overs

... forget to guide your users

 Dont...
... favour branding over users ... disrupt the experience

... load too much too fast ... squeeze the world in

... re-invent the wheel ... make user type

... do roll-overs

... forget to guide your users

 Dont...
... favour branding over users ... disrupt the experience

... load too much too fast ... squeeze the world in

... re-invent the wheel ... make user type

... do roll-overs ... forget to test

... forget to guide your users

 Dont...
... favour branding over users ... disrupt the experience

... load too much too fast ... squeeze the world in

... re-invent the wheel ... make user type

... do roll-overs ... forget to test

... forget to guide your users

Thank You.
Go build something.
Q &A
 References
User-centered design of mobile solution (NAMAHN)
http://www.namahn.com/resources/documents/note-MobileSolutions.pdf

AdMob Mobile Metrics

http://metrics.admob.com

The Best & Worst of the Mobile Web (mobiThinking)

http://mobithinking.com/white-papers/best-and-worst-of-the-mobile-web

Mobile Web Best Practices 1.0 (W3C)

http://www.w3.org/TR/mobile-bp/
 References
Automatic Form Filling on Mobile Devices
http://www.medien.ifi.lmu.de/pubdb/publications/pub/deluca2007pmc/
deluca2007pmc.pdf

Mobile Design and Development (Brian Fling)