Really good action is invisible.

There is no doubt that the use of dynamic effects in the UI and Web pages has become a big trend. This trend is so obvious that more and more applications are not designed to improve the experience, but to emphasize the effect itself. Designer Pasquale D ' Silva said this in the 2013 Web Direction South:

Good action is invisible. (as a user) you should not notice that you are looking at a dynamic effect.

This is a good suggestion, we as the screen behind the design and development team, in advance in the brain set several principles: the existence of dynamic effect must improve usability, it is natural, implicit, is a mechanism to give users feedback.

In the past year, I have been busy email builder work, in this process I have a more in-depth understanding of the dynamic design of the Web page, and the local app is different, it faces more challenges, not only need to consider the spacing, spacing, layout, and other factors, And all the devices and browsers have different effects on the display, which makes it hard to compromise when trying to create the best user experience. In fact, we did a lot of nice and useful features on the 27-inch imac, but we didn't put them in the final release because of the jerky lag on the other devices.

In the conceptual and design phase, all the dynamic and interactive prototypes we design, in the final release of the product, we only retain the most practical effect of the best part. For us, it is possible to pick out the most useful dynamic and put them in the most appropriate place-the details that enhance the user experience. Here are our selected parts of the dynamic design:

New Layout dropdown box dynamic effect

When the user clicks the "Add Layout" button, the Drop-down box fades out from the button, and the action can highlight the dependencies between the Drop-down box and the button.

Side Bar Folding Box

When you click on a folding box, it expands, and the other boxes fold up, and the dynamic effect makes a natural connection between the content and the title. and the "Image" label page is slightly sluggish for a while to gradually appear, which makes the dynamic has a level, but also let users notice the contents of the label page.

Button status

When you are waiting for something, you feel the time slows down. So, when the user is waiting to receive the mail, we will show them what is happening in the background with the help of the action. When the actual mail is sent in the same premise, we let the user's attention is no longer vacant, but shifted to the dynamic effect, so that they feel the time "faster."

Add or copy a layout

When a user adds or copies a layout, we create a blank area with the help of the action, and then the new layout or control fades out of the blank area, becoming clearer, hinting at the concept of "creation".

Remove layout

When your entire message layout contains too many similar chunks, the deletion is unavoidable. When you delete a block, the following area slides up and replaces the position, highlighting the concept of deletion.

Layout controls

Layout controls appear when the user mouse moves near a layout. The small control fades from the corresponding layout area to the side, implying dependencies, and letting the user know which piece of layout the buttons are manipulating.

I'm sure that really good performance designers can easily point out how these dynamic effects should rise. Unfortunately, the fragmentation and performance problems of device platforms and browsers have forced us to give up many of the dynamic and exquisite details. The consolation is that at least we are sure that the existing dynamic has provided a good enough cross-platform user experience.

More and more people are starting to explore dynamic, design, and writing to make a summary does not mean you have to design for every change and details of the action. If we as designers really fulfill our responsibilities, then users should not be aware of these dynamic effects.

Excellent action, should be invisible, just like those excellent interface.