Design and user experience mistakes are the flaws that make clients criticize the website usability, refuse from a purchase or subscription, or even go to competitor websites. Most often, these errors boil down to technical issues and problems in website logic, navigation, design, marketing materials, or content. Such usability issues affect conversion rates and undermine the effectiveness of your website design.
Want to save your conversion and improve usability? We know how.
Here are sixty common problems in website design and usability that may harm your online business. As soon as you fix them, the conversion rate is likely to skyrocket. Remember that website design and conversion rates are always intertwined.
To make the learning process easier, we offer you to start with a story of John. It tells how an online store lost a loyal buyer and suffered from conversion decline because of one usability mistake. Besides, you will be able to find answers to the following questions related to design, user experience, and conversion:
- How low download speed impacts conversion rates and user experience?
- What other technical user experience issues, including 404 page, links, responsive layout, and other features, may affect conversion?
- Why is logical design so important for website conversion and user experience?
- How to make your website design more logical and use design elements to facilitate conversion?
- What navigation approaches can enhance your website design and user experience?
- What design and navigation solutions make users leave your website without completing conversion?
- How do colors, inconvenient text structure, and other website design issues impact conversion rates?
- What design approaches are most recommended for good user experience and conversion?
- What marketing techniques can help you boost usability and conversion?
- How to structure and design your content right?
John, his catastrophic e-shopping experience, and what usability has to do with it
Meet John. He’s a budding YouTube star who decided to buy a good microphone to voice his videos. He needs a mike that meets the following requirements: a reasonable price, clear sound, and good Amazon sales ranking. The last criterion is particularly important as John expects to recover most of his expenses in case his streaming career doesn’t work out. Now when John clearly knows what he wants, he goes on a prowl for a microphone to a popular online store.
Thanks to well-thought-out website navigation, it did not take long for John to find the “Microphones” category.
As soon as John clicks on the “Microphones” category, he encounters the first UX problem – the poorly designed rubric filter. This filter is rather inconvenient for amateur users because it requires a more in-depth understanding of the topic.
|Interest-free credit||I haven’t chosen anything yet. I’ll think about this later|
|Purpose||Need to voice my YouTube videos|
|Manufacturer||No idea. Perhaps anything produced in the USA would do|
|Slots||Any, I don’t care|
|Supplied with/without a cord||Better with a cord|
|Industry||Dunno. Need to voice my YouTube videos. That’s it|
|Brand registration country||Why do I need that?|
Since the filters don’t provide any hints, John has chosen studio microphones as he believes that the studio use is equal to high quality. All the other criteria seemed too vague and unimportant.
In the “Microphones” category, John encounters a very complex filter that is challenging for a complete amateur in sound recording. If you are not well-versed in the topic, you won’t be able to select a suitable product here, Some UX and usability problems are apparent at this stage.
In the “Studio microphones” category, John sorts the products by price and chooses the Superlux HO8 microphone priced at $50. According to the customer reviews, this microphone offers the best value for money among the affordable studio microphones.
In other words, this seems to be the best option for a YouTube streaming beginner. John proceeds to the checkout and has already arranged the voicing of the first video with a client.
John’s choice: Superlux HO8 for $50.
John waits for the delivery, unpacks his mike, plugs it into his computer, and gets puzzled with an awful sound. The thing is that his hardware doesn’t support phantom power. Without it, the Superlux HO8 cannot function properly. The product card said very little about this, and John was not experienced enough to pay attention to such details.
The source of phantom power is an essential element that must be bought separately. Otherwise, Superlux HO8 won’t produce quality sound. The product card doesn’t stress this, so an inexperienced user is likely to overlook phantom power requirements.
John starts searching for the information about the purchased microphone and finds out that:
- The cheapest phantom power supply ZEEPIN 48V available on this website costs $37 and must be preordered. The prices of more expensive supplies start at $65.
- Apart from phantom power, the microphone requires a stand and a pop filter, which again should be bought separately. It would also be good to buy an external sound card and a noise reduction screen. Together these add-ons would cost John over $100.
- Instead of all the above-mentioned appliances, John could have bought an affordable USB-microphone, which would meet his requirements as a wannabe Youtuber. For example, Trust GXT 232 for $50 or Blue Microphones Snowball iCE for $85.
As a result, John has thrown a good sum of money on the microphone he cannot use, while the online store has lost its long-time client.
To avoid losing clients, the online store owner should see their website design, usability, and products through the eyes of an inexperienced buyer. They should pay more attention to the educational content by adding product tips and posting useful articles and videos. If John had learned about phantom power at the right time, he wouldn’t have bought a useless product. Instead, he would have clicked on Superlux HO8 product card → learned about phantom power from pop-up tips → followed the link to the detailed article about phantom power supplies → learned about different types of microphones → got back to the list of microphones and chosen a more suitable option with a USB port. In this case, he would have got what he needed and wouldn’t have left for competitors.
The lack of educational content is one of the numerous usability mistakes made by online store owners. They adversely affect conversion rates and sales. Below, we will dwell on other UX, design, and website usability issues.
Website Technical Problems
- Low download speed harms conversion rates
- Broken or invalid links
- Non-optimized 404 page
- Horizontal scrolling issues affect user experience
- Lack of responsive layout impairs website UX
- The website is not adjusted to Ultra HD screens
- Broken search bar
- Unconfigured cart autosave
- Layout issues with website pages
- Non-clickable buttons
- Non-clickable shopping cart
- Audio and video autoplay
Technical issues don’t only impact your website performance but also harm user experience. Website visitors cannot complete the desired actions as quickly as they expect and may bounce.
Low download speed harms conversion rates
Approximately 40% of your potential clients won’t complete the conversion if your website design doesn’t load within the first three seconds. Another 40% will bounce if the website design freezes again after clicking a section. To maintain good conversion, be sure to conduct regular technical and usability tests, optimize heavy images, check the download speed of fonts, etc. In case you cannot avoid using videos, take steps to improve your website performance. Yet, if possible, it’s better to replace videos with images and text. Website speed and UX are more important than the type of content
Conversion and usability testing. The website download speed is low:.
As you can see, the website design takes 9.83 s to load. This harms usability and must be fixed since website visitors are highly unlikely to wait longer than 3 seconds.
Conversion and usability testing. Heavy images:
Heavy images are one of the main factors slowing down your website and affecting conversion. Thus, to increase the speed, you will need to replace the existing image designs with more optimized options.
Usability testing. Too many page load requests.
Research by Amazon has shown that when the page load time increases by at least 100 ms, the conversion rate immediately drops by 1%. To avoid that, website owners should perform two types of speed tests. The first test should take place in real time to identify slow pages right away. The second type should be done periodically (once per week or month) to detect and fix all slow elements. This will help you better control conversion rates and be sure they don’t drop because of poor website speed.
Broken or invalid links
If users have made their way to your website, they must have been interested in some information it contains. Make sure to provide this information. In case they see a broken link instead, they will just leave the website, blacklist it, and prefer your competitors in the future. Broken links are a very serious UX problem that severely affects conversion.
Web search robots also don’t welcome broken links. When a web crawler finds an invalid link, it registers an “empty” page that doesn’t provide any fresh content → consequently, the website design isn’t updated or developed → it should be placed lower on the SERP.
Usability and conversion issues. Broken links in the program code.
Continuous monitoring and regular usability audits are the only way to spot and eliminate broken and poorly functioning links. Make sure to fix the program code as soon as you identify any flaws.
Usability and conversion issues. 404 error returned when the page is opened in a new tab.
For websites with up to 100,000 pages, you need to check the links and run website usability analysis at least once per month. If a website design has more pages, audit it more frequently (ideally, every week).
Non-optimized 404 page
404 page is the “empty” spot where website visitors end up after clicking on a broken or non-existing link. If this page has poor usability and optimization, users will leave your website to never come back without a substantial reason. If the page is optimized properly, the traffic loss will be minimized since users will easily go to the section they need.
Make sure the 404 page does not look bland and empty.
To optimize the 404 page and improve the overall usability of the website, follow these recommendations:
- Briefly describe where the user ended up and why.
- Provide the link to the main page of the website.
- Show links to the most popular sections of the website.
- Suggest that the user informs the website admin about the error.
- Make sure the 404 page matches the overall design of the website.
Finally — use your sense of humor. By making website visitors smile, you will win their hearts and will eventually enjoy a boost in the website conversion rate.
Horizontal scrolling issues affect user experience
Horizontal scrolling is one of the ways to view website content. The page is scrolled right or left (↔) instead of top-bottom (↕). The main challenge posed by horizontal scrolling is that it is difficult to adapt for various gadgets – if there is no budget to review the code of each version, the website will fall apart and work incorrectly.
Horizontal scrolling is a favorite solution of web design studios they use to prove their competence as it is rather difficult to realize. If your budget doesn’t allow you to order individual layouts for each gadget type, the website design won’t work effectively. In this case, horizontal scrolling is not the best choice. You’d better opt for the “classics” — vertical scrolling.
Lack of responsive layout impairs website UX
In 2019, more than half of internet traffic was generated by smartphone and tablet users. In the future, the proportion may change or smartphones and tablets may be replaced with other devices. Responsive design makes you independent from such trends and helps to keep your conversion rates regardless of user preferences. In other words, a responsive layout is a website’s ability to adjust to any screen width and be displayed correctly on laptops, tablets, smartphones, and any other modern gadgets.
Usability and conversion issues. A website without responsive design.
If your budget is limited and you cannot afford a fully responsive layout, ensure that your website design is at least partially adaptable. Partial adaptability implies that your website can adjust to the most frequently used devices. In most cases, these will include various smartphones.
The website is not adjusted to Ultra HD screens
Currently, the majority of websites are adjusted to two types of screens, HD and Full HD. The pixel density in HD screens is 1366×768 — these are the most affordable screens, which are now becoming less and less popular. Full HD screens have 1920×1080 pixels and are considered the most popular screens. This resolution is used as the basis for building a responsive layout by the majority of web developers.
Along with HD and Full HD screens, Ultra HD (4k) screens are gaining traction. The pixel density in Ultra HD screens makes 3840×2160, which allows for high image resolution with the display of the tiniest details of the website design. Nowadays, 8k screens are also available, where pixel density reaches 7680×4320.
Consequently, we can assume that Full HD screens will soon become much more affordable, while Ultra HD screens will turn into top-performers. Therefore, it is important to carry out additional tests and make sure that all design elements are displayed correctly on 4k screens. Otherwise, as users switch to Ultra HD, your conversion rates will inevitably go down.
Broken search bar
The use of a search box mostly depends on the type of a web resource. Information websites rarely have it, while in online stores, it can replace the rubric filter. If a search bar is important for conversion rate optimization (CRO) and website usability in your case, make sure it always works right. Otherwise, users won’t be able to quickly find the requested product or information. They will just leave the website and buy from competitors that weed out usability mistakes. As if it wasn’t enough, these customers will probably never come back.
Bad usability examples and conversion issues. Wrong priority in search results
While configuring the search bar, keep in mind that people often make typos. Therefore, to avoid unexpected usability issues, prepare your website for such mistakes. For example, in a hurry, a user may type “loptop” instead of “laptop”. This shouldn’t make your website search stumble – it must recognize the query and generate the necessary result: “loptop” → “laptop” → list of available laptop models.
Unconfigured cart autosave
All selected products should be correctly displayed in the cart. If a user adds three blankets from the product page, they must immediately appear in the cart. If not, it’s a huge usability mistake that undermines your conversion.
When a user buys several units of the same product, the problem is less noticeable.
|Selected on the product card||Displayed in the cart||Additional action the user needs to take|
|3 blankets||0 blankets||Change 0 to 3 in the cart|
Everything takes a different turn when the user wants to purchase multiple products. In this case, cart usability issues can make them bounce.
|Selected on the product card||Displayed in the cart||Additional action the user needs to take|
|3 blankets||0 blankets||Ok. I need to recall the number of units and indicate them again for each product|
|10 pillows||0 pillows||↓|
|20 duvet covers||0 duvet covers||It’s difficult because I haven’t made notes and don’t remember|
|5 kid’s clothes units||0 kid’s clothes units||↓|
|8 bottom sheets||0 bottom sheets||What a poor design and usability…I’ve wasted so much time. Why don’t they fix the cart?|
|2 mattresses||0 mattresses||↓|
|N products||0 units of N products||Enough. I’ll go to another store and buy there|
For conversion rate optimization, be sure to configure the shopping cart autosave. Don’t prompt your customers to double work – you risk losing them.
Bad usability examples and conversion issues.  is set as the default number of products in the cart. As a result, users need to take an additional step. They add a product to the cart and then select the number of units once more.
Even if the shopping cart autosave works smoothly, make sure your support team always calls customers back to confirm the order. Sometimes they mistakenly click on the Buy button several times, don’t check the cart, and order the wrong number of products. It’s also one of the bad usability examples that undermine customer loyalty.
Layout issues with website pages
Here is the golden rule of conversion rate optimization: Your website must look equally good in all browsers. When a layout falls apart, users will have difficulty completing the target action and may doubt your website’s credibility. Imagine a customer wants to place an order but fails because of the poor layout. If you are lucky, they will reload the page and try again. If not, they will just stop using your services. Always remember about website usability analysis and fine-tune your UX to avoid this.
Bad usability examples and conversion issues. Since the layout is broken, when you click the field, the screen automatically slides up.
When the screen slides, it feels like a bump on the user conversion path. In case such layout issues persist, the customer will very likely leave.
Poor usability examples and conversion issues. Social media icons overlap the text on the page.
When social share buttons are out of place, it looks strange and makes users distrust your company. Moreover, they may accidentally click on one of the buttons and open their social media account. It’s absolutely annoying.
Poor usability examples and design issues. Text is incorrectly displayed on the responsive website.
Text is the main type of content on most websites. It gives users what they are looking for on the web – information. Therefore, if your content is inconvenient to read, nobody will want to stay on such a website.
Bad usability examples. Because of the broken layout, bread crumbs overlap the title and the article doesn’t start below the main picture.
We’ve provided just some of the poor usability examples caused by layout issues. Nevertheless, they have one thing in common. The website looks strange and is inconvenient to use. In case you notice similar UX problems, immediately fix them.
A website button is a way to sign an agreement between a business owner and a customer. By clicking it, users state that they want to buy a product.
No button, no purchase.
For decent conversions rates, make sure to run regular usability testing of all website buttons.
Bad usability examples and conversion issues. The “Buy in 1 click” and “Buy on credit” buttons don’t work.
After users click the “Buy on credit” button, they should see a window with the schedule of monthly payments and credit terms. They won’t bother with calling your manager to clarify the details. It’s always easier to close the tab and find another website. The “Buy in 1 click” button is handy for returning customers who regularly buy from you and value their time. If it doesn’t work, such users will quickly switch to a more convenient online store. You should always be proactive with such conversion and UX issues.
Poor usability examples. The filters and color selection buttons don’t work.
If colors matter, customers should be able to check the product in different colors. In case they cannot do this, users will search the picture on other websites and place an order somewhere else.
Poor usability examples and conversion issues. When users click on the star rating, they are taken back to the header and nothing happens. Consequently, they cannot leave a review.
The broken rating and review functionality can make users think that website owners disregard their opinion. This causes distrust and a negative attitude towards the website.
Bad usability examples. Non-clickable banner on the main page.
Apart from being non-clickable, the analyzed banner also has no calls-to-action. Fortunately, website owners can easily fix this UX flaw. They just need to add a working “Learn more” or “Visit” button.
Non-clickable shopping cart
A shopping cart is a must-visit place before order confirmation. If the cart icon is non-clickable, many users won’t waste time on the unusual functionality and will buy from another online store. Hence, you’d better avoid experiments with the shopping cart and always make it clickable. And one more thing. Don’t substitute the shopping cart with creative synonyms, like trolley, basket, carriage, etc. Such names can confuse users and affect conversion rates.
Audio and video autoplay
As a website owner, you can publish anything you want. Even the photo of your granny. At the same time, users are free to choose what they read, watch, or listen to and when. By using audio or video autoplay in your website design, you violate users’ rights. They haven’t asked you anything yet, but you have already shown them a video.
Sometimes autoplay of media files is relevant, even Forbes uses it. Yet in more cases, unexpected sounds make users want to immediately close the website to never come back. You’d better avoid unnecessary risks and let users control the content.
Poor Website Logic Ruins Conversion
- Hamburger button on the main version of the site
- Website design without a logo
- Slider on the main page
- Non-highlighted links
- Excessive animation
- Distracting elements on website pages
- Pop-ups with the Close button
- Annoying captcha
- Obtrusive pop-ups
- Mandatory registration to place an order
- Too complex registration
- Hidden password
To ensure high conversion rates, you need to make every stage of the sales funnel easy and predictable. When website visitors make lots of unnecessary actions, they get irritated and leave. Such user experience will never generate sales.
Hamburger button on the main version of the site
Hamburger button is three horizontal bars that open the website menu when clicked. Intended for a responsive layout, this UX design element is used to simplify website navigation on narrow screen devices.
If you choose the same design solution for the main version of the website, its usability will suffer. Visitors will need to complete a useless additional action to find the necessary information. This increases the risk that the next time, they will opt for a more convenient website with better usability.
|No burger menu||Burger menu|
|Users visit a website → select the necessary menu section → complete their goal||Users visit a website → click the hamburger button → select the necessary menu section → complete their goal|
Use the hamburger button only for responsive website design. The main version should have a simple linear menu.
Website design without a logo
Logo is a typical element located in a website header to increase brand awareness. It is commonly used with a favicon – a small icon displayed at the top of an open tab. Quality logo and favicon always make the website design more memorable and boost conversion. Without them, users will quickly forget your brand.
Slider on the main page
Banners are largely placed on main pages. But you need to note that only 1-5% of traffic goes there. Besides, many sliders don’t display on mobile devices properly and cause the same usability issues as horizontal scroll websites. Quality sliders are often pricey, whereas cheap alternatives spoil your website design: users go to the website → see inconvenient sliders → leave the page or just hate your UX.
To avoid such problems, just refuse from sliders on the main page. Substitute them with simple design solutions, including text elements, graphics, and videos.
Links help to keep visitors within the website. A user reads an interesting article → sees an additional useful link → clicks on it and remains on the site. If a link is hard to notice, people won’t follow it and will leave your website sooner. So make sure to highlight all links.
|Non-highlighted links harm conversion. (learn more here).||Non-highlighted links harm conversion.|
To nudge customers into following links, you can repeat them at the end of the article. This will make users more likely to visit related articles.
Any multimedia element should be used for a reason. It can entertain, tell a story, improve the UX, help to understand the topic, etc.
When a page includes too many animations, they impact navigation and usability. The contrast between primary and secondary design elements suffers and everything turns into a mess. As a result, users stop paying attention to animations or may even exit the website.
|Animation Animation Animation|
TextAnimation Animation Animation
TextAnimation Animation Animation
Avoid redundancy and focus only on important animations to improve conversion.
Distracting elements on website pages
Follow the same design principles you used for excessive animations. Run usability testing and remove all useless elements from the page. The only exception is when such elements are intended for enhancing website design and making it more appealing.
If you cannot afford quality design elements, you’d better avoid them altogether. A poor design won’t benefit your conversion rate optimization strategy and website usability.
Pop-ups with the Close button
Perceive a website visitor as your guest. They should be free in all their choices and interactions. A pop-up design without the close button kills this freedom and makes users feel uncomfortable on your website. Next time, they will go straight to your competitors. If you want to save your conversion, always use pop-ups with the Close button.
CAPTCHA is a useful solution that protects pages from the influx of robots. In this respect, it’s quite beneficial. Everything goes wrong when the captcha is incorrectly configured and treats every new visitor as a bot. A user opens the website to read an article but has to waste time typing random letters and numbers. When the captcha is damaged or too long, the situation gets even worse. Users are more likely to close the page than decode it.
If you don’t want to lose your target audience and conversion rates, run website usability analysis and check your captcha. It must be compact, unobtrusive, and well-configured to better distinguish a real user from a robot. reCAPTCHA is a recommended option.
Pop-up is a banner that urges users to complete a specific action/conversion (e.g., subscribe to the newsletter, provide a phone number, or follow the link). Mainly used for advertising, pop-ups often annoy website visitors when they are irrelevant:
|What a developer thinks||What a user thinks|
|We need to show ads to new customers||This website seems to have interesting content|
|Let’s add a pop-up||I haven’t read anything but they are already offering something irrelevant|
|For better CRO, pop-ups should include a lot of interesting offers||Should read about this on another website without adds|
Pop-ups can help you with conversion rate optimization (CRO) if you do it right. Just be sure to make them useful and display when a user has already checked a portion of the content.
Mandatory registration to place an order
If your online store design has mandatory registration, get ready for low conversion rates.
To safely collect user data, explain the benefits of registration and automatically register customers after the first purchase. Email the newly registered customers their passwords and offer to change them.
|Users cannot purchase products without registration||After users register, they can purchase all products in one click. They will also regularly receive email updates on discounts, special offers, and bonuses.|
Losing customers is always easier than collecting their contact details. Don’t forget about regular website usability analysis and detect anything that confuses or upsets users. Don’t be too pushy. And, finally, don’t send spam and useless ads. Promised bonuses? Great! Start with the information about the bonuses and only then process with some ads. That’s the only way it works and improves conversion.
Too complex registration
If a user decides to register on your site, it should take less than a minute. A quick registration procedure is essential for your UX and conversion rate optimization (CRO). When a registration form is too complex, packed with mandatory fields, and comprises several steps, users are more likely to abandon it than to complete the target action.
In case users have to provide a lot of mandatory data, try to make this procedure as simple as possible. For example, you can integrate a plugin to automatically obtain the necessary details from social media. Another design option is to ask for an email, name, and phone number for the initial registration and allow customers to add the remaining details later in their profile.
To ensure good user experience, sometimes you need to enable people to see what they type. Hidden passwords (****) are must-have for online banking and services that store money or important user documentation. This design solution provides an additional level of security and improves website usability. For example, if you decide to use online banking in a crowded cafe, nobody will be able to see your login details.
In other cases, there is no point in hiding a password since it just complicates the login process. If you don’t want to make the password field open by default, at least allow users to choose the option they find more convenient.
Smooth navigation and positive user experience are a secret weapon of websites with low bounce rates. Navigation bottlenecks, contrarily, prevent users from finding what they want and harm conversion. Find out more about common website navigation issues and eliminate them to reduce your bounce rate.
Pagination is the process of dividing a product catalog into pages. Search bots check these pages right after the main page. Thus, an online store with poor pagination usually has bad ranking, low sales, poor usability and conversion.
|Main page||Pagination pages|
|Tells what customers can buy in the online store||Include the assortment of products|
|Pagination page #1. Products 1-30|
|Pagination page #2. Products 31-60|
|Pagination page #3. Products 61-90|
To configure pagination, you need to add a unique title, description, and H1 header. Also, make sure the text from the main page isn’t duplicated on the pagination pages.
Poorly thought-out user paths
Browsing a website, users should always know what actions they can take and what will happen next. If not, they easily get confused. Such usability issues result in conversion decline and must be immediately fixed after usability testing. To better understand how poor navigation affects conversion, let’s analyze the example of a 1 click purchase.
|User’s actions||Website owner’s actions||Consequences|
|Registered in the online store||Received the order placed through the “Buy in 1 click” button||The user refused to receive the product they didn’t want to buy|
|Tapped the “Buy in 1 click” button by mistake||Didn’t double-check the order since the buyer was authorized||The online store owner blacklisted the user|
|Didn’t plan to buy anything. Believes that the purchase was not completed since no related tips were displayed||Sent the product||The user went to competitors and left negative reviews about the previous website on all forums|
Here’s another poor usability example. Imagine you need to contact the support team and a callback request is the only way to do this. You provide your phone number but don’t receive any notification. As a result, you have no clue whether the request was delivered, when you will get the reply, and whom you should contact if the issue is urgent. This looks like a valid reason to order from another website with better UX and usability. At this point, many users will interrupt their conversion path on your website.
Design and usability mistakes. After the number is provided, no request confirmation is shown.
And the third example of common design and usability mistakes is related to poor navigation. The website has issues with product card design and functionality. Users cannot change the number of units on the product card. Besides, they cannot delete the selected product from the shopping cart. No tips, no explanation. Users will quickly get disappointed and never attempt to buy in this store again.
Design and usability error. The number of selected units isn’t displayed on the product page, and there is no way to change anything. Even when users proceed to the next step, they cannot select the number of units.
Don’t use confusing features and show clarification tips at each stage of the customer conversion path. It’s an easy way to avoid usability and conversion issues.
Breadcrumbs are a web design solution that shows how users have navigated from the main page to the current section step-by-step. Usually located at the top of the website, they enable users to return to one of the previous sections in a click. For example, you can instantly go from product 10 to product 2.
|Home page → Contacts → Catalog → Product 1 → Productр 2 →… → Product 10|
Apart from enhancing website usability and conversion, breadcrumbs also boost SEO. They interlink pages and improve behavioral factors important for search ranking. Without breadcrumbs, your website design will be difficult to navigate and users will need more time to find the necessary section.
No Home page button
Home (or main) page is the place where users always return when they get lost on their conversion path. If your website doesn’t have the main page or a button to instantly access it, your conversion rates will suffer. Once users face any navigation issues, many of them will close the tab and look for a more convenient resource. If they could go back to the home page, they would be more likely to stay. To make your home page design even more useful, you can include your website structure there.
Note. Home pages aren’t mandatory for online stores.
No on-page navigation
Extensive articles must have separate navigation. It takes just two steps to implement it:
- Install a plugin that automatically generates a content outline based on the subheadings used in the article. The outline is added at the beginning of the article for quick navigation and improved website usability.
- Add the Up button to return to the content outline in a click.
If an article is short (3-5 scroll screens), there is no need to add navigation. Users will find the necessary information without additional design solutions.
Incorrect website-level navigation
The key purpose of website navigation is to create an order. If the navigation is complicated or unclear, users won’t manage to fully explore your website. They will leave too early without completing the conversion (e.g., placing an order, leaving a phone number, or subscribing to updates).
Design and usability issues example. The menu has a wrong order of categories. It’s not clear which section is the main one and which are secondary.
Duplication is another common website-level navigation mistake. The Accessories section includes the Accessories subcategory that may puzzle website visitors. Because of the poor usability, potential buyers will have troubles finding the product they want.
Design and usability issues example. Accessories is used both as a category and subcategory title.
Also, make sure to include the first-level menu on all website pages. Such a design solution is critical for conversion rate optimization (CRO) and quality UX. Without it, users will spend a lot of time switching between the categories and viewing different products. And nobody likes wasting their effort on usability issues.
Design and usability issues example. Since the first-level menu is missing, users cannot go to another category in one click.
Run website usability analysis to implement flawless navigation. Think like a new visitor who has just landed on your website. Is it easy to find the necessary information with the current menu? If no, consider changing the navigation path.
Website Design and User Experience
- Low-quality website design
- Inconvenient text format
- Disproportionate Images
- Wrong text and background combination
- Poor text design and structure on website pages
- Confusing links in the interface
- Wrong color selection
- Excessive advertising
- Weak call-to-action
- Low-quality images on product pages
- Missing or excessive illustrations
- Poor layout of social buttons
Design elements can make users love your website or hate it. Thus, design issues directly impact user experience and repel people from browsing your website. Low conversion rates are an inevitable result of such problems.
Low-quality website design
Web design should attract new visitors and make every user interaction smoother. Decent design always boosts conversion. Poorly thought-out, outdated, or too creative design harms conversion rate and needs to be fixed immediately.
Poor design example. The website looks like a jumble of elements on a red background.
Creative designs pose a true challenge. They require a lot of experience, skills, and delicate taste. Thus, if you have any doubts about your idea, it’s better to opt for simple and classic design solutions.
Design and usability mistake example. These unusual website filters don’t look like filters.
The beauty of the complex design is often visible only to the website owner who pays for it. Users prefer not too bright and well-structured pages that are easy to use. As long as they have good UX and perform their functions, it’s enough.
Design and usability mistakes example. A rubricator is more similar to a quiz
Quality design doesn’t have to be expensive and bulky. If you power a simple minimalist website with flawless customer experience, this will be enough to attract loyal customers. Satisfied customers → increased sales → investment in website design.
Inconvenient text format
Text should take 60-70% of the page width. When it’s too narrow, the text turns into a long unreadable piece of content without structure. When the width is set to maximum, this piece of text just stretches horizontally. Readability and usability remain equally poor. Especially, if website owners use serif fonts.
Never forget about your website users’ comfort. Be sure to run a comprehensive usability analysis to evaluate every detail, including readability.
All website visuals should have the same style. Of course, you can use some bright accents, but they must match the overall design and don’t confuse users. For example, an article with a product description can include images with different proportion and scale. Users will understand that these pictures are necessary to show several properties of one product.
Yet never change proportions in the main catalog. It won’t be clear why some images differ from others.
Poor usability examples. Since the image in the header is too high, users are forced to scroll the page. Website owners can easily solve this issue if they reduce image height by 50-70%.
Problems with proportions usually arise with responsive layouts. That’s why you need to test your design on the maximum number of devices.
Bad usability examples. The elements on this mobile website version aren’t proportional. The first image is much larger than the other.
Disproportionate images make your website look messy and unprofessional. If a user notices this (which is very likely), next time, they may opt for a website with better design. Each time someone leaves your website design, you lose conversion rate.
So don’t forget to run regular usability analysis to detect such issues before they harm your conversion.
Wrong text and background combination
Black text on a white background is a perfect design choice as well as white text on a black background. Of course, you can combine other colors as long as they don’t merge or affect readability. To understand whether the text and background are suitable, make sure users can easily read all content at a glance.
|Black text and white background||White text and black background|
|Blue text and light blue background||Red text and dark blue background|
If you don’t pursue a special design goal, pick black text on a white background. No need to experiment with colors purely for an aesthetic effect. You’d better invest your effort in content. Users will definitely appreciate this and conversion will grow.
Example of wrong color combinations in illustrations.
Choose text and background for a responsive layout with particular care. When displayed on mobile devices, any information is more difficult to read. Color issues repel customers more than you think.
Design and usability error. The text in a responsive version is illegible.
If for some reason, the white-black classic doesn’t work for you, you should note one thing. Different gadgets render colors in different ways. In case everything looks good on your computer, this doesn’t mean that a user with a budget Android smartphone will enjoy the same display and quality as you do.
Poor text design and structure on website pages
Nobody likes reading an unstructured text without any paragraphs, subheadings, lists, images, and separate blocks with important information. Such content cannot hold attention long enough to convey the message. Even if the article is extremely interesting, most probably, users won’t read it and will interrupt their conversion path.
Stuffy unstructured text.
Text design isn’t a magic wand that drives conversion. Yet it considerably increases your chances to engage a larger share of the target audience.
Designed and well-structured text.
If a website specializes in elaborate articles written by experts and doesn’t have competitors in the selected niche, website design may be less crucial. – You are an opinion leader and don’t need to waste time on visuals. In all other cases, quality design is required to improve the conversion rates of each article.
Confusing links in the interface
All links should be easy to notice. If not, users won’t visit the recommended page and, consequently, won’t stay on your website longer. Or someone may accidentally click on the hidden link and get frustrated because of unwanted content. So don’t get too creative with links turning them into a quiz.
Poor usability examples. Since the icon isn’t aligned with the text link, after clicking the icon, users aren’t forwarded to the requested page.
There are two things to keep in mind while working on the links in an interface: users should be able to recognize a link and know where it takes them. The first task is solved with the right design, the second one – with additional pop-up tips.
Wrong color selection
Colors are an important component of any design and usability. They affect mood and make users feel comfortable reading your content. When the color scheme is poorly chosen, even high-quality content can get tons of negative reviews. And vice versa, visitors are likely to forgive you minor mistakes in exchange for pleasant user experience
If you want to design an appealing colorful website on your own, learn the basics of coloristics. Many tips and tricks are hard to put in a few words here. Once you choose the color scheme, engage a focus group to ask what they like or want to improve. This should help you achieve good usability and high conversion rates.
Color design lesson.
If you don’t want to dive into coloristics and spend time picking a color scheme, leave a white background. Sounds too trite? Well, Apple uses white and has no problems with conversion rates.
Modern users have an inner anti-ad detector which helps them automatically skip online ads while browsing. Hence, two articles with one and ten banners each will yield almost the same result. Moreover, the article with one banner won’t annoy users since it very softly and unobtrusively offers something. The article with ten banners contrarily causes disgust and the feeling that the author tries too hard to peddle the advertised product. That’s why to avoid criticism and optimize the conversion, be sure to show quality ads and know when enough is enough.
A call-to-action summarizes your offer in a few words. It’s like a handshake you exchange after discussing the terms of the deal. It’s important to include a call-to-action in every advertisement and choose the right wording or design for conversion rate optimization.
Conversion rate optimization (CRO) issues. The banner has a weak call-to-action.
Without a call-to-action, many potential buyers won’t choose to make the purchase or will postpone it. Luckily, this conversion issue is easy to fix.
Conversion rate optimization (CRO) issues. The call-to-action is weak since there is no clear offer in the banner or text.
CTA issues are common in subscription forms. As a result, website visitors rarely use forms even if they are in plain sight.
Conversion rate optimization (CRO) issues. A weak CTA in the subscription form.
Sometimes a CTA disappears on the responsive version of a website. It’s a technical flaw you have to promptly detect and fix. Regular website usability analysis should help with that.
A broken CTA in the responsive version of the website
A CTA yields meaningful results only when combined with a banner image. When used separately, both lose effectiveness and go unnoticed.
Conversion rate optimization (CRO) issues. Example of a banner without a CTA and clear offer
If you use a CTA, make it convincing and clear. Note that it also should match the design of the banner and look relevant. Otherwise, a part of potential customers will just ignore your offer.
Low-quality images on product pages
The majority of users check images before reading content. Therefore, pictures should always be sharp, polished, and relevant. This helps to create the right perception of the product and show it from different angles. Users make decisions more quickly and conversion rates grow.
Design and UX issues. Example of a low-quality product image.
To quickly solve the problems with image quality, buy a budget portable shooting box (photobox). It’s an affordable accessory that will add a professional touch to the images in your online store.
Missing or excessive illustrations
We have already mentioned that the quality of image design strongly influences buying decisions. So if you are selling something, at least one image is a must. At the same time, when a page is overloaded with illustrations, this may repel some users. To avoid such an effect, combine pictures with videos. For example, you can shoot a product from different angles and complement the pictures with a video on unboxing and possible uses.
Poor layout of social buttons
If social media buttons have a low-quality design or look confusing, many users won’t click on them. As a result, these people won’t continue discovering your content on social media, and conversion rate optimization (CRO) suffers. To save yourself conversion issues, be sure to invest in a professional layout.
Design and usability mistakes. Poorly designed social media buttons and the Instagram widget is outdated.
Apart from design issues, there are two other problems that often happen with social media buttons. First, technical glitches can make the buttons unclickable. Since you cannot secure yourself from this, regular usability analysis of all interactive elements is life-critical. The second problem is the wrong selection of social media. For example, if the majority of your customers use Telegram, which you don’t support, conversion rates will considerably drop. You can either consider the preferences of your target audience or get ready to lose them.
- The main offer isn’t clear
- No warranty
- No tips for tricky products
- Online chat without a manager
- Quantity of available goods isn’t displayed
- No information on delivery and payments methods
- Confirmation letter isn’t sent
- Grammar issues on website pages
- Outdated information
- Low-quality blog content
- About Us and Contact Us pages are missing
- Too long product and/or category page
- Product pages without description
- Poorly thought-out product card design
- No headings and subheadings
- Inaccurate headings and subheadings
- The most useful ideas aren’t put first
- Ignoring lists
If your user experience sucks, even the most advanced marketing won’t save the website. That’s why you need to regularly test usability, especially before running Google Ads campaigns. Only then your marketing efforts will start yielding meaningful results. Note some other widespread website marketing problems below.
The main offer isn’t clear
The main offer is the type of services or products offered on your website. Users should be able to grasp it within the first three seconds. Selling pre-owned Apple devices? Place the product catalog on the main page and publish additional information, such as news or blog posts, on other pages. If you do it vice versa, the main website offer will be fuzzy. When users cannot understand what you sell, a part of them won’t waste their time on clarifying that and will go to competitors.
Product warranty shows that a seller feels certain of its quality and can guarantee the product will serve you well. Let’s analyze two online stores selling MacBook Air 2018 at $1900. The first store doesn’t provide a warranty, whereas the second one offers a 12-month warranty period. Guess what? The majority of buyers will opt for the second store, of course. Trust is essential for conversion rate optimization (CRO).
MacBook Air 2018 is an example of the product sold at approximately the same price in all online stores. The seller with the best warranty wins.
If you sell disposable or perishable goods, warranty is most likely not the case. Yet, you can come up with an equivalent alternative. For example, a flower online store can offer free delivery or a discount system for regular customers.
No tips for tricky products
Some products are more difficult to choose. If you sell anything that may cause questions or concerns, your website needs tips. Such a solution is particularly handy for various devices and appliances.
Explain everything that may even theoretically confuse users with tips. Remember John we mentioned at the beginning of our article? Now, do your best to help him. This guy knew nothing about phantom power and left the store that failed to provide this information. If you doubt whether to add or not to add the tip, add it. Tips can’t hurt experts but often help amateurs.
Online chat without a manager
The sale of any product has nuances a programmed chatbot with ready-made FAQ answers cannot always cover. Only a living person – your manager – can clarify them. If you won’t be able to answer customers’ questions immediately, they will go to the store with live support. Besides, when a manager directly communicates with interested consumers, they can increase the average check by recommending related products. Effective for every fourth customer.
Quantity of available goods isn’t displayed
Imagine a situation. A large IT company opens a new office and buys forty Dell P2418D monitors. The representative of the IT company goes to the online store → places an order → receives an invoice with the exact delivery time. Based on this deadline, the company establishes the work start date for the new office and informs the employees about it.
If a company needs forty Dell P2418D monitors, its managers must know whether they can buy all the necessary devices in one place. Usually, wholesale purchase is discounted.
The next day, the manager of the online store wants to send the order when it turns out that they don’t have the necessary number of monitors in stock. Instead of 40 units, they have only 10. The manager informs the customer about the problem. The representative of the IT company cancels the order since they need to use the specified type of monitors according to the corporate standard. Besides, the customer will be forced to cover every day when the employees come to work but cannot perform their duties.
It’s a safe bet that the IT company will never order from the problematic online store again. This case is just an example, but it shows why the information on product quantity is critical for conversion. Keep this in mind while designing product cards for your website.
No information on delivery and payments methods
Delivery and payment processing fees can increase the initial price of the order by up to 15%: a user selects products for $100 → pays $115 in total. Therefore, it’s essential to detail all the delivery services and payment systems supported in the online store:
- If the choice is extensive, users will be able to select the most suitable payment method and delivery time. They can pay more to get the product faster or wait longer and save.
- If there is no choice or it’s very limited, users at least will be aware of all the fees in advance. This minimizes the risk of any claims or complaints after the delivery.
Online store owners must always provide customers with full information and give them a choice. If they don’t do this, conversion rates will steadily decline.
Confirmation letter isn’t sent
Buyers often forget order details, whereas carriers don’t always notify about the delivery in time. What a horrible combination for your conversion rates, right? As a result, the online store owner is likely to lose customers and waste money on shipping charges. You can easily avoid this by sending a duplicate order confirmation for each order to customers’ emails. It’s an effective conversion rate optimization (CRO) technique.
Enrich your website pages with quality content to boost conversion rates. When people see that you are well-versed in the topic and can help to solve their problem, they are more likely to convert.
Grammar issues on website pages
Make sure any text content you publish on the website doesn’t have errors and typos. Grammar mistakes undermine your brand image, usability, and user trust. Sounds pretty logical. If website owners don’t have time to proofread their content, they will also lack time to complete their customers’ orders right.
It’s worth noting that even a large publishing house, where an army of proof-readers checks each sentence, isn’t immune from typos. Although grammar mistakes are inevitable, there are two ways to significantly reduce them:
- Double-check the content several times before publishing it.
- Follow the comments, where users criticize you for errors and typos.
Got a bad review? Say thank you for the help and fix everything. Quality content directly affects conversion rate optimization and usability.
Outdated content is a common problem among businesses that combine offline activities with online marketing. For example, a company that prints outdoor advertising has launched a website with pricing and additional information to attract more customers.
If it doesn’t update prices and content on a regular basis, potential buyers may feel cheated. Expecting to order business cards for $100, they will be disappointed to learn that the store already raised the minimum price to $200 six months ago. It annoys, causes mistrust, undermines conversion, and serves as a valid reason to never order from the company.
If for some reason you cannot update the information, temporarily hide the page with irrelevant data. Display the contact details of your manager instead. They will communicate with customers and answer all their questions.
Low-quality blog content
Blogs should boost overall website performance and benefit conversion rate optimization. Therefore, any content that doesn’t improve conversion rates has questionable quality. For example, if your website sells lawn mowers, the blog should also be dedicated to the sale of lawn mowers. Customers come to the website → they aren’t sure which model of lawn mowers to choose → they go to the blog and read reviews → get the necessary answers → place an order or seek advice. That’s what quality content design is.
And now imagine that customers visit the blog and see cute puppies on fresh-cut grass instead of tips on how to choose a lawn mower. Such content is useless since the photos don’t help to select the right product. Most probably, the customers will decide to look for the necessary information somewhere else.
About Us and Contact Us pages are missing
The About Us page is the only place on a website where a company can praise itself and boast about its achievements. Use it to show why you stand out from competitors and explain the benefits of cooperation with your team. If the About Us page is missing or doesn’t have enough information, people won’t trust you.
To make a useful About Us page, answer the following questions:
- Who are you?
- What is your mission?
- What you can and cannot do?
- Why do you specialize in?
- With what unusual problems can you help?
- What awards and qualifications do you have?
The Contact Us page is crucial for good website UX and usability. All users that want to place an order or get more specific information go there. If they don’t find the necessary answers, you’ll lose them.
Too long product and/or category page
There are no limitations on the word count and page length for blog content. As long as the article is useful to readers, you can write as much as you need.
When it comes to the usability and design of product pages, length matters. Users don’t like scrolling long pages. They get tired, don’t reach the bottom, quickly lose interest, and abandon the purchase. Only those who would buy a product even without a description stay.
Design and usability issues. The catalog page is too long.
Yet this usability rule has an exception. When you sell a complex multi-component product and need to describe every detail, the page design can include more information than usual and have any length. Usability testing and user behavior analysis should help to determine the optimum volume of page content.
Product pages without description
When the online store is launched in haste, many pages often remain blank. In the best-case scenario, they have photos, brief characteristics, prices, and the contact phone number, in the worst-case – absolutely nothing. Without a product description, it may be difficult to understand what is sold and why you need it. In this case, even if the price is favorable, potential customers are likely to prefer competitors who provide in-depth information about their products.
Conversion and usability error. Description on the product page is missing.
Sometimes you can substitute text description with video reviews. However, even with a video, be sure to briefly list the main characteristics of the product. Users will watch a video review → take a glance at the key features → make a purchase decision/conversion. Text notes considerably simplify the decision-making process and enhance usability.
Poorly thought-out product card design
Product card is an online store page that details the characteristics of the offered product. A proper product card should have two versions, short and extended. The short one lists only the most popular and important features that make consumers buy this product. The extended design includes technical details.
Product cards with a poor structure have one type of description. When a page provides only a brief overview, it repels experienced buyers interested in nuts and bolts. On the other hand, when there is only an extended description, newbies are likely to bounce. To avoid this, test product cards during the website usability analysis and develop the most suitable page design.
No headings and subheadings
Headings and subheadings perform several important functions at once. They tell what the content is about and help to quickly find the necessary information.
|Without headings and subheadings, the text will look like a long pool of words.||Why text must include headings and subheadings|
Without headings and subheadings, the text will look like a long pool of words.
|Since reading such content is hard as hell, users will likely leave your website without making a purchase.||What if you don’t structure the text|
Since reading such content is hard as hell, users will likely leave your website without making a purchase.
|That’s why you need to always structure information. Improved conversion and usability are guaranteed.||How to avoid such problems|
Always structure information. Improved conversion and usability are guaranteed.
Most probably, you started with the right column that has headings and subheadings. It’s structured, provided in logical portions, and easy-to-read. The left column is a mess.
Now you know what your website visitors think. Don’t disappoint them, remember about the structure and usability.
Inaccurate headings and subheadings
Online readers often scan text diagonally to get the main idea of the content. They pay a lot of attention to headings and subheadings. Therefore, if you don’t create well-thought-out, clear headings, your conversion rate optimization will suffer.
|You cannot live without headings and subheadingsWithout headings and subheadings, the text will look like a long pool of words.||Why text must include headings and subheadings|
Without headings and subheadings, the text will look like a long pool of words.
|Never do this|
Since reading such content is hard as hell, users will likely leave your website without making a purchase.
|What if you don’t structure the text|
Since reading such content is hard as hell, users will likely leave your website without making a purchase.
|Cut and classify|
Always structure information. Improved conversion and usability are guaranteed.
|How to avoid such problems|
Always structure information. Improved conversion and usability are guaranteed.
|After scanning the article, website visitors don’t get its main idea → They don’t trust you||Website visitors understand the main ideas of the article without reading it → They trust you|
The most useful ideas aren’t put firstIf a reader doesn’t have a very strong reason to read your content, they won’t. Only engaging headings and subheadings can spark their interest. Remember that it’s easier to close the page than waste time puzzling out its content. Always keep in mind the diagonal reading method while writing articles.
If after scanning your article, users decide to read it, the introduction is the first thing that attracts their attention. The first paragraph should state the main idea of the publication. Otherwise, a large share of readers will leave without reading the remaining content.
|The main idea isn’t clear||The main idea in the first paragraph|
|We don’t recommend investing in cryptocurrency for reason #1. There are also some other reasons, in a nutshell. Now let’s get to details.|
Investing in cryptocurrency is associated with increased risk. Hence, if you decide to invest, use only spare money. Below, we will provide five reasons why this approach is the best one.
|Investing in cryptocurrency is associated with increased risk. Hence, if you decide to invest, use only spare money. Below, we will provide five reasons why this approach is the best one.|
Try to always make the main point clear in the first paragraph. After that provide arguments. If you mix these steps, the conversion rate optimization will drop.
Lists have two main functions. They help to order information and improve readability. When a user sees a list and understands what this list is about, it’s much easier to perceive the information. Without lists, website visitors are forced to read everything.
|To voice audiobooks, you will need a microphone, a stand, a pop-filter, an acoustic screen, and voice processing software.||To voice audiobooks, you will need:|
4) Acoustic screen
5) Voice processing software
Always consider adding lists when you mention several heterogeneous things. If the order is important, use a numbered list. In other cases, you can do with a bulleted list.
Step #2. Analyze your website and note all UX and usability issues
Step #3. Fix the detected problems and run usability testing to make sure nothing affects your conversion
What design and usability mistakes are you dealing with? How much do they impact your conversion rates?
Share your experience in comments.