The focus of the design sharing of the intelligent TV user experience

As an emerging industry, intelligent TV has a poor knowledge of the relevant user experience in China. Today, please be responsible for the smart TV app design 1.5 @ Bu Carrot 1992 to share some practical design experience, popular science TV user experience basic knowledge.

Into the intelligent television industry 1.5, successively in the traditional TV brand and internet TV rookie brand user experience Department work, the specific work is the TV end App,launcher interactive and visual design, mobile phone-side TV related app design.

Two years ago, as a new TV UI, I started to learn that there were few interactive and UI tutorials on TV, and there were few related articles. Two years have passed, the major design sites to search for a smart TV UI, even less poor that little thing. All the big do TV Shige sister, why are you so stingy with pen and ink greasy? Can you write a tutorial to teach our new little meat? Well, no nonsense, now I'm no longer a little meat, I just want to be able to work for two years to learn things are recorded, if the day is a want to do the TV UI of fresh meat to see, Hope to help.

This article first talk about the TV user Experience first element: Focus, the program is called focusing.

The mobile End page has clickable content and clickable content, accordingly, to the television, we have "can get focus content" and "not get focus content". (General TV content is to get focus, only some of the suggestive text has no focus attributes) First look at two pictures

This is the famous TV circle. When the PayPal Market home page, the top tag focus and content focus style, which is currently the most TV-side app focus style. This focus is simple, beautiful and eye-catching.

Now let's talk about TV focus visual design the first question to pay attention to: where is the focus?

　　Design principle: The focus should be eye-catching

Suggested method: Use strokes, external glow, magnification, or other animations to enhance focus visual effects. Of course, is not the more exaggerated the better, to handle properly, suitable for the best.

The focus of the TV screen is also the user's visual landing, the user looked for the Mansi also do not know where they feel is very collapse. Without knowing where the focus is, there's no way to predict what happens when you press the remote. Let's look at a picture with a very weak focus:

Since millet first used a fashion pictorial on TV screen saver, a batch of screen saver pictures of TV app appeared, pictured above is a style of wind fan app for the first time using the Setup interface. Left, dark and light button, which is the focus? Suppose the focus is on "skip", while the user thinks the focus is all selected, and the remote control skips the interface, the user will be surprised. "Eh, I pressed what ah!?" If the next page does not support returning a new edit, the user will be very broken. The focus of this app is not too obvious, look at the right picture, no amplification and no external glow and no dynamic assistance, but fortunately, can be distinguished from the clear.

The second question to be noted: Should the focus style be unified?

　　Design principles: The style is as uniform as possible, so it feels like a family.

Suggested method: The outer glow Marquee focus, replace the color focus as far as possible not to mix use. Animation Focus also do not have a lot of animation style, as far as possible unified.

See above, color block card is the most popular TV UI form, if the focus style is also color block, will inevitably cause visual confusion, the following figure I give an example.

Shrimp Music Search button focus style, and QQ Music Search button focus style, which more directly understand some? It is obviously QQ music, it seems that the Goose factory's focus on the TV app is also studied Ah, haha. And I'm going to talk about the focus of a page in the Internet TV rookie Storm TV.

Did you find the focus? Yes, the focus is in the lower left corner of the "not logged in" where, this is an animation effect, the Storm TV UI uses a lot of soft micro-animation, creating a good atmosphere. Millet TV UI also has a lot of touch in place animation, le see do not mention, the music is just out of time in that era really good-looking, but how these years there is no design innovation, feel its UI are abandoned by the times.

　　The third problem to note: The memory of the focus path

This problem with plain text is more difficult to express clearly, first look at the following figure:

Take more rice music and QQ music for an example. In Dom, the first time you use the app, focus on position 1, press the remote right button, the focus will fall to position 2, at position 2 press the key, the focus falls to position 3, the position 3 presses the left key, the focus will return to position 1, at this time again in position one press right key, the focus will fall in position 3, but is not the first use position 2.

The way of QQ music is different, whether it is the first time to use, focus on position 1 o'clock press the key, the focus is always falling in focus 2. The way of QQ is first up and down, first left and right in order. The shrimp will remember where the focus is, and follow the principle of where and where to go. Shrimp music is better at this point than QQ music, because it is always considerate to remember the user's last step.

　　Design principles: From where, back to where

Suggested method: Remember the previous action of the user (that is, the location of the previous focus), and use the last remembered method when performing the same action again.

This method applies not only to focus movement, but also to page switching. Position 1 in the A interface to the B interface, which from the B interface back to a interface, the focus should also be in position 1. Perhaps you will feel that a small focus position, it is necessary to tangle so much? For TV interaction, really need to consider so much, you do not write clearly, programmers do not know how to do, some will be confused, or directly ignore this problem, resulting in poor user experience. Of course, experienced programmer brother will automatically improve your interactive manuscript, these programmers brother also often put forward in the interaction of imperfections, is simply interactive small helper. Of course, as an interactive designer, we can not expect the programmer brother Ah, if he is also a rookie-grade meat swelling do!

　　The fourth issue to note: Get focus, execute VS. Get focus and press confirm key to execute

The elements on the TV should have five states: 1. The normal state 2. Focus Status 3. Press status 4. Mark status 5. Semi-selected state.

Where the "semi-selected state" is an interactive state, which is visually the same as the "focus state", the semi-selected focus moves to the content but does not perform the action, and the confirmation key needs to be pressed again to respond to the action. This state is common in the Settings menu for the video playback or audio playback interface, where the selection is to be changed for the current interface. For example, Archie Art TV-side video playback interface Press "Menu key" to pull out the selection menu (below the left), Storm TV video library Inside Press "Menu key" to bring up the settings menu (bottom figure right)

Both the left and right side of the diagram have marked and semi-selected states, both of which are always in pairs. The semi-selected state is the Change button that the user is about to make, and the status is marked to mark the current pattern.

The semi-selected state is very popular when Smart TV was first born, the major manufacturers of the launcher interface on the top of the tab are used in a semi-selected state, because at that time the technical constraints, television refresh frequency is slower, if the shift focus changes the screen, cotton phenomenon is very serious, so the television industry has a "semi-selected state" , the user moves the focus casually but does not perform the action (in fact, many users will be bored to move the focus to play), to the desired location to be determined before performing the operation. This user experience is very fluid, so now the Internet TV, a bit better app, is to follow the WYSIWYG principle, focus shifted to the past to carry out changes (in fact, there is a 200ms delay Oh, the programmer brother said 200ms will not be detected by users, is the general process of delay execution time).

There are also cases in which you have to perform a semi selected state, such as selecting a series

This kind of scene, you certainly do not want the focus each time the picture all follows to switch, that simply is too not fluent, if the network speed is not good, simply is to crash the experience.

In fact, there is no absolute distinction between the state and the selected state, but I think this description in the work and people communicate more easily, if the strict pursuit of literal meaning I say is not rigorous. The main people know that there is such a special state of television is good, similar to the computer hover effect bar, on the mobile end I did not think the corresponding effect. About getting focus is to execute or get focus on the implementation after the determination, really is to specific circumstances specific analysis, the main thing is running on TV, Operation fluent Ah! So here is not to write design principles and recommendations methods, the author's limited ability also afraid to write do not understand. When I have the time, I will analyze it separately as a case.

Just put the Setup menu this thing leads to, that menu fell out how to take back? Do you press the return key or press the OK key? Do you want to save the current changes? When you follow the principle of "where to go back and forth", are you going back to the previous, semi-selected state or to the flag State? This leads to the next big problem: The remote control of the common buttons should have a reasonable function.