- Why TV is different than PC
- Why do we need a library
- Why don’t we use Closure components
- Declarative UI
- Highly customizable looks
- Simplicity and connectivity
- 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
TV user’s model is a grid with focus controlled by
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.
<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.