10-Feet + Beyond: Designing Connected Entertainment

10-FEET + BEYOND

designing connected entertainment

Hi. I’m Mark

@thewolfe @wolfedesign

THE CONNECTED ECOSYSTEM

HISTORY OF CONNECTED

MEDIA

DESIGNING THE 10-FOOT

EXPERIENCE

EMERGING TECHNOLOGY

@thewolfe


MEDIA


EXPERIENCE

EMERGING TECHNOLOGY


@thewolfe

6.4 billionconnected things in use in 2016

http://www.gartner.com/newsroom/id/3165317

30%

@thewolfe

http://www.gartner.com/newsroom/id/3165317

Home Automation

Connected Vehicles

Energy Management

Ambient Assisted LivingConnected Health

Connected Entertainment

@thewolfe

The connected ecosystem allows users control of content across digital and physical locations, and across multiple devices.

@thewolfe

Over 40% of all U.S. online users start an activity on one device, and finish on another.

https://www.clickz.com/switching-between-devices-normal-for-40-of-u-s-web-users-facebook-study/32730/

@thewolfe

@thewolfe

@thewolfe

@thewolfe

@thewolfe

@thewolfe

@thewolfe

@thewolfe

“The best interface is the one within reach” - - Cameron Moll

@thewolfe

@thewolfe

@thewolfe

@thewolfe

THREE EXPERIENCES OF THE CONNECTED ECOSYSTEM

CONSISTENT

EXTENDING

COMPLEMENTARY

@thewolfe

CONSISTENT

SAME/SIMILAR CONTENT ON ALL DEVICES WITH MODIFICATIONS FOR SCREEN SIZE + CONTEXT

@thewolfe

@thewolfe

== =

EXTENDING

CONTENT STARTS ON ONE DEVICE AND CONTINUES ON ANOTHER

@thewolfe

@thewolfe

@thewolfe

COMPLEMENTARY

DEVICES ASSIST EACH OTHER IN FUNCTIONALITY FOR COLLABORATION AND CONTROL

@thewolfe

@thewolfe


MEDIA


EXPERIENCE

EMERGING TECHNOLOGY


@thewolfe

3 out of 5 households have a broadband enabled

television

@thewolfe

21 Year old, Philo Farnsworth invents the electric television In powerless, his family cabin in Utah.

19271850–1925

Inventors work create mechanical moving images.

John Baird + Spooky Bill

1948

Cable television rolls out simultaneously through a number of rural states.

1953

All-electronic Color television is introduced in the U.S. This forced the creation of NTSC standards.

1962

Telstar, the first Satellite Broadcast throughout the world.

1976

First VCR released for home use (Betamax).

1981

HDTV developed, in Japan

1994

First network show broadcast over the internet - ABC World News Now.

1998-1999

• DVD Commercially Available. • Netflix is launched • HDTV widely sold in US • TiVo + ReplayTV launch first DVR

2001

Sony’s Playstation 2, and Microsoft reveals Xbox. The first Gaming console to play DVDs, starting the war for home theater hub.

2007–2008

• Apple unveils its Apple TV • Netflix introduced streaming • Hulu launches

2013–2014

First noticeable drop in Cable subscribers, with 8% cutting the cord, and 45% reduction in service.

OTT video subscriptions are set to increase from $9b in 2014 to $19b in 2019.

@thewolfe


MEDIA


EXPERIENCE

EMERGING TECHNOLOGY


@thewolfe

220 millionstreaming devices sold in 2015

@thewolfe

10ft (3meters)

User Interface

@thewolfe

SMART TV BLU-RAY STREAMING DEVICES

GAMING CONSOLES

@thewolfe

8%

20%

20%22%

30%Roku

Amazon Fire TV

Google Chromecast

Apple TV

Others

http://www.parksassociates.com/blog/article/pr-05172016

2015 STREAMING DEVICE PURCHASING

@thewolfe

http://www.parksassociates.com/blog/article/pr-05172016

CUMULATIVE DEVICE PURCHASING

http://www.telecompaper.com/news/media-streaming-device-sales-up-32-to-42-mln-in-2015--1132434

Fire TV

Roku

Chromecast

Apple

0 10 20 30 40

@thewolfe

http://www.statista.com/statistics/276768/global-unit-sales-of-video-game-consoles/

0

12.5

25

37.5

50

2008 2009 2010 2011 2012 2013 2014 2015

Sony Playstation 3

Xbox 360

Nintendo Wii

Xbox One

Sony Playstation 4

GAME CONSOLE SALES

@thewolfe

KEEP IT SIMPLE.

MAKE IT LIGHTWEIGHT.

KEEP EXPECTATIONS CLEAR.

MAKE EXPERIENCES IMMERSIVE.

@thewolfe

KEEP IT SIMPLE.




@thewolfe

KEEP IT SIMPLE.




@thewolfe

@thewolfe

KEEP IT SIMPLE.




@thewolfe

INFORMATION DENSITY

Android TV Design Guidelines

@thewolfe

1010%

10

10%

1920x1080

@thewolfe

@thewolfe

@thewolfe

@thewolfe

DON’T MAKE ME #&*!! READ

@thewolfe

Break text into small, digestible chunks.

Avoid Lightweight fonts.

Use layout-relative and density-independent sizing.

@thewolfe

24px 32px 44px 62px 94px

@thewolfe

GETTING AROUND

@thewolfe

@thewolfe

1956 Zenith Space Command

@thewolfe

@thewolfe

@thewolfe

@thewolfe

@thewolfe

COLORS

#F1F1F1 #FFFFFF

@thewolfe

Standard UI Patterns Default Settings

Keyboards Navigation patterns

Native devices have their own components

@thewolfe

Don’t Fear the Natives@thewolfe


MEDIA


EXPERIENCE

EMERGING TECHNOLOGY


@thewolfe

BEYOND THE SCREEN

@thewolfe

Reid Hastings: Gaming, VR and Drugs

VIRTUAL REALITY

VR is a fully immersive, real world replacement, simulated reality, allowing users to interact in this world.

@thewolfe

@thewolfe

ENHANCED REALITY

Sometimes called Augmented, Hybrid or Mixed Realities, this superimpose a computer-generated image on a user's view of the real world, thus providing a composite view.

@thewolfe

@thewolfe

@thewolfe

VIRTUAL REALITY

ISOLATED IMMERSIVE

CREATES FALSE REALITY

ENHANCED REALITY

PUBLIC INTEGRATED

OVERLAYS IN REALITY

@thewolfe

navigation

@thewolfe

WE’RE STILL DESIGNING FOR 10-FEET

@thewolfe

10ft (3meters)

… BUT ON A SPHERE

@thewolfe

“CONE OF FOCUS” KEEP MEANINGFUL CONTENT CENTERED

@thewolfe

@thewolfe

OCULUS 360 PHOTOS EXPERIENCE

35° RULE

@thewolfe

200° - 220°

110°

35° 35°

@thewolfe

SIMILAR NAVIGATION WITH Z-AXIS

THE FUTURE IS GOING TO BE CONNECTED AND IMMERSIVE.

@thewolfe

@thewolfe

LET’S GET THE #%^&! CONNECTED.

Thank You.

@thewolfe @wolfedesign