슬라이드 1 - Конкурс приложений LG Smart TV Contest

슬라이드 1 - Конкурс приложений LG Smart TV Contest
LG Smart TV and Media product UI Guideline
/ ver 4.17
2013.12.24. / HE UX Planning Team
COPYRIGHT 2013 LG ELECTRONICS. ALL RIGHTS RESERVED.
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.
1
History
Version
Date
No.
Page.
Description
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 last
language for better user experience.
Also NC Platform saves last language.
SBC: Advertisement Banner
Description is incorrect. Requires
update.
4.11
11/21/2012
3
38, 39
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
4.12
1/18/2012
4
18
Guideline Added: Pressing Remote‟s „Exit‟ button or „Exit‟ on-screen button from App sends user to
LG Live TV without any pop-ups
4.13
2/8/2013
5
11
4.14
6/5/2013
6
All
4.15
11/05/2013
7
14, 17, 18, 25
4.16
11/19/2013
8
16
4.17
12/24/2013
9
18,19,20
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).
-Pop-up 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.
2
Background
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
R&D: The task for improvement of
usability
R&D: The task for improvement of
usability
SBC: Add some cases of exception
according to MHP spec
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 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
………………………………….………………….………………………….………………………………………………………………………………………………………………………………………........ 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
3. UCC …………………………………..…………………………………………………………………………………………………………………………………………………………………………………………………………….. 49
4. Photo ……………………………………..………………………………………………………………………………………………………………………………………………………………………………………………………..... 51
5. News Portal ……………………………………………………….……………………………………………………………………………………………………………………………………………………………………………….. 53
Most Common Mistakes
1. Safety Zone ……………………………………………………………………………………………………………………….…………………………………………………………………………………….…………………………. 55
2. Scroll ……………………………………………………………………………………………..………………………..………………………………………………………………………………………………………………………… 56
…………………………………..…………………………………………………………………………………………………………………………………………………………………………………………………………….. 57
3. Text Size
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
Know & Apply
Learn & Optimize
Know LG Magic Remote Control‟s
Learn TV UI design from
interaction & behavior,
Sample flow, and optimize
architecture and entry/exit
then apply necessarily
points to your application
your design for
UI elements on your design
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
1
Think TV & Media Product
users as well.
Consider both users, not only
your users using your services,
but also LG users browsing your
Seductive Landing
2
Interaction Rule
3
Hook up users with
seductive landing page
Make landing page „drop dead
gorgeous‟. Give users nice
visual presentation at first
Obsess on detail
interaction rule
Obsess on detailing interaction
rules against systemical limitation.
Sweat on ensuring the
Simplicity
4
Strive for simplicity
Having more features creates
complexity to users. Select key
features, provide simple
experience to user by placing
application respectively within
landing page by composing
wireframed experience to be
better experience ahead of
LG TV‟s UI architecture and LG
different layout, aesthetic,
alive in coding.
more features.
remotes.
and information visualization
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
Distance from Screen
PC User
10 Foot (3.5 Meter)
2 Foot (70cm)
Fun Environment
Work Environment
Family/Social Environment
Single-user Environment
Lean-back
The user will typically be sitting 10 feet (3.5meter)
away from the screen
Lean-forward
The user sits upright, control from a close range
Passive Browsing
Low concentration and involvement (user‟s role)
Active Interaction & Searching
High concentration and involvement (user‟s role)
Comfortable Posture
Comfortable posture involving lying back or face
downward
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
Environment
User
Behavior
User‟s Goal
7
3. LG Smart TV Navigation Architecture
Introduction
Entry & Exit points from LG Smart TV UI (Platform version_NetCast4.0)
My Apps
Home Dashboard
LG Search: Results
Premium
LG UI
Live TV
Avatar
App
…
1
2
Back (Remote key / Screen button)
Deep Link
If search meta-data
is provided to LG
3rd Party Application UI
…
Back
Remote key/
On-screen button
Back (Remote key / Screen button)
1
Exit (Remote key)
-
2
Exit to Live TV
Back (Remote key / Screen button)
Exit (Screen button)
-
„Deep Link‟ Back Behavior
Goes back to Live TV or the previously
running page
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
8
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:
4way Navigation Mode:
(Screen Cursor)
 All of UI shall be working with Cursor, OK, and Back
(Up/Down/Left/Right)
 All of UI shall be navigable by moving focus with 4 way navigation, OK, and Back
▶
▼
◀
LG Magic Remote image
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
2012 model
9
2013 model
2013 model
(high-end)
4. LG Magic Remote Controller
Introduction
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 application
3D
3D On/Off
No (LG Native Control)
LG Native UI : Opens LG My Apps
CP/App UI : Opens LG Q.Menu
123
Q.Menu
No (LG Native Control)
LG Q.Menu
Local Keys (buttons on the TV)
function same as the buttons on remote controller
10
LG Smart TV and Media product UI Guideline
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
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
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
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
Screen Layout
Navigation
Scheme
On-screen
Button
Back/Exit
Behavior
Visual
Treatment
R06
The playback control bar should be composed of following buttons: Play/Pause button, Stop button, Skip button, Scanning 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
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 previously running page
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
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
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, it12
should display „via LG Smart TV‟ on Facebook web page
Others
2. Screen Layout
Mandatory/Recommended UI Guidelines
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
- 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
32
Over-scan Area
Safe Area (1216x666pixel)
666
720
22
32
32
1216
1280
13
3. Navigation Schemes
Mandatory/Recommended UI Guidelines
M03
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
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.
Up, Down, Left, Right
Back
Colored keys on
Normal Remote
M04
OSD buttons working with colored keys
NetCast4.0 On Now
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
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Science
Tech
Tech
Reference:
Content
R01
Content
Content
Content
LG TV Navigation Scheme (NetCast 4.0)
Content
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
4. On-screen Button
Mandatory/Recommended UI Guidelines
M05
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
(Incorrect)
(Correct)
Menu 6
Video 8
Menu 7
Video 9
…
…
Menu 3.7
Menu 3.8
R02
Display on-screen „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
(?)
4. On-screen Button
Mandatory/Recommended UI Guidelines
Recommend using LG buttons and Progress bar
- LG‟s buttons and progress bar are provided by Library
R03
52
5
52
21
Back Exit
24
12
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 is like upper.
4
8
555
4
246
1
2
173
5
2
180
6
2
180
2
180
2
180
2
178
4
173
8
7
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
4. On-screen Button
Mandatory/Recommended UI Guidelines
M06
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)
NetCast4.0 System Keyboard
(Don‟t use)
Triple Button KeyPad
R04
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.
R05
Recommend using LG keyboard
- LG‟s QWERTY keyboard is provided by Library
Reference:
LG TV System Keyboard(NetCast 4.0)
LG QWERTY keyboard
17
4. On-screen Button
Mandatory/Recommended UI Guidelines
M07
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).
NetCast4.0 Video Control Bar
R06
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.
■
▶/ll
Stop button
▶▶
FF button
▶ ▶|
Skip forward button
Play/Pause button
◀◀
REW button
|◀ ◀
Skip backward button
Back button
00:00:00 / 00:00:00
■
▶/ll
|◀
◀◀
▶▶
▶|
i.e. Video Control Bar
18
Video Control keys
Remote Controller
4. On-screen Button
Mandatory/Recommended UI Guidelines
M08
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 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
Original
Ratio
Speaker
TV Speaker
Sleep Timer
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
NetCast4.0 Video Control Bar – Q.Menu button
NetCast4.0 Video Control Bar – Options
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)
- 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.
R08
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.
||
NetCast4.0 Video Control Bar – Pause indication
19
5. Back/Exit Behavior
Mandatory/Recommended UI Guidelines
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
Live TV
My Apps
Home Dashboard
Premium
App
1
2
Back (Remote key / Screen button)
…
1
Exit (Remote key)
-
2
Exit to Live TV
Exit (Screen button)
-
Goes back to Live TV or the previously
running page
NetCast4.0 LG UI
M11
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
(Remote key / Screen button)
* Pop-up 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
Mandatory/Recommended UI Guidelines
Sequence of „Back‟ action should lead consumer back to original entry point
M12
LG Device Page
Live TV
My Apps
Home Dashboard
Premium
App
…
Back (Remote key / Screen button)
3rd
Party Page
Back (Remote key / Screen button)
Back (Remote key / Screen button)
21
6. Visual Treatment
Mandatory/Recommended UI Guidelines
M13
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
Focused states
Object
Object
T
R09
App should always have focus when in 4way navigation mode
Menu 1
Where is the focus??
Menu 2
Menu 3
22
6. Visual Treatment
Mandatory/Recommended UI Guidelines
M14
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)
?
Reference:
Loading
Loading State Indication (NetCast 4.0)
i.e. Loading State Indication
R10
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
The Batman
TV
Movie
Comedy
UCC
Education
Family Guy
Radio
Sports
The Simpsons
User must be able to know where the current focus is!
23
6. Visual Treatment
Mandatory/Recommended UI Guidelines
M15
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
Recommended Minimum Size
Clickable Object (Screen-button)
54 x 54 pixel
Image Recognition
i.e. Movie covers, music albums
54 x 54 pixel
M16
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.
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
Large Font
38 pt
Recommended Font Size
Body & button
Medium Font
30 pt
Key help & info
Small Font
26 pt
Minimum font size
-
18 pt
Mandatory Font Size
24
6. Visual Treatment
Mandatory/Recommended UI Guidelines
R12
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
Local TTF files
LG Display-Regular
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
6. Visual Treatment
Mandatory/Recommended UI Guidelines
R13
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
Mandatory/Recommended UI Guidelines
R14
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
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
via LG Smart TV
Facebook Display
27
LG Smart TV and Media product UI Guideline
LG UI Templates
1. LG Global QWERTY Screen Keyboard
LG UI Templates
LG Global QWERTY Screen Keyboard
RUS
Reference:
LG Screen Keyboard(NetCast 4.0)
Clear
Global language selection button
RUS
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
Example of screen keyboard Pop-up: Once user places s focus and click „ok‟ the text input field, the keyboard shall pop-up
Avatar
Avatar l
Text input box
Example
요론거
OK
Example
요론거
Avatar l
RUS
29
Example
요론거
1. LG Global QWERTY Screen Keyboard
LG UI Templates
User can select up to 3 languages
albania
RUS
i.e. When an alphabet has a multiple characters
Reference:
LG Screen Keyboard language selection (NetCast 4.0)
30
2. Magic Remote: Wheel Guideline
LG UI Templates
LG Global „Wheel Interaction‟ Framework for 3rd Party
List Scrolling
Wheel
Scroll
Zoom in/out
Horizontal List
Vertical List
Map
Left  Right
Top  bottom
Zoom In
50%
10 11 12
Forward
Screen
Cursor
6
7
8
9
13 14 15
16 17 18
10
00%
1
2
3
4
5
Left  Right
2
3
4
2
3
4
5
6
7
8
9
Top  Bottom
Backward
1
1
5
1
2
3
4
5
6
7
8
9
Zoom Out
100%
50%
10 11 12
13 14 15
6
7
8
9
16 17 18
10
31
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
When selecting Quick Menu
Options
Set Picture
Set Sound
3D Setting
Ratio
Speaker
Original
TV Speaker
Sleep Timer
Close
Ratio
Developer‟s customizable Area
- Add buttons of additional feature calls
■
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)
32
3. LG Playback control behavior
LG UI Templates
LG Video Playback Behavior with LG Magic Remote
Screen cursor and Playback UI appears
Family Guy
Episode 12
Rating
Related series
Purchase
Screen cursor and Playback UI disappears
Video Playing…
Video Playing…
TV show: Family Guy
Episode 2
Family Guy
26min by FOX, United States of America [2009]
Press
OK
Cast
Seth MacFarlane, Alex Borstein, Mila Kunis, Seth
MacFlane
5 sec.
Time-out
"Family Guy" stars the all-American Griffin family
, Lois, Meg, Chris, Stewie and Brian. Taking
Back
Episode
Episode
Episode
Episode
Episode
Episode
Episode
- 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.
Press OK or Shake Magic Remote
Call Playback UI
Cursor awakes from time-out or deep sleep mode
Video Playing…
Video Playing…
Press
OK
User can wake cursor by shaking the magic remote or pressing
OK key from time-out or deep sleep mode .
.
Pause Screen
Press OK
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)
Min(YPOS)
max(YPOS)
728x90
leaderboard
6
546
6
624
300x250
medrect
6
974
6
464
180x150
rect
6
1094
6
564
Here‟s UI flow for In-App Advertising for 2 different types of advertising: 1) Static Image Advertising, 2) Video Advertising
Default focus on the Back
1) AD Banner: Static Image Advertising
OK
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
Exit
34
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
Coordinate System
+Z
(1) 4 Way Buttons + OK + Back
+Y
+X
+X
(2) Cursor + OK + Back
G
G
+Z
+Y
TV Screen
Android/iOS
Phone screen turn +Z
(counterclockwise)
LG Magic Remote
Turns clockwise
- Acceleration : ±9.8×2 (m/sec2)
- Gyro: ±34.8 (rad/sec) = ±2000 (deg/sec)
35
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.
X axis (Roll)
Right-handed rule
Y axis (Pitch)
Z axis (Heading or Yaw)
For rotational output, sensor output is positive on clockwise rotation
when you looking at the each direction.
Gyro rotational direction
Accel vector
Reference:
Mag vector
LG Magic Remote(NetCast 4.0)
36
5. Game: Input Device
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
Press Up/Down button to move arrow toward up/down, and
„Ok‟ to shoot to hit the target
(2) Focus Move
(3) Cursor Move
e.g.) Spot the Not
e.g.) Mahjang
Click „Ok‟ on object , then press „Up/Down/Left/Right„ to move
selected object
38
Press „Up/Down/Left/Right‟ to move cursor to hit
„spot the not‟.
5. Game: Sample Interaction
LG UI Templates
2) Using Motion Gesture + OK button
(1) Turn the wrist
e.g.) Frisbee Forever
(2) Slice
(3) Swing
e.g.) Let‟s Golf 3
e.g.) Cut the Rope
Control the Frisbee by using interaction of turning the wrist
to left & right
Play golf with full wing. Also, user might control the angle
with magic remote wheel.
Cut the rope with slicing action
39
5. Game: Sample Interaction
LG UI Templates
2) Using Motion Gesture + OK button
(4) Wrist Up/Down
e.g.) Hit the Target
(5) Point & OK
(6) Fill the gauge
e.g.) Fortress 2 Red
e.g.) Spot the Not
Drag the rope and drop it to the next wheel in order to rescue
the bird.
Press OK long enough to fill the gauge in order to fire.
40
5. Game: Sample Interaction
LG UI Templates
2) Using Motion Gesture + OK button
(7) Zigzag
e.g.) Angry Duckling
(8) Speed up & down
(9) Move the background
e.g.) Angry Bird
e.g.) Katamari Amore
Move the cursor to the edge of 4 sides and find out more objects
by moving the background.
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.
41
LG Smart TV and Media product UI Guideline
Sample UI Flows
1. Catch-up TV: Layout 1
Sample UI Flows
Detail contents page – original size
Home _ video selection (TV series)
CP Logo
Home
Animation
Business
Family Guy
The
Simpsons
Ergo
proxy
South
Park
TV
Movie
UCC
Family Guy
Episode 1
Comedy
Education
The
Batman
Aeon
Flux
Iron
man
Archer
Rating
Related series
Food
Sports
American
Dad
Purchase
Robot
Chicken
Flapjack
Naruto
TV show: Family Guy
Episode 1
Related series
Family Guy
27min by FOX, United States of America [2009]
Cast
Seth MacFarlane, Alex Borstein, Mila Kunis, Seth
MacFlane
Family Guy
Episode 1
Rating
Related series
"Family Guy" stars the all-American Griffin family of
Peter, Lois, Meg, Chris, Stewie and Brian. Taking
Purchase
Back
TV show: Family Guy
Episode 1
Family Guy
27min by FOX, United States of America [2009]
Cast
Seth MacFarlane, Alex Borstein, Mila Kunis, Seth
MacFlane
"Family Guy" stars the all-American Griffin family of
Peter, Lois, Meg, Chris, Stewie and Brian. Taking
Back
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Adventure
Action
Search result _ related series
Family Guy
Episode 1
Rating
Related series
Purchase
TV show: Family Guy
Episode 1
Search result _ related series
Family Guy
27min by FOX, United States of America [2009]
Cast
Seth MacFarlane, Alex Borstein, Mila Kunis, Seth
MacFlane
Family Guy
Episode 1
Rating
Related series
"Family Guy" stars the all-American Griffin family of
Peter, Lois, Meg, Chris, Stewie and Brian. Taking
Purchase
TV show: Family Guy
Episode 2
preview
Family Guy
Family Guy
Episode 12
26min by FOX, United States of America [2009]
Cast
Seth MacFarlane, Alex Borstein, Mila Kunis, Seth
MacFlane
Rating
Related series
"Family Guy" stars the all-American Griffin family of
Peter, Lois, Meg, Chris, Stewie and Brian. Taking
Purchase
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Family Guy
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 of
Peter, Lois, Meg, Chris, Stewie and Brian. Taking
Back
Back
Back
TV show: Family Guy
Episode 2
Episode
Episode
Episode
Episode
Video full screen
43
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
1. Catch-up TV: Layout 2
Sample UI Flows
Detail contents page – original size
Home _ video selection (TV series)
CP Logo
Animation
Home
TV
Business
Movie
Comedy
UCC
Education
Radio
Sports
Family Guy
Episode 1
Rating
Family Guy
The Batman
related series
The Simpsons
Related series
Purchase
TV show: Family Guy
Episode 1
Family Guy
27min by FOX, United States of America [2009]
Cast
Seth MacFarlane, Alex Borstein, Mila Kunis, Seth
MacFlane
Family Guy
Episode 1
Rating
Related series
"Family Guy" stars the all-American Griffin family of
Peter, Lois, Meg, Chris, Stewie and Brian. Taking
Purchase
Back
TV show: Family Guy
Episode 1
27min by FOX, United States of America [2009]
Cast
Seth MacFarlane, Alex Borstein, Mila Kunis, Seth
MacFlane
"Family Guy" stars the all-American Griffin family of
Peter, Lois, Meg, Chris, Stewie and Brian. Taking
Back
Episode
Search result _ related series
Family Guy
Episode 1
Rating
Related series
Purchase
TV show: Family Guy
Episode 1
27min by FOX, United States of America [2009]
Cast
Seth MacFarlane, Alex Borstein, Mila Kunis, Seth
MacFlane
Family Guy
Episode 1
Rating
Related series
"Family Guy" stars the all-American Griffin family of
Peter, Lois, Meg, Chris, Stewie and Brian. Taking
Purchase
TV show: Family Guy
Episode 2
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
preview
Family Guy
Family Guy
Episode 12
26min by FOX, United States of America [2009]
Cast
Seth MacFarlane, Alex Borstein, Mila Kunis, Seth
MacFlane
Rating
Related series
"Family Guy" stars the all-American Griffin family of
Peter, Lois, Meg, Chris, Stewie and Brian. Taking
Purchase
TV show: Family Guy
Episode 2
Family Guy
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 of
Peter, Lois, Meg, Chris, Stewie and Brian. Taking
Back
Back
Back
Episode
Episode
Search result _ related series
Family Guy
Family Guy
Episode
Episode
Episode
Episode
Video full screen
44
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
Episode
2. VOD: Layout 1
Sample UI Flows
Detail contents page – original size
Home _ video selection (movie)
CP Logo
Home
For Men
Avatar
Sequel
The Hunt For
Gollum
Star Wars:
Revelation
UCC
Movie: Avatar
Movie: Avatar
AVATAR
TV
Movie
The Sex
Monster
Love Story
The
Professional
Iron
man
Rating
Related movie
Facing
Danger
The Last
Warrior
Bloody
Johnny
Mnemonic
Inglourious
Basterds
Purchase
Back
AVATAR
Cast
Sam Worthington,
Zoe Saldana,
Rating
A paraplegic marine dispatched to the moon Pandora on
a unique mission becomes torn ….
Video full screen
Movie: Avatar
1h 43mins, United States of America [2009]
Director:
James Cameron
Rating
Purchase
Back
AVATAR
Cast
Sam Worthington,
Zoe Saldana,
A paraplegic marine dispatched to the moon Pandora on
a unique mission becomes torn ….
45
AVATAR
Purchase
Back
Cast
Sam Worthington,
Zoe Saldana,
A paraplegic marine dispatched to the moon Pandora on
a unique mission becomes torn ….
movie
Preview
Related movie
1h 43mins, United States of America [2009]
Director:
James Cameron
Related movie
Good Vs.
Evil
Ruthless
Killing
AVATAR
AVATAR
1h 43mins, United States of America [2009]
Director:
James Cameron
Christmas
Search result _ related movie
movie
movie
movie
movie
movie
movie
movie
movie
2. VOD: Layout 2
Sample UI Flows
Detail contents page – original size
Home _ video selection (movie)
CP Logo
For Men
Home
Sequel
TV
Movie
Christmas
UCC
Love Story
Radio
Bloody
Movie: Avatar
Movie: Avatar
AVATAR
Rating
AVATAR
AVATAR
AVATAR
AVATAR
Related movie
Purchase
Back
AVATAR
1h 43mins, United States of America [2009]
AVATAR
Director:
James Cameron
AVATAR
Search result _ related movie
Cast
Sam Worthington,
Zoe Saldana,
Rating
Purchase
Back
Cast
Sam Worthington,
Zoe Saldana,
A paraplegic marine dispatched to the moon Pandora on
a unique mission becomes torn ….
movie
Preview
Video full screen
Movie: Avatar
AVATAR
1h 43mins, United States of America [2009]
Director:
James Cameron
Rating
Related movie
Purchase
Back
AVATAR
Cast
Sam Worthington,
Zoe Saldana,
A paraplegic marine dispatched to the moon Pandora on
a unique mission becomes torn ….
46
AVATAR
Director:
James Cameron
Related movie
A paraplegic marine dispatched to the moon Pandora on
a unique mission becomes torn ….
1h 43mins, United States of America [2009]
movie
movie
movie
movie
movie
movie
movie
movie
2. VOD: Layout 3
Sample UI Flows
Detail contents page – original size
Home _ video selection (movie)
CP Logo
Home
For Men
TV
Sequel
Movie
Christmas
UCC
Love Story
Radio
Bloody
Movie: Avatar
Movie: Avatar
AVATAR
Rating
Related movie
Purchase
Back
AVATAR
1h 43mins, United States of America [2009]
AVATAR
Director:
James Cameron
AVATAR
Search result _ related movie
Cast
Sam Worthington,
Zoe Saldana,
Rating
Purchase
Back
Cast
Sam Worthington,
Zoe Saldana,
A paraplegic marine dispatched to the moon Pandora on
a unique mission becomes torn ….
4
Search result _ related movie
Preview
Movie: Titan
Titan
Titan
Titan
Director:
James Cameron
Rating
Related movie
Purchase
Back
Cast
Sam Worthington,
Zoe Saldana,
Rating
Related movie
A paraplegic marine dispatched to the moon Pandora on
a unique mission becomes torn ….
Purchase
Back
4
Titan
6
7
8
9
1h 43mins, United States of America [2009]
Titan
Director:
James Cameron
Cast
Sam Worthington,
Zoe Saldana,
A paraplegic marine dispatched to the moon Pandora on
a unique mission becomes torn ….
10 11 12
47
Titan
6
7
8
9
Video full screen
Movie: Titan
1h 43mins, United States of America [2009]
AVATAR
Director:
James Cameron
Related movie
A paraplegic marine dispatched to the moon Pandora on
a unique mission becomes torn ….
1h 43mins, United States of America [2009]
10 11 12
3. UCC: Layout 1
Sample UI Flows
Video full screen
Home _ 1st depth - video selection (UCC)
Logo
Push contents category
Page
What’s Hot
Home
Most Popular
Recently
1
2
Content
#1
Content
#2
Content
#3
Content
#4
Content
#5
4
Recommend
Sports
3
OK
5
News
Content
Content
Content
Content
Pressing this number sends
User to next page of videos
Description of #3
News (-)
Content
News
2nd depth - video selection (UCC)
Logo
News > World News
1
News (-)
World News
Content
Content
Content
Content
Content
2
3
Entertainment
Science
4
Content
Content
Content
Content
Content
Tech
Select Content
5
6
7
Tech
Content
Content
Content
Content
Content
Description
Menu of
2nd
depth
48
3. UCC: Layout 2
Sample UI Flows
Home _ 1st depth - video selection (UCC)
2nd depth - video selection (UCC)
Logo
Logo
Home
News (-)
Most Popular
World News
Recently
News
Entertainment
Sports
Science
News
Tech
Full-screen Button
News (-)
Title Description
News > World News
▶
Full-screen Button
Title Description
video full screen
49
3. UCC: Layout 3
Sample UI Flows
Video full screen
Home _ 1st depth - video selection (UCC)
Logo
1/3
Title
Title
Title
Title
Title
Title
Home
Most Popular
Recently
Sports
News
50
4. Photo: Layout 1
Sample UI Flows
Home _ photo selection
CP Logo
Menu 1
Menu 2
Photo
Menu 4
Photo view page _ with navigation
Photo view page
Image 5
Image 5
Menu 5
Back
1
2
3
4
5
6
7
3/8
To close(hide) navigation : timeout 3 seconds,
click „OK‟ outside navigation
Photo view page _ with navigation
Image 5
Back
1
2
3
4
5
6
7
51
Click „OK‟ on screen to open(unhide) Navigation
menu
4. Photo: Layout 2
Sample UI Flows
Home _ photo selection
Photo view page _ with navigation
Photo view page
Back
CP Logo
Menu 1
1
Menu 2
2
Photo
Manu 3
3
Image 3
4
5
To close(hide) navigation :
timeout 3 seconds, click „OK‟ outside navigation
52
Image 3
5. News Portal
Sample UI Flows
1) Text/image based news
Home _ news selection
CP Logo
Home
Video
Search
CP Logo
Business
image
Food Makers Devise Own Label Plan
By WILLIAM NEUMAN
Published: January 24, 2011
Education
News
Technology
Back
image
video
Science
image
Health
image
Arts
Detail contents page_ text/image
video
States Help Ex-Inmates Find Jobs
By STEVEN GREENHOUSE
Published: January 24, 2011
Food Makers Devise
Own Label Plan
image
By WILLIAM NEUMAN
Published: January 24, 2011
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.
Obama to Seek Partial Freeze in Spending as Deficit Move
By JACKIE CALMES and MICHAEL D. SHEAR
Published: January 25, 2011
Financial Crisis Was ‘Avoidable,’ Inquiry Concludes
By SEWELL CHAN
Published: January 25, 2011
Emanuel Back on Ballot; Court Agrees to Hear Case
The industrywide program was announced
Monday by food makers and grocers.
By MONICA DAVEY
Published: January 25, 2011
image
image
video
Food Makers Devise Own Label Plan
By WILLIAM NEUMAN
Published: January 24, 2011
States Help Ex-Inmates Find Jobs
By STEVEN GREENHOUSE
Published: January 24, 2011
Obama to Seek Partial Freeze in
Spending as Deficit Move
By JACKIE CALMES and MICHAEL D. SHEAR
Published: January 25, 2011
Financial Crisis Was ‘Avoidable,’
Inquiry Concludes
By SEWELL CHAN
Published: January 25, 2011
Emanuel Back on Ballot; Court
Agrees to Hear Case
By MONICA DAVEY
Published: January 25, 2011
Style
Travel
2) Video/text based news
Detail contents page_ video
Home _ news selection
CP Logo
Home
image
Search
Food Makers Devise Own Label Plan
By WILLIAM NEUMAN
Published: January 24, 2011
Education
News
Video
CP Logo
Business
Video Playing…
Back
video
video
Technology
Science
image
Health
image
Arts
video
States Help Ex-Inmates Find Jobs
By STEVEN GREENHOUSE
Published: January 24, 2011
Obama to Seek Partial Freeze in Spending as Deficit Move
By JACKIE CALMES and MICHAEL D. SHEAR
Published: January 25, 2011
Financial Crisis Was ‘Avoidable,’ Inquiry Concludes
By SEWELL CHAN
Published: January 25, 2011
Emanuel Back on Ballot; Court Agrees to Hear Case
By MONICA DAVEY
Published: January 25, 2011
Detail contents page_ video full screen
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
important nutrition information, including
calorie, fat and sugar content. The
industrywide program was announced
Monday by food makers and grocers.
image
The industrywide program was announced
Monday by food makers and grocers.
video
image
video full screen
Style
Travel
53
Food Makers Devise Own Label Plan
By WILLIAM NEUMAN
Published: January 24, 2011
States Help Ex-Inmates Find Jobs
By STEVEN GREENHOUSE
Published: January 24, 2011
Obama to Seek Partial Freeze in
Spending as Deficit Move
By JACKIE CALMES and MICHAEL D. SHEAR
Published: January 25, 2011
Financial Crisis Was ‘Avoidable,’
Inquiry Concludes
By SEWELL CHAN
Published: January 25, 2011
Emanuel Back on Ballot; Court
Agrees to Hear Case
By MONICA DAVEY
Published: January 25, 2011
LG Smart TV and Media product UI Guideline
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
Most Common Mistakes
There is no scroll button to scroll the list
56
3. Text Size
Most Common Mistakes
Small Font Size, illegible to user in 3.5 meter (10 foot) distance to TV
57
3. Focus States
Most Common Mistakes
Focus states are not distinct
58
4. Focus States
Most Common Mistakes
Double Focus
59
4. Focus States
Most Common Mistakes
No initial focus, when entered to App with 4 way navigations
60
Fin. Thank you
61
Was this manual useful for you? yes no
Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Download PDF

advertising