Element transition between tabs

Question

I'm building an app that in one of its screens has 2 tabs. In each tab there is a list of elements (cards), and i'm wondering :

1. What type of transition between tabs should i use?
2. Is there a difference between them and how it may affect the usability?

Simple Slide transition or Staggered transition

• The elements on tab-2 are bigger than the elements on tab-1.
• The elements on tab-2 are expandable (on tap they change the height to reveal more details)

More details: Avarage app usage is a few times a week. The ideal user flow is to swipe only once from tab1 to tab2 in a app usage session.

Answer 1

First of all ask why you are using an animation. If it is for an artistic effect then you design it for the effect you need.

Since we are on UX stack exchange it probably fair to say you are looking for a functional animation, i.e. one that aids the users experience.

There is an excellent introduction to this here https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/

I think your animation mainly fits into the 'orientation' category where the aim of the animation is to help orientate your user to with the structure of your content. This is otherwise know as the "where the **** did that come from" or the "where the **** did that go" animation.

So once you know why you want the animation and what goal it is serving you then need to understand a bit about your user. It is highly likely your user does not want to be consciously aware of an animation, unless you want to stress the animation for an effect. E.g. if it is for a game and fits in with the theme then maybe go for an exaggerated effect. If it is for children and you want it to be a bit over the top then you might want to experiment.

If it is for a serious bit of software, but you want it to use animation to add a bit of professional shine to your product, then as a rule of thumb, keep things simple, use a bit of ease in and out, and tune it so that you only just notice it, then half the duration. I know this might sound a bit counter-intuitive. Why bother having an animation you can't detect, but that is the point. Your brain doesn't think in images it thinks in ideas and you can use tricks like this to breath life into designs.

I actually quite like the staggered animation because it is more human like, but it is way too slow and will probably annoy your users after a few uses. I also like the idea that the animation may be used to let the user know they can swipe. I'm not sure how it will tell first time users that you can swipe, maybe add an extra anticipation or visual hint animation at the beginning?

Oh and when it comes to more human like... Disney's The Illusion of life by Frank Thomas and Ollie Johnston (two of 'the old men' of Disney) is the bible for animation. You can learn all sorts of things such as how to portray weight, character, intent etc etc from here. There is a great tumblr page of the 12 principles here http://the12principles.tumblr.com/

And test. (But don't ask users if they like the animations). Test the purpose of them. See if more people understand how to move to from tab to tab because of the animation. See if it makes a difference to how many users stay on your site, what they do there etc.

Answer 2

I think the two main things to consider here:

1) How helpful is the staggered transition compared to the simple?

2) How does the animation affect long-time users vs short-term users?

For number 1, yes, the staggered animation makes it clear what action clicking the tab-button caused. There's also something to say about what kind of design character this staggered effect has, for example, is this a fun app? And do other interaction in the app/page behave like this? Is the animation types similar across the board?

The biggest issue to consider is likely number 1 inline with number 2. For number 2 we have to consider how the app is used. We are often tempted to use clues in our programs that makes things unmistakable to anyone. The staggered effect does this. But what happens when the user already knows what to expect? The long-term user knows where clicking a tab takes her, and she already knows where on the screen she wants to press before the buttons even appear.

The fancy animation with the cool slides suddenly become an artificial hindrance that stops the user from doing what she wants. That's terrible! That might just make the user never open the app again once they discover the annoyance, or maybe make them wish they didn't have to use the app and dream of a competitor.

My judgement is this: If the app expects the user to rarely use it, then staggered is fine. If you want the user to enjoy their return visits, and to use the app again and again, go for the simple one