Dev it all

I know I mentioned magic as a possible topic for some posts. This is not one of them. It’s still pretty cool though.

No one needs telling why we love the little things in life. The tiny things that make us chuckle or feel a child-like sense of playfulness.

The giddy bubble of excitement you get when you see a dog do a stretch or when a video game character after so long of standing still yawns and does the same.

The latter especially has no real purpose. It’s added in to create a little crack in the fourth wall that almost makes you feel like the world is aware of you and your absence in this case. The same can be done for web applications. Just not quite like that.

Micro animations are an almost unnoticed but key part of a successful experience on the web.

Imagine you’re scrolling through a shopping site and you see all the “Add to basket” buttons just sitting there all ready to be clicked. If you hovered over it and got nothing in terms of feedback, you may just proceed or surf away. To hook someone at this point, you’d make the colour of the button change. You’d maybe make the icon for the basket wiggle a little, or even transform it completely in a fluid motion to an arrow.

That tiny bit of feedback will have attracted the eye and drawn that user further into the action of actually buying the thing. You’ve upped your likelihood of a sale and if the buyer is a big ol’ nerd, given them a little bit of delight.

The key thing is balance. If you have this smeared all over your site, for every hover of a link and every button, image, etc without any purpose. You’ve done it wrong.

Use these enhancements to push the point of your application. Give them purpose.

A lot of the time when these additions are ignored, it comes down to purpose. If the idea has no value and no reason then it shouldn’t be added. That’s the correct way to think. This ties into the over-arching idea of over-engineering. Simple is probably going to be better.

However, if the interaction has a purpose. If it can create more conversions or sell more products, then it becomes a necessity. Add it to your more important CTAs, cart buttons, even in your checkout process. If it can take away some of the drear from the required and drab parts of your app then that’s awesome.

The obvious examples with this are to apply it to buttons and the likes. Some other ideas could be:

• When loading different pages. If you’ve got a lot of dynamic data that needs to be loaded. Multiple sequential API calls or something that can’t be changed. Why not fade the page in, in reality, this will add time to the user viewing the page, but it’s such a smooth and graceful operation that it will also detract from the fact that content is still loading.
• Lazy loading of images is another good one. You can lazy load your images, in the sense of having a fallback while the content is coming in. This will then flash in and jar the user. How about we fade that content in, or have multiple stages of change to make it seem smoother? Get it done!

This post is a bit more of a ramble, I’ve come down with covid and it’s showing how terrible a writer I am. The point is still there though (somewhere).

Small interactions to create delight are an absolute requirement for a successful web app, as long as they have purpose.

Oh, there it is. Nice.