Slow UIs are a UX nightmare
Slowly animated accordions, colour attention grabbers, fading popups, expanding lists, complex slideshows, bouncing widgets, the list goes on and on. Our interfaces are slowly screaming at us and driving us nuts.
When developers discovered the pretty animation effects that JavaScript libraries can produce, we ended up inserting them into our UIs, whether it made sense or not. We’ve become very accustomed to them, yet very few people seem to be questioning their use. And some of the use is worth questioning.
I know from user testing that unresponsive interfaces are frustrating. You might have a superb application and engaging content, but if the interface gets in the way, nobody will know—they will simply stop using it.
Since jQuery, Scriptaculous, MooTools et al became popular, more and more websites are using fancy effects to slide things in and out or bounce them around the screen. Most of the time the effect adds little to the user experience. In fact, it often makes things worse because it slows down the response between your action and its effect.
Experienced designers use animation judiciously. Whether it’s to bring attention to parts of the screen that require your input, or simply to add a little panache, subtle and understated snappy animation can be a nice addition. The problem arises when designers start to add animation to elements that simply don’t need it.
Take the NAVT Navigation Plugin for WordPress, for example. This is a cool little plugin that allows you complete flexibility in building a navigation system out of your WordPress pages and posts. I used a version about six months ago and it was great: snappy and responsive. But the latest version has slides and fades that increase significantly the time it takes to do anything. It’s not only frustrating, it makes the plugin almost unusable.
I’m sure the author did not intend this frustration and is just following the trend. But eye candy is a heavy price to pay for good performance, so I was hoping for a way of turning these effects off. No such luck, it’s all hard-coded. If I don’t want them, I’ll have to get my hands dirty in the code.
I know that such effects are now an expected part of modern web design. Like all fashion, it feeds itself and clients want their new website to “do all that fancy stuff” so that it looks “cool” and “trendy”. I feel differently and am reminded of KISS.
How do we ensure we don’t fall into the trap of unnecessary, frustrating effects? It’s simple: one only needs to ask “What benefit does the user get from this effect?” If the answer is ‘none’, then don’t do it. Easy.
Go forth and simplify.