No, those animations won’t change the way we read the news

A post kept popping up in my Twitter feed titled ‘These Design Inspirations Can Change How We Read The News’. We design a lot of news sites here at interconnect/it, so it instantly grabbed my attention.

The article gives several examples of designs they believe are important evolutions on how readers can digest news. All the examples are, undeniably, good looking things … but:

1. Most are just prototypes.
2. Several aren’t anything to do with news.
3. There’s very little focus on actually reading anything.
4. In fact, content is only given a fleeting mention.
5. A complete lack of advertising spaces.
6. ALL THE ANIMATIONS.

The focus of the whole article is on the animated gifs; of very slidey, smooth, easing, oozing, swoopy, eager interfaces. It gives the reader the impression that these animations, above all else, are the design innovations that are going to save the publishing industry.

I read the post, it’s not an awful post, I didn’t agree with it, I moved on … but it kept popping up. For example, it was retweeted by Adobe as an example of good UX design. That irritated me. And since then the theme has become a worrying trend. Richly animated interfaces are repeatedly being held up as the pinnacle of UX and interface design. The dangerous suggestion being that just by adding some slick animations, your product will be somehow elevated to a higher level.

Animations can work wonderfully well. They can make you think ‘Oooooooh’. They can add a weight and quality feeling to an experience. They can add personality. They can actually enhance experiences by hinting at interactions or indicating waiting times or state changes.

They also add time, they can be slow, disruptive and irritating. The first couple of times they are nice, but when all you want to do is quickly see the football scores, they can quickly become a barrier to the content.

High Fidelity Design

Trends often turn up in all forms of design, but due to the fast evolving nature of the web, I feel we often fall foul much quicker than other industries. In web’s relatively short life it has seen many, many fads as technology has levelled up. Table layouts, spacer gifs, animated under construction gifs, scrolling marquee text, iframes, Flash splash pages, Flash!, JavaScript rollovers, the whole Web 2.0 aesthetic … the list goes on.

I tried to think about a parallel that would act as a good warning, and my mind turned to hi-fi design.

Braun and Dieter Rams

Braun, specifically Braun designer Dieter Rams, are about as design cliché as it’s possible to get.

Dieter Rams’ approach to design was “less, but better”. His oft quoted ‘ten commandments of good design’ include the statements that a product should be useful, unobtrusive, honest, long-lasting and have ‘as little design as possible’.

The products that Rams’ and Braun designed, were designed to be easy and joyful to use. They are also timeless, beautiful objects that have been shown in museums and exhibitions. All interaction is pared right back. The function of the product is the star. The number of buttons are kept to an absolute minimum, visual cues are clear and unambiguous, feedback is to the point and free of fuss.

Visually everything is quite stark, but that doesn’t mean there aren’t any “Oooooooh” moments. Every switch and knob is well engineered and considered. There are satisfying clicks and clunks of audible feedback; knobs rotate with well greased, smooth accuracy. The user is never left in any doubt that the function has been engaged. The key touchpoints are the places you find the unobtrusive and subtle delight.

The Braun heyday was in the late 50s and 60s, but the philosophy thrived well into the CD age.

The hi-fis of my adolescence

The Braun products are a far cry from the hi-fis of my teenage years. Being a typically young, naive magpie, it was the designs that were pumped out in the 90s by the likes of Aiwa, JVC, Pioneer and Sony that I wanted in my bedroom.

Look at those overtly aggressive speakers with gaping bass holes! Look at all the lights! Look at all the CDs you can play! Look at the way the huge CD trays slowly slide out, and SPIN! LOOK AT THOSE LCD SCREENS! They dance in time with the music, AND EVERYTHING!

Once you get past those five seconds of wonder, what you are left with is an impenetrable wall of buttons that all look the same. There is vague labelling and no visual affordance. When you do finally locate the right button, you discover they are the type you press three times with heightening levels of frustration before the switch actually activates anything.

The CD tray is great the first few times, then you realise that every time you want to change a CD you are left waiting 10 seconds as it goes through the dramatic presentation phase before you can even take a CD out … then it does it all in reverse to get the new one back in.

The interactions that matter are such a mess that you quickly begin to resent the whole thing. The focus of the design has been on the wrong elements, the core user experience has gone out of the window in favour of a wall of flashing lights. It’s the opposite of the Braun, Dieter Rams approach.

So what am I getting at?

No amount of animation is going to revolutionise the way online news is digested. Sliding, sticky, gooey, easing, physics based animations are not going to suddenly deliver you thousands of pageviews.

When it comes to designing anything, the most important thing to focus on are the core goals and problems that you and your users face.

After the content itself, speed and efficiency of delivery are the things proven to be the most important for users. That is why systems like Google AMP and Facebook’s Instant Articles exist. It’s difficult to see where animations that actively slow down access to stories are therefore beneficial.

This is not to say that interaction animations are all bad in themselves. Used appropriately they can be things that elevate normal, benign elements into something more lovely and memorable – but they need to be in the right place, at the right time, for the right amount and for the right reason. Like the sturdy, accurate, well-engineered touch points on a hi-fi by Braun, rather than the dancing flashing lights of Aiwa.

Dieter Rams’ 10 commandments may have become a cliché, but they still hold true. There is a reason why you find the designs of Braun and Dieter Rams in museums around the world 60-70 years after they were released. Conversely, there is a reason why I have found it almost impossible to find even half decent photographs of Aiwa systems just a decade or so since they were popular.

Takeaways

• Content – and quick access to that content – are the important design features.
• Focus on key touchpoints, add unobtrusive ‘delight’ to the components that matter.
• Animations can be very effective, but moderation is the key.
• Too much animation will negatively impact user experience.
• Just because you can, doesn’t mean you should.
• Just because X is doing it, it doesn’t mean you should.
• Beware of fashions and trends, especially if you have long term ambitions.