{"id":27997,"date":"2016-09-15T21:11:08","date_gmt":"2016-09-15T13:11:08","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27997"},"modified":"2017-11-23T18:10:18","modified_gmt":"2017-11-23T10:10:18","slug":"designing-focused-interfaces-for-attention","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designing-focused-interfaces-for-attention\/","title":{"rendered":"Designing Focused Interfaces for Better User Engagement"},"content":{"rendered":"

User engagement<\/strong> is a tricky metric that can be achieved in different ways for different projects. Most designers think of the interface<\/strong> when they talk about interactivity, but page content<\/strong> can also encourage user interaction. For better user engagement, it\u2019s important to write engaging content<\/strong>, and present that content in a catchy design<\/strong>.<\/p>\n

It\u2019s much easier said than done, but if you learn some fundamentals you\u2019ll have no problem crafting a focused UI with great content<\/strong> for your projects.<\/p>\n

In this post, I\u2019ll show you how to increase user interaction & content engagement<\/strong> on web-based interfaces. These are the two most common ways to engage a visitor, and if you can optimize the experience<\/strong> you\u2019ll have no problem increasing that lucrative time on page metric.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tIntuitive UI & How it Can Help Improve UX<\/a>\n\t\t\t\t<\/p>\n

Capture Novelty<\/h2>\n

The concept of novelty<\/strong> defines an event or thing that\u2019s generally new, often very new and unique based on context. Novel events<\/strong> catch our attention because they stand out<\/strong>. This is also true of interface design with novelty representing elements that seem to jump off the page<\/strong>.<\/p>\n

I recently found a great post<\/a> discussing the importance of novelty when it comes to engagement. Users seem to gravitate towards novel experiences, interfaces, and UI elements<\/strong> because they\u2019re different. The sole fact of being designed differently often draws attention.<\/p>\n

One common example is the call to action button<\/a> found on most landing pages. You can also build novelty with background photos, illustrations, or app screenshots<\/strong>, such as on the Uber for Business landing page.<\/p>\n

\"Uber<\/figure>\n

This page does have a call to action button but my attention immediately goes to the screenshots<\/strong>. They animate when first loaded so this combines novelty of design with motion<\/strong> to grab attention.<\/p>\n

An alternative would be GiftRocket<\/a> using illustrated icons as links<\/strong> to delve further into the site.<\/p>\n

\"Giftrocket<\/a><\/figure>\n

Both of these examples use novelty to their advantage<\/strong>. You can\u2019t always draw people further into the site, but you will see better results if you catch their attention on a visceral level<\/strong> first.<\/p>\n

The design is the first thing<\/strong> visitors see, and you need to catch their attention within seconds<\/strong> to encourage further engagement.<\/p>\n

Skimmable Typography<\/h2>\n

Studies have found that most users scan a webpage<\/a><\/strong> rather than read it word for word. You\u2019ll probably want to draw people into reading your content, but you can only do so much.<\/p>\n

The best alternative is to create skimmable content<\/strong> with headlines, bolded text, and pictures that illustrate what you\u2019re trying to say. I can think of at least three powerful writing techniques<\/strong> you can employ in your content to increase readability<\/strong>:<\/p>\n

    \n
  1. Divide content<\/strong> with clear subtitles<\/li>\n
  2. Break up paragraphs<\/strong> to make them smaller<\/li>\n
  3. Use bulleted lists<\/strong> to share your points quicker<\/li>\n<\/ol>\n

    The goal is to keep your readers moving down the page<\/strong> by whatever means necessary. By keeping content small in bite-sized chunks<\/strong> you\u2019ll have a much easier time capturing attention and driving people further into the site.<\/p>\n

    Check out the Quick Sprout blog<\/a> 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<\/strong> into 1-3 sentences each.<\/p>\n

    \"Quick<\/a><\/figure>\n

    If you have proper headlines<\/strong>, and use images\/bullet points<\/strong> throughout the content you\u2019ll get people skimming and reading a lot further. Also be sure to increase the amount of whitespace<\/strong> between paragraphs. Margins and paddings<\/strong> both play a huge role in layout design & readability.<\/p>\n

    Design text so that it\u2019s actually fun to read<\/strong>. Boring copy won\u2019t entice, but neither will fun copy that\u2019s too small or lacking contrast.<\/p>\n

    Eye-Catching Images<\/h2>\n

    A recent case study<\/a> by Backlinko suggests that pages with at least one image<\/strong> generally rank higher<\/strong> than pages with no images. This is great from an SEO perspective.<\/p>\n

    But what about user engagement? If you can keep that one image above the fold<\/strong> or close to the top<\/strong> it\u2019ll also capture attention of visitors before they bounce. Remember that novel page elements tend to attract.<\/p>\n

    When you have an image (or many images) interspersed throughout the page you\u2019ll break up the monotony<\/strong> of boring text blocks. Users can take a break from reading<\/strong> 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.<\/p>\n

    A Moz case study<\/a> found that high-quality images tend to keep visitors<\/strong> on the page for much longer. On the other hand, poor-quality images don\u2019t work as well<\/strong> and in some cases they caused visitors to bounce quicker<\/strong> than with no images. You should try to include at least one image that\u2019s relevant to the content<\/strong> and that provides value to the reader<\/strong>.<\/p>\n

    TechCrunch does this with featured images in their articles<\/a> where you\u2019ll often find a featured photo above the fold<\/strong>.<\/p>\n

    \"TechCrunch<\/a><\/figure>\n

    WordPress makes addition of featured images easy with the post thumbnail<\/a> 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\u2019s all about<\/strong>, and to increase CTR<\/abbr> for related post widgets that also contain the post thumbnail.<\/p>\n

    Contrasting Page Elements<\/h2>\n

    If you need to bring attention to one particular area on a page then asymmetry<\/strong> is your best friend. Contrast<\/strong> drives a hard wedge between specific areas of a design or certain blocks of content.<\/p>\n

    Visitor\u2019s naturally ravitate towards contrast<\/strong> because it\u2019s different. Large juxtapositions of color, size, or whitespace draw the eye because it breaks the mold of everything else<\/strong> in the layout.<\/p>\n

    My favorite example for contrasting page elements is perhaps the home page of Sketch<\/a>. There\u2019s a lot of contrast found between the two call-to-action buttons<\/strong>, one for downloading a Sketch trial and the other for buying a copy.<\/p>\n

    \"Sketch<\/a><\/figure>\n

    The purchase button uses a full background color much brighter<\/strong> 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<\/span> button solely from visual stimuli<\/strong>.<\/p>\n

    You\u2019ll notice a similar technique<\/strong> on the home page of Optin Monster<\/a>. This header only has one button labeled Get OptinMonster Now<\/span>. It\u2019s a bright green button on a blue background with no other green elements in sight.<\/p>\n

    \"OptinMonster<\/a><\/figure>\n

    The color, size, and shape all draw your attention because it contrasts with everything else<\/strong> in the header. Directly beside the button is a small text link for a video preview. It\u2019s probably a great video and it deserves attention, but not as much as the trial\/signup CTA button.<\/p>\n

    For a blog, you might have different qualifications for user engagement. One common choice is a newsletter signup form<\/strong> such as the example on Aeolidia<\/a>.<\/p>\n

    \"Aeolidia<\/a><\/figure>\n

    If you scroll down to the bottom of the content you\u2019ll notice a fancy-shmancy signup box<\/strong> 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<\/strong>.<\/p>\n

    The best way to design with contrast is to study examples and just experiment. See what works and what doesn\u2019t by tracking metrics with A\/B testing<\/a><\/strong>. If you\u2019re looking for more examples check out this Codrops writeup<\/a> full of tips and screens of live asymmetrical websites.<\/p>\n

    Encourage User Interaction<\/h2>\n

    There are so many ways to keep visitors interested in a site, but the most common is to get them doing stuff<\/strong>. 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<\/strong>.<\/p>\n

    In a static site<\/strong>, you might add lots of related links<\/strong> for reading more, or include image slideshows<\/strong>. You can also add forms<\/strong> for user comments or an email newsletter.<\/p>\n

    Recommended Reading:<\/strong> 4 Form Design UX Tips You Should Know (With Examples)<\/a><\/p>\n

    When it comes to dynamic interfaces<\/strong>, the purpose of the site is usually to encourage user engagement. The biggest hurdle is teaching users<\/strong> how the site works, and how to properly engage with the interface.<\/p>\n

    Check out this post<\/a> by KissMetrics talking about user engagement techniques. One of the best strategies I\u2019ve found is to design a guided tour<\/a><\/strong> which leads visitors through each of the primary features<\/strong>.<\/p>\n

    Think about how confusing the prospect of Twitter would be to a brand new user. If they don\u2019t follow anyone and don\u2019t have any followers, why would they tweet?<\/p>\n

    The \u201cFollow suggestions\u201d box during signup helps new users get acquainted with how Twitter works<\/strong>. This feature primes new users to start engaging<\/strong> with the platform, and to experiment with features<\/strong> such as follows, tweets, and private messages.<\/p>\n

    \"Who<\/figure>\n

    Aside from a guided tour you\u2019ll also want to make the interface straightforward<\/strong>. Prime features should be 1-2 clicks away<\/strong> from the user\u2019s dashboard or main page. Intuitive interfaces need explanation<\/strong>, and simplicity captures attention<\/strong> much quicker.<\/p>\n

    By understanding all of these techniques, you\u2019ll have an easier time building interfaces that solve users\u2019 problems<\/strong>, and encourage new users to join<\/strong>. If you\u2019re looking for more UX design engagement tips<\/strong> check out these related posts:<\/p>\n