UX Checklist

The webOS TV UX checklist provides mandatory and recommended guidelines for 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 launch your app to LG Content Store. Also, you should follow the recommended guidelines to avoid users’ confusion and maintain a unified look and feel.

To see the entire checkpoints for webOS TV apps, download the documents_for_app_qa.zip file required for app submission at LG Seller Lounge.

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 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 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 a better user experience, you must 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 detailed information on screen resolution, see the resolution on App Metadata.

Buttons and 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 in the same direction of the mouse scroll wheel.

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 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.
Playback control image

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 have one feature.

Navigation