There are websites that perform better than others. Whether it’s in term of content, usability, design and features. I believe that details in animation and interaction design make a fundamental difference in the field of websites/applications.
When we design products then we require design application like Photoshop, Illustrator or Sketch. People who have been in this business for few years knows that design is only used for visual representation.
Let’s have a look at some examples where smart interactions gently improve the user experience.
Animated scrolling
The blessing and curse for the web are a hyperlink. As you click on a link and they can take you anywhere. From a product page to any old creepy puppet store in Wisconsin.
One of the great things about books in terms of user experience is linearity. Chapters in a book is built upon one another. You read chapter one so that you can understand chapter easily and more effortlessly. When you skip a chapter, you are aware that you miss out something and therefore lack some knowledge for subsequent content. On the web and especially on larger sites it generally happens in a subconscious manner.
Pull to refresh
One of the most interesting features we have seen was “pull to refresh”. It allows you to update scrollable, reverse chronological content. You can see this concept in action in the Twitter and Facebook app. While you are scrolling up and reaching to the top then you can use this feature pull to refresh to see it further.
The interaction feels completely natural and user instinctively wants more content. Before, users used to scroll up and would hit refresh button but there was no content. By connecting users to find more content with the action of initiating a refresh made the user experience more flexible.
Navigational Transitions
Navigational Transitions are state between states in an app that is from higher level to detailed view.
Most, but not all are hierarchical in nature. These moment should appropriately reflect the journey of the user experience.
Hierarchy And Elevation
When element lifts up and expand, the elevation changes the shift in focus from parent to child.
Sibling transitions occur between same level of hierarchy elements without element changes.
