Deconstrukt #2: Alexander Engzell on Interactive Animations
Still images fill the finest galleries in the world. We visit the MoMA and spend hours pacing across long rooms at our leisure, enjoying elegant works of art. Dieter Rams. Massimo Vignelli. Paul Rand. Web design at its best rivals the artistic merit on show at galleries, even elevating the user experience. It's all about engagement.
Instead of appreciating from a distance, the user interacts with images or typography and influences activity. The success of the execution depends upon the vision and talent of the designers and developers. Precisely how do interactive animations improve user experience and increase engagement? To Deconstrukt what is actually happening here, it's clear that generating a mind-blowing animation works as a reward to the user. What makes an animation compelling and which parts of the design benefit from it?
1. GPS for the web
Interactive animations should be used to encourage the user into menu engagement. Navigation is supposed to be simple. Some needlessly make it more complex and right now the entire menu landscape is changing. We've seen social media feed additions as well as career posts and videos. Expect the revolution soon.
-
Weber - BBQ Cultures
Interactive navigation is the key to genuine engagement. This is storytelling at its finest, as visitors craft their own experience through several high quality videos. With the narration, it forms a complete story that reveals cooking tips and tricks along the way. The narrative threads are presented in tile layout and visitors swipe an oven mitt to the right to activate the next stage of the story.
-
HLK
Within a grid layout, the user is presented with five options over black and white images that each turn into colourful videos when hovered over. A lot of consideration has been taken over the images and videos within this navigation, all of them contributing to the title.
-
Plasticbionic
When hovering over a project, the visitor is shown an image of the case study. When the visitor narrows down the projects into a certain criteria, they can see all of the images, which expand further into the black section upon hovering. The sorting process offers great organisation with such a high number of projects.
2. Works of art
Powerful images strike right at the core of all emotional engagement. Taking full advantage of the image depends upon effective presentation. We're seeing designers discovering more innovative uses every day, animating aspects of images and using them for interactive purposes.
-
VO2 Group
Behind headings and translucent shapes, an athletic figure breaks through the borders, sometimes covering letters with limbs. The most impressive aspect of this image is what happens upon sliding: the figure changes position, at two varying speeds depending on which part is outside of the shape.
-
Anton & Irene
Anton and Irene stand dressed in fully zipped-up, tight-fitting onesies. Hovering over one of them provokes a new pose, unzipping their uniforms in various ways, resetting each time the user removes the curser.
-
Giampiero Bodino
A genuine work of art that visitors pan around and appreciate from different perspectives. The more time studying this masterpiece, the more the users notices. Four levels of artwork gives the impression of the entire detailed page being 3D. Wings flutter, tassels wave and shading changes when holding the curser in a certain position.
-
Bose
Hovering over the various headphones portrayed on colourful, striking backgrounds enlarges the image and pushes the other headphones to the side. The page transition is a natural extension of the hovering affect too; the entire background is changed into the particular image's base colour before additional elements such as product information and CTAs are added. Overall, an impressively smooth transition.
3. More than reading
To cause a feeling within the reader that the copy is being spoken aloud to them, the designer has to take the time to select engaging typography. They must draw attention to the text, particularly when it competes with images. Creating something genuinely different will make an impression.
-
71st Warsaw Rising Anniversary
Surrounding the copy on the landing page are broken versions of the same word in gold. If this wasn't instantly grabbing enough, the fragmented letters are animated when the user scrolls down to read more text. This is a clear case of successfully matching style with subject.
-
Melanie F
As users scroll down this wonderful website, they are presented with an animated initial of heading selections. The third animation of the M in Maxime is particularly interesting, with the letter seemingly being drawn by a red shape that shoots in from nowhere. The differentiation between the animations and attention to detail is the finishing touch that makes this feature so attractive.
-
Werkstatt
When scrolling down the page, the text greets the user by turning into a darker shade. As if this didn't draw enough attention to the content, certain passages are highlighted in bright yellow. The user feels as though the copy had been waiting to be read by them. The entire case study is impressive and ensures visitors will definitely read.
-
Super Top Secret
When the user is invited to scroll to see more, Super Top Secret is animated by a series of lines and shapes. The animation is so interesting, the user is certain to go back for at least two or three more looks to see what happened. The formation is so intricate and quick that some of it will forever remain a super top secret to many.
4. Complete experiences
A preloader transforms loading into an opportunity. Designers can use the time and space to engage visitors with entertaining and ground-breaking animation or strong CTAs. Pageloaders ensure an uninterrupted experience for users who glide through the entire site without waiting for pages.
-
DAN Paris
The preloader is an energetic animation of the logo, rising from the black filled with live video. Almost as soon as it spins into existence, the logo takes on a fluid nature and bounces into a dark pool. This act is quite an entrance into a website. The pageloaders continue in the same spirit, with the logo either being attacked by octopuses, ray-guns or chinked between wine glasses.
-
AQuest
A small blue ball expands, exhibits the logo and then turns into a globe surrounded by satellites. This preloader informs the user that this is a global agency. The pageloading sequence takes the user upwards to the top of the page to the original header before seeing it returning upwards out of shot and returning with the new header.
-
Dogstudio
The impression of paint bleeding outwards from the centre of a canvas is how Dogstudio have transitioned from one page to another. The sulky tones of the colours add to the experience. The transition is smooth, which maintains the strong atmosphere set on the homepage.
-
Valerie Martinez Agency
Users are first presented with the logo of the agency, flickering with different designs. The homepage swipes in from the left hand of the screen, covering the flickering logo like snow during an avalanche. The pageloader similarly swipes in heavy from the left, maintaining consistency. This contributes to the clean minimalist design.
There are far more ways to engage users with interactive animations. We're entering a new epoch of design and standards are raising. It comes down to style and whether or not you consider yourself an artist who doesn't bow down to convention or conversion at the cost of greatness. Follow your vision all the way. Be bold. The greatest designers are expected to constantly offer inventive ideas with their work. The designers that go down in history will live up to these expectations.
~~~~~
Alexander Engzell is the Founder & Creative Director of Bonne Marque.