5 Examples of how Motion and Animation in Website Design can Transform the User Experience
Changing Consumer Trends
The behaviour of consumers has shifted dramatically over the past decade with customers demanding a greater level of instant gratification and satisfaction during their online shopping experience. Companies are capitalising on this demand, offering same-day delivery options, providing full series streaming services and eliminating the need to wait for a taxi. As consumer behaviour shifts towards an increasing desire for convenience, more and more consumer’s are heading online. By 2021 it is expected that the number of shoppers online will reach 2.14 billion and companies are now investing more than ever to create more innovative and engaging online experiences for their customers.
This change in consumer behaviour means that on average, the attention span of an online user has decreased from 12 seconds to 8 seconds in less than 20 years. As a result, UI and UX designers are faced with the growing challenge of developing evermore engaging and attention-grabbing user interfaces and experiences for online customers.
Motion and Animation
User’s now consider motion and interaction an integral part of their online journey. As consumer behaviour continues to shift towards enhanced experiences, animation and motion provide a valuable resource in enriching the online customer journey. Animation and motion provide the user with the perception of real-life and depth to a website as if they are interacting with a physical object. They also prove a valuable tool to help declutter interfaces, enabling content-heavy sites to achieve sleek finishes by using motion to guide the user to valuable information and making the best use of prime screen real estate.
Designers are now incorporating animation and motion into the user interface and user experience as a way to draw the user into the website and engage with them more intuitively. However, animation and motion are not just visual attractions for the user, like everything that is implemented within the UI; they need to provide value to the online experience.
UX designers must consider how animation and motion can be implemented to enrich the user experience by either enhancing the user’s navigation around the site or by increasing functionality or usability. A thoughtful and strategic approach is needed before it is implemented, ensuring that it provides purpose to the website or app, animation and motion should enhance the user experience…not hinder it.
This week on Medium, we look at five amazing website examples that use motion and animation to completely transform the user experience.
Apple’s iPhone XS website is perhaps one of the most visually stunning sites with motion and animation at the heart of it. The use of horizontal and vertical elements create depth, almost adding a 3D effect. The site also focuses it’s animation in one main area, utilising as much prime screen real estate as possible whilst creating a sleek and streamline finish.
We developed a new website for Thyssenkrupp’s revolutionary new lift, Multi which travels both vertically and horizontally. The concept for the website was designed by Fleishmanhillard Fishburn and like the lift was designed so the user can scroll both horizontally and vertically. Parallax scrolling was implemented, allowing background images to move slower than foreground images when scrolling through the website.
Stop and start scrolling is also implemented into the site, allowing some elements such as the menu and contact information to stay on the screen when scrolling, whilst other elements disappear. Animation is also present in the logo, as a user scrolls down the site the U in the Multi logo animates on the vertical axis, whilst animating on the horizontal axis if the user navigates across the site.
This beautifully designed website for fashion search platform Lyst, shows the data trends of denim jeans over the past 12 months from 60 million queries. This single page website uses both horizontal and vertical scrolling to guide the user through the page, drawing the user’s attention to key information. The use of animation and motion graphics throughout the website makes the page highly visual and easily grabs the attention of the user. This website is a great example of creating an engaging way for users to read a data report!
Save the Whale’s website uses a distortion transition effect when scrolling through the website, which warps the edges of the transition, creating an immersive experience for the user, as if they are under the water. This website also users animation as a way to transition to a new page.
Tilt is a branding agency based in London and Michigan. This website is a great example of using animation to create a sleek feel to a content heavy site. Rather than scrolling through the homepage, it has an overlay transition effect which is highly visual. The website features a combination of vertical and horizontal scrolling, making the most of prime real estate on the web page. The use of animation also helps navigate the user through the site, with elements transforming into larger images when the user scrolls over them, drawing the user’s attention to them.
