October 24, 2013 at 15:18Interface Animation
- 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.
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.
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.
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.
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.
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.
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.
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.
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.
Stickers
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).
Conclusion
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.