top

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.

Note

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.

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
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.

It is recommended that the app should provide an Exit pop-up window when users close the app.

Figure 3-1. An example of Exit pop-up

Figure 3-1. An example of Exit pop-up

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.

Figure 3-4. Example of focus movement in a grid layout

Figure 3-4. Example of focus movement in a grid layout

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.

Figure 3-5. Example of focus movement between different areas

Figure 3-5. Example of focus movement between different areas

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.

Figure 3-6. Example of focus movement from the category area to the content list

Figure 3-6. Example of focus movement 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.

Figure 3-7. Example of focus movement between the category area and content list without a category change

Figure 3-7. Example of focus movement between the category area and content list without a category change

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.

Figure 3-10. Screen when using pointing (Samsung Smart Control)

Figure 3-10. Screen when using pointing (Samsung Smart Control)

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.

Figure 3-11. Good(left) and bad(right) examples of the contrast between the pointer and the screen

Figure 3-11. Good(left) and bad(right) examples of the contrast between the pointer and the screen

State

There are three types of pointer states. See the table below for more information.

Table 3-2. Types of pointer states
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.

Size

The pointer size should consider the viewing distance and the target age group of the application users.

Figure 3-12. Good(left) and bad(right) examples of the sizes of pointers

Figure 3-12. Good(left) and bad(right) examples of the sizes of pointers

For the recommended pointer size for each application resolution, refer to Table 3-3.

Table 3-3. Pointer size for specific application resolutions
App Resolution Recommended Size (Unit : Pixels)
FHD 1920x1080 90 x 90
HD 1280x720 74 x 74

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).

Figure 3-13. Example of rollover

Figure 3-13. Example of rollover

Some objects can be focused on to indicate what the current page/content is. In cases like this, rollover and focus function independently.

Figure 3-14. Rollover and focus functioning independently on the same screen

Figure 3-14. Rollover and focus functioning independently on the same screen

Selection

An object is selected when the pointer is clicked and released while over the object. Selection occurs after the pointer is released.

Figure 3-15. Example of selecting an item

Figure 3-15. Example of selecting an item

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.

Figure 3-16. Moving the pointer while selecting an item

Figure 3-16. Moving the pointer while selecting an item

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.

Figure 3-17. Dragging an item

Figure 3-17. Dragging an item

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.

Figure 3-18. Example of dragging an item

Figure 3-18. Example of dragging an item

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.

Figure 3-19. Example of 1D movement

Figure 3-19. Example of 1D movement

2D movement : Movement in every direction is available
In general, the viewing area can be freely dragged in any direction.

Figure 3-20. Example of 2D movement

Figure 3-20. Example of 2D movement

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.

Figure 3-21. Dragging the scroll bar

Figure 3-21. Dragging the scroll bar

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.

Figure 3-22. Automatic scrolling

Figure 3-22. Automatic scrolling

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.

Figure 3-24. Examples of indicators provided for a vertical list

Figure 3-24. Examples of indicators provided for a vertical list

Figure 3-25. Examples of indicators provided for a horizontal list

Figure 3-25. Examples of indicators provided for a horizontal list

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.

Figure 3-26. Example of a slider

Figure 3-26. Example of a slider

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.

Figure 3-27. Location of the EXIT button

Figure 3-27. Location of the EXIT button

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.

Figure 3-28. Location of the RETURN button

Figure 3-28. Location of the RETURN button

When a pop-up window is displayed, clicking an area outside the pop-up window has the same effect as pressing the RETURN button.

Figure 3-29. Clicking an area outside the pop-up window

Figure 3-29. Clicking an area outside the pop-up window