The 3 Most Common UX Mistakes Every Company Should Avoid

To keep up with changing user behaviors and needs, brands have had to pivot and adapt quickly in the past year. While the pandemic pushed many existing digital customers to increase the frequency of their online shopping, it also pushed many new users to convert online for the first time. In order to maintain this surge of new and existing customers, companies have to build an intuitively designed website that helps their customers quickly and easily find what they are looking for. Unfortunately, common user experience (UX) mistakes could be holding you back.

At Contentsquare, we have over 700+ clients across multiple industries and have seen our fair share of exceptional UX design. On the flip side, we’ve also seen a handful of common UX mistakes brands make that can greatly affect the digital customer experience and hurt their on-page performance metrics. 

The good news? These common UX mistakes are easy opportunities to improve your website or app and give your customers a better online experience. 

Here are the three most common UX mistakes we see brands make and how to easily fix them: 

 

1. Creating a “False Bottom”

A “false bottom” occurs when it seems like a page has reached its logical end. For example, a content block may end perfectly at the bottom of the screen, thus creating an illusion that there is no other content on the page. This increases the likelihood that a user will not scroll down the rest of the page, which can cause them to miss out on engaging and relevant content. Users rely on the page design to understand whether there is additional, relevant content, both vertically and horizontally on the page. Even small cues, like an arrow, can signal there’s more content to be seen and encourage them to continue scrolling. 

This can happen often when a hero image or an eye-catching, full-width video is meant to engage users without any indication of important content below the fold. Distinct borders or expansive white spaces between content may also create this illusion throughout the page.

Because of this, we frequently see low exposure rates on content below the fold but have a higher likelihood of interaction or even conversion. Through heatmapping, Contentsquare data reveals that 69% of all website content goes unseen by visitors. 

Solution: 

Charity Water's homepage has content trail off the page to indicate to users that they need to scroll further down the page

Charity Water uses a smaller homepage hero image so the next section of the page is clearly visible, encouraging visitors to continue to scroll down the page.

Avoid accidentally creating a “false bottom” by providing visual signifiers that indicate users can swipe or slide horizontally, or partially bleed content off the screen. Use strong headlines and section headers to separate content, and be mindful of the content flow of your page.

AirBnB's homepage content bleeds off the carousel to indicate to users that they can scroll to see more.

AirBnB’s mobile homepage has carousels that use the illusion of continuity to entice users to scroll and to encourage discoverability.

 

2. Not Having a Sticky Main Navigation

When the main navigation is not sticky to the page (on both desktop and mobile), it can be difficult for users to navigate to other areas of the site. Users can also experience difficulty when browsing lengthy content or list pages where the navigation can only be reached by excessive scrolling. This experience is exacerbated on mobile due to its limited content view. 

Although there should be plenty of alternate navigation on the page that is relevant to the content, the main navigation is a universal indicator for navigation that users are already familiar with. This is also a good tool to browse areas of the site that are not accessible directly from the page they are currently on.

Solution:

By making the main navigation “sticky” so it’s permanently on users’ screens even as they scroll down a page, you may see increased click rates, engagement rates, and faster time before first clicks on your content. 

A sticky navigation bar on Lo & Son's mobile experience

The navigation bar on Lo & Son’s remains sticky as users scroll, making it easy to navigate to other areas of the site regardless of where the user is on the page.

Ensure that your menu’s hierarchy is correlated to the areas your users are most interested in to least interested in, so they can more easily and intuitively find what they’re looking for. This might require you to remove sections or rearrange the architecture of your navigation bar content to match what is most useful to your user based on your visual app analytics. Keep in mind what mental models your audience may have or terminology they are familiar with in regards to your products and content. A mental model is how a user thinks something works. For example, if the information architecture of a site uses internal company jargon, instead of the language used and expected by the customer, that can negatively affect the user’s customer journey. To avoid this, just use vocabulary that your user understands and expects. 

 

3. Not Ensuring Content is Legible and Readable

A common UX mistake we often encounter at Contentsquare is when content is either difficult to read or difficult to understand. While typically you want on-page text to be as succinct as possible, that’s not always possible, especially when you have to meet legal or SEO requirements. You can, however, ensure it’s readable and legible.

Solution:

To improve legibility, always make sure that your fonts are 14px or above, with a contrast ratio of 4.5:1 (minimum) for normal text and 3:1 for larger text. Users can have difficulty reading text that is smaller, or with low contrast. Note that these ratios are the standard for legibility for an audience with healthy, normal vision and does not only include those with disabilities. For a more inclusive and accessible design, W3C’s level AAA success criterion requires a 7:1 contrast for normal text and 4.5:1 for large text to allow users with low vision who do not use assistive technology to clearly see the text. 

Try to keep your text on plain surfaces. If text is placed on busy images or backgrounds, it can be difficult to read. If you do overlay it on an image, ensure that it’s on an uncluttered area of the image with high contrast. That may require additional collaboration before new creative work is planned.

For any “fine print” text, consider using a pop-up with a text link or tooltip to share necessary information with your users while avoiding clutter on the page. Choose your typefaces carefully, as certain typefaces require larger sizing and can contribute to decreased legibility.

To improve readability, use simple and short sentences that any reading level can understand. Get to know your audience well. What industry jargon are they familiar with? What will they likely not know? Make sure to be clear, to-the-point, and conversational, while providing clear tooltips that can answer common questions. It is also helpful to break up lengthy content into frequent, short paragraphs. Or, you can use images and diagrams to lighten the cognitive load of maintaining attention to large amounts of text.

 

Although there are many more UX issues that can be addressed, these are three great opportunities for improvement that can help improve any website and any page’s content.

5 Major Mobile Filtering Pitfalls – and How to Fix Them

With the majority of searches now taking place on mobile, it’s never been more important to ensure your brand’s mobile offering is up to scratch.

At Contentsquare, our mobile app analytics can help you get the most comprehensive insight into your mobile app experience, fuelling your digital teams with everything they need to improve customer journeys across all mobile devices.

Now, let’s take a look at some of the most common mobile filtering pitfalls and show you how to fix them…

“How can I help you?” These five words go a long way to making a customer in a brick-and-mortar clothing store feel more at ease when faced with the sensory overload of multiple racks of apparel and thousands of items to choose from. This assistance in guiding the customer to find exactly what they want is the real-world equivalent of filtering on eCommerce websites.

In the digital world, especially mobile, too many choices make it difficult for people to reach decisions. Often, mobile online shoppers just abandon their search if they can’t quickly and easily find products that grab their interest. Effective filtering narrows down the overwhelming choices. It’s a critical on-site feature for customers who need help coping with information overload and can increase the likelihood of them finding the product they want or need.

According to Contentsquare data, filter use is associated with a 35% increase in click-through rate on products.

According to Contentsquare data, filter use is associated with a 35% increase in click-through rate on products. Moreover, filters were found as helpful for diverse types of visitors: those who are goal-oriented and know exactly what they, as well those who are just browsing.

While filters are effective in helping customers cope with information overload, they are rarely used on mobile sites: as little as 2% and up to 10% of mobile online shoppers use filter menus, compared to 38% of desktop and tablet users.

Only 2 to 10% of mobile online shoppers use filter menus, compared to 38% of desktop and tablet users.

The low usage rate is not for lack of motivation – we found that every second customer that interacted with a filtering menu abandoned the process without filtering. By observing the behavior of filtering ‘abandoners’ we uncovered several common usability issues that block customers from effectively using filters.

Most filter usability issues stem from companies not building mobile responsive filters. As a result, customers are forced to use filtering menus designed for spacious desktop screens, now crammed onto their small mobile screen. In the mobile-first age, responsive sites warrant filters that are designed specifically for the mobile context. Otherwise, customers are likely to abandon a process that could otherwise speed up and ease their shopping experience. Here are five main problems with mobile filtering today:

1. Long and cumbersome mobile filtering menus

On a desktop computer, the vertical bar filtering menus usually appear on the left side of the product listing page, allowing customers to see most or all of the filtering options, even if the menu is long. On most responsive mobile commerce sites, the filtering menu is not exposed by default, rather, it appears as an expandable drop-down menu. Since all filtering options can’t be shown on the screen at once, customers need to scroll up and down or expand sections to explore the full range of options.

In most cases, the font size is small and limits legibility, particularly if there is glare. This experience puts a strain on customers’ short-term memory as they’ll need to remember which filters are out of sight and mentally compare them to the filters they are looking at. In cases of filtering menus with tons of options, the cognitive load often becomes too high, causing customers to abandon the process.

A picture of filters taking up three mobile screens to show how filter menus are much longer than mobile screens

When opened, filter menus are much longer than mobile screens. Customers must scroll repeatedly to see all options.

2. Difficulty in applying multiple filters

Our research shows that visitors who apply two or more filters are more likely to continue to a product details page. However, only 2% of customers that used filters on mobile applied two or more filters. Many mobile sites lack clear visual cues indicating that multiple filters may be applied. Even when such cues exist, desktop-designed menus on mobile are often too small, which can lead to accidental taps on the wrong elements. As a result, customers may find themselves on a page they were not interested in. We also see frequent zooming and tilting behavior, which often results in misaligned page borders and misplaced elements.

Another common issue that limits multiple filter application is when pages reload after each filter is applied. This interrupts the user experience, especially when page reload times are slow. Even if the customer applied one filter, they are not likely to repeat the process if it takes too long.

3. Important filters not easily found

Filters differ in their effectiveness. For instance, we found that customers who filtered by ‘Color’ were 50% more likely to find a product. However, customers often do not reach useful filters because they are hidden at the bottom of a long menu. Filters at the top of the menu are the most used ones, but frequently they are neither the most relevant nor effective options for customers. This can cause a customer who was on the right path to finding a product to be hindered by the low discoverability of important filters.

A side by side image of two filtering menus, with Size as the first and last option on the menu. When Size is the first option, it's click rate is 18%, but that number drops to just 4% when it is the last option on the menu.

Put conversion-increasing filters like size at the top of the list, where visitors are more likely to use them.

4. Lack of feedback

Many mobile filter result pages don’t indicate which filters have been applied. While some customers may return to the filtering menu to check the filters they applied, most do not realize that they are looking at filtered results. If they can’t find the product they want, they may conclude it’s not available and leave the site.

Visitors can easily lose track of which filters they've applied, and erroneously conclude that your site does not have the products they want. Clearly indicate which filters are active and make it simple to change or remove them.

Visitors can easily lose track of which filters they’ve applied, and erroneously conclude that your site does not have the products they want. Clearly indicate which filters are active and make it simple to change or remove them.

 

5. Difficult to adjust filters

Often, customers only notice that additional filters will yield more relevant options after they scroll through a filtered product list page. For example, on a department store site, a customer may choose “leather” within the “purse” category – and only after scrolling three or four times, realize that also filtering on a specific style will better focus the results to only show the style of bags she likes. Or maybe she wants to apply a different filter altogether. On most mobile sites, customers seeking to add or adjust a filter must scroll all the way to the top of the page. On top of being a time-consuming and irritating task, customers might get distracted along the way and abandon mid-scroll.

A sticky filter menu that follows mobile users as they scroll through products, so they can add or remove filter options at any time during their search

Make the filter menu sticky, so it is easily available whenever visitors choose to filter.

Solving Mobile Filtering Problems

The main takeaway is that filtering menus designed for desktops can create a sub-par customer experience on mobile. As a result, a tool that is very effective in helping customers find what they want goes massively under-used. Here’s a brief look at some quick-wins you can take to solve your mobile filtering problems and better serve your customers:

1. Opt for overlay functionality over a drop-down menu.

One quick way of solving many of the usability issues outlined above is to implement an overlay functionality instead of a drop-down menu. An overlay takes up less space, allowing important elements to be larger (e.g., font, check-boxes, etc.). This can reduce users clicking on and applying the wrong filters and allow them to narrow down their search results quicker and easier than before.

2. Move popular filter options to the top of the list.

You want to give your most-used and effective filters prime real estate on your mobile filtering menu. Using an experience analytics platform, like Contentsquare, identify and evaluate which filter categories are most helpful for your customers. Then, list them at the top of your menu so they’re easier to find and use. Be sure to also remove under-performing options.

3. Allow users to see what filters have already been applied.

Within an overlay, it is also easy to see which filters were applied, review them, and then hit ‘Done’ to apply all at once. This functionality also solves the issues of slow re-loads after each filter application. After filtering, the applied filters should appear at the top of the page, so customers can easily see what they selected and quickly and easily remove any filters they don’t want to include in that search anymore.

4. Make filtering menus sticky.

Lastly, making the filtering menu sticky would help customers to access it at any point in their journey. This can save them the hassle of scrolling to the top of the page to double-check what they’re filtering by or to add or remove any other filters.

To maximize the potential of mobile eCommerce sites, equip your customers with a mobile filtering solution that is effective, efficient, and satisfying. After all, filters are the online proxy of a helpful sales associate and play a key role in giving your customers an exceptional digital experience.

Get The Free Guide: 5 Tips to Improve Your Mobile Experience

4 Practical and Impactful Accessibility UX Design Tips

Today’s brands aim to serve the needs of their customers, but many fail to do so because millions of people can’t even access their websites and mobile apps. Over one billion people, or 15% of the world’s population, have some form of disability that can make it difficult or impossible to use and navigate a website. While there are many tools available to help these individuals use websites and apps, many sites lack the on-page markup and design that enable these tools to work. 

That’s why it’s important to prioritize UX accessibility in everything your company designs and develops. Web access is a basic human right and every online user deserves to be able to access the content and services they need. 

The Web must be accessible to provide equal access and equal opportunity to people with diverse abilities. Indeed, the UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right. – W3C 

Ready to build an accessible site but don’t know where to start? Here are four fixes for common website UX accessibility issues that can be easily incorporated into your site design. 

1. Color Contrast 

One of the biggest UX accessibility design issues I typically find on websites is color contrast. This is an often-overlooked web accessibility problem, but also incredibly common. 

One in 12 men experience some form of color deficiency and over 217 million people in the world have moderate to severe vision impairment, according to the World Health Organization (WHO). By ensuring your digital properties have proper color contrast, you can ensure anyone with a  vision impairment can easily interact with and use your website or app. 

Where designers and brands often go wrong is that we focus on creating things that “look good,” but forget to think about how our designs could be interpreted by people different than ourselves. While a design might “look good,” how successful can it be if it’s not readable for many users. 

People with vision impairments might find it difficult to read text on a background color with poor contrasting. So, make sure you have sufficient contrast between text and background and avoid inconsistent backgrounds or banners. 

UX Accessibility tip 1: Zalando uses high color contrast on its homepageZalando uses bold colors that contrast well with both white and black fonts

When deciding on color palettes for new banners or CTAs, print your design in black and white and test it. If you don’t have a printer then ask your designer to drop the saturation down to -100%. Is it readable? If not, keep testing until it is. You can also test designs using this free Color Contrast Analyzer. This handy tool uses Web Content Accessibility Guidelines 2.1 (WCAG) that acknowledges a pass and fail based on the three levels of conformance: A (lowest), AA, and AAA (highest). 

Color Contrast Analyzer uses Web Content Accessibility Guidelines to help you quickly identify contrasting ‘pass’ and ‘fails’. Colour Contrast Analyser (CCA) uses Web Content Accessibility Guidelines (WCAG) to help you quickly identify contrasting ‘pass’ and ‘fails’.  

2. Legible Text

Small, intricate fonts can be difficult to read for the visually impaired. To improve on-page legibility, make sure the minimum size of your body text is at least 14-16 pixels. Larger text, like site headers or call-outs, should be at least 18 to 30 pixels, but these are flexible and you can always go bigger (within reason). When testing, use the Google Chrome extension Fonts Ninja to see font styles and sizes in real-time.

Fonts Ninja, a tool that can help can determine font name, size, line height, letter spacing and colorFonts Ninja can determine font name, size, line height, letter spacing, and color. 

2. Icon and Image Alternatives

When it comes to using icons on your site pages, be sure to use universally recognized symbols and ensure the color contrast inside images is sufficiently sharp. Always give a text alternative to an icon, so screen readers know to share their purpose. 

A screen reader interprets elements on a screen, like text, images, and links, and translates them to speech so visually impaired people can consume and interact with content on their phones or desktops. This is why it’s so important to include alt-text and other textual cues in the code of your design, as they help visitors using screen readers to seamlessly navigate your site. Adding alt-text to your icons and images is a quick fix that takes very little time and effort to include when designing or developing a website, but can have a big impact on the UX accessibility of your site.

Google Map's use of high color contrast icons

Take note of Google Maps use of colors to differentiate between popular searches.

4. Designing for Mobile

Make sure links and icons are large enough to be selected regardless of whether a visitor is using a mouse, keyboard, or touchscreen. To ensure your design is compatible with small touchscreens, consider using a mobile screen reader, such as VoiceOver and Vision for Mac and Narrator for Windows, to test its functionality. Both readers are available on desktop, but best practice is to take a mobile-first approach. 

 

Having a user-friendly website that is easy to use for all your customers can only help your business. Brands have an amazing opportunity to take control and optimize their websites not just for some, but for everyone.