Mobile product Design: Efficient thumbnail browsing mode of merry-go-round

In the mobile product design, the picture conveys the information to be more straightforward, beautiful, easy to attract the user attention, therefore introduces the massive picture resources in the product also becomes one of the way which the designer likes.

Today we are going to introduce an efficient thumbnail browsing method--the Merry-go-round model (carousel).

　　1. What is a merry-go-round (carousel) mode?

The Merry-go-round has a long history, in the Western playground often can see, early film film inspiration that is from this, will be a static picture of the rapid rotation projection to the screen, in ancient China also has a similar form-"Happy Lights", in the festival for the People to watch entertainment.

In the interactive design of mobile products, the Merry-go-round model can present multiple images in one entry and guide the user to browse more content through the sliding screen. The advantage of this model is that in a limited screen space, efficient rendering of a large number of image content, bring users a better focus, browsing experience, so that the original still pictures like playing movies as wonderful.

　　2. Interactive characteristics

1) only part of the content is rendered on the screen

A large number of picture contents are usually displayed in the carousel mode, but there is not too much image in one screen of the mobile phone screen (according to the picture size is generally 3-5 pieces).

2) Guide the user to scroll

A clear visual guide is required to let users know that they can navigate by sliding and that the direction of scrolling is clear. You can provide scroll bars, buttons, or some extra entries on either side of the screen.

3) Browse Progress

You can use the progress bar, percentages, and so on to let the user know the current location of the browse, and to reserve the viewing progress for the users who quit halfway.

4) Selected state

The selected picture is visually distinguishable from the other picture, providing a border or highlighting the selected picture.

5) "More"

When you browse to the last picture, you can provide a "more" button to let the user know that the Atlas browsing is complete, and you can click to browse more information or the next atlas.

　　3. The application of the Merry-go-round model

The Merry-go-round model provides browsing navigation while providing large image browsing, and can present more relevant content. Compared to the traditional waterfall flow, thumbnail list, the merry-go-round model to bring users a smoother picture browsing effect, is a more efficient and easy to identify the image view. This model is widely used in the following products:

1 Photo Browsing Category Products

The user uses it to browse the photos, video, and select the content of interest to view. The use of larger graphics than the thumbnail list is easier for users to get a good experience, the merry-go-round can be in the user to browse the large map while providing navigation to facilitate users in many pictures to switch.

For example: Youku, Renren ...

2 e-commerce products

The Merry-go-round is also a frequent interactive form of e-commerce sites, and product details pages often use a merry-go-round for users to present a full range of product displays.

For example: Taobao, Beijing-East ...

3 News-Reading products

News pictures most easily attract the attention of users, with the video news, picture news and other multimedia elements more applications in the news reading products, more multimedia choose to use the merry-go-round to present news list, supplemented by an appropriate amount of article summary, to bring users more efficient, intuitive reading experience.

For example: BBC, Washington Post ...

　　4. Matters needing attention

1) Reduce cognitive burden

itunes's media cover stream consists of a large image in the center of the screen and a thumbnail that is listed on both sides, which should pay attention to the speed at which the picture scrolls. Because these images are constantly changing, users may not be able to focus on the fast-moving picture, thereby trying to stop scrolling in time to gain focus. Therefore, in the design of the merry-go-round to carefully handle the picture of the rolling speed, sliding acceleration, as well as sliding stop deceleration, do not add too much animation effect to increase the user's cognitive burden.

2) The direction and end of the scroll

The direction of the start scrolling often makes users wonder: "Does the merry-go-round play?", "Have I seen something?" Android 4.0 uses the "Blue parallax" visual element to prompt the user about the direction and end of scrolling.

3) Number of pictures

Long browsing will make users feel bored and tired, so in the design should pay attention to the number of carousel bearer pictures, generally controlled within 20, reduce the user's continuous browsing fatigue. If you want users to continue browsing, you can add "see more" after the content is browsed, allowing users to jump to other content by clicking after the browsing is complete.

　　Conclusion

In the website design, the Merry-go-round model has been widely used in many websites. In the mobile internet era, with the high-end mobile devices, diversified development, designers can use the Merry-go-round model for users to create a better browsing experience, how to use this model to combine more interactive gestures, how to use the platform to make the most of the characteristics of the designer left a vast space for the imagination.

Reference documents

[1] Greg Nudelman. A definitive Guide to the Android carousel. February 1st, 2013

[2] Http://developer.yahoo.com/ypatterns/selection/carousel.html