Lg Smart Tv and Media Product Ui Guideline_v4.17

8/12/2019 Lg Smart Tv and Media Product Ui Guideline_v4.17

1/62

COPYRIGHT 2013 LG ELECTRONICS. ALL RIGHTS RESERVED.

/ ver 4.17

LG Smart TV and Media product UI Guideline

2013.12.24. / HE UX Planning Team


2/62

1

Legal Notice

Copyright

Copyright 2013 LG Electronics, Inc. All Rights Reserved.

Though every care has been taken to ensure the accuracy of this document, LG Electronics, Inc. cannot accept responsibility for any

errors or omissions or for any loss occurred to any person, whether legal or natural, from acting, or refraining from action, as a result of

the information contained herein. Information in this document is subject to change at any time without obligation to notify any person of

such changes. LG Electronics, Inc. may have patents or patent pending applications, trademarks copyrights or other intellectual property

rights covering subject matter in this document. The furnishing of this document does not give the recipient or reader any license to these

patents, trademarks copyrights or other intellectual property rights. No part of this document may be communicated, distributed,

reproduced or transmitted in any form or by any means, electronic or mechanical or otherwise, for any purpose, without the prior written

permission of LG Electronics, Inc. The document is subject to revision without further notice. All brand names and product names

mentioned in this document are trademarks or registered trademarks of their

respective owners.


3/62

2

History

Version Date No. Page. Description Background

4.05 4/2/2012 1 All Page numbering error fixed. Indexing reorganized UX: Page number error found

4.10 9/25/2012 2 17 Recommendation Added: On-screen Keyboard should save last language setting.Q: Keyboard should save lastlanguage for better user experience.

Also NC Platform saves last language.

4.11 11/21/2012 3 38, 39

Description Changed:a. Fixed size: 728 (X) x 90 (Y) Pixelb. Fixed location (x, y) : (402, 24), or (514, 24) * Currently, LG TV only support for fixed location.Placing AD on another location is not allowed.a. Size: 728x90px, 300x250px, and 180x150px; International standards (CASIE & IAB)b. Free location: App may place banner anywhere as long as the banner and the focus rectangle ison the screen

SBC: Advertisement BannerDescription is incorrect. Requiresupdate.

4.12 1/18/2012 4 18 Guideline Added: Pressing Remotes Exit button or Exit on -screen button from App sends user toLG Live TV without any pop-ups

SBC: There is no guideline for Exitnavigation. Need to define Exitnavigation.

4.13 2/8/2013 5 11 Description Added: Wheel: Actual Key Codes are not provided. Apps will receive mouse wheelevents R&D VOC: Developers can beconfused. Require extra description

4.14 6/5/2013 6 All Guideline updated.-Distinct mandatory/recommended items. -

4.15 11/05/2013 7 14, 17, 18, 25

Recommendation Added:-App should be scrolled up/down using wheel keys-The playback control bar should be composed of Play/Pause, Stop, Skip, FF/REW, Back button-Pause indicator should be shown when the playback has been paused-Minimize the size of overlapped App on the Live TV

R&D: The task for improvement ofusability

4.16 11/19/2013 8 16 Recommendation Added:Recommend using LG buttons and Progress barR&D: The task for improvement ofusability

4.17 12/24/2013 9 18,19,20

Behavior of MHP CPs Added(18, 20page):-Video control may not work with playback control k eys in the case of MHP( Multimedia HomePlatform) .-Pop- up may appear when user presses Remotes Exit key or Exit on -screen button in the case ofMHP( Multimedia Home Platform).

Description Added(19page): User can hide playback control bar by cl icking the video screen withpointing cursor when it i s appeared.

R&D: The task for improvement ofusabilitySBC: Add some cases of exceptionaccording to MHP spec


4/62

3

Introduction1. Purpose of this documentation

2. UI Design for TV Viewing Environment

3. LG Smart TV Navigation Architecture

4. LG Magic Remote Controller

Mandatory UI Guidelines1. Mandatory Check List

2. Screen Layout

[M01] UI screen must adopt LG screen resolution size (1280x720pixel)

[M02] Over-scan Area Rule: All selectable objects, text, and company branding logo must be placed within the Safe Area

3. Navigation Schemes

[M03] App must be fully navigable using the following Remote Keys: Up, Down, Left, Right, OK, Back

[M04] App must be fully navigable using Screen-cursor and following Remote Keys: OK, Back, and wheel up/down

4. On-screen Button

[R01] App should be scrolled up/down using wheel keys

[R02] Display on- screen Back/Exit button [R03] Recommend using LG buttons and Progress bar

[M05] App UI must include List Scrolling button (carousel within a page)

[M06] If App has text/number input, App must support via on-screen keyboard

[R04] Maintain keyboard language state, even when application is closed

[R05] Recommend using LG keyboard

[M07] If App has playback control, App must support via on-screen menu

[R06] The playback control bar should be composed of following buttons: Play/Pause button, Stop button, Skip button, FF/REW button, Back button

[M08] Display on- screen Q.Menu button on video play screen (only for TV, it should not be displayed on LG Media Products & Bluray)

[R07] The playback controls on-screen menu should be made visible when the OK key is pressed, and hidden after a specific timeout (e.g. 5 seconds)

[R08] Pause indicator should be shown when the playback has been paused

5. Back/Exit Behavior[M09] Pressing Remotes Back physical key or Back on -screen button from Apps landing(entry) page sends user to previous LG menus

[M10] Pressing Remotes Exit physical key or Exit on -screen button from App sends user to LG Live TV or previous LG menus

[M11] When an App is entered on a deep link page, Back shall take the user back to the device page and not move Back within the Apps page

[M12] Sequence of Back action should lead consumer back to original entry point

Table of Contents

..... 6

........ ..... .... ........... ... 7

........... .... ..... 8

.... 9

.... 12

............................................... 13

... 14

..... 15

........... 20


5/624

6. Visual Treatment

[M13] Visual states idle, focused required for all selectable objects(button, menu, tab, )

[R09] App should always have focus when in 4way navigation mode

[M14] App should never leave the screen black

[R10] Current focus should be clearly distinct to users

[M15] Minimum target area size for selectable object is 54x54 pixel

[M16] Text has to be readable from 3.5meter(10 foot) distance from TV

[R11] Font size varies in 4 types from Title Large, Large, Medium to Small.

[R12] Recommended fonts are LG Display and Tiresias font

[R13] Minimize the size of overlapped App on the Live TV

7. Others

[R14] Apply LG In-App Advertising in your application and receive revenue share

[R15] When users press share/like button (i.e. Facebook ) in your application from LG TV, it should display via LG Smart TV on Facebook web page

LG UI Templates1. LG Global QWERTY Screen Keyboard

2. Magic Remote: W heel Guideline

3. LG Playback control behavior

4. I n-App Advertising

5. Game

Sample UI Flows1. Catch-up TV

2. VOD

3. UCC

4. Photo

5. News Portal

Most Common Mistakes1. Safety Zone

2. Scroll

3. Text Size

4. Focus States

Table of Contents

.. 22

..... 27

.. 29

.... 31

.. 32

..... 33

... 34

... 43

.... 45

.... 49

....... 51

... 53

... 55

.... 56

.... 57

....... 58


6/62


Introduction


7/626

1. Purpose of this documentIntroduction

This document contains guidelines you may follow in designing new, or optimizing existing application for LG Smart TV and Media Products.

Understand LG UI

architecture and entry/exit

points to your application

Know LG Magic Remote Controls

interaction & behavior,

then apply necessarily

UI elements on your design

Learn TV UI design from

Sample flow, and optimize

your design for

10-foot experience

Understand Know & Apply Learn & Optimize

Design your application in harmonious compatibility with LG TV

Here are tips from LG UX team for designing compelling user experience for your service and optimizing user interaction in10 foot environment, which is lean-back .

Think TV & Media Productusers as well.

Consider both users, not only

your users using your services,

but also LG users browsing your

application respectively within

LG TVs UI architecture and LG

remotes.

1 2Hook up users with

seductive landing page

Make landing page drop dead

gorgeous. Give users nice

visual presentation at first

landing page by composing

different layout, aesthetic,

and information visualization

3Obsess on detail

interaction rule

Obsess on detailing interaction

rules against systemical limitation.

Sweat on ensuring the

wireframed experience to be

alive in coding.

4LG Platform User Seductive Landing Interaction Rule

Strive for simplicity

Having more features creates

complexity to users. Select key

features, provide simple

experience to user by placing

better experience ahead of

more features.

Simplicity


8/627

2. UI Design for TV Viewing EnvironmentIntroduction

TV viewing environment is defined below. As a guiding principle, user experience that allows the user to control the TV and Media equipment with minimum effort is

provided. Therefore, UX needs to be designed such that the existing PC-based Internet service is appropriate for the TV viewing situation.

TV User PC User

10 Foot (3.5 Meter) 2 Foot (70cm)Fun Environment

Family/Social Environment

Work Environment

Single-user Environment

Lean-backThe user will typically be sitting 10 feet (3.5meter)away from the screen

Passive BrowsingLow concentration and involvement (users role)

Comfortable PostureComfortable posture involving lying back or facedownward

Lean-forwardThe user sits upright, control from a close range

Active Interaction & SearchingHigh concentration and involvement (users role)

Constrained PostureConstrained posture in front of the desk

EntertainingPrimarily for entertainmentOften there is no specific target/goalSingle contents, exploring structure

WorkingGoal-oriented, based on various needsThere is a specific target/goalInfinite type and number, searching structure

Distance from Screen

Environment

UserBehavior

Users Goal


9/628

3. LG Smart TV Navigation ArchitectureIntroduction

Entry & Exit points from LG Smart TV UI (Platform version_NetCast4.0)

3 r d

P a r t y

A p p

l i c a

t i o n

U I

Back (Remote key / Screen button)

Deep LinkIf search meta-data

is provided to LG


Deep Link Back Behavior

When an app is entered on a deep link

page (e.g. coming from LGs content

search page), Back shall take the user

back to the device page (i.e. search results)

and not move Back within the Apps page

LG Search: Results

App

Live TV My Apps Home Dashboard Premium

Avatar

L G

U I

BackRemote key/On-screen button


Exit (Remote key)- Exi t to L ive TV

Exit (Screen button)- Goes back to Live TV or the previously

running page

1 2

1

2


10/629

4. LG Magic Remote ControllerIntroduction

LG Magic Remote is a Pointing input device, which works like an air mouse. On-screen cursor will follow the remote.

It is a simple Point & Click device just like a PC mouse, therefore most users who have used a PC before can easily use LG Magic Remote.

- Support 2 modes : Screen Cursor Mode & 4way Navigation Mode

Switching mode from one another ;

1 . Switching to Screen Cursor Mode from 4way navigation mode : by shaking remote

2. 2. Switching to 4way Navigation Mode from Screen Cursor Mode : by pressing arrow buttons

However, both modes must not be co-used at the same time. When one mode is on, another

mode must be off

Screen Cursor Mode: 4way Navigation Mode:

(Up/Down/Left/Right) All of UI shall be navigable by moving focus with 4 way navigation, OK, and Back

(Screen Cursor) All of UI shall be working with Cursor, OK, and Back

2012 model 2013 model 2013 model(high-end)

LG Magic Remote image

4 LG M i R C ll


11/6210

4. LG Magic Remote ControllerIntroduction

LG Magic Remote Keys available for developer

(Platform version_NetCast4.0)

Button Behavior Keys available for developer

Power Power On/Off No (LG Native Control)

Back Back to previous Open

Home Send user to LG Home Dashboard No (LG Native Control)

4 way arrows

Move focus up Move focus down Move focus left Move focus right

Open

Ok Select item Open

Wheel Page/List Scroll, Zoom in/out, Open

Volume Increase/Decrease Volume No (LG Native Control)

Channel Channel Changing Open, only when used for channel changing within application3D 3D On/Off No (LG Native Control)

123Q.Menu

LG Native UI : Opens LG My AppsCP/App UI : Opens LG Q.Menu

No (LG Native Control)

Local Keys (buttons on the TV)

function same as the buttons on remote controller

LG Q.Menu


12/62


Mandatory/Recommended

UI Guidelines

1 M d t /R d d Ch k Li t


13/62

12

1. Mandatory/Recommended Check ListMandatory/Recommended UI Guidelines

UI Element Behavior

Screen LayoutUI screen must adopt LG screen resolution size (1280x720pixel)

Over-scan Area Rule: All selectable objects, text, and company branding logo must be placed within the Safe Area

NavigationScheme

App must be fully navigable using the following Remote Keys: Up, Down, Left, Right, OK, Back

App must be fully navigable using Screen-cursor and following Remote Keys: OK, Back, and wheel up/down

On-screenButton

App should be scrolled up/down using wheel keys

Display on- screen Back/Exit button

Recommend using LG buttons and Progress bar

App UI must include List Scrolling button (carousel within a page)

If App has text/number input, App must support via on-screen keyboard

Maintain keyboard language state, even when application is closed

Recommend using LG keyboard

If App has playback control, App must support via on-screen menu

The playback control bar should be composed of following buttons: Play/Pause button, Stop button, Skip button, Scanning button, Back button

Display on- screen Q.Menu button on video play screen (only for TV, it should not be displayed on LG Media Products & Bluray)

The playback controls on-screen menu should be made visible when the OK key is pressed, and hidden after a specific timeout (e.g. 5 seconds)

Pause indicator should be shown when the playback has been paused

Back/ExitBehavior

Pressing Remotes Back physical key or Back on -screen button from Apps landing(entry) page sends user to previous LG menus

Pressing Remotes Exit physical key or Exit on -screen button from App sends user to LG Live TV or previously running page

When an App is entered on a deep link page, Back shall take the user back to the device page and not move Back within the Ap ps page

Sequence of Back action should lead consumer back to original entry point

VisualTreatment

Visual states idle, focused required for all selectable objects(button, menu, tab, )

App should always have focus when in 4way navigation mode

App should never leave the screen black

Current focus should be clearly distinct to users

Minimum target area size for selectable object is 54x54 pixel

Text has to be readable from 3.5meter(10 foot) distance from TV

Font size varies in 4 types from Title Large, Large, Medium to Small.

Recommended fonts are LG Display and Tiresias font

Minimize the size of overlapped App on the Live TV

Others Apply LG In-App Advertising in your application and receive revenue share

When users press share/like button (i.e. Facebook ) in your application from LG TV, it should display via LG Smart TV on Facebook web page

The following is mandatory check list to migrate your application into LG Smart TV. Please check the current status before UI submission. (If your application meets the requirement below, please put the checkmark)

M01

M02

M03

M04

R01

M05

M06

M07

M08

M09

M10

M11

M12

M13

M14

M15

M16

R09

R10

R11

R12

R13

R04

R05

R14

R02

R06

R07

R08

R15

R03

2 Screen Layout


14/62

13

2. Screen LayoutMandatory/Recommended UI Guidelines

UI screen must adopt LG screen resolution size (1280x720pixel)

Over-scan Area

Over-scan Area Rule: All selectable objects, text, and company branding logo must be placed within the Safe Area- Because the Over-scan area may not be visible on all devices- Part of clickable elements may be placed in the over-scan area as long as a large part (54 pixels) is also in the safe area so it can be safely activated

Safe Area Pixel Guide

Safe Area (1216x666pixel)

121632

1280

6 6 6

7 2

0

3 2

32

2

2

M01

M02

3 Navigation Schemes


15/62

14

Back

Up, Down, Left, Right

OK

Reference:

LG TV Navigation Scheme (NetCast 4.0)

3. Navigation SchemesMandatory/Recommended UI Guidelines

App must be fully navigable using the following Remote Keys: Up, Down, Left, Right, OK, Back- All selectable objects(button, menu, tab, ) has to be reachable with Remote Keys(4way, ok, back) - All pages(page, list, content, ) has to be reachable with Remote Keys(4way, ok , back)

App must be fully navigable using Screen-cursor and following Remote Keys: OK, Back

* All Apps must support LG Magic Remote Controller- All selectable objects(button, menu, tab, ) has to be clickable with Screen -cursor + OK

World News

Entertainment

Science

Tech

Tech

Content Content Content Content Content



M03

M04

Exception:If App has OSD buttons working with colored keys, it is

not mandatory to be reachable with arrow(4way) key.That buttons just should be clic kable with Magic Remoteor colored keys on Normal Remote.

Colored keys onNormal Remote

OSD buttons working with colored keysNetCast4.0 On Now

App should be scrolled up/down using wheel keys- LG Magic Remote has the wheel key, so it is available to scroll up and down in content list page.

R01

4 On-screen Button
http://www.youtube.com/watch?v=C6gXcVjwhag


16/62

15

4. On-screen ButtonMandatory/Recommended UI Guidelines

App UI must include List Scrolling button (carousel within a page) - Without it, it is unable to scroll the list with LG Magic Remotes on -screen cursor

Menu 6 Menu 7

Video 8 Video 9

(Incorrect)

Menu 3.7

Menu 3.8

(?)

(Correct)

M05

Display on- screen Back/Exit button - App could display Back or Exit button on any pages. - User dont have to look at their remote controller to find the Back or Exit key eyes on screen

R02

NetCast4.0 Game Application

4 On-screen Button


17/62

16

4. On screen ButtonMandatory/Recommended UI Guidelines

Recommend using LG buttons and Progress bar- LGs buttons and progress bar are provided by Library

R03

ExitBack

21

24

5252

12

5

Back / Exit button Target

- Location of Back, Exit button: the top right of the screen.- Size: 52x52px(Full HD), 78x78(Ultra HD)

Back / Exit button Focus**When the button focused, the focus animation i s like upper.

246

555

1

- Location of Progress bar: the bottom edge of the screen.- Size of Progress bar: 1280x320 px, shadow incl uded between PG bar and content.

- Location of the Trickplay Play/Pause buttion: the center of the screen.- Size of the Trickplay Play/Pause buttion 171x171px

4 48 173

2 2 2 2 2180 180 180 180 173 8

4 5 6 7

2178

Progress bar Target

4. On-screen Button


18/62

17

4. On screen ButtonMandatory/Recommended UI Guidelines

If App has text/number input, App must support via on-screen keyboard- NetCast4.0 or above provides System Keyboard, open for 3rd party developers.

NetCast4.0 System Keyboard

(Dont use)

M06

(Use)

Triple Button KeyPad

Recommend using LG keyboard- LGs QWERTY keyboard is provided by Library

LG QWERTY keyboard

R05

Maintain keyboard language state, even when application is closed- If keyboard supports multiple languages, make sure it saves the last language state. (maintain language setting)- Users do not want to change keyboard to their language every time app restarts.

R04

Reference:

LG TV System Keyboard(NetCast 4.0)

4. On-screen Button
http://www.youtube.com/watch?v=wuDOrIoMEnI


19/62

18

Mandatory/Recommended UI Guidelines

If App has playback control, App must support via on-screen menu- If an App contains a video that should be controlled by a user, it shall support playback controls via video control keys on remote controller and playback controls via an on-screen menu.- All of playback control buttons has to be clickable with screen-cursor and selectable with up, down, left, right, OK keys.

NetCast4.0 Video Control Bar

M07

Video control keys onRemote Controller:video playback shall alsosupport via videoplay/pause/forward/rewind/stopkeys on remote controller.* Video control may not workwith these keys in the case ofMHP( Multimedia HomePlatform) .

Video Control keysRemote Controller

The playback control bar should be composed of following buttons: Play/Pause button, Stop button, Skip button, FF/REW button, Back button- Developer can add buttons of additional feature calls at the developers customizable area.

R06

/ll ||

Stop button

Play/Pause button

FF button

REW button

Skip forward button

Skip backward button

Back button

/ll

|

|

00:00:00 / 00:00:00

i.e. Video Control Bar

4. On-screen Button


20/62

19

Detail Guide:

a. Icon : Use LG Quick Menu icon

b. Placement : Anywhere on video full-screen

c. Behavior : LG native menu pop-up

d. Navigation : Clickable with cursor, and navigable

with 4 ways (up/down/left/right/OK)


Display on- screen Q.Menu button on video play screen (only for TV, it should not be displayed on LG Media Products & Bluray)- Quick Menu(Q.Menu) is a special natively built-in function for LG TVs. It essentially allows user to set Video/Audio options, picture size and speaker modes and appliesto media applications. Since it is a built-in function, manual implementation is not necessary. LG requires this function be implemented for TVs and provides the Q.Menuwith a simple function called NetCastLaunchQMENU .

NetCast4.0 Video Control Bar Q.Menu button

M08

Options

Options

Set PictureSet Sound

Close

RatioSpeaker

Original

3D Setting

Sleep TimerTV Speaker

NetCast4.0 Video Control Bar Options

The playback controls on-screen menu should be made visible when the OK key is pressed, and hidden after a specific timeout (e.g. 5 seconds)- If no key input for 5 seconds, playback control pad disappears with pointing cursor as well.- User can wake cursor and playback control bar by shaking the magic remote or pressing OK key from time-out mode.- User can hide playback control bar by clicking the video screen with pointing cursor when it is appeared.

R07

Pause indicator should be shown when the playback has been paused- If there is no indicator, user cant recognize easily the status of playback.

R08

NetCast4.0 Video Control Bar Pause indication

||

5. Back/Exit Behavior


21/62

20


Pressing Remotes Back physical key or Back on- screen button from Apps landing(entry) page sends user to previous LG menus

App


NetCast4.0 LG UI


Pressing Remotes Exit physical key or Exit on-screen button from App sends user to LG Live TV or previous LG menus

When an App is entered on a deep link page(e.g . coming from device content search page), Back shall take the user back to the device page and not moveBack within the Apps page

If search meta-data is provided to LG

Deep Link Back(Remote key / Screen button)

LG Search: Results

Avatar

NetCast4.0 LG UI

M09

M10

M11

Exit (Remote key)- Exi t to Live TV

Exit (Screen button)- Goes back to Live TV or the previously

running page

1 2 1

2

* Pop- up may appear when user presses RemotesExit key or Exit on-screen button in the case ofMHP( Multimedia Home Platform).

5. Back/Exit Behavior


22/62

21


M12 Sequence of Back action should lead consumer back to original entry point



App



LG Device Page

3 rd Party Page

6. Visual Treatment


23/62

22


Visual states idle, focused required for all selectable objects(button, menu, tab, ) - Both pointer focus and 4way navigation focus has to be implemented.

Object Object

Idle states Focused states

M13

T

App should always have focus when in 4way navigation mode

Menu 1

Menu 2

Menu 3

Where is the focus??

R09

6. Visual Treatment


24/62

23


App should never leave the screen black- User doesnt know what is going on- Streaming UI page has visual cue to indicate that content is loading

Loading

M14

(Use) ( Dont Use)

?

i.e. Loading State Indication

Current focus should be clearly distinct to users- Make sure users can see where the current focus is- Especially when there are multiple focus (see below image)

User must be able to know where the current focus is!

CP Logo Home TV Movie UCC Radio

Animation

Family Guy

Business Comedy Education Sports

The SimpsonsThe Batman

R10

Reference:

Loading State Indication (NetCast 4.0)

6. Visual TreatmentM d /R d d UI G id li
http://www.youtube.com/watch?v=POv-luck590


25/62

24


Type Recommended Minimum Size

Clickable Object (Screen-button) 54 x 54 pixel

Image Recognitioni.e. Movie covers, music albums 54 x 54 pixel

Minimum target area size for selectable object is 54x54 pixel- TV is a lean back device, we do not want users to have to concentrate to click an object.

M15

Text has to be readable from 3.5meter(10 foot) distance from TV- Minimum font size: 18 points for the Tiresias(-equivalent) font.- None Tiresias(-equivalent) fonts must have a minimal capital height similar as 18 points Tiresias(-equivalent) capital height.- For comfortable reading we advice to use a 20 point font size or higher.

M16

R11 Font size varies in 4 types from Title Large, Large, Medium to Small.- Major Contents are mostly displayed by Large font and Medium font is used for sub information.- Small font is used in progress bars or dimmed areas.- Title Large font is used in title or headlines when necessary.- All guidelines about font are based on baselines.

Title Title Large Font 45 pt

Body & button

Large Font 38 pt

Medium Font 30 pt

Key help & info Small Font 26 pt

Minimum font size - 18 pt

Recommended Font Size

Mandatory Font Size

6. Visual TreatmentMandatory/Recommended UI Guidelines


26/62

25


Recommended fonts are LG Display and Tiresias font - These are the only 2 fonts that are installed in the TV (other fonts cannot be installed within the device)- LG Display Font can cover Latin Basic, Latin 1, Latin 2, Latin Extended A-B, Greek, Coptic, Cyrillic, Arabic, Hebrew, Thai, Chinese, Korean and some of Japanese.

But we have regulations by local application due to font characters issue, we recommend to use the proper font for some regions(Taiwan, Hong kong. Japan).- LG has the license of LG Display font and LG Display font can be only displayed on LG devices.- Tiresias font can be also displayed in LG devices.

Full version : LG_Display.ttfLG_Display_Light.ttf

Taiwan/Hong Kong : LG_Display_HK.ttfLG_Display_HK_Light.ttf

*Japan : LG_Display_JP.ttf

Regulations by localFont Preview : LG Display FontLocal TTF files

All font should be used as 100% width

Font Preview : Tiresias

tt7268m_804.ttf

Local TTF files

Should be used as 100% width

LG Display-Light

LG Display-Regular

R12

6. Visual TreatmentMandatory/Recommended UI Guidelines


27/62

26


Minimize the size of overlapped App on the Live TV- An apps opacity should be 80%, when it is overlapped on the Live TV. (recommendation from LG GUI) - Overlapped app must be occupied minimized area on Live TV.

R13

i.e. Horizontal Overlapped App

Overlapped App

Overlap-ped App

i.e. Vertical Overlapped App

7. OthersMandatory/Recommended UI Guidelines


28/62

27


Apply LG In-App Advertising in your application and receive revenue share(*Currently In-App Advertising is available for North America, EU, Korea, Russia and Australia markets only)

Search

R14

When users press share/like button (i.e. Facebook ) in your application from LG TV, it should display via LG Smart TV on Facebook web pageR15

via LG Smart TV

NetCast4.0 LG UI

Facebook Display

Ad Banner


29/62


LG UI Templates

1. LG Global QWERTY Screen KeyboardLG UI Templates


30/62

29

p

Global language selection button Clear all written letters in text input field

Selected language toggle button (it stands for next language) Delete Button (pressing once, deleting a letter)

Lower / Upper Case toggle button (refer Language layout set page) Change a line button (as required Social network services / Chatting, etc.)

Symbol button Cursor control button (let cursor in text input box move to left and right)

Space Bar Hide virtual keyboard button

Clear

RUS

RUS

Example

OKAvatar l

RUS

Example

Text input box Avatar l

Example

Avatar

Example of screen keyboard Pop- up: Once user places s focus and click ok the text input field, the keyboard shall pop -up

LG Global QWERTY Screen Keyboard

Reference:

LG Screen Keyboard(NetCast 4.0)

1. LG Global QWERTY Screen KeyboardLG UI Templates


31/62

30

User can select up to 3 languages

RUS

i.e. When an alphabet has a multiple characters

albania

Reference:

LG Screen Keyboard language selection (NetCast 4.0)

2. Magic Remote: Wheel GuidelineLG UI Templates


32/62

31

WheelScroll

List Scrolling Zoom in/out

Horizontal List Vertical List Map

Forward

Backward

6 7 8 9 10

14

1 2 3 4 5

Left Right Top bottom

Left Right Top Bottom

6 7 8 9 10

1 2 3 4 5 7 8 9

4 5 6

1 2 3

16 17 18

13 15

10 11 12ScreenCursor

50%

00%

100%

Zoom In

Zoom Out

50%

7 8 9

4 5 6

1 2 3

16 17 18

13 15

10 11 12

14

LG Global Wheel Interaction Framework for 3rd Party

3. LG Playback control behaviorLG UI Templates


33/62

32

Stop Stops play and returns to the previous screen

Play Starts play

ll Pause Stops momentarily while playing

FF Speeds up the media content while playing (the interval time should be defined by content provider considering its type of content)

REW Slow down the media content while playing (the interval time should be defined by content provider considering its type of content )

Back Stops playing and moves to previous list

Quick Menu Call up LG Native Pop-up (Ratio change, sound mode, etc)

Ratio

Developers customizable Area - Add buttons of additional feature calls

Options

Set Picture

Set Sound

Close

Ratio

Speaker

Original

3D Setting

Sleep Timer

TV Speaker

When selecting Quick Menu

All buttons shall be navigable with 4 way arrow buttons, and mapped to key events of physical hot keys

3. LG Playback control behaviorLG UI Templates


34/62

33

Pause ScreenVideo Playing

Video Playing Video Playing

Press OK

Cursor awakes from time-out or deep sleep mode

Press OK or Shake Magic Remote

5 sec.Time-out

- If no key input for 5 seconds, playback control paddisappears with pointing cursor as well.- Cursor turns into deep sleep mode, when screen-cursordoesnt move for 30 minutes.

Video Playing

Call Playback UI

PressOK

Family GuyEpisode 12

Family GuyTV show: Family Guy

Episode 226min by FOX, United States of America [2009]

CastSeth MacFarlane, Alex Borstein, Mila Kunis, SethMacFlane

"Family Guy" stars the all-American Griffin family, Lois, Meg, Chris, Stewie and Brian. Taking

Related series

Purchase

Rating

Back

Episode Episode Episode Episode Episode Episode Episode

PressOK

Screen cursor and Playback UI disappearsScreen cursor and Playback UI appears

LG Video Playback Behavior with LG Magic Remote

User can wake cursor by shaking the magic remote or pressingOK key from time-out or deep sleep mode .. Playback UI appears when the OK key is pressed.

.User can control the video by pressing control button..

4. In-App AdvertisingLG UI Templates


35/62

34

Currently, LG Smart TV & Media Product only supports browser(HTML)-based Banner with;a. Size: 728x90px, 300x250px, and 180x150px; International standards (CASIE & IAB)b. Free location: App may place banner anywhere as long as the banner and the focus rectangle is on the screen [Table 1]

Heres UI flow for In -App Advertising for 2 different types of advertising: 1) Static Image Advertising, 2) Video Advertising

Banner Size Banner Name Min(XPOS) max(XPOS) Min(YPOS) max(YPOS)

728x90 leaderboard 6 546 6 624

300x250 medrect 6 974 6 464180x150 rect 6 1094 6 564

[Table 1] Three Different Types of Banners and their Minimum and Maximum Values in Pixel

OKFull size image

Display 'loading icon' in loading time Time-out: 3600sTV audio mute

Default focus on the Back

Back

Go to Live TV

Search

1) AD Banner: Static Image Advertising

Ad Banner

Back

2) AD Banner: Video Advertising

Progress Bar Time-out: 5sPressing OK re-appears Progress Bar

Display 'loading icon' in loading time Play the video

00:03 / 00:15 Exit

OK

Back

Search

Ad Banner

5. Game: Input DeviceLG UI Templates


36/62

35

LG Magic Remote

+X

+Z

+Y

G

- Acceleration : 9.8 2 (m/sec 2)- Gyro: 34.8 (rad/sec) = 2000 (deg/sec)

Android/iOS

+X

+Y

+Z

G

Phone screen turn +Z(counterclockwise) Turns clockwise

Coordinate System

(1) 4 Way Buttons + OK + Back

LG Motion Remote Control has a gyroscope sensor in it that moves screencursor by hand-gesture like air-mouse. It has 2 separate Modes. Designinggame application with LG motion remote, your UI must be navigablewith 2 navigation schemes

(2) Cursor + OK + Back

1) LG Magic Remote

TV Screen



37/62

36

Gyro rotational direction

Accel vector

Mag vector

X axis (Roll)

Z axis (Heading or Yaw)

Y axis (Pitch)Right-handed rule

For rotational output, sensor output is positive on clockwise rotationwhen you looking at the each direction.

LG Motion Remote Control has a gyroscope sensor in it that moves screen cursor by hand-gesture like air-mouse.

1) LG Magic Remote

Reference:

LG Magic Remote(NetCast 4.0)

http://www.youtube.com/watch?v=uTW0zlAegzU&feature=youtu.behttp://en.wikipedia.org/wiki/File:Rechte-hand-regel.jpg


38/62

37

LG Smart TV official game-pads

Logitech f310, f510, f710

LG Smart TV supports (*most of them):(1) HID Game pads(2) Xinput Game Pads

2) Game-Pad

5. Game: Sample InteractionLG UI Templates


39/62

38

(1) Up/Down +OK (2) Focus Move

e.g.) Hit the target e.g.) Mahjang

Press Up/Down button to move arrow toward up/down, andOk to shoot to hit the target

e.g.) Spot the Not

Press Up/Down/Left/Right to move cursor to hitspot the not.

Click Ok on object , then press Up/Down/Left/Right to moveselected object

(3) Cursor Move

1) Using 4 Way Navigations + OK button

http://www.youtube.com/watch?v=tv6pgPY6K5shttp://youtu.be/LiJmJ8gZvY8http://youtu.be/2YqOTnC4yZQ


40/62

39

2) Using Motion Gesture + OK button

(1) Turn the wrist (2) Slice

e.g.) Frisbee Forever e.g.) Cut the Rope

Control the Frisbee by using interaction of turning the wristto left & right

e.g.) Lets Golf 3

Play golf with full wing. Also, user mi ght control the anglewith magic remote wheel.

Cut the rope with slicing action

(3) Swing

http://www.youtube.com/watch?v=i25SOLWwDck&feature=youtu.behttp://www.youtube.com/watch?v=TxU7VEqN-Qk&feature=youtu.be


41/62

40

Drag the rope and drop it to the next wheel i n order to rescuethe bird. Press OK long enough to fill the gauge in order to fire.


(4) Wrist Up/Down (5) Point & OK

e.g.) Hit the Target e.g.) Spot the Not e.g.) Fortress 2 Red

(6) Fill the gauge

http://youtu.be/XYUvEmg83uYhttp://youtu.be/mFCkYMlR9hU


42/62

41

Keep zigzagging (very quickly) around the characterin order to keep it up and not to bump into theobstacles.

Move the cursor to the edge of 4 sides and find out more objectsby moving the background.

Control the speed and direction of a movingcharacter in order to get as many items as it can.


(7) Zigzag (8) Speed up & down

e.g.) Angry Duckling e.g.) Katamari Amore e.g.) Angry Bird

(9) Move the background


43/62


Sample UI Flows

1. Catch-up TV: Layout 1Sample UI Flows


44/62

43

Video full screen

TV show: Family GuyEpisode 127min by FOX, United States of America [2009]

CastSeth MacFarlane, Alex Borstein, Mil a Kunis, SethMacFlane

"Family Guy" stars the all-American Griffin family ofPeter, Lois, Meg, Chris, Stewie and Brian. Taking

Related series

Purchase

Rating

Back

Family GuyEpisode 1

Family Guy

Episode Episode Episode Episode Episode Episode Episode Episode

Action

CP Logo

Home

TV

Movie

UCC

Animation

Family GuyThe

SimpsonsErgoproxy

TheBatman

AeonFlux

Ironman

AmericanDad

RobotChicken Flapjack

Business

Comedy

Education

Food

Sports

Adventure

SouthPark

Archer

Naruto

Home _ video selection (TV series)

Related series

Purchase

Rating

Back




Family GuyEpisode 1

Family Guy

Detail contents page original size Related series

Search result _ related series Search result _ related series preview


Family GuyTV show: Family GuyEpisode 226min by FOX, United States of America [2009]



Related series

Purchase

Rating

BackEpisode Episode Episode Episode Episode Episode Episode Episode




Related series

Purchase

Rating

Back

Family GuyEpisode 1

Family Guy





Related series

Purchase

Rating

Back

Family GuyEpisode 1

Family Guy


1. Catch-up TV: Layout 2Sample UI Flows


45/62

44

Search result _ related series Search result _ related series preview

Related series

Purchase

Rating

Back


CastSeth MacFarlane, Alex Borstein, Mil a Kunis, SethMacFlane


Family GuyEpisode 1

Family Guy


Family GuyTV show: Family GuyEpisode 226min by FOX, United States of America [2009]



Related series

Purchase

Rating

BackEpisode Episode Episode Episode Episode Episode Episode Episode




Related series

Purchase

Rating

Back

Family GuyEpisode 1

Family Guy





Related series

Purchase

Rating

Back

Family GuyEpisode 1

Family Guy





Related series

Purchase

Rating

Back

Family GuyEpisode 1

Family Guy


Detail contents page original size related seriesHome _ video selection (TV series)


Animation

Family Guy

Business Comedy Education Sports

The SimpsonsThe Batman

Video full screen

2. VOD: Layout 1Sample UI Flows


46/62

45

Detail contents page original size

Preview

Home _ video selection (movie)

Home

TV

Movie

UCC

CP LogoFor Men

AvatarThe Hunt For

GollumStar Wars:Revelation

The SexMonster

TheProfessional

Ironman

The LastWarrior

JohnnyMnemonic

InglouriousBasterds

Sequel

Christmas

Love Story

FacingDanger

Bloody

Good Vs.Evil

RuthlessKilling

Search result _ related movie

AVATAR AVATAR

Related movie

Purchase

Rating

Back

Movie: Avatar

1h 43mins, United States of America [2009]Director:James Cameron

CastSam Worthington,Zoe Saldana,

A paraplegic marine dispatched to the moon Pandora ona unique mission becomes torn .

Related movie

Purchase

Rating

Back

Movie: Avatar1h 43mins, United States of America [2009]

Director:James Cameron

CastSam W orthington,Zoe Saldana,


AVATAR AVATAR





Related movie

Purchase

Rating

Back

AVATAR AVATAR

movie moviemoviemoviemoviemoviemoviemoviemovie

Video full screen



47/62

46

Home _ video selection (movie) Detail contents page original size

Preview


AVATAR AVATAR

Related movie

Purchase

Rating

Back

Movie: Avatar

1h 43mins, United States of America [2009]Director:James Cameron



Related movie

Purchase

Rating

Back





AVATAR AVATAR





Related movie

Purchase

Rating

Back

AVATAR AVATAR

movie moviemoviemoviemoviemoviemoviemoviemovie

AVATAR AVATAR AVATAR


For Men Sequel Christmas Love Story Bloody

AVATAR AVATAR

Video full screen



48/62

47

Home _ video selection (movie) Detail contents page original size

Preview


Titan

Titan

Related movie

Purchase

Rating

Back

Movie: Titan1h 43mins, United States of America [2009]




Related movie

Purchase

Rating

Back





AVATAR AVATAR





Related movie

Purchase

Rating

Back

AVATAR AVATAR

12111098764


For Men Sequel Christmas Love Story Bloody

Video full screen

AVATAR


Movie: Titan1h 43mins, United States of America [2009]




Related movie

Purchase

Rating

Back

TitanTitan

12111098764

Titan

Titan

3. UCC: Layout 1Sample UI Flows


49/62

48

Home _ 1 st depth - video selection (UCC) Video full screen

Logo Whats Hot

Recommend

Home

Most Popular

Recently

Sports

News

1

2

Push contents category Page

Pressing this number sendsUser to next page of videos

Menu of 2 nd depth

3

4

5

News

Content#1


2nd depth - video selection (UCC)

Logo

News ( -)

World News

Entertainment

Science

Tech

Description

1

2

3

4

56

7

News > World News

Tech




Description of #3

OK

Content#2

Content#3

Content#4

Content#5

News ( -)

Select Content



50/62

49

video full screen

Home _ 1 st depth - video selection (UCC) 2 nd depth - video selection (UCC)

Logo

News ( -)

World News

Entertainment

Science

Tech

Logo

Home

Most Popular

Recently

Sports

News

Title Description

Full-screen Button

Title Description

Full-screen Button

News

News ( -)

News > World News


t d h d l ( ) Vid f ll


51/62

50

Home _ 1 st depth - video selection (UCC)

Logo

Title Title Title

Title Title Title

Home Most Popular Recently Sports News

1/3

Video full screen

4. Photo: Layout 1Sample UI Flows

H h t l ti Ph t i g ith ig ti Ph i


52/62

51

Home _ photo selection Photo view page _ with navigation

Photo view page _ with navigation

Photo view page

CP Logo Menu 1 Menu 2 Photo Menu 4 Menu 5

3/8

Image 5

1 2 3 4 5 6 7

Image 5

To close(hide) navigation : timeout 3 seconds,click OK outside navigation

Image 5

1 2 3 4 5 6 7

Click OK on screen to open(unhide) Navigationmenu

Back

Back

4. Photo: Layout 2Sample UI Flows

Home photo selection Photo view page with navigation Ph t i


53/62

52

Home _ photo selection Photo view page _ with navigation Photo view page

Image 3 Image 3

CP Logo

Menu 1

Menu 2

Photo

Manu 3

1Back

2

3

45

To close(hide) navigation :timeout 3 seconds, click OK outside navigation

5. News PortalSample UI Flows

1) Text/image based news


54/62

53

video

video

CP Logo

Home

News

VideoSearch

Business CP Logo

Back

CP Logo

video full screen

Home _ news selection Detail contents page_ text/image

Detail contents page_ video

Education

Technology

Science

Health

Arts

Style

Travel

Food Makers DeviseOwn Label PlanBy WILLIAM NEUMANPublished: January 24, 2011

FoodMakers Devise Own Label PlanBy WLLIAM NEUMANPubished anuary 24 2011

Starting in the next few months, the front ofmany food packages will prominently displayimportant nutrition information, includingcalorie, fat and sugar content. Theindustrywide program was announcedMonday by food makers and grocers.

The industrywide program was announcedMonday by food makers and grocers.

Staes Help Ex- nmates Find JobsBy STEVENGREENHOUSEPubished anuary 24 2011

Obama o Seek Partia Freeze nSpendngas Deficit MoveBy ACKIE CALMES andMICHAEL D SHEARPubished anuary 25 2011

Financia Cris s Was Avoidabe Inquiry ConcludesBy SEWELL CHANPubished anuary 25 2011

Emanuel Back on Balot; CourtAgrees o Hear CaseBy MONICA DAVEYPubished anuary 25 2011

Back States Help Ex-Inmates FindJobsBy STEVEN GREENHOUSEPublished: January 24, 2011


Starting in the next few months, the front ofmany food packages will prominently displayimportant nutrition information, includingcalorie, fat and sugar content. Theindustrywide program was announcedMonday by food makers and grocers.

The industrywide program was announcedMonday by food makers and grocers.


Obama o Seek Partia Freeze nSpendngas Deficit MoveBy ACKIE CALMES andMICHAEL D SHEARPubished anuary 25 2011

Financia Criss Was Avoidabe Inquiry ConcludesBy SEWELL CHANPubished anuary 25 2011

Emanuel Back on Balot; CourtAgrees o Hear CaseBy MONICA DAVEYPubished anuary 25 2011

Detail contents page_ video full screen



Obama o Seek Partia Freeze n Spend ngas Deficit MoveBy ACKIE CALMES andMICHAEL D SHEARPubished anuary 25 2011

Financia Cris s Was Avoidabe nquiry ConcludesBy SEWELL CHANPubished anuary 25 2011

Emanuel Back on Balot; Court Agreeso Hear CaseBy MONICA DAVEYPubished anuary 25 2011

CP Logo

Home

News

Video

Search

Home _ news selection



Obama o Seek Partia Freeze n Spend ngas Deficit MoveBy ACKIE CALMES andMICHAEL D SHEARPubished anuary 25 2011

Financia Cris s Was Avoidabe nquiry ConcludesBy SEWELL CHANPubished anuary 25 2011

Emanuel Back on Balot; Court Agreeso Hear CaseBy MONICA DAVEYPubished anuary 25 2011

) g

2) Video/text based news

Business

Education

Technology

Science

Health

Arts

Style

Travel

image

video

image

image

video

image

video

image

image

video

image

video

image

image

video

image

video

image

image

image

Video Playing


55/62

1. Safety zoneMost Common Mistakes

App without over scan (safety zone)


56/62

55

will not be displayed in some devices

2. ScrollMost Common Mistakes

There is no scroll button to scroll the list


57/62

56

3. Text SizeMost Common Mistakes

Small Font Size, illegible to user in 3.5 meter (10 foot) distance to TV


58/62

57

3. Focus StatesMost Common Mistakes

Focus states are not distinct


59/62

58


Double Focus


60/62

59


No initial focus, when entered to App with 4 way navigations


61/62

60


62/62

Thank youFin.

61

Documents

Lg Smart Tv and Media Product Ui Guideline_v4.17