Recently I’ve been doing a lot of thinking about the purpose of interactions and animations in our user interfaces.
Whether it is an interaction you put in project after project simply because you can and it looks nice or one that is innovative and cutting edge, something that often gets overlooked is what does this interaction say about your or your client’s brand?
This is but one question to ask yourself and your team when adding a new animation or interaction, but for the sake of not making you lose your mind all in one go I will just be focusing on this for today.
It may not be something that you have considered in the past, but just as the static aspects of a design (for example, colour) can better communicate your brand to the end user, so can animation.
Animation can prove a powerful tool to re-enforce aspects of your brand such as key messaging and values. Along with giving an opportunity to deliver consistent brand experiences across different touch points and platforms.
Motion, shape, speed and finish are some of the main aspects of your animation which you can utilise to your brand’s advantage.
PRO wanted to reposition their brand as one with a diverse product range and highlight their on-going determination to produce technological advancement. Part of this technological advancement is to create the best quality products which better facilitate their riders through comfort and speed.
Therefore when creating interactions and animations on their new website, at Creative Jar we had to keep these values in mind.
Primarily, we used the motion and speed of transitions to convey to end-users that the interface was quick and responsive (in the true sense of the word).
Rather than fading elements such as the mega-menu in, we opted for a slide up and down motion, giving users a real sense of movement.
Taking the mega menu a step further and rather than leaving the user with a scenario of menus sliding up and down one after another when moving along the main navigation bar, we opted to simply fade between the menus should the mega-menu already be open.
Not only did this slight change in approach reduce the amount of animation and transition time between menus, it gave users a better impression of reactiveness and speed. Allowing them to quickly get to their destination in a scenario which otherwise could be cumbersome.
The interface also benefits from a high sense of polish and quality finish due to this attention to the minor details. Again, something which is of high importance to the PRO brand (and unsurprisingly, most brands).
Shape can also be an aspect which adds another dimension to your interaction.
Throughout the PRO design angles were introduced to re-enforce this idea of fast movement and was a theme that we wanted to introduce at the right touch points throughout the user journey.
Therefore when faced with the challenge of hover states on the listing pages within the Components section we decided upon introducing the use of angles again.
Where we could have simply faded the primary colour (blue) in to show an active state, we chose to introduce a swipe affect. Using a skewed block of colour and transitioning it across the background of the product square. Again, re-enforcing the perception of motion and speed.
As you can see by just these two examples, thinking about the aspects which make up an animation can tell a different story about your or your client’s brand.
Whilst a user may not be consciously looking out for these, it can go a long way in making your user interface a more pleasurable experience.
It is important to consider, as always with animations, how many instances of interaction and animation you are introducing into your interface. Finding that right balance of enhancing your interface before becoming too gratuitous.