UX Checklist

The webOS TV UX checklist provides guidelines for what is mandatory and recommended regarding webOS TV UX which you should know about when developing webOS TV apps.

You must follow the mandatory guidelines to pass the app QA and to launch your app to LG Content Store. Also, you should follow the recommended guidelines to avoid users’ confusion and to maintain a unified look and feel.

Mandatory Checklist

Buttons

Should all navigation keys be operable on an app?
Selectable UIs must be controlled by 4-way navigation keys (Up, Down, Left, Right), OK and Back buttons. However, OSD buttons which are working with colored keys (red, green, yellow, blue) do not need to be controlled by 4-way navigation keys.

When clicking the Back button on an entry page of the app, where to move on?
Pressing the Back button on the Remote Control in an entry page must display the Home screen, rather than a previous page. For the detailed information, see Back Button. 

Cursors

Should all screen cursors be operable on an app?
Selectable UIs must be controlled by screen cursors and OK.

Selection Effect

When and where do I need to apply the selection effect?

ALL of the objects in your app MUST ALWAYS provide some sort of selection effect with NO EXCEPTION. Unlike touch-enabled devices, taking action on TV requires 2-step user interactions; the user needs to select a UI element on the screen using the pointer or the arrow keys depending on the remote control mode, then press the OK button. Therefore, for better user experience, it is necessary that you apply the selection effect (animation, highlight, color or size changes, etc.) to show what element is activated.

Recommended Checklist

Resolution

What are the supported screen resolutions of apps?
The screen resolutions of apps could be either 1280x720 or 1920x1080. However, we recommend using 1920x1080 for a screen resolution.

If you do not define the screen resolution in the appinfo.json, 1920x1080 is used by default. Therefore, if you want to use 1280x720, you must modify the resolution value in the appinfo.json. For the detailed information on screen resolution, see the resolution on App Metadata.

Buttons & Font Size

Does the wheel button have the recommended usage?
When users scroll lists using the wheel button of Magic Remote, the lists should be moved toward the same direction of the mouse scroll wheel.

Should UI have the scroll button as below?

If you cannot display all your content within the provided range of the screen, we recommend you to provide scroll buttons on your content or a method that users can scroll your content by Magic Remote such as the wheel button.

Does the button have a minimum size?
We recommend using at least the following image size for clickable buttons.

• 75x75 pixels for 1920x1080 resolution

• 50x50 pixels for 1280x720 resolution

Does the text have a minimum font size?
We recommend using at least the following font size for texts.

• 20 pixels for 1920x1080 resolution

• 14 pixels for 1280x720 resolution

Virtual Keyboard

Can an app use the LG Virtual Keyboard?
You can use LG Virtual Keyboard for user input on your app. LG Virtual Keyboard automatically comes from the bottom of the screen when users select input fields.  For the detailed information on LG Virtual Keyboard, see Virtual Keyboard.

Visualization

Should UIs have states that are visually recognized?
Selectable objects such as a button, menu, and tab should have states that are recognized at a glance.

Should apps have a visual cue while the contents are loaded?
Sometimes, apps have a black screen without comment or cue while the contents are loaded. It makes users anxious about progress. Therefore, we recommend that apps have a visual cue to indicate the progress of loading content.

Playback Control

Should the on-screen menu be supported if an app provides a playback control?
The playback control can be controlled by 4-way navigation keys and the screen cursor of the Remote Control as well as the on-screen menu.

However, if the media buttons such as Play, Stop, FF/REW are not provided by the Remote Control, the playback control must be controlled by the on-screen menu.

Does the Play button on the playback control have the pause feature as well as the play feature? Also, does the Pause button on the playback control has the play feature as well as the pause feature?
Yes, the Play button has both play and pause features. The Pause button has both pause and play features. However, if two buttons respectively exist on the playback control, we recommend each button to have one feature.

Should the Q.MENU be included in the playback control?
For the migrated app from NetCast to webOS, the quick menu called Q.MENU is provided by the app. The quick menu is a built-in menu in the playback control for setting picture, sound, 3D, etc. As the Setting button on Remote Control is substituted for the quick menu, the quick menu is not essential. Note that apps for the target of webOS TV only will not include the Q.MENU in the playback control.