CODEWITHSUNDEEP
androidgoogle-tv
Sachin
Sachin

Reputation: 11

Google TV design UI

Is designing for Google Tv is different from tablet. What should I need to keep in note while designing the UI for Google TV.

Upvotes: 0

Views: 966

Answers (2)

Megha Joshi - GoogleTV DevRel
Megha Joshi - GoogleTV DevRel

Reputation: 15677

If you are developing an Android app for Google TV, please also follow these docs:

  1. Designing UI for Google TV apps
  2. Developing UI for Google TV apps

and you might also find this screencast on "UI tips for Google TV apps" useful:
5 UI tips for Google TV apps

Upvotes: 0

Dheeresh Singh
Dheeresh Singh

Reputation: 15701

https://developers.google.com/tv/web/docs/design_for_tv

Design Considerations

Viewer's distance from the screen

TV viewers sit relatively far from their screens. This distance makes a traditional web page harder to read, cluttered, and more difficult to perform basic tasks like navigating menus and selecting buttons.

When designing a web page for TV, the viewable area should display less information overall, and what's there should focus on a confined set of tasks (even consider performing their desired task automatically or select by default). Try to keep all content "above the fold" and fully viewable on the screen without scrolling down.

Fonts and graphics on the site need to be larger to account for viewing distance. People sit proportionally farther from a TV than from a computer monitor of the same size. To avoid a cluttered appearance on the TV, blank space between elements on the page should be greater. This is typically called white space (or padding) and it's a fundamental aspect of making web content easy to discern and navigate. Wide screen displays have more usable horizontal real estate than a desktop monitor, so navigation is better handled from the side (conserving valuable vertical space for content) or as an overlay. Performance vs. visual appeal

Studies overwhelming show that users prefer fast sites -- so it's best to balance any flashy visual appeal with performance considerations. Also, Google TV may not be able to render a page as quickly as your workstation. Before requiring many complex animations for your page to render, test/consider the impact on user satisfaction. Simple, front-end performance improvements (e.g. place style sheets at the top and scripts on the bottom) can be found at code.google.com/speed.

Vertical scrolling

Vertical scrolling, while fundamental on a desktop browser, may not be as appealing on the TV UI. Scrolling can appear less seamless, and important information may be hidden below the fold if users don't recognize that more content exists off-screen. A better approach is to make use of horizontal layouts and visual transitions between pages of content.

Human interface to browser

Google TV includes a "remote" that consists of a keyboard with a pointing device for cursor movements. Many users will have this remote on the sofa with them, and may have difficulty with precise positioning of the cursor -- like a newbie playing video games. Except that they may not be as patient as a first-time gamer (they just want to watch a video!). Try to keep this user happy. Elements on the page should have large selection surfaces for mouse users. Expanding the surface when the user mouses over an element makes it easier for a user to select the right item on the page. Complex or precise movements with a mouse, such as drag-and-drop actions or drop-down menu selections have a high probability of causing frustration.

The main interface of Google TV encourages the use of the D-pad on the remote to make selections on a screen -- it's likely that users will keep this habit even on the web. Web pages should allow every primary activity on it to be engaged from the D-pad: moving through available actions, scrolling through options, selecting items, etc. When navigating with the D-pad, clearly highlight the active item, and make directional movement between items visually and physically logical.

and more goto link ....

Upvotes: 3

Related Questions