{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Simplicity is the key to great design. Anything that complicates or irritates should be immediately jettisoned, in favour of a cleaner approach, and functionality should always come before beauty. 

As such I still get shivers when I think about animation and web design, given the amount of user experience crimes committed over the years. Animation was a dirty word. It meant too many crazy gifs, too many flashing ads, or even worse, it meant 'innovative' Flash websites. 

Lots of websites still suffer from animation overload, but when done with appropriate amounts of restraint I think motion can help improve the user experience. 

Moving backgrounds, rolldown navigation and micro UX effects were three of the web design trends I highlighted back in January. I think a broader trend is the rise of animation / motion, and no doubt it will be on next year’s list. 

I thought I’d explore some of the different areas of a website (or mobile app) where motion can come into play, to improve the user experience by communicating meaning, or as a visual flourish that bridges the gap between clicking and loading.

Before we begin, let us doff our hats in the direction of HTML5 and CSS3, not to mention better browsers, faster devices, nicer screens, and quicker internet connections. All of these things have allowed designers to use motion in a way that doesn’t suck.

A bunch of these examples come from the ever-enlightening Codrops, which should probably be on your reading list if it isn't already.

Ok, brace yourself for some gifs...

Page header transitions 

There are numerous ways of animating your page header, should you wish to do so.

Page loading effects

As well as headers, you can add fast, lightweight animated effects as a new page loads. Choose from parallelograms, windscreen wipers and spill effects, among others.

Try some for yourself.

Infinite scroll fade ins

Note how Samsung displays additional content as you scroll down the page... 

Hovercrafting

Take ownership of your hover states! Make your website stand out from the crowd by focusing on the little details. Try using fades, washes, different font sizes, and so on.

 

Dynamic / animated charts

Why bother with static images when you can render a chart on the fly?  

 

Slo-mo animation

Some sites use CSS animations in a really subtle way, for example a page background that changes ever so slightly. 

Modular scrolling

It is possible to scroll individual columns, as well as whole pages. 

 

Fold effects 

I’ve seen a bunch of mobile apps that use folds like this, either vertical or horizontally.

Progress bars and buttons

A ‘submit’ button that also acts as a progress bar.  

The slow reveal

This is perhaps best illustrated by the before and after images of the D-Day landings, as seen on The Guardian. Drag your mouse across the picture from left to right (and vice versa) to flip between old and new pictures.

Mobile menu transitions

This is an example of a staggered transition, from Paper. Various other mobile animations and transitions can be found at Capptivate

Minimal / innovative forms

What if forms weren’t so headache inducing, so long, so paginated, so goddamned boring? Form optimisation should be a priority, and there are some new design patterns coming into play...

  

Rich arrows / scroll buttons 

Scrolling is all the rage, so it makes sense to choose a quality design for those navigational arrows.

Slidey navigation

Pushdown navigation and pull-out sliders (as can be seen on Medium, below) are growing in popularity as a web design trend.

 

What other examples have you seen out in the wild? Are animations and motion transitions here to stay? Do leave a comment below.

Chris Lake

Published 15 July, 2014 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

Comments (6)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Samantha

I'm always wondering, how do you translation "Hovercrafting" to mobile?

over 2 years ago

Avatar-blank-50x50

Jess

Nice article. These all look good, but I'm wondering how accessibility friendly they are?

over 2 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

@Samantha - You're not really meant to hover on touchscreen devices, so I don't think it does translate, unless you get into silly double clicking territory.

@Jess - They typically use CSS rather than proprietary tech that requires replug-ins so in theory they should be ok, but it's worth a sense check before / after implementation.

over 2 years ago

Avatar-blank-50x50

Jared

Again, great post Chris. Reveal based marketing will surely become a big piece of this puzzle. The D-day reveal was a great example. That being said there are better ones out these such as: https://s3.amazonaws.com/uploads.hipchat.com/72135/852479/Y3YyDQbXjzupeuN/nsZkrkuDfa.gif

If you ever want more info on this form of digital interaction feel free to reach out!
https://twitter.com/JaredAlanF

over 2 years ago

Avatar-blank-50x50

Harry

Nice article Chris, I find that sites like useyourinterface.com are also good to keep on top of the recent subtle interaction design patterns.

over 2 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

Thanks for the pointer Harry - now tuned in!

over 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.