4. Considerations when Configuring the Apps Screen

4.1. App 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 4-1.

A higher resolution results in higher picture quality on the TV screen. The HD resolution of 1280 x 720 is recommended.

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

Figure 4-1. App Resolution

4.2. Fonts

Samsung SVD Font supports the languages used in all of the locations that Samsung Smart TV is distributed to. It is included with the Samsung app development tools (SDK).

For the recommended/minimum font sizes that provide good legibility, refer to Table 4-1. The font size must not be smaller than the minimum size.

Due to the difference in resolution between the TV and the application, the clarity of the text may differ when shown on TV. If possible, it is recommended that you check the application on a TV screen from the standard viewing distance of 3 meters (10 feet).

App Resolution	Recommended Size	Minimum Size
HD (1280x720)	32~36pt	21pt
SD (960x540)	28pt	18pt

Table 4-1. Text size for each application resolution

4.3. Categories and Layouts

Apps 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 4-2 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 4-2. A good example of applying horizontal menu style

Figure 4-3 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.

Figure 4-3. A bad example of applying horizontal menu style

Vertical Style

For applications with several or variable number of categories, the vertical style format may be more useful. Figure 4-4 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 4-4. A good example of applying vertical menu style

Figure 4-5 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.

Figure 4-5. A bad example of applying vertical menu style

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

Figure 4-6. Grid Style

List style

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

Figure 4-7. List Style

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

Figure 4-8. Moving Focus

Fixed Focus

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

Figure 4-9. Fixed Focus

Table 4-2 lists the benefits of each navigation type.

	Moving Focus	Fixed Focus
Characteristics	Easily corresponds with various input devices, such as the Samsung Smart Control, 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 4-2. Characteristics of Moving Focus and Fixed Focus

Figure 4-10. Possible confusion when using Fixed Focus

4.6. Information about Processing

When opening an application or loading data takes la long time, users must be clearly informed that their request is being processed. There must be visual confirmation that the screen is going to change soon.

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 4-11, 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 4-12.

Figure 4-11. Progress bar

Figure 4-12. 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 4-13. 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 4-14. However, keep in mind that multiple notifications on a single screen will look cluttered and can confuse the users.

Figure 4-13. Guide to the overall screen

Figure 4-14. Guide to a portion of the screen

4.7. Pop-up Window

Use a pop-up window when a separate OSD is needed for an additional feature, or when a selection, notification, or warning is needed. A pop-up window is generally made up of components such as the title, body, and key guide, as shown in Figure 4-15. In the body, a basic guide text, a selectable GUI button, and a status icon can be displayed.

Figure 4-15. A pop-up and its components

When a pop-up window is displayed, the area outside of the pop-up is deactivated. Actions from user controls do not affect the area outside of the pop-up window.

The purposes of pop-up windows are classified as follows:

Task Window
Message Box
Mini Pop-up
Simple Menu

By default, a pop-up window automatically disappears when the user is inactive for a certain period. For the recommended duration of pop-up windows, refer to Table 4-3.

Pop-up type	Details	Duration
Task Window	A pop-up window for setting or running complex features e.g. - Sign-in, Settings	60 seconds
Message Box	A pop-up window that provides an important message Direct selection for running features, or feedback before running “Yes/No”, “OK/Cancel” and other pop-ups with two or more choices   e.g.  - Item deletion confirmation pop-up window	30 seconds
Message Box	A pop-up window that provides detailed information A simple status notification pop-up window ”Okay‟ will be the only displayed button e.g. - Feedback for an invalid user account or password - Feedback when selecting a button that is not available on the current screen (Not Available)	10 seconds
Mini Pop-up	A simple pop-up window for option setings Sublist	30 seconds
Simple Menu	List of additional features opened via the Tools button	Follow system policy
Exceptions (Pop-ups without a GUI button)	Used to show simple status notifications (not recommended)	Follow the rules for specific applications

Table 4-3. Screen duration for each pop-up type

4.7.1. Task Window

A task window is a pop-up window that can be used to carry out complex tasks.

This type of window is made up of components that can be focused on, such as lists of multiple features, selectable GUI buttons such as "Yes/No" and "Okay", or text input boxes. A title area and Key Guide area must also be provided.

Use action windows under the following circumstances:

When a title and Key Guide are needed for the current task while using a pop-up window
When a separate task needs to be completed using a pop-up window

Typical examples of task windows are shown below:

Figure 4-16. Examples of using a task window

4.7.2. Message Box

A message box is a pop-up window that provides feedback for button inputs or changes in system status.

It is made up of an information area that may include notification text or pictures and selectable GUI buttons such as "Yes/No" or "Okay". A title area and Key Guide area are not included.

Use message boxes under the following circumstances:

To provide a simple message that does not require a title or help
To provide a simple notification or warning message unrelated to the ongoing task

Typical examples of message boxes are shown below:

Figure 4-17. Examples of using message boxes

4.7.3. Mini Pop-up Window

A mini pop-up window is a simple pop-up window used to display less important notifications or option settings within the system.

This type of window is made up of provided information or option selections. It can be used to enable the user to change options with up-down or left-right buttons. A title area and Key Guide area are not included.

Use mini pop-ups under the following circumstances:

To instantly change options such as "arrange by..." or "filter"

A typical example of a mini pop-up window is shown below:

Figure 4-18. Example of using a mini pop-up window