Do animated website introductions make you cringe?
Your opinion on animation is probably swayed by Flash. This fickle plug-in was seemingly always out of date on devices. Users were often blocked from accessing websites until they downloaded a new version. The latest website introductions are animated in HTML5, which UXBooth’s Suzanne Hall says, “excels at giving users a delightfully inconsistent experience.” In this case, inconsistency is a great thing because HTML5 seamlessly scales from smartphone to tablet to desktop. There are no version issues and it’s often faster to load.
For some visually rich brands, animated introductions in HTML5 are a powerful option. The appeal of animation even has deep roots in behavioral psychology. Whether you’re considering the use of HTML5 animated introductions, here’s why designers need to know not immediately dismiss animation.
Humans Are Hard-Wired to Seek Surprises
The pursuit of sensation is a major factor in behavioral psychology. Humans are often motivated by the pursuit of a reward, which can include anything from a surprise to the thrills experienced watching horror films or walking through a haunted house. Animation can induce all of these feelings, too. As website visitors are able to watch a story unfold, they’re rewarded with surprising new information that’s not immediately apparent upon visiting a site. When animation is leveraged correctly, it can facilitate user engagement and positive feelings about a brand’s website.
Sites Using Animation Correctly (And Why It Works)
There’s no shortage of sites with tacky or tasteless animated introductions, which may be designed in either Flash or HTML5. Here are some brands using HTML5 animated introductions to the concept’s full advantage, and some notes on why the end result is brilliant.
1. Nodeplus
The introduction to this website is a bit like stepping into virtual reality. The motion involved is so incredibly vivid, viewers might find themselves physically reacting to the visuals.
2. Generations Relay
This website is designed to honor the bravery of individuals who participated in the Warsaw uprising. It’s an emotional brand concept, and the animation works to engage and inspire feelings in viewers.
3. Rational Keyboard
HTML5 can facilitate exciting interactivity between users and websites. One of the best examples of this concept at work is Fritzo’s Rational Keyboard, which allows site visitors to play music on a digital keyboard with both visual and audio feedback.
From immersing viewers in slightly nauseating virtual reality to providing game-like interactive experiences, the possibilities for animation via HTML5 are only as limited as designers’ imaginations. When animation is used to delight and surprise site visitors, it can reflect positively on a brand.
