As we move further into 2017, we thought we’d take a look at one of the web design trends that’s recently been on the increase: interactive movement and animation. There are a couple of reasons why we are seeing an increase in movement and animation being implemented in web designs.
One is that it is a fun way to increase the levels of interactivity on your website, which in turn can improve engagement rates and two: animation and movement is an immensely useful tool when trying to improve usability and educate your users because our eyes are naturally drawn to move-ment.
However, it has to be used correctly in order to be effective.
One really advantageous way to use movement in web design is to tell a story. By using movement you can deliver a large amount of detail in a fun, innovative and creative way. What you need to be careful with though, is that you use the right amount of movement at the right time. This will help to ensure the user is not over faced with the content or distracted (rather than engaged) by the movement.
An effective way to ensure your user isn’t over faced by your content and can take in the infor-mation you’re presenting, is to allow them to navigate the content themselves. This is known as “Scroll Jacking”.
Scroll Jacking
Scroll jacking is a useful technique that takes the user’s scroll input and converts it into different an-imations on screen. This is a great way to display content in an interesting and engaging way while also allowing the user an element of control, in this case over the speed of the animations.
A great example of scroll jacking is this infographic about coffee from Biz Brain, which allows the user to unravel the story about how coffee is made, just by scrolling down the page. This is an ex-ample of how movement can be used to create an immersive user journey.
Another good example of implementing movement on a website is through the use of hover effects. This is the process of applying movement to assets on a website. It can be a great way to present large chunks of content in a neater more manageable way.
Hover Effects
Hovers allow the user to engage with lots of content while helping make the site look clean and simple. Hovers also allow the user to interactively engage with selected information, so essentially a user can choose the content they want to view. This can be extremely useful on things like about us pages as Humaan.com demonstrate perfectly here.
However, once again the lesson is that it’s important not to go overboard with hover effects as this can be distracting and even disruptive to the site’s user journey. As a general rule of thumb, move-ment should only be implemented on very specific elements of the page, where it with assist the user.
Another prime example of how to use simple but effective movement on your website comes from one of our own recent web design projects:
the new MTech website. The movement here is used to effectively illustrate MTech’s brand identity and key services in an engaging way, while also allow-ing the page design to remain uncluttered and simple.
In short, movement can be used in a web design to facilitate the user’s journey. Small animations can be used to engage the user, such as loading animations and hovers, which do not require any user input and serve to make their user experience better.
Larger animations such as scroll jacking can be used to tell an immersive story, engaging the user with your content and driving them to-wards valuable interactions with your website.
If you’re thinking about improving the user journey on your website,
speak to our team of digital experts today to find out how a new web design with interactive movement and animations could help.