The Transformers in the interactive details

Web pages Common Some of the pages of its complexity is progressive, similar to the daily maintenance of transformers, such as motor-style, encounter battle scenes they will stretch out limbs and arms to fight for freedom! In interactive design, we call this "morphing" scenario "progressive expansion". This strategy is used to address complex information that displays information only when the user needs it. Appropriate use of this design principle, can make the product simple, operation logic clear. Here are a few chestnuts, please taste.

Implementation of the "progressive expansion" of the operation type is basically four kinds: hierarchical layered display, click Trigger, mouse over + click Trigger, the mouse slide over. Can be flexibly used in different functions, combined with product style characteristics, will make the design a lot of color.

　　Tiered Layered Presentation:

First of all, look at the Facebook Ads launch, show only the first step, after the input is completed click Continue, into the second step.

The second step is to set the target object input box to take the first area, at this time the page becomes longer without a jump.

Enter the third step of the Account Setup page is more powerful, the user can see just fill in all the content, also facilitate modification. Just imagine that if you give a user such a big form at the beginning, users are likely to get mad.

This is similar to Next, Next,next display in the process of installation is common, when the Web page has similar complex program operation can also be used, can be called "Hierarchical hierarchy", will have the information of the superior and the relationship effectively show, and strictly comply with the extension structure from the top down the order.

　　Click Trigger:

Watercress said the input box area itself is very small, click will show slightly larger input boxes and corresponding functions, including: Recommended URL, release photos, add topics, counters, send button. Continue to click on specific operations such as "photos" can show the corresponding operation, the user in a step-by-step trial groping forward, and gradually completed the task.

The Google + Publishing box also hides a lot of features, as well as its special choice to receive the information circle function.

The Twitter input box hides the positioning and publishing button features.

Omniture is a Web analytics and Web site statistics products, its rich amount of information determines a number of space needs strong compression, such as the time control, usually displayed as: month, Year + icon, click to display the entire time control function is actually very rich, The presentation in the form of a floating layer allows users to make time choices against part of the report.

Click trigger for the user to achieve a small cost, but also to save space, why not? But this situation also needs to be clicked before the control does look like "clickable", otherwise the user never know how powerful the function is hidden, the opposite example believe that we have encountered, here do not give examples.

　　Mouse over + click Trigger:

Google Maps By default only displays satellite views and real-time conditions, when the mouse over the display of Google Earth and other features, click More will present a better magic interesting features. This kind of hiding is very good for the first time to present the main function to the user, if you need other features can use mouse events to view the Drop-down menu items, if you do not need these features, they will not see this information, so it will not cause confusion for beginners. For skilled users, you can use these options at any time, with just a single click to pay. This simplifies the design results and avoids interference.

Flickr's personal head is usually just a small square icon, the mouse will have a slide down the arrow appears, click on the expanded function list is slightly longer, covering almost all the main functions related to personal accounts, if the usual display of these features in the page will occupy a lot of space, affect browsing pictures. And there is this setting, avatar position can be corresponding to carry out so many operations, is very convenient, put the position will not be subjected to many restrictions.

You can hide many functions by fixing the initial control two edges and extending both sides. The feeling of continuity is obvious when the effect is done well.

Mouse slide over:

YouTube's volume adjustment button is very good to do "do not need to appear", The mouse will show volume adjustment. And the animation completes the case, the whole operation natural and smooth, make the playback process more elegant.

Baidu side of the restaurant list part of the function to do a covert, the mouse will show view map and write comments. These two features, if displayed honestly in the list, will occupy a certain amount of space, while it may be a waste of time to filter information for users who view only a portion of the hotel.

Notable is an online team collaboration product that uses a lot of onmouseover events to make the interface concise and to present richer collaborative content with space savings. Figure for a list of team collaboration members, the mouse over the list avatar can be directly managed by the member.

Summary:

Implementation of the "progressive expansion" of the operation type is basically four kinds: layered display, click Trigger, mouse over + click Trigger, the mouse over. Can be flexibly used in different functions, combined with product style characteristics, will make the design a lot of color.

The "progressive expansion" of the Transformers in the Web page will be a great blend of complex and space-intensive functions in the page, save space, reduce the complexity of information in the Web page, especially for novice users, we can consider this part of the design of novice users feel, will not often use the control options to hide, will help them to perform complex operations better.