The User Experience (UX) Of User Interface (UI) Transitions
Posted October 1, 2013 at 10:01 AM by Ben Nadel
There's no doubt that transitions and animations are a powerful part of the User Experience (UX) designer's toolset. The right transition, at the right speed, can create a natural, organic interaction that leaves the user feeling very comfortable with your application's interface. Of course, not all transitions are positive - we've all seen the travesty that is the "animated drop-down menu." But, whether you love a transition, or you hate a transition, we must remember one truly critical fact: Transitions do not solve business problems.
We User Experience (UX) designers like to make things beautiful. And, often times, a very usable interface is also a very beautiful one. But, our primary job is to help businesses solve problems. Whether that means higher conversion rates or simply making employees more effective, the concerns of the business must always remain our primary motivators - our guiding lights.
For the first decade of web development, this was a de facto truth. After all, we didn't really have transitions to work with - we had the standard request/response lifecycle. But, with the advent of AJAX, jQuery, MooTools, YUI, CSS3, and single-page applications (SPAs), the landscape of web development has changed considerably. Fortunately, most of us are learning to leverage these technologies to our client's benefit.
The new "Mobile" age, however, concerns me. Developing for Mobile is a paradigm shift; one so large, in fact, that I'm afraid we may lose sight of what's most important: solving business problems. Now, I'm not saying that we can't successfully adapt to the new medium; but, I am very cautious when I hear my fellow User Experience designers say things like:
With mobile apps, transitions are so important that [Tool XYZ] is critical - it's the only one that can do sophisticated transitions with minimal effort.
Transitions are powerful. And an application with appropriate transitions can be more effective than one without transitions. That said, I don't think that transitions should ever be heralded as critical for the success of an application; if they are, I think it may be a red flag that we need to step back and simply double-check our priorities.
As a User Experience designer, I solve business problems, for my clients, by finding the signal in the noise. I hold the belief that Low-Fidelity is the new High-Fidelity. And, I just hope that as I move into the new Mobile age, I will be able to keep my priorities straight; yet, at the same time, keep my mind open and ready to evolve.
- Wanted: Full-Time ColdFusion Developer at Intoria Internet Architects
- Cold Fusion Senior Developer at Edge Information Management
- Back-End Web Developer-Information Technologist at Michigan State University
- ColdFusion Developer at Nonfat Media
- Mid-to-Senior Level Web Application Developer at SiteVision, Inc.
@Ben - Great post and very fitting to what I've been working on recently. Keep 'em coming! Thanks!
A UX professional knows that no amount of beautification should come at the risk of alientation. Design is a series of guidelines, and not rules, because no 2 people are perfectly alike. There are time tested and honored guidelines which help us make wide sweeping positive changes, but the more we narrow our focus into core areas of design, the chance are that 1 step forward could be two steps back for someone else.
Ben, you sound as if you already understand the solution. The tips and tricks we, as developers, have, are a means to an end. As the saying goes, "Content is King". People come to your web application seeking information or a service. As such, it is not important that we prioritize animations and other fluff (sure, they can assist us to our goal, but they should not be the priority). Instead, as you have stated, the user is whom we should be focused on. What we do with our site should be COMPLETELY based on the user, their needs, their desires. When we cater to that, and not to our own personal whims, then our applications become more inherently solution-oriented because they are designed to solve the problems our users are having.
One thing we need to do is to stop jumping on bandwagons; our field moves fast enough as it is. Are transitions important? Heck yeah. But to add it for the sake of fashion is a mistake of the developer; we are, again, catering to a fad, rather than analyzing whether that solution is the right fit for the problem. Much of this problem can be addressed if we look at the situation from this unique perspective. When you put yourself in the shoes of your customer, you begin to see what's important in the features and functionality of your site.
Well put. Devs, keep your eyes on the prize!
Thanks my man!
Yo, it is a tough journey. Things are moving so fast in both development and in design. It's exciting and exhausting trying to keep up with things. I am enjoying the new trend towards "flat design." But, I do all my UX in grayscale; so flat design is much closer to my area of comfort!
That said, I do think that flat design is freeing people up of the trim and the polish a bit, allowing them to concentrate, as you say, on the user and the user's needs and letting that be the main driving force.
Da Vinci state one of my most favorite sayings. He said:
"Simplicty is the ultimate sophistication." And, funny as it sounds, as simple as the flat style looks, it is currently the pinnacle of design elements. Funny how as we move towards modern design, we get a more clear picture of what matters. The UX.
That reminds me of the Mark Twain quote, "I didn't have time to write a short letter, so I wrote a long one instead." Creating simplicity is definitely a difficult task - learning what you can remove and what you must keep, it's a fun and often incredibly frustrating task.
Great it's very good