Interface Animation

Original author: Adrian Zumbrunnen
  • Transfer
When we create static layouts of interfaces (whether it’s sites or mobile applications) in Photoshop, we don’t think too much about how this layout behaves in dynamics. Steve Jobs once said : "Design is not how the product looks, it is how it works." Our impression of the product is formed on the basis of many factors, but the most important is comfortable interaction with it.

Scroll animation

Hyperlinks have revolutionized the Internet, but they remain just its main problem. You never know for sure where she will lead you. Even the hyperlink leading to the footer of the site can distract from the initial thought.

Compare these two examples.

Sudden changes are difficult for the user to understand.

Dynamic switches

There is nothing more difficult for a person to perceive than instant changes. Because in nature there is simply no instant change. In the following example, we can see that turning the plus sign by 45 ° completely changes its meaning.

Such a switch is quite convenient, in addition, the plus sign rotates in the same direction as the content, which is an additional indicator of the correct operation of the system.

Collapsing Comments

The form for adding a comment, whether for a blog or a discussion of a product in an online store, is still one of the most complex interface elements. The reason is that instead of just starting to enter text, the user must take some other steps (log in for example). In order to somehow motivate people to write comments, you can simply show only the most important element - the comment field, which, after clicking on it, is fully disclosed (for example, as on the website of the New York Times).

You can go further: set the cursor focus after expanding in the comment field.

However, when using this approach, there is a small problem - one of the fundamental principles of user interaction is that switching should always take place near the place where the interaction takes place.
As we can see from the examples, such improvements contribute to the attractiveness of commenting. It’s also good practice to upload comments when you reach the footer of the page, the less you press the buttons, the better.

Pull to refresh

Has become popular on the iPhone «pull to refresh" (eng. «Pull to refresh») developed by Loren Brichter ,
allows the user to update the content in reverse chronological order. You can see this on the example of Twitter.


The idea of ​​stickers is to link content to context, as shown for example in the example below, and implemented in the iOS address book.

The method is great for situations where there is a lot of information, but it is necessary to consider it in a complex.

Inviting controls

Take a look at the example below:

You can see small “ribs” around the “camera” icon. They kind of invite you to touch them and pull. In the new iOS7, they were removed due to an already developed user habit. You can also notice a flare animation on “slide to unlock” which invites you to take an action to unlock the phone.

Hiding controls

Since its introduction, Google Chrome for iOS has been using the idea of ​​hiding the search field while scrolling content. Thus, it was possible first of all to increase the screen space, which is important for mobile devices.

Focus move

About a week ago, Nikita Vasiliev, a UI designer from Toronto, came up with a rather interesting idea: smooth focus movement between interface elements. You can see the full essence of this idea in the video below, or install the extension for the browser (only Chrome and Safari).


The above examples are just a small part of what we can do to improve user experience. But these seemingly insignificant details are able to bring the user experience to a new, better level.

Also popular now: