'Delightful' is a word used often when speaking about designing good user experiences. It’s that intangible ingredient that designers strive to include when creating interactions.
Merriam-Webster’s online dictionary defines 'delightful' as “highly pleasing <a delightful surprise>”. Synonyms for the adjective are pleasant, enjoyable, charming, etc.
As Jared Spool, founder of User Interface Engineering, is fond of saying, “You should be focused on what you can do to delight your users.”
I’m happy to say that I have found the UX definition of 'delightful' in the subtle and contextual use of triggered CSS animations. These are the animations that only become active once in the user’s viewport.
Not to be confused with parallax scrolling, I’m talking about something reserved and perfectly suited for designs aiming for elegance, clarity and simplicity when showcasing a product (for inspiration, see our selection of the best animations from the past 20 years).
Warm fuzzies
Not unlike everyone else, I spend most of my limited spare time searching for ways to simplify daily tasks. Enter a company called Mixbook, and its ingenious new app, Mosaic.
I’ve used Mixbook for quickly creating various family photo albums, but when I saw its product page for Mosaic, I was stopped dead in my tracks.
This was the first time that I’d seen small, intentional animations used to enhance understanding of the content of the product page. I was so charmed by the subtly of the effect that I kept refreshing the page to make it happen again.
It made me smile. Not only was the product appealing, but the product page absolutely charmed me.
Don’t be that guy
My immediate thought, once I realised how well the team at Mosaic handled this particular type of interaction, was “Oh, please don’t let people make this the ‘next skeuomorphism’."
Executed well, this could very well be a long-lasting and useful device for reinforcing messaging on product pages. But over-use and abuse of this could potentially ruin its efficacy.
So, I think there should be some basic questions designers ask themselves when incorporating these delightful moments before they become disastrous distractions.
The guidelines
I want to be clear that these guidelines are specific to product-oriented pages. If you’re creating a portfolio site, a movie site or a site for a rock band, knock yourself out.
If you are creating a product page for a serious (or only slightly whimsical) product, there are specific factors to consider when planning triggered animations.
- Does the animation serve a purpose? If the only reason you’re creating an animation is to show how clever and talented the design team is (a frequent gripe about skeuomorphism abuse), stop right there. This is a product you are trying to sell. If the animation doesn’t serve the customer/user/member, then do not use it. The goal should be using animations that “forward the plot”, not stop the entire show.
- Does the animation distract from the information it should be supporting? Your content team worked hard to make sure the right messaging was delivered to your customers. If the animation is too bold and draws too much attention away from the content, rethink your treatment. However, if the animation supports the immediate content and brings greater clarity through a visual cue, then proceed with your delightful moment.
- Are there too many triggered animations on your page? If a user can’t scroll minutely without triggering another animation, you’re doing it wrong. Space your animations out and limit your design to a predetermined maximum of animations. The more static space you give your animations, the greater the impact of each instance. Mosaic’s site uses only three small triggered animations. The result of that restraint makes each small moment that much more effective. That number may not be right for your design, but there should be a definite ceiling set.
- Are you using too many other CSS or JavaScript-based animations in combination with the triggered animations? Consider the animations on design studio, Userbra.in. Its design is not dissimilar from Mosaic’s with clean, defined regions and showcased products. But here the site has slide scrolling in combination with triggered animations and sliders ... with more triggered animations in each pane. While this may work for a design studio (with a portfolio site) this would be a confusing and off-putting experience for learning about a product. To put the focus on the product, you’ll have to let go of superfluous animation.
- Does the visual design of the site support the use of the animations? If your existing site design is already busy, introducing animations can add to the noise. Or, if you're designing for a new website or product page, keep clean lines and plenty of white spaces in mind when working on the visual layout. These triggered animations are meant to be subtle - and subtle won’t read on a crowded page.
Making it look easy
If you want your page to put the product in the spotlight and give your users a delightful and informed experience, it needs to look effortless to the untrained eye.
Pointing back to the example of Mosaic’s website, at first glance, this site may look like a simple, straightforward effort from a design and development point of view.
No way.
It takes a great deal of whittling away to create a clean and effective product page. If you happen to be designing for a large organisation with an abundance of chefs in the kitchen, determining the priority of the content may be difficult, but it’s essential in educating your customers about your product.
Let the prioritisation of the content guide you in determining the best placement for your triggered effects. And I’ll paraphrase some advice my mother (a prolific freelance writer in the medical field) passed on to me: if you find yourself particularly in love with one of the animations on the page, that’s probably the one you should discard.
