Design Principles

Keep It Simple

When designing for TV, present the user with clear and simple objectives that are easily understood. TV is a "lean back" experience--users do not want to think about how to use the UI. To achieve this kind of simplicity, follow the rule of having no more than two ideas on screen at a time. Keep overall screen layouts concise. Choose larger objects, less clutter, fewer features, and flatter hierarchy.

• In 10-foot UI (UI experienced at a distance of 10 feet), simplicity is a must.
• Identify clear objectives onscreen and set clear expectations.
• Present no more than two ideas on each screen.
• Keep screen real estate free of clutter.
• Choose fewer features and less complexity to allow the user to lean back.

Give It Life

Eighty percent of the TV experience is about motion, sound and sensory immersion. These are the experiences that dominate TV viewing. When designing your application, consider how it will co-exist with an immersive TV experience. Your UI should have hints of character and personality. The judicious use of animation, transitions, and color, along with a refined overall aesthetic, can go a long way towards delighting the user.

• Use animation and transitions to create a more immersive experience.

Make It Personal

Discovering content is a challenge; users don't always know what they want to watch. Recommend new content and make "favorited" items easily accessible to enable users to save, curate, and return to content that they enjoy.

• Consider making recommendations.
• Allow users to like or "favorite" content.
• Use LG Discovery to allow users to easily find the content they love.

Innovate, but consider the current TV experience--people expect the TV to provide instant access to entertainment. They expect an uncomplicated, lean-back experience.

Consistency Matters

Your app will play an important part in keeping the overall LG webOS experience consistent and enjoyable to use. Ask yourself the following questions:

• Is my app consistent with webOS UI Patterns?
• Does it use controls, panels, and patterns correctly?
• Is the app consistent within itself?
• Is the text in the app uniform in terminology and style?
• Are the icons consistent in their meaning?
• Do custom UI elements look and behave the same throughout the app?

Don't Reinvent the Wheel

Use existing Moonstone controls to perform actions. If an action cannot be performed with a single control, perhaps a combination of controls will work. Consult the documentation on UI Patterns for answers to common layout questions.