Ah the login, such a mundane task. Passwords are necessary, but a pain, always that extra step between you and your secure content. Many companies, from Google to Apple, are trying to kill the password. I look forward to the day they succeed, but until then, why does entering a password have be so boring? Lets bring your login design to life with smart UI motion design, and in turn add some character to your brand.

I’ve rarely seen apps use any interesting for their login animation. Most pop up simple asterisks to show you how many characters you’ve entered, then give a simple text readout if you’ve entered an incorrect password. At most, some apps use the shake animation for an incorrectly entered password. Since the login design is usually the first thing your user interacts with, why not give it some personality?

Character Input

Lets first look at the character input of the login. We can create some memorable animations here by adding life to the asterisks. The bouncy animation will work great for social apps, games, or anything lightweight. The smoother animation may be great if our app is something more secure, like a banking app. This reads precision and security.

Wrong Password

Next up, the wrong password. Quite a few apps use the shake animation when a wrong password is entered. It’s easy to see why because the shake is a fairly universal gesture to communicate the word “no”. Keep in mind that in some cultures, shaking your head left to right means, “yes”. But, because these cultures are in the minority, and this gesture is becoming widespread with digital interfaces, we’ll continue with the trend. Just remember to not presume that a gesture is universal, it may have different meanings in other cultures.

Now things are getting interesting… We can really bring some life to the asterisks by making them respond to the shake itself.

Completion

What about when the user enters the right password? If you were paying attention to last section, I’m sure you can guess the answer – an affirmative nod of the head.

The nod is a missed opportunity in the app world. This simple animation brings a lot of personality to the UI. Even if we don’t want to go with an explicit nod animation, there are plenty of other options. We could use some rotation, or add a little depth. These animations will give a sense of completion, and add a little digital magic to accepting the password.

By stepping up our motion design game, we can add some life to the seemly mundane task of entering a password. It is these simple login animations that will make your iOS app stand out – something that users will remember. Especially for an action a user has to do multiple times a day. If we can make your login design fun, can you imagine where else we can bring some motion design magic?