November 27, 2013
Putting Mobile First
@precedent#@lindzeiy
Lindsay HerbertHead of Digital
@precedent#@lindzeiy
@precedent#@lindzeiy
LONDON
EDINBURGH
CARDIFF
PERTH
MELBOURNE
HONG KONG
@precedent#@lindzeiy
135expertsStrategy & researchBranding & communicationsUser-centred designDevelopment & hostingDigital marketing
@precedent#@lindzeiy
Years24Experience
Quality
Stability
Loyalty
Results
@precedent#@lindzeiy
Who we work with
@precedent#@lindzeiy
@precedent#@lindzeiy
Mobile whitepaper series
1. Optimising Mobile
2. Targeting Mobile
3.
@precedent#@lindzeiy
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. Choosing the Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First
@precedent#@lindzeiy
A Changing World – What do your customers use?
Smart TV
Blackberry Windows
iOSAndroid
@precedent#@lindzeiy
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/
@precedent#@lindzeiy
A Changing World – Constantly evolving landscape
@precedent#@lindzeiy
A Changing World – Google I/O
@precedent @lindzeiy
A Changing World – Tablets
@precedent#@lindzeiy
A Changing World – The surge towards tablets
Glo
bal U
nit
s Ship
ped
(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
@precedent#@lindzeiy
A Changing World – Affordable tablets
@precedent#@lindzeiy
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. Choosing the Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First
@precedent#@lindzeiy
Take the time to understand your user’s behaviour and context.
What Are My Options?
@precedent#@lindzeiy
@precedent#@lindzeiy
1. Typically has short bursts of activity
2. Can be time poor or network restricted
3. Is usually goal driven
4. Loves using her phone - joy of use, personal item
5. Tells others of a good experience
6. Needs a simple uncomplicated experience
What Are My Options? Remember a Mobile User…
@precedent#@lindzeiy
Take the opportunity to innovate in design and function.
What Are My Options?
@precedent#@lindzeiy
@precedent#@lindzeiy
What Are My Options?
Don’t just follow the web
What Are My Options? 4(ish) choices
Mobi
Responsive
Apps
Native Hybrid
Feeds
@precedent#@lindzeiy
What Are My Options? – Roll It: App or Web?
@precedent#@lindzeiy
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. Choosing the Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First
@precedent#@lindzeiy
‘
’
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
@precedent#@lindzeiy
Design Considerations – Hit Areas
@precedent @lindzeiy
Design Considerations – Hit Areas
User interface control sizes:
Apple = 44px
Windows = 9mm
Nokia = between 7 and 8mm
The average finger pad is 10-14mm with the fingertip being 8-10mm
@precedent @lindzeiy
Design Considerations – Common Language
Use existing visual shortcuts for essential operations:
Hamburger icon = menu
Circular arrow = refresh
Magnifying glass = search
Cog = settings
Thumb = like
@precedent#@lindzeiy
Design Considerations - Reach
Right handLeft hand
Easy
Average
Hard
Easy
Average
Hard
@precedent#@lindzeiy
Design Considerations - Reach
Right hand
Easy
Average
Hard
Left hand
Easy
Average
HardHard: Things you don’t want to hit by mistake
Easy: Things that require the most scrolling
Average: Where the thumb naturally hovers
@precedent#@lindzeiy
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. Choosing the Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First
@precedent#@lindzeiy
Choosing the Optimum Approach - mobi
@precedent#@lindzeiy
Choosing 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 respond to screen size or orientation
@precedent#@lindzeiy
Choosing the Optimum Approach - mobi
Drawbacks:
– Can’t access device functions (e.g. internal storage)
– Offline functions limited to HTML5 caching
– User interface needs to be more simplistic
– Slower than a native or hybrid app
@precedent#@lindzeiy
Choosing the Optimum Approach - Responsive
@precedent#@lindzeiy
Choosing the Optimum Approach - Responsive
What it’s good for:
– You only have to write the content once
– Easy updates and maintenance
– Experience stays consistent for users across all devices and platforms
@precedent#@lindzeiy
Choosing the Optimum Approach - Responsive
Drawbacks:
– One-size fits all means you can’t cater as well for different user behaviours and contexts
– The same drawbacks for mobi also apply here
@precedent#@lindzeiy
‘
’
Choosing 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
@precedent#@lindzeiy
Choosing the Optimum Approach - Responsive
@precedent#@lindzeiy
Choosing the Optimum Approach – Hybrid Apps
@precedent#@lindzeiy
Choosing the Optimum Approach – Hybrid Apps
What it’s good for:
– Lets you develop once to many devices
– Can access some device features like internal storage
– Better offline use (thanks to internal storage access)
@precedent#@lindzeiy
Choosing the Optimum Approach – Hybrid Apps
Drawbacks:
– Not as a fast as a native app
– Can’t access all device functions
– Has to be downloaded from app stores
– Will not be a rich interface
@precedent#@lindzeiy
Choosing the Optimum Approach – Hybrid Apps
@precedent#@lindzeiy
Choosing the Optimum Approach – Native Apps
@precedent#@lindzeiy
Choosing the Optimum Approach – Native Apps
@precedent#@lindzeiy
What it’s good for:
– Fastest speeds
– Richest possible user interface
– Can access every feature of the device
– Best offline usage
Choosing the Optimum Approach – Native Apps
@precedent#@lindzeiy
Drawbacks:
– Needs to be developed for each device type
– Data is a key consideration for unconnected use
– Updates need to be rolled out for each type
– Developing for each device type quickly adds to costs
Choosing the Optimum Approach – Feeds
@precedent#@lindzeiy
Choosing the Optimum Approach – Feeds
@precedent#@lindzeiy
Device features
Offline functioning
Speed
User interface
Maintenance
Platform independence
Development cost
Discoverability
InstallationContent restrictions, approval process and fees
Native first, then Hybrid
Native first, then Hybrid
Native (learn from Facebook)
Native
Web or Hybrid
Web or Hybrid
Web or Hybrid
Web
Web
Web (learn from Playboy)
Choosing the Optimum Approach – Your priorities?
@precedent#@lindzeiy
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. Choosing the Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First
@precedent#@lindzeiy
Making It Happen – Mobile First approach
@precedent#@lindzeiy
Making It Happen – Adapting content
@precedent#@lindzeiy
@precedent#@lindzeiy
Making It Happen – Adapting content
Don’t just follow the web
Making It Happen – UI Flow
@precedent#@lindzeiy
@precedent#@lindzeiy
‘
’
Making It Happen – Resource and Process
The more channels I run, the more resource I’ll need, right?
@precedent#@lindzeiy
Making It Happen – Resource and Process
@precedent @lindzeiy
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. Choosing the Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First
@precedent#@lindzeiy
Considering The Future – Remember it’s a Phone!
@precedent#@lindzeiy
@precedent#@lindzeiy
Considering The Future – PrecEvents Out of the Box!
@precedent#@lindzeiy
Considering The Future – PrecEvents Out of the Box!
@precedent#@lindzeiy
Considering The Future – Customer journeys with Sitecore
www.sitecore.net
Considering The Future – Sitecore engagement platform
www.sitecore.net
– 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 – Trends for 2014
@precedent#@lindzeiy
Don’t disappoint
Don’t be afraid to innovate
Don’t delay in providing a solution
(think-apply-review-refine)
Considering The Future – Finally…
@precedent#@lindzeiy
Think big.
Start small.
Act Quickly.
Smart thinking wins…
Considering The Future – Finally…
@precedent#@lindzeiy
@precedent#@lindzeiy
Follow Precedent on LinkedIn to find out more about our seminars and ideas, and add me to keep in touch.
Follow @Precedentcomms on Twitter to see what we think is interesting in digital, and follow me for updates from my blog.
@lindzeiy on Twitter