Input Methods
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.
Samsung Smart Remote
All applications must be designed so that using only the Smart Remote will give access to all of their features.
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.
Input | Basic TV Controls |
---|---|
Four-directional Control | Movement Control (Movement accelerates when it is held down) |
SELECT | [When no function is assigned] No response. No notification given. [When a function is assigned] Execute the assigned function. |
RETURN | [On the app’s Home screen] Close the app. [In other situations] Return to the previous screen based on the hierarchical relationships between the app’s screens. |
Channel Control | [When watching broadcast on full screen or on PIP] Change the channel [In other situations] Not available. A system message shows that the button is currently unavailable. Apps may assign different functions when necessary. |
Volume Control | Display TV Volume OSD and volume control Apps may assign different functions when necessary. |
Playback Control | [When playing media] Control the playback. Refer to Controlling Video Playback with the Smart Remote [In other situations] No response. No notification given. |
POWER | Turn the TV power off. |
Table 3-1. Basic TV Controls
It is recommended that the app should provide an Exit pop-up window when users close the app.
On-Screen Number Pad
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.
Basic Navigation
All Samsung Smart TV screens must be controllable using the Left/Right/Up/Down and Select buttons.
Moving Focus in a List
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
2-Directional Grid-type Items
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:
- Focus should move to the nearest item in the movement direction.
- The distance between two items should be determined by the distance from the middle of the two items.
- The start point should be memorized and affects the movement route.
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.
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.
Content List Immediately Displayed When a Category is in Focus
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.
Content List Displayed When a Category is Selected
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
Pointing (2015 Only)
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.
Controlling the TV Using Pointing
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.
Pointer
Visibility
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.
State
There are three types of pointer states. See the table below for more information.
State | Description | Example |
---|---|---|
Normal | When the pointer is over a non-clickable item. | |
Rollover | When the pointer is over a clickable item. | |
Click | When the pointer is clicked over a clickable item. |
Table 3-2. Types of pointer states
Size
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.
App | Resolution | Recommended Size (Unit : Pixels) |
---|---|---|
FHD | 1920x1080 | 90 x 90 |
HD | 1280x720 | 74 x 74 |
Table 3-3. Pointer size for specific application resolutions
Rollover
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.
Selection
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
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.
Dragging the Viewing Area
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.
Dragging the Scroll Bar
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
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.)
- Scrollable lists consist of objects, such as thumbnails, text lists, icons, buttons, and more.
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.
- On pages that have more scrollable objects outside the viewable client area, the last object (the far right or bottom object) is partially visible; that is an auto rollover area. The actual size of the auto rollover area may be smaller than the partially visible area.
- When the pointer hovers over an auto rollover area and moves to the next page, the first object (the far left or top object) on that page will also become partially visible; that area becomes an auto rollover area. The actual size of the auto rollover area may be smaller than the partially visible area.
- A scroll bar appears when a list is being scrolled. For general information about when to use a scroll bar, refer to 'Position Indicators'.
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
Scroll Indicator
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.
Scroll Bar/Slider/Play Bar
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.
Return / Exit
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.