0

In the design workflow, when would be an appropriate time to think about ui animations? It seems to me many of the times animation is a nice to have feature. How do you make a decision that something really needs animation while some other stuff should still stay the minimal?

  • Would animation improve the experience here? If so, then consider animation. – DA01 Dec 17 '14 at 23:37
2

The old - attention grabber

Of all low-level visual 'features' (colour, size, etc.) that our brain processes, motion (ie, animation) is the most attention grabbing one.

See this quote from chapter 2 (What we can easily see) of Visual Thinking for Design, Ware 2008:

The web designer now has the ability to create web pages that crawl, jiggle, and flash. Unsurprisingly, because it is difficult for people to suppress the orienting response to motion, this has provoked a strong aversion among users to the web sites where these effects flourish. The gratuitous use of motion is one of the worst forms of visual pollution, but carefully applied motion can be a useful technique.

So animation is a tool in your design arsenal, which works best if used wisely and sparingly.

To give one example, to draw people's attention to a 'Try it for free' button, introduce it slightly later after the page has loaded using animation.

The new - as a 'fluid' design tool

Having said that, animations can be used in far more intricate ways to enhance the 'feel' of the interface.

One has to remember that web animation technology is just coming out of the trenches - it is a relatively new tool, which is likely to become more integral to web design and its trends.

In the same way humans tend to prefer smooth over sharp geometries (eg, straight vs round corners), the binary nature of visuals (either shown or not) should not be considered ideal. You see more and more animations on text, focus borders etc.

In their Material Design Guide, Google has shared a highly conceptual take on animations. From it:

Observing an object’s motion tells us whether it is light or heavy, flexible or rigid, small or large. Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.

So I hope this another way in which animations can be used, but unlike with attention grabbing, there is a bit of theoretical and conceptual ground to cover before can make educated decisions. The guide above is highly conceptual, but still a good place to start.

1

Three reasons:

  1. New information comes onto the page.
  2. Information leaves the page
  3. Something on the page reacts to the user

Whenever one of these three things happens on a page, that's a good time to consider adding an animation to demonstrate What Is Happening/Going to Happen/Has Happened.

0

I like to use animation to communicate where things are located. For example on page load show the navigation open but then animate the minimize feature so the user knows where to find the nav when they need it.

  • Hello @user48140, welcome to SE.UX. Personal preference in answers is helpful, but research and experience based knowledge. To better answer the question, show why it is better to use animation in specific locations, and not just where you like to use them. How does animation affect the user and why do you choose to use animation based on that knowledge? – Evil Closet Monkey Dec 18 '14 at 0:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.