Ingenious scene animation in the user experience

(Adrian Zumbrunnen Judithzhu & Lynnwang translation To see the original reproduced please indicate the source mxd)

Some pages are superior to other pages, not just because of their content, availability, design, or features. The fundamental difference between modern web pages is their interaction and animation details. We will share some of the experiences gained from various models, while analyzing why these simple styles can be so useful.

When we design digital products, we often use design software such as Photoshop and sketch. Most people who have been in this industry for years obviously know that design is more than visual presentation. However, many people still continue to create static design. Steve Jobs has said something about design: "Design is not just about shape and feeling, it's about how it works." ”

Our impressions of a product are the result of a combination of factors, in which interaction plays a fundamental role. We can no longer assume that the user interface is just a static design, and the interaction effect is later imposed. Instead, we should embrace the interactive nature of the Web page from the outset and consider it as a natural part of the Web page.

Let's take a look at some examples of flexible interactive forms to subtly animate and gracefully enhance the user experience.

Scroll bar Animation

People are always mixed up with hyperlinks to Web pages. When you click on a link, it may take you anywhere, from a product page to a creepy street old puppet store site, resulting in a lack of contextual relevance.

One of the great benefits of the book user experience is its linear relationship. Each chapter of the book is for the final matting. When you read an introductory book in economics, you must read the first chapter to help understand the second chapter. When you skip a chapter, you may find yourself missing something, so that you lack a certain understanding of what follows. On the web, especially the longer pages, this happens inadvertently. Adding a scrolling animation effect can compensate for this:

Compare the following example:

Compare the preset behavior of the "name" anchor link above with the following animation behavior. Skipping content is no longer an unconscious act. It is a definite operation. In fact, Hope lies at the Frames per second this page sets a menu button for its mobile display that can take you to the top of the page, but without any animations. It took me more time to figure out what actually happened.

Tip: Abrupt changes in the interface can be difficult for users to handle. Don't let them get lost, always let the user know what happened.

Transitions of State

As we've seen above, transitions can help users understand the interface's operational steps and the entire process. Nothing is more unnatural than a sudden change, for this sudden change does not exist in the real world. Let's look at another example: Toggle the menu. Users associate "+" with adding content or expanding an element's action. "+" to flip 45 °, "+" has become a recognized as "closed" interface element-"x".

This simple transition completely changes the meaning of the icon. Such a small detail means two different experiences, one is the user must guess what will happen next, and the other is the user clearly understand the icon two of the state of the meaning. If you ask me which one I prefer, I feel that the state switch is much better than that experience. At the same time, it is worth noting that the reverse direction of the plus sign is always consistent with the content rendering action, which enhances the consistency of the information.

Tip: Make your page elements understandable in every state.

Folding Forms and comments

Many of the comments on blogs and news sites don't look like pleasant elements. Why? Because most of them aren't friendly enough, are they? When you are ready to make a comment, you simply want to input a comment. On the contrary, a typical form will ask you all sorts of other unrelated things, very annoying.

To get users to post more comments, we can collapse the form to show only the most critical elements: the comment box. When the user clicks on the input box, you can expand the form accordingly. We can find practical examples of this advanced deployment on the New York Times Beta website.

You can go further and focus your cursor on the comment box when you expand the form. However, there is a problem with this approach: a key interaction design principle is that behavior should occur near the point where the interaction is most recent. So we can go further and add animations to the comment box to guide the user to the comment box:

You can even pin the comment box to the top, and unfold it according to the user's actions, showing more of the content below it.

As you can see, this reduces clutter and makes the comment form more appealing. What if you folded up all the past comments?

Collapses the comment and uses a scroll bar to indicate the length of the body, not the length of the entire page. A common practice is to load comments automatically when the user reaches the bottom of the page. We should avoid forcing users to click unless there is a better reason to do so.

Tip: Gradually show to reduce the visual module, only to retain its own essence part. Show up when the user needs it.

Drop down Refresh

One of the most exciting interactions was the Loren Brichter created a "drop-down refresh" shortly after the iphone was released. It allows the user to update the current content of the scrolling display. You can see the effect of this idea on Twitter's app. Once you scroll to the top of Twitter, you can scroll through a small section to refresh the entire flow of information.

Why does it work so well? Before the next pull refresh occurs, the user needs to click the browser's Refresh button to load more content. This obvious refresh action can be discarded by linking the expectation of the user to more content and the refresh action.

Tip: By connecting intent with behavior, the experience will become more seamless.

The label is stuck on

Label sticking is a subtle and useful set of other user interface components and also a very meaningful transition animation. Take a look at the Edenspiekermann Studio's website on how to use the technology in its own display.

The item's label scrolls through the content, providing a contextual indication for the picture on the right until the next item appears. This animation is similar to the iOS contact interface, and they are particularly useful for contextual instructions for long list interfaces. This transition animation not only helps to quickly locate and smooth out contextual relationships.

Tip: The label is applied to an adaptive window that doesn't fit well, and the description or title adds a long list of valuable information to the content.

Availability Animation

The concept of availability derives from cognitive psychology, which refers to the special attributes that an object can instruct an observer to manipulate.

From the user interface design perspective, the EU online PDF, Usability glossary, defines "availability" as follows:

Availability is the ideal attribute of the user interface--so software can naturally guide people through the right steps to accomplish their operational goals.

Visual projections are often used to enhance availability. The raised button indicates that the button can be manipulated. This user experience is widely used in camera software for iOS.

On the lock screen of IOS 6, the camera icon is designed with several ridges, suggesting that it can be dragged. Because the user is accustomed to the quick way to open the camera, Apple removed the prism design in iOS 7, making the camera icon more like a standalone button. Its related operation is the same: when dragging the button, the lock screen interface up, showing the following camera interface. This is a great way to show the user the features of the product in the interface.

Tip: Design The element's availability more strongly to guide the actions in the user interface.

Situational Concealment

Chrome on iOS has an example of this scenario hidden from its original version, which deals with this:

The basic idea is that when the user naturally slides down the page to start browsing, the Chrome navigation toolbar is automatically hidden. The navigation toolbar appears again when the user rolls back the page. Doing so makes the experience more situational (focusing on the content itself) and adds to the display area of the screen. The latter is particularly important in mobile terminals.

The potential scenario is that users will be able to glide through their focused content. Once the user stops sliding the page, it may be necessary to change the user's operating scene, and so the navigation toolbar appears again. Now that this technique saves screen space, you can try to apply it in your operating scenario.

iOS goes a step further in this regard. When you slide to the bottom of the page, the toolbar appears again. This is an example of a very good dynamic combination of user requirements in interface operation.

Tips: Situational hiding can enhance the user's operation focus and save screen space.

Focus Conversion

About a week ago, a Toronto UI designer, Nikita Vasilyev, had a particularly ingenious idea. He developed a set of page focus jump scripts. Although the program is still in the experimental phase, the concept is particularly interesting. Take a look at the video below. (Remember to bring your headphones--the sound is gorgeous).

View Video

When using the keyboard to switch focus, the user clicks the TAB key to not know where the focus jumps. This little animation tells people where the focus is in the page. Animation is very small, but it has a very big impact on guiding users.

Tip: Guide users regardless of how they operate.

Conclusion

This article only lists a few cases, in fact there are many. The key is not to show the latest and brightest interactive technology, but to emphasize how a small interaction detail can significantly enhance the user experience.

If we are to design better digital products, we need to constantly challenge our current beliefs to see how interaction patterns can potentially optimize the lives of users. I am not saying that we are going to overthrow the present, but that if we stop exploring we will really become ignorant. So, to leave our comfort zone, to continue to explore and experiment.

If you like this article, you can find me on Twitter or join our Swiss Chocolate Association in Switzerland.

What kind of animation do you think is the most useful in your project?