top

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.

Application Screen Resolution

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.

Application Screen Layout

Picture 6-2. Application Screen Layout

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

Service Title

Picture 6-4. Service Title

Service Logo

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.

Horizontal menu

Picture 6-6. Horizontal menu

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

Precaution

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.

Moving Highlight

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.

Fixed Highlight

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.

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

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

Additional Information

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.

User Account

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.

Navigation Help

Picture 6-13. Navigation Help

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.

Playing Original Video Content

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.

Playing a video file in full screen

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.

Detailed News Screen of 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.

Slide show screen of an application providing photo contents

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
Font Readability According to Resolution

Picture 6-19. Font Readability According to Resolution