Published on | Prototyping: From UX to Front End — Medium Michelle Hardi

Imagine attending an average soiree, things are going well but nothing really exciting happens. The venue is decent, food is average, the people are polite, you are neither hating nor enjoying yourself. You walk across the room to talk to your boss, but oh… What’s that? A giant plate of Turkish Delights! Suddenly the night seems better. You smiled as you turned to continue your walk and… Wow! What?! That’s Thor… Chris Hemsworth heading your way.

<a href="https://medium.com/media/4c566a06dcf1e8b9ca6eb6b7472c2a9d/href">https://medium.com/media/4c566a06dcf1e8b9ca6eb6b7472c2a9d/href</a>

I’m talking about adding a little bit of Turkish Delights and Thor into your apps. Sounds cray cray? I say nay nay.

Currently I’ve been working on the UX and UI of a commercial property search app. It may sound a little flat but I can assure you that it’s challenging in every way.

Why am I talking about delights? Well, we know that satisfied users will come back for more, but the impact is even greater when we exceed their expectation.

And there is a low hanging fruit, waiting to be noticed. Animation.

<a href="https://medium.com/media/65b6e44ba9e7b9cb7450d4bf47648491/href">https://medium.com/media/65b6e44ba9e7b9cb7450d4bf47648491/href</a>

Yes animation! From micro interactions to tutorial animations.

A few things to remember:

Keep It Simple
For most micro interaction, we should keep it straight forward, brief and not too distracting. Imagine seeing the same loading bar after 2000x, or when you use the app functionality in a rush and you have to wait for the bounce animation to stop. It’ll get annoying.
Stay Relevant
Like choosing an icon, we want to keep it relevant to context and purpose. For example sake, you may not want to use animated ☠️ for a “Failed to sign in” message in a banking app. Both the bank and users will panic.
Reduce Brain Farts
Like UI pattern, re-use familiar motion which will help reduce cognitive load. A bouncing up and down arrow, suggests that you should tap the item above it for example.
Break It Down
When it’s too long to explain through one animation, break it down to multiple. We want to help and not confuse users even more.

Some Examples

Navigation change ℹ️
Ah, the change from a good old hamburger menu to a refreshing tab bar. To avoid confusion because of the drastic change, we decided to add a ‘What’s New” message to explain to current users what’s up with the new navigation. This is the accompanying animation. It’s a pretty simple shape shifting line animation but it’s clear and concise.

Create Account 🙂
I added this as a delighter and to enforce the purpose of this screen, which is to create an account. In the production implementation, it doesn’t play in a loop.

Email Sent ✉️
This is a status update, a confirmation on email successfully sent. Email to a tick! Easy peasy. In production, this doesn’t play in a loop either.

Loading Animation ⌛️
Here is another example of animation that I use for loading when the app is fetching for items. Now, this one loops!

Loading animation

I found that viewing a loading animation makes the app seems to load faster compared to a blank screen. Also, a custom branded loading animation is more polished compared to using a default spinner.

FYI; We use Lottie by AirBnB to implement these animation in our mobile apps. Animation from After Effects are exported to JSON files using Bodymovin.

Perks: Once you have export it, you can use it for both OS! Talking about re-usable component eh? Second, the animation you produced, is the animation used. No development work needed to recreate the animation. It’s pretty seamless and the team loves it!

Simple delights like these are loved by stakeholders and consumers.
Add a little spring to your app!

Little Delights was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Little Delights

Cool stuff, every week

More Articles