from desktop to big screens

From desktop to big screensSay hello to HbbTV platform - a new way to distribute digital content.

zdenek.zenger@gmail.com / @sleapy_ / cz.linkedin.com/in/zzenger

What the … is HbbTV?“HbbTV (Hybrid Broadcast Broadband TV) is a new industry standard providing an open and business neutral technology platform that seamlessly combines TV services delivered via broadcast with services delivered via broadband and also enables access to Internet only services for consumers using connected TVs and set-top boxes!- HbbTV.org

So what?!๏ New technology continuously evolving

๏ Way to distribute additional content via TV

๏ Another channel to sell advertisements and products (like DVDs or gifts)

New (design) challenge :o)

๏ 2010-11 - HbbTV support mostly in expensive TV models

๏ Today - in any TV from 200€

๏ Smart TV = TV with HbbTV support

Who has HbbTV?

SONY

SAMSUNG

GOGEN

PANASONICSHARP

FINLUX

/

… and other TV manufacturersPHILIPS LG

GRUNDIG

๏ Germany - over 90% connected TV

๏ France - over 50% connected TV

…and where is that HbbTV?

http://www.w3.org/2013/10/tv-workshop/papers/webtv4_submission_11.pdf

… and still growing

It's not a desktopLesson 01404

Desktop not found

#01 It is not a desktop๏ Don’t try to get everything on one screen

๏ Audiences mostly don’t sit close to the screen

๏ Articles are great, but not in television

๏ Respect the “SAFE ZONE” recommendations

Don’t be afraid to “waste” space. Think big and make it bigger.

Graphic Safe Area = usable resolution 1024x648px for your app design.

ETSI TS 102 796 V1.1.1 (2010-06)

Norm is just a buzzwordLesson 02HbbTV

#02 Norm is just a buzzword๏ HbbTV specification is still improving - 1.0, 1.1., 1.1.1., 1.2., 1.2.1., 1.5., …,

2.0 (Q2 2014)

๏ Most used and “safe” version is 1.1.1. but widely supported is 1.2.1. (update from November 2012)

๏ Every TV manufacturer implements HbbTV support by their own explanation

Still, if you optimise your app for specification 1.1.1. (or 1.2.1.), save time for later testing and “hacks” to get your app functional properly (mostly) on new TVs.

Keep it really simpleLesson 03

#03 Keep it really simple๏ Choose carefully functions, filters, buttons, …

๏ Be aware of “cool” visual effects & animations

๏ Don’t use super ultra clean minimalistic or rich graphic design (especially with shadows)

Save space as much as you can and do it as “ugly” as possible :o)

Content Navigation is kingLesson 04

DEAD END

#04 Content Navigation is king๏ Think about how easily get from one screen to another by using the least

buttons or “clicks” as possible across the application.

๏ Think how to get most used or related functions as close as possible.

๏ Don’t forget to integrate back button properly to your navigation system e.g. back to previous step or previous screen.

๏ Consider numbers as shortcuts for specific functions such as search.

Remember - you are not using mouse, but mostly uncomfortable remote control.

Guide your user Lesson 05

#05 Guide your user

Most TVs are very slow and users are mostly unaware of what is going on. Guide them and show possibilities where they can go next or what is happening.

๏ Show possibilities in navigation to next / previous menu item or how to load next or previous screen (such as detail or new category).

๏ Where possible, load new content automatically when focus is placed.

๏ Use (pre)loaders on long time actions or screens with long loading time.

Not all buttons are for you Lesson 06

http://www.activeforever.com/tek-partner-universal-big-button-remote-control#.U5CjRZSSwgM

#06 Not all buttons are for youx PG UP & PG DOWN (channel buttons)

x Volume keys & mute

x SMART & WEB buttons

x Specific buttons such as search

x Multimedia buttons

✓ Directional buttons (D-PAD)

✓ OK, BACK, EXIT

✓ Numbers

✓ Color buttons

✓ Multimedia buttons

Using special buttons such a multimedia one is cool, but mostly useless and not functional across TVs. Using standard buttons such a D-PAD, OK, BACK, EXIT and color buttons will be enough.

Could be useful๏ https://developers.google.com/tv/android/docs/gtv_android_patterns

๏ http://channel9.msdn.com/Events/MIX/MIX06/BTB029

๏ http://blog.smartbear.com/how-to/re-thinking-user-interface-design-for-the-tv-platform/

๏ http://hybrid-tv-world.blogspot.cz/p/link-gallery.html

๏ http://epra3-production.s3.amazonaws.com/attachments/files/1944/original/02-klaus-merkel.pdf?1336401773

๏ http://www.hbbig.com/

๏ http://www.w3.org/2013/10/tv-workshop/papers/webtv4_submission_11.pdf

Thanks for your attention ZDENEK.ZENGER@GMAIL.COM

@sleapy_ / cz.linkedin.com/in/zzenger