10. Putting Mobile First
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
@precedent#@lindzeiy
11. A Changing World – What do your customers use?
Windows
Blackberry
Android
iOS
Smart TV
@precedent#@lindzeiy
12. A Changing World – Mobile operating system by region
June 2012 to May 2013
Australia
Asia
iOS
Europe
Android
SymbianOS
Other
Source: Stat Counter – Global Stat Counter - http://gs.statcounter.com/
@precedent#@lindzeiy
13. A Changing World – Constantly evolving landscape
@precedent#@lindzeiy
16. A Changing World – The surge towards tablets
Global Units Shipped (MMs)
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.
@precedent#@lindzeiy
Note: Notebook PCs include Net books
18. Putting Mobile First
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
@precedent#@lindzeiy
19. What Are My Options?
Take the time to understand
your user’s behaviour and context.
@precedent#@lindzeiy
21. What Are My Options? Remember a Mobile User…
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
@precedent#@lindzeiy
22. What Are My Options?
Take the opportunity to innovate
in design and function.
@precedent#@lindzeiy
23. What Are My Options?
Don’t just follow the web
@precedent#@lindzeiy
24. What Are My Options? 4(ish) choices
Mobi
Responsive
Feeds
Apps
Native
@precedent#@lindzeiy
Hybrid
25. What Are My Options? – Roll It: App or Web?
@precedent#@lindzeiy
26. Putting Mobile First
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
@precedent#@lindzeiy
27. 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
29. 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
30. 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
31. Design Considerations - Reach
Hard
Easy
Average
Left hand
@precedent#@lindzeiy
Hard
Easy
Average
Right hand
32. Design Considerations - Reach
Hard: Things you don’t
want to hit by mistake
Hard
Easy
Hard
Easy
Easy: Things that require
the most scrolling
Average: Where the
thumb naturally hovers
Average
Left hand
@precedent#@lindzeiy
Average
Right hand
33. Putting Mobile First
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
@precedent#@lindzeiy
35. 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
36. 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
38. 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
39. 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
40. 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
43. 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
44. 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
47. Choosing the Optimum Approach – Native Apps
What it’s good for:
– Fastest speeds
– Richest possible user interface
– Can access every feature of the
device
– Best offline usage
@precedent#@lindzeiy
48. Choosing the Optimum Approach – Native Apps
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
@precedent#@lindzeiy
51. Choosing the Optimum Approach – Your priorities?
Device features
Native first, then Hybrid
Offline functioning
Native first, then Hybrid
Speed
Native (learn from Facebook)
User interface
Native
Maintenance
Web or Hybrid
Platform independence
Web or Hybrid
Development cost
Web or Hybrid
Discoverability
Web
Installation
Web
Content restrictions, approval
process and fees
Web (learn from Playboy)
@precedent#@lindzeiy
52. Putting Mobile First
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
@precedent#@lindzeiy
60. Putting Mobile First
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
@precedent#@lindzeiy
67. Considering The Future – Trends for 2014
–
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
@precedent#@lindzeiy
68. Considering The Future – Finally…
Don’t disappoint
Don’t be afraid to innovate
Don’t delay in providing a solution
(think-apply-review-refine)
@precedent#@lindzeiy
71. 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
Notas do Editor
Mobile OS by region statsProfile your audience – look at key parameters, for example operating systemsConsider global regions differently (iOSin Australia compared with Asia)
What’s changed… chat through the key events in the past yearPick a trend … Siri & free messaging 9challenge to BBerry
Google Glass. Seems daft now but…
Diagram: Mary Meeker at the Wall Street Journal D11 Conference May 29 2013The uptake of tablets has been rocket like surpassing desktop and notebook PC’s less than 3 years after they were first introducedPredicted sales of tablets will surge from 72.7 million in 2011 to 383.3 million in 2017
Average person looks at their phone 150 times a day most of these are very brief interactionsDesign needs to accommodate for these very brief interactions
People interact with touch-based user interfaces with their fingers. So user interface controls have to be big enough to capture fingertip actions without frustrating users with erroneous actions and tiny targets. Apple - 44pxWindows – 9mmNokia – between 7 and 8mmThe average finger pad is 10-14mm with the fingertip being 8-10mmWhat does this mean? Don’t make tiny links and tiny spaces…
Use existing visual shortcuts for essential operations. These are already emerging as standards so don’t reinvent the wheel.Hamburger icon = menuCircular arrow = refreshMagnifying glass = searchCog = settingsThumb = like
Screen design needs to take into consideration the device it will inhabit.These diagrams illustrate the average user reachThings that you don’t want a user to hit by mistake need to sit up in the orange areaWith the longest reach area running top to bottom we can expect most scrolling will occur in these areas (and therefore the thumb will hover there)
Screen design needs to take into consideration the device it will inhabit.These diagrams illustrate the average user reachThings that you don’t want a user to hit by mistake need to sit up in the orange areaWith the longest reach area running top to bottom we can expect most scrolling will occur in these areas (and therefore the thumb will hover there)
Mobile browser basedStandard mobiWeb app mobiUsually have their own IACost effectiveLightweightWide reach
Mobile browser basedStandard mobiWeb app mobiUsually have their own IACost effectiveLightweightWide reach
Mobile browser basedStandard mobiWeb app mobiUsually have their own IACost effectiveLightweightWide reach
One website, that flows across multiple devicesBrowser basedSame content delivered to all usersMonashTacticalDigital business transformation
One website, that flows across multiple devicesBrowser basedSame content delivered to all usersMonashTacticalDigital business transformation
One website, that flows across multiple devicesBrowser basedSame content delivered to all usersMonashTacticalDigital business transformation
My issue with responsive design is when it becomes lowest common denominator design, 'working' on all screens but not excelling on any. – Roan Lavery (Free Agent)
One website, that flows across multiple devicesBrowser basedSame content delivered to all users
One website, that flows across multiple devicesBrowser basedSame content delivered to all users
One website, that flows across multiple devicesBrowser basedSame content delivered to all users
Examples of some framework providers
Mobile browser basedStandard mobiWeb app mobi
Mobile browser basedStandard mobiWeb app mobi
Mobile browser basedStandard mobiWeb app mobi
Use on the go
Use on the go
Device features. Although web apps can take advantage of some features, native apps (and the native components of the hybrid apps) have access to the full paraphernalia of device-specific features, including GPS, camera, gestures, and notifications.Offline functioning. A native app is best if your app must work when there is no connectivity. In-browser caching is available in HTML5, but it’s still more limited than what you can get when you go native.Discoverability. Web apps win the prize on discoverability. Content is a lot more discoverable on the web than in an app: When people have a question or an information need, they go to a search engine, type in their query, and choose a page from the search results. They do not go to the app store, search for an app, download it, and then try to find their answer within the app. Although there are app aficionados who may fish for apps in app stores, most users don’t like installing and maintaining apps (and also wasting space on their device), and will install an app only if they expect to use it often.Speed. Native apps win the speed competition. In 2012 Mark Zuckerberg declared that Facebook’s biggest mistake had been betting on the mobile web and not going native. Up to that point, the Facebook app had been a hybrid app with an HTML core; in 2012 it was replaced with a truly native app.Installation. Installing a native or hybrid app is a hassle for users: They need to be really motivated to justify the effort. “Installing” a web app involves creating a bookmark on the home screen; this process, while arguably simpler than downloading a new app from an app store, is less familiar to users, as people don’t use bookmarks that much on mobile.Maintenance. Maintaining a native app can be complicated not only for users, but also for developers (especially if they have to deal with multiple versions of the same information on different platforms): Changes have to be packaged in a new version and placed in the app store. On the other hand, maintaining a web app or a hybrid app is as simple as maintaining a web page, and it can be done as often or as frequently as needed.Platform independence. While different browsers may support different versions of HTML5, if platform independence is important, you definitely have a better chance of achieving it with web apps and hybrid apps than with native apps. As discussed before, at least parts of the code can be reused when creating hybrid or web apps.Content restrictions, approval process, and fees. Dealing with a third party that imposes rules on your content and design can be taxing both in terms of time and money. Native and hybrid apps must pass approval processes and content restrictions imposed by app stores, whereas the web is free for all. Not surprisingly, the first web apps came from publications such as Playboy, who wanted to escape Apple’s prudish content censure. And buying a subscription within an iOS app means that 30% of that subscription cost goes to Apple, a big dent in the publishers’ budget.Development cost. It’s arguably cheaper to develop hybrid and web apps, as these require skills that build up on previous experience with the web. NN/g clients often find that going fully native is a lot more expensive, as it requires more specialized talent. But, on the other hand, HTML5 is fairly new, and good knowledge of it, as well as a good understanding of developing for the mobile web and hybrid apps are also fairly advanced skills.User Interface. Last but not least, if one of your priorities is providing a user experience that is consistent with the operating system and with the majority of the other apps available on that platform, then native apps are the way to go. That doesn’t mean that you cannot provide a good user experience with a web app or a hybrid app–it just means that the graphics and the visuals will not be exactly the same as those with which users may be already accustomed.
There are two approachesEither is fine
2. Is probably the most comfortable fit given you already have Corporate website; Microsite ; Campaign site is fine
TescoBank UI flow
Digital bloat
Digital bloatAvoid digital bloat by monitoring the effectiveness of your channels and adjust your resourcing accordingly
Chinese taxi appsSay your current location and where you are going and a voice message is sent to all nearby available taxisView the taxi's location in realtime and then push to talk directly to the driver to co-ordinate pickup
BlipparJawbonePebbleSmart TVVuzixPingit from BarclaysbankSquare (Credit card reader)
ORGANISATIONS MUST SEEK OUT TECHNOLOGIES THAT PROVIDE A SINGLE CUSTOMER VIEW, AN INTEGRATED EXPERIENCE AND BUSINESS INTELLIGENCE
ORGANISATIONS MUST SEEK OUT TECHNOLOGIES THAT PROVIDE A SINGLE CUSTOMER VIEW, AN INTEGRATED EXPERIENCE AND BUSINESS INTELLIGENCE