UX Checklist

 

 

The following webOS TV UX checklist shows what is mandatory and what is recommended regarding to webOS TV UX which you should know about when developing webOS TV apps.

You must follow the mandatory guidance to pass the app QA and to launch your app to LG Content Store. Also, you should follow the recommended guidance to avoid users’ confusion and to maintain the 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 in 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 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 an 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 selection effect (animation, highlight, color or size changes, etc.) to show what element is activated.

.

Recommended Checklist

Resolution

What is supported for screen resolution of an app?
A screen resolution of an app could be either 1280x720 or 1920x1080. However, LG recommends using 1920x1080 for a screen resolution.

 

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

Buttons & Font Size

Does the wheel button have the recommended usage?
When scrolling the list with the wheel button of Magic Remote, the list should move same with the direction of mouse scroll wheel.

 

Should UI have the scroll button as below?

If the content cannot be displayed all within the provided range, it is recommended to have the scroll button or to be scrolled by Magic Remote such as the wheel button.

 

Does the button have the minimum size?
At least, 75x75 pixels for 1920x1080 resolution and 50x50 pixels for 1280x720 resolution are recommended for a clickable button.

 

Does the text have the minimum font size?
At least, 20 pixels for 1920x1080 resolution and 14 pixels for 1280x720 resolution are recommended for readability.

Virtual Keyboard

Can an app use the LG Virtual Keyboard?
LG Virtual Keyboard can be used for user input. LG Virtual Keyboard automatically comes from the bottom of the screen when an input field is selected. For the detailed information on LG Virtual Keyboard, see Virtual Keyboard.

Visualization

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

 

Should an app have a visual cue while the contents are loaded?
Sometimes, an app has a black screen without a comment or cue while the contents are loaded. It makes users anxious about the progress. Therefore, it is recommended to have a visual cue to indicate the progress of loading contents.

Playback Control

Should on-screen menu be supported if an app provides a playback control?
A playback control can be controlled by 4-way navigation keys and screen cursors of the Remote Control as well as 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 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 have 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 one button to have the 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 an app for the target of webOS TV only will not include the Q.MENU in the playback control.