Content Creation – General Advices

From Oxygen.next Wiki

[edit] Adjusting your Content to TV Displays

Be aware that resolution and clarity of a TV display are much lower than of a computer monitor. Since TV screens are designed for moving images static content may appear blurred oder flickering.

To adjust computer content to a TV screen you need more expert knowledge. Here are some useful hints:

• You should test the application on both TV and computer screen to make sure that your graphics are displayed in best possible quality.
• Texts and images should be created in a size adapted to the lower clarity and resolution of the TV screen.
• Adjust your graphics relatively to the screen resolution and avoid fixed image widths.
• All lines, borders and texts should be at least 2 pixels wide since the interlaced scanning involves limitations. Finer details may blur on the TV screen.
• Use a TV-safe palette because e.g. bright colors may over-saturate on such screens or may bleed across scan lines.
• Since designers do not place relevant elements near the outside edges of the TV screen title and action safe areas are of no importance.

[edit] Colors Suitable for TV Screens

Within Adobe Photoshop and other graphical software you will often find a filter that scans images for colors and brightness not suitable for TV screens and that will reduce these settings to an appropriate level. On the left side of the following illustration there are colors that are too bright to be displayed on most TV screens. On the right these colors have been adjusted using the Photoshop filter:

To apply this filter in Adobe Photoshop select “Videos -> NTSC colors” from the filter menu. Only a few of the available RGB colors are too bright to be displayed on TV screens so that not many colors will be changed by this filter.

If you have assigned your colors in HTML, Flash or WPF the TV suitability can be tested by making a screen shot of the page and then applying the Photoshop filter. If colors have been changed too much you can set them to appropriate values.

Pure white and pure black are often displayed poorly on TV screens. Replace white with RGB(240,240,240) and black with RGB(16,16,16).

[edit] Screen Resolution

A graceful scaling of your HTML, Flash or WPF application is required since it shall be displayed on both TV and computer screen. The pages should be optimized for a resolution of 1024 x 768 pixels. Use the zoom function in the Cascading Style Sheets file (.css) to automatically adjust the sizes of all elements to TV screen’s lower resolution (700 x 525 for NTSC, 720 x 567 for PAL).

Test your application on both display types and test various resolutions for your computer monitor. The resolutions are often scaled to a consistent ratio of 4:3 (e.g. 1024 x 768, 1280 x 960). Oxygen also supports some narrower resolutions such as 16:9 or 5:4. When scaling for these resolutions, extra space is added at the bottom or right to fit the new proportion. To prevent tiling of your background image, you can use cascading style sheets to fill the extra space with a flat color that complements your design, by using the following syntax:

BODY {BACKGROUND: url(images/myBackgroundImage.gif); background-repeat: repeat-x; background-color: #bbbbbb}

[edit] Color Scheme

Choose a color scheme suited to your corporate design.

[edit] Texts and Fonts

To make your texts readable from greater distances you should select an adequate font type, size and color. Serif fonts enhance the readability in print media but are hard to read on displays. Use sans-serif fonts instead such as Arial or Trebuchet. If you must use a serif font (e.g. for a logo) size it to at least 25 points. Your fonts shall be sized to at least 20 points, especially in critical elements such as buttons or links. Larger text blocks are hard to read from greater distances. Thus you should rather use shorter texts. Some useful hints:

• Use lists of short phrases instead of paragraphs.
• Split larger text blocks to additional pages.
• Edit your texts and remove irrelevant information.

Use an adequate contrast between text and background color. You can create contrast by using light and dark values. In the following illustrations you will find examples of good contrast:

[edit] Images

HTML-, Flash- or WPF-based content requires compatible image file formats such as GIF or JPEG.

Image quality and file size are most important. Since GIF and JPEG-files are compressed some information of the original file and thus image quality is lost. Lossless file formats typically provide a higher image quality but are usually larger.

If you need a high download speed use JPEG or GIF images. JPEG files are best for photos while GIF files are suitable for graphics with large areas of color like diagrams, charts, figures and graphs. If you are unsure of what file format to choose save your image in both formats and compare file size and quality.

Graphics must be large enough to be visible from a greater distance. Avoid small details. Borders and lines should be at least 2 pixel wide.

In the following illustration the left image has an appropriate detail and pixel width while the right one does not:

You should test your graphics on the TV and computer monitor by viewing them from various distances up to 15 feet.

[edit] Buttons

Oxygen uses a standard design for buttons for the following elements:

• Links (within you HTML application)
• Option buttons
• Check boxes
• Sorting controls
• Controls setting the view

Create a specific consistent design for all buttons within your application. Thus your users will identify their functions quickly.

Buttons shall be regocnizable as such and should be clearly separated from their surroundings. Button texts should be sized to at least 20 points and use a sans-serif font. The button text should explain the button’s function. Functions such as “Save settings” or “Send” will be easier to understand than e.g. “OK”.

Drop-down menus are difficult to use with touchscreens and thus should be avoided. Use clearly visible button menus instead in which each button is assigned to one specific option or use UpDown-Controls (spin boxes).

Buttons selected by the user should be highlighted by e.g. changing the button background color through a brighter border (width: at least 4 pixels). This highlighting function should be consistent throughout the application and should complement the design colors. Such highlights render your application dynamic since highlights appear to create movements while the user navigates through the page.

[edit] Navigation

Navigating in HTML, Flash or WPF applications is very different from normal web-browsing. In Oxygen applications users are not only able to navigate between pages or screens but also between different selectable elements within a page. A touchscreen is used to navigate, to select an element and to trigger the element’s function. Furthermore one item on the screen always has the focus.

[edit] Page Layouts

Use simple and clean layouts with a consistent design by aligning your elements to a grid. Remove decorative elements that might distract from the relevant operating functions. Readability is always more important than design.

[edit] Animations

Your users will expect animated content in your HTML application, especially in entertainment applications. Animations will increase excitement and the visual user experience. In HTML applications Oxygen supports the Internet Explorer’s dynamic animation capabilities but these are limited. Do not rely on HTML and JScript when creating extensive animations and always check that your animations are displayed smoothly and that they do not slow your application’s performance.

Your animations shall enhance the user experience and should not distract from relevant content. Animate the page focus. Use animations to enhance transitions between different static content or to enrich audio content.

Animate such elements only that the user is supposed to focus. Content the user requests should be played at once. The user should not have to wait until an animation is done playing. When using animations the motion should stop after a short time to enable the user to take in the content. The animation should resume only after further user input.