Application 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 on-screen images, but this may also impede performance, so a resolution that provides the best possible balance should be selected.

Picture 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(10ft) away from the screen, so you should use an actual TV to confirm that the design looks at its best from this distance.
Application Screen Layout
All applications provided by SAMSUNG Smart Hub composed in full screen regardless of genre.
Picture 6-2 shows the application screen layout that is generally used for TV display ratios that are broader than they are high. This layout is constructed as 3 layers. The top layer contains details such as Service Title, Logo, Category etc., while the content list and any additional information are displayed in the center layer. The bottom layer is then used to display User Account information and Navigation Help.

Picture 6-2. Application Screen Layout

Picture 6-3. 16:9 Grid Layout
Service Titles and Logos
Each application displays its title or information on contents or service provider such as logo in order to distinguish services. Most people will look at a TV screen from top left to bottom right. So it is recommended that you place your Title or Logo at the top left of the screen to ensure that the service can be immediately identified.

Picture 6-4. Service Title

Picture 6-5. Service Logo
Category and Arrangement
Application composes several depths of categories in order to offer a variety of information and functions effectively. Categories are displayed at the top right or on the left-hand side, depending on the service features.
Horizontal menu
The horizontal menu style is most commonly used. In this type, Categories are displayed at the top right, while the Content list area shows content sorted from left to right. The number of lines of content shown should be adjusted wherever possible so that an up/down scroll bar is not generated. If there are too many lines of content, it may require numerous remote control actions to move the focus back to the Category area from the Content area. See Picture 6-6 for more details.
Vertical menu
The vertical menu style should be used when you need to display more content items at once. Although the user is able to scroll up and down through the content list freely, it is always a good idea to limit the number of columns of content to avoid scrolling too much.

Picture 6-6. Horizontal menu

Picture 6-7. Vertical menu
Precaution
As shown in Picture 6-8, when the up/down scroll bar appears
in the Content area, it can be awkward for the user. It may require numerous remote control actions to move the
focus away from the Content area and back to the Category area. This can be simplified to improve the user
experience by using the left and right directional buttons on the remote control to change categories and the
top and bottom buttons to switch between content items.

Picture 6-8. Precaution
Content List
The Content list field can be used to display various content such as text, thumbnails etc. Content navigation can involve either a movable highlight or a fixed highlight.
Moving Highlight
A Moving Highlight enables you to display more content on one screen, but the motion effect when switching between items is less visually effective.
Picture 6-9. Moving Highlight
When you use a Moving Highlight, each time the right directional button is pressed on the remote control, the Highlight itself moves one space to the right. This type of Highlight is shown in Picture 6-9.
Fixed Highlight
A Fixed Highlight can accentuate the motion effect when switching between content items, but the number of items that can be displayed on one screen is limited.
Picture 6-10. Fixed Highlight
When you use a Fixed Highlight, each time the right directional button is pressed on the remote control, content items that were originally positioned to the right shift towards the Highlight. This type of Highlight is shown in Picture 6-10.
Tips for using the mouse and motion control
Consider the followings when using the mouse or motion control.
- The moving highlight method
When selecting something on screen with the pointer, first the focus moves to the content, and then the content is opened.
- The fixed highlight method
When selecting something on screen with the pointer, the content first moves into the position of the fixed focus, and then the content is opened. Left and right arrows must be provided to move content into the position of the fixed focus.
Additional Information
You can also display additional information directly below the main Content list. This additional information may include Related Content, Detailed information, Advertisements, etc.

Picture 6-11. Additional Information
User Account
An application which requires user login to provide personalized services should
assign an account area in the application screen in order to recognize the current status of login or logout
and recognize the logged in user. The account area is fixed to the lower left section of Navigation Help ,
an account is displayed only when logged in.
(Mandatory)
When the user has successfully logged in, a notification popup is briefly displayed.

Picture 6-12. User Account
Navigation Help
Navigation Help is a guideline supported to recognize buttons and the assigned functions to the buttons on remote control in case that you operate buttons by adjusting the remote control on certain screens and under special conditions.
Navigation Help is displayed in the area secured on the lower part of full screen and popup screen, and set right-indents. Indicates names of icons on remote control and assigned functions as shown in Picture 6-13 .
When using the mouse or motion control, the user must be able to use the pointer to select the key guide area. If not, they must be provided with separate means to log in, log out, or return(cancel). We plan to change the methods for logging in and displaying information in 2013; further information will be made available through future SDK documents.

Picture 6-13. Navigation Help

Picture 6-14. Navigation Help – Screen Resolution : 960 x 540, 1280 x 720
Video/Music Playback
Here are basic components for layout of video or music contents.
- Playback screen (original or full screen)
- Information on the currently playing contents (Plot, author, keyword)
- Additional Information (may not always be displayed)
- Status area (Title, progress bar, runtime, X)
- Navigation Help area to control playing
An example screen below shows playback screen with related information including synopsis, keyword, and play area. Play area displays playback status, progress bar, and playback time.

Picture 6-15. Playing Original Video Content
Picture 6-16 shows that a video file is displayed in full screen. It displays content title, playing status(playing, pause), progress bar, runtime on the top and navigation help to control playing at the bottom. The banners on the top and bottom disappear after 5sec if there is no user input, and they reappear when there is user input.
TV volume OSD is shown when adjusting volume by using volume button on the remote control.

Picture 6-16. Playing a video file in full screen
Text Information
When it comes to detailed screen composed of texts , it is important to arrange texts within appropriate view range, not being in too wide width of right and left margin in order for users to read lines readily.
Picture 6-17 is the screen to confirm an article after selecting a certain article in news service.

Picture 6-17. Detailed News Screen of News Service
Photo Slide Show
The application providing photo contents offers a screen to confirm the original chosen photo or magnified one and play slide show as appeared in Picture 4-18.
The top of screen consists of basic information on the selected photo (Playing Status, Speed, title, resolution, production date) , playing status of slide show. The banners on the top and bottom disappear after 5sec if there is no user input, and they reappear when there is user input.

Picture 6-18. Slide show screen of an application providing photo contents
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 Picture 6-19. 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.
(Mandatory)
Screen Resolution | Minimum Font Size |
---|---|
SD (540p) | 16px |
HD (720p) | 21px |

Picture 6-19. Font Readability According to Resolution