from desktop to big screens
DESCRIPTION
My session from #uxce14 in Berlin about designing & lessons learned from TV / #HbbTV app solutions.TRANSCRIPT
From desktop to big screensSay hello to HbbTV platform - a new way to distribute digital content.
[email protected] / @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 [email protected]
@sleapy_ / cz.linkedin.com/in/zzenger