Users can control their Samsung Smart TVs with the Samsung Smart Remote or a standard remote control. Users can also use external input devices, such as a mouse or touchpad, to operate their TVs for some features or apps. In particular, mouse input is only available in a web browser and games/apps that support pointing interactions.
All applications must be designed so that using only the Smart Remote will give access to all of their features.
Because the Smart Remote is constantly evolving, buttons and features other than the basic buttons are subject to change. Hence, in order to make applications that are not restricted by a locale or the TV model, only use the basic buttons described in Basic Controls.
The SELECT button is located inside the four navigation buttons and used to select an item or to confirm the selection.
Table 3-1 illustrates the basic buttons.
Table 3-1. Basic TV Controls
It is recommended that the app should provide an Exit pop-up window when users close the app.
The on-screen number pad should appear when users press the 123 button on the Smart Remote. However, it is not easy for users to quickly display and manipulate the on-screen number pad to input numbers. It is not user-friendly, and quick manipulation is difficult. For this reason, designing the application to use only the basic TV buttons detailed in Table 3-1 will improve the usability of the application.
All Samsung Smart TV screens must be controllable using the Left/Right/Up/Down and Select buttons.
When focus is not on either end of the list of items shown on the current screen, moving focus only moves focus in the pressed direction and does not move the content.
When focus is on either end of the list of items shown on the current screen, moving focus moves focus in the pressed direction and moves the content in the opposite direction.
Focus does not loop in a list. Thus, focus stops moving when it reaches the first or last item in a list, even though the appropriate directional button is still pressed.
Figure 3-2. Example of focus movement in a horizontal list
Figure 3-3. Example of focus movement in a vertical list
In a list of items with various sizes, the focus's movement route may diverge at some places where the previous item borders two or more adjacent items. To keep navigation consistent, follow the guidelines below:
Figure 3-4 illustrates how focus moves through items in a grid layout. Based on the guidelines described above, focus moves along the route and reaches item A.
When focus moves between two different areas, the focus's movement route should also follow these guidelines. However, if the two areas have different hierarchy levels, refer to Tab UI.
As an efficient navigation method for users to view multiple groups of items on the same screen, tab UI consists of tabs and related pages (or content lists). Tabs are a list of categories and allow users to easily switch between different content lists. There are two interaction types depending on when the system displays the related content list of the focused category.
The first item in a content list should be in focus when focus moves from the category area to the content list.
The current category should be in focus when focus moves from the content list to the category area. Then, when focus moves from the category area back to the content list without any focus movement in the category area, the previously focused item in the content list should be in focus again.
The previously focused item in the content list should be in focus when focus moves from the category area to the content list after users moved focus in the category area but did not select another category.
Figure 3-8. Example of focus movement between the category area and content list without a category change
The first item in a content list should be in focus when focus moves from the category area to the content list after users selected another category in the category area.
Figure 3-9. Example of focus movement from the category area to the content list after changing the category
The Smart Control enables the user to move a pointer by using motion controls.
When the user puts a finger on the POINTER button, the pointer will be displayed on the TV screen. Moving the remote while continuing to touch the remote control will then move the pointer. Pressing the POINTER button will select the object that the pointer is hovering over.
Pointing is the method of moving the pointer on the screen freely using the Smart Control, Motion Control, or a mouse.
All of the objects that can be run must be selectable using the pointer. When the pointer hovers over the selectable object, it must give back visual feedback that the object can be selected, as shown in Figure 3-10.
In a TV environment where the screen and the user (and their input device) are far apart, it may not be easy to select objects by using pointing. For this reason, if you wish to apply pointing to your application, you must design the selectable objects to be large enough and with reasonably large gaps between them so that they will be easy to navigate via pointing.
The pointer should be clearly visible against other UI elements on the screen. However, avoid providing too much contrast, since it may cause user’s eye fatigue.
There are three types of pointer states. See the table below for more information.
Table 3-2. Types of pointer states
The pointer size should consider the viewing distance and the target age group of the application users.
For the recommended pointer size for each application resolution, refer to Table 3-3.
Table 3-3. Pointer size for specific application resolutions
When the pointer is out of an object, the object is not highlighted and cannot be activated. Only when the pointer is over an object, the object can be highlighted or activated (no extended rollover).
Some objects can be focused on to indicate what the current page/content is. In cases like this, rollover and focus function independently.
An object is selected when the pointer is clicked and released while over the object. Selection occurs after the pointer is released.
If the pointer is released outside an object, then the object is not selected. When the pointer moves away from the object before releasing, the rollover effect (e.g. highlight or zoom) is removed, which indicates that the object will not be selected when the pointer is released.
Above scenario is valid only when the objects are not movable. For movable objects, moving scenario has priority. Refer to Dragging Items.
Dragging is performed by holding down an object and then moving the pointer passed a predetermined threshold. The direction and distance of dragging is the same as the direction and length of the red dotted line as shown below.
Before dragging starts, the pointer position must move from the location where the initial hold down action was performed. The object position is adjusted to compensate for the pointer position change before dragging starts.
Users should be able to move the viewing area with the drag feature when the image is larger than the TV screen.
1D movement : Horizontal or vertical movement is available
The viewing area can be dragged only in the Y (or X) direction regardless of pointer movement. This occurs when the viewing window width (or height) is smaller than or equal to the screen size. The distance of dragging corresponds to the distance of pointer movement in Y (or X ) direction.
2D movement : Movement in every direction is available
In general, the viewing area can be freely dragged in any direction.
Scroll boxes are different from other UI components since scroll boxes can only be moved on a set track. In this case, even if the pointer goes outside of the scroll box while dragging, scrolling will continue.
Automatic scrolling is a feature that moves a scrollable list to its next or previous page. When the pointer hovers over an auto rollover area in a scrollable list, the list automatically moves to the next or previous page of the list. (All objects on the screen move in pixels.)
In applications or user interfaces that support the automatic scrolling feature, the last, or the first and last, scrollable objects on the screen should have visual cues.
The example above illustrates how automatic scrolling works.
The focus disappears when a list is being scrolled. When scrolling stops, the object on which the pointer is located is focused on.
Figure 3-23. Automatic scrolling
When using pointing on lists that scroll, indicators that show scrolling is possible must be included, as shown in Figures 3-24 and 3-25. When you select an indicator using the pointer, the list will scroll by one page in the indicated direction.
You can also take advantage of the free movement provided by the pointing method and provide a scroll bar/slider/play bar to help users navigate to their desired location.
During pointing interactions, all screens must have an EXIT button (icon type) in the upper-right corner of the screen. If a user clicks the EXIT button, it closes the application and returns to the TV screen.
During pointing interactions, all screens except for the top-level screen must have a RETURN button (icon type) in the upper-left corner of the screen. If a user clicks the RETURN button, it returns to the previous screen.
When a pop-up window is displayed, clicking an area outside the pop-up window has the same effect as pressing the RETURN button.