14 Animations For Web Interactivity In 2017: Out With the Static!
Featured Image: iStock/Jane_Kelly
This is the second post in a two part series. In Part one, we discussed the importance of interactive web design and basic interaction techniques. Check out the previous post if you haven’t read it yet.
Now we dive in a little deeper into specific methods of implementing interactivity on websites.
Interactive design is the latest buzzword in design circles. Throughout 2015 and 2016 we have seen web and app design move towards simplification. The ultimate goal of simplifying design is better UX (user experience) UI (user interface). Animating UI elements is a great way to reduce clutter and make your designs simpler.
The primary method of web interaction in 2017 will be animation. We explore 14 modern animation techniques and take a look at some stunning examples. First, let’s look at why animation matters and why you need to include it in your 2017 web redesign strategy.
Why Use Animations?
Animation has come a long way from 50’s cartoons and is an essential part of modern interactive web design. Anyone who thinks that animation is simply for aesthetic purposes is mistaken. Animated effects help create immersive user interaction designs. It can serve as a solution to common UX and UI problems. The right animation at the right spot can help get your brand’s message across and engage users.
14 Modern Animation Techniques For Great Interactive Design
Modern web design aims to maximize interactivity. Animation is the ideal way to add some spark to your dull website. A boring website with bad UX design is a recipe for disaster. Avert the inevitable drop in revenue by using these animation methods. Check out these amazing methods and related examples for inspiration.
1. Animated Backgrounds
Do you consider backgrounds static and boring? Think again, backgrounds aren’t restricted to the drab images anymore. Modern animation lets you create a visually appealing background with animated effects. A word of caution, don’t use animation if it doesn’t enhance communication. Designers often include unnecessary animations, which can hurt the interactivity.
The website, Travel With Terna has a background that moves constantly. The animations are not subtle but not distracting either. Clicking on the little blue tags produces more animations that pop up shortly.
Another website that has a ton of animations is Space Advisor. It starts with a full screen animated background on the home page and plays through a fun quiz. Using an animated background when the entire user interaction relies on animation would detract from the main content. However, here it just highlights the richness of the experience.
2. Animated Images And Photography
Animated images are a recent addition to the interaction design toolbox. The effect involves animating still images, shapes, and even text to capture attention. Photo animation will continue to get more popular in 2016 and will dominate the animation trends of 2017. Let’s look at some examples to get a better idea.
A slight animated effect, usually a slow zooming in, of product photos looks beautiful. Puca Jewels uses this effect to give a clear view of the product.
Bolia uses a horizontal parallax in their full screen images. Their product images are rich and vibrant but they have upped the ante by the clever use of animations.
3. Calls To Action
Call-to-Action or CTA buttons need to be displayed prominently on the website. Small animations can signal design intent more clearly than some traditional static elements.
Social media buttons can be merged with the social proof metrics with animations. This example shows a Twitter button which displays the total number of Tweets when the pointer hovers over it.
The CTA on the Nerisson page is very visible but doesn’t seem interactive. Hovering over it changes the color and a slight bounce provides the signal for interactivity.
4. Unusual Navigation
Traditional website navigation resembles the structure of a book or poster. This design works best because it’s quite intuitive. However, this standard model has been given a new twist with experimental navigation. Unusual navigation
The American Institute of Graphic Arts (AIGA) 100 Years of Design website is a textbook example of unusual navigation and layering done right.
The Locus Solus page has a quirky menu that looks like a compass; each of the points shows different product images.
5. Form Fields
Most people hate filling out website forms. We are kind of in the same camp because most online forms have horrible design. Animations are here to save the day. Subtle animations can guide user interactions and make form filling less painful.
Here are a few examples of how animations can transform the humble web form.
Notice how the screen changes whenever an interaction happens and a desirable action is finished. Successful form submissions can also be communicated by changing the button slightly.
6. Full-Screen Animations And Videos
This is the ultimate immersive experience but probably the toughest to get right. You will need to carefully think about how every frame looks in relation to the rest of the design. Larger videos and animations also increase page load times, so use this effect sparingly. Here are some websites that have managed to hit the animation nail squarely on the head.
The Follow Your Intuition website by Peugeot is an amazing example of storytelling on the web. It uses a full screen video format and has some brilliant interactive elements.
Another example, which is interactive and informative, is the Reuters TV website.
7. Horizontal Layouts
The entire Travel Alberta Tripplanner website has a horizontal layout that looks quite stunning. The interaction design and user experience is impeccable. Clicking on each option narrows down the requirements and presents you with amazing locations as well as a list of activities.
The menu on the left has a smooth animation and shows links to detailed information with links to Tripadvisor.
The design studio Hot Dot has a horizontal website, the main focus of the website is full screen images. Each image highlights the service offered and the related section of their portfolio.
8. Hover State Animations
Hover state animations are one of the most commonly used UI pattern. The initial display might look one way but then changes once the user interacts with it. These slight changes reveal the functionality to the users and don’t take up precious screen space. Mobile apps use hover state to increase usability. This effect is also used in Webgraphics and large data tables.
The website of an interior design firm, Sergey Makhno has an interesting hover state effect. The CTA outline changes color and also functions as a loading time indicator.
9. Loading Screens And Animation
Loading screen animations are called ‘unseen’ elements because they are triggered without any input from the user. Loading animations can be entertaining and jazz up simple websites. The key is to not make them too flashy or colorful. Match the style of the loading screen to the overall website design. Also keep the context in view, for example, you can’t use a dancing unicorn if the website is for a construction firm.
The loading animation for the Tom Cole Architecture website is elegant, simple and fits in with the overall look of the website.
Another example is this subtle loading animation of the Aquatilis Expedition website. The animation is a simple white wavy line meant to represent ocean waves.
Smaller animations can also be used to signal page loading or form processing.
10. Menus And Navigation
Menus can be animated to give the illusion of the request being processed. A sudden change in display might seem confusing to the user even if they have triggered the change. This usability problem can be solved by using animations.
Brian Hoff Designs uses a simple animated menu that pops up when you click the hamburger icon.
The screen fades out and the menu items show up clearly. Hovering on the item changes the color of the text, this a nice subtle touch that enhances usability.
Another thing we like is the simplicity of the options and the design. There is no clutter, just four main options, three sub-options, and social media icons. The result is a sharply focused look.
11. Page Motion
This can be smaller animations or large animations creating a parallax effect. If the one-page parallax effect isn’t suitable for your main website, you can always create one highly interactive page to increase engagement.
The Beauty of Brewing website looks great and tells a fascinating story through the parallax effect. As you scroll down, the site illustrates the step-by-step process used to manufacture beer. The color palette transitions from a rich gold to apple green. It’s a very unique way to show the journey from barley to beer.
A similar effect can be seen on the Blu Homes website. The company is involved in the residential construction business. The homepage features videos that highlight the home exteriors and interiors. It’s quite a clever way of captivating the viewer.
12. Scroll-Triggered Animations
This technique changes page elements as the user scrolls down. These changes can’t be sudden because it will produce a jarring effect. Animations ease the transitions and
Getty Images launched the Getty Endless website to highlight the range of photographs available via the service. Their tactic was creative and the accompanying website takes the concept to a whole other level. The design is based on an amazing scroll-triggered animation, which merges different images. The images form a collage and show the faces of famous world leaders such as, Dalai Lama, Pope Francis, Angela Merkel, and Prince Charles.
Another cool technique is modular scrolling. As you scroll down, specific sections of the page change to produce a stunning visual effect.
One page websites can use scroll-triggered animations to create a fabulous effect, as Letters Inc. has done:
13. Slideshows And Galleries
Full screen or partial screen slideshows make your website look great and work better for product images. Galleries are also easy to navigate on mobile devices because smaller screen sizes look awkward with additional navigation buttons.
Look at this stunning product slideshow from Relogik. The full-width effect captures the eye. Focus is not broken because the slideshow gradient merges seamlessly into the overall design. Both of these effects combine to highlight the product itself.
14. Subtle Animations
Animations don’t have to be flashy to gain attention. Human vision is sensitive to motion and will pick up the slightest of movements. Sometimes the brain often superimposes movement where there isn’t any!
Design firm, Carbure has a full screen animation on its homepage. Sounds a bit excessive, but you are mistaken. The animated elements are small and the movement is slow, this produces a relatively subtle effect.
The website of the performing arts group Dragone makes clever use of subtle animation effects to make images seem captivating.
You can’t see it in the image but the small yellow sparkles move slowly to create a magical effect. Visit the website to get a better idea.
Keep this list handy to know which user interaction trends you need to keep an eye on in 2017. If you agree or disagree with our analysis or think we missed something, leave a comment below. Alternatively, send us a quick Tweet @utter_web.