Four UX Design Techniques to Encourage User Engagement

Encouraging users to stay on and use a website doesn’t always involve slimmer code or prettier graphics. Some of the simplest layouts like Reddit still keep users engrossed with the content, and thrilled to interact with the site.

The secret lies in user experience and the consideration of how a website functions. Interactions stem from page elements and action flows that move from one page to the next.

In this post I’ll take a look at some UX design techniques that can be applied to improve user experience & increase user engagement. Note that these are not always applicable to every website and it’s more important to understand why these techniques work so you can use your own judgement.

reddit homepage design

The subject of user experience is vast and requires patience to fully understand. But the more you practice the more you’ll understand

The best thing you can do is play around on websites you like and figure out what you like about them. From your experiences you can extrapolate consistent ideas and figure out what keeps you (and perhaps others) engaged on a website.

1. Use Contrast to Draw Attention

Every site is built with a handful of elements made for user interaction. Hyperlinks, buttons, input fields, sidebar widgets, the list goes on and on. But not all elements should be created equal. Some are naturally more important to visitor engagement and should be designed with higher contrast to stand out from other elements on the page.

This idea stems from high color contrast and the way humans process visual data in patterns. When something stands out from its surroundings whether by color, size, shape, or whitespace, it can appear more important based on context.

Use contrast to draw attention towards certain page elements that engage visitors into a particular task. If your goal is to build more newsletter signups then your subscription box might have a bright animated signup button or a unique vector icon.

smashing magazine newsletter signup

The goal is to capture attention by building an interface that lures visitors into performing some desired action(s).

If you have the time it might be worth running a few A/B case studies to see which colors/elements play best together. Statistics are difficult to pinpoint but you’ll be surprised how much can be learned from a simple split test.

2. Tasteful UI/UX Animation

I recently stumbled onto a post entitled What Does Disney Know About Interface Animation. It covers the vital points of animation and how these play to the psyche of users interacting with a flat 2D screen.

Different types of animations can imply certain behaviors. For example, when hovering over a button it might bounce up to show that it’s clickable. Error messages often shake to draw attention from the user.

button animation states

Remember that UX animation should be visible yet subtle. Wild over-the-top animations are more for TV and movies rather than interfaces.

But that doesn’t mean your interfaces should remain flat. In fact most users would rather have some type of animation because it gives the illusion of a smoother experience. Digital design is partially about creating an illusory interface, but the more realistic it appears, the more your users will want to interact.

3. Responsive Design as a Requirement

It’s fair to say a good portion of Internet users browse from their mobile phones. Links that get shared to social sites like Facebook and Twitter are often visited right on smartphones and tablet devices.

This means every website should be optimized for mobile in some manner – preferably with a completely responsive design.

When you’re forced to consider screen size, it places critical features in a whole new light. As a designer you need to choose which features are most important and how they should appear on smaller screens. This responsive design strategy takes time to learn but the best way is to study other websites and pick up techniques that you like.

animated responsive layout

The truth is responsive design works and it’s becoming more accepted by the design community with each passing year.

Users are also expecting websites to be fully responsive so they’ll cater to any device screen. When a site doesn’t fit nicely into a mobile web browser it can be off-putting to the user experience.

4. Simplify the Interaction Process

Smashing Magazine recently published one of the best posts I’ve read in support of simplification for interface design. It states that nobody wants to jump through hoops to use your website or application. People are only interested in the end result, and the quickest means to get there.

I like to build UX flowcharts for each interactive page element whenever I’m sketching wireframes. These help to visually conceive how the site should look and function.

But in truth it doesn’t matter how you plan out the experience. Just be sure that you’re planning the quickest and simplest experience possible. When it comes to encouraging activity you’ll want the important stuff to be implied by the design.

If someone lands on your webapp and doesn’t understand how to signup right away, that’s a huge problem. It should be blatantly obvious to the user what your site does and how they can be apart of it.

The best place to start is by researching UX design and the process of how users interact with an interface. From there you’ll be able to draw conclusions relevant to your own projects and ideally simplify your interfaces to their greatest potential.

For related reading on the topic of user activity, check out these posts:

Wrap-Up

There is no single answer on how to design (or fix) websites to enhance usability. Yes there are some things you can try but each site is a little different and the study of UX design is very complicated.

I hope this article can get you started thinking about some common techniques for building highly usable interfaces. The best thing you can do is place yourself in the shoes of a typical user and try to determine the major flaws of an interface. And once you recognize a problem you’re already halfway to the solution!

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail