Design practice: How fast the transition animation for expandable panels should be

At some point I had an argument with a developer on how fast the transitional animation should be. In our application, Calypso Navigator, we are using a transition animation to give users a feedback of the expanding/collapsing process, and to explain this task visually by drawing more attention to the change.
This software has three main areas, which are collapsible panels: Main Menu, Favorite Tiles, and Windows Manager, as shown below.

[Expanded All screenshot]


[Collapsed All but Main Menu screenshot]



[Collapsed All but Favorite Tiles screenshot]











On my opinion the animation was too slow, at some cases it took about a second, however in my thinking it had to be instantaneous. The argument of the developer was: if it will be that fast, and the user can’t visually track what is changing and how, then the animation doesn’t make sense at all.


I opened Google page attempting to find what professional world’s opinion on this matter is, and found this guideline:
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511285.aspx

Here is the general thought over the use of the animation:
“Strategic use of animations and transitions can make your program easier to understand, feel smoother, more natural, and of higher quality, and be more engaging. But the gratuitous use of animations and transitions can make your program distracting and even annoying.”

So, further reading verbalized what I was thinking intuitively. The animation doesn’t have to affect the user’s productivity. And the first requirement to the speed of the animation is: it has to be quick, precisely: 200 milliseconds or less .
It’s important that the animation is easily ignorable, and doesn’t distract user’s flow. It’s not annoying, overly complex or overly long. It doesn’t create an additional delay: the user doesn’t have to wait to move to the next action. Good animations are not forcing users to watch. No matter how engaging or natural the animation is, nobody wants to wait for them exclusively.

And since Calypso Navigator is the productivity tool, the following applies to it. While a few special experiences can stand out, most other animations should have these characteristics (in the application with the focus on productivity):
• Small
• Natural, realistic
• Subtle, subdued
• Fast, efficient
• Relaxed

I created a special demo of transition animation (with the fade effect) in Calypso Navigator with the speed of 150 milliseconds, which is optimal by my perception:
http://kardash.net/portfolio/Calypso/animation_prototype/animation_prototype_horizontal.html

What do You think about the transitional animation speed?

Comments

Post a Comment

Popular posts from this blog

Using Trello and Confluence to manage UX design project. Part 2

Image
This is part Two. Part One can be found here . Term definitions. Brainstorming board. Activity board. Let me give you an overview of the items we refer to, deal with, and vetting all days long. Below are my simple definitions. UX Brief – a living document, a single and comprehensive point of reference of the design project. User Story – a short requirement or request from the end user. Later will be converted into task flow performed by this user to reach the goal. Acceptance Criteria – a set of conditions/statements, or a checklist, which defines the user story’s Pass/Fail . Feature – a functional part of the application, which combines several user stories. User stories are written to provide a complete support to this feature in terms of tasks performed by the user, while keeping in mind the user’s goal. Epic – a large logical group of multiple features in complex application. Brainstorm – a collaborative session involving product owners (PMs) and UX designers
Read more

Using Trello and Confluence to manage UX design project. Part 1

Image
This is part One. Part Two is here . Introduction. “ Describe your design process ”. It’s a typical interview question for UX designer position. User-centered design process indeed has defined set of steps. In theory. On the practice though, the adherence to these steps depends on many factors, such as communication and execution skills, practical experience, ability to influence people, being leader and influencer, and at what level your organization is a design driven org. So many businesses are not ready to adopt the design practice, and to place the design before the development. Or simply there is not time or budget to go through all steps. Here in Herbalife the UX Design team accepted Norman Nielsen group philosophy:   Empathize – Define –Ideate – Prototype – Test – Implement .  However the   interpretation of the practical tasks can differ dramatically in different organizations. Here what we currently do: Design Thinking and Agile Any project, which goes t
Read more

Conceptual design

Image
Consider this post is about visual design. A duct taped banana. This piece of art was sold for $150,000 in December 2019 at Miami's Art Basel . Actually $120K x 4 + $150K = $630,000. Not bad for 10 cents banana and few inches of duct tape. This became a sensation of 2019-2020. Why and how it happened brings up some questions about modern society and economy. How artists (or art dealers, or anyone else) create value from nothing? And emphasize the importance of the idea. In this particular case it's nothing more than an idea. Is this the art we'd like to see? Probably not. But perhaps it's the art we deserve.
Read more