Delivering great multi-deviced2zmdbbm9feqrf.cloudfront.net/2016/usa/pdf/BRKSPV-1501.pdf ·...

Delivering great multi-device video experiences from the cloud4 key design considerations

Paul Harding, UX Specialist, Technical Leader

BRKSPV-1501

• Intro – Now is the time for cloud video to shine

• Presentation – UX ubiquity and complexityLaunching on phones, tablets, games consoles, and streaming devices

• Packaging – automation & the app stores

• Protection – DRM decisions

• Platform – the cloud & what you can leverage

• Outro – Summary & future predictions

Agenda

© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public

CLOUD VIDEO

There’s never been a better time…

to shine!

for


Infinite Video

BRKSPV-1501 5

Part 1: Presentation

UX Ubiquity and Complexity


Which devices?


Fragmentation

• XAML + C#

• JS/HTML5/CSS3

• Java

• BrightScript

• Swift, Objective-C

• TVML + TVJS

BRKSPV-1501 8

Plan for great UX


• Beware Android device fragmentation – here be dragons

• More effort than simply supporting mobile, phablet & tablet

• CSS responsive designs are difficult… don’t target SmartTVbrowsers

Flexible / Responsive Layouts

BRKSPV-1501 10


Android Ex’ples

Nexus 9

(click image to play video)

BRKSPV-1501 11

BRKSPV-1501 11


Android Ex’ples

Note 5

(click imageto play video)

BRKSPV-1501 12


Android Ex’ples

Nexus 5


BRKSPV-1501 13


Android Examples

Core Prime


BRKSPV-1501 14


Mobile Orientation

Landscape (horizontal)

• Viewing long form video content

• In-home / focused browsing

Portrait (vertical)

• Viewing shorts

• On-the-go / multi-tasking browsing

What are your use-cases?

What form is your video content? http://alistapart.com/article/how-we-hold-our-gadgets

BRKSPV-1501 15

http://alistapart.com/article/how-we-hold-our-gadgets


Platform Guidelines vs Custom Layouts

Platform approach

+ Faster to market, use templates

+ Low learning curve for users

- Limited branding options

- You don’t stand out in the crowd

Custom layouts & designs

- Slower to design and develop

- Higher learning curve for users

+ Unlimited branding options

+ Differentiated UX

- Moving away from the brand experience the consumer bought into

“Re-invent the wheel for a reason, not just because you can!” - me

BRKSPV-1501 16

Lic

ense f

ee p

ayable

?h

ttp

://w

ww

.go

ogle

.co

m/p

ate

nts

/US

5585

866

TV Guide /Grid

(click imageto play video)

http://www.google.com/patents/US5585866


Now Next Later

BRKSPV-1501 18


Constraints

• Screen sizes, form factor

• Missing/long metadata

• Translated string lengths

• User input/interaction type

• Accessibility requirements

• Network restrictions

• Memory/disk size

“Design depends largely on constraints”- Charles Eames

BRKSPV-1501 19


Constraints

Metadata rich


Constraints

Metadata sparse

WAR STORIES

Tales from the trenches


Best Practices

• User centered design. Consider your users, test early and often, iterate.

• UX architect role

• Usability testing

• Online tools:

• UserTesting.comhttps://www.usertesting.com/

• UsabilityHub.comhttps://usabilityhub.com/

• + lots more

BRKSPV-1501 23

https://www.usertesting.com/

https://usabilityhub.com/


TV primary navigationPrototype 1

BRKSPV-1501 24



BRKSPV-1501 25



BRKSPV-1501 26


Casting: Google Chromecast, Apple AirPlay …consumers expect this!

Analytics & measurement (lots of options)

• Track video basics

• QoE metrics

• Usability data

App Integrations

BRKSPV-1501 27

Engineer for great UX

“Truth doesn't matter as much as perception” - @UXLondon


Perception is Everything

Start buffering video before the

user hits the play button

BRKSPV-1501 29


Just-in-time pre-fetch of images inlong lists

Perception is Everything

BRKSPV-1501 30


Pool and recycle widgetsto save memory

(click image

to play video)

BRKSPV-1501 31


Don’t be a jerk

Graceful degradation:

Having no animationis better than jerky animation

Used with permission.

BRKSPV-1501 32


RemainResponsive

Leveragethe GPU.

Use carefulmulti-threading.

(click image to

play video)

BRKSPV-1501 33


Smart Caching

• Cache data, cache image, but be smart about cache timeouts

• Different disk and memory caching strategies

• You cannot cache the same on every device

BRKSPV-1501 34


Smart Caching

(click image to play video)BRKSPV-1501 35


Respect Users’ Battery

Radio is expensive (w.r.t. time, battery, data plan).

For best practices, check out:

http://www.ericsson.com/res/docs/2014/smartphone-app-dev-guide.pdf

http://developer.att.com/static-assets/documents/library/best-practices-3g-4g-app-development.pdf

BRKSPV-1501 36

http://www.ericsson.com/res/docs/2014/smartphone-app-dev-guide.pdf

http://developer.att.com/static-assets/documents/library/best-practices-3g-4g-app-development.pdf


Respect Users’ Data Plan

• Preprocess your images on the server… multiple sizes, optimized

• Consider Google’s WebP image fileformat for Android and iOS:

• 30% filesize reduction over JPG/PNG

• Lossy or lossless

BRKSPV-1501 37


Details Matter

• Showing the status bar

• Auto-retry

• Tell the user how they can resolve the problem

“Development Is Design and vice versa” - Brad Frost

BRKSPV-1501 38


A Word on HandlingErrors

• Error handling that works for users

• and that works for debugging

BRKSPV-1501 39

WAR STORIES


Part 2: Packaging

Automation & the App Stores


2. Packaging

BRKSPV-1501 42


What’s the impact?

• Time to release new features

• Software quality

• Stakeholder engagement

BRKSPV-1501 43


Not all App Stores are created equal

0 5 10 15 20 25 30 35

Apple iOS

Apple TV

Amazon Fire TV

Amazon Kindle Fire

Android TV

Android phone/tab

Roku

Samsung TV

MS XBox

Maximum time from submission to publication in days*(*usually. This is not a scientific study!)

BRKSPV-1501 44


Each AppStore is inconsistent

App review

process

rand(rigor)

rand(timing)

rand(adherence)

BRKSPV-1501 45


Build pipeline – Why bother?

© Copyright Rick Harris flickr.com/photos/rickharris/430890004

Continuous…

• Integration

• Building

• Testing

• Feedback

Automate human error out of the picture.

BRKSPV-1501 46


Build pipeline (backend)

Checkout

Code &

Build

Unit

Testing Quality

Control

Package

&

Archiving

Fetch

Latest

Build

Deploy to

Production

Acceptance

Testing

Deploy to

Pre-

Production

Integration

Testing

Deploy to

Test

Environment

Code

Commit

BRKSPV-1501 47


Build pipeline frontend additions

BRKSPV-1501 48

Part 3: Protection

DRM Decisions


What’s the impact?• Features your app can support

• Video encoding options

• Device reach

BRKSPV-1501 50


DRM Options

BRKSPV-1501 51


Cisco VideoGuard Everywhere

VGE Multi-DRM

Framework

Traditional

DRMKeys

License

Device Integrity

Registration

Device Management

Concurrency

Sync & Go

Location and Proximity

Event-Based

DTCP-IP support

Home Network

Application Integrity

See BRKSPV-2400 for more info

BRKSPV-1501 52

WAR STORIES



Eyes wide open

Considerations…

• Time & training

• Royalties payable

• Player support

• Impact on user experience

• Content rights restrictions

BRKSPV-1501 54

Part 4: Platform

Cloud... and what you can leverage


What’s the impact?

• Quality of service IS your user experience

• Uptime & reliability

• API’s are critical

• Global reach

BRKSPV-1501 56


Example from BBC iPlayer

• Each channel needs 30Mb/s for HD or 10Mb/s for SD

• 2.9 TB/day HD + 2.3 TB/day SD = 5.2TB/day generated

• This is duplicated 4 times for redundancy = 21TB

21TB per daywritten to S3

Cloud Elastic Storage

BRKSPV-1501 57


Metadata vs Video vs Control

APIs

on

μ

services

JSON VOD catalog node.

JSON asset details.

ABR chunks.

Entitlements.

Analytics.

BRKSPV-1501 58

See BRKSPV-2200 for more info


Data+APIsPower GreatExperiences






API Design

• The API ‘thickness’ spectrum:

Data only Data + structure

light responses heavy responsespresentation biz logic in clients presentation biz logic on servergeneric for all UX bespoke per UX

• Making use of HATEOAS; a hypermedia-driven API

BRKSPV-1501 62


Feature Flags

{

“roku_app_

features”=

{

…

}

}

BRKSPV-1501 63


Feature Flags

{

“roku_app_

features”=

{

…

}

}

BRKSPV-1501 64


Feature Flags

{

“iOS_app_

features”

=

{

…

}

}

BRKSPV-1501 65


Feature Flags

{

“Xbox_app_

features”=

{

…

}

}

BRKSPV-1501 66


Video Plane Flexibility

QueueIngest QueueTrans-code

PushPackage CDN

UPLINK control UI

Public cloud

BRKSPV-1501 67


Video Plane Flexibility

QueueIngest QueueTrans-code

PushPackage CDN

UPLINK control UI

Private or public cloud

Cisco V2P

See PSOSPV-1102 for more info on V2P and BRKSPV-2160 for more info on CDN.

BRKSPV-1501 68

• Presentation – much to consider, but solid ‘best practice’ to draw from

• Packaging – the automation + manual story

• Protection – no ‘one size fits all’

• Platform – cloud advances make it all possible

Summary: Delivering great multi-device video experiences from the cloud

The Future


https://www.flickr.com/photos/lukew/6171377827 / Luke Wroblewski

• No more apps!

• UX consolidation…“What performance baseline?”

Predictions

BRKSPV-1501 71

https://www.flickr.com/photos/lukew/6171377827 /


Predictions• App stores that support automation

• A VR invasion!

BRKSPV-1501 72

So… go deliver great multi-device video experiences from the cloud!

Thank you


Complete Your Online Session Evaluation

Don’t forget: Cisco Live sessions will be available for viewing on-demand after the event at CiscoLive.com/Online

• Give us your feedback to be entered into a Daily Survey Drawing. A daily winner will receive a $750 Amazon gift card.

• Complete your session surveys through the Cisco Live mobile app or from the Session Catalog on CiscoLive.com/us.

BRKSPV-1501 75

Complete Your Online Session Evaluation

CiscoLive.com/Online

http://ciscolive.com/Online

http://ciscolive.com/Online

http://ciscolive.com/us

http://ciscolive.com/us


Continue Your Education

• Demos in the Cisco campus

• Walk-in Self-Paced Labs

• Lunch & Learn

• Meet the Engineer 1:1 meetings

• Related sessions

BRKSPV-1501 76

Please join us for the Service Provider Innovation Talk featuring:

Yvette Kanouff | Senior Vice President and General Manager, SP Business

Joe Cozzolino | Senior Vice President, Cisco Services

Thursday, July 14th, 2016

In the Oceanside A room

What to expect from this innovation talk

• Insights on market trends and forecasts

• Preview of key technologies and capabilities

• Innovative demonstrations of the latest and greatest products

• Better understanding of how Cisco can help you succeed

Register to attend the session live now or

watch the broadcast on cisco.com


Acknowledgements

• Business Insider: "Video Game Consoles Are Still The Most Popular Streaming Devices For TVs” http://www.businessinsider.com/video-game-consoles-are-still-the-most-popular-streaming-devices-for-tvs-2014-6

• Batman graffiti picture used with kind permission of Daniel Picard Photographyhttp://www.danielpicard.com/

• Stats from “Cloud-based microservices powering BBC iPlayer” courtesy of Stephen Godwin, Senior Tech Architect, BBC / QCon London 2016.

• Thanks to the Cisco family, without whom this presentation would have been less than it is:

• Martin Freckleton, Reid Butler, Maxime Delavergne, Jeff Goldberg, Jeff Sprague, Jason Bedard, Randeep Cheema, Steve Wadsworth, Thomas Dugue, Florent Ingargiola, DaniComnea, Matt Collum, Bruce Martins, Tony Leigh, Jon Chesney, and all team 1MS

BRKSPV-1501 78

http://www.businessinsider.com/video-game-consoles-are-still-the-most-popular-streaming-devices-for-tvs-2014-6

http://www.danielpicard.com/

Date post:	29-Jul-2018
Category:	Documents
Upload:	vanhanh
View:	218 times
Download:	0 times

Delivering great multi-deviced2zmdbbm9feqrf.cloudfront.net/2016/usa/pdf/BRKSPV-1501.pdf ·...

Documents