Google TV

Introduction to Google TV Closure UI Library

Maksym Motornyy, Software Engineer
March 2011

  1. Why TV is different than PC
  2. Why do we need a library
  3. Why don’t we use Closure components
  4. Declarative UI
  5. Highly customizable looks
  6. Simplicity and connectivity
  7. What does library provide

Why TV is different than PC

PC is controlled with keyboard and mouse. Widely used means such as keyboard shortcuts or mouse wheel either aren’t available or too awkward to use from TV remote. TV users are most comfortable with 4-directional pad with OK button.

TV has high-resolution screen but is viewed from much larger distance than PC monitor. This forces increased size of UI elements which implies approximately twofold drop of information density on the screen.

Therefore, if you want your web application to feel right on TV, you have to make major adjustments to UI.

Why do we need a library

It’s not enough to rely on browser zoom to enlarge fonts and images. UX studies show that users tend to lose currently focused element on the TV screen, so focused element should be clearly (exaggeratedly, by PC standards) highlighted. Additionally, smooth focus transfer helps users to track it. This kind of thing cannot be achieved with mere CSS tweaks.

Lower information density also means more containers with scrolling. However PC-like scrollbar feels odd on TV - it’s mouse-centric, visually clumsy, doesn’t support scrolling animations and so on. TV UI library provides powerful containers which are core building blocks for every TV application.

Why don’t we use Closure components

Short answer, because of different focus models on PC and TV.

Focus is an important concept that defines how key events are delivered to components. PC user’s model of focus transfer is a line, with focus controlled by Tab and Shift+Tab.

Shift-tab focus model

TV user’s model is a grid with focus controlled by Left, Right, Up and Down keys.

DPad focus model

Browsers implement PC model. Closure’s base UI class, goog.ui.Component, follows browser’s model of focus based on tabindex attribute, which effectively makes the class not suitable for TV components.

It’s worth noting that goog.ui.Container class has limited support for directional navigation. Unfortunately Closure’s container is designed for toolbars and menus in mind and as such controls selection rather than focus. Difference between these two lies in a fact that selection is a purely visual artifact that doesn’t affect how keyboard events are delivered.

Declarative UI

We were able to significantly cut down amount of code needed to describe UI by getting rid of JavaScript in favor of HTML. We call this technique “decoration” - HTML <div>s are marked with specially recognized CSS classes, which turn them into live, actionable components.

Highly customizable looks

Library doesn’t provide any standard look. While it may seem as drawback, it’s also a major strength. We designed the library in a way which allows limitless possibilities of customization.

Simplicity and connectivity

Since there is no difference between button and menu item, conceptual load of the library is very small. Power lies in simple concepts: table row is button with some CSS, checkbox and toggle button are the same, navigation bar and shelf are containers, grid is container of containers. Like in good construction set, where you can connect pieces in many ways.

What does library provide

A picture is worth a thousand words. See library demos at http://tvuidemos.appspot.com.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.