Google Smart TV Design Specification

This article by Jiangnan University Institute of Design translation of the child, see the original "Google TV Design Patterns"

This is user interface development guidelines for Android applications running on Google TV. While Android apps running on phones and Google TV are almost the same, there's a difference in the user interface.

The television viewing environment is often described as "10 foot environment" and the television screen is also described as "10 foot user interface." When you create an application for a 10-foot environment, keep in mind the following basic concepts:

Traditionally, the 10-foot environment fits consumer content

10 feet environment is entertainment, not a working environment. The 10 foot environment is usually a social environment, not a single-user environment.

The 10-foot user interface viewing experience is a combination of PC and TV

TV screen features both computer and TV. Display resolution similar to the computer, but the characteristics of the television. The color on the TV screen is different.

TV equipment has high quality sound

TV equipment is usually connected to the best sound system. Unlike computers, users expect television equipment to sound and hopefully will not be disturbed.

The 10-foot user interface requires easy and visible navigation

Create left-to-right, top-to-bottom navigation. Reduce the mouse requirements. Provide visual feedback.

Based on the content area user interface mode, the most suitable for 10 feet user interface

The area itself has nothing to do with the type of equipment. Different device types have specific regional arrangements. Many different user interfaces can be based on the concept of zones.

Ten feet of environment

When you create an Android application for a ten foot environment, you should keep in mind some of the basic concepts. These basic concepts distinguish the "ten foot environment" from computers and mobile devices.

The basic idea is that in the traditional sense, television equipment is used to display consumer content. For a long period of history, television has served as a system for the passive reception of broadcast information. Google TV changes television from a broadcast system to a two-way interactive system, which is a huge change for many viewers. This change can be tricky for older audiences, especially those who consider themselves "computer blind." On the other hand, the younger audience, who grew up with the Internet, did not respond so much to the change and even eagerly contacted it.

Television is by its nature a passive acceptance, which is often referred to as a "receding" experience. Even viewers who are willing to interact with the television do not want to interact too much. They want to lean back on the couch and enjoy the interactive process rather than being as focused as a computer or cell phone.

In addition, Google TV aims to elevate the traditional goal of watching television - an experience that is easier to view and share together. From this more traditional approach, you can distinguish your application from other systems on the television screen.

2. TV display

When you design your application, keep in mind that Google TV's display is fundamentally different from a computer or mobile device. In addition to its size, the television shows less information than a computer or mobile device. Instead of requiring users to interact, you should provide fewer UIs and may need to automate certain tasks.

Here are some UI design guidelines:

Use the phone as a UI model. The size of modern television is deceptive. Even though modern televisions usually have a screen diagonal of more than 40 inches, the audience, in proportion, sits far ahead of the television rather than sitting in front of the computer screen. Visitors feel that the TV screen size smaller than the computer monitor. When you're designing a UI, you can simulate this experience using your phone as a "model." There should be more free space between the elements on the page to avoid clutter on the screen. To do this, you need to combine larger margins and padding. This is also a good advice for the "touch screen" UI. TV is always horizontal screen. On TV, there is more space available in the horizontal direction than in the vertical direction. Place the onscreen navigation controls horizontally to save vertical space for content. 2.1 HD display resolution

Television screens are fundamentally different from computer monitors and mobile device screens. Display and mobile device screens use (generally) addressable pixels. In contrast, television uses a simulation of a display image that is 10 years behind. To understand this difference, it is important to work with Google TV.

2.1.1 Display resolution of computers and mobile devices

Computer monitors have a maximum display resolution, this resolution is usually less than or equal to the graphics card resolution. The video card determines the maximum resolution, the display determines the pixel density (pixels per inch). The resolution and pixel density of mobile devices tend to be fixed.

Because the display resolution of the computer is very simple, the computer operating system automatically handles the resolution and pixel density issues based on the user's preferences.

The Android system uses the same set of applications to run multiple mobile devices. To do this, Android scales the UI based on the device's screen size and pixel density. In addition, you can provide alternative UI resources to prepare the best UI experience for different devices.

2.1.2 TV display resolution

TVs (even those that are the most modern) have scan line-based display resolution. Google TV supports 3 scan line HDTVs: 720p, 1080i and 1080p, representing 720 progressive, 1080 interlaced and 1080 progressive lines (Android treats the latter as equivalent). A value of 720 means that the television can "address" 720 different lines in the vertical direction of the screen; a value of 1080 means that the television can "line up" 1080 lines in the vertical direction.

The horizontal resolution is determined by the aspect ratio of the television. At present, almost all TVs use a 16: 9 aspect ratio (16 horizontal pixels corresponds to 9 vertical pixels), so the resolution of a 1080 television set is 1920 x 1080.

How tall are these lines, and what is the "width" between each line? In other words, what is the actual pixel density of the TV? It depends on different manufacturers, but Android displays these numerical abstractions as density-independent pixel units (abbreviated dp).

Google TV Android apps benefit from Android's zooming technology. In summary, you should design the UI for 1080p specs, allowing the Android system to reduce your UI to 720p specs, as shrinking graphics usually outperforms zooms. In order to get the best picture zoom effect, if possible, give them 9-patch format pictures. The zoom settings provided by Android for Google TV are shown in the following table.

Note:

The addressable screen size is the number of visible pixels. Density definition is defined by Android dp. In the "Design and Development" chapter in the "optional resources" section there is a description. To learn more about optional resources, read the chapter "Support Multiple Screens" in Android Developer's Guide. Determine the screen size and resolution of the current monitor, using dpi and screen resolution in the Display Unit.

2.1.3 Overscan

Another problem is over-scanning. For historical reasons, TV manufacturers must reserve a blank margin outside the normal screen size, be circuit-addressable, but not used to display television signals. These blank areas are over-scanned areas (or simply "over-scanned"). Android applications can not be displayed in overscan area.

Unfortunately, overscanning also varies from manufacturer to manufacturer. So the margins around your UI are also varied. If you're designing a UI for a TV with over-screened displays, you might have inadvertently used the overscanned area as a margin between UI and TV borders. If you later run your application on a television that is almost scanned, the UI will be almost blank, and the elements may be hard to discern.

To deal with this issue, provide your UI with an extra 10% margin and use a layout that is not absolutely targeted. As shown in Figure 1.

Figure 1 screen resolution and size

2.2 color

TV screens have higher contrast and saturation than computer monitors. With that in mind, consider the guidelines when working with solid colors:

Use pure white (#FFFFFF) carefully. Pure white can cause vibration or image ghosting on the TV screen. Use # F1F1F1 (hex) or 240/240/240 (RGB) instead of plain white. Avoid the use of bright white, red and orange lines because these colors show particularly serious distortion on the television. Learn about different TV display modes, including Standard, Sharp, Movie / Theater, Games and more. Make sure your app fits all of these TV modes. Avoid using large-area color gradients, as they may cause color bands. Test your application on a low-quality monitor, if possible. These devices may have poor gamma and color settings. 2.3 text

For television, avoid slender fonts or have too wide, narrow strokes of the font. Use simple sans-serif fonts and use anti-aliasing to increase readability. Currently, Google TV only supports the Droid Serif font family, but you can use embedded fonts to create a more personal look. However, keeping in mind that embedding fonts can slow down the system.

Here are some ways to improve text legibility:

Each paragraph limits 90 words. Change the long sentence to a few short sentences, so that users can quickly browse. Keep 5-7 words per line, no less than 3 words, no more than 12 words. On television, light text on a dark background is easier to read than dark text on a light background. Use Android's standard font size. For example, the standard small font size is 14sp, which is equivalent to a 28-point font size on a 1080p screen. Set a larger line spacing for the screen text than the printed text. 3. Sound and UI

TVs using Google TV often connect to the best home speaker systems. Unlike on a computer, on TV, sound is not considered a disruptive factor, so try to use sound in your UI. Keep in mind the following points:

Use sound suitable for the living room environment. Default a low initial value. Suppose your users are using your app and they will watch TV or listen to music. Provide an easy way to mute your app. Do not rely on the audio signal to complete the interaction, but to moderate use. Android has the concept of sound focus, allowing the application to request audio playback exclusively. So, if the main features in your application depend on sound (such as a media player), you should ask for the exclusive sound focus. If the application is playing media in the background, you should set up a sound focus change listener and respect the requests of other applications for the sound focus. More information can be found here. 4. Navigation design

Google TV devices usually include a keyboard and pointing device to control the cursor. Many users will watch these TVs while they are on hand. These two approaches may be combined in a single physical device, which may also contain a mouse. The keyboard is obviously used to enter text. The pointing device is a variation of the D-pad that the viewer can use to position the cursor or focus on a UI element. Additional buttons on the keyboard or pointing device (or both) may provide more traditional remote control features such as control switches, playback, and more.

If you have a mouse, you can control the mouse through the mouse on the screen, click the mouse button under the UI button. To remind again, television is traditionally a broadcasting system rather than a talking system. The user may not have the experience of using the navigation keys or mouse. Even experienced computer users find it difficult to use the mouse on their TVs.

Here are a few guidelines for designing UI navigation in Google TV's apps:

Use the arrow keys to navigate instead of the mouse. The user may be more familiar with this type of navigation using the television remote. If you choose to use the mouse navigation, mouse to provide large selection interface. The clickable buttons are so large that users can more easily position the cursor over them. Avoid complex or quiet mouse navigation. Do not use drag-and-drop and drop-down menus. These are difficult to control in the television environment. Provide highly visible UI feedback for navigation. When the cursor is moved to the options screen, expand or highlight navigation. Use transitions and moves to provide visual cues for continuing or rewinding operations. For example, if a user slides in from the right after selecting an operation, the user may intuitively understand that pressing the left arrow key of the directional keypad will return to the previous page.

Your goal is to provide a navigation mechanism through which users can quickly know where they are going.

To remind you again, TV is neither a computer nor a mobile device. Without a touch screen, its mouse (if any) is hard to control. To simulate a user's mindset while using TV navigation, try using navigation in the simulator running the Android application without using a mouse. How intuitive is the interface? What can I do to make them perform better?

4.1 Direction key navigation

Arrow keys restrict movement to upper, lower, left and right. Use the Enter key or the OK key in the middle of the arrow keys to trigger the operation of the cursor.

Users need directional navigation keys to quickly and easily interact. Keep in mind that the user is navigating some distance away and may also be in the dark!

When you are designing for directional key navigation, follow these guidelines:

Make sure the directional arrow button navigates to all visible controls on the screen. If you use a directional key to scroll through a list, make sure that the user can select one of the elements in the list, and that the list still scrolls when an element is selected. If multiple items are selected in the application, make sure the user knows exactly which one they are currently choosing. Make sure all "selected," "focused," and "selected and aggregated" states are available in any UI project in your application that can use the directional keyboard

To learn more about directional key navigation, read the "Guidelines for UI Controls" in the Google TV Android Development Guidelines.

4.2 mouse navigation

On the TV screen, the mouse moves a small, far cursor arrow. Because the mouse controller itself is a touch pad or trackball rather than a traditional mouse with a sliding ball, mouse control is more difficult. Help your users use the mouse:

Zoom in on UI controls (such as links or buttons) that each cursor can access and leave enough space around the controls. Add a "hover" state, the appearance of the control will change when the cursor passes the control. Use arrows to let users know what's available outside the screen. Use the arrow as a control, click to go outside the page. 4.3 Navigation help

For most users navigation in the ten foot environment is fresh. Use the help button or the action bar button to trigger the dialog giving them textual help. The content covers the following:

Navigation keys: Can they switch pages? Can they open the context or navigation menu? Back button: Can it return to the previous page? Can I undo the last action? Can it close a popup window? Media Button: Press Play / Pause Button How? Press fast forward / rewind it? Other buttons: is to cancel or close the pop-up button? For example, ESC can close a pop-up window?

You may want to show the help dialog automatically when your users first use your app.

4.4 vertical scroll

Vertical page scrolling is basic for desktop browsers, which may not be as good on television. Scrolling may be slow and jerky, important information may be hidden from the screen. Because the user does not understand this scrolling can be sustained.

Instead, use a horizontal layout and provide a visual transition between pages. If you want to use vertical scrolling, limit its scope to the detail area in the page. Keep the left navigation bar fixed. In addition, keeping the context easy to understand will be better understood by the user.

4.5 Category navigation

Place the category (the item that you will put in the menu or tab) on the left side of the screen. On television, there is plenty of space in the horizontal direction, but limited in the vertical direction. Try to keep the category selection on the screen as much as possible, for which you may have to reduce the number of categories. If you want to move your phone app to your TV, consider redesigning or at least testing for complex nested navigation with many subdirectories.

4.6 Selection

On the TV screen, it is not easy to position the cursor on the options, in order to help users make the choice, follow these guidelines:

When the cursor stays on the control (ie hover state), highlight the selected control. Make sure the optional controls are large enough and leave enough extra margin for the text label. Do not use traditional widgets, such as using the "close" button in a corner of a window. This may be difficult to find, may not be easy to choose, or even both. Avoid using the mouse to close the pop-up window, for example, the user clicks outside the window and the PC application closes. This approach is not obvious in a ten-foot environment. Instead, provide a clear and unambiguous control for closing the dialog and make sure that the directional keyboard has access to it. It does not require the user to select the primary control to activate it, but to have the primary or default control active (focus on it) and highlight it. If a part of a window or dialog box needs to be scrolled, it automatically focuses on it or allows it to scroll when it is out of focus. Allowing users to click on an element before scrolling it is a tough one. 4.7 Context, choice and focus

The pass state of the application includes context, selection, and focus. The context is usually a set of categories, and the choice is the category the user has selected. The focus is on the control or element under the cursor. These controls or elements should have a distinctive highlighting, and the highlighting mechanism should be consistent throughout the application.

For example, if one is on the screen of a movie, the application provides a line that shows different categories of contextual tags. For example, "All Movies", "Latest Releases," "Popular," "Editor's Choice," and more. If the user selects one of the tabs, the "checked" status should be visually different from the changing "focus" status to indicate where the current screen navigation is located. as shown in picture 2:

Figure 2 selection and focus

For Google TV applications, the focus on the direction key is the same as the hover on the mouse. This is the main way for users to understand the state of an application, which can help the user to predict how to move the focus or make a selection.

4.8 focus and focus expected

Like stepping on rocks across a stream, users consider how to move between accepting focused UI elements and avoid those that can not be focused. Use distinctive visual features to help users, such as contours on elements that can be focused on. Differentiating between in-focus and in-focus elements helps users understand your UI. Grid element arrangement of elements is another way to help users (Figure 3).

Figure 3 UI navigation grid mode

The grid is the most visible mapping for the up, down, left and right controls of the directional keypad. If you do not use the grid, the elements may be skewed, on different baselines, or on different vertical centerlines. This forces the user to switch from top to bottom, from left to right, or to confuse the user without knowing how to move the focus.

Some elements, like scrollable lists, may contradict grid arrangements (see Figure 4), in which case you should try to keep the default focus near the grid.

Figure 4 Scrollable arrangement and grid layout

4.9 Visual indication

It is good practice to add an indicator or highlight to a selectable, navigable item in the interface. This can inspire users. Expect users to explore the interface, to explore what is optional, what is not an option is not desirable. The assumption that the UI is intuitive to know is equally unacceptable. Should be carefully marked, parsing UI to get the user's approval and loyalty.

4.10 transition

The use of transitions in the application can inspire users, but it may also confuse them. Make sure transitions convey a meaning, not just visual pleasure. Here are some guidelines:

Avoid overloading the entire page as this can cause the most intense delay. For any operation that affects only one segment, the transition should be within this segment. Make sure progress messages are meaningful and clear, animated images should indicate how much progress has been made, and how much work has not been done. Do not show loading animations for every element in the grid. Twelve items in the grid are animated, messy interface will make it difficult for users to browse. 5. User Interface Design

When you design a user interface, keep in mind the following guidelines:

Maintain design consistency. Maintain the consistency of elemental behavior. Keep all the important operations and options visible, including searching, setting, returning, and more. In the 10-foot environment, invisible elements are easily remembered, even if they are outside the screen or on the remote control. 5.1 Cross-device UI

You have an application on your mobile device and you want to move it to a 10-foot environment. How to convert 1-foot UI to 10-foot UI? Remember, most importantly, bigger is not necessarily better. Tablet is better than smart phone, the computer is better than the tablet, but the TV is better than the computer?

Figure 5 screen size comparison

You might think the 42 "screen is the most powerful, but that's not the case. Smartphones are generally more powerful than TVs. HD video and audio on TV are pre-rendered, so what's needed on the TV is just a connection to a broadcast source In other words, most television's information processing is done by the broadcast source, not the television itself.

With this in mind,