Animation & User Experience

Our little take on how to improve the experience of a Sign In/Up process for an iOS Application.

A userflow for logging into the application, with error and success animations.

Recently we have been in charge of designing a userflow for a login, sign up, sign up with social media flow for an iOS Application. It seemed pretty easy at the outset, and as we started discussing with our client we agreed that one way to spice up and lead our users down the correct path while doing a simple thing like logining in, was to add subtle, coherant animations for error + success responses for the user.

Users need feedback, they need to be reassured that what they are doing is correct or incorrect. They need to be assured they are going down the right path, in order to accomplish what they expected and wanted to accomplish. Sometimes a user is doing more than one thing, and logging into an account on such and such application might not be what is holding their complete attention at that moment.

So, when designing necessary processes for users, it is important to look at every little detail, the little things that no one realizes, but if they are not there, no one will ever use your service. We want for a user filling out the form submission to know exactly where they are and what they need to do, no matter where they are in the process of submitting. Some of the form functions that we had to account for are below.

Animation for a user who tries to login but is registered with a third party.

Error methods for Signing Up, Logging In, Login w/Social Media:

1. Invalid Email
2. Invalid Username
3. Email Registered with Third Party
4. Email already registered.
5. Username Not Available

With each of these use cases we provided a coherant set of animations along with the elements that go along with them in order to make a user flow right through the process. You want to make sure the User knows two things; what happened and what do they need to do next. After going over and over some of Google’s Material Design Guidelines , we wanted to keep in line with some of their well thought out philosophy for animations, in order to help these principles present.

We found that the ever popular “head shake” action for invalid responses was a good step to take for errors. And then we wanted a smooth transition from an invalid state to a valid state as well, so we added a small slide/ fade in action to those elements.

One nuiance we did here, was that we didn’t put the “valid response” in the same space that we put the invalid response. We wanted to make it very clear that there was a change of state, during the last action, and this helps draw the attention of those who struggle with color blindness. As the red/green states of invalid/valid responses don’t matter to them, and so lose their effectiveness.

In conclusion of this topic, we found great inspiration in Stripes check out flow, along with the Google guidelines. All in all this was a fun project to work on, and something we wish more designers would take into consideration when designing boring or tedious elements of the user interface.

Animation doesn’t have to be Flash |

If you are old school enough, and you are just getting into the new technologies of how animation can increase the user exeperience, instead of being a heavy burden ,at first you might go overboard. I want to encourage you to tone down everything, think of natural actions that we use in the real world. Then take those actions and apply them to a 2d space, where you can improve the interaction of your users with your interface.

For beginners, you should take a look at Apple’s iOS guidelines for interaction , and look at the link above for Google’s Material Guidelines. So when going forward, be sure to think of the smallest most natural type of animation or transition to implement in order to set a hierarchy for your users to see and experience.

Regards,

KDM