Designing Focused Interfaces for Better User Engagement
User engagement is a tricky metric that can be achieved in different ways for different projects. Most designers think of the interface when they talk about interactivity, but page content can also encourage user interaction. For better user engagement, it’s important to write engaging content, and present that content in a catchy design.
It’s much easier said than done, but if you learn some fundamentals you’ll have no problem crafting a focused UI with great content for your projects.
In this post, I’ll show you how to increase user interaction & content engagement on web-based interfaces. These are the two most common ways to engage a visitor, and if you can optimize the experience you’ll have no problem increasing that lucrative time on page metric.
Read Also: Intuitive UI & How it Can Help Improve UX
Capture Novelty
The concept of novelty defines an event or thing that’s generally new, often very new and unique based on context. Novel events catch our attention because they stand out. This is also true of interface design with novelty representing elements that seem to jump off the page.
I recently found a great post discussing the importance of novelty when it comes to engagement. Users seem to gravitate towards novel experiences, interfaces, and UI elements because they’re different. The sole fact of being designed differently often draws attention.
One common example is the call to action button found on most landing pages. You can also build novelty with background photos, illustrations, or app screenshots, such as on the Uber for Business landing page.
This page does have a call to action button but my attention immediately goes to the screenshots. They animate when first loaded so this combines novelty of design with motion to grab attention.
An alternative would be GiftRocket using illustrated icons as links to delve further into the site.
Both of these examples use novelty to their advantage. You can’t always draw people further into the site, but you will see better results if you catch their attention on a visceral level first.
The design is the first thing visitors see, and you need to catch their attention within seconds to encourage further engagement.
Skimmable Typography
Studies have found that most users scan a webpage rather than read it word for word. You’ll probably want to draw people into reading your content, but you can only do so much.
The best alternative is to create skimmable content with headlines, bolded text, and pictures that illustrate what you’re trying to say. I can think of at least three powerful writing techniques you can employ in your content to increase readability:
- Divide content with clear subtitles
- Break up paragraphs to make them smaller
- Use bulleted lists to share your points quicker
The goal is to keep your readers moving down the page by whatever means necessary. By keeping content small in bite-sized chunks you’ll have a much easier time capturing attention and driving people further into the site.
Check out the Quick Sprout blog for an example of this writing style. The content is written by Neil Patel and he often writes very longform content, but he breaks down the paragraphs into 1-3 sentences each.
If you have proper headlines, and use images/bullet points throughout the content you’ll get people skimming and reading a lot further. Also be sure to increase the amount of whitespace between paragraphs. Margins and paddings both play a huge role in layout design & readability.
Design text so that it’s actually fun to read. Boring copy won’t entice, but neither will fun copy that’s too small or lacking contrast.
Eye-Catching Images
A recent case study by Backlinko suggests that pages with at least one image generally rank higher than pages with no images. This is great from an SEO perspective.
But what about user engagement? If you can keep that one image above the fold or close to the top it’ll also capture attention of visitors before they bounce. Remember that novel page elements tend to attract.
When you have an image (or many images) interspersed throughout the page you’ll break up the monotony of boring text blocks. Users can take a break from reading to appreciate the image, or make a connection between the image and the written content. But as with most design techniques, quality is more valuable than quantity.
A Moz case study found that high-quality images tend to keep visitors on the page for much longer. On the other hand, poor-quality images don’t work as well and in some cases they caused visitors to bounce quicker than with no images. You should try to include at least one image that’s relevant to the content and that provides value to the reader.
TechCrunch does this with featured images in their articles where you’ll often find a featured photo above the fold.
WordPress makes addition of featured images easy with the post thumbnail feature. You can set a distinct photo for every post you write and force these to appear at the top of the page. This is a perfect way to give visitors a glimpse of what the content’s all about, and to increase CTR for related post widgets that also contain the post thumbnail.
Contrasting Page Elements
If you need to bring attention to one particular area on a page then asymmetry is your best friend. Contrast drives a hard wedge between specific areas of a design or certain blocks of content.
Visitor’s naturally ravitate towards contrast because it’s different. Large juxtapositions of color, size, or whitespace draw the eye because it breaks the mold of everything else in the layout.
My favorite example for contrasting page elements is perhaps the home page of Sketch. There’s a lot of contrast found between the two call-to-action buttons, one for downloading a Sketch trial and the other for buying a copy.
The purchase button uses a full background color much brighter than other colors in the header. The button text is also brighter compared to the free trial button. This leads visitors towards the Buy Now button solely from visual stimuli.
You’ll notice a similar technique on the home page of Optin Monster. This header only has one button labeled Get OptinMonster Now. It’s a bright green button on a blue background with no other green elements in sight.
The color, size, and shape all draw your attention because it contrasts with everything else in the header. Directly beside the button is a small text link for a video preview. It’s probably a great video and it deserves attention, but not as much as the trial/signup CTA button.
For a blog, you might have different qualifications for user engagement. One common choice is a newsletter signup form such as the example on Aeolidia.
If you scroll down to the bottom of the content you’ll notice a fancy-shmancy signup box designed just for the newsletter form. It stands out from the rest of the page with a unique background color, fun typography, and a cute King Triton icon.
The best way to design with contrast is to study examples and just experiment. See what works and what doesn’t by tracking metrics with A/B testing. If you’re looking for more examples check out this Codrops writeup full of tips and screens of live asymmetrical websites.
Encourage User Interaction
There are so many ways to keep visitors interested in a site, but the most common is to get them doing stuff. This is true of both static blogs and dynamic social sites. There are no one-size-fits-all tricks for this. You can do whatever works to make users feel engaged with the page.
In a static site, you might add lots of related links for reading more, or include image slideshows. You can also add forms for user comments or an email newsletter.
Recommended Reading: 4 Form Design UX Tips You Should Know (With Examples)
When it comes to dynamic interfaces, the purpose of the site is usually to encourage user engagement. The biggest hurdle is teaching users how the site works, and how to properly engage with the interface.
Check out this post by KissMetrics talking about user engagement techniques. One of the best strategies I’ve found is to design a guided tour which leads visitors through each of the primary features.
Think about how confusing the prospect of Twitter would be to a brand new user. If they don’t follow anyone and don’t have any followers, why would they tweet?
The “Follow suggestions” box during signup helps new users get acquainted with how Twitter works. This feature primes new users to start engaging with the platform, and to experiment with features such as follows, tweets, and private messages.
Aside from a guided tour you’ll also want to make the interface straightforward. Prime features should be 1-2 clicks away from the user’s dashboard or main page. Intuitive interfaces need explanation, and simplicity captures attention much quicker.
By understanding all of these techniques, you’ll have an easier time building interfaces that solve users’ problems, and encourage new users to join. If you’re looking for more UX design engagement tips check out these related posts:
- A User Onboarding Tactic to Increase Engagement (thinkapps.com)
- A Lesson in Gradual Engagement (uxbooth.com)
- Don’t assume new users want to learn how to use your product (uxdesign.cc)