Ashley Stevens's picture Ashley Stevens

Reduce Distractions for Improved User Experience

Websites exist to be used, not just to be looked at. While the Nielsen Norman Group points out that "users have a positive emotional response to your visual design, and that makes them more tolerant of minor usability issues on your site," a website should still strive to be easy to use and understand.

The idea of intuitive design is to make use of what people already know and are familiar with or create something new that is simple enough for everyone to learn. Cutting through the tangled web of design trends and focusing on using the features that do not pose distractions or frustrations will improve your website's user experience. This way you can ensure that users will be more motivated to interact with the website and return to it in the future.

Understanding Psychology When Designing

Appealing to the emotions of your users can influence them into converting. The imagery, colors, fonts and copy used can all inspire different feelings in the person viewing them.

Images

As stated by Thermopylae Sciences + Technology, "The human brain processes images 60,000 times faster than text, and 90 percent of information transmitted to the brain is visual." Images are the best tools you can utilize to communicate complex subjects. Take advantage of this and include images that show how your product is used or your service is carried out. The best way to accomplish this is by including your photography instead of stock photography, as you will be able to communicate what you do much more transparently and create that connection with your users.

Colors

Colors incite emotion and certain feelings. "By using colors strategically, you can get your audience to see what you want them to see and help them perceive you the way you aim to be perceived," Oberlo. For example, red triggers excitement and makes for a strong call to action color, while blue communicates trust and reliability. Using the wrong colors can confuse and put off users because they will perceive your content in an incorrect way. So when selecting a color palette, keep the various meanings each color has in mind.

Fonts

Fonts affect the perception of content and the brand. As stated by VennGage, "Your font choices may influence your audience's imaginations, moods, and expectations when they view your content." The font-weight, width, spacing, and shape of the letters can all contribute to the font's personality and the emotions it can bring out in the person viewing them. Serif fonts can be seen as traditional, nostalgic, and respectable; sans serif fonts can either be subtle or be used to grab attention; modern fonts are perceived as forward-thinking, innovative and up-to-date; and handwritten fonts can make a brand seem personal, relatable, friendly and approachable. A good approach is to look at other websites in your industry to see what types of fonts are working well or are trending, then make your selections from there.

Visual Effects

Drop shadows, gradients, and two-tone color schemes can make the page more visually pleasing and add realism to the website, making elements on the website feel more natural. However, these features need to be used subtly, in small doses. Overuse can bog down the reader and add unnecessary distractions - slowing down their progress through the page - so adding just the right amount of these elements here and there keeps the content light and allows the user to progress naturally through the website.

Reduce Anxiety and Confusion

It is great to provide users ease of access to any section of the website from each page, but care needs to be taken to limit the number of choices you provide to them at a time so you don't overwhelm them. Provide the best assistance to your users by taking the time to prioritize which links should be included on which page, so that it makes their path through the website easier to choose. Consider the relevancy of the links to the current page and look at the page from your user's shoes to understand what navigation options they would expect to see.

Users want to be able to find the content they are looking for quickly and easily:

  • If pages have sublevels, try to keep the depth of these to three or less
  • Organize content into manageable chunks by using headings and subheadings, and keep paragraphs relatively short to make content easy to scan
  • Conversationally writing your content, and avoiding the use of fluffy or salesy text can help you to address the most important questions and doubts that users have

Do your users have banner-blindness? Don't worry, there's a cure for that

Hero carousels and background videos remain a long-standing, consistent trend among web designers. Unfortunately, due to the overuse and misuse of this space on the webpage, people have been developing banner blindness:

"People's tendency to ignore page elements that they perceive (correctly or incorrectly) to be ads,"
Nielsen Norman Group.

Users will automatically scroll past your large, visually impressive image or video at the top because they're used to that space being used for promotions or unuseful stock photography.

The hero section, like any other element on the website, should serve a purpose. It should not just exist for visual allure. Instead of the space being used to serve random images, it should display portfolio pieces, blog posts, or a video showing your products being put to use. For websites in which imagery would not be as beneficial, focus instead on including an illustration or a smaller static image with valuable content in that section (content that would've otherwise been pushed below the fold by the banner). If it is an eCommerce website, the space should be used to stack featured product blocks.

If you should use a slider, ensure that it doesn't auto-rotate: users may either ignore the space or may fail to absorb the content quick enough.

Avoid the Scroll

Staying away from one-page websites is highly recommended. Mobile users (and many desktop users) do not like scrolling through a ton of unrelated content - they prefer to find what they're looking for quickly and easily. One page websites are impossible to bookmark - a user won't be able to revisit content they liked on the website. They will need to read the whole page again to find the content they want. And of course, search engines will dislike evaluating your webpage as they will not be able to determine the main purpose of it, with all of the varying content it holds.

Infinite scroll should also be avoided. A user (or screen reader) may be trying to get to the footer, and they'll never be able to! The user needs to have control over whether they would like to see more content or not.

Parallax should be used sparingly as it can overwhelm most users, possibly even giving them motion sickness from the movements: "In 2013, Apple released an update to iOS 7 that allowed users to Reduce Motion, because the parallax animations for task switching caused many people to feel symptoms of vertigo, nausea, and dizziness," Nielsen Norman Group. Many users just quickly scroll through website content - scanning for the content and keywords they're looking for - and parallax can pose delays or distract users from this, while also slowing down the overall load time of the website.

 

Push through the tangled web of design trends and focus on the practicality of elements, features, and content on a webpage by following these usability guidelines in your next project. It will ensure that your website is set for success now and in the long-term.

1 
Ashley Stevens's picture
Ashley Stevens
Ashley can be found managing anything & everything Drupal for us, building amazing websites from the...

Keystone Click, LLC BBB Business Review


Warning: Cannot modify header information - headers already sent by (output started at /home/h897dfghdsfjdodk/public_html/includes/common.inc:2791) in /home/h897dfghdsfjdodk/public_html/includes/bootstrap.inc on line 1499

Warning: Cannot modify header information - headers already sent by (output started at /home/h897dfghdsfjdodk/public_html/includes/common.inc:2791) in /home/h897dfghdsfjdodk/public_html/includes/bootstrap.inc on line 1503

Warning: Cannot modify header information - headers already sent by (output started at /home/h897dfghdsfjdodk/public_html/includes/common.inc:2791) in /home/h897dfghdsfjdodk/public_html/includes/bootstrap.inc on line 1503

Warning: Cannot modify header information - headers already sent by (output started at /home/h897dfghdsfjdodk/public_html/includes/common.inc:2791) in /home/h897dfghdsfjdodk/public_html/includes/bootstrap.inc on line 1503

Warning: Cannot modify header information - headers already sent by (output started at /home/h897dfghdsfjdodk/public_html/includes/common.inc:2791) in /home/h897dfghdsfjdodk/public_html/includes/bootstrap.inc on line 1503

Warning: Cannot modify header information - headers already sent by (output started at /home/h897dfghdsfjdodk/public_html/includes/common.inc:2791) in /home/h897dfghdsfjdodk/public_html/includes/bootstrap.inc on line 1503

Warning: Cannot modify header information - headers already sent by (output started at /home/h897dfghdsfjdodk/public_html/includes/common.inc:2791) in /home/h897dfghdsfjdodk/public_html/includes/bootstrap.inc on line 1503
Reduce Distractions for Improved User Experience | Keystone Click

Error

The website encountered an unexpected error. Please try again later.