Developer's Guide

3-2

Cisco Interactive Experience Platform Content Creation Guidelines

Chapter 3 Layouts

Layouts and Templates

When dividing the layout into multiple zones of content, consider the size of the screen, the amount of

information that is desired, and the amount of screen space needed by the applications. In some cases a

simple layout with just a few zones has more impact particularly if the time that the user will typically

spend with the kiosk will be short. If it is expected that a user will spend considerable time with the

kiosk, more zones may be preferable to the user. Similarly, more content is visible at any one time if

more zones are used.

Once a layout is decided upon, create a template. Content templates organize content not only for the

user but for the developer. Templates allow web designers and content developers to develop a library of

assets that are then rotated into the template as they are developed. Templates are created using common

authoring tools.

Templates are divided into zones. Each zone supports multiple content formats and is an independent

component that can be easily updated or changed. One zone can contain an instructional video, another

zone can contain an interactive map, and another zone can contain information such as train departure

times or store promotion. Common zones are for information, interactive applications, and commerce.

Zones can also be populated automatically through dynamic data feeds such as the news, weather, or

sports scores.

All zones can be controlled by a single development team within your company or some zones can be

controlled by other companies. For example, if one zone is used for advertising products and services

other than those of your company’s, that zone could be populated and controlled by an advertising

company.

Note Using the same template for a long period of time can cause image retention (burn- in) on LCD and

plasma screens. It is best to change the templates on a periodic basis. This can be done by simply using

a mirror image of the same template. Alternatively insert a full-screen video or animation in the playlist.

When designing a template, it is important to understand the size and setting of the video display. A

smaller screen should have fewer zones than a larger screen. If the user will be standing directly in front

of the display, position the zones for interactivity where the user can reach the screen. For example, if

the user will interact with a map of the subway, place that zone within easy reach of an adult. Take into

account how far the screen is from the floor. Ideally, you will want to access to a mounted screen during

the design phase so you can test several design layouts.

The screens can be oriented either vertically (portrait orientation) or horizontally (landscape

orientation). Templates should be created for the orientation of the screens.

Portrait

The following templates were designed for vertically mounted displays. These templates assume the

display has a widescreen aspect ratio of 16:9 and a screen resolution of 1080 pixels wide by 1920 pixels

high.

The first template example contains six zones for the portrait template:

1. Information zone - Identifies the company or location

2. News zone - Displays a ticker

3. Application zone - Displays the application that the user chooses

4. Services zone - Includes the icons of all the applications available to the user