GDPR

Mouseflow Blog

Want to try Mouseflow?

Join for Free

9 Mistakes that Damage Your User Experience


User Experience (UX) design is a crucial process that creates a marriage between business goals and an optimal environment for your visitors. The goal is to seamlessly guide the user from the homepage to a conversion, providing an intuitive and pleasant experience. You may be offering the best product in your industry, but if your website UX is poor, then you will have a high bounce rate and a low conversion rate.

With proper attention to detail, testing and by designing your website with your users in mind, you can create a positive and enriching experience that will keep people coming back for more. In order to do that, it’s important to know what to avoid – the following is a list of some common UX design mistakes to watch out for:

User Experience

1. Background images that steal the show

Using a full background image is a popular trend in the web design industry. However, it is a common misconception that an attention seeking background image should stand on its own, when in fact, images are meant to compliment the site as a whole. Even a photography website should use images carefully, making sure they are strategically placed and intuitive to the user.

In most cases, images should be a complimentary aesthetic that highlights the content and overall message of a website. People can get lost in images, and it’s your job to direct your visitors to pefform actions you'd like them to take on your site. If you have an important Call to Action (CTA) that’s being drown out by an eye-catching image, you’re missing conversions. The key here is to find a nice compromise that allows you to use interesting, or even striking, images that create a flow through your site, leading the visitor through a predestined journey.

Another mistake is to let the background image or initial content trail below the fold line. The fold line is where the page cuts off for most users when it’s initially loaded. In order to see below the fold line, the average user has to scroll down.

It’s important to use analytics tools, like Mouseflow, to analyze where the fold line is on your web pages. Mouseflow’s Scroll Heatmap will show you exactly where your fold line is on each page. Another really great advantage to this heatmap is that If you hover over any element or part of the page, a hover menu will give you some important details about that specific area:

  • Viewed By: The percentage of users who see this part of the page or element.
  • Avg. Time: The average time spent on this part of the page.
  • Avg. Engagement: The average time spent actively engaged (moving mouse, clicking, hovering, or otherwise interacting) with a part of the page.

You can use this information to optimize the placement of important elements, such as your primary CTA, and make sure they are being seen and interacted with.

Mouseflow Scroll Heatmap

2. Too Many Form Fields

Creating too many steps in your website will deter people from interacting with you, and will actually encourage frustration – you want to keep your forms as simple as possible. If your website or company requires that many fields are filled out because you need the information, break up your form into bite-sized steps.

Dan Zarrella at HubSpot researched over 40,000 of their customers and found that when the number of form fields are reduced from four to three, the conversion rate improves by almost half.

As always, don’t forget your analytics tools! Mouseflow actually offers great form analytics that can show you how your visitors are interacting with each form field, where they are bouncing, who is converting, and more! This feature will show you how long it takes users to fill out each field, if your users are experiencing click-error when they try to fill out or submit the form, and you can actually watch a list of recordings of people who have bounced or converted! If you take it a step further and use the filters, you can see how different users are interacting with your form. Utilizing this intel can greatly improve your conversion rate!

Mouseflow Form Analytics

3. Overwhelming Amounts of Text

According to Chartbeat, 55% website visitors spend less than 15 seconds on a webpage. The majority of the visitors just glance through the headings and bullet points, rather than reading long paragraphs.

While including important information is necessary, you don’t want to overdo it. Always try to abide by the old saying: “less is more," and include what you need to in order to convey your message appropriately, while leaving out the extra filler text. Edit your content and take out everything that isn’t necessary – when you’ve reached the point to where adding or subtracting content would not improve your message, you’ve hit a sweet spot.

Break up your content with images to keep visitors engaged. This gives them a break from reading and presents a great mix of content and visual imagery that tells a story. Amanda Sibley, a writer for HubSpot, explains that "90% of information transmitted to the brain is visual, and visuals are processed 60,000X faster in the brain than text."1 Make sure your images are relevant, high quality, and interesting – again, you don’t want to add content (including images) just to add content. Choose images that add to your story and place them strategically.

4. Lack of Responsive Design

Designing your website with a responsive layout will ensure it automatically detects the users’ settings and resizes appropriately to their device and screen size. This creates an optimal user experience and will adjust accordingly to desktop devices, computers and phones, ensuring the best display for each user individually.

"The number of people using mobile devices outstripped people on desktop computers in 2014." – Jim Edwards, Business Insider , April 2014.

If your website is not responsive, many people will become frustrated, causing them to bounce from your site with bad user experience. Therefore, making sure your website is utilizing a responsive layout reinforces an intuitive and pleasant user experience.

5. A Cluttered Layout

Don’t distract your users by presenting your website as a child presents their dirty room. When you invite them in to check out all your toys, you want them to pay attention to what you intend on showing them, instead of being distracted by all the clutter.

Remember, less is more. Utilize modern design standards and highlight white space with a simple and clean layout. If your design includes an incomprehensible amount of content and images, users won’t know what to pay attention to, because they will be distracted and overwhelmed.

Highlight important elements, like your CTA, by utilizing white space. Guide the focus of your users by using images and text to compliment your primary content.

It’s amazing what can happen when you utilize a clean layout. Jon MacDonald from UX Pin remembers the experience of optimizing the gDiapers.com website: "Once we added some spacing between the main banner image and the two callouts below, desktop visitors used them 150% more often, and the site’s overall conversion rate lifted by nearly 20%."2

gDiapers.com Website Before and After

6. Low Contrast Design

Low contrast design has become a trend these days, but I recommend avoiding it. If everything in your website blends in together, it will be very hard to for you to guide your user through the experience you intend to. Some websites are using this technique, but I anticipate that it will not prove to stand the test of time.

Low Contrast Website Example

Make sure you are using complimentary colors with a contrasting theme that follows modern design standards. This will add to your website, making it attractive, legible and fun for users to visit.

7. Pages that take forever to render

If a page takes too long to load, people will leave immediately. You have about a 4 second window for your website to render so that you retain visitors who landed on your site – their expectations are that the page will load immediately, and if it doesn’t, they will leave because of a bad user experience.

There are measures you can take to ensure your pages are loading as fast as possible, which include making sure your images are formatted properly, checking the load time of dynamic elements, and making sure your HTML is organized properly. You want to make sure that any scripts you’re referencing load after the page does by putting them at the bottom of the HTML document.

A study from Aberdeen Group found that one second delay in page load time equals an 11% reduction in page views, a 16% decrease in customer satisfaction, and a 7% decrease in conversion rates.3

Furthermore, pages that load slowly will create a negative impact on your search engine ranking. To improve the Search Engine Optimization (SEO) on your website, make sure to test each page to determine and improve loading time.

Here are few tips you can follow for faster loading:

  • Don’t use too many plugins
  • Reduce redirects
  • Optimize your images
  • Minimize HTTP Requests
  • Reduce server response time
8. Missing Call to Action (CTA) Button

Whether you want your visitors to sign up, request a quote, make a purchase or simply call you, it’s important to lead your audience to an action that fulfills your website goals. Your CTA is what tells visitors what action they should take and guides them to convert.

Make sure your CTA is bold, visible and has good placement. I recommend using Movement Heatmaps from Mouseflow to discover how users are engaging with your website. Here, you can see where the most engagement is and make sure your elements are placed in areas that are the most popular.

Mouseflow Movement Heatmap

The heatmap above shows a white and red overlay for the hot areas. Make sure your important content and CTA’s are highlighted in white and red. If they aren’t, ask yourself if they are visible enough, if there is something distracting users from seeing it, or if you need to change the placement.

9. An Overabundance of Fonts and Colors

While the perfect blend of colors and fonts can make a website appealing, differentiating your design too much will create some serious chaos. Never use more than three fonts within any design (aim for two) and stick to a modern color scheme. I recommend using Material Design by Google to pick a color family that works best for your website.

Being careful and selective with your aesthetics ensures that your site will have a nice flow, a solid unity and will be intuitive. Avoid decorative fonts, colors that don’t go well together and utilize the opinion of a good web designer! There are so many tools that will help you pick a good color scheme or font family, as well, so make sure you do your research and pick carefully.

Final Thoughts

It is always a continuous process to improve UX. This can only be achieved with regular research, following thebest UX tips, and testing. Keep the user in mind when creating or optimizing a website because, ultimately, their experience is what will make or break your conversion rate.

Do you have tips or tricks of your own or have you tried some of the techniques above? Let us know in the comments below.

Questions? Email hi@mouseflow.com or call +1-855-668-7335

Image Sources:

  1. http://www.elliance.com/media/3947/user_experience.png
  2. https://17404-presscdn-0-71-pagely.netdna-ssl.com/studio/wp-content/uploads/2016/01/image0013-1024x418.png
  3. https://s3.amazonaws.com/media.nngroup.com/media/editor/2015/05/14/low-contrast-copy.png

Sources:

  1. http://blog.hubspot.com/blog/tabid/6307/bid/33423/19-Reasons-You-Should-Include-Visual-Content-in-Your-Marketing-Data.aspx#sm.0001dfwq0ryc5el5x8i1ahjfn6944
  2. https://www.uxpin.com/studio/blog/ux-case-study-designing-whitespace-to-improve-conversions/
  3. http://www.aberdeen.com/research/5136/ra-performance-web-application/content.aspx

--

This is a guest post from Jabed Hasan, a Content Marketing Manager at Mountnow. He is passionate about writing and loves to work on SEO, CRO, Growth Hacking and Online Marketing Strategies. You can follow him on Twitter and LinkedIn.


Background Image

Ready to get started? Join Mouseflow.

Join for Free