Published: 05 June 2014
Years of negotiating pointless Flash animations and unwanted expanding ad banners have given me a healthy suspicion of movement on a website.
Despite this I am an advocate of using motion to enhance the web experience: intuitive transitions and subtle animations are great for clarifying functionality and, of course, everybody loves a well-chosen animated gif.
The key, for me, is where and how movement occurs. Does it aid navigation, does it help show off content or is it merely a gimmick?
Here are some recent examples that I think get the balance right:
Given the panic in the print industry a few years ago it’s encouraging to see that many newspaper sites have embraced digital disruption and are giving their readers a best-ever experience online. A perfect example is The Guardian’s piece on the fallout from Edward Snowden’s whistle-blowing; a full-width, long-form article that seamlessly integrates video of talking heads. Throw in some animations and an interactive slider and you have a page that genuinely brings the subject to life:
The New York Times
I’ve previously talked about the excellent made-for-web articles on the New York Times website and their innovation even extends to the otherwise retro homepage. A recent feature, “Hopes of a Generation Ride on Indian Vote” was trailed on the homepage with an auto-playing video, beautifully composed and fairly static, but almost shocking within the serif-heavy old-school setting. This novelty tells the user that this is something special - indeed, clicking through reveals the feature article to be another beautifully simple long-form with auto-playing video:
I’ve left my current favourite example to last: Sploid, Gizmodo’s “future headlines” blog, frequently uses an animated gif instead of a still image to entice you to click into their blog posts. Here are a few eye-grabbers:
Plane almost lands on guy who was sunbathing on a beach in Germany
Insane man flies through a narrow gap between two buildings
Video of the first dog in the world to fly on a wingsuit