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
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|
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.
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
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.
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
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.
The list is fixed on the screen. The focus moves from one content item to the next.
Figure 4-8. Moving 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|
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.
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.
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.
||Follow system policy|
Exceptions (Pop-ups without a GUI button)
||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