Definition of Application Screen Layout

Application Screen Resolution

The magnification of objects on the screen varies according to the resolution of the application, and this may affect the sharpness of characters and images. Applications with a higher resolution provide higher quality onscreen images, but this may also impede performance, so a resolution that provides the best possible balance should be selected.

Figure 6-1. Application Screen Resolution

Application Screen Color

Colors displayed on a TV screen are usually more vivid than those on a PC monitor. So when a design is complete, it should be displayed on a TV screen to check the colors. Excessively bright colors can cause eye strain, and also cause confusion as to which areas of the screen are highlighted. The standard distance for watching TV is 3 meters(10 ft) away from the screen, so you should use an actual TV to confirm that the design looks at its best from this distance.

Figure 6-2. TV Viewing Enviroment

Font

The fonts supported by Samsung Smart TV are Samsung SVD fonts, which support languages from ‹‹n›› countries across the globe. The sharpness of any text will vary according to the resolution of the Application, as shown in Figure 6-3. To ensure maximum readability, large fonts should be used wherever possible. It is also recommended that you check the readability from the standard watching distance (3m/10 ft) before completing your design.

Table 6-1. Minimum font size for each screen resolution [Mandatory]

Figure 6-3. Font Readability According to Resolution

Screen Components

All applications provided through Samsung Smart Hub have a full screen layout regardless of their genre. Figure 6-4 shows the application layout that is frequently used in widescreen displays.

Figure 6-4. Application Screen Layout

Figure 6-5. 16:9 Grid Layout

Service Titles and Logos

Each application can show their title or service provider information (such as a logo image) to identify the service. Since most people look at the upper left corner first and move toward the bottom right when looking at a TV screen, it is recommended that the service provide logo and service title be displayed on the upper left or right part of the screen as shown in Figures 6-6 and 6-7.

Figure 6-6. Service Title

Figure 6-7. Service Logo

Categories and Arrangement

An application can consist of multiple categories for effectively providing various information and features. Depending on the characteristics of the application, categories can be shown horizontally in the upper right part of the screen or vertically on the left of the screen.

Horizontal menu

This is the most frequently used format. As shown in Figure 6-8, categories are shown horizontally in the upper right part of the screen. Since the application title and logo are in the upper left of the screen, this type of category display is suitable for applications with a few fixed categories. Horizontal navigation is used for the content list and content is arranged from left to right. Having too many lines in the content list could make it difficult to return to the categories, so it is a good idea to keep the number of lines to a minimum.

Figure 6-8. Horizontal menu

Vertical menu

The vertical menu style can be used for applications with a large number or moving categories. As shown in Figure 6-9, this type of menu shows categories in a vertical format on the left of the screen. The category and content list can be scrolled vertically. Having too many vertical rows in the content list could make it difficult to return to the categories, so it is a good idea to keep the number of rows to a minimum.

Figure 6-9. Vertical menu

Precautions

Using a horizontal style categories menu and a list that requires vertical scrolling as shown in Figure 6-10 may caused inconvenience to the user. When the user wishes to switch to another category while searching the content list, going back to the categories menu on top would require multiple inputs. Therefore, such layout is not recommended. However, if using such layout is inevitable, include a function to allow the user to switch categories by pressing the left and right buttons on the remote control while the focus is in the content list to minimize user inconvenience.

Figure 6-10. Precaution

Content List Layout

A content list layout can be created freely depending on various content types such as thumbnails and text. The two primary styles are shown below.

Grid style

A style suitable for content in which thumbnail information is important, such as pictures and videos. The list usually consists of a thumbnail and the name of the content.

Figure 6-11. Grid style

List style

A style suitable for text-based content. The list usually consists of content titles and related text information (date, price, etc.).

Figure 6-12. List style

Navigating the Content List

In a content list, the focus moving method uses a moving focus or a fixed focus.

Moving Focus

As shown in Figure 6-13, this is a method where a fixed content list is displayed on the screen and the focus moves to the content.

Figure 6-13. Moving focus

Fixed Focus

As shown in Figure 6-14, this is a method where the focus remains fixed on the screen and the entire content list moves.

Figure 6-14. Fixed focus

Table 6-2. Characteristics of Moving and Fixed Focuses

Additional Information

Additional information can be provided at the bottom of the content list. Additional information can include details about the content currently under focus, related content, and advertisements.

Figure 6-15. Additional Information

Key Guide

When remote control input is required to perform a function in certain screens or situations, the Key Guide is a guideline provided to inform the user which remote control buttons are used to perform the required functions and the functions assigned to each button. The method for providing a Key Guide is shown in Figure 6-16 below. The Key Guide is to be positioned at the bottom of the full screen or popup window, and aligned to the right.

If mouse and motion recognition is used, the user must be able to select the Key Guide area with the pointer. If not, another method of performing logging in, logging out and return (cancel) actions must be provided.

Figure 6-16. Navigation Help

Figure 6-17. Key Guide – Screen Resolution : 960 x 540, 1280 x 720

Text Information

When displaying a text-based details screen, it is important to arrange the text so that the left to right travel distance of reader's eyes for reading the lines isn't excessively long.

Figure 6-18 is a screen for reading the main body of an article displayed after selecting it in a news application.

Figure 6-18. Detailed news page of a news application

Spinning Indicator

A Spinning Indicator made up of an animated icon and text is displayed either when a specific process is taking place or data is being loaded. This is generally displayed as a popup in the middle of the screen, but when the categories within an application are loading, the Indicator is displayed within the Category area, as in Figure 6-20. Once the process is complete, the Indicator disappears.
If spinning animation cannot be displayed due to other restrictions, a message is shown, such as ‘Data is being received.’

Figure 6-19. Spinning Indicator – General Situation

Figure 6-20. Spinning Indicator – Inside Category

Policy on popup windows

Popup windows are used when additional OSD, or a selection, notification or warning is required to perform additional functions while using an application. A popup window includes basic text information, and a title area, Key Guide area, selectable GUI buttons, or status indicator icons may be added depending on the type.

When a popup window is created, the background area, excluding the popup window, is deactivated. Actions resulting from remote control button inputs do not affect the area outside of the popup window.

Popup windows can be categorized as follows, depending on their purpose.

• Action Window
• Message Popup Window
• Tools
• Notification Popup

Timeouts must be applied to popup windows. The duration is to be applied differently depending on the popup type and task characteristics as shown in Table 6-3. However, exceptions can be made depending on the application. In such cases, the corresponding specifications must be followed.

Table 6-3. Duration

Field

An action window and a message box generated in the center of the TV screen as shown in Figure 6-21. In case of a mini popup, an identical field is recommended, but you can arrange it wherever you want.
It is not allowed to overlap more than two popup windows at once. [Mandatory]

Figure 6-21 . Popup Window

Action Window

Action windows are popup windows provided to perform a function. They consist of elements that can be focused including selectable GUI buttons such as YES, NO, OK, and text input fields. Action windows must possess both a title area and a Key Guide area. Only displaying one of these two areas is not permitted.

Action windows can be used in the following circumstances.

• When a title (definition) or Key Guide is required for tasks performed using a popup window

  Representative examples are listed below.

  • When the 4-direction button and the Enter button are used for different functions from usual
  • When a set amount of text input is required
  • When a message is included in a series of tasks
  • When the color buttons are used
• When performing additional functions

Action window is represented with the same formation as shown in Figures 6-22 and 6-23.

• Window Layout - Style 1
  • Top: Title
  • Center: message, function list, text input window, GUI button
  • Bottom: Key Guide
  

  Figure 6-22 . Action Window – Style 1

• Window Layout - Style 2
  • Top: Title
  • Left: message, function list, text input window
  • Right: GUI buttons
  • Bottom: Key Guide
  

  Figure 6-23. Action Window – Style 2

Message Box

A message popup window is used to accept user's button inputs or provide feedback regarding system status changes. A message box does not display title or Key Guide, and consists of selectable GUI buttons such as YES, NO or OK.

Message boxes can be used in the following circumstances.

• A brief message that doesn't require a title or Key Guide
• A simple notifications or warning messages unrelated to the task

The layout of a message box is shown in Figure 6-24.

• Window Layout
  • Top: Displays message or information
  • Bottom: GUI button

Figure 6-24. Message Box

Tools Window

Tools windows are popup windows for providing simple added features within an application, and they can be called by pressing the Tools button on the remote control. Tools windows must possess a title area and a Key Guide area, and be displayed on the right region of the screen.

• Window Layout
  • Top : Title
  • Bottom: Key Guide
  • Center: List of features

Figure 6-25. Tools Windows