115
UX on the big Screen Thorsten Jonas | Head of Concept CELLULAR | @dolbydigger

UX on the big screen - MobX Conference 2016

Embed Size (px)

Citation preview

Page 1: UX on the big screen - MobX Conference 2016

UX on the big ScreenThorsten Jonas | Head of Concept CELLULAR | @dolbydigger

Page 2: UX on the big screen - MobX Conference 2016

Thorsten Jonas

Head of Concept CELLULAR - @dolbydigger

Page 3: UX on the big screen - MobX Conference 2016

Thorsten Jonas

Head of Concept CELLULAR - @dolbydigger

Page 4: UX on the big screen - MobX Conference 2016

Stuff we do at CELLULAR

Sunrise

ZDF

TUI Cruises

TV Spielfilm

Page 5: UX on the big screen - MobX Conference 2016

Why UX on TV?

Page 6: UX on the big screen - MobX Conference 2016

460 Mio. Connected TV-Devices

Page 7: UX on the big screen - MobX Conference 2016

In 2019: 80% of Internet-Traffic is Video

Page 8: UX on the big screen - MobX Conference 2016
Page 9: UX on the big screen - MobX Conference 2016

9

1 out of 8 US citizens own an 4K TV today!

Page 10: UX on the big screen - MobX Conference 2016
Page 11: UX on the big screen - MobX Conference 2016

Smart TV Functionality reaches „the masses“

Page 12: UX on the big screen - MobX Conference 2016

„Hey, did you know? By pushing the Red Button, you can watch all the parallel olympic sports live as well.“

Page 13: UX on the big screen - MobX Conference 2016

People might watch less „classic“ TV

Page 14: UX on the big screen - MobX Conference 2016

But the TV will be used more than ever.

Page 15: UX on the big screen - MobX Conference 2016
Page 16: UX on the big screen - MobX Conference 2016

Thesis

In the future, the TV will be always on.

Page 17: UX on the big screen - MobX Conference 2016

In addition big screens become usual out of home as well

Page 18: UX on the big screen - MobX Conference 2016
Page 19: UX on the big screen - MobX Conference 2016

In fact, big interactive screens are everywhere.

Page 20: UX on the big screen - MobX Conference 2016

The 5 Dimensions of UX on TV

Page 21: UX on the big screen - MobX Conference 2016

#1 Ease of Use

Page 22: UX on the big screen - MobX Conference 2016

Thesis

A TV screen is a totally different thing

Page 23: UX on the big screen - MobX Conference 2016

My Grandma

Page 24: UX on the big screen - MobX Conference 2016

My Grandma

The last technical device she was able to handle was her TV.

Page 25: UX on the big screen - MobX Conference 2016

Using the (classic) TV is super easy and almost the same for the past 40 years.

Page 26: UX on the big screen - MobX Conference 2016

Using the (classic) TV is super easy and almost the same for the past 40 years.

Even my grandma knew how to

use it up to a very high age!

Page 27: UX on the big screen - MobX Conference 2016

Recommendation

An App on TV should be as easy to use as the TV itself

Page 28: UX on the big screen - MobX Conference 2016

#2 Platform

Page 29: UX on the big screen - MobX Conference 2016
Page 30: UX on the big screen - MobX Conference 2016
Page 31: UX on the big screen - MobX Conference 2016

Learning

Performance of todays „Smart TVs“ is a killing joke

Page 32: UX on the big screen - MobX Conference 2016

But

The Smart TV is the most widely spread TV device

Page 33: UX on the big screen - MobX Conference 2016

„Hey, did you know? By pushing the Red Button, you can watch all the parallel olympic sports live as well.“

Page 34: UX on the big screen - MobX Conference 2016

Recommendation

Do not forget Smart TV! But make performance your first principle.

Page 35: UX on the big screen - MobX Conference 2016
Page 36: UX on the big screen - MobX Conference 2016

Thesis

Set-Top Boxes UI principles could differ significantly

Page 37: UX on the big screen - MobX Conference 2016

ZDF App - Apple TV ZDF App - Amazon Fire TV

Page 38: UX on the big screen - MobX Conference 2016

Recommendation

Stick to platform guidelines

Page 39: UX on the big screen - MobX Conference 2016

Stick to platform guidelines

Side effect: You get featured

Page 40: UX on the big screen - MobX Conference 2016
Page 41: UX on the big screen - MobX Conference 2016

Learning

Signage Screens are a whole new thing I mean really!

Page 42: UX on the big screen - MobX Conference 2016

#3 Distance

Page 43: UX on the big screen - MobX Conference 2016

Thesis

Distance of usage to the screen varies dramatically

Page 44: UX on the big screen - MobX Conference 2016

Average Distance to a TV screen:

2-4m

Page 45: UX on the big screen - MobX Conference 2016

Average Distance to an interactive signage screen:

0,3m

Page 46: UX on the big screen - MobX Conference 2016

Average Distance to a TV screen:

2-4m

Page 47: UX on the big screen - MobX Conference 2016

Field of view is the whole screen

Page 48: UX on the big screen - MobX Conference 2016

Learning

Give the content room. Reduce. And once you are done, reduce again.

Page 49: UX on the big screen - MobX Conference 2016

Hyper - Apple TV MLB App - Apple TV

Page 50: UX on the big screen - MobX Conference 2016

Learning

Create a cinematic experience

Page 51: UX on the big screen - MobX Conference 2016

ZDF - Apple TV NASA - Apple TV

Page 52: UX on the big screen - MobX Conference 2016

Average Distance to an interactive signage screen:

0,3m

Page 53: UX on the big screen - MobX Conference 2016

Average Distance while interacting with a digital signage screen:

30cm

Page 54: UX on the big screen - MobX Conference 2016

Average Distance when taking notice of a digital signage screen:

2-4m

Page 55: UX on the big screen - MobX Conference 2016

Average Distance while interacting with a digital signage screen:

30cm

Page 56: UX on the big screen - MobX Conference 2016

Average Distance while consuming on a digital signage screen:

100cm

Page 57: UX on the big screen - MobX Conference 2016

Notice Interact Consume

How to handle this?

Page 58: UX on the big screen - MobX Conference 2016

1. Make one out of these two

Notice Interact Consume

Page 59: UX on the big screen - MobX Conference 2016

1. Make one out of these two

Notice Interact & Consume

Page 60: UX on the big screen - MobX Conference 2016

Reduce the important content to the field of view

Page 61: UX on the big screen - MobX Conference 2016

Field of view

Page 62: UX on the big screen - MobX Conference 2016

2. Create special „notice“-mode

Notice Interact & Consume

Page 63: UX on the big screen - MobX Conference 2016

Make use of the full screen

Page 64: UX on the big screen - MobX Conference 2016

Field of view

Page 65: UX on the big screen - MobX Conference 2016

Trigger usage with moving elements

Page 66: UX on the big screen - MobX Conference 2016
Page 67: UX on the big screen - MobX Conference 2016

#4 Input Method

Page 68: UX on the big screen - MobX Conference 2016
Page 69: UX on the big screen - MobX Conference 2016

Learning

Input methods for TV screens compare like chalk to cheese

Page 70: UX on the big screen - MobX Conference 2016

Input Method: 4-Way Remote

Page 71: UX on the big screen - MobX Conference 2016

Learning 4-Way Remote

People need to see where they are on screen

Page 72: UX on the big screen - MobX Conference 2016

Question

Where is the focus?

Page 73: UX on the big screen - MobX Conference 2016

Homescreen - Samsung

Page 74: UX on the big screen - MobX Conference 2016

ZDF App - Apple TV

Page 75: UX on the big screen - MobX Conference 2016

Recommendation

Make focus obvious

Page 76: UX on the big screen - MobX Conference 2016

Recommendation

Use focus as value

Page 77: UX on the big screen - MobX Conference 2016

Learning 4-Way Remote

The remote does not support „diagonal“ directions

Page 78: UX on the big screen - MobX Conference 2016
Page 79: UX on the big screen - MobX Conference 2016

Recommendation 4-Way Remote

Avoid diagonal navigation

Page 80: UX on the big screen - MobX Conference 2016

Homescreen - Fire TV

Page 81: UX on the big screen - MobX Conference 2016

Recommendation 4-Way Remote

Arrange content 1-dimensional

Page 82: UX on the big screen - MobX Conference 2016

#2 Input Method: Touch Remote

Page 83: UX on the big screen - MobX Conference 2016

Learning Touch Remote

Touch remote is nice, but also hard to use sometimes

Page 84: UX on the big screen - MobX Conference 2016

Recommendation Touch Remote

Make the user feel the interface

Page 85: UX on the big screen - MobX Conference 2016

ZDF App - Apple TV

Page 86: UX on the big screen - MobX Conference 2016

#2 Input Method: Touch Screen

Page 87: UX on the big screen - MobX Conference 2016

Learning Touch Screen

Height is a totally new issue

Page 88: UX on the big screen - MobX Conference 2016

She is on her Tip-toes already!

Page 89: UX on the big screen - MobX Conference 2016

Recommendation Touch Screen

Make sure all interactive elements are in reach

Page 90: UX on the big screen - MobX Conference 2016

Learning Touch Screen

Everything is touched

Page 91: UX on the big screen - MobX Conference 2016

Recommendation Touch Screen

Be Super-Chrystal-Clear about what is touchable

Page 92: UX on the big screen - MobX Conference 2016
Page 93: UX on the big screen - MobX Conference 2016

#2 Input Method: Voice

Page 94: UX on the big screen - MobX Conference 2016
Page 95: UX on the big screen - MobX Conference 2016
Page 96: UX on the big screen - MobX Conference 2016

62 seconds!And the job is not done yet…

Page 97: UX on the big screen - MobX Conference 2016

62 seconds!But I am angry!

Page 98: UX on the big screen - MobX Conference 2016

Learning

Data Input on TV is horrible

Page 99: UX on the big screen - MobX Conference 2016

#5 Mobile

Page 100: UX on the big screen - MobX Conference 2016

Thesis

Remote Control Apps suck

Page 101: UX on the big screen - MobX Conference 2016

No haptic Feedback!

Page 102: UX on the big screen - MobX Conference 2016

Thesis

But Content Discovery on mobile rules

Page 103: UX on the big screen - MobX Conference 2016
Page 104: UX on the big screen - MobX Conference 2016

Learning

Mobile is the perfect complement to the TV remote

Page 105: UX on the big screen - MobX Conference 2016

Recommendation

Connect your Mobile and TV Apps

Page 106: UX on the big screen - MobX Conference 2016
Page 107: UX on the big screen - MobX Conference 2016
Page 108: UX on the big screen - MobX Conference 2016

Recommendation

A Mobile and TV App of the same service should to be connected always

Page 109: UX on the big screen - MobX Conference 2016

Prediction

And this is just the beginning

Page 110: UX on the big screen - MobX Conference 2016

You are in TV Mode close

Page 111: UX on the big screen - MobX Conference 2016

You are in TV Mode close

Page 112: UX on the big screen - MobX Conference 2016

Learning

Mobile is the perfect complement to the TV remote

Page 113: UX on the big screen - MobX Conference 2016

Learning

Mobile is the perfect complement to TV Apps

Page 114: UX on the big screen - MobX Conference 2016

UX on TV starts on the Mobile Device

Page 115: UX on the big screen - MobX Conference 2016

Thank you.

Thorsten Jonas | Head of Concept CELLULAR | @dolbydigger