top

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.

Application Screen Resolution

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.

Screen Resolution Minimum Font Size
SD (540p) 16px
HD (720p) 21px

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

Font Readability According to Resolution

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.

Application Screen Layout

Figure 6-4. Application Screen Layout

16:9 Grid 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.

Service Title

Figure 6-6. Service Title

Service Logo

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.

Horizontal menu

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.

Vertical menu

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.

Precaution

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.

Precaution

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

Precaution

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.

Precaution

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.

Precaution

Figure 6-14. Fixed focus

Moving Focus Fixed Focus
Characteristics
  • Capable of displaying a large amount of content in a single screen.
  • Easier to accommodate various input methods such as a mouse or a gesture.
  • Faster response to controls, since only the focus moves when navigating.
  • Visual effects are not as dramatic as Fixed Focus method when the focus moves.
  • Suitable for displaying additional information under focus.
  • More dynamic visual effects since the entire content list moves when navigating.
  • Slower response time to controls since the entire content list has to move when navigating.
  • A limited amount of content can be displayed in a single screen.
  • Must provide indicators to the left and right of the fixed focus for mouse or gesture input.

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.

Additional Information

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.

Navigation Help

Figure 6-16. Navigation Help

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.

Detailed News Screen of News Service

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

Detailed News Screen of News Service

Figure 6-19. Spinning Indicator – General Situation

Detailed News Screen of News Service

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.

Type Description Duration
Action Window
  • List of added features entered using the Tools button
60sec
  • All action windows accessed through the menu
e.g.)
- Login
60sec
  • Action windows accessed through system or hot keys
e.g.)
- Launcher
60sec
Message Popup Window
  • Popups that provide crucial information
  • Selecting the direction for executing a function or feedback before execution
  • Popups that include two or more selectable buttons such as ‘Yes/No’, ‘OK/Cancel’
e.g.)
- Notification
30sec
  • Popups that provide detailed information
  • Popups that provide simple status information
  • Popups that only provide an OK button
e.g.)
- Feedback regarding invalid user account or password
- Feedback regarding button inputs not supported in the current screen (Not Available)
10sec
Popups that don't include GUI buttons
  • Used to provide simple status information (Not recommended)
Follows policies of each application

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]

Popup Window

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
    Action Window – Style 1

    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
    Action Window – Style 2

    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
Message Box

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
Tools Window

Figure 6-25. Tools Windows