Interactive mode Applications (3): Carousel

As a way of describing tangible things, pictures can not only convey visual information directly, including geometrical features, shape, position size and color, but also convey intrinsic information, such as intention, requirement, style, character and plan. In modern design, the expressive force of graphic has been far beyond other forms, so it is favored by most designers. A picture are more than thousands of words, how to use pictures to express creative ideas and thinking is one of the key points in design work.

In an interactive design, how can you display as much content in a limited space as possible and retain visual focus? Today we're going to talk about the carousel, a common way of graphical presentation interaction.

Carousel, the original intention of the merry-go-round, is a very easy to see in the playground large toys.

In interactive design, carousel can make full use of limited screen space to help designers better arrange layout to display a series of graphic images, so that users get a better focus experience, as the cheerful Pentium Trojan, non-stop rotation display, so that each individual has the opportunity to perform, as shown in the following figure:

This is the original form of carousel, like a merry-go-round, by clicking on the arrows at both ends of the screen, each book in turn turns to the user's eyes. Carousel can be used to help users select elements or positioning targets, today in a wide range of software, designers have extended the application and performance of Carousel, which is popular in many Web sites and applications.

Use premises

The mental model that users focus on topics is closely related to graphics.

When the screen size is limited, can not display all the graphics information at once, users need to be in the same screen (without page switching situation) to view some of the relevant content of the picture, can be a good display of the current selection of details, can help users to choose decision-making.

Interaction methods

Whether it's desktop software or Web page, or mobile-based touch applications, Carousel can:

Provide focus information

Allow scrolling

Organize the content order according to certain rules

Forms of Expression

The > screen shows part of the content at once.

If there are several pictures, will not show all the pictures, but only a portion of the picture (determined by the size of the page, generally 5-8 more appropriate).

> provides visual focus.

-thumbview

Recently began to pop in the carousel to add visual focus, the current selected picture amplification independent display, and even add special effects, placed in front of the most prominent position.

-no Thumbview

Most of the picture size without a preview is large enough, or you don't need to provide enough detail.

> has a visual cue for the selected state.

The selected picture can be easily identified visually, such as providing a indicator or flag indicating the selected state.

> can scroll through the scroll bar or button between pictures.

This is the biggest feature of Carousel, the picture can be in a certain order to scroll back and forth.

-non-circular

-circular

> Picture Arrangement Method

-order matters

All content is sorted according to certain rules, and there is an association between adjacent pictures.

-disordered

Randomly arranging pictures, there is no correlation between each other.

Application Range

Carousel is generally used in the following areas:

1. Photo Browsing

The user uses it to browse through the photos and pick the photos of interest to view.

For example, Picasa,flickr ...

2. Product Display

E-commerce Web site often used in the interactive form, using Carousel to the current product aspects of the picture display.

For example, Taobao, easy to hear, Beijing-east ...