from desktop to big screens
DESCRIPTION
My session from #uxce14 in Berlin about designing & lessons learned from TV / #HbbTV app solutions.TRANSCRIPT
![Page 1: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/1.jpg)
From desktop to big screensSay hello to HbbTV platform - a new way to distribute digital content.
[email protected] / @sleapy_ / cz.linkedin.com/in/zzenger
![Page 2: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/2.jpg)
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
![Page 3: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/3.jpg)
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)
![Page 4: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/4.jpg)
๏ 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
![Page 5: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/5.jpg)
๏ 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
![Page 6: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/6.jpg)
It's not a desktopLesson 01404
Desktop not found
![Page 7: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/7.jpg)
#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.
![Page 8: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/8.jpg)
Graphic Safe Area = usable resolution 1024x648px for your app design.
ETSI TS 102 796 V1.1.1 (2010-06)
![Page 9: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/9.jpg)
Norm is just a buzzwordLesson 02HbbTV
![Page 10: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/10.jpg)
#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.
![Page 11: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/11.jpg)
![Page 12: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/12.jpg)
Keep it really simpleLesson 03
![Page 13: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/13.jpg)
#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)
![Page 14: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/14.jpg)
![Page 15: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/15.jpg)
![Page 16: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/16.jpg)
Content Navigation is kingLesson 04
DEAD END
![Page 17: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/17.jpg)
#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.
![Page 18: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/18.jpg)
![Page 19: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/19.jpg)
![Page 20: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/20.jpg)
Guide your user Lesson 05
![Page 21: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/21.jpg)
#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.
![Page 22: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/22.jpg)
![Page 23: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/23.jpg)
![Page 24: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/24.jpg)
Not all buttons are for you Lesson 06
http://www.activeforever.com/tek-partner-universal-big-button-remote-control#.U5CjRZSSwgM
![Page 25: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/25.jpg)
#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.
![Page 26: From desktop to big screens](https://reader033.vdocument.in/reader033/viewer/2022050919/54503422af795993468ba07b/html5/thumbnails/26.jpg)
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