Apps Screen

Application Resolution

The resolution of an application affects the clarity of scale, text, and images of its components on the TV screen. For details, refer to Figure 1.

A higher resolution results in higher picture quality on the TV screen. The required resolution for the Samsung Smart TV application is 1920x1080 pixels for UHD, and 1280x720 pixels for FHD.

Using image files with a resolution other than the default application resolution can cause image quality deterioration. It is recommended to use a resolution image of the default size (such as 1920x1080 pixels).

Using a high resolution may affect the application size and performance. It is recommended that you test run your application on a TV and check its performance in these situations.

Typography

One UI Sans

One UI Sans is the default font for Samsung Tizen. It is also the default font used by all Samsung Tizen operating systems.

Font Weights

Different font weights are necessary to present text for various purposes. One UI Sans has four weights so that you can make your application more aesthetically pleasing by using these four weights consistently.

Each weight is assigned a number instead of being given a name, such as medium. This is to allow other weights to be easily added to the current group in the future.

Samsung One UI Sans has four weights: 200, 300, 400, and 600.

Language Coverage

One UI Sans currently supports the Latin and Korean alphabets. Additional languages may be available later. Other languages will be shown as Samsung One UI.

Legibility

Legibility is the most important factor in typography. Text should be legible on all screens.

Sizes

We recommend that you use the set of font sizes illustrated below. On a special screen that is not related to any other screens, you can use font sizes other than the ones listed below. However, they should not be smaller than the smallest font size shown below.

Leading

We recommend that you keep line spacing at 1.2 or 1.4 times larger than the font size being used. We also recommend that you keep the line spacing specified in Figure 6 when you use the provided font sizes.

Colors

We recommend that you use the font colors shown below for warning messages, highlighted text, and selected items.

Categories and Layouts

Applications can be designed into a few levels of information to effectively explain their details and features. Depending on the application’s characteristics, categories can be displayed horizontally in the top right-hand corner of the screen, or vertically at the left-hand side of the screen.

Horizontal Style

This is the method most generally used on the TV.

Figure 8 (Left) shows that the items are listed horizontally at the top of the screen. This content list will employ horizontal navigation and the content will be arranged from left to right.

Figure 8 (Right) shows what happens when there are too many rows in the content list to use a horizontal layout. The use of four-directional focus movement may be difficult, impeding movement between the list of content and the categories. For this reason, we do not recommend this type of layout.

Vertical Style

For applications with several or variable number of categories, the vertical style format may be more useful.

Figure 9 (Left) shows that the categories are displayed vertically at the left-hand side of the screen. You may freely use up-down scrolling on categories or a list of content.

Figure 9 (Right) shows what happens when there are too many columns in the content list to use a vertical layout.
The use of four-directional focus movement may be difficult, impeding movement between the list of content and the categories. For this reason, we do not recommend this type of layout.

Content List Configuration

Content lists can be designed freely, using thumbnails, text, etc. The following two methods are, however, the most commonly used.

Grid Style

This style is ideal for contents to which thumbnail information such as pictures and videos are crucial. The grid style typically contains thumbnails and content names.

List Style

The ideal format for simple text content. It typically contains content titles and related textual information.

Content List Navigation

Navigation of the content list is divided into moving focus and fixed focus methods.

Moving Focus

The list is fixed on the screen. The focus moves from one content item to the next.

Fixed Focus

The focus is fixed on the screen. The list moves, similar to a scrolling action.

Table 1 lists the benefits of each navigation type.

	Moving Focus	Fixed Focus
Characteristics	Easily corresponds with various input devices, such as the Smart Remote, Motion Control, and mouse. The visual effects required are not as complex as for the Fixed Focus method.	Useful when displaying additional information for the item currently focused on. The entire content list moves during navigation, which gives a grander visual effect.

Table 1: Characteristics of moving focus and fixed focus

Position Indicators

When it is necessary to scroll through a long list, a scroll bar will appear to show the current position in the list.

• The length of a scroll bar is determined by the number of scrollable objects.
• A scroll bar cannot appear on restricted user interface areas.

When users enter a page where scrollable objects exist, a scroll bar appears for 2 seconds. For pages that include two or more auto rollover areas, all scroll bars appear simultaneously for 1 second when the page opens.

Figure 14: Scroll bar shown when a page is open

A scroll bar only appears on the right or at the bottom of a list being scrolled currently. The scroll bar appears while the list is being scrolled and disappears 1 second after scrolling stops.

Figure 15: Scroll bar shown when a list is being scrolled

A scroll bar should always appear next to the text lists or body text when they are scrollable.

Progress Indicators

When opening an application or loading data takes a long time (100 ms or longer), users must be clearly informed that their request is being processed. There must be visual confirmation that the screen is going to change soon. Once it is displayed, it must not disappear until the task is complete.

The notification needs to include an image and a message. The message should be accurate and detailed about the current task. If possible, it is useful to show an animation such as a progress bar, as shown in Figure 17, to show how much of the process has been completed and how much is left to go. When it is not feasible to show the progress or ETA, use a loading indicator as shown in Figure 18.

Figure 17: Progress bar	Figure 18. Loading Indicator

If the animation for the progress bar or the indicator slows down the process, using a text-based message to explain that the task is in progress is an acceptable substitute.

The notification is generally shown in the center of the screen, as shown in Figure 19 But to show that only a part of the screen is progressing, the notification can be shown at the center of the item that is loading, as shown in Figure 20. However, keep in mind that multiple notifications on a single screen will look cluttered and can confuse the users.

Figure 19: Guide to the overall screen	Figure 20. Guide to a portion of the screen

Popup Window

A popup window is used to let users perform actions related to the current task or notify them of the current system status.

A popup window always appears on top of other content as it uses a separate UI. When a popup window is displayed, all areas outside the popup window become unavailable and appear dimmed. Thus, any actions from user controls do not affect the area outside the current popup window.

A popup window generally consists of components, such as the title, body, and buttons, as shown in Figure 21.

The purposes of popup windows are classified as follows:

• Message
• Action
• Toast

By default, a popup window automatically disappears when the user is inactive for a certain period. For the recommended duration of popup windows, refer to Table 2.

Popup Type	Duration
Message, Action	60 seconds
Toast	3 seconds
PIN, Unusual information	Does not disappear automatically

Table 2: Screen duration for each popup type

Message

A message popup window is used to display error messages, status information, and the result of users’ actions, or to ask for confirmation. With this popup window, users can also proceed to the next step.

A button to close the popup window should be included and it should be the final button in the button list (rightmost in a horizontal layout and bottommost in a vertical layout).

Action

An action popup window is used to allow users to change values or customize various settings. In general situations, users can continue the ongoing task without being taken to other screens.

The body area can be composed of a combination of various components, such as a list, buttons, and check boxes, that allow the user to adjust values.

When an action popup window is displayed, the first item in the body area is in focus.

Generally, buttons are located at the bottom of the popup window. However, if the popup window contains a long list of vertical items, buttons may be located on the right of the popup window. A button to close the popup window should be included and it should be the final button in the button list (rightmost in a horizontal layout and bottommost in a vertical layout).

Toast

A toast popup window is used to display simple messages or the results of the user's actions that do not require further user actions or confirmations.

Toast popup windows should appear around the component where the user’s last action occurred. This helps users easily find and check information without having to look for it. However, if the screen that the user’s last action occurred on is already closed or the toast message is not related to the user’s last action, toast popup windows should appear in the center of the screen.

Unlike other popup windows, a toast popup window only consists of the body area and it does not make other components unavailable, meaning they are still controllable while the toast popup window is displayed on the top.

Feedback to User Actions and Error Alerts

Users should be provided with the results of the most recent action to prevent them from making mistakes and to be informed of the current status of the system. A message or toast popup window can be used depending on whether the operation can be restored, and unnecessary or repeated alerts should be avoided.

When users encounter an error while using their TVs, they should be given information about why the error occurred and how to solve it. If users can fix the error on their TVs, a button should be provided to take them to the right place.