Don’t Ruin Your Conversion Rate with These 15 UX Mistakes

1. Forgetting about first impressions

They say that you only get one chance to make a good first impression. Imagine that you are organizing a party for some clients and you invite them to a good restaurant for dinner in order to celebrate success or discuss possibilities of cooperation. Regardless of whether they are your existing clients or potential investors, you care about making a good first impression. The same is with websites — you only have a few seconds to convince visitors that it is worth taking the time to get to know more about a company, product or service.

When designing a website, it is worth remembering that users have a strong tendency to scan the site in accordance with an “F” pattern. This has been confirmed by the Nielsen Norman Group study, which examined the movement of eyeballs while browsing dozens of pages, noticed that the eyesight will follow the headline, then a few points under it and another header and so on down the page. This is how recipients quickly decide whether they are interested or not.

2. Overlooking disabled visitors

With a little effort, you can make your site more accessible to people with disabilities. According to the 2018 Disability Statistics Annual Report from the University of Hampshire, it appears that in the U.S. 12.5% of the population have some degree of disability, of which 2% have a vision problem. Orienting people with disabilities and even using their help in designing a website can have many benefits for your company. Tom Pokinko, Research Director at Open Inclusions, says:

(...) design with disabled people and the elderly helps to create better products and services for everybody, which leads to a better brand experience overall. For example, websites and emails with small or low-contrast fonts are hard to read for people with visual impairments but also for people with tired eyes or people who experience glare on their mobile phone screen.

He goes on to compare the needs of the disabled with those diagnosed with dyslexia.

Similarly, unclear messaging and visual design with confusing layouts or distracting visuals make web pages difficult to understand for dyslexics, (...) non-disabled visitors, especially those who happen to be distracted, stressed, needing to find information in a hurry, or who are not native language speakers.

That’s why it’s a good idea to make your content management system available to recipients so that they can choose the font size and set the color contrast.

Also, remember to add a description (ALT) to your photos and videos. They will be much more legible for recipients, especially those with vision problems who use software for the blind on a daily basis.

3. Not using the right words (or too many…)

You’ve seen that many pages that suffer from an excess of descriptions and specialist vocabulary. Too often brands want to put as much information as possible on the website but still don’t reach customers with their basic message. 

Let’s go back to the metaphor of the client dinner meeting. Will all the meals and drinks be served right away, along with a conversation about business issues? Or is it better to start with an appetizer and ease into things? It’s not just courtesy, it’s behavior that has a rational explanation behind it. First, we want to get to know our guest so we can match the amount of content and the level of advanced vocabulary to the needs and level of customer knowledge. 

In graphic arts, there’s a trend of less is more and it can already be called a standard because its popularity is constantly growing, especially among UX specialists.

The same is happening with content. As UX writing develops, the trend is towards condensing content to a minimum. It’s worth getting to know him better, not to kill the conversion at the beginning.

4. Forgetting about breadcrumbs

While the technologies that stand behind our products and services should be advanced, websites and mobile applications should be as simple and intuitive as possible. This won’t happen if you forget about breadcrumbs. When deciding how to use them, you can follow giants of e-commerce like eBay and Walmart, which use the two most popular and the most helpful types of navigation paths:

• based on location, showing where we currently are on the site. Using the navigation bar, customers can easily switch between higher and lower categories. The example navigation bar can have a layout like: Department> Sub-department> Item category> Item.

• based on the attribute, most are often found in e-commerce. They rely on filtering the page by either adding rewards to products or content that interest us, or using product categories that will filter the page according to our needs. In this way, we can determine the receipt of notifications about a product that meets the specifications we specify or filter products according to a few interesting attributes.

To maintain the SEO of your website, remember that the use of breadcrumbs is a good way to improve internal linking within the site and to strengthen the structure of your site links. If you do it right, the bounce rate on your site will drop because customers will find the content they’re interested in by navigating the site themselves.

5. You are not responsive

Responsive means the same content on different screens. Websites that aren’t optimized for mobile devices lose clients because 80% of users say that they’ll disengage with websites that don’t work well on their devices. Additionally, search engines actively demote websites that aren’t mobile-friendly in their search results.

What is the perfect size? According to Microsoft’s documentation , they recommend designing for a few width categories:

• Small (less than 640px) 
• Medium (641px to 1007px) 
• Large (1008px and more) 

Remember that some sizes are more popular than others. Worldwide Screen Resolution Stats (Jan 2020 – Jan 2021) show that the most commonly used resolutions across mobile, desktop, and tablet are:

• 1920×1080 (8.89%) 
• 1366×768 (8.44%) 
• 360×640 (7.28%) 
• 414×896 (4.58%) 
• 1536×864 (3.88%) 
• 375×667 (3.75%) 

To identify the right screen sizes for web design, invest in analytics because there is no standard screen size for web design. Depending on the nature of the website, users might use certain devices - for example, we use deskop more often for data management platforms like Synerise, and mobile devices for using social media applications.

6. Button placement

Edmund C. Arnold develops the concept "Gutenberg diagram" which describes the general pattern the eyes move through when looking at the website. The Gutenberg diagram divides the layout into four areas:

• Primary optical is the place where we start read website – top/left.
• This is followed by a well-investigated secondary area-  top/right.
• A poorly-investigated area - bottom/left.
• Terminal area - bottom/right.

We place the terminal area at the end of the user’s viewing pattern, that why it's the most interesting place to hold reader attention and feature a call to action button.

Most users read the mobile interface from top to bottom, the same as a website, therefore the best option to place the button at the bottom of the page. On a website created on the Gutenberg diagram, users don’t have to look around to see what to do next, they just 'scan' the screen from to bottom.

7. Not being clear with your CTA or using too many of them

Many pages have problems associated with their CTAs, usually related to failing to make it clear what they do.

It’s important to remember that buttons prompting users to take action must fulfill certain criteria:

• The button should stand out visually from the rest of the page. Carefully consider its color and size.
• The order of the buttons matters. Ask yourself what order the users expect. What should be the default and what will be additional options. If you still have doubts, Nick Babich’s article may provide an answer.
• The color of the button also matters. Vivid, bright colors make us understand that clicking will result in something. Colors also trigger specific associations, red is associated with negation, and green with acceptance, while orange or yellow is a warning.
• Too many buttons — Just like in the point about paralysis of choice, customers do not know what to click and usually do not click on anything as a result. You decide what you want to stand out on the page, limit yourself to one button per section.
• Buttons have to lead to an interaction after clicking — Make sure the customer knows that clicking something results in some kind of action.

Make sure that your CTA is clear, using contrasting colors and large buttons. Often when voting or subscribing to a newsletter, there is no feedback for the customer. Remember to display a thank you message.

8. Where is the white space?

White space is the empty space between text, graphics, headings, icons, topography, and other design elements. If used well, it gives a clear interface that is easy to use and intuitive, effectively emphasizes text, displays graphics or the most important content on the page. 

In order to implement the white space system in your projects, it is worth specifying only a few sizes of white space during the user interface design process, which will allow for their faster implementation in the project. In the presented graphic, design using 4 different space intervals are used, namely 12, 16, 32, and 56.

White space does not refer to an empty white background, nor does it have to be white, its appearance depends on the designer's design. What connects any void in design, however, is the creation of pages or interfaces in which the user can easily focus on the content.

9. Horizontally or vertically

Flexible design is a creating project which works regardless of device or size. So the question is how to meet the requirements of different devices and different preferences of users? It is certainly worth remembering three rules:

• Do not force users to scroll the page excessively, nobody likes it.
• Do not hide most of the text behind the menu, this forces the user to detach from the text and look for information in the menu (you will lose the recipient faster than you think).
• Do not design separately for computer and mobile devices, some of us use both of them in different situations.
   

Two-way scrolling is an answer to the age-old dilemma of horizontal or vertical design for computer users and mobile devices. As I mentioned at the beginning, compromise is the key. Bidirectional scrolling, as the name suggests, allows you to scroll the screen in two directions, by default on the vertical axis and additionally, as needed, on the horizontal axis. The main advantage of this solution is that it allows the user to view more content without hiding it from the menu. 

Let us pay attention to how the largest social networking sites work - we see a large amount of different information and we can choose from them what we are interested in, we rely on what the platform suggests to us, and not on our own choice from the menu.

10. Asking and asking (and asking)

Do you know someone who likes to fill out forms? Probably not, because nobody likes forms. If you have to use them, remember to add them in moments where you give something to the user in return. Something for something sounds fair, right? 

It is best to offer something like a discount code or some promotional offer when you ask users to complete something like a survey or provide information that will help you. It happens that sometimes we have no choice but to include a contact form, regardless of whether the customer receives something from us or not.

This is the case when registering customers before buying or when receiving complaints. In case you need to ask something, remember to make your form:

• Easy to finish with autocomplete options
• Equipped with autosave
• As short as possible
• Display in a way that does not require users to click to expand it

Always thank users for completing forms. If possible, put your thanks in the form of a reward of some kind. Remember, everybody likes to get free stuff!

11. Making customers think about what to do next

What do I have to click now? This is the worst question a customer can ask about your website. It means that the client wants to know more, but your website doesn’t make it easy to do. Remember that a good website is easy to navigate. Decide which elements on your site are the most important and distinguish them with color, contrast, size or position on the page. If you don’t do it and there are too many options on the site, the client will not know what to do.

When we feel like we have no choice, we feel controlled and frustrated but in the face of too many options, our satisfaction also decreases. If you don’t know what to highlight on the site, use analytics and check how visitors typically navigate your site. This is important for your conversion because studies show that the paralysis of choice causes a drop in sales.

If you see that the decision-making time on your site is longer than it should be, you can also use Hick’s law. Thanks to its implementation in critical situations, you can enable customers to make quick decisions. Let’s say a customer abandons a shopping cart but comes back to look through your online store again. Most likely, the problem is related to choosing a product from a wide assortment. The solution is to display dynamic content with a focus on one product. In this case, less (information) means faster (make a purchase).

12. Not saving what can easily be saved

You should know that there is something that irritates clients more than filling out forms — forms with no autosave. 

Imagine that you are buying a plane ticket and the purchase form consists of four steps. When you finish your purchase, you realize that you have entered an incorrect ID number. You click the step back to change the wrong data and quickly learn that all the information you’ve already filled in is gone and you must complete everything from the beginning. Now everything takes twice as long and you’re twice as frustrated.

This is obviously not the experience you want customers to have so what can you do to avoid it?

• Enable autocomplete on all forms
• Equipped with autosave
• Use tools that can check that information given fits standard formats in order to help customers avoid simple mistakes and typing errors

Making the process as smooth and hassle-free as possible means a happier, more engaged customer, which is exactly that kind of customer that spends more!

13. You forget about UX Research 

UX does not exist without user research, so you must remember to involve users in the user interface creation process and research user experience. One of the leading companies providing UX services, Nielsen Norman Group, has defined 4 foundational steps of UX research that should be analyzed before the graphic team starts to design a website.

1. Discover - Define the hypothesis before the research and determine what you think is important for users. The stage is important when you try to illuminate what you don’t know and better understand what people need, by using these methods:

• Field study
• Diary study
• User interview
• Stakeholder interview

2. Explore – In the exploration step we try to understand the main problem for customers and addressing user needs appropriately. Based on this step UX researchers choose the order in which to browse the website, perform tasks, fill in fields and other interactions that you intend to place on your website, application or platform and using a few UX methods:

• Persona building
• Task analysis
• Journey mapping
• Prototype feedback 
• User stories

3. Test - The most important element of research is testing with users. Check if your solution is intuitively based on the results of previous points (Discover and Explore).  You can test every element of the website to make sure systems work well for the people who use them by using:

• Usability testing (in-person)
• Benchmark testing
• Evaluation
• a/b/x tests 

4. Listen - Put things in perspective, find new problems, and spot trends. Collect analytical data or metrics to graph your site traffic and create reports. But mostly listen to your audience to understand existing problems. Listen using a few methods:

• Survey and questionnaires
• Analytics data
• Frequently-asked-questions (FAQ)
• Review Search-log
• Review Usability-bug

14. Not testing enough

In the introduction, I wrote that effective pages are usually similar, but these similarities are quite obvious. Start with the assumption that you do not know everything about your clients, you do not know how their preferences will change and so on. This means that you want to constantly monitor their actions and collect statistics about them. Running A/B tests on each element of the site is very important to identify the needs of customers in a timely manner. The tested items should include:

• Headers
• Graphics
• Video
• Forms
• CTAs

You determine which clients to test, which elements you want to check and at what time. Do not forget that tests are carried out constantly and for more than one subpage or form. Check the product page, examine the process of order fulfilment and the appearance of messages sent through various communication channels. What works statistically for competitor sites may not work for you, so make A/B tests a permanent part of your marketing schedule.

15. Distracting attention away from what matters most

We started with the first impression, let’s end with the last impression because it has a significant impact on conversions in the long-term. If a site bombards us with lots of distractions like pop-ups or intrusive ads, it makes it hard to buy anything. Not only because of so-called banner blindness, but also due to the interruption of the shopping path. When your customer adds a product to the basket and wants to finalize the purchase, there’s no time for anything that takes them off this path.

What kinds of things can distract the customer in the final stage of shopping? 

Well, think that you are buying a “premium product”, and at the last stage of purchase you see an empty box that says “10% discount coupon for premium products”. If you have not received a voucher, you will start looking for it, perhaps outside the store page.

Let’s go back to the idea of less is more — opt out of unnecessary elements on your website, and the closer you are to making the sale, the fewer choices you place in front of the customer.

Wrapping up

Hlade’s law - If you have a difficult task give it to a lazy man, he will find an easier way to do it -was first published in Murphy’s Law Book Two: More Reasons Why Things Go Wrong in the 1980s, but it is still applicable. In the fight for customers, the one who can simplify their lives wins. That is why it is so popular to design websites that use a simple form that is personalized for recipients and where the content is condensed. A good UX design means that users don’t have to stop and think what to do next. We lead them to the site and direct them to the right places without many complicated and time-consuming steps. 

Remember the Less is More principle and keep things simple from the beginning. 

Good luck!