Transition Animations Matter

Transitions used in some popular apps have lately started to rub me the wrong way. To me it looks like we, as the Android community, have stopped paying close attention to the small and quick animations we use when moving from one application state to another.

In this post I’m using Twitter as the example of bad transition animations but this same applies to many other apps in the Play Store.

Some might claim that I’m nitpicking (again.. I’m known to do that). But this time I don’t think so.

The transition between your app’s states (activity transitions / fragment transitions) are there to communicate to the user what is happening.

Especially on Android with our somewhat wonky back button behaviour, keeping user from guessing what happens is extremely important. The Android back button behaviour is already a mystery in many cases.

When a user taps a button, link, icon, image etc on your app’s UI something usually happens. One of the most common situations is that the user moves from an overview screen deeper into your app’s information architecture opening a details screen. In this case, in technical terms, the previous screen is added to the backstack and a new screen is show. Android users have learned to navigate in the app by pressing the Android back button or hitting the once-so-named up button on top left of most app UI’s. This back-hitting behaviour has become hard wired to most users. Our common, platform provided, transition animation enforces this behaviour and makes users feel safe.

Now, on Android we use back to navigate back to the previous screen. But this is unique to us. iOS users have another way provided to them. Swipe-to-back.

The iOS behaviour is also the reason for iOS standard transition animation being different from the Android one. On iOS we mostly see the new screen sliding on top of the previous screen enforcing the mental model of screens being cards on top of each others and therefore swiping them away fits perfectly to what experienced iOS users expect.

In recent years we’re slowly moving away from this screen-screen-screen-screen design on Android. We are starting to create apps with expanding detail sections and common components moving between different levels of the app hierarchy. Technical tools for doing this have been there and even the market penetration of the 5.0+ Android version (required for much of the more advanced stuff) is high enough that taking advantage of this makes sense in ALL apps.

Twitter has not really been a forerunner of Android design in the past but since hiring some serious Android talent (now already departed with the company) the Android twitter client took some big steps towards being in the definitely-OK category of Android app.

All the above is why seeing what Twitter is doing on their Android app surprises me. A lot.

Let’s look at the activity transition Twitter has implemented in their current (as of Sept. 2017) app.

I would not blame any user who tries to swipe back (and fail) when using this app.

Let’s take a look at the corresponding iOS screen.

And there we have it. Twitter has forced their Android team to copy the iOS transitions for reason way beyond me.

Transitions matter! Look for example the Google Play Store. Selecting an app in the store clearly shows the user which app was selected and that they move to a details screen. No swiping back is implied or available.

Here’s another example: Google Photos. Tapping an image takes you to that image’s details in full screen. The image zooms out and there cannot be any misconception what is happening. Most Android users will simply hit the OS back button to get back to the list of images.

BUT, that is not all. As we’re zooming to the image some users might associate this with another common gesture in the OS. Zooming.

Not to worry. Google has taken this into account. If you, as a user, try to pinch to zoom out from the image you get exactly what you would expect. The image becomes smaller and you end up into the image list.

Props to the Google’s UX team here. This makes sense!

In a recent tweet Yasmine Evjen mentioned transition defined in the material design guidelines for the relatively new bottom navigation bar. Her beef was with apps that show a sliding animation when transitioning between the top-level screens in a bottom-nav app.

As Yasmine rightly pointed out. Sliding transition is wrong. But why is it wrong?

The reason is same as all the above in this post. It communicates wrong interaction to the Android users.

On Android we swipe between tabs but not between bottom nav screens (strictly speaking these are not tabs..). Keeping the sliding animation reserved for tabs that are swipeable helps our users understand these often-hidden gestures and we slowly transition our beginner user into the experienced-users category. (for devs: in other words: when using bottom nav do not use a viewpager.)

I leave you with this: think about your transitions. Use platform defaults if there is no reason to replace them.