Transcript
13th Aug, 2013Putting Mobile First
@precedent##PrecSem
John CampbellHead of Mobile
Mark BaillieCreative Director
Mobile whitepaper series
1. Optimising Mobile
2. Targeting Mobile
3
1. A Changing World 2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen 6. Considering The Future
Putting Mobile First
A Changing World
A Changing World – Google I/O
A Changing World - Stats…
2013
Asia Pacific Europe North America Middle East and Africa Latin America
A Changing World – Users of Mobile by Region 2012 - 2017
2012
Source: Portio Research
2017
Aus-tralia
Brazil China India Italy Russia South Korea
Turkey UK US0%
10%20%30%40%50%60%70%80%90%
100%SMS Web Browsing Email Social Networking Apps Streaming Music Instant Messaging Video/Mobile TV
A Changing World – Activities performed by Smartphone Users at Least Once a Month
Source: Nielsen, (February 2013) via: mobiThinking
A Changing World – The Surge Towards TabletGl
obal
Uni
ts S
hipp
ed (M
Ms)
Global PC (Desktop / Notebook) and Tablet Shipments by Quarter (Q1: 1995 - Q1: 2013)
Source: Katy Huberty, Ehud Gelblum, Morgan Stanley Research. Gartner. Data as of 4/13. Note: Notebook PCs include Net books
A Changing World – What Do Your Customers Use?
Smart TV
Blackberry Windows
iOSAndroid
A Changing World – Tablets
A Changing World – Tablets
A Changing World – Tablets
A Changing World – Mobile Operating System by Region
EuropeAustralia
June 2012 to May 2013
Asia
iOS Android SymbianOS
Source: Stat Counter – Global Stat Counter - http://gs.statcounter.com/
1. A Changing World 2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen 6. Considering The Future
Putting Mobile First
Take the time to understand your user’s behaviour and context.
What Are My Options?
1. Typically has short bursts of activity2. Often is time restricted3. Is goal driven4. Loves using his phone - joy of use 5. Tells others of a good experience6. Needs a simple uncomplicated experience
What Are My Options? – Remember a Mobile User…
Take the opportunity to innovate in design and function.
What Are My Options?
What Are My Options? – Mathew Algie - Ethical Coffee Campaign
What Are My Options?
Mobi
Responsive
Hybrid Apps
Native Framework Web App
Feed Aggregators
What Are My Options? – Roll It - App or Web?
1. A Changing World 2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen 6. Considering The Future
Putting Mobile First
‘
’
Design Considerations
Effective mobile designs not only account for these one thumb/one eyeball experiences but aim to optimize for them as well.
Luke Wroblewski – Mobile First
Design Considerations – Common Language
Design Considerations – Hit Areas
RecognitionPutting a picture to either a person or a place:
‘Meet Bob the new council member for your area’ Or ‘Drop by the new office on Flinders Lane’
DescriptionWhere a specific item is better described visually:
‘We will be rolling out new wheely bins to replace our old ones, they will look like this:’ Or‘Our new Series 125fx is the fastest widget on the market and comes in blue!’
Design Considerations - Images
Design Considerations – Responsive layouts
Design Considerations - Reach
Right hand
Easy
Average
Hard
Left hand
Easy
Average
Hard
1. A Changing World 2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen 6. Considering The Future
Putting Mobile First
The Optimum Approach - mobi
The Optimum Approach - mobi
The Optimum Approach - mobi
What it’s good for:• Providing focus and clear
structure• Deploying without impact
on main website• Delivering quickly• Wide reach working via
browser • Can be designed to
understand and respond to screen size or orientation
Considerations: • Careful consideration to
content impacting performance.
• Keep the design simply effective
• You need to design for tablet and phone to maximise experience.
• Links to m. or mobi domain name
The Optimum Approach - mobi
The Optimum Approach - Responsive
The Optimum Approach - Responsive
The Optimum Approach - Responsive
The Optimum Approach - Responsive
What it’s good for:• Reflows the same content
from the website• Content is presented on all
devices and screen sizes.• Architecture of the site
remaining the same• Single update of content
Considerations: • Cannot apply a different
tone of voice for mobile usage.
• Experience not built around the user or context
• Requires to think in % and not fixed width
• Supported screen size has to be chosen
The Optimum Approach - Responsive
‘
’
The Optimum Approach - Responsive
It's cheap but degrading to reuse content and design across diverging media forms like print vs. online or desktop vs. mobile. Superior UX requires tight platform integration. Jakob Neilsen – 21st May
2012
The Optimum Approach - Responsive
The Optimum Approach – Hybrid Apps
Are apps going out of fashion?
The Optimum Approach – What do you think?
Yes No
The Optimum Approach – What do you think?
The Optimum Approach - Frameworks
What it’s good for:• Lets you develop once and
deploy many• Cross device support
widening reach• A balance between rich
design and reach• Simplifying the interface
whilst enabling functionality
• Deployment via app stores
Considerations: • Will not be a rich interface • Restricted in functions • Balance between features
and reach• Typically uses HTML5 and
JavaScript.
The Optimum Approach - Frameworks
The Optimum Approach – Native Apps
The Optimum Approach – Native Apps
The Optimum Approach – Native Apps
The Optimum Approach – Native Apps
The Optimum Approach – iButterfly
Leeds College of Music
What it’s good for:• Provides a rich interface• Uses the full phone
feature set• Designed around the user • Optimal performance• Provides joy of use• Can differentiate your
brand
Considerations: • Needs to be developed for
each device type• Designs typically can be
shared• Data is a key consideration
for unconnected use
The Optimum Approach - Native
The Optimum Approach
The Optimum Approach - Feeds
1. A Changing World 2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen 6. Considering The Future
Putting Mobile First
From the ground up:• Custom approaches• Considered context • Specific content
From pre-existing:• Desktop applied to mobile• Stress / break points• Reworked content
Making It Happen - Content
Making It Happen – Content: Mobile First
Making It Happen – Content: Adapting content
Don’t just follow the webMove from a 4 to 6 step process
Making It Happen – UI Flow
User journey mapping
NARRATING THE STORIES IS CRUCIAL TO GATHERING SUPPORT FOR BIGGER CHANGE
Creating engaging online experiences for ACI ‘s customers, James Downes, UX Director, Precedent 2012
Digital glass
What happens the morning after?
So many ways to enjoy
Advice from the community
The barman’s guide in your pocket
Virtual cheers
Digital tastingGiraffes on the loose
Match my mood to a drink
Cross link blogs
Get better advocates
Cooking with whisky What would Dr Bill say?
The Sixteen…
A moment of calm
Whisky doesn’t equal drunk
Augmented drink finder
Wearable tech
Tweet my glass!
How do I get started?
Acoustic zoning
Will it blend?
The Labrador effect
A slice of class
Mapping the way forward
‘
’
Making It Happen - Images
What about performance? Won’t a lot of images slow down the mobile experience?
Making It Happen – Images
‘
’
Making It Happen – Data Integration
Users are sympathetic to poor network coverage and adjust their expectations when WIFI isn’t available.
‘
’
Making It Happen – Data Integration
Users are NOT sympathetic to poor network coverage and adjust their expectations when WIFI isn’t available.
1. Ensure your existing web API does not bundle unnecessary data with requests for data
2. Expand your API to deal with short, quick requests and hook it into your CMS solution as soon as possible
3. FEO is vital. Use mobile optimisation and analytics tools to see where your delivery speeds can be improved
4. Track user interaction in your app using an analytics tool
Making It Happen – Data Integration – 4 Key points
Making It Happen – Data Integration
‘
’
Making It Happen – Resource and Process
The more channels I run, the more resource I’ll need, right?
Making It Happen – Resource and Process
Making It Happen – Resource and Process
1. A Changing World 2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen 6. Considering The Future
Putting Mobile First
Considering the Future – Lifestyle Health Bands
Considering The Future
Considering The Future – Remember it’s a Phone!
‘
’
Considering The Future
If you want the Internet to be everywhere it has to be visible nowhere. It has to be unseen, unnoticed, undiscussed.
David St. Charles - Integrated Systems Inc. (Wired 1996)
SpaceBook is a speech-driven, hands-free, eyes-free device for pedestrian navigation and exploration.
Considering The Future - PrecedentLabs
Considering The Future – PrecEvents – Out of the Box!
Considering The Future – New mobile platforms in 2013
Considering The Future – New mobile platforms in 2013
• Connected devices• Mobile payments and e-wallet• Mobile advancement - wearable devices (NFC)• Lounge computing - socially integrated TV• Move towards social business• Smart content with personalisation & aggregation• Self service applications
Considering The Future - Our view of the digital trends for 2013 ‘14
Don’t disappointDon’t be afraid to innovateDon’t delay in providing a solution( think-apply-review-refine )
Considering The Future – Finally…
Think big.Start small.Act Quickly.Smart thinking wins…
Considering The Future – Finally…
120expertsStrategy & researchBranding & communicationsUser-centred designDevelopment & hostingDigital marketing
Years24Experience QualityStabilityLoyalty Results
LONDON
EDINBURGH
CARDIFF
PERTH
MELBOURNE
HONG KONG
Who we work with
Find our Precedent group on LinkedIn for a chance to find out more about our seminars, network, share ideas and quiz the Precedent team on seminar issues and more!
and follow us on twitter.com/Precedentcommsfor Precedent news, seminar info and general observations.
top related