Smart TV UI Design Things

With the release of Google TV on the international market and the footsteps of domestic TV manufacturers to launch custom Android TV, the smart TV platform has become a new market for many High-tech enterprises. Older Intelligent TV platform explorers include Google TV, Apple TV and Samsung Smart TV, as well as the legendary ITV that will be listed. Some well-known foreign services, such as YouTube, Twitter, Netflix and so on, are published on these platforms. As domestic TV makers use Android more, let's talk about designing apps on Android TV.

The use characteristic of intelligent TV--distance, light dark, operation mentality is more passive

Figure 1 TV usage environment

TV's use environment is more special. Most of the size of the smart TV is more than 42 inches, the environment should be between 2.7-3.5 meters. So although the TV display area is much larger than most PCs, but because of its operating distance, resulting in a single screen display less information than the PC.

"Figure 2" living room lighting environment
As shown in Figure 2, there are many users who use the TV with their backs and dim lights to operate the TV with the remote control in one hand and a snack in the other. This "backward" state determines:

TV users are more passive, and TV interaction is more as the recipient of information, can not achieve an immersive state.

Therefore, in the TV interface design, it is best to let users through the key and OK to operate, and provide a return key to avoid the user looking down at the remote control to find the key to interrupt the operation of the task flow.

App application on TV platform "Figure 3"

Usually the voice of the TV is not objectionable or disturbing, because the TV channels and apps are mostly "consumer" content, and TV standard audio system (volume is the default to open). So in app design, you can use sound as a hint of help and action feedback.

Navigation design-remote control and navigation structure

When it comes to TV's UI design, you have to start with navigation. As mentioned above, TV users are more passive, so a clear and efficient navigation system is needed to help users quickly navigate to what they want to see.

Navigation is closely related to input devices, and the most important input device for smart TV is remote control, sometimes supplemented by mouse and keyboard. The following legend is the input device for Google TV and Apple TV.

Figure 4 Input devices for Google TV and Apple TV

From the diagram we can see that the new smart TV input device with the cross arrow key and OK key as the core, so the TV app navigation based on the above direction key and OK key design.

"Figure 5" the Xbox and PS3 navigation interface

As the smart TV platform app is newer, here we refer to the more mature TV platform gaming system for discussion, the above image is the Xbox and PS3 interface, these two products can be used for reference because of their operating mode and the use of the environment and intelligent TV system is more consistent. They all use the structure of the cross navigation. The advantage of this structure is that the main navigation and level two navigation at the same time, and with the cross direction key perfect fit, through the arrow keys in the main navigation and two-level navigation between the fast switch. With this structure, the item in level two navigation can only be used for a single operation because the arrow keys are occupied by the dominant navigation. If you have multidimensional operations on item in level two navigation, you need to confirm that the next Level list is expanded.

"Figure 6" Google TV's navigation interface

The image above is Google TV's operating interface, which uses the left and right compartment mode, the left side is the navigation, and the right-hand side is a two-level container. The logic of this structure is actually different from the cross navigation mentioned above, the difference is that the information inside the container is more flat, intuitive and visual, the container inside the item operation direction will not be limited. But correspondingly, if you want to move the focus from the container back to the left navigation, you need higher operating costs.

"Figure 7" Samnsung SmartTV navigation interface
The figure above is the recently released Samsung Smart TV, which uses a block-style navigation structure. In this structure, each block is operated independently, the information organization is more flat, and some modules are similar to the widget concept, which is both the presentation of information and the entry of operation. The disadvantage is that each module in the direction of the operation of the item will have a certain limit, otherwise it will lead to the switching costs of each module increase.

Figure 8 Vinyl flow and list information organization
Also want to introduce two kinds of information display way, is the vinyl flow in the left picture and the list in the right picture, these two kinds of methods adopt single direction navigation. Vinyl flow this way the visual impact is strong, the single screen information load is limited, the focus of the movement of two ways will be stated in the following text; This list way on the right. The visual impact is weaker, the single screen is larger, but there is a difference in the TV platform processing list and PC: TV and to control the length of the list, because although the remote control direction key can enable long press acceleration, but always can not achieve like PC-side mouse Drag scroll slider control browsing speed and positioning performance.

Three states of the "Figure 9" Navigation item
In the design of navigation based on the cross key, navigation items generally exist in three states, namely "selected", "Focused" and "selected and focused". If a category item (category) and an action item (action) are available on the navigation, the focus move does not toggle the contents in the right container. When all of the category items are on the navigation, the focus can move with the selected state, and the right container moves the contents with the focus.

To sum up, navigation design principles are as follows:

The goal of the navigation design is to enable users to quickly locate and to predict the results of the operation.

Focus Control

After the navigation structure, is the focus of mobile issues, the following several illustrations briefly on the TV platform focus on mobile issues.

Figure 10 Navigation focus State Response Area
The remote control is standard for all TVs, and smart TVs generally support mouse and keyboard operations, so the controls are similar in status to PCs. When using the remote control, the state of the control is equivalent to using the TAB key to browse the Web page or to manipulate the desktop software, which is the control-checked state switch, while using the mouse and the PC-side control to have a hover state. Because the TV's operating distance is very far, and the TV's external mouse may be empty mice (its operation is not as easy as the PC mouse), so in the design of the TV control for the mouse hover state to increase its response area, user-friendly operation.

Figure 11 Focus moves through the list
The example on the left of the above illustration is a typical vinyl-flow navigation in which the page card scrolls and the focus is fixed to the center. In a one-way list or navigation, the focus of the fixed way can be very good to avoid when the list of more items, the navigation focus has been at the bottom of the list is the screen corner (the user's eyes for a long time to stay corner) and the fatigue caused by.

On the right example above, the page card does not move, the focus moves the selection. In this way, when the focus moves to the right end of the list to continue scrolling, it is best to use the page-flipping effect. This effect is to solve the above point of view stay corner problem, the second is can and page controller control together, let the user know in the list place.

Figure 12 Focus Move Path
The image above is a screenshot from the Google TV Design Guide that advocates the use of green paths in the diagram to avoid red diagonal paths:

1. The pure focus moving path is best straight and area aligned, as shown above, if the move from a along the Green line to B can be better perceived and understood by the user;
2. High focus movement to avoid a large range of transfer, the focus of large-scale transfer will make users feel the focus is lost;

Finally, the relationship between focus and control. Many controls on PCs and mobile devices have a strong sense of click, so users can distinguish between controls and non control elements more clearly. On the TV platform because the input device is designed based on the remote control and loses the common click feeling of the control, it is difficult for the user to distinguish which elements are descriptive and which are controls. So the controls on the TV platform are designed to be as attainable as possible

Visual elements can get focus, hints, and descriptive elements to make a clear distinction between visual and spatial locations and controls.

Color and resolution

Figure 13 Color Error using
For the performance of the TV monitor itself, the following points need to be noted in the design of the visual aspects of the UI:

1. White (#FFFFFF) in the television will produce image drag shadow, if you need to use white, you can use #f1f1f1 (hex) or 240/240/240 (RGB) to replace;
2. High saturation color will cause distortion, and in the high saturation color to low saturation color transition will produce edge blur;
3. A large range of gradients will result in banded display, can not smooth transition;
4. At the edge of the interface, it is best to leave 10% gaps to avoid the "over scan (edge)" phenomenon that is unique to the TV display.

Figure 14 resolution and color mode
At present, there are two kinds of resolution modes of intelligent TV 1920x1080 and 1280x720, that is, we often say 1080p and 720p, in the UI design should:

1. High-resolution design, you can use the Android 9-patch Chettu for low resolution, in the test when the choice of low resolution test can better detect problems;
2. Ensure that all TV display modes are tested without problems.

New ways to Interact
Finally, I want to introduce some of the most recent interactions on some TV platforms:

"Figure 15" TV platform novel Interactive mode
The Xbox has already seen the use of gestures for control and voice control navigation. Gesture control has been successful in the Xbox's Kinect, but the problem is that it relies on a three-dimensional camera, the currently expensive device, and the two-dimensional camera's gestures, the user experience, do not achieve the desired results. As for voice control, the existing equipment is largely fully supported, and in the biography of jobs, Jobs claimed to have cracked the smart-TV code, with voice control at its core.

Another novel interaction point is the password input module of the Samsung Smart TV. As we all know, text input has been a dream nightmare of remote control. All input on PCs and mobile devices is a step, and the selection is earned. The input on the TV is always "select-Confirm" and interrupts the "task flow" that the user enters continuously. On the other hand, the soft keyboard on the TV set up a mapping with the remote control nine number key, press the number key on the remote control will put the letter of the TV software disk into the input box, this practice in the "exclusive" task flow can increase the efficiency of text input.

The article is part of the graphics and text reference to Google TV and Samsung Smart TV design guidelines, interested in the following links can be clicked to expand the reading.
Google TV Design

Samsung Smart TV User Experience Guidelines