SlideShare a Scribd company logo
Topic for the next few slides

‘Name of referenced work’, Author/source/URL, date.
›❯

Technology has changed

›❯

We behave differently

›❯

Creating better mobile products

›❯

Building mobile apps

Here’s what we’ll talk about:
We’ll take a brief look at changing technology and how that’s affected the way people behave
Discuss how we can create better mobile products
Walk through some approaches to engineering better apps
›❯

Technology has changed

›❯

We behave differently

›❯

Creating better mobile products

›❯

Building mobile apps
First, a note about stats.

We’re using local research
wherever possible
US market and mobile trends
are similar to Australia

http://www.flickr.com/photos/avlxyz/308574017

We’re both affluent nations, big love for gadgets and internet.
Culturally and socioeconomically similar.
Technology, people and time
100%

90%

80%

COLOR TV

ELECTRICITY
60%

INTERNET

AUTOMOBILE
40%

TELEPHONE

MOBILE PHONE

AIR-CONDITIONING

20%

REFRIGERATOR

COMPUTER

0
1900

1915

1930

1945

1960

1975

1990

2005

http://www.nytimes.com/imagepages/2008/02/10/opinion/10op.graphic.ready.html

If we look back over the last 100 years, we see only the most critical technologies reach saturation point (over 90%). And
it takes a long time.
Technology, people and time
100%

90%

80%

COLOR TV

ELECTRICITY
60%

INTERNET

AUTOMOBILE
40%

TELEPHONE

MOBILE PHONE

AIR-CONDITIONING

20%

REFRIGERATOR

COMPUTER

0
1900

1915

1930

1945

http://www.nytimes.com/imagepages/2008/02/10/opinion/10op.graphic.ready.html

Electricity, 50 years
Telephone, 70 years
Automobile, 80 years

1960

1975

1990

2005
Technology, people and time
100%

90%

80%

COLOR TV

ELECTRICITY
60%

INTERNET

AUTOMOBILE
40%

TELEPHONE

MOBILE PHONE

AIR-CONDITIONING

20%

REFRIGERATOR

COMPUTER

0
1900

1915

1930

1945

1960

1975

1990

50 YEARS

70 YEARS

80 YEARS

http://www.nytimes.com/imagepages/2008/02/10/opinion/10op.graphic.ready.html

Electricity, 50 years
Telephone, 70 years
Automobile, 80 years

2005
Technology, people and time
100%

90%

80%

COLOR TV

ELECTRICITY
60%

INTERNET

AUTOMOBILE
40%

TELEPHONE

MOBILE PHONE

AIR-CONDITIONING

20%

REFRIGERATOR

COMPUTER

0
1900

1915

1930

1945

1960

1975

1990

20 YEARS

50 YEARS

70 YEARS

30 YEARS

80 YEARS

http://www.nytimes.com/imagepages/2008/02/10/opinion/10op.graphic.ready.html

Let’s look at Internet and Mobile phones. These have been much quicker.
They’re both still relatively new.
Internet on phone is even newer
These figures only report to 2005.

2005
Internet adoption over time (percentage American adults)

80

60

40

20

0

‘95 ‘96 ‘97 ‘98 ‘99 ‘00 ‘00 ‘01 ‘02 ‘03 ‘04 ‘05 ‘06 ‘07 ‘08 ‘09 ‘10 ‘11

Pew Research, 2012. http://pewinternet.org/Reports/2012/Digital-differences/Main-Report/Internet-adoption-over-time.aspx

US trend: Adult internet users.
Internet adoption over time (percentage American adults)

80

82% of Australian adults
online in 2012

60

40

20

0

‘95 ‘96 ‘97 ‘98 ‘99 ‘00 ‘00 ‘01 ‘02 ‘03 ‘04 ‘05 ‘06 ‘07 ‘08 ‘09 ‘10 ‘11

The Australian Online Consumer Landscape Report, Nielsen 2012.

It’s the same in Australia.
Adult gadget ownership over time
90
75
60

Desktop PC
Laptop
Mobile Phone
Tablet

45
30
15
0
Apr ‘06

Apr ‘08

Sep ‘09

Sep ‘10

Aug ‘11

Feb ‘12

Pew Research Center, 2012. http://pewinternet.org/Reports/2012/Digital-differences/Main-Report/The-power-of-mobile.aspx

But how are people accessing the internet?
Let’s take a look at device ownership.
Desktop in decline over last five years.
Laptop have become the preference.
Almost everyone has a mobile phone.
Tablet has very sharp growth.
This shouldn’t be news to you, but it is significant.
In Australia...
90
75

110% mobile device penetration
60

Desktop PC
Laptop
Mobile Phone
Tablet

52% of those are smartphones
45

18% tablet ownership
30
15
0
Apr ‘06

Apr ‘08

Sep ‘09

Sep ‘10

Aug ‘11

Australia - Understanding the Mobile Consumer. Australian Bureau of Statistics. May, 2012. http://bit.ly/MKj8dq
Australian Mobile Phone Lifestyle Index. 2011. http://www.aimia.com.au/ampli
The Australian Online Consumer Landscape Report, Nielsen 2012.

It’s basically the same in Australia.

Feb ‘12
AMPS
Analogue

Telecom ‘Walkabout’

‘87

3G UMTS
NextG

GSM
2G/WAP/WML/i-mode

‘89

Motorola
Brick

‘91

‘93

‘95

‘97

‘99

Data: http://isc.org; http://amta.org.au; http://wikipedia.org and various websites

Let’s look at where we’ve come from...
Analogue networks. First phones were all voice.

‘01

‘03

‘05

‘07

‘09

‘11
AMPS
Analogue

3G UMTS
NextG

GSM
2G/WAP/WML/i-mode

Telecom ‘Walkabout’

Motorola
Brick

SMS is born
1st mobile
web browsers
Predictive
Text

‘87

‘89

‘91

‘93

‘95

‘97

‘99

Data: http://isc.org; http://amta.org.au; http://wikipedia.org and various websites

SMS comes with 2G about 1993.
1st web browsers around 1997... but nobody used them

‘01

‘03

‘05

‘07

‘09

‘11
AMPS
Analogue

3G UMTS
NextG

GSM
2G/WAP/WML/i-mode

Telecom ‘Walkabout’

Motorola
Brick
Nokia 5110

SMS is born
1st mobile
web browsers
Predictive
Text

‘87

‘89

‘91

‘93

‘95

‘97

‘99

‘01

‘03

Data: http://isc.org; http://amta.org.au; http://wikipedia.org and various websites

Remember Nokia 5120? I bet you didn’t use the web browser (there wasn’t one)

‘05

‘07

‘09

‘11
AMPS
Analogue

3G UMTS
NextG

GSM
2G/WAP/WML/i-mode

Telecom ‘Walkabout’

Motorola
RAZR

Motorola
Brick
Nokia 5110

Palm Treo
SMS is born
1st mobile
web browsers
Predictive
Text

‘87

‘89

‘91

‘93

‘95

‘97

‘99

Data: http://isc.org; http://amta.org.au; http://wikipedia.org and various websites

Palm Treo/Moto RAZR. Now we’re starting to browse.
3G arrives, but not common yet.

‘01

‘03

‘05

‘07

‘09

‘11
AMPS
Analogue

3G UMTS
NextG

GSM
2G/WAP/WML/i-mode

Telecom ‘Walkabout’

Motorola
RAZR

Motorola
Brick
Nokia 5110

Palm Treo
SMS is born
1st mobile
web browsers
Predictive
Text

‘87

‘89

‘91

‘93

‘95

‘97

‘99

Data: http://isc.org; http://amta.org.au; http://wikipedia.org and various websites

WebKit in 2005. Nokia s60.

‘01

1st WebKit
browser

‘03

‘05

‘07

‘09

‘11
AMPS
Analogue

3G UMTS
NextG

GSM
2G/WAP/WML/i-mode

Telecom ‘Walkabout’

Motorola
RAZR

Motorola
Brick
Nokia 5110

HTC Dream
(1st Android)

Palm Treo
iPhone 3
SMS is born
1st mobile
web browsers
Predictive
Text

1st WebKit
browser
iPad 1

‘87

‘89

‘91

‘93

‘95

‘97

‘99

‘01

Data: http://isc.org; http://amta.org.au; http://wikipedia.org and various websites

You know the rest. Apple release iPhone... People go crazy for web on mobile.
Web on Mobile is less than 10 years old.

‘03

‘05

‘07

‘09

‘11
So What?

http://www.flickr.com/photos/jakecaptive/3205277810

There is new technology, and people are using it...
So What.
›❯

Technology has changed

›❯

We behave differently

›❯

Creating better mobile products

›❯

Building mobile apps
“...we tend to place the
emphasis on
the technologies
themselves, when it is
really the social impact
and cultural change that
will be most dramatic.”
Don Norman, 1998

mitpress.mit.edu/books/norvh/chapter1.html

Don Norman is my man for cognitive sciences, design and usability engineering.
He wrote some seminal books.
What he’s saying in essence is that...
it’s not gadgets that change the world, but how we humans use them.
He is right. And we see this play out in a number of ways.
Let’s look at an example.
“...we tend to place the
emphasis on
the technologies
themselves, when it is
really the social impact
and cultural change that
will be most dramatic.”
Don Norman, 1998

mitpress.mit.edu/books/norvh/chapter1.html

Don Norman is my man for cognitive sciences, design and usability engineering.
He wrote some seminal books.
What he’s saying in essence is that...
it’s not gadgets that change the world, but how we humans use them.
He is right. And we see this play out in a number of ways.
Let’s look at an example.
What is the most radical,
innovative mobile device
released in the last few years?

You probably thought of a smartphone first.
What is the most radical,
innovative mobile device
released in the last few years?

Vodafone 150
$10 - $15

The Vodafone 150 only do Voice, SMS, USSD. That’s it.
But it’s had an astonishing impact in some parts of the world.
We tend to focus on smart phones, especially in the city
Don’t forget that forget that smartphones are not ubiquitous yet
Population Density

http://na.unep.net/globalpop/africa/Appendix_6e.html

A lot of people on the north african coast and up the nile.
Very dense in parts of west Africa, especially Nigeria.
Heavy pockets through east Africa as well.
Access to electricity

http://apod.nasa.gov/apod/ap081005.html

When you compare access to electricity, it looks like there is a lot of overlap...
Actually only about 4% of the population that have access to grid power
GSM Network Coverage

http://apod.nasa.gov/apod/ap081005.html

Now look at GSM:
Strong GSM coverage.
Around 98% of the population
Moved from having access to information only in immediate surroundings
to now having access to a global network of information
What does it mean for
information sharing?

RapidFTR

RapidFTR is a system to help aid workers reunite lost children with their parents
The old way: People printed photos of lost children and posted on walls in centre of communities
The new way: Needs to deal with misplaced children with a global perspective. Asylum seekers moving around the globe in
response to various disasters and events.
It needs to work offline (dropping connections), data sync later and be secure enough to avoid exploiters taking advantage
of people at risk.
It’s dramatically improved the effectiveness of goal at hand: reuniting lost children with parents.
We behave differently

Yesterday,
We went go to the computer to use internet

Africa is a poignant example of social change brought about by technology.
At home, we’ve also changed, just in different ways.
We behave differently

Today,
We access the internet any place, any time.

Web on a phone is not remarkable itself.
But how it is changing our behaviour is.
Let’s have a look at that in a little more detail.
Use of the mobile phone for different purposes
100

80

60

2009
2010
2011

40

Banking

Search

Visit web

Entertainment

SMS

0

Voice

20

Australian Mobile Phone Lifestyle Index. 2011. http://www.aimia.com.au/ampli

This data is from the latest Australian Mobile Phone Lifestyle Index, and shows how we’ve been using phones over the last
three years.
Voice and SMS is ubiquitous and hasn’t changed.
Entertainment
websites
search
banking
People clearly use their phone to do more things, and they’re expecting to use it for more.
‘Just in time’ information

86% of smartphone owners access
information just-in-time...

Pew Research, 2012. http://pewinternet.org/Reports/2012/Just-in-time/

Mobile enables ‘Just in time’ behaviour
10 years ago, we:
Phone friend on landline, arrange to ‘meet under the clocks’ at Flinders St. Station at 2pm.
We’d Arrive. On time!
Friend not here? Seek out a pay phone and call at home to see what time they left.
For transit info we carried the printed timetable, or memorised the sequence.
3 trains per hour, every 20 mins departing five past the hour.
Today, we get that info ‘just in time’
‘Just in time’ information

86% of smartphone owners access
information just-in-time...
41% coordinate a meet-up
35% solve an unexpected problem
20% get a up-to-the-minute
transport info

Pew Research, 2012. http://pewinternet.org/Reports/2012/Just-in-time/

Mobile enables ‘Just in time’ behaviour
10 years ago, we:
Phone friend on landline, arrange to ‘meet under the clocks’ at Flinders St. Station at 2pm.
We’d Arrive. On time!
Friend not here? Seek out a pay phone and call at home to see what time they left.
For transit info we carried the printed timetable, or memorised the sequence.
3 trains per hour, every 20 mins departing five past the hour.
Today, we get that info ‘just in time’
‘Just in time’ information

In Australia...
55% accessed maps/location/traffic
34% use mobile search daily
39% restaurant or cafe info

Australian Mobile Phone Lifestyle Index, 2011. http://www.aimia.com.au/ampli

It’s the same in Australia
What does it mean for payments?

http://www.flickr.com/photos/martinhoward/2709364519

About 50% of IB logins are on a mobile device
Significant value-transactions are taking place via mobile devices
Customer are comfortable with this, and it’s now expected
old slow movers are innovating: Banks are running m-payments trials all over the world, with lots of technologies
New entrants are shaking things up: Bank Simple, Movenbank, Square... and so on.
20-25% of GDP
paid via SMS
http://collections.europarchive.org/tna/20081202180014/

Back to Africa...
A different take on mobile payments, but incredibly successful: mPesa
~$200m AUD profit (most profitable mobile app in the world - double Angry Birds)
20-25% of GDP
mPesa works on very rudimentary technology, but it meets a very real user need
It solves a people problem first, using whatever technology is available.
We should learn from this.
What does it mean for retail?

50% of smartphone owners use
their device in-store to help
make purchasing decisions

Have you ever done this? Of course you have.
Aside from price matching, there’re other uses for this.
One example:
- An app that scans barcodes to give ingredient list and match with user’s allergies
- accessibility features on the iPhone mean this can be used by people with impaired vision
- it’s not just changing behaviour, it’s creating new opportunities
›❯

Technology has changed

›❯

We behave differently

›❯

Creating better mobile products

›❯

Building mobile apps

How do we take advantage of these new opportunities?
Lets look at what makes a good mobile product, and how we can create mobile products that meet changing customer
expectations
What does success look like?

2007 A dedicated mobile website
2010 Native iOS and Android apps
2012 Integrated mobile experience
2014 ???

In two years, it will look different again...
We need to build products for today’s market, and be preparing for tomorrow
Post-mobile world

Integrated with life
Opportunistic interactions
Everything is ‘smart’ and
all things are connected
http://g.co/projectglass

Soon, we won’t need a phone to be mobile. Mobile will just be a part of everything.
Integrated with life. Some call this ‘ubiquitous computing’.
One example is Google’s Project Glass prototype.
The marketing videos are pretty cheesy, but the concept is on point.
Don’t forget that it’s early days, and there are lots of things to work out.
Remember the first
10 years of radio?

First radio broadcasts were stage-play recitals.
It took a while to use it for news broadcasting, and to discover SoundFX and... advertising.
Remember the first
10 years of television?

http://en.wikipedia.org/wiki/Television

First television was radio with pictures.
Remember the first
10 years of the web?

http://www.icehousedesigns.com/webarchive/images/flshbk_COLLAGE2.gif

First websites were static, digitised documents.
This is Microsoft in 1995. Brochureware with image-map navigation. Awesome!
Web on a mobile is emerging from a similar place, it takes a while to mature into meaningful and useful experiences.
So, how do we create better mobile products?
We’ve been saying ‘do less’
(on mobile) for a long time
‘Graceful Degradation’

‘Content/feature discrimination’
Big assumptions about customer needs
We’ve been saying ‘do less’ for a while, and ‘graceful degradation’ was once the way to do it.
It can be a valid approach, and useful for established products and services, but it has problems.
We take a large-screen design and make it smaller for mobile.
In this example, a unicorn.
As the screens get smaller, we chop bits off usually at the extremities.
Tail. Legs. Torso.
Eventually, only the head is left.
So, most of the time it ain’t that graceful.
We’ve been saying ‘do less’
(on mobile) for a long time
‘Graceful Degradation’

‘Content/feature discrimination’
Big assumptions about customer needs
We’ve been saying ‘do less’ for a while, and ‘graceful degradation’ was once the way to do it.
It can be a valid approach, and useful for established products and services, but it has problems.
We take a large-screen design and make it smaller for mobile.
In this example, a unicorn.
As the screens get smaller, we chop bits off usually at the extremities.
Tail. Legs. Torso.
Eventually, only the head is left.
So, most of the time it ain’t that graceful.
An example from banking
‘full version’

mobile version

Product info

★

★

Exchange rates

★

Interest rates

★

Product disclosure statements

★

Forms & documents

★

Content

Features
check account balance

★

★

transfer funds

★

★

pay a bill with BPAY

★

★

schedule a future transfer

★

Change daily limits

★

Update mailing address

★

Full feature set on desktop version.
Truncation on mobile.
Content like forms, documents, Product Disclosure Statements and so on.
Or so called ‘peripheral’ features.
Customers want to do more on mobile
Mobile Internet Users

Desktop Internet Users

Mobile Majority is very close

2007

2008

2009

2010

2011

2012

2013

2014

2015

Morgan Stanley Associates Internet Trends (2010)

But as customers, we expect to do more on mobile today, so truncation - even at the periphery - is a dangerous strategy.
A good start...
‘Progressive Enhancement’

Mobile first, content first
Feature parity
This is the same idea as graceful degradation but in reverse.
Instead of starting big and degrading, we start small and enhance.
Progressive enhancement is what is usually happening in ‘mobile first’ thinking, and ‘responsive web design’.
Start with a small unicorn - one that works for mobile - and then deliver unicorns to all screens.
A good start...
‘Progressive Enhancement’

Mobile first, content first
Feature parity
This is the same idea as graceful degradation but in reverse.
Instead of starting big and degrading, we start small and enhance.
Progressive enhancement is what is usually happening in ‘mobile first’ thinking, and ‘responsive web design’.
Start with a small unicorn - one that works for mobile - and then deliver unicorns to all screens.
An example
‘full version’

mobile version

Your bags

★

★

People

★

★

Notifications

★

★

Blog

★

★

Help

★

★

Create a new bag

★

★

Edit existing bag

★

★

Explore

★

★

Search Bagcheck

★

★

Create new discussion

★

★

Comment

★

★

Content

Features

Bag Check was was built mobile first, by the guy who wrote the book on Mobile First.
This is becoming a more common approach.
Deliver unicorns consistently on all screens.
But it still misses something.
What if that version of the unicorn
isn’t helpful for me right now?

Adaptation (usually) only deals
with the interface not the content

http://commons.wikimedia.org/wiki/File:Jednoro%C5%BCec.svg

We’ve delivered the unicorn accurately, but if I can’t interact with it in a way that makes sense on my device, then we’ve
only gone part of the way.
An example from banking:
On mobile, a list of future-dated payments is viewable, but I cant edit the payments details. Useless.
Or PDF forms that render to screen, but can’t be used or printed.
This doesn’t work, because the content hasn’t been structured and presented in a way that is useful for the mobile
customer.
Responsive content

Adapt content as well as features
Portability and consistency
Create Once, Publish Everywhere

http://www.flickr.com/photos/tomazstolfa/4845875443/

How can we provide different versions of content and features that are most appropriate for each device?
Create once, publish everywhere (COPE). Easier said than done.
Requires a strategic approach to content management.
What content is required... on what devices... and in what format?
Are your content and marketing teams ready for this?
Is your content management system capable of structuring content in this way?
Another example

National Public Radio do this really well.
This is ‘adaptive content’ more than ‘responsive content’.
They serve different versions of their content, from a simple CMS, across many devices.
Karen McGrane - my favourite content strategist - talks more about this in her book Content Strategy for Mobile.
Seamless experiences

Customers choose when and how
they interact with your brand
Make it easy for them

Awesome, now you have appropriate content and features rendered properly across many devices.
Keep everything connected and transition as seamlessly as possible
Because customers don’t see your ‘channels’ - All they see is a brand, and their needs
Precious Design Studios. http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies

You know they’re likely to be using multiple devices.
A seamless experience across your channels is expected.
Provide pathways through content...
Seamless connection through appropriate and relevant versions of content.
AirBNB - getting it wrong.
http://www.flickr.com/photos/thewolf/5812767917

I travelled to London recently
airBNB is a site that connects travelers with hosts for accommodation.
I signed up with Facebook, and booked accommodation on laptop
On the road, I couldn’t authenticate with the app, because FB Open Auth didn’t work properly
Using email to login - with forgot password - failed too (because I wasn’t in the database)
This became a real problem, I almost didn’t have a bed to sleep in.
Not ideal for a brand who’s goal is connecting travelers with hosts.
realestate.com.au - Getting it right.

‘Name of referenced work’, Author/source/URL, date.

Search, browse and create a shortlist in your lunch hour.
‘Name of referenced work’, Author/source/URL, date.

AirPlay the fullscreen image gallery from iPad to TV in the evening to discuss with your partner.
‘Name of referenced work’, Author/source/URL, date.

Use the open-inspection planner to help you on Saturday afternoons
Precious Design Studios. http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies

There are some great interaction patterns emerging around multiscreen experiences.
Device shifting.
This is where a consumer begins a task on one device, then completes it on another.
AirBNB is an example of this gone wrong.
Draft an email on mobile, finish it on desktop.
Fill a shopping cart on eBay, complete purchase at home.
Precious Design Studios. http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies

Simultaneity.
Jump-in is an iPad app that ThoughtWorks was involved with for NineMSN.
It’s a ‘second screen’ experience designed specifically for tablet and TV.
The iPad experience is simultaneous with the TV broadcast.
During Olympics, able to interact with content such as live news, current medal tally, event schedule and realtime twitter
conversations that are related to the broadcast.
Precious Design Studios. http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies
An ecosystem of screens
and physical interfaces

So we have an ecosystem of screens and physical interfaces.
Apps are seen as today’s heroes. Let’s look at those in more detail.
Consumers expect a
continuous experience

Let’s look at what’s expected from your apps now: continuity across all channels
- people do different tasks on different devices
- that means your app, the mobile website, desktop systems all talking on the backend
-“we’ll just connect it up on the backend”, simple stuff
- what about people who phone in? or visit in person?
‘Name of referenced work’, Author/source/URL, date.

- all these standalone backend systems that don’t talk well to each other
- in reality, “the backend” is not one nice continuous system
-> lots of separate systems, different technologies... we don’t even know how some of them work anymore, so we don’t
touch them... but they seem to work
- so to get our continuous mobile experience, we also need to wrangle all this other stuff
- the mess on the backend doesn’t give you the flexibility you’ll need going forward
- but it is the bit the consumer sees, the thing they will judge you on
Call Centre

Retail

‘Name of referenced work’, Author/source/URL, date.

- all these standalone backend systems that don’t talk well to each other
- in reality, “the backend” is not one nice continuous system
-> lots of separate systems, different technologies... we don’t even know how some of them work anymore, so we don’t
touch them... but they seem to work
- so to get our continuous mobile experience, we also need to wrangle all this other stuff
- the mess on the backend doesn’t give you the flexibility you’ll need going forward
- but it is the bit the consumer sees, the thing they will judge you on
Call Centre

Retail

Legacy Thing

‘Name of referenced work’, Author/source/URL, date.

- all these standalone backend systems that don’t talk well to each other
- in reality, “the backend” is not one nice continuous system
-> lots of separate systems, different technologies... we don’t even know how some of them work anymore, so we don’t
touch them... but they seem to work
- so to get our continuous mobile experience, we also need to wrangle all this other stuff
- the mess on the backend doesn’t give you the flexibility you’ll need going forward
- but it is the bit the consumer sees, the thing they will judge you on
Call Centre
Legacy Thing
Database

Retail
Message Hub
Mainframe

Some expensive and proprietary system
‘Name of referenced work’, Author/source/URL, date.

- all these standalone backend systems that don’t talk well to each other
- in reality, “the backend” is not one nice continuous system
-> lots of separate systems, different technologies... we don’t even know how some of them work anymore, so we don’t
touch them... but they seem to work
- so to get our continuous mobile experience, we also need to wrangle all this other stuff
- the mess on the backend doesn’t give you the flexibility you’ll need going forward
- but it is the bit the consumer sees, the thing they will judge you on
Call Centre
Legacy Thing
Database

Retail
Message Hub
Mainframe

Some expensive and proprietary system
‘Name of referenced work’, Author/source/URL, date.

- all these standalone backend systems that don’t talk well to each other
- in reality, “the backend” is not one nice continuous system
-> lots of separate systems, different technologies... we don’t even know how some of them work anymore, so we don’t
touch them... but they seem to work
- so to get our continuous mobile experience, we also need to wrangle all this other stuff
- the mess on the backend doesn’t give you the flexibility you’ll need going forward
- but it is the bit the consumer sees, the thing they will judge you on
Call Centre
Legacy Thing
Database

Retail
Message Hub
Mainframe

Some expensive and proprietary system
‘Name of referenced work’, Author/source/URL, date.

- all these standalone backend systems that don’t talk well to each other
- in reality, “the backend” is not one nice continuous system
-> lots of separate systems, different technologies... we don’t even know how some of them work anymore, so we don’t
touch them... but they seem to work
- so to get our continuous mobile experience, we also need to wrangle all this other stuff
- the mess on the backend doesn’t give you the flexibility you’ll need going forward
- but it is the bit the consumer sees, the thing they will judge you on
›❯

Technology has changed

›❯

We behave differently

›❯

Creating better mobile products

›❯

Building mobile apps
Different mobile platforms

- mobile is booming, everyone is getting connected...
but we’re not all buying the same devices (sometimes not even similar devices)
- 5 main platforms: iOS, Android, Windows, Blackberry, Web
- going to simplify to 3: iOS, Android, the Web
-> Win7/8 looks really promising, make your conclusions about the future of Blackberry
- how can we target all of these platforms?
- Do we even want to? Different interaction patterns.
Native or Web?

Going to quickly explain each of these approaches and some of the tradeoffs
-> one of the great debates in the developer community at the moment
Native or Web?

In the app store
Objective C and Java
Lowest barrier to a
great experience

Being discoverable in the app store is still important
- a reasonable proportion of users can’t distinguish between the app store and web search
(even though search is so bad in the Apple app store)
- means you’re writing using the tools provided by the vendors (Apple, Google, Microsoft)
- Objective C is kind of a strange language, and Java isn’t exactly the new hotness
- native apps have the lowest barrier to awesome (it’s not automatic)
Native or Web?

Distribute through
the browser
HTML, CSS, Javascript
Some reuse across platforms

- apps that you actually distribute and run inside the browser on your mobile device
- easier to manage versions and updates
- HTML5 is going to save the day, and everything will just work
(in reality you have a bunch of tweaking and performance tuning ahead of you)
- get to work with familiar technology: in house skills, easier to find devs
- don’t underestimate the challenge of finding good developers for native apps
or

- no one size fits all, it depends
- but it’s not an either/or choice, there is a whole spectrum between the two
- modern mobile platforms have reasonable support for running parts of your app using web technologies
-> people are calling these hybrid apps, can be a confusing term
NATIVE

HYBRID

- at the other end, we have pure web apps written in HTML, CSS and Javascript
- at one end, we have completely native apps written in Objective C, Java
- full native apps: expect heavy usage, offline access, high performance slick UI
- tools that wrap up a web app inside a native shell to go on the app store (Phone Gap)
-> eg. BBC Olympics app... good screenshots, sluggish performance, but hits-all-platforms
- custom hybrid apps: native apps with web components
- interestingly, Facebook has been rewriting their app to have more native components

WEB
The Guardian

NATIVE

HYBRID

- at the other end, we have pure web apps written in HTML, CSS and Javascript
- at one end, we have completely native apps written in Objective C, Java
- full native apps: expect heavy usage, offline access, high performance slick UI
- tools that wrap up a web app inside a native shell to go on the app store (Phone Gap)
-> eg. BBC Olympics app... good screenshots, sluggish performance, but hits-all-platforms
- custom hybrid apps: native apps with web components
- interestingly, Facebook has been rewriting their app to have more native components

Democracy Now!

WEB
Instagram

NATIVE

The Guardian

HYBRID

- at the other end, we have pure web apps written in HTML, CSS and Javascript
- at one end, we have completely native apps written in Objective C, Java
- full native apps: expect heavy usage, offline access, high performance slick UI
- tools that wrap up a web app inside a native shell to go on the app store (Phone Gap)
-> eg. BBC Olympics app... good screenshots, sluggish performance, but hits-all-platforms
- custom hybrid apps: native apps with web components
- interestingly, Facebook has been rewriting their app to have more native components

Democracy Now!

WEB
Instagram

NATIVE

The Guardian

HYBRID

Democracy Now!

WEB

BBC Olympics
using

- at the other end, we have pure web apps written in HTML, CSS and Javascript
- at one end, we have completely native apps written in Objective C, Java
- full native apps: expect heavy usage, offline access, high performance slick UI
- tools that wrap up a web app inside a native shell to go on the app store (Phone Gap)
-> eg. BBC Olympics app... good screenshots, sluggish performance, but hits-all-platforms
- custom hybrid apps: native apps with web components
- interestingly, Facebook has been rewriting their app to have more native components

PhoneGap
Instagram

Jump-in

NATIVE

The Guardian

HYBRID

LinkedIn

Facebook

Democracy Now!

WEB

BBC Olympics
using

- at the other end, we have pure web apps written in HTML, CSS and Javascript
- at one end, we have completely native apps written in Objective C, Java
- full native apps: expect heavy usage, offline access, high performance slick UI
- tools that wrap up a web app inside a native shell to go on the app store (Phone Gap)
-> eg. BBC Olympics app... good screenshots, sluggish performance, but hits-all-platforms
- custom hybrid apps: native apps with web components
- interestingly, Facebook has been rewriting their app to have more native components

PhoneGap
Instagram

Jump-in

NATIVE

Facebook

The Guardian

HYBRID

LinkedIn

Democracy Now!

WEB

BBC Olympics
using

- at the other end, we have pure web apps written in HTML, CSS and Javascript
- at one end, we have completely native apps written in Objective C, Java
- full native apps: expect heavy usage, offline access, high performance slick UI
- tools that wrap up a web app inside a native shell to go on the app store (Phone Gap)
-> eg. BBC Olympics app... good screenshots, sluggish performance, but hits-all-platforms
- custom hybrid apps: native apps with web components
- interestingly, Facebook has been rewriting their app to have more native components

PhoneGap
How should you build your app?

User Experience

Platform Coverage

http://www.flickr.com/photos/raeallen/200891658

- there’s a whole spectrum of approaches to choose from, which should you take?
- there are a number of things to take into consideration:
-> time to market, quality of the user experience, performance, development capability, platform coverage, discoverability
-> going to simplify this to the fundamental two factors
- let’s look at these tradeoffs, and approaches that favour one over the other
User Experience

Platform Coverage
- this is where we want to be: a great experience on all platforms...
- let’s treat that as the goal, but we’re not going to get there straight away
- for a lot of people, this is where they are at the moment, with a fairly large and tricky mess
- two ways we can go:
-> tackle a single platform first, and go for a really polished interface, slowly expand both the feature set and platform
coverage from there (calling this the Laser strategy)
-> go for a shallow cut of both the experience and feature set, but hit as many platforms as possible (calling this the cover
your bases strategy)
- let’s look at each approach, and where it might make sense to use it
User Experience

Platform Coverage
- this is where we want to be: a great experience on all platforms...
- let’s treat that as the goal, but we’re not going to get there straight away
- for a lot of people, this is where they are at the moment, with a fairly large and tricky mess
- two ways we can go:
-> tackle a single platform first, and go for a really polished interface, slowly expand both the feature set and platform
coverage from there (calling this the Laser strategy)
-> go for a shallow cut of both the experience and feature set, but hit as many platforms as possible (calling this the cover
your bases strategy)
- let’s look at each approach, and where it might make sense to use it
User Experience

Platform Coverage
- this is where we want to be: a great experience on all platforms...
- let’s treat that as the goal, but we’re not going to get there straight away
- for a lot of people, this is where they are at the moment, with a fairly large and tricky mess
- two ways we can go:
-> tackle a single platform first, and go for a really polished interface, slowly expand both the feature set and platform
coverage from there (calling this the Laser strategy)
-> go for a shallow cut of both the experience and feature set, but hit as many platforms as possible (calling this the cover
your bases strategy)
- let’s look at each approach, and where it might make sense to use it
User Experience

Laser

Platform Coverage
- initially, focus on a single platform and nail it... eg. iPhone app
- for new companies trying to win customers, where experience is an important selling point
-> if you can’t win the market with this focus, what makes you think you can win it at all?
- for existing companies, look at your stats: which users to do you want to hit first?
-> In Australia, and your company is targeting professional adults, it’s often the iPhone
eg. high end fashion, even banking and insurance, selling cars or houses
(if your product is aimed at teenagers, you’re likely to see more Androids)
- iOS is more dominant here than elsewhere (employment, wages, no carrier lock in)
-> read stats about number of devices purchased, but usage of those is very different
User Experience

Cover your
bases

Platform Coverage
- cut scope and quality finish to try and hit as many platforms as possible
- might make sense for companies with existing customers: don’t be exclusive
- where playing favourites isn’t really an option (eg. ATO - eTax, except they didn’t)
eg. emergency warning system: want it to go to everyone (people have ignored this)
- depending on the content you're presenting, HTML/CSS might be well suited
eg. for text markup and layout...
-> for infinite scrolling tables/multiple gestures, native still a long way ahead
or

- not an either/or choice, you can use both (native and web)
- use native where it makes sense, use web components where it makes sense
-> compromise between the laser and cover your bases strategies
- there are frameworks out there to help do this (eg. PhoneGap/Cordova, Titanium/Kony)
-> but don’t want to lock yourself in
and

- not an either/or choice, you can use both (native and web)
- use native where it makes sense, use web components where it makes sense
-> compromise between the laser and cover your bases strategies
- there are frameworks out there to help do this (eg. PhoneGap/Cordova, Titanium/Kony)
-> but don’t want to lock yourself in
Don’t lock yourself into
doing everything natively or
everything using the web

and

- not an either/or choice, you can use both (native and web)
- use native where it makes sense, use web components where it makes sense
-> compromise between the laser and cover your bases strategies
- there are frameworks out there to help do this (eg. PhoneGap/Cordova, Titanium/Kony)
-> but don’t want to lock yourself in
Sharing between platforms

Shared logic using Javascript
Shared presentation using HTML/CSS

- it doesn’t have to be Javascript, could use Mono and C#
-> Thoughtworks Tech Radar: treating Javascript as a first class language
-> “it depends” eg. a banking app vs search and listing or directory app
- complex UI, gestures, animations... native eg. Hipstamatic/Instragram/iPhoto
- marking up content (text/images) without a lot of interaction
-> HTML/CSS have evolved for exactly for that purpose
- reuse at all costs is not the answer, focus on what the user is trying to achieve
- be pragmatic about how to reuse parts where it will save you time and money
User Interface

Client Logic

iPhone

Objective C

Objective C

Mobile
Web

HTML / CSS

Javascript

- how this evolved from experience with the laser approach: a global bank
-> iPhone, Android, web apps: different languages for each platform
- the left hand column is your opportunity to share the presentation
-> depending on the size of the UI code, how complex it is, how expensive it is to maintain
-> might make sense to duplicate across platforms if it’s simpler and quicker
- the right hand column represents the opportunity to share the logic of the app
-> is it common? Does it make sense to write it in Javascript?
-> simple state machine? Yes. Complex image filtering? Probably not.
User Interface

Client Logic

iPhone

Objective C

Objective C

Mobile
Web

HTML / CSS

Javascript

What would we do differently?
- how this evolved from experience with the laser approach: a global bank
-> iPhone, Android, web apps: different languages for each platform
- the left hand column is your opportunity to share the presentation
-> depending on the size of the UI code, how complex it is, how expensive it is to maintain
-> might make sense to duplicate across platforms if it’s simpler and quicker
- the right hand column represents the opportunity to share the logic of the app
-> is it common? Does it make sense to write it in Javascript?
-> simple state machine? Yes. Complex image filtering? Probably not.
Objective C

HTML / CSS

Client Logic

Calatrava

User Interface

Objective C

A bridge between native and web
- want a bridge between the Javascript and native code
-> knows how to call javascript code, and also to get values out
- other side of the bridge allows us to pass data to be presented
-> choice of whether to present it using web views or native views
-> pass actions from the UI back down to the appropriate logic
* finally, need a registry to match up the components of the system with technology
-> we’ve been using this successfully for a major airline

Javascript
Calatrava

Technology choice per feature
More an approach than a framework
Will soon be open source
http://en.wikipedia.org/wiki/Puente_del_Alamillo

- named after Santiago Calatrava, designs bridges (this one in Seville, 4th bridge in Venice)
- nice to name something after a bridge (feel like a real engineer)
-> acts as the bridge that connects native and web code (gives us that technology choice)
- calling it a framework might be overkill, it’s only a few hundred lines of code
- we’ve been using this approach at a “major airline”, it’s been working really well
-> adding a few new flows within existing native apps, using this approach
-> can come back and polish the UI later if needed
- we’ll get this open source, so watch this space
- so we’ve got an approach for building our apps, but...
But the app is just the
tip of the iceberg

- calatrava is best option I’ve seen for flexible, pragmatic reuse... but I’m biased
- tools like PhoneGap, Titanium, Mono are all useful as well, it depends on the app
* what about the rest of the system?
- maybe we’re optimising the wrong part?
App

Backend

- typical app talking to this mysterious “backend”
* Lots of talk about how to share logic across platforms, but not enough people questioning what all that logic is doing in
your app in the first place
- a lot of complexity can be added by talking to an old, chatty backend system
-> if it’s messy, don’t write all the logic in the app and try and reuse it
* put a layer in between
App

API

- Simplify the backend systems your app has to deal with, protect them
- this API can provide a simple view of the backend, as if it was a nice continuous system
-> the LinkedIn engineering blog has a post on using a node.js server to do this
- it also gives you a buffer for change (some people never update their apps)
- whenever you write new logic in your app, see if you can put it in the API

Backend
How do we build simpler apps
and smarter backends?

App

API

Backend

Product-aligned teams
RESTful web services
Serving data and style
- the app should be as thin as possible, that's the best reuse you can get - how???
- much easier if you develop the API and the apps at the same time (not technology teams)
- RESTful web services are great for mobile apps
-> if you don’t know about REST, look it up, basically structuring systems like the web...
-> think of it like a replacement for things like SOAP and WSDL
-> great for reducing the amount of logic required by the client (discoverable)
eg. switching a single URL and getting completely different data, different static image server
- create APIs that serve both the JSON data and visual style in HTML/CSS
-> give yourself more control of your apps, and keep that logic server side
›❯

Technology has changed

›❯

We behave differently

›❯

Creating better mobile products

›❯

Building mobile apps
Focus on customer behaviour
before technology

http://www.forbes.com/sites/fredcavazza/2012/08/13/why-launching-a-mobile-app-is-pointless

Gadgets and technology won’t in themselves change the way your customers behave.
Find out how they behave and what they need first, then work out how to best meet those needs.
Forbes put it quite nicely...
Focus on customer behaviour
before technology
“Competitive advantage will not be
gained by providing your customers a
sharp mobile app, but by making sure
every decision maker in your
organization understands the needs
and habits of mobile users”
Forbes.com. August 2012
http://www.forbes.com/sites/fredcavazza/2012/08/13/why-launching-a-mobile-app-is-pointless

Gadgets and technology won’t in themselves change the way your customers behave.
Find out how they behave and what they need first, then work out how to best meet those needs.
Forbes put it quite nicely...
Do more, not less
for mobile

We know that people are using their mobile devices to do more things than ever today.
There’s a growing expectation to do anything on mobile.
Truncation for mobile is a dangerous strategy.
Break large systems into smaller,
faster moving components so you
can better respond to change

- the mobile market is changing rapidly
- if it takes you a year or two to put out an app, and it’s scraping your backend website, because you don’t have an API and
you only deploy new versions of the websites every few months
-> that’s not going to cut it going forward
* start up companies that don’t have this legacy, wont have this problem, they’ll be a threat
eg. Ingogo and Uber taxi apps... don’t want to integrate with existing providers
- Either need to be good at innovation or good at fast follow and delivery... can't fail at both
- Plan to have APIs for your backend systems, even for mobile web applications.
- Amazon talks a lot about having lots of small, single purpose APIs
- if you want zippy mobile web apps, it likely means doing a bit more on the client side
- reduce load on the network, hide that high latency mobile connection
Whatever you do, use short iterations,
measure and learn quickly.
- we’re still working out what the impact of smartphones is going to be
- by the time we do, we’ll probably be past smartphones
-> so get good at reacting to change, and moving quickly
- there will be many opportunities, but you will need to be learning and moving fast to take advantage of them.
Thank you

“Nulla facilisi. Phasellus mollis nibh eget
tortor cursus congue. Vivamus velit

tortor, sodales sed feugiat in, gravida eu
Stewart
Jonny Schneider
turpis. Pellentesque quis neque at liberoGleadow
jschneid@thoughtworks.com
malesuada tincidunt a in risus.
@jonnyschneider

Maecenas.”

sgleadow@thoughtworks.com
@stewgleadow
A. Person, 2011

‘Name of referenced work’, Author/source/URL, date.

More Related Content

What's hot

Presentation1 lamar
Presentation1 lamarPresentation1 lamar
Presentation1 lamar
ldjack13
 
User Experience
User ExperienceUser Experience
User Experience
Miles Price
 
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
The Revolution Will Not Be Televised: Managing Content and Experience in the ...The Revolution Will Not Be Televised: Managing Content and Experience in the ...
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
Jonathan Stark
 
Designing for the Real Internet of Things
Designing for the Real Internet of ThingsDesigning for the Real Internet of Things
Designing for the Real Internet of Things
Mercedes-Benz Research & Development North America, Inc.
 
Innovative Technologies and Tech Trends
Innovative Technologies and Tech TrendsInnovative Technologies and Tech Trends
Innovative Technologies and Tech Trends
Brian Pichman
 
Xperience Invoke Series Report: "The changing nature of technology assimilati...
Xperience Invoke Series Report: "The changing nature of technology assimilati...Xperience Invoke Series Report: "The changing nature of technology assimilati...
Xperience Invoke Series Report: "The changing nature of technology assimilati...
Reine Sloan
 
Invoke Live Xperience Summary: "The changing nature of technology assimilation"
Invoke Live Xperience Summary: "The changing nature of technology assimilation"Invoke Live Xperience Summary: "The changing nature of technology assimilation"
Invoke Live Xperience Summary: "The changing nature of technology assimilation"
Reine Sloan
 
Connected Objects, Connected Places. Design Fluid Ecosystems.
Connected Objects, Connected Places. Design Fluid Ecosystems.Connected Objects, Connected Places. Design Fluid Ecosystems.
Connected Objects, Connected Places. Design Fluid Ecosystems.
Pier Paolo Bardoni
 
CES 2016 - VCCP Trend Report
CES 2016 - VCCP Trend Report CES 2016 - VCCP Trend Report
CES 2016 - VCCP Trend Report
Will Harvey
 
How Web Design will reinvent manufacturing
How Web Design will reinvent manufacturingHow Web Design will reinvent manufacturing
How Web Design will reinvent manufacturing
Mike Kuniavsky
 
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile EraThinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Jonathan Stark
 
Human Factors in Innovation: Designing for Adoption
Human Factors in Innovation: Designing for AdoptionHuman Factors in Innovation: Designing for Adoption
Human Factors in Innovation: Designing for Adoption
Jim Kalbach
 
TDWI Keynote: Outside In - The Future of Business Intelligence innovation
TDWI Keynote: Outside In - The Future of Business Intelligence innovationTDWI Keynote: Outside In - The Future of Business Intelligence innovation
TDWI Keynote: Outside In - The Future of Business Intelligence innovation
mark madsen
 
Apple Brand Experience
Apple Brand ExperienceApple Brand Experience
Apple Brand Experience
Korhan Buyukdemirci
 
FutureOffice
FutureOfficeFutureOffice
FutureOffice
Adina Vlad
 
The Future of User Interfaces
The Future of User InterfacesThe Future of User Interfaces
The Future of User Interfaces
Plan
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introduction
Jelle Desramaults
 
Ben Sauer - Principles of Voice Design
Ben Sauer - Principles of Voice DesignBen Sauer - Principles of Voice Design
Ben Sauer - Principles of Voice Design
uxbri
 
IXDA_2009
IXDA_2009IXDA_2009
IXDA_2009
guest7f8e86f
 
The changing nature of things: the present and future of connected products.
The changing nature of things: the present and future of connected products.The changing nature of things: the present and future of connected products.
The changing nature of things: the present and future of connected products.
Alexandra Deschamps-Sonsino
 

What's hot (20)

Presentation1 lamar
Presentation1 lamarPresentation1 lamar
Presentation1 lamar
 
User Experience
User ExperienceUser Experience
User Experience
 
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
The Revolution Will Not Be Televised: Managing Content and Experience in the ...The Revolution Will Not Be Televised: Managing Content and Experience in the ...
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
 
Designing for the Real Internet of Things
Designing for the Real Internet of ThingsDesigning for the Real Internet of Things
Designing for the Real Internet of Things
 
Innovative Technologies and Tech Trends
Innovative Technologies and Tech TrendsInnovative Technologies and Tech Trends
Innovative Technologies and Tech Trends
 
Xperience Invoke Series Report: "The changing nature of technology assimilati...
Xperience Invoke Series Report: "The changing nature of technology assimilati...Xperience Invoke Series Report: "The changing nature of technology assimilati...
Xperience Invoke Series Report: "The changing nature of technology assimilati...
 
Invoke Live Xperience Summary: "The changing nature of technology assimilation"
Invoke Live Xperience Summary: "The changing nature of technology assimilation"Invoke Live Xperience Summary: "The changing nature of technology assimilation"
Invoke Live Xperience Summary: "The changing nature of technology assimilation"
 
Connected Objects, Connected Places. Design Fluid Ecosystems.
Connected Objects, Connected Places. Design Fluid Ecosystems.Connected Objects, Connected Places. Design Fluid Ecosystems.
Connected Objects, Connected Places. Design Fluid Ecosystems.
 
CES 2016 - VCCP Trend Report
CES 2016 - VCCP Trend Report CES 2016 - VCCP Trend Report
CES 2016 - VCCP Trend Report
 
How Web Design will reinvent manufacturing
How Web Design will reinvent manufacturingHow Web Design will reinvent manufacturing
How Web Design will reinvent manufacturing
 
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile EraThinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
 
Human Factors in Innovation: Designing for Adoption
Human Factors in Innovation: Designing for AdoptionHuman Factors in Innovation: Designing for Adoption
Human Factors in Innovation: Designing for Adoption
 
TDWI Keynote: Outside In - The Future of Business Intelligence innovation
TDWI Keynote: Outside In - The Future of Business Intelligence innovationTDWI Keynote: Outside In - The Future of Business Intelligence innovation
TDWI Keynote: Outside In - The Future of Business Intelligence innovation
 
Apple Brand Experience
Apple Brand ExperienceApple Brand Experience
Apple Brand Experience
 
FutureOffice
FutureOfficeFutureOffice
FutureOffice
 
The Future of User Interfaces
The Future of User InterfacesThe Future of User Interfaces
The Future of User Interfaces
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introduction
 
Ben Sauer - Principles of Voice Design
Ben Sauer - Principles of Voice DesignBen Sauer - Principles of Voice Design
Ben Sauer - Principles of Voice Design
 
IXDA_2009
IXDA_2009IXDA_2009
IXDA_2009
 
The changing nature of things: the present and future of connected products.
The changing nature of things: the present and future of connected products.The changing nature of things: the present and future of connected products.
The changing nature of things: the present and future of connected products.
 

Similar to Mobile: More than just an app

Cell Phone Essays
Cell Phone EssaysCell Phone Essays
Mobile Social Media
Mobile Social MediaMobile Social Media
Mobile Social Media
Tom Hulsey
 
The Wireless Evolution
The Wireless EvolutionThe Wireless Evolution
The Wireless Evolution
Ignite Partnership
 
Mobile Phones
Mobile PhonesMobile Phones
Mobile Phones
jambo8
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop Shackles
Jason Grigsby
 
Mobile and The Big Data Question
Mobile and The Big Data QuestionMobile and The Big Data Question
Mobile and The Big Data Question
Mark Brill
 
Cell Phone Essay
Cell Phone EssayCell Phone Essay
Mobile Revolution - MobileMarch-2011
Mobile Revolution - MobileMarch-2011Mobile Revolution - MobileMarch-2011
Mobile Revolution - MobileMarch-2011
Peter Pascale
 
Final year project 1 present
Final year project 1 presentFinal year project 1 present
Final year project 1 present
Dea Xtrik
 
Digital Divide
Digital Divide Digital Divide
Digital Divide
Jamila Boothe
 
Essay On Cell Phones
Essay On Cell PhonesEssay On Cell Phones
Essay On Cell Phones
Paper Writing Service College
 
Impact of technology on peoples lives
Impact of technology on peoples lives Impact of technology on peoples lives
Impact of technology on peoples lives
JakubKolodziejski
 
From Neo to Trinity: The Matrix Reinvented
From Neo to Trinity: The Matrix ReinventedFrom Neo to Trinity: The Matrix Reinvented
From Neo to Trinity: The Matrix Reinvented
The Difference Engine
 
Why mobile matters
Why mobile mattersWhy mobile matters
Why mobile matters
Amy Gahran
 
Mobile Technologies Update : what’s hot, what’s relevant
Mobile Technologies Update: what’s hot, what’s relevantMobile Technologies Update: what’s hot, what’s relevant
Mobile Technologies Update : what’s hot, what’s relevant
Bohyun Kim
 
Information Technology and Modern Gadgets
Information Technology and Modern GadgetsInformation Technology and Modern Gadgets
Information Technology and Modern Gadgets
Arnav Chowdhury
 
Tomorrow’s vision of technology
Tomorrow’s vision of technologyTomorrow’s vision of technology
Tomorrow’s vision of technology
Lafaye wales
 

Similar to Mobile: More than just an app (17)

Cell Phone Essays
Cell Phone EssaysCell Phone Essays
Cell Phone Essays
 
Mobile Social Media
Mobile Social MediaMobile Social Media
Mobile Social Media
 
The Wireless Evolution
The Wireless EvolutionThe Wireless Evolution
The Wireless Evolution
 
Mobile Phones
Mobile PhonesMobile Phones
Mobile Phones
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop Shackles
 
Mobile and The Big Data Question
Mobile and The Big Data QuestionMobile and The Big Data Question
Mobile and The Big Data Question
 
Cell Phone Essay
Cell Phone EssayCell Phone Essay
Cell Phone Essay
 
Mobile Revolution - MobileMarch-2011
Mobile Revolution - MobileMarch-2011Mobile Revolution - MobileMarch-2011
Mobile Revolution - MobileMarch-2011
 
Final year project 1 present
Final year project 1 presentFinal year project 1 present
Final year project 1 present
 
Digital Divide
Digital Divide Digital Divide
Digital Divide
 
Essay On Cell Phones
Essay On Cell PhonesEssay On Cell Phones
Essay On Cell Phones
 
Impact of technology on peoples lives
Impact of technology on peoples lives Impact of technology on peoples lives
Impact of technology on peoples lives
 
From Neo to Trinity: The Matrix Reinvented
From Neo to Trinity: The Matrix ReinventedFrom Neo to Trinity: The Matrix Reinvented
From Neo to Trinity: The Matrix Reinvented
 
Why mobile matters
Why mobile mattersWhy mobile matters
Why mobile matters
 
Mobile Technologies Update : what’s hot, what’s relevant
Mobile Technologies Update: what’s hot, what’s relevantMobile Technologies Update: what’s hot, what’s relevant
Mobile Technologies Update : what’s hot, what’s relevant
 
Information Technology and Modern Gadgets
Information Technology and Modern GadgetsInformation Technology and Modern Gadgets
Information Technology and Modern Gadgets
 
Tomorrow’s vision of technology
Tomorrow’s vision of technologyTomorrow’s vision of technology
Tomorrow’s vision of technology
 

Recently uploaded

Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
Decomart Studio
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
amrsoftec1
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
PoojaSaini954651
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
PabloMartelLpez
 
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
jhonguerrerobarturen
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
TE Studio
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 

Recently uploaded (20)

Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
 
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 

Mobile: More than just an app

  • 1. Topic for the next few slides ‘Name of referenced work’, Author/source/URL, date.
  • 2. ›❯ Technology has changed ›❯ We behave differently ›❯ Creating better mobile products ›❯ Building mobile apps Here’s what we’ll talk about: We’ll take a brief look at changing technology and how that’s affected the way people behave Discuss how we can create better mobile products Walk through some approaches to engineering better apps
  • 3. ›❯ Technology has changed ›❯ We behave differently ›❯ Creating better mobile products ›❯ Building mobile apps
  • 4. First, a note about stats. We’re using local research wherever possible US market and mobile trends are similar to Australia http://www.flickr.com/photos/avlxyz/308574017 We’re both affluent nations, big love for gadgets and internet. Culturally and socioeconomically similar.
  • 5. Technology, people and time 100% 90% 80% COLOR TV ELECTRICITY 60% INTERNET AUTOMOBILE 40% TELEPHONE MOBILE PHONE AIR-CONDITIONING 20% REFRIGERATOR COMPUTER 0 1900 1915 1930 1945 1960 1975 1990 2005 http://www.nytimes.com/imagepages/2008/02/10/opinion/10op.graphic.ready.html If we look back over the last 100 years, we see only the most critical technologies reach saturation point (over 90%). And it takes a long time.
  • 6. Technology, people and time 100% 90% 80% COLOR TV ELECTRICITY 60% INTERNET AUTOMOBILE 40% TELEPHONE MOBILE PHONE AIR-CONDITIONING 20% REFRIGERATOR COMPUTER 0 1900 1915 1930 1945 http://www.nytimes.com/imagepages/2008/02/10/opinion/10op.graphic.ready.html Electricity, 50 years Telephone, 70 years Automobile, 80 years 1960 1975 1990 2005
  • 7. Technology, people and time 100% 90% 80% COLOR TV ELECTRICITY 60% INTERNET AUTOMOBILE 40% TELEPHONE MOBILE PHONE AIR-CONDITIONING 20% REFRIGERATOR COMPUTER 0 1900 1915 1930 1945 1960 1975 1990 50 YEARS 70 YEARS 80 YEARS http://www.nytimes.com/imagepages/2008/02/10/opinion/10op.graphic.ready.html Electricity, 50 years Telephone, 70 years Automobile, 80 years 2005
  • 8. Technology, people and time 100% 90% 80% COLOR TV ELECTRICITY 60% INTERNET AUTOMOBILE 40% TELEPHONE MOBILE PHONE AIR-CONDITIONING 20% REFRIGERATOR COMPUTER 0 1900 1915 1930 1945 1960 1975 1990 20 YEARS 50 YEARS 70 YEARS 30 YEARS 80 YEARS http://www.nytimes.com/imagepages/2008/02/10/opinion/10op.graphic.ready.html Let’s look at Internet and Mobile phones. These have been much quicker. They’re both still relatively new. Internet on phone is even newer These figures only report to 2005. 2005
  • 9. Internet adoption over time (percentage American adults) 80 60 40 20 0 ‘95 ‘96 ‘97 ‘98 ‘99 ‘00 ‘00 ‘01 ‘02 ‘03 ‘04 ‘05 ‘06 ‘07 ‘08 ‘09 ‘10 ‘11 Pew Research, 2012. http://pewinternet.org/Reports/2012/Digital-differences/Main-Report/Internet-adoption-over-time.aspx US trend: Adult internet users.
  • 10. Internet adoption over time (percentage American adults) 80 82% of Australian adults online in 2012 60 40 20 0 ‘95 ‘96 ‘97 ‘98 ‘99 ‘00 ‘00 ‘01 ‘02 ‘03 ‘04 ‘05 ‘06 ‘07 ‘08 ‘09 ‘10 ‘11 The Australian Online Consumer Landscape Report, Nielsen 2012. It’s the same in Australia.
  • 11. Adult gadget ownership over time 90 75 60 Desktop PC Laptop Mobile Phone Tablet 45 30 15 0 Apr ‘06 Apr ‘08 Sep ‘09 Sep ‘10 Aug ‘11 Feb ‘12 Pew Research Center, 2012. http://pewinternet.org/Reports/2012/Digital-differences/Main-Report/The-power-of-mobile.aspx But how are people accessing the internet? Let’s take a look at device ownership. Desktop in decline over last five years. Laptop have become the preference. Almost everyone has a mobile phone. Tablet has very sharp growth. This shouldn’t be news to you, but it is significant.
  • 12. In Australia... 90 75 110% mobile device penetration 60 Desktop PC Laptop Mobile Phone Tablet 52% of those are smartphones 45 18% tablet ownership 30 15 0 Apr ‘06 Apr ‘08 Sep ‘09 Sep ‘10 Aug ‘11 Australia - Understanding the Mobile Consumer. Australian Bureau of Statistics. May, 2012. http://bit.ly/MKj8dq Australian Mobile Phone Lifestyle Index. 2011. http://www.aimia.com.au/ampli The Australian Online Consumer Landscape Report, Nielsen 2012. It’s basically the same in Australia. Feb ‘12
  • 13. AMPS Analogue Telecom ‘Walkabout’ ‘87 3G UMTS NextG GSM 2G/WAP/WML/i-mode ‘89 Motorola Brick ‘91 ‘93 ‘95 ‘97 ‘99 Data: http://isc.org; http://amta.org.au; http://wikipedia.org and various websites Let’s look at where we’ve come from... Analogue networks. First phones were all voice. ‘01 ‘03 ‘05 ‘07 ‘09 ‘11
  • 14. AMPS Analogue 3G UMTS NextG GSM 2G/WAP/WML/i-mode Telecom ‘Walkabout’ Motorola Brick SMS is born 1st mobile web browsers Predictive Text ‘87 ‘89 ‘91 ‘93 ‘95 ‘97 ‘99 Data: http://isc.org; http://amta.org.au; http://wikipedia.org and various websites SMS comes with 2G about 1993. 1st web browsers around 1997... but nobody used them ‘01 ‘03 ‘05 ‘07 ‘09 ‘11
  • 15. AMPS Analogue 3G UMTS NextG GSM 2G/WAP/WML/i-mode Telecom ‘Walkabout’ Motorola Brick Nokia 5110 SMS is born 1st mobile web browsers Predictive Text ‘87 ‘89 ‘91 ‘93 ‘95 ‘97 ‘99 ‘01 ‘03 Data: http://isc.org; http://amta.org.au; http://wikipedia.org and various websites Remember Nokia 5120? I bet you didn’t use the web browser (there wasn’t one) ‘05 ‘07 ‘09 ‘11
  • 16. AMPS Analogue 3G UMTS NextG GSM 2G/WAP/WML/i-mode Telecom ‘Walkabout’ Motorola RAZR Motorola Brick Nokia 5110 Palm Treo SMS is born 1st mobile web browsers Predictive Text ‘87 ‘89 ‘91 ‘93 ‘95 ‘97 ‘99 Data: http://isc.org; http://amta.org.au; http://wikipedia.org and various websites Palm Treo/Moto RAZR. Now we’re starting to browse. 3G arrives, but not common yet. ‘01 ‘03 ‘05 ‘07 ‘09 ‘11
  • 17. AMPS Analogue 3G UMTS NextG GSM 2G/WAP/WML/i-mode Telecom ‘Walkabout’ Motorola RAZR Motorola Brick Nokia 5110 Palm Treo SMS is born 1st mobile web browsers Predictive Text ‘87 ‘89 ‘91 ‘93 ‘95 ‘97 ‘99 Data: http://isc.org; http://amta.org.au; http://wikipedia.org and various websites WebKit in 2005. Nokia s60. ‘01 1st WebKit browser ‘03 ‘05 ‘07 ‘09 ‘11
  • 18. AMPS Analogue 3G UMTS NextG GSM 2G/WAP/WML/i-mode Telecom ‘Walkabout’ Motorola RAZR Motorola Brick Nokia 5110 HTC Dream (1st Android) Palm Treo iPhone 3 SMS is born 1st mobile web browsers Predictive Text 1st WebKit browser iPad 1 ‘87 ‘89 ‘91 ‘93 ‘95 ‘97 ‘99 ‘01 Data: http://isc.org; http://amta.org.au; http://wikipedia.org and various websites You know the rest. Apple release iPhone... People go crazy for web on mobile. Web on Mobile is less than 10 years old. ‘03 ‘05 ‘07 ‘09 ‘11
  • 19. So What? http://www.flickr.com/photos/jakecaptive/3205277810 There is new technology, and people are using it... So What.
  • 20. ›❯ Technology has changed ›❯ We behave differently ›❯ Creating better mobile products ›❯ Building mobile apps
  • 21. “...we tend to place the emphasis on the technologies themselves, when it is really the social impact and cultural change that will be most dramatic.” Don Norman, 1998 mitpress.mit.edu/books/norvh/chapter1.html Don Norman is my man for cognitive sciences, design and usability engineering. He wrote some seminal books. What he’s saying in essence is that... it’s not gadgets that change the world, but how we humans use them. He is right. And we see this play out in a number of ways. Let’s look at an example.
  • 22. “...we tend to place the emphasis on the technologies themselves, when it is really the social impact and cultural change that will be most dramatic.” Don Norman, 1998 mitpress.mit.edu/books/norvh/chapter1.html Don Norman is my man for cognitive sciences, design and usability engineering. He wrote some seminal books. What he’s saying in essence is that... it’s not gadgets that change the world, but how we humans use them. He is right. And we see this play out in a number of ways. Let’s look at an example.
  • 23. What is the most radical, innovative mobile device released in the last few years? You probably thought of a smartphone first.
  • 24. What is the most radical, innovative mobile device released in the last few years? Vodafone 150 $10 - $15 The Vodafone 150 only do Voice, SMS, USSD. That’s it. But it’s had an astonishing impact in some parts of the world. We tend to focus on smart phones, especially in the city Don’t forget that forget that smartphones are not ubiquitous yet
  • 25. Population Density http://na.unep.net/globalpop/africa/Appendix_6e.html A lot of people on the north african coast and up the nile. Very dense in parts of west Africa, especially Nigeria. Heavy pockets through east Africa as well.
  • 26. Access to electricity http://apod.nasa.gov/apod/ap081005.html When you compare access to electricity, it looks like there is a lot of overlap... Actually only about 4% of the population that have access to grid power
  • 27. GSM Network Coverage http://apod.nasa.gov/apod/ap081005.html Now look at GSM: Strong GSM coverage. Around 98% of the population Moved from having access to information only in immediate surroundings to now having access to a global network of information
  • 28. What does it mean for information sharing? RapidFTR RapidFTR is a system to help aid workers reunite lost children with their parents The old way: People printed photos of lost children and posted on walls in centre of communities The new way: Needs to deal with misplaced children with a global perspective. Asylum seekers moving around the globe in response to various disasters and events. It needs to work offline (dropping connections), data sync later and be secure enough to avoid exploiters taking advantage of people at risk. It’s dramatically improved the effectiveness of goal at hand: reuniting lost children with parents.
  • 29. We behave differently Yesterday, We went go to the computer to use internet Africa is a poignant example of social change brought about by technology. At home, we’ve also changed, just in different ways.
  • 30. We behave differently Today, We access the internet any place, any time. Web on a phone is not remarkable itself. But how it is changing our behaviour is. Let’s have a look at that in a little more detail.
  • 31. Use of the mobile phone for different purposes 100 80 60 2009 2010 2011 40 Banking Search Visit web Entertainment SMS 0 Voice 20 Australian Mobile Phone Lifestyle Index. 2011. http://www.aimia.com.au/ampli This data is from the latest Australian Mobile Phone Lifestyle Index, and shows how we’ve been using phones over the last three years. Voice and SMS is ubiquitous and hasn’t changed. Entertainment websites search banking People clearly use their phone to do more things, and they’re expecting to use it for more.
  • 32. ‘Just in time’ information 86% of smartphone owners access information just-in-time... Pew Research, 2012. http://pewinternet.org/Reports/2012/Just-in-time/ Mobile enables ‘Just in time’ behaviour 10 years ago, we: Phone friend on landline, arrange to ‘meet under the clocks’ at Flinders St. Station at 2pm. We’d Arrive. On time! Friend not here? Seek out a pay phone and call at home to see what time they left. For transit info we carried the printed timetable, or memorised the sequence. 3 trains per hour, every 20 mins departing five past the hour. Today, we get that info ‘just in time’
  • 33. ‘Just in time’ information 86% of smartphone owners access information just-in-time... 41% coordinate a meet-up 35% solve an unexpected problem 20% get a up-to-the-minute transport info Pew Research, 2012. http://pewinternet.org/Reports/2012/Just-in-time/ Mobile enables ‘Just in time’ behaviour 10 years ago, we: Phone friend on landline, arrange to ‘meet under the clocks’ at Flinders St. Station at 2pm. We’d Arrive. On time! Friend not here? Seek out a pay phone and call at home to see what time they left. For transit info we carried the printed timetable, or memorised the sequence. 3 trains per hour, every 20 mins departing five past the hour. Today, we get that info ‘just in time’
  • 34. ‘Just in time’ information In Australia... 55% accessed maps/location/traffic 34% use mobile search daily 39% restaurant or cafe info Australian Mobile Phone Lifestyle Index, 2011. http://www.aimia.com.au/ampli It’s the same in Australia
  • 35. What does it mean for payments? http://www.flickr.com/photos/martinhoward/2709364519 About 50% of IB logins are on a mobile device Significant value-transactions are taking place via mobile devices Customer are comfortable with this, and it’s now expected old slow movers are innovating: Banks are running m-payments trials all over the world, with lots of technologies New entrants are shaking things up: Bank Simple, Movenbank, Square... and so on.
  • 36. 20-25% of GDP paid via SMS http://collections.europarchive.org/tna/20081202180014/ Back to Africa... A different take on mobile payments, but incredibly successful: mPesa ~$200m AUD profit (most profitable mobile app in the world - double Angry Birds) 20-25% of GDP mPesa works on very rudimentary technology, but it meets a very real user need It solves a people problem first, using whatever technology is available. We should learn from this.
  • 37. What does it mean for retail? 50% of smartphone owners use their device in-store to help make purchasing decisions Have you ever done this? Of course you have. Aside from price matching, there’re other uses for this. One example: - An app that scans barcodes to give ingredient list and match with user’s allergies - accessibility features on the iPhone mean this can be used by people with impaired vision - it’s not just changing behaviour, it’s creating new opportunities
  • 38. ›❯ Technology has changed ›❯ We behave differently ›❯ Creating better mobile products ›❯ Building mobile apps How do we take advantage of these new opportunities? Lets look at what makes a good mobile product, and how we can create mobile products that meet changing customer expectations
  • 39. What does success look like? 2007 A dedicated mobile website 2010 Native iOS and Android apps 2012 Integrated mobile experience 2014 ??? In two years, it will look different again... We need to build products for today’s market, and be preparing for tomorrow
  • 40. Post-mobile world Integrated with life Opportunistic interactions Everything is ‘smart’ and all things are connected http://g.co/projectglass Soon, we won’t need a phone to be mobile. Mobile will just be a part of everything. Integrated with life. Some call this ‘ubiquitous computing’. One example is Google’s Project Glass prototype. The marketing videos are pretty cheesy, but the concept is on point. Don’t forget that it’s early days, and there are lots of things to work out.
  • 41. Remember the first 10 years of radio? First radio broadcasts were stage-play recitals. It took a while to use it for news broadcasting, and to discover SoundFX and... advertising.
  • 42. Remember the first 10 years of television? http://en.wikipedia.org/wiki/Television First television was radio with pictures.
  • 43. Remember the first 10 years of the web? http://www.icehousedesigns.com/webarchive/images/flshbk_COLLAGE2.gif First websites were static, digitised documents. This is Microsoft in 1995. Brochureware with image-map navigation. Awesome! Web on a mobile is emerging from a similar place, it takes a while to mature into meaningful and useful experiences. So, how do we create better mobile products?
  • 44. We’ve been saying ‘do less’ (on mobile) for a long time ‘Graceful Degradation’ ‘Content/feature discrimination’ Big assumptions about customer needs We’ve been saying ‘do less’ for a while, and ‘graceful degradation’ was once the way to do it. It can be a valid approach, and useful for established products and services, but it has problems. We take a large-screen design and make it smaller for mobile. In this example, a unicorn. As the screens get smaller, we chop bits off usually at the extremities. Tail. Legs. Torso. Eventually, only the head is left. So, most of the time it ain’t that graceful.
  • 45. We’ve been saying ‘do less’ (on mobile) for a long time ‘Graceful Degradation’ ‘Content/feature discrimination’ Big assumptions about customer needs We’ve been saying ‘do less’ for a while, and ‘graceful degradation’ was once the way to do it. It can be a valid approach, and useful for established products and services, but it has problems. We take a large-screen design and make it smaller for mobile. In this example, a unicorn. As the screens get smaller, we chop bits off usually at the extremities. Tail. Legs. Torso. Eventually, only the head is left. So, most of the time it ain’t that graceful.
  • 46. An example from banking ‘full version’ mobile version Product info ★ ★ Exchange rates ★ Interest rates ★ Product disclosure statements ★ Forms & documents ★ Content Features check account balance ★ ★ transfer funds ★ ★ pay a bill with BPAY ★ ★ schedule a future transfer ★ Change daily limits ★ Update mailing address ★ Full feature set on desktop version. Truncation on mobile. Content like forms, documents, Product Disclosure Statements and so on. Or so called ‘peripheral’ features.
  • 47. Customers want to do more on mobile Mobile Internet Users Desktop Internet Users Mobile Majority is very close 2007 2008 2009 2010 2011 2012 2013 2014 2015 Morgan Stanley Associates Internet Trends (2010) But as customers, we expect to do more on mobile today, so truncation - even at the periphery - is a dangerous strategy.
  • 48. A good start... ‘Progressive Enhancement’ Mobile first, content first Feature parity This is the same idea as graceful degradation but in reverse. Instead of starting big and degrading, we start small and enhance. Progressive enhancement is what is usually happening in ‘mobile first’ thinking, and ‘responsive web design’. Start with a small unicorn - one that works for mobile - and then deliver unicorns to all screens.
  • 49. A good start... ‘Progressive Enhancement’ Mobile first, content first Feature parity This is the same idea as graceful degradation but in reverse. Instead of starting big and degrading, we start small and enhance. Progressive enhancement is what is usually happening in ‘mobile first’ thinking, and ‘responsive web design’. Start with a small unicorn - one that works for mobile - and then deliver unicorns to all screens.
  • 50. An example ‘full version’ mobile version Your bags ★ ★ People ★ ★ Notifications ★ ★ Blog ★ ★ Help ★ ★ Create a new bag ★ ★ Edit existing bag ★ ★ Explore ★ ★ Search Bagcheck ★ ★ Create new discussion ★ ★ Comment ★ ★ Content Features Bag Check was was built mobile first, by the guy who wrote the book on Mobile First. This is becoming a more common approach. Deliver unicorns consistently on all screens. But it still misses something.
  • 51. What if that version of the unicorn isn’t helpful for me right now? Adaptation (usually) only deals with the interface not the content http://commons.wikimedia.org/wiki/File:Jednoro%C5%BCec.svg We’ve delivered the unicorn accurately, but if I can’t interact with it in a way that makes sense on my device, then we’ve only gone part of the way. An example from banking: On mobile, a list of future-dated payments is viewable, but I cant edit the payments details. Useless. Or PDF forms that render to screen, but can’t be used or printed. This doesn’t work, because the content hasn’t been structured and presented in a way that is useful for the mobile customer.
  • 52. Responsive content Adapt content as well as features Portability and consistency Create Once, Publish Everywhere http://www.flickr.com/photos/tomazstolfa/4845875443/ How can we provide different versions of content and features that are most appropriate for each device? Create once, publish everywhere (COPE). Easier said than done. Requires a strategic approach to content management. What content is required... on what devices... and in what format? Are your content and marketing teams ready for this? Is your content management system capable of structuring content in this way?
  • 53. Another example National Public Radio do this really well. This is ‘adaptive content’ more than ‘responsive content’. They serve different versions of their content, from a simple CMS, across many devices. Karen McGrane - my favourite content strategist - talks more about this in her book Content Strategy for Mobile.
  • 54. Seamless experiences Customers choose when and how they interact with your brand Make it easy for them Awesome, now you have appropriate content and features rendered properly across many devices. Keep everything connected and transition as seamlessly as possible Because customers don’t see your ‘channels’ - All they see is a brand, and their needs
  • 55. Precious Design Studios. http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies You know they’re likely to be using multiple devices. A seamless experience across your channels is expected. Provide pathways through content... Seamless connection through appropriate and relevant versions of content.
  • 56. AirBNB - getting it wrong. http://www.flickr.com/photos/thewolf/5812767917 I travelled to London recently airBNB is a site that connects travelers with hosts for accommodation. I signed up with Facebook, and booked accommodation on laptop On the road, I couldn’t authenticate with the app, because FB Open Auth didn’t work properly Using email to login - with forgot password - failed too (because I wasn’t in the database) This became a real problem, I almost didn’t have a bed to sleep in. Not ideal for a brand who’s goal is connecting travelers with hosts.
  • 57. realestate.com.au - Getting it right. ‘Name of referenced work’, Author/source/URL, date. Search, browse and create a shortlist in your lunch hour.
  • 58. ‘Name of referenced work’, Author/source/URL, date. AirPlay the fullscreen image gallery from iPad to TV in the evening to discuss with your partner.
  • 59. ‘Name of referenced work’, Author/source/URL, date. Use the open-inspection planner to help you on Saturday afternoons
  • 60. Precious Design Studios. http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies There are some great interaction patterns emerging around multiscreen experiences. Device shifting. This is where a consumer begins a task on one device, then completes it on another. AirBNB is an example of this gone wrong. Draft an email on mobile, finish it on desktop. Fill a shopping cart on eBay, complete purchase at home.
  • 61. Precious Design Studios. http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies Simultaneity. Jump-in is an iPad app that ThoughtWorks was involved with for NineMSN. It’s a ‘second screen’ experience designed specifically for tablet and TV. The iPad experience is simultaneous with the TV broadcast. During Olympics, able to interact with content such as live news, current medal tally, event schedule and realtime twitter conversations that are related to the broadcast.
  • 62. Precious Design Studios. http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies
  • 63. An ecosystem of screens and physical interfaces So we have an ecosystem of screens and physical interfaces. Apps are seen as today’s heroes. Let’s look at those in more detail.
  • 64. Consumers expect a continuous experience Let’s look at what’s expected from your apps now: continuity across all channels - people do different tasks on different devices - that means your app, the mobile website, desktop systems all talking on the backend -“we’ll just connect it up on the backend”, simple stuff - what about people who phone in? or visit in person?
  • 65. ‘Name of referenced work’, Author/source/URL, date. - all these standalone backend systems that don’t talk well to each other - in reality, “the backend” is not one nice continuous system -> lots of separate systems, different technologies... we don’t even know how some of them work anymore, so we don’t touch them... but they seem to work - so to get our continuous mobile experience, we also need to wrangle all this other stuff - the mess on the backend doesn’t give you the flexibility you’ll need going forward - but it is the bit the consumer sees, the thing they will judge you on
  • 66. Call Centre Retail ‘Name of referenced work’, Author/source/URL, date. - all these standalone backend systems that don’t talk well to each other - in reality, “the backend” is not one nice continuous system -> lots of separate systems, different technologies... we don’t even know how some of them work anymore, so we don’t touch them... but they seem to work - so to get our continuous mobile experience, we also need to wrangle all this other stuff - the mess on the backend doesn’t give you the flexibility you’ll need going forward - but it is the bit the consumer sees, the thing they will judge you on
  • 67. Call Centre Retail Legacy Thing ‘Name of referenced work’, Author/source/URL, date. - all these standalone backend systems that don’t talk well to each other - in reality, “the backend” is not one nice continuous system -> lots of separate systems, different technologies... we don’t even know how some of them work anymore, so we don’t touch them... but they seem to work - so to get our continuous mobile experience, we also need to wrangle all this other stuff - the mess on the backend doesn’t give you the flexibility you’ll need going forward - but it is the bit the consumer sees, the thing they will judge you on
  • 68. Call Centre Legacy Thing Database Retail Message Hub Mainframe Some expensive and proprietary system ‘Name of referenced work’, Author/source/URL, date. - all these standalone backend systems that don’t talk well to each other - in reality, “the backend” is not one nice continuous system -> lots of separate systems, different technologies... we don’t even know how some of them work anymore, so we don’t touch them... but they seem to work - so to get our continuous mobile experience, we also need to wrangle all this other stuff - the mess on the backend doesn’t give you the flexibility you’ll need going forward - but it is the bit the consumer sees, the thing they will judge you on
  • 69. Call Centre Legacy Thing Database Retail Message Hub Mainframe Some expensive and proprietary system ‘Name of referenced work’, Author/source/URL, date. - all these standalone backend systems that don’t talk well to each other - in reality, “the backend” is not one nice continuous system -> lots of separate systems, different technologies... we don’t even know how some of them work anymore, so we don’t touch them... but they seem to work - so to get our continuous mobile experience, we also need to wrangle all this other stuff - the mess on the backend doesn’t give you the flexibility you’ll need going forward - but it is the bit the consumer sees, the thing they will judge you on
  • 70. Call Centre Legacy Thing Database Retail Message Hub Mainframe Some expensive and proprietary system ‘Name of referenced work’, Author/source/URL, date. - all these standalone backend systems that don’t talk well to each other - in reality, “the backend” is not one nice continuous system -> lots of separate systems, different technologies... we don’t even know how some of them work anymore, so we don’t touch them... but they seem to work - so to get our continuous mobile experience, we also need to wrangle all this other stuff - the mess on the backend doesn’t give you the flexibility you’ll need going forward - but it is the bit the consumer sees, the thing they will judge you on
  • 71. ›❯ Technology has changed ›❯ We behave differently ›❯ Creating better mobile products ›❯ Building mobile apps
  • 72. Different mobile platforms - mobile is booming, everyone is getting connected... but we’re not all buying the same devices (sometimes not even similar devices) - 5 main platforms: iOS, Android, Windows, Blackberry, Web - going to simplify to 3: iOS, Android, the Web -> Win7/8 looks really promising, make your conclusions about the future of Blackberry - how can we target all of these platforms? - Do we even want to? Different interaction patterns.
  • 73. Native or Web? Going to quickly explain each of these approaches and some of the tradeoffs -> one of the great debates in the developer community at the moment
  • 74. Native or Web? In the app store Objective C and Java Lowest barrier to a great experience Being discoverable in the app store is still important - a reasonable proportion of users can’t distinguish between the app store and web search (even though search is so bad in the Apple app store) - means you’re writing using the tools provided by the vendors (Apple, Google, Microsoft) - Objective C is kind of a strange language, and Java isn’t exactly the new hotness - native apps have the lowest barrier to awesome (it’s not automatic)
  • 75. Native or Web? Distribute through the browser HTML, CSS, Javascript Some reuse across platforms - apps that you actually distribute and run inside the browser on your mobile device - easier to manage versions and updates - HTML5 is going to save the day, and everything will just work (in reality you have a bunch of tweaking and performance tuning ahead of you) - get to work with familiar technology: in house skills, easier to find devs - don’t underestimate the challenge of finding good developers for native apps
  • 76. or - no one size fits all, it depends - but it’s not an either/or choice, there is a whole spectrum between the two - modern mobile platforms have reasonable support for running parts of your app using web technologies -> people are calling these hybrid apps, can be a confusing term
  • 77. NATIVE HYBRID - at the other end, we have pure web apps written in HTML, CSS and Javascript - at one end, we have completely native apps written in Objective C, Java - full native apps: expect heavy usage, offline access, high performance slick UI - tools that wrap up a web app inside a native shell to go on the app store (Phone Gap) -> eg. BBC Olympics app... good screenshots, sluggish performance, but hits-all-platforms - custom hybrid apps: native apps with web components - interestingly, Facebook has been rewriting their app to have more native components WEB
  • 78. The Guardian NATIVE HYBRID - at the other end, we have pure web apps written in HTML, CSS and Javascript - at one end, we have completely native apps written in Objective C, Java - full native apps: expect heavy usage, offline access, high performance slick UI - tools that wrap up a web app inside a native shell to go on the app store (Phone Gap) -> eg. BBC Olympics app... good screenshots, sluggish performance, but hits-all-platforms - custom hybrid apps: native apps with web components - interestingly, Facebook has been rewriting their app to have more native components Democracy Now! WEB
  • 79. Instagram NATIVE The Guardian HYBRID - at the other end, we have pure web apps written in HTML, CSS and Javascript - at one end, we have completely native apps written in Objective C, Java - full native apps: expect heavy usage, offline access, high performance slick UI - tools that wrap up a web app inside a native shell to go on the app store (Phone Gap) -> eg. BBC Olympics app... good screenshots, sluggish performance, but hits-all-platforms - custom hybrid apps: native apps with web components - interestingly, Facebook has been rewriting their app to have more native components Democracy Now! WEB
  • 80. Instagram NATIVE The Guardian HYBRID Democracy Now! WEB BBC Olympics using - at the other end, we have pure web apps written in HTML, CSS and Javascript - at one end, we have completely native apps written in Objective C, Java - full native apps: expect heavy usage, offline access, high performance slick UI - tools that wrap up a web app inside a native shell to go on the app store (Phone Gap) -> eg. BBC Olympics app... good screenshots, sluggish performance, but hits-all-platforms - custom hybrid apps: native apps with web components - interestingly, Facebook has been rewriting their app to have more native components PhoneGap
  • 81. Instagram Jump-in NATIVE The Guardian HYBRID LinkedIn Facebook Democracy Now! WEB BBC Olympics using - at the other end, we have pure web apps written in HTML, CSS and Javascript - at one end, we have completely native apps written in Objective C, Java - full native apps: expect heavy usage, offline access, high performance slick UI - tools that wrap up a web app inside a native shell to go on the app store (Phone Gap) -> eg. BBC Olympics app... good screenshots, sluggish performance, but hits-all-platforms - custom hybrid apps: native apps with web components - interestingly, Facebook has been rewriting their app to have more native components PhoneGap
  • 82. Instagram Jump-in NATIVE Facebook The Guardian HYBRID LinkedIn Democracy Now! WEB BBC Olympics using - at the other end, we have pure web apps written in HTML, CSS and Javascript - at one end, we have completely native apps written in Objective C, Java - full native apps: expect heavy usage, offline access, high performance slick UI - tools that wrap up a web app inside a native shell to go on the app store (Phone Gap) -> eg. BBC Olympics app... good screenshots, sluggish performance, but hits-all-platforms - custom hybrid apps: native apps with web components - interestingly, Facebook has been rewriting their app to have more native components PhoneGap
  • 83. How should you build your app? User Experience Platform Coverage http://www.flickr.com/photos/raeallen/200891658 - there’s a whole spectrum of approaches to choose from, which should you take? - there are a number of things to take into consideration: -> time to market, quality of the user experience, performance, development capability, platform coverage, discoverability -> going to simplify this to the fundamental two factors - let’s look at these tradeoffs, and approaches that favour one over the other
  • 84. User Experience Platform Coverage - this is where we want to be: a great experience on all platforms... - let’s treat that as the goal, but we’re not going to get there straight away - for a lot of people, this is where they are at the moment, with a fairly large and tricky mess - two ways we can go: -> tackle a single platform first, and go for a really polished interface, slowly expand both the feature set and platform coverage from there (calling this the Laser strategy) -> go for a shallow cut of both the experience and feature set, but hit as many platforms as possible (calling this the cover your bases strategy) - let’s look at each approach, and where it might make sense to use it
  • 85. User Experience Platform Coverage - this is where we want to be: a great experience on all platforms... - let’s treat that as the goal, but we’re not going to get there straight away - for a lot of people, this is where they are at the moment, with a fairly large and tricky mess - two ways we can go: -> tackle a single platform first, and go for a really polished interface, slowly expand both the feature set and platform coverage from there (calling this the Laser strategy) -> go for a shallow cut of both the experience and feature set, but hit as many platforms as possible (calling this the cover your bases strategy) - let’s look at each approach, and where it might make sense to use it
  • 86. User Experience Platform Coverage - this is where we want to be: a great experience on all platforms... - let’s treat that as the goal, but we’re not going to get there straight away - for a lot of people, this is where they are at the moment, with a fairly large and tricky mess - two ways we can go: -> tackle a single platform first, and go for a really polished interface, slowly expand both the feature set and platform coverage from there (calling this the Laser strategy) -> go for a shallow cut of both the experience and feature set, but hit as many platforms as possible (calling this the cover your bases strategy) - let’s look at each approach, and where it might make sense to use it
  • 87. User Experience Laser Platform Coverage - initially, focus on a single platform and nail it... eg. iPhone app - for new companies trying to win customers, where experience is an important selling point -> if you can’t win the market with this focus, what makes you think you can win it at all? - for existing companies, look at your stats: which users to do you want to hit first? -> In Australia, and your company is targeting professional adults, it’s often the iPhone eg. high end fashion, even banking and insurance, selling cars or houses (if your product is aimed at teenagers, you’re likely to see more Androids) - iOS is more dominant here than elsewhere (employment, wages, no carrier lock in) -> read stats about number of devices purchased, but usage of those is very different
  • 88. User Experience Cover your bases Platform Coverage - cut scope and quality finish to try and hit as many platforms as possible - might make sense for companies with existing customers: don’t be exclusive - where playing favourites isn’t really an option (eg. ATO - eTax, except they didn’t) eg. emergency warning system: want it to go to everyone (people have ignored this) - depending on the content you're presenting, HTML/CSS might be well suited eg. for text markup and layout... -> for infinite scrolling tables/multiple gestures, native still a long way ahead
  • 89. or - not an either/or choice, you can use both (native and web) - use native where it makes sense, use web components where it makes sense -> compromise between the laser and cover your bases strategies - there are frameworks out there to help do this (eg. PhoneGap/Cordova, Titanium/Kony) -> but don’t want to lock yourself in
  • 90. and - not an either/or choice, you can use both (native and web) - use native where it makes sense, use web components where it makes sense -> compromise between the laser and cover your bases strategies - there are frameworks out there to help do this (eg. PhoneGap/Cordova, Titanium/Kony) -> but don’t want to lock yourself in
  • 91. Don’t lock yourself into doing everything natively or everything using the web and - not an either/or choice, you can use both (native and web) - use native where it makes sense, use web components where it makes sense -> compromise between the laser and cover your bases strategies - there are frameworks out there to help do this (eg. PhoneGap/Cordova, Titanium/Kony) -> but don’t want to lock yourself in
  • 92. Sharing between platforms Shared logic using Javascript Shared presentation using HTML/CSS - it doesn’t have to be Javascript, could use Mono and C# -> Thoughtworks Tech Radar: treating Javascript as a first class language -> “it depends” eg. a banking app vs search and listing or directory app - complex UI, gestures, animations... native eg. Hipstamatic/Instragram/iPhoto - marking up content (text/images) without a lot of interaction -> HTML/CSS have evolved for exactly for that purpose - reuse at all costs is not the answer, focus on what the user is trying to achieve - be pragmatic about how to reuse parts where it will save you time and money
  • 93. User Interface Client Logic iPhone Objective C Objective C Mobile Web HTML / CSS Javascript - how this evolved from experience with the laser approach: a global bank -> iPhone, Android, web apps: different languages for each platform - the left hand column is your opportunity to share the presentation -> depending on the size of the UI code, how complex it is, how expensive it is to maintain -> might make sense to duplicate across platforms if it’s simpler and quicker - the right hand column represents the opportunity to share the logic of the app -> is it common? Does it make sense to write it in Javascript? -> simple state machine? Yes. Complex image filtering? Probably not.
  • 94. User Interface Client Logic iPhone Objective C Objective C Mobile Web HTML / CSS Javascript What would we do differently? - how this evolved from experience with the laser approach: a global bank -> iPhone, Android, web apps: different languages for each platform - the left hand column is your opportunity to share the presentation -> depending on the size of the UI code, how complex it is, how expensive it is to maintain -> might make sense to duplicate across platforms if it’s simpler and quicker - the right hand column represents the opportunity to share the logic of the app -> is it common? Does it make sense to write it in Javascript? -> simple state machine? Yes. Complex image filtering? Probably not.
  • 95. Objective C HTML / CSS Client Logic Calatrava User Interface Objective C A bridge between native and web - want a bridge between the Javascript and native code -> knows how to call javascript code, and also to get values out - other side of the bridge allows us to pass data to be presented -> choice of whether to present it using web views or native views -> pass actions from the UI back down to the appropriate logic * finally, need a registry to match up the components of the system with technology -> we’ve been using this successfully for a major airline Javascript
  • 96. Calatrava Technology choice per feature More an approach than a framework Will soon be open source http://en.wikipedia.org/wiki/Puente_del_Alamillo - named after Santiago Calatrava, designs bridges (this one in Seville, 4th bridge in Venice) - nice to name something after a bridge (feel like a real engineer) -> acts as the bridge that connects native and web code (gives us that technology choice) - calling it a framework might be overkill, it’s only a few hundred lines of code - we’ve been using this approach at a “major airline”, it’s been working really well -> adding a few new flows within existing native apps, using this approach -> can come back and polish the UI later if needed - we’ll get this open source, so watch this space - so we’ve got an approach for building our apps, but...
  • 97. But the app is just the tip of the iceberg - calatrava is best option I’ve seen for flexible, pragmatic reuse... but I’m biased - tools like PhoneGap, Titanium, Mono are all useful as well, it depends on the app * what about the rest of the system? - maybe we’re optimising the wrong part?
  • 98. App Backend - typical app talking to this mysterious “backend” * Lots of talk about how to share logic across platforms, but not enough people questioning what all that logic is doing in your app in the first place - a lot of complexity can be added by talking to an old, chatty backend system -> if it’s messy, don’t write all the logic in the app and try and reuse it * put a layer in between
  • 99. App API - Simplify the backend systems your app has to deal with, protect them - this API can provide a simple view of the backend, as if it was a nice continuous system -> the LinkedIn engineering blog has a post on using a node.js server to do this - it also gives you a buffer for change (some people never update their apps) - whenever you write new logic in your app, see if you can put it in the API Backend
  • 100. How do we build simpler apps and smarter backends? App API Backend Product-aligned teams RESTful web services Serving data and style - the app should be as thin as possible, that's the best reuse you can get - how??? - much easier if you develop the API and the apps at the same time (not technology teams) - RESTful web services are great for mobile apps -> if you don’t know about REST, look it up, basically structuring systems like the web... -> think of it like a replacement for things like SOAP and WSDL -> great for reducing the amount of logic required by the client (discoverable) eg. switching a single URL and getting completely different data, different static image server - create APIs that serve both the JSON data and visual style in HTML/CSS -> give yourself more control of your apps, and keep that logic server side
  • 101. ›❯ Technology has changed ›❯ We behave differently ›❯ Creating better mobile products ›❯ Building mobile apps
  • 102. Focus on customer behaviour before technology http://www.forbes.com/sites/fredcavazza/2012/08/13/why-launching-a-mobile-app-is-pointless Gadgets and technology won’t in themselves change the way your customers behave. Find out how they behave and what they need first, then work out how to best meet those needs. Forbes put it quite nicely...
  • 103. Focus on customer behaviour before technology “Competitive advantage will not be gained by providing your customers a sharp mobile app, but by making sure every decision maker in your organization understands the needs and habits of mobile users” Forbes.com. August 2012 http://www.forbes.com/sites/fredcavazza/2012/08/13/why-launching-a-mobile-app-is-pointless Gadgets and technology won’t in themselves change the way your customers behave. Find out how they behave and what they need first, then work out how to best meet those needs. Forbes put it quite nicely...
  • 104. Do more, not less for mobile We know that people are using their mobile devices to do more things than ever today. There’s a growing expectation to do anything on mobile. Truncation for mobile is a dangerous strategy.
  • 105. Break large systems into smaller, faster moving components so you can better respond to change - the mobile market is changing rapidly - if it takes you a year or two to put out an app, and it’s scraping your backend website, because you don’t have an API and you only deploy new versions of the websites every few months -> that’s not going to cut it going forward * start up companies that don’t have this legacy, wont have this problem, they’ll be a threat eg. Ingogo and Uber taxi apps... don’t want to integrate with existing providers - Either need to be good at innovation or good at fast follow and delivery... can't fail at both - Plan to have APIs for your backend systems, even for mobile web applications. - Amazon talks a lot about having lots of small, single purpose APIs - if you want zippy mobile web apps, it likely means doing a bit more on the client side - reduce load on the network, hide that high latency mobile connection
  • 106. Whatever you do, use short iterations, measure and learn quickly. - we’re still working out what the impact of smartphones is going to be - by the time we do, we’ll probably be past smartphones -> so get good at reacting to change, and moving quickly - there will be many opportunities, but you will need to be learning and moving fast to take advantage of them.
  • 107. Thank you “Nulla facilisi. Phasellus mollis nibh eget tortor cursus congue. Vivamus velit tortor, sodales sed feugiat in, gravida eu Stewart Jonny Schneider turpis. Pellentesque quis neque at liberoGleadow jschneid@thoughtworks.com malesuada tincidunt a in risus. @jonnyschneider Maecenas.” sgleadow@thoughtworks.com @stewgleadow A. Person, 2011 ‘Name of referenced work’, Author/source/URL, date.