mobile UX — animation 🐎

„Animation is not about making your app cool. It’s about providing your users with the experience they expect.“ – Nick Babich

image

The first topic of my 7 parts blogpost series is animation. There are several purposes of animation in apps.

1 show status

It is helpful for the user to see the current status of what’s happening in the app. Examples include showing a „loading indicator“, a „pull to refresh“ animation or an animation that indicates a problem.

2 navigation and transitions

Animated transitions explain changes in the screen and provide valuable context. When a button changes its function (e.g. a play button turning into a pause button or the change in the example below) it can be helpful to animate this transition so that the user understands why there is a change. You can also use them to show the visual hierarchy between objects. This example (source) shows several transitions where the state changes:

image

3 visual feedback

This might be the most important animation because a lack of visual feedback can be really confusing. First of all, we want to make controls appear tangible and when they are tapped we need to provide a visual feedback to reassure the user that tapping it actually worked and then visualize the results of the action.

This GIF (source: Material Design) shows buttons responding to a user’s tap: 

image

via Tumblr http://ift.tt/2CDo2cL