Playful Interaction Design improves User Experience

Preface

Boredom is the biggest driver of fatigue, which eventually leads to drop off. Even if you just “look boring” on page load, you can be losing opportunities from inflated bounce rate.

The biggest drivers of boredom when using web apps are waiting on things, and doing things. When I’m waiting for your app to load, I’m bored. While I’m setting up my new account, I’m bored.

The most rewarding experience someone can have while using your app is doing nothing at all to engage with more content.

Waiting for things

Loaders are probably the most important opportunity you have to retain someone’s attention and lessen fatigue. Users expect to wait a little bit for certain things - how they wait is up to you.

Your loader should be more than something cool you found on Codepen. It should create a personal connection and have relevance towards your product. There are different types of loaders used in different contexts.

For full page loaders, you want to use something that’s engaging enough to ponder until the app is done rendering. It’s always better to show an interesting full screen loader over an ugly “coming to life” page.

With Slack - A random team members “Quote of the day” will be a loading overlay until the app is done rendering. This loader is engaging, sincere and gives you one of those small moments you like using Slack for.

In a finance app show something interesting that happened recently in the stock market. In a travel app inspire someone with a “place of the day” picture. In a fitness app, give them a random interesting fact about the human body they’ve never heard.

For component loaders, you want to use something that’s quirky and fun to distract users from the lag in server resolutions. These loaders are different than full page loaders because they are inline with the content area that’s “thinking”. They can also be placed in the background of the page as an ambient distraction.

You don’t need to distract someone as heavily like our full page loader but you do want to give them something fun to look at while a server response is pending. You should still theme these out to fit your applications context.

After purchasing stock on a trading platform make it rain in the background until the trade has been complete. While waiting for a payment gateway to finalize your shoe purchase walk some boots across the screen. When search results for a flight are aggregating fly a plane overhead.

Doing Things

People want the most reward for the least amount of effort possible. Try to build your app in a way that exposes core features without a signup requirement. By getting them to try it first, you’re more likely to convert them later.

It’s extremely challenging to convert leads through primary and secondary actions like signup and setup. If your app absolutely requires these actions upfront, you need to convince them it will be worth their time by making the first experience fun, interactive and memorable.

For a job aggregator site, use the aerospace industry to theme your lander. Overlay your signup form inside a spaceship traveling through space with parallax. Theme the sell like “Get a job that’s out of this world”.

For a luxury ride share app, go back to the middle ages. Overlay your signup form inside a castle on top of a mountain in the background scene. Animate a horse and carriage making its way up a long and windy ravine. Theme the sell like “A travel experience fit for a King”.

There’s also fatigue that comes from just using your app daily. Checking items off a list, filling out forms, reading and muting notifications in your inbox. These seemingly simple user actions lead to high fatigue.

We can reduce fatigue with micro interactions and animations. In Asana, when a user finishes a task there is a small chance a unicorn will burst through the corner of the screen celebrating your accomplishment.

If it’s a food delivery app, every time a chicken dish is added - animate one that’s still alive to run across the screen. If it’s a dating app and they swipe left a lot, use funny notifications to poke fun at their high standards.

Conclusion

It’s unreasonable to expect someone to try your app just because your lander is crisp and presentable. There needs to be more upfront reward to earn conversions with new leads. We need to consistently deliver engaging moments so people will want to continue using your app. If there’s two apps with identical features competing for your loyalty, the one that makes you smile more often will win.