CodeNewbie Community 🌱

Irakli Tchigladze
Irakli Tchigladze

Posted on

UI tips to capture users' attention

It is no secret that we live in an era of information. People often like to say that any smartphone user now has access to more knowledge than kings had hundreds of years ago. This is true, but there’s a flip side to that coin. I personally believe we are living in an age where users are bombarded with too much information and content in general.

Users’ attention has become the most valuable resource, with millions of online businesses competing to get it. Therefore it’s extremely important, now more than ever, for web applications to have user friendly features to successfully capture users’ attention.

In this article, we will talk about UI features to help users find what they’re looking for, which will increase the retention time and result in more returning visitors.

CSS animations

It is no secret that animations draw people’s attention. People react to movement because this instinct helped us survive in our ancient past. You can use users fondness of movement and animation to divert their attention to a certain part of the page.

As of 2023, web developers can create animations purely in CSS. This is the fastest and most scalable approach.

Bold and Large Text

Needless to say, we can also make certain texts bold, so users will read them, even if they won’t read the full text. We can also highlight certain quotes and make them bigger. Users love short snippets of important information.

Use infographics

Once again, humans love images and prefer visual comprehension over reading. If you have important marketing information, put it in an infographic. You can use that visual in blog posts as well as promote your message on social media.

Tell Stories

We humans are wired to follow a narrative. So if you’re trying to sell something, or trying to convince users, you need to tell a story. Otherwise you won’t have their ears.

Try to incorporate emotions as well. Oftentimes businesses offer products and services that aren’t very different from one another. Someone else could also make excellent phones like Apple, but the emotional connection people have with their brand is hard to replicate. Always try to establish emotional connection with your readers.

Implement dynamic features to help them find what they need

A table of contents is a good start, but there’s more you can do to help users find what they need.

Content is growing every year, and at this point users are overwhelmed with sheer volumes of text, video, audio, and images online. If they come to your website to find a specific bits of information, try to help them find it right away. This might mean that they spend less time on your website, but you’ll more than make up for it by helping them get what they want right away.

For example, you can implement features like scroll to bottom, if the needed information is on the bottom of the page. Or immediately scroll to specific information, so users don’t have to.

Sometimes you need to hide full texts and only show small description. So users can click on the card or blog title to expand and see the full content. In this case, expand/collapse feature is what you need. Here's a tutorial that shows how to implement expand/collapse feature in React.

Top comments (0)