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
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|
Table 6-1. Minimum font size for each screen resolution [Mandatory]
Figure 6-3. Font Readability According to Resolution
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.
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
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
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.
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
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.
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
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
|Moving Focus||Fixed Focus|
Table 6-2. Characteristics of Moving and Fixed Focuses
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
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
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
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
- 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.
|Message Popup Window||
- Feedback regarding invalid user account or password
- Feedback regarding button inputs not supported in the current screen (Not Available)
|Popups that don't include GUI buttons||
||Follows policies of each application|
Table 6-3. Duration
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 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
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.
- Top: Displays message or information
- Bottom: GUI button
Figure 6-24. Message Box
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.
- Top : Title
- Bottom: Key Guide
- Center: List of features
Figure 6-25. Tools Windows