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

HISTORY OF
CONNECTED
MEDIA
DESIGNING THE
10-FOOT
EXPERIENCE
EMERGING
TECHNOLOGY
THE
CONNECTED
ECOSYSTEM
@thewolfe

6.4 billion
connected things in use in 2016
http://www.gartner.com/newsroom/id/3165317
30%
@thewolfe

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

HISTORY OF
CONNECTED
MEDIA
DESIGNING THE
10-FOOT
EXPERIENCE
EMERGING
TECHNOLOGY
THE
CONNECTED
ECOSYSTEM
@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

HISTORY OF
CONNECTED
MEDIA
DESIGNING THE
10-FOOT
EXPERIENCE
EMERGING
TECHNOLOGY
THE
CONNECTED
ECOSYSTEM
@thewolfe

220 million
streaming 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

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.
MAKE IT LIGHTWEIGHT.
KEEP EXPECTATIONS CLEAR.
MAKE EXPERIENCES IMMERSIVE.
@thewolfe

KEEP IT SIMPLE.
MAKE IT LIGHTWEIGHT.
KEEP EXPECTATIONS CLEAR.
MAKE EXPERIENCES IMMERSIVE.
@thewolfe

@thewolfe

KEEP IT SIMPLE.
MAKE IT LIGHTWEIGHT.
KEEP EXPECTATIONS CLEAR.
MAKE EXPERIENCES IMMERSIVE.
@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

HISTORY OF
CONNECTED
MEDIA
DESIGNING THE
10-FOOT
EXPERIENCE
EMERGING
TECHNOLOGY
THE
CONNECTED
ECOSYSTEM
@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