We’ll be referencing common phrases and objects throughout the chapter to denote a specific element or section of the interface. In order to reference these elements, they need to be clearly defined to the reader. Take a look at Figure 19, which displays various UI elements referenced throughout the chapter.

Figure 19. YouTube Leanback interface with various UI elements highlighted

As we discussed in Chapter 2, environment, mind-set, and interaction factor into a user’s 10-foot experience. Although there is some variability around these factors, there are certain usability patterns which hold true for most, if not all, users.

Google TV is an open platform that connects a variety of users to web apps. To optimize this experience for users, it’s important to understand that there is a spectrum of users that will use your web app.

On one end of the spectrum, there are “passive” users. These users relax on the sofa in a comfortable position, leaning back while casually surfing the web. They will perform basic web browsing actions, such as searching for videos, using a single hand and finger on the remote. Unnecessary movement is avoided and minimized in this case. The less energy spent swapping fingers and searching for the right buttons to push on the remote, the better. They generally don’t care so much about what other capabilities or features an application has to offer.

Passive users typically exhibit the following characteristics:

On the opposite end of the spectrum are “power” users. These users enjoy the challenge of learning how to do what they want, even if the user experience is less than optimal. Power users find the qwerty keyboard input device favorable, similar to their interactions with a personal computer. They are fully engaged and hardly inconvenienced by placing two hands on the input device in order to type more efficiently.

Power users may exhibit the following characteristics:

You may find that your application is geared more to one end of the spectrum than the other. Ultimately, how well your web app is used depends on the audience (as discussed in the previous chapter), so if you know that your audience is comprised of nontechnical users, your best bet is to design an app for passive users. Despite the versatility of power users, you should note that the D-Pad is relevant and relatively important for all users. In other words: D-Pad should be the primary means for interaction with your web apps.

The interface is comprised of many different elements, resulting in an almost infinite number of ways to choose a specific layout to present your content.

Figures 20 and 21 illustrate two common screen layouts which developers typically implement for Google TV. Figure 20 illustrates the “main attraction” approach, while Figure 21 illustrates the “embedded main attraction” approach. Both approaches have advantages and disadvantages, as we’ll discuss.

Main Attraction

The main attraction layout is often used to display dynamic content, such as videos. Transparent menus are typically placed along one of the neighboring margins of the interface. Bottom or left margins are typically the most common. Note that additional overlays such as video playback controls and notification dialogs are generally placed in the middle where it’s most visible and apparent to the user.

Figure 20. A full screen layout displaying the main attraction at all times

Advantages:

• Familiar interface from existing set-top box channel guide menus

• Main attraction is always visible and occupies the entire screen real estate

• Users can always hit “Esc” or “Exit” buttons to easily return to the main attraction

• Good for displaying video, sideshows, and live content

• Simple and user-friendly

Disadvantages:

• Not intuitive for content requiring more user input

• Menus and overlays may obstruct the view of the main attraction

• Generally limited to one-dimensional menus and submenus

Embedded Main Attraction

The main attraction layout typically displays a list of items in grid format or the live multimedia content itself in an embedded frame. This layout gives menus designated space on any side of the main attraction area, typically positioned to the left of it. Additional transparent overlays can sometimes be positioned over the main attraction area, but is not typically done if displaying static content such as a grid list of items.

Figure 21. Note the difference in layout when using the embedded main attraction approach

Advantages:

• Good for presenting categories for users to browse through

• Persistent menus for presenting content via categories

• Good for static content and information like books and news

Disadvantages:

• Requires extra step to toggle main attraction to fullscreen mode

• Requires user interaction before loading content into main attraction area

• Interface is more complex with potentially lots of ways to navigate

The following questions can help in determining whether to make any overlay transparent when displaying it over existing content:

Note that not all overlays need to be transparent. Transparency generally indicates to the user that an overlay is merely a temporary layer placed above a more important piece of content. For example, when displaying video, it’s best to make playback control overlays transparent so the user can see what’s behind it, and also to indicate that it can be dismissed.

Similarly, when an overlay is opaque, it indicates to the user that a more important piece of data is contained within. For example, if the left menu column was displayed in opaque fashion, it would indicate the menu is persistent and cannot be dismissed, which may or may not always be true.

When you begin to design the navigation scheme for your interface, it may seem overwhelming at first, given all of the design considerations. The rule of thumb and preferred mode of navigating 10-foot interfaces is via keyboard navigation. All Google TV devices come equipped with an input device, including a D-Pad (Figure 22). Though a qwerty keyboard and trackpad are also available, all existing TV menus and interfaces today are generally designed to be interfaced with using a simple remote with a D-Pad. So we can’t reiterate enough how important it is that your app use the D-Pad as the primary mechanism for navigation.

Figure 22. Logitech Revue input device and its directional pad to navigate Google TV

We’ll touch more on this topic in the next two chapters, particularly Chapter 5, which dives deep into how to actually make a web app D-Pad navigable.

Traditional scrolling models which work well on desktop browsers do not translate well over to the 10-foot interface. Scrolling through traditional scroll bars with a D-Pad is not an optimal experience for users.

In almost all cases, design your own scrolling mechanism using animations to transition between items or pages smoothly. It’s best to let the user’s current selection initiate the scrolls as it moves across each item instead of supplying “next” or “previous” page links.

Figure 23 displays an example of a web application implementing horizontal scrolling. Notice that there are no page links for users to click on. Instead, the user simply navigates left or right using the directional pad to browse across the pages of the video gallery.

Figure 23. The Blip.tv 10-foot interface uses horizontal scrolling based on the user’s current selection

The same scrolling mechanism can apply vertically. However, since TV screens are landscape with a wider width than height, there is considerably more screen real estate in the horizontal plane than there is in the vertical. If you need to implement scrolling in your interface, default to horizontal scrolling mechanisms whenever possible.

Font sizes and graphics need to be large enough to be viewed comfortably from at least 10 feet away.

One tricky “gotcha” to setting typefaces and graphics is to take into account the two different resolutions in most HD displays. Depending on whether the viewer’s display is rendering 1280 × 720 (720P) or 1920 × 1080 (1080P) resolutions, you may need to adjust your font and graphic sizes accordingly.

When designing a 10-foot interface, displaying less information is really key to driving a positive user experience. TV viewers will easily feel overwhelmed by text-heavy interfaces with complicated navigation schemes, menus, and buttons. If you’re displaying text, consider trimming the text to only show a small snippet of it. A good rule of thumb is to use text the same way that you would in an art museum: you wouldn’t expect visitors to read through more than a small description for a visual piece of art.

Visual graphics and cues are a valuable way to keep users informed about navigation or state in a given application. Well-placed and well-timed visuals can dramatically improve the user experience and make the user feel more connected to the application. Text is often times cumbersome, takes up precious screen real estate, and does a poor job of communicating status to users. On the other hand, a well-done visual graphic, logo, or effect will not only improve the visual quality and polish of your application, but will also better convey what the application is doing behind the scenes.

One visual cue which you’ll indefinitely need to design is the user’s current selection focus (Figure 24). Users will rely on the selection focus to navigate and interact with your application, and thus you should aim to include the following logic:

Figure 24. Google TV Spotlight 10-foot interface with single user selection focus

Audio cues can help liven up your app to give a much more polished feel. Playing a subtle sound effect each time the selection focus moves or behind toggling of a menu confirms to the user that her action was received. If you do decide to add audio effects and cues to your application, remember to include a way for users to toggle this functionality on or off. Google TV users may be watching another program or listening to music in the background as they explore and interact with your application, so the capability to disable sound is a requirement if you plan on including audio cues.