LG Smart TV and Media product UI Guideline

LG Smart TV and Media product UI Guideline

/ ver 4.18

2014.06.16. / HE UX Design Team

COPYRIGHT 2013 LG ELECTRONICS. ALL RIGHTS RESERVED.

Legal Notice

Copyright

Copyright © 2014 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.

1

History

Version

4.05

4.10

4.11

4.17

4.18

Date

4/2/2012

9/25/2012

11/21/2012

12/24/2013

6/16/2014

No.

1

2

3

9

10

All

17

38, 39

18,19,20

13,19

24

30

Page.

4.12

4.13

4.14

1/18/2012

2/8/2013

6/5/2013

4.15 11/05/2013

4.16 11/19/2013

4 18

5

6

11

All

7 14, 17, 18, 25

8 16

Description Background

Page numbering error fixed. Indexing reorganized

Recommendation Added: On-screen Keyboard should save last language setting.

UX: Page number error found

Q: Keyboard should save last language for better user experience.

Also NC Platform saves last language.

Description Changed:

<Before> a. Fixed size: 728 (X) x 90 (Y) Pixel b. 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.

<Updated> 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

Guideline Added: Pressing Remote’s ‘Exit’ button or ‘Exit’ on-screen button from App sends user to

LG Live TV without any pop-ups

Description Added: “Wheel: Actual Key Codes are not provided. Apps will receive mouse wheel events”

Guideline updated.

-Distinct mandatory/recommended items.

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

Recommendation Added:

Recommend using LG buttons and Progress bar

Behavior of MHP CPs Added(18, 20page):

Video control may not work with playback control keys in the case of MHP( Multimedia Home

Platform) .

-Popup may appear when user presses Remote’s ‘Exit’ key or ‘Exit’ on-screen button in the case of

MHP( Multimedia Home Platform).

Description Added(19page): User can hide playback control bar by clicking the video screen with pointing cursor when it is appeared.

Change mandatory items to recommendations:

-Over scan area rule (M02 R01)

-Display onscreen ‘Q.Menu’ button on video play screen (M08R08)

1. Specify minimum target size by screen resolution

2. Define font size : Convert

‘pt ‘ to ‘px’

Update a behaviour of LG screen keyboard : Total 5 language keyboard can be selected

SBC: Advertisement Banner

Description is incorrect. Requires update.

SBC: There is no guideline for Exit navigation. Need to define Exit navigation.

R&D VOC: Developers can be confused. Require extra description

-

R&D: The task for improvement of usability



SBC: Add some cases of exception according to MHP spec

Request from Russia R&D : Revise outdated UI rules

2

Table of Contents

Introduction

1. Purpose of this documentation

………………………………….……..………………………………………………………………………………………………………………………………………………………………………….. 6

2. UI Design for TV Viewing Environment

…………………………....................…………………………………………………………………………………………………………………………………………………………........... 7

3. LG Smart TV Navigation Architecture

…………………………………..…………………………..…………………………………………………………………………………………………………………………………................ 8

4. LG Magic Remote Controller

…………………………………………………..……………….…………………………………………………………………………………………………………………………………………………. 9

Mandatory UI Guidelines

1. Mandatory Check List

…………………………………………………………………………………………..………………………………………………………………………………………………………………………………….. 12

2. Screen Layout

……………………………………………………………………….………………………………………………………………………………………………………………………….............................................. 13

[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

…………………………………………………………………..…………………………………………………………………………………………………………………………………………………………. 14

[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

…………………………………..…………………………………….……………………………………………………………………………………………………………………………………………………….. 15

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

[R02] Display onscreen ‘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 onscreen ‘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

………………………………….………………….………………………….………………………………………………………………………………………………………………………………………........ 20

[M09]

Pressing Remote’s ‘Back’ physical key or ‘Back’ on-screen button from App’s landing(entry) page sends user to previous LG menus

[M10]

Pressing Remote’s ‘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 App’s page

[M12]

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

3

Table of Contents

6. Visual Treatment

………………………………………………………………………………………………………………………………………………………………………………………………………………………………….. 22

[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

……………………………….…………………………………………………………………………………………………………………………………………………………………………………………………………….... 27

[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 Templates

1. LG Global QWERTY Screen Keyboard

…………………………………………………………………………………………………………………….…………………………………………………………………………………. 29

2. Magic Remote: Wheel Guideline

………………………………………………………………………………………………..………………………..……………………………………………………………………………………… 31

3. LG Playback control behavior

…………………………………………………………………………………………………………………………………………………………………………………………………………………….. 32

4. In-App Advertising

………………………………………………………………………………………………………………………………………………………………………………………………………………………………..... 33

5. Game

……………………………………………………………….……………………………………………………………………………………………………………………………………………………………………………….. 34

Sample UI Flows

1. Catch-up TV

……………………………………………………………………………………………………………………….…………………………………………………………………………………….…………………………. 43

2. VOD

……………………………………………………………………………………………..………………………..………………………………………………………………………………………………………………………… 45

…………………………………..…………………………………………………………………………………………………………………………………………………………………………………………………………….. 49

3. UCC

4. Photo

……………………………………..………………………………………………………………………………………………………………………………………………………………………………………………………..... 51

5. News Portal

……………………………………………………….……………………………………………………………………………………………………………………………………………………………………………….. 53

Most Common Mistakes

1. Safety Zone

……………………………………………………………………………………………………………………….…………………………………………………………………………………….…………………………. 55

2. Scroll

……………………………………………………………………………………………..………………………..………………………………………………………………………………………………………………………… 56

4. Focus States

……………………………..………………………………………………………………………………………………………………………………………………………………………………………………………..... 58

4

LG Smart TV and Media product UI Guideline

Introduction

1. Purpose of this document

Introduction

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

“ Design your application in harmonious compatibility with LG TV ”

Understand

Understand LG UI architecture and entry/exit points to your application

Know & Apply

Know LG Magic

Remote Control’s interaction & behavior, then apply necessarily

UI elements on your design

Learn & Optimize

Learn TV UI design from

Sample flow, and optimize your design for

10-foot experience

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 .

LG Platform User Seductive Landing

1

Think TV & Media Product users as well.

Consider both users, not only

2

your users using your services, but also LG users browsing your

Hook up users with seductive landing page

Make landing page ‘drop dead gorgeous’. Give users nice visual presentation at first application respectively within

LG TV’s UI architecture and LG landing page by composing different layout, aesthetic, and information visualization remotes.

Interaction Rule Simplicity

3

Obsess on detail interaction rule

Obsess on detailing interaction rules against systemical limitation.

Sweat on ensuring the wireframed experience to be alive in coding.

4

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.

6

2. UI Design for TV Viewing Environment

Introduction

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

Distance from Screen

Environment

User

Behavior

User’s Goal

10 Foot (3.5 Meter)

Fun Environment

Family/Social Environment

2 Foot (70cm)

Work Environment

Single-user Environment

Lean-back

The user will typically be sitting 10 feet (3.5meter) away from the screen

Passive Browsing

Low concentration and involvement

(user’s role)

Comfortable Posture

Comfortable posture involving lying back or face downward

Lean-forward

The user sits upright, control from a close range

Active Interaction & Searching

High concentration and involvement (user’s role)

Constrained Posture

Constrained posture in front of the desk

Entertaining

Primarily for entertainment

Often there is no specific target/goal

Single contents, exploring structure

Working

Goal-oriented, based on various needs

There is a specific target/goal

Infinite type and number, searching structure

7

3. LG Smart TV Navigation Architecture

Introduction

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

Live TV

My Apps

Home Dashboard

1 2

Premium

App

Back

(Remote key / Screen button)

…

Deep Link

If search meta-data is provided to LG

LG Search: Results

Avatar

Back

Remote key/

On-screen button

…

Back


1

Exit

(Remote key)

Exit to Live TV

2

Exit

(Screen button)

Goes back to Live TV or the previously running page

8

Back


‘Deep Link’ Back Behavior

When an app is entered on a deep link page (e.g. coming from LG’s content search page), ‘Back’ shall take the user back to the device page (i.e. search results) and not move ‘Back’ within the App’s page

4. LG Magic Remote Controller

Introduction

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

Screen Cursor Mode:

(Screen Cursor)

 All of UI shall be working with Cursor, OK, and Back

4way Navigation Mode:

(Up/Down/Left/Right)

 All of UI shall be navigable by moving focus with 4 way navigation, OK, and Back

▶

▼

◀

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

9

LG Magic Remote image

2012 model

2013 model 2013 model

(high-end)

4. LG Magic Remote Controller

Introduction

LG Magic Remote Keys available for developer

(Platform version_NetCast4.0)

Button

Power

Back

Home

4 way arrows

Ok

Wheel

Volume

Channel

3D

123

Q.Menu

Behavior

Power On/Off

Back to previous

Send user to LG Home Dashboard

▲ Move focus up

▼ Move focus down

◀ Move focus left

▶ Move focus right

Select item

Page/List Scroll,

Zoom in/out, …

Increase/Decrease Volume

Channel Changing

3D On/Off

LG Native UI : Opens LG My Apps

CP/App UI : Opens LG Q.Menu

LG Q.Menu

Keys available for developer

No

(LG Native Control)

Open

No

(LG Native Control)

Open

Open

Open

No

(LG Native Control)

Open, only when used for channel changing within application

No

(LG Native Control)

No

(LG Native Control)

Local Keys (buttons on the TV)

function same as the buttons on remote controller

10


Mandatory/Recommended

UI Guidelines

1. Mandatory/Recommended Check List

Mandatory/Recommended UI Guidelines

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)

UI Element Behavior

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

Screen Layout

Navigation

Scheme

M01

R01

M02

M03

R02

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

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

On-screen

Button

R03

R04

M04

M05

R05

R06

M06

R07

R08

R09

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

App should be scrolled up/down using wheel keys

Display onscreen ‘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 onscreen ‘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)

Back/Exit

Behavior

Visual

Treatment

R10

M07

M08

M09

M10

M11

R11

M12

R12

M13

M14

R13

R14

R15

Pause indicator should be shown when the playback has been paused

Pressing Remote’s ‘Back’ physical key or ‘Back’ on-screen button from App’s landing(entry) page sends user to previous LG menus

Pressing Remote’s ‘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 App’s page

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

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

R16

R17

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

When users press share/like button (i.e. Facebook

12

2. Screen Layout


M01

R01

UI 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

- 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

Over-scan Area

Safe Area (1216x666pixel)

32

1216

1280

13

32

3. Navigation Schemes


M02

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)

OK

Up, Down, Left, Right

Back

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 clickable with Magic Remote or colored keys on Normal Remote.

Colored keys on

Normal Remote

OSD buttons working with colored keys

NetCast4.0 On Now

M03

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 Content

Content Content Content Content

Content Content Content Content Content

R02

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.

14

Reference:

LG TV Navigation Scheme (NetCast 4.0)

4. On-screen Button


M04

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

- Without it, it is unable to scroll the list with LG

Magic Remote’s on-screen cursor

(Correct)

Menu 6 Menu 7

…

Video 8 Video 9

…

(Incorrect)

Menu 3.7

Menu 3.8

(?)

R03

Display onscreen ‘Back/Exit’ button

-

App could display ‘Back’ or ‘Exit’ button on any pages.

-

User don’t have to look at their remote controller to find the ‘Back’ or ‘Exit’ key  ‘eyes on screen’

NetCast4.0 Game Application

15



R04

Recommend using LG buttons and Progress bar

-

LG’s buttons and progress bar are provided by Library

Back Exit

52 5 52 21

24

12

Back / Exit button Target

246

- Location of Back, Exit button: the top right of the screen.

- Size: 52x52px(Full HD), 78x78(Ultra HD)

555

1

Back / Exit button Focus

**When the button focused, the focus animation is like upper.

4

8 173

2

180

2

180

2

180

2

180

2

178

2

173 8

4

7 4 5 6

Progress bar Target

- Location of Progress bar: the bottom edge of the screen.

- Size of Progress bar: 1280x320 px, shadow included 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

16



M05

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.

(Use)

(Don’t use)

NetCast4.0 System Keyboard Triple Button KeyPad

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.

R06

Recommend using LG keyboard

-

LG’s QWERTY keyboard is provided by Library

Reference:

LG TV System Keyboard(NetCast 4.0)

LG QWERTY keyboard

17



M06

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 onscreen menu.

- All of playback control buttons has to be clickable with screen-cursor and selectable with up, down, left, right, OK keys.

Video control keys on

Remote Controller:

video playback shall also support via video play/pause/forward/rewind/stop keys on remote controller.

* Video control may not work with these keys in the case of

MHP( Multimedia Home

Platform) .

Video Control keys

Remote Controller

NetCast4.0 Video Control Bar

R07

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 developer’s customizable area.

■

Stop button

▶▶

FF button

▶|

Skip forward button

▶/ll

Play/Pause button

◀◀

REW button

|◀

Skip backward button

Back button

00:00:00 / 00:00:00

■

i.e. Video Control Bar

▶/ll |◀ ◀◀ ▶▶ ▶|

18



R08

Display onscreen ‘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 applies to 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.Menu with a simple function called

‘NetCastLaunchQMENU’.

Options

Set Picture

Set Sound

3D Setting

Ratio

Speaker

Original

Sleep Timer

TV Speaker

Close

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)

Options


– Q.Menu button


– Options

R09

R10

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.

Pause indicator should be shown when the playback has been paused

-

If there is no indicator, user can’t recognize easily the status of playback.

||


– Pause indication

19

5. Back/Exit Behavior


M07

M08

Pressing Remote’s ‘Back’ physical key or ‘Back’ on-screen button from App’s landing(entry) page sends user to previous LG menus

Pressing Remote’s ‘Exit’ physical key or ‘Exit’ on-screen button from App sends user to LG Live TV or previous LG menus

Live TV My Apps

Home Dashboard Premium

M09

1 2

App

Back


…

1

Exit

(Remote key)

Exit to Live TV

2

Exit

(Screen button)

Goes back to Live TV or the previously running page

NetCast4.0 LG UI

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 move

‘Back’ within the App’s page

LG Search: Results

Avatar

Deep Link

If search meta-data is provided to LG

…

Back


* Popup may appear when user presses Remote’s

‘Exit’ key or ‘Exit’ on-screen button in the case of

MHP( Multimedia Home Platform).

NetCast4.0 LG UI

20

5. Back/Exit Behavior


M10

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

LG Device Page

Live TV

My Apps

Home Dashboard

App

Back


3 rd

Party Page

Premium

…

Back


Back


21

6. Visual Treatment


M11

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

-

Both ‘pointer focus’ and ‘4way navigation focus’ has to be implemented.

Idle states

Object

Focused states

Object

T

R11

App should always have focus when in 4way navigation mode

Menu 1

Menu 2

Menu 3

Where is the focus??

22



M12

App should never leave the screen black

- User doesn’t know what is going on

- Streaming UI page has visual cue to indicate that content is loading

(Use) (

Don’t Use)

?

Loading

i.e. Loading State Indication

R12

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)

CP Logo

Animation

Home

Business

TV

Movie UCC

Comedy

Education

Radio

Sports

The Batman

Family Guy

The Simpsons

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

23

Reference:

Loading State Indication (NetCast 4.0)



M13

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.

Type

Clickable Object (Screen-button)

Image Recognition i.e. Movie covers, music albums

Recommended Minimum Size

75 x 75 pixel (for 1280p) 50 x 50 pixel (for 720p)

75 x 75 pixel (for 1280p) 50 x 50 pixel (for 720p)

M14

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.

R13

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

Body & button

Key help & info

Minimum font size

Title Large Font

Large Font

Medium Font

Small Font

-

1280p

48px

41px

32px

28px

20px

720p

33px

27px

23px

20px

14px

24



R14

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.

Font Preview : LG Display Font

Regulations by local

LG Display-Regular

Local TTF files

Full version : LG_Display.ttf

LG_Display_Light.ttf

Taiwan/Hong Kong : LG_Display_HK.ttf

LG_Display_HK_Light.ttf

*Japan : LG_Display_JP.ttf

LG Display-Light

All font should be used as 100% width

Font Preview : Tiresias

Local TTF files

tt7268m_804.ttf

Should be used as 100% width

25



R15

Minimize the size of overlapped App on the Live TV

-

An app’s 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.

Overlap

-ped

App

Overlapped App

i.e.

Horizontal Overlapped App i.e.

Vertical Overlapped App

26

7. Others


R16

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)

Ad Banner

Search

NetCast4.0 LG UI

R17

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 via LG Smart TV

Facebook Display

27


LG UI Templates

1. LG Global QWERTY Screen Keyboard

LG UI Templates

LG Global QWERTY Screen Keyboard

RUS

Avatar l

Reference:

LG Screen Keyboard(NetCast 4.0)

RUS

Global language selection button

Selected language toggle button (it stands for next language)

Lower / Upper Case toggle button (refer “Language layout set” page)

Symbol button

Space Bar

Clear

Clear all written letters in text input field

Delete Button (pressing once, deleting a letter)

Change a line button (as required

– Social network services / Chatting, etc.)

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

Hide virtual keyboard button

Example of screen keyboard Pop-

up: Once user places s focus and click ‘ok’ the text input field, the keyboard shall pop-up

Avatar

Text input box

Example

요론거

OK

Avatar l

RUS

Example

요론거

Example

요론거

29

1. LG Global QWERTY Screen Keyboard

LG UI Templates

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)

※Total of 5 Language keyboard selections can be selected

according to newely updated system keyboard function

30

2. Magic Remote: Wheel Guideline

LG UI Templates

LG Global ‘Wheel Interaction’ Framework for 3rd Party

Wheel

Scroll

Horizontal List

Left  Right

Forward

List Scrolling

6 7 8 9 10

Screen

Cursor

1 2 3 4 5

Left  Right

Backward

1 2 3 4 5

6 7 8 9 10

Vertical List

Top  bottom

10 11 12

13 14 15

16 17 18

1 2 3

4 5 6

7 8 9

Top  Bottom

1 2 3

4 5 6

7 8 9

10 11 12

13

14

15

16 17 18

31

Zoom in/out

Map

Zoom In

50%

00%

Zoom Out

100%

50%

3. LG Playback control behavior

LG UI Templates

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

■

▶

ll

▶▶

◀◀

Stop

Play

Pause

FF

REW

Back

Quick Menu

When selecting Quick Menu

Options

Set Picture

Set Sound

3D Setting

Ratio

Speaker

Sleep Timer

Original

TV Speaker

Close

Ratio

Developer’s customizable Area

- Add buttons of additional feature calls

Stops play and returns to the previous screen

Starts play

Stops momentarily while playing

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

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

Stops playing and moves to previous list

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

32

3. LG Playback control behavior

LG UI Templates

LG Video Playback Behavior with LG Magic Remote

Family Guy

Episode 12

Rating

Related series

Purchase

Back

TV show: Family Guy

Episode 2

26min by FOX, United States of America [2009]

Cast

Seth MacFarlane, Alex Borstein, Mila Kunis, Seth

MacFlane

"Family Guy" stars the all-American Griffin family

, Lois, Meg, Chris, Stewie and Brian. Taking

Family Guy

Episode Episode Episode Episode Episode Episode Episode

Press

OK

Screen cursor and Playback UI appears

Video Playing…

Cursor awakes from time-out or deep sleep mode

Video Playing…

Press

OK

Press OK or Shake Magic Remote

Call Playback UI

Video Playing…

5 sec.

Time-out

Screen cursor and Playback UI disappears

Video Playing…

Press OK

- If no key input for 5 seconds, playback control pad disappears with pointing cursor as well.

- Cursor turns into deep sleep mode, when screen-cursor doesn’t move for 30 minutes.

Pause Screen

User can wake cursor by shaking the magic remote or pressing

OK key from time-out or deep sleep mode .

. Playback UI appears when the OK key is pressed.

.

33

User can control the video by pressing control button.

.

4. In-App Advertising

LG UI Templates

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]

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

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

728x90

leaderboard 6 546

300x250

medrect 6 974

180x150

rect 6 1094

Min(YPOS)

6

6

6

max(YPOS)

624

464

564

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

1) AD Banner: Static Image Advertising

OK

Default focus on the Back

Full size image

Back

Ad Banner

Display 'loading icon' in loading time Time-out: 3600s

TV audio mute

Search

Back

Go to Live TV

2) AD Banner: Video Advertising

Play the video

Display 'loading icon' in loading time

OK

Back

Ad Banner

Search

34

■

Exit

Progress Bar Time-out: 5s

Pressing OK re-appears Progress Bar

00:03 / 00:15

5. Game: Input Device

LG UI Templates

1) LG Magic Remote

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

Designing game application with LG motion remote, your UI must be navigable with 2 navigation schemes

(1) 4 Way Buttons + OK + Back

Coordinate System

+Y

+Z

G

+X

(2) Cursor + OK + Back

TV Screen

Android/iOS

Phone screen turn +Z

(counterclockwise)

+Z

+X

G

+Y

LG Magic Remote

Turns clockwise

- Acceleration : ±9.8×2 (m/sec

2

)

- Gyro: ±34.8 (rad/sec) = ±2000 (deg/sec)

35


LG UI Templates

1) LG Magic Remote

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

Right-handed rule

X axis (Roll)

Y axis (Pitch)

Z axis (Heading or Yaw)

Gyro rotational direction

Accel vector

Mag vector

36

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

Reference:

LG Magic Remote(NetCast 4.0)


LG UI Templates

2) Game-Pad

LG Smart TV supports (*most of them):

(1) HID Game pads

(2) Xinput Game Pads

LG Smart TV official game-pads

Logitech f310, f510, f710

37

5. Game: Sample Interaction

LG UI Templates

1) Using 4 Way Navigations + OK button

(1) Up/Down +OK e.g.) Hit the target

(2) Focus Move e.g.) Mahjang

(3) Cursor Move e.g.) Spot the Not

Press Up/Down button to move arrow toward up/down, and

‘Ok’ to shoot to hit the target

Click ‘Ok’ on object , then press ‘Up/Down/Left/Right‘ to move selected object

Press ‘Up/Down/Left/Right’ to move cursor to hit

‘spot the not’.

38


LG UI Templates

2) Using Motion Gesture + OK button

(1) Turn the wrist e.g.) Frisbee Forever

(2) Slice e.g.) Cut the Rope

(3) Swing e.g.)

Let’s Golf 3

Control the Frisbee by using interaction of turning the wrist to left & right

Cut the rope with slicing action

Play golf with full wing. Also, user might control the angle with magic remote wheel.

39


LG UI Templates


(4) Wrist Up/Down e.g.) Hit the Target

(5) Point & OK e.g.) Spot the Not

Drag the rope and drop it to the next wheel in order to rescue the bird.

(6) Fill the gauge e.g.) Fortress 2 Red

Press OK long enough to fill the gauge in order to fire.

40


LG UI Templates


(7) Zigzag e.g.) Angry Duckling

(8) Speed up & down e.g.) Katamari Amore

(9) Move the background e.g.) Angry Bird

Keep zigzagging (very quickly) around the character in order to keep it up and not to bump into the obstacles.

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

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

41


Sample UI Flows

1. Catch-up TV: Layout 1

Sample UI Flows

CP Logo

Home

TV

Movie

UCC

Home _ video selection (TV series)

Animation

Business

Family Guy

The

Simpsons

Ergo proxy

Comedy

Education

The

Batman

Aeon

Flux

Iron man

Food

Sports

Adventure

American

Dad

Robot

Chicken

Flapjack

Action

South

Park

Archer

Naruto

Search result _ related series


Episode 1

Family Guy

Episode 1

Rating

Related series

Purchase


Cast


MacFlane

"Family Guy" stars the all-American Griffin family of

Peter, Lois, Meg, Chris, Stewie and Brian. Taking

Back

Episode Episode Episode Episode Episode

Family Guy

Episode Episode Episode

Detail contents page

– original size


Episode 1

Family Guy

Episode 1


Rating

Related series

Purchase

Back

Cast


MacFlane



Family Guy



Episode 2

Family Guy

Episode 1


Rating

Related series

Purchase

Cast


MacFlane



Back

Episode

Episode


Family Guy


Video full screen

Related series


Episode 1

Family Guy

Episode 1

Rating

Related series

Purchase

Back


Cast


MacFlane



Family Guy

Episode Episode Episode Episode Episode Episode Episode Episode

preview


Episode 2

Family Guy

Family Guy

Episode 12


Rating

Related series

Purchase

Cast


MacFlane



Back


43

1. Catch-up TV: Layout 2

Sample UI Flows

Home _ video selection (TV series) Detail contents page


CP Logo

Animation

Home

Business

TV

Movie UCC

Comedy Education

The Batman

Family Guy

Radio

Sports

The Simpsons


Episode 1

Family Guy

Episode 1


Cast

Rating

Related series


MacFlane


Purchase


Back

Family Guy



Episode 1

Family Guy

Episode 1

Rating

Related series

Purchase


Cast


MacFlane



Back

Episode Episode Episode Episode Episode

Family Guy




Episode 2

Family Guy

Episode 1


Rating

Related series

Purchase

Cast


MacFlane



Back

Episode

Episode


Family Guy


related series


Episode 1

Family Guy

Episode 1

Rating

Related series

Purchase

Back


Cast


MacFlane



Family Guy


preview


Episode 2

Family Guy

Family Guy

Episode 12


Rating

Related series

Purchase

Cast


MacFlane



Back



44

2. VOD: Layout 1

Sample UI Flows

Home _ video selection (movie)

CP Logo

Home

TV

Movie

UCC

For Men

Sequel

Christmas

Love Story

Facing

Danger

Bloody

Good Vs.

Evil

Ruthless

Killing

Avatar

The Sex

Monster

The Last

W arrior

The Hunt For

Gollum

Star W ars:

Revelation

The

Professional

Iron man

Johnny

Mnemonic

Inglourious

Basterds

Preview

Movie: Avatar

AVATAR 1h 43mins, United States of America [2009]

Rating

Related movie

Purchase

Back

Director:

James Cameron

Cast

Sam Worthington,

Zoe Saldana,

A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn ….

AVATAR



Movie: Avatar

AVATAR

1h 43mins, United States of America [2009]

Rating

Related movie

Purchase

Back

Director:

James Cameron

Cast

Sam Worthington,

Zoe Saldana,


AVATAR

Search result _ related movie

Movie: Avatar

AVATAR

Rating

Related movie

Purchase

Back


Director:

James Cameron

Cast

Sam Worthington,

Zoe Saldana,


AVATAR movie movie movie movie movie movie movie movie movie


45


Sample UI Flows


CP Logo

For Men

Home

Sequel

TV

Movie

UCC Radio

Christmas Love Story Bloody

AVATAR AVATAR AVATAR AVATAR AVATAR



Movie: Avatar

AVATAR

Rating

Related movie

Purchase

Back


Director:

James Cameron

Cast

Sam Worthington,

Zoe Saldana,


AVATAR


Movie: Avatar

AVATAR

Rating

Related movie

Purchase

Back


Director:

James Cameron

Cast

Sam Worthington,

Zoe Saldana,


AVATAR movie movie movie movie movie movie movie movie movie

Preview

Movie: Avatar

AVATAR

Rating

Related movie

Purchase

Back


Director:

James Cameron

Cast

Sam Worthington,

Zoe Saldana,


AVATAR


46


Sample UI Flows


CP Logo

For Men

Home

Sequel

TV

Movie

UCC Radio

Christmas Love Story Bloody

AVATAR



Movie: Avatar

AVATAR

Rating

Related movie

Purchase

Back


Director:

James Cameron

Cast

Sam Worthington,

Zoe Saldana,


AVATAR


Movie: Avatar

AVATAR

Rating

Related movie

Purchase

Back


Director:

James Cameron

Cast

Sam Worthington,

Zoe Saldana,


AVATAR

4

Titan

6 7 8 9 10 11 12


Movie: Titan

Titan

Rating

Related movie

Purchase

Back


Director:

James Cameron

Cast

Sam Worthington,

Zoe Saldana,


4

Titan

6 7 8 9 10

Titan

11 12

Preview

Movie: Titan

Titan


Rating

Related movie

Purchase

Back

Director:

James Cameron

Cast

Sam Worthington,

Zoe Saldana,


Titan


47

3. UCC: Layout 1

Sample UI Flows

Logo

Home

Most Popular

Home _ 1 st

depth - video selection (UCC)

Push contents category

What’s Hot

Content

#1

Content

#2

Content

#3

Content

#4

Recently

Sports

Recommend

Content

#5

News

Page

1

2

3

4

5

Content Content Content Content Content

OK

Description of #3

Pressing this number sends

User to next page of videos

News (

-

)

News

Logo

News (

-

)

World News

Entertainment

Science

Tech

Tech

2 nd depth - video selection (UCC)

Content

Content

Content

Content

Content

Content

Content

News > World News

Content Content

1

2

Content Content

3

4

5

6

7

Content Content

Description

Content Content

Menu of 2 nd depth

48

Select Content



Sample UI Flows

Logo

Home

Most Popular

Recently

Sports

News

Home _ 1 st


Full-screen Button

Title Description

News

News (

-

)

Logo

News (

-

)

World News

Entertainment

Science

Tech

2 nd


News > World News

▶

Full-screen Button

Title Description

video full screen

49


Sample UI Flows

Home _ 1 st


Logo 1/3

Title Title Title

Title

Home

Title

Most Popular Recently Sports

Title

News


50

4. Photo: Layout 1

Sample UI Flows

CP Logo

Home _ photo selection

Menu 1 Menu 2

Photo

Menu 4 Menu 5

3/8

Photo view page _ with navigation

Photo view page

Image 5

Back

1 2 3 4

5

6 7

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

Image 5

Click ‘OK’ on screen to open(unhide) Navigation menu


Back

1 2

Image 5

3 4

5

6 7

51

4. Photo: Layout 2

Sample UI Flows

Home _ photo selection

CP Logo

Menu 1

Menu 2

Photo

Manu 3

1

2

3

4

5


Back

Image 3

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

Photo view page

Image 3

52

5. News Portal

Sample UI Flows

1) Text/image based news

Home _ news selection

CP Logo

Home

News

Video

Search

Business

Education

Technology

Science

Health

Arts

Style

Travel image video image image video

Food Makers Devise Own Label Plan

By W I LLIAM NEUMAN

P u b lished: January 24, 2011

S tates Help Ex-Inmates Find Jobs

By S TEVEN GRE ENHOUSE


Obama to Seek Partial Freeze in Spending as Deficit Move

By J A CKIE CA LMES and MICHAEL D. SHEA R


Financial Crisis Was ‘Avoidable,’ Inquiry Concludes

By S E WELL CHAN


Emanuel Back on Ballot; Court Agrees to Hear Case

By M ONICA DAVEY


2) Video/text based news

Home _ news selection

CP Logo

Home

News

Video

Search

Business

Education

Technology

Science

Health

Arts

Style

Travel image video image image video


By W I LLIAM NEUMAN





Obama to Seek Partial Freeze in Spending as Deficit Move



Financial Crisis Was ‘Avoidable,’ Inquiry Concludes

By S E WELL CHAN


Emanuel Back on Ballot; Court Agrees to Hear Case

By M ONICA DAVEY


Detail contents page_ text/image

CP Logo

Back image

Food Makers Devise

Own Label Plan

By WILLIAM NEUMAN

Published: January 24, 2011 image video

Starting in the next few months, the front of many food packages will prominently display important nutrition information, including calorie, fat and sugar content. The industrywide program was announced

Monday by food makers and grocers.

The industrywide program was announced

Monday by food makers and grocers. image image video


By W I LLIAM NEUMAN





Obama to Seek Partial Freeze in

S pending as Deficit Move



Financial Crisis Was ‘Avoidable,’

In quiry Concludes

By S E WELL CHAN


Emanuel Back on Ballot; Court

Agrees to Hear Case

By M ONICA DAVEY


Detail contents page_ video

CP Logo

Back video

States Help Ex-Inmates Find

Jobs

By STEVEN GREENHOUSE

Published: January 24, 2011 image video

Starting in the next few months, the front of many food packages will prominently display

video full screen

calorie, fat and sugar content. The image industrywide program was announced

Monday by food makers and grocers.

The industrywide program was announced

Monday by food makers and grocers. image video


By W I LLIAM NEUMAN





Obama to Seek Partial Freeze in

S pending as Deficit Move



Financial Crisis Was ‘Avoidable,’

In quiry Concludes

By S E WELL CHAN


Emanuel Back on Ballot; Court

Agrees to Hear Case

By M ONICA DAVEY


Detail contents page_ video full screen

Video Playing…

53


Most Common Mistakes

1. Safety zone

Most Common Mistakes

App without over scan (safety zone)

will not be displayed in some devices

55

2. Scroll


There is no scroll button to scroll the list

56

3. Text Size


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

57

3. Focus States


Focus states are not distinct

58

4. Focus States


Double Focus

59

4. Focus States


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

60

61

Fin.

Thank you

LG Smart TV and Media product UI Guideline

LG Smart TV and Media product UI Guideline

COPYRIGHT 2013 LG ELECTRONICS. ALL RIGHTS RESERVED.

Legal Notice

Copyright

Copyright © 2014 LG Electronics, Inc. All Rights Reserved.

History

Table of Contents

Introduction

Mandatory UI Guidelines

Table of Contents

LG UI Templates

Sample UI Flows

Most Common Mistakes

Introduction

1. Purpose of this document

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

“ Design your application in harmonious compatibility with LG TV ”

Understand

Understand LG UI architecture and entry/exit points to your application

Know & Apply

Know LG Magic

Remote Control’s interaction & behavior, then apply necessarily

UI elements on your design

Learn & Optimize

Learn TV UI design from

Sample flow, and optimize your design for

10-foot experience

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 .

LG Platform User Seductive Landing

Consider both users, not only

your users using your services, but also LG users browsing your

Make landing page ‘drop dead gorgeous’. Give users nice visual presentation at first application respectively within

LG TV’s UI architecture and LG landing page by composing different layout, aesthetic, and information visualization remotes.

Interaction Rule Simplicity

Obsess on detailing interaction rules against systemical limitation.

Sweat on ensuring the wireframed experience to be alive in coding.

Having more features creates complexity to users. Select key features, provide simple experience to user by placing better experience ahead of more features.

2. UI Design for TV Viewing Environment

TV User

PC User

3. LG Smart TV Navigation Architecture

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

‘Deep Link’ Back Behavior

4. LG Magic Remote Controller

Screen Cursor Mode:

4way Navigation Mode:

▶

▼

◀

Switching mode from one another;

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

LG Magic Remote image

4. LG Magic Remote Controller

Local Keys (buttons on the TV)

Mandatory/Recommended

UI Guidelines

1. Mandatory/Recommended Check List

2. Screen Layout

3. Navigation Schemes

* All Apps must support LG Magic Remote Controller

4. On-screen Button

(Correct)

…

…

(Incorrect)

4. On-screen Button

4. On-screen Button

(Use)

(Don’t use)

4. On-screen Button

4. On-screen Button

5. Back/Exit Behavior

5. Back/Exit Behavior

6. Visual Treatment

Object

Object

6. Visual Treatment

(Use) (

Don’t Use)