Why is website conversion going down? Examples of 60 errors in design and usability

Errors in design and usability are those flaws that cause visitors to criticize the site, do not want to buy anything, refuse to subscribe and go to competitors. Most often, these errors relate to technical faults, logic, navigation, design, marketing and content on the site.

In this article, we will look at examples of basic UX errors and highlight sixty common problems, the correction of which guarantees an increase in conversion.

If you doubt that you need it - read the story of the disgruntled Vasya. It tells how an online store lost a regular customer due to one mistake.

How did Vasya choose a microphone in an online store with poor usability?

Our friend's name is Vasya. He is a beginner youtube who needed a microphone for the voice of videos. His future microphone should have three characteristics: low price, clear sound and demand for Avito.
')
The last point is especially important, since the voice acting may not work out and our utuber will not mind returning a large part of the money invested. The requirements are formulated and Vasya goes for the microphone to the site of a trusted online store.

Due to the well-thought-out navigation, Vasya did not lose his head and quickly found the “Microphones” category.


When Vasya opened the “Microphones” category, he immediately ran into the first problem in the form of an ill-conceived categorizer filter. This filter is not suitable for beginners, because it requires an understanding of the microphone theme. Without it is difficult:


Since there were no clues in the rubricator, Vasya filtered the goods to the destination and chose studio microphones. The logic here is this: if the studio - it means quality. All the rest is secondary and incomprehensible.

In the “Microphones” section Vasya was greeted by a complex filter that the novice didn’t properly configure. If you know the topic - you can not choose a suitable microphone.


In the studio microphone category, Vasya arranged the goods in ascending price and chose the Superlux HO8 microphone for $ 50. This is the most budget option from the available studio microphones and, according to customers, it is worth the money. That is what you need for a beginner youtube. Vasya is making a purchase and has already agreed with the customer on the voice acting of the first video.

Vasya's choice is a Superlux HO8 microphone worth $ 50.


Vasya waits for the package, prints his microphone, connects it to the computer and receives a disgusting sound. It's all about phantom power, without which the Superlux HO8 can not fully function. This moment in the item card is given one line, which Vasya missed due to inexperience.

Phantom power supply is an additional element, without the purchase of which the Superlux HO8 studio microphone will not sound normal. This moment is registered in the item card in one line, which an unprepared beginner will easily miss.


Then Vasya began to independently collect information about the selected microphone and found out the following nuances:

1. On the website of the same online store the cheapest installation of phantom power ZEEPIN 48V. It costs about $ 37 and is available only on pre-order. The cost of more expensive installations starts from $ 65.
2. In addition to phantom power to the microphone Superlux HO8 need to purchase a stand and pop filter. The external sound card and acoustic screen for suppressing extra noise are not placed yet. All together, this is at least $ 100.
3. Instead of all of the above, a budget USB microphone could be purchased that could satisfy the needs of the beginner YouTube. For example, for $ 50, you can purchase Trust GXT 232; and for $ 85 - Blue Microphones Snowball iCE.

What happened in the end: Vasya in vain threw out the money and does not use the microphone he bought, and the owner of the online store has lost a regular customer.

Installing phantom power ZEEPIN 48V for $ 37.



To avoid losing the client, the owner of the online store should look at their products from the perspective of a beginner and make a bet on educational content - add tips, useful articles or videos to all complex products. If Vasya had found out about phantom power in a timely manner, he wouldn’t have bought a product that he didn’t need: he would go to the Superlux HO8 microphone page → he would learn about the phantom power from the opened prompts → go to an article detailing phantom installations → studied material about varieties microphones → would return to the list of microphone and choose from the available proposals the best option with a USB-connector. Everyone would be satisfied and continued cooperation. And so offense and care to competitors.

The lack of educational content is one of the many mistakes that online store owners make. We will discuss other issues later.

Technical part

Low download speed

Approximately 40% of users leave your site if they do not see its original appearance in the first three seconds. The same number of visitors will leave immediately after they click on a section and it will freeze again. To avoid this, you need to constantly conduct tests, optimize heavy images and check the download speed of fonts. Separate situation with the video - if without them in any way, then you need to invest additional funds and think about raising the productive capacity of the site. If the video can be replaced with text and images, then it is better to do so. Download speed is more important than the content format.

Long loading site.


The example shows that the site loading time is 9.83 seconds. This is an unacceptable option, because rarely when visitors wait more than 3 seconds.

Heavy image files.


Heavy pictures - this is one of the key factors affecting the speed of loading the site. Therefore, if you need to increase the speed - first of all, take care to reload images.

A large number of requests during page loading.


Amazon conducted a study and found that if the download speed of the site drops by at least 100 ms, then the sales conversion immediately decreases by 1%. To prevent this from happening, site owners are encouraged to conduct two types of tests. The first test should be carried out in real time and you can immediately calculate the slow pages. The second test should be periodic (once a week or a month) and by its results it is possible to correct all the slow elements.

Broken or broken links

If the user has moved to your site, then he was interested in some information and this is the information he should receive. If this does not happen and instead of the page you are looking for, a broken link will appear, the user will leave the site, blacklist it and always contact competitors in the future.

Not only users, but also search robots react negatively to broken links. When the robot finds a broken link, it makes the following conclusion: there is no new content on the site of an empty page → the site does not develop and the owner is not interested → the site can be lowered in search results.

Broken links in the program code.


Constant monitoring is the only way to avoid broken and broken links. When you find a malfunction, immediately correct the program code.

When you open the page in a new window.


Error 404


If your site has up to 100,000 pages, start monitoring at least once a month. If there are more pages, try to arrange weekly checks.

Not Optimized 404 Page

Page 404 is the empty place where a site visitor will go by clicking on a bat or a nonexistent link. If this page is not optimized, the user will immediately leave your site and for no reason will not return to it. If the page is optimized, there will be no traffic loss and the user will be able to move to the desired section.

Make sure that page 404 is not boring and empty.


To optimize your 404 page, follow these guidelines:

1. Briefly describe where the person went and why he is here.
2. Place a link to the main page of the site.
3. Post links to popular sections of the site.
4. Ask the user to report the error to the site administrator.
5. Get stuck with the design and make sure that the 404 page has been designed in the same style as the entire site.

Last tip - don't forget the humor. If the user smiles, you will win his location and can count on his further attention.

Poorly implemented horizontal scrolling

Horizontal scrolling is one of the ways to view the content of a site, when moving through pages does not take place from top to bottom (), but from left to right (). The problem of horizontal scrolling is that it is difficult to adapt it for different types of devices - if you do not allocate a budget and do not work through each element of the program code, the site will collapse and work incorrectly.


Web design studios like to work with horizontal scrolling, which prove their competence through such a complex multi-component action. If your budget does not allow you to order an individual layout for each type of modern gadget, then the site will not work out well. In this case, horizontal scrolling is not for you and you need to design a website with a classic movement scheme - do vertical scrolling.

Lack of adaptive layout

In 2019, more than half of Internet traffic comes from users of smartphones and tablets. In the future, this ratio may change or other devices will replace smartphones and tablets. Adaptive layout allows you not to depend on this trend and not to lose the conversion due to the technological preferences of the audience. That is, adaptive layout is when a site can correctly adjust to the width of any screen and display correctly on computers, tablets, smartphones and any other modern gadgets.

Site without adaptive layout.


If your budget is still limited and you cannot order an adaptive layout, then perform a partial adaptation of the site. Partial adaptation is when you customize the site to fit the screen width of the devices that your users most often use. In most cases, these will be all varieties of smartphones.

The site is not configured for ultra-clear Ultra HD monitors.

In 2019, most sites are oriented on monitors with two types of resolutions: HD and Full HD. In HD-screens, the pixel density is 1366 × 768 - this is the most budget monitors, which gradually lose their popularity. In Full HD-screens, the pixel density is 1920 × 1080 - these are the most popular monitors, the resolution of which most developers are guided by when setting up an adaptive layout.


Along with HD and Full HD monitors, Ultra HD-resolution screens (4K monitors) are gaining popularity. In Ultra HD-screens the pixel density is 3840x2160 - this allows you to achieve super-clear images with a detailed display of the smallest details on the site. You can also buy an 8K monitor, where the pixel density is 7680 × 4320.

Given this trend, we can assume that Full HD-standard will soon go into the budget category and the most popular monitors will be with Ultra HD-resolution. Therefore, it is important to conduct an additional test and ensure that all site elements are correctly displayed on 4K monitors. If you do not do this, then as users move to hypersensitive monitors, the conversion of your site will steadily decrease.

Non-working site search

A search engine on a website is such a tool, the frequency of use of which depends on the resource format: it is used infrequently on information sites, and in online stores it can completely replace the rubricator filter. Hence the conclusion: the search engine should be and always work correctly. If this is not the case, the user will not be able to quickly find the necessary information or product, leave the site, find all the necessary items from competitors and with a high probability will never return.

Wrong priority in search results.


When setting up a search engine, keep in your head the nuance that some queries are often entered with errors. For example, if the user is in a hurry, then instead of "laptop" can enter "laptop". For a search engine on the site, this should not be a problem - it should correctly recognize the request and produce the desired result: “laptop” → “laptop” → list of the necessary models.

Unset autosave in the order basket

Cart must duplicate all user purchases. This means that if a user has three blankets on a product card, then three blankets should appear in the basket. There is no problem if several items are purchased.

Things change a lot if the user makes a lot of shopping. In this case, the lack of autosave can lead to loss of the client.

Set up autosave in the basket and do not force your customers to do double work. Otherwise, you risk being left without regular customers.

By default, the basket of goods is "0". According to the analysis with the help of the click-through map, we see that because of this, the user has to perform one extra step: first add the item to the cart, and then indicate its quantity.


Even if the autosave feature is working properly in the cart - make sure that your managers always call back customers and clarify the order. Sometimes customers mistakenly click on the “Buy” button several times, do not check the cart and receive the wrong quantity of goods. This is also bad, so it's best to call back.

Problems with layout

The site should always be correctly displayed in all browsers. If the layout starts to fly, it will be difficult for the site to perform the planned useful action and visitors will have the impression that they are engaged in non-professionals. Imagine that the client wants to place an order and because of the flown layout can not do it. At best, he will reload the page and try again, at worst he will stop cooperating with you. This should not be allowed.

An example of the layout layout: click on the filling form → the screen automatically returns to its original upper position.


When the screen returns to its original position, it removes the user from the order. If the procedure is repeated at least once, you can remain without a client.

An example of a layout that has flown down: social network icons are being put on the text of the page.


If the buttons of social networks are not in their place, then it looks ugly and provokes distrust of the owners of the resource. Plus, you can mistakenly click on one of the buttons and open an additional site. It is annoying.

An example of the layout layout: incorrect display of text in the adaptive version of the site.


On most sites, the text is the main unit of content - the carrier of information for which the user is on the Internet. Therefore, if the text is inconvenient to read, then no one wants to work with such a site.

An example of a layout that has flown down: bread crumbs overlap the title of the article, and the text does not begin under the main picture.


Above, we have published only a small part of possible examples where the site may have problems with layout. The common thing in these examples is one thing: they make the site ugly and inconveniently readable. See something like that - fix it right away.

Non-clickable buttons

The button on the site serves as a contract between the owner and the visitor of the site. If this contract cannot be concluded, then there will be no deal. Therefore, if you place a button - check its clickability.

Example of non-clickable buttons: the “Buy on Credit” and “Buy in 1 click” buttons do not work.


After clicking the “Buy on credit” button, the user should see a page with the size of monthly payments and credit terms. Through the manager, all the nuances to figure out for a long time, so it is easier to close the site and see everything from competitors. The button "Buy in 1 click" is needed for regular customers who buy a lot and value their time. If the button does not work, then such users will immediately find a replacement for the inconvenient site.

Example of non-clickable buttons: filters for evaluation or final selection of alternative colors do not work.


If the color solution is important for the user, then he must see the product in the correct version.Without this, the picture will be searched on other sites and the order will remain where it will be implemented.

An example of non-clickable buttons: when you click on the asterisks, the user immediately throws into the header and nothing happens. Because of this, you can not leave a comment.


If the site has a non-working rating and a system with comments, then visitors may have an opinion that the site owner neglects their opinion. From here mistrust and negative attitude to a resource is formed.

Example of non-clickable buttons: a non-clickable banner on the main page.


In the example, the banner is not only non-clickable, but also composed without a call to action. To fix this - just add the working buttons "Go" or "More."

Non-clickable product basket

The product basket is a familiar place where online store visitors enter before confirming an order. If the “Trash” icon is made non-clickable, then many users will not want to deal with unusual functionality and make a purchase elsewhere. To avoid this - do not experiment with a basket of goods and always make it clickable icon. And another point: do not use other creative names instead of the word "Basket". There is a risk that users will not click on the "Cart", "Warehouse" or "Lukoshko".

Self run audio and video files

On the site you have the right to publish content in the format that you consider necessary. At the same time, visitors to your site have the right to choose which content format to watch and when it is best done. If you add an independent launch of audio and video files, then violate the rights of users - they did not ask for anything, and you decided to show the contents of the site for them.


Sometimes auto-reproduction of media files can be a good solution and sometimes even Forbes publishes this format. However, in most cases this causes the desire to immediately close the site and never return to it. Therefore, we advise you not to risk and not prevent the user from managing content.

Logics

Button "hamburger" in the main version of the site

The "hamburger" button is three horizontal bars, when clicked, the site menu opens. This technique is invented for adaptive layout and is used to transfer site content on narrow-screen gadgets.


If the same technique is used in the main version of the site, then navigation becomes more complicated and to search for the necessary information the user needs to perform one useless additional action. Hence the risk that the user will be inconvenient and the next time he chooses a site with more elaborate navigation.

Use the “hamburger” button in the adaptive layout, and leave the simple linear menu for the main site.

Site without logo

The logo is a familiar attribute that is located in the header of the site and is intended to increase awareness. Typically, the logo is used in conjunction with the favicon - a small icon that is highlighted in the browser tab before the name of the open page. If the logo and favicon are designed correctly, they help to remember the site and increase the likelihood of re-return. Without these attributes, remembering your site will be much more difficult.

Slider on the main page

It is worth considering that the main page is seen by 1-5% of all site traffic. Also, most sliders are poorly displayed on mobile devices and retain the same problems as sites with horizontal layout. A quality slider is sometimes expensive, and budgetary options immediately spoil the general idea of ​​the resource: the user goes to the website → sees an inconvenient and poorly crafted slider → leaves the page or begins to study the page with a negative attitude. To avoid this, it is enough to abandon the slider on the main page and spread out the presentation material about the site using simple design solutions: text, graphics or video.

Unselected links

Link is a tool to keep visitors on the site. The user reads the article he likes → sees an additional useful link → clicks this link and then remains on the site. If the link is unsuccessfully indicated, the user will have nothing to catch on and after studying the desired topic, he will immediately close the site. To fix this - you need to make the links visible.


To increase the likelihood of transition - you can collect all the recommended links and duplicate them in the conclusion of the article. So the user will see exactly what else to read on the selected topic.

Redundant animations

Any media file on the page should perform some useful function: entertain, tell a story or help deal with the topic. If there are too many animations, the page will be redundant and it will be difficult to explore. Also, the principle of contrast is violated and all important animations are mixed with minor ones. As a result, the user will not remember anything or refuse to study the overloaded page at all.

Do not allow redundancy and focus on important animations.

Distractions

Here you need to adhere to the same principle as with redundant animations: if a certain element does not work for a useful action, then it is better not to publish it on the page. Exceptions are allowed only in such situations when these elements are presented in the form of some kind of high-quality decoration, allowing to create a pleasant atmosphere on the site. If there is a problem with quality, then it is better not to use distracting elements - there will be less irritated visitors.

Pop-ups without the "Close" button

A site visitor is a guest, all actions of which should be only voluntary. If you add pop-up windows to the site and design them without the “Close” button, the user will not have any free choice. Because of this, he is guaranteed not to like your site and the next time he will choose a competing resource. Therefore, if you use arbitrary pop-up windows, be sure to add the large “Close” button to them.

Annoying captcha

Captcha is a useful tool that protects the page from the influx of robots. Therefore, captcha should be without it. The problem arises then, the captcha is incorrectly programmed and equates each new visitor to the bot: a person comes to the site for interesting registration → instead of learning the content, he must spend time entering meaningless numbers and letters for him. The situation is aggravated if the captcha is damaged or too long - it is easier for the user to close the page than to decode it. Therefore, in order not to lose the audience - make the captcha compact, imperceptible, rarely triggered and able to better distinguish a person from a robot. Norm option reCAPTCHA.

Obsessive pop-up windows

A pop-up window is a pop-up banner that encourages a user to perform a specific action: subscribe to a newsletter, leave a phone number, or follow a specific link. Pop-up windows perform an advertising function and are very annoying in those situations when a pop-up with a non-targeted message appears on the page:




If you make pop-up windows - offer something useful in them and customize them so that the user has time to at least explore the contents of the site.

Mandatory registration procedure

If the online store requires a mandatory registration before purchase, then get ready for a low conversion.


If you want to collect user data safely, simply explain the advantages of the registration procedure and make it automatic when the first purchase occurs. Password send by mail.


Collecting contacts of interested users is difficult, and easy to lose. So do not bother your subscribers, do not send spam and useless advertising. Promised information about lucrative bonuses - first talk about bonuses, and then you can insert some ads. So it is possible, and in another it is impossible.

Difficult registration procedure

If the user decided to register on your site, this process should not take more than a minute. When a registration form is too complex, oversaturated with required fields and consists of several steps, it is easier for the user to change his mind than to perform the proposed action.

If a user needs to enter a lot of required data for registration, think about how to simplify this process. For example, you can connect the plugin and drag the necessary data from social networks. Or you can split the registration into several parts: mail, name and phone number are entered first, and you can add all other information in your account.

Masking the password field

The hidden password field (****) is appropriate to use in online banking and on those sites where money is stored or important user documentation. In this case, a hidden password is required and is used as an additional protective measure. For example, if you decide to use online banking in a crowded cafe, you can log in and not worry about the safety of your account.

For all other situations, it is better not to use the hidden password field, since it complicates the process of logging into your personal account. If for some reason it is impossible to declassify the password entry field, then take care that users can turn this option on and off at their discretion.

Navigation

Unadjusted pagination

Pagination is the product catalog pages that are read by search robots immediately after the main page. If the pagination is incorrectly framed in the online store, then the site does not advance well and sells poorly.

If there is a large number of products of a certain category on the site, this category should be divided into pagination pages. It is necessary to add buttons for switching pages from the bottom of the article, a shortened list of all pages. Often, on the pagination pages you can find an additional button for displaying all the goods at once, you need to be very careful here and make sure that when updating the list of products, the URL will change to which noindex will appear in advance.

Unreasoned relocation scripts

Being on the site, the user must always know what actions he can perform and what will follow. As soon as some point is not agreed, confusion and problems with conversion begin. To be clear, let’s analyze this moment using the example of an uncoordinated purchase of goods in one click:

Here is another situation. Imagine that you need to contact the technical support manager and do it only through a request for a callback. You enter a phone number and do not receive any alerts. Because of this, you do not know whether the manager received your request, when to wait for an answer and where to turn if the situation is urgent. That is, a ready-made excuse to go to competitors has been formed.

The phone number is specified, but there is no confirmation that it was delivered to the manager.


To fix we analyze another case. Programmers poorly worked the site and users have problems with product cards. In the cards you can not change the number of units of goods and you can not remove the selected product from the basket. Since there are no tips, the user will quickly become disappointed and will not buy anything in such an online store.

The selected number of product units is not indicated and there is no possibility to change anything. If you switch to the next step, then the function of selecting the quantity of goods is not available on it.


Avoid rash scenarios and support each custom step with hints. This is an easy way to avoid conflict situations.

No bread crumbs

Breadcrumbs is a navigation system that shows a chain of user movement from the main page to the current section. "Bread crumbs" are usually displayed at the top of the site and with their help you can quickly move back and find the previously viewed section. We looked at product 10 - for bread crumbs you can switch to product 2 in one click.

In addition to the navigation function, bread crumbs affect seo-optimization: they create linking between other pages and have a positive effect on the behavioral factor. Therefore, if there are no “bread crumbs”, then it will be inconvenient for users to study the site for a long time and quickly find the sections they like.

Navigation on the main page

“Home” is the page to which the user will return if lost on the site. If there is no such page, then at the first problems with navigation some of the visitors will leave the site. In order for the “Home” page to perform more useful tasks, it is advisable to add basic headings in its description or tell about the entire structure of the site.

For an online store, this menu item can not be used.

No navigation inside site articles

For great blog posts, you need your own navigation. To prepare it, two actions are enough:

1. Install the plugin, which will automatically form the content of the subtitles of the article. This content will be displayed at the beginning of the article and with its help the user will be able to immediately start reading from the desired section.
2. Add the button "Up", which allows you to quickly move from any section back to the content.

If the article is small and fits in 3-5 scrolling screens, then adding navigation is not necessary. The user and so quickly find the desired material.

Formal navigation

Navigation is a tool that should help restore order on the site. If navigation is difficult or illogical, this will prevent the user from fully exploring the site and performing the necessary conversion actions: make a purchase, leave a phone number or subscribe to news.

The menu with the wrong ranking of categories is published below: the main section is not selected and secondary categories are not structured.


Another common mistake of formal navigation is duplication of positions. This is when the “Accessories” category can be found in the “Accessories” section. Such a coincidence needs to be removed and not confused by the user.

An example of a double menu items, when in the section and categories are used "Accessories".


Also, do not forget to ensure that all pages have the first level menu. If you do not add it, you will not be able to quickly switch to categories and browse different products.

An example of a product catalog without a top-level menu. Users do not have the opportunity in one click to go to the choice of another category.


To make the right navigation - put yourself in the place of a beginner who knows nothing about the site. Now ask the question: can such a novice quickly move through the published menu items and find the necessary information? If the answer is no, then the navigation chain should be reworked.

Registration

Inappropriate design

Design is a visual image that should attract the audience and simplify interaction with the site. Quality design works that way. An ill-conceived, outdated or overly creative design reduces all conversion rates and needs immediate correction.

An example of non-professional design. Here everything is mixed in one heap and covered with a red background.


The problem with creative design is that it is difficult to create. Therefore, if you doubt your idea, it is better to give preference to simple design techniques that will be understood by the entire target audience.

An example of creative design, when the filter system is not perceived as filters.


The beauty of a complex design can be appreciated only by the owner of the site who paid for this design. If the pages do not cut your eyes and everything is clearly sorted to them, then this will be enough for users. Remaining excess.

An example of a complicated design, when the usual rubricator of goods turned into a rebus. On the map of clicks we see that here the ability to interact with the corresponding icons is not clear to users.


High-quality design does not have to be expensive and cumbersome. If a simple minimalist style will be paired with quality services, then this will be enough to attract a loyal audience. There will be a satisfied audience → sales will increase → professional design will appear.

Inconvenient text column

The text should occupy 60-70% of the page width. If you make a narrow field, the text will stretch out and turn into an uncomfortable readable vertical sheet. If you use the maximum width, the inconvenient sheet will stretch horizontally. A complete failure is when serif fonts are added to the stretched text. Think of users and do not create unnecessary inconvenience.

Disproportionate images

On the website all the visual design should be performed in the same style. Accent elements are acceptable, but they must be carefully decorated and the user must understand them. For example, if you make a description of someone's product, then it’s permissible to insert images with different proportions and scale into the article - the reader understands that this is about different properties of the same product. At the same time, proportions in the general catalog of goods cannot be changed - here, without additional comments, it is unclear how some images differ from others.

An example of a too high image in the header. To get to the content - you need to scroll the page. The problem is solved by reducing the height of the cap by 50-70%.


Often problems with proportionality occur in adaptive layout. Therefore, it is important to check the design on as many devices as possible.

An example of incorrect distribution of elements in the mobile version of the site. The first image falls out of the catalog and looks more than others.


Disproportionate images create a sense of disorder and lack of professionalism. Therefore, when someone from the user pays attention to this, then next time he will go shopping on the site without such problems.

Incompatible text and background

Ideal - black text on a white background. About the same effect gives white text on a black background. You can combine other colors that do not merge with each other and allow you to easily read information from the site. If all the content is easy to read at a glance, then you have correctly selected the text and background.

If you do not have a special design task, then choose black text on a white background. No need to play with flowers just for the sake of beauty - it is better to spend the time saved in the production of content. Users will appreciate this for sure.

An example of poorly readable text in the illustrations.


You should be especially careful with text and background experiments in adaptive layout. On mobile devices, information is more difficult to count, therefore, the selection of colors should be approached with great care.

An example of unreadable text in responsive layout.


If for some reason the classic in the form of black text and a white background does not suit you, remember this nuance: different gadgets have different color renditions. If everything looks good on your computer, this does not mean that the user will have the same readability with a budget smartphone on Android.

Unprocessed text design

None of the users is interested in reading a solid text canvas with no visual attention controls: paragraphs, subtitles, lists, images, and individual blocks with important information. The eye does not cling to anything, so even if it is good, it is unlikely to be read.

This is a boring text sheet.


Text design is not a magical conversion tool. Simply with its help, the chances of attracting more target audiences are increasing.

Designed text.


If the site specializes in the publication of complex expert articles and no one competes with you in the selected topics, it is possible that the design of the text is not needed. You are an opinion leader and there is no need to waste time on registration. In all other cases, the design will help raise the conversion rates of each article.

Creative use of links in the interface elements

All links must be visible. If this is not the case, it will be difficult for the user to go to the recommended page and extend the time spent on the site. Or it may happen that a person accidentally clicks on a hidden link and gets angry because he is forced to watch the content that he did not choose. Therefore, the interface should not be creative and turn the links into a riddle.

An example of an atypical use of links in texts and elements. The icon is not merged with the text, so clicking on the icon will not lead to a transition to a new page.


When working with links in the interface, it is important to remember two things: the user must understand that there is a link in front of him and he must know where this link leads. The first moment is decided by the correct visual design, and for the second one you often have to use additional tooltips.

Unsuccessful color design

Color is an important part of any design. Color affects the mood and makes it so comfortable for site visitors to study the content offered. If the color scheme is chosen poorly, then even on high-quality content you can get a lot of negative feedback. And vice versa: if it's nice to be on the site, users will forgive minor errors.

If you are planning to design an attractive color website - see the basic lessons on color. There are many nuances that cannot be summarized in two words. When choosing a color scheme - organize a focus group and try to find out which solutions are successfully implemented and what needs to be improved.

Lesson color arithmetic.


If you are not interested in exploring colors and dealing with colors, leave a white background on the site. Apple uses this and customers are fine.

Excessive advertising

Modern users browse websites with an internal anti-radar, which allows them to ignore published promotional offers. Because of this, an article with one and ten advertising banners will have approximately the same effect. At the same time, an article with one banner will not be annoying, because it tells about a useful service in an unobtrusive manner. An article with ten banners causes disgust and the feeling that the author is trying with all his might to push the reader with the advertised product. Therefore, if you want less criticism, let's advertise honestly and dispense its quantity.

Unproduced call to action

A call to action is the final part of an advertising offer, which can be compared to a handshake after discussing the terms of a deal. Therefore, in any advertising, a call to action should be and it should be properly executed.

An example of a banner with a weak call to action.


If there is no call to action, then part of the audience will not decide to buy or transfer it to another time. This is your flaw, which is easy to fix.

An example of a weak call to action. There is no clear sentence in the button, in the banner or in the text.


Often not a weak call to action is found in the form of a subscription. Users rarely use this form, even if it is placed on the most prominent place.

An example of a weak call in the subscription form.


Sometimes the call to action disappears when the site is translated into an adaptive version. This is a technical problem that needs to be timely detected and fixed.

An example of a damaged call in the adaptive version of the site.


Call to action work well only in tandem with the banner image. One without the other gives a weak effect and often goes unnoticed.

An example of a banner without a call to action and a clear sentence.


Put a call to action - make it convincing and clear. Also, be sure to ensure that the call is well combined with the image of the advertising banner. Without this, some customers will order on other sites.

Poor quality images

Most users start learning content from viewing images. Therefore, it is important to ensure that these images are clear, well-processed and in the subject of the published material. This is how a complete history is formed, on the basis of which it is easy for the user to make purchasing decisions.

An example of poor quality photos of the goods.


To quickly raise the quality of images - buy a portable Chinese cube for subject shooting (photobox). This is an inexpensive accessory that will give all the images of your online store company.

Absence or excess of illustrations

You already know that on the basis of high-quality illustrations, the user makes a decision on the purchase of goods. Therefore, if you sell something, then you should have at least one image. At the same time, if there are too many illustrations, this can overload the page and scare some users away. To avoid this, combine illustrations with video. For example, take a picture of the goods from the basic angles and supplement the page with a video overview, which will include unpacking and scenarios of using the goods in different situations.

Badly designed social network buttons

If the buttons of social networks are incorrectly designed or look messy, then many users will not click on them and will not continue to get acquainted with your content on social sites. To avoid this - typeset beautifully.

An example of incorrectly designed social network buttons with an outdated instagram widget.


In addition to visual unattractiveness, with the buttons of social networks often there are two more problems. The first problem is related to any technical failures that make the buttons non-clickable. It will not be possible to insure against such a failure, so the site should be periodically tested for the performance of all clickable elements. The second problem may be caused by the fact that social networks are chosen without taking into account the interests of the audience. For example, if the majority of your readers use Telegram, and you are not working with this messenger, there will be a loss of traffic. In this case, you need to correct the situation or accept the loss.

Marketing

No clear main site suggestion

The main offer of the site is the subject on which your resource specializes. This is the main offer the user should consider in the first three seconds of being on the site. You sell used Apple equipment - put a catalog with available gadgets on the main page, and make a blog or publish news on other pages. On the contrary, it is undesirable to do, as this makes the main offer of the site clear. If the main proposal is not obvious, then some users will not understand anything and go shopping with competitors.

No warranty

Warranty is a sign that the seller is confident in the product and can vouch for its quality. Take two online stores where the 2018 MacBook Air sells for $ 1900. The first store works without guarantees, and in the second period the warranty period is 12 months. Under these conditions, the majority of users make a purchase in the second online store.

The 2018 MacBook Air is an example of a product that will be sold for about the same price in all online stores. Will win in competition site with the best guarantee.


If you sell disposable or perishable goods, then most likely you will not be able to issue a guarantee on them. In this case, nothing prevents you from coming up with an equivalent replacement. For example, in the business of selling flowers, you can introduce free shipping or cumulative discount system for regular customers.

Difficult products are sold without prompts

If you offer any high-tech product that is more complicated than a cheburek, then the site needs hints. In the tips you need to make all the concepts that even in theory, the user may have difficulty. Remember Vasya from the beginning of the article, who knew nothing about phantom power and, due to the lack of prompts, the online store lost a regular customer. If in doubt, put a hint or not - put. For those who understand the topic it does not hurt, and interested beginners will help out.

Live chat without a manager

Selling any product is connected with nuances that cannot be revealed with the help of a programmed chatbot that has to give out answers to frequently asked questions. About these nuances should tell a living person - the manager. If any of the users have a question and you do not have a live consultant on your site, then almost always the order will be left in the place where this consultant works. In addition, when a manager communicates live with an interested user, he has the opportunity to increase the average bill by recommending related products. Works on every fourth customer.

No information on the quantity of available goods.

Imagine this situation: a large IT company opens a new office and buys forty 2K Dell P2418D monitors there. A representative of an IT company goes to an online store website → places an order → receives an invoice indicating the exact delivery date and, starting from this date, announces to the employees the date of commencement of work in the new office.

If a company needs forty 2K Dell P2418D monitors, then it’s important for them to know if they can buy this amount of goods in one place. Usually wholesale purchase is cheaper.


The next day, the manager of an online store begins to collect the order and it turns out that there is no specified number of monitors in the warehouse: you need forty pieces, but there are only ten. The manager calls back to the customer and announces the problem. The representative of the IT-company cancels the order, because he has a corporate standard, the rules of which are allowed to use only the specified type of monitors. In addition, premature employees will have to pay a penalty for each day they go to work and cannot fulfill their duties due to the lack of a monitor.

It is easy to guess that in the guilty online store from this company there will be no more orders. Our example is contrived, but it shows how important information may be on the quantity of available goods. Keep this in mind when designing product cards on your own website.

No shipping data and payment methods

Carriers' tariffs together with the commission of payment services may add up to 15% to the original cost of the order: they chose goods for $ 100 → received $ 115 for payment. Because of this, it is important to register all delivery services and all payment systems that the online store supports:

1. If the choice is large, then the user will be able to choose the optimal tariff and delivery time. You can overpay and get the goods faster or vice versa - wait longer and save.
2. If there is no choice or it is limited, the user will know in advance about the commission and will not make a complaint at the time of receipt of the goods.

The task of the owner of the online store is to inform the user in detail, who will independently decide what to do next. If the necessary information is not, then there is a chance to lose a regular customer.

No confirmation email

Users often lose information about the order, and carriers do not always promptly warn about its receipt. Because of this, there may be cases when the owner of an online store will lose customers and in vain pay for shipping costs of carriers. To avoid this, it is enough to duplicate each order by e-mail. Then there will be no reason for disputes.

Content

Problems with grammar

Any text material should be published without errors and typos. If you do not follow this, then it can affect the image and user confidence in the resource. The logic here is this: if the site owners do not have time to check their texts, then where they will find time for high-quality execution of client orders.

It is worth making an important note here: even a large publishing house is not insured against typos, where each proposal is checked by an army of proofreaders. Therefore, grammatical errors are unavoidable and to solve this problem, you need to perform two tasks: recheck the content several times before publishing and follow the reviews where users will criticize your material for illiterate presentation. Saw criticism in reviews - thank the commentator and edit the text.

Irrelevant information

Irrelevant content often affects those sites whose owners combine traditional business with business on the Internet. For example, the company is engaged in printing outdoor advertising and in order to attract more customers launched a site with prices and information about themselves.

If the prices and information about yourself are not updated, then the customers have an incorrect expectation: they expected to order business cards for $ 100, and the minimum price six months ago rose to $ 200. It is annoying, causes distrust and becomes an incentive to never use the services of the company.

If for some reason the information cannot be quickly updated, temporarily close the page with irrelevant data and publish the manager’s contacts in its place. Let the manager communicate with clients and give oral advice.

Poor text content on the blog.

A blog is a tool that should work for the overall beneficial effect of the site. Therefore, any content that does not help this useful action to perform will be considered poor quality. For example, if the site is dedicated to selling lawn mowers, then the blog should be devoted to selling lawn mowers: the client comes to the site → doubts about the choice of a particular model of lawn mower → goes to the blog and reads reviews → gets the necessary answers → makes an order or asks for advice. This is quality content.

Now imagine that the client goes to the blog and instead of life hacking at the choice of lawn mowers, he will only see photos of cute dogs on the background of freshly cut grass. This is low-quality content, because the photos do not help to choose a lawnmower and your potential client will look for all the necessary information from competitors.

Absence of obligatory pages “About us” and “Contacts”

The “About Us” page is the only place on the site where it is appropriate for companies to praise themselves and tell about their achievements. On this page it is important to show how you are different from competitors and why customers benefit from working with you. If the page “About us” is not present or is formally compiled, then this causes distrust.

To make a useful “About us” page - prepare answers to the following questions: who are you, what is your global mission, what do you do and what kind of work you don’t take, what your chip is, what non-standard cases you can help and what rewards you can confirm your qualification.

The "Contacts" page is the place where all users who want to place an order or clarify information on the site will go. If they are not able to do this, they will simply find all the answers from competitors.

Product and / or category page too long

If you are preparing material for the blog, then there are no restrictions on the size and length of the page. Write as much as you need. The main thing is that the article is useful for the reader. When it comes to a page with an offer to buy a product, the long page format is not appropriate here: users are tired, do not scratch the page, lose interest and do not buy anything. As a result, there remain only those users who would have bought this product without a description.

Product offer page is too long. According to the page scroll analysis, we see that the depth of scrolling here is quite small.


An exception is all situations when a complex multi-component product is sold, each part of which needs a detailed explanation. In this case, the page can be overloaded with information and made of any length.

There is a page, but there is no product description.

If the online store starts in haste, many of its pages are left blank. In the best case, there is a photo, a short list of characteristics, price and phone, at worst - there is nothing at all. When there is no description of the product, it is difficult for the visitor to understand what is in front of him and why it is worth buying. In this case, even at a low price, your potential client will try to switch to competitors, on whose sites order has been brought and who tell in detail about their products.

No description on product page.


In some cases, the entire text description is allowed to be replaced by video reviews. However, even if there is video to add, although a brief listing of the main characteristics is needed: the user will watch the video review → by text description will go through the main points → make a purchase decision. Without a text cheat sheet it is more difficult to make a decision.

Poor product card structure

The product card is one of the pages of the online store, telling about all the characteristics of the goods sold. Sophisticated product card consists of two versions: short and extended. The short card lists only the most popular and important characteristics, based on which users choose a product. The extended card contains all the technical data relating to the product in question.

If the card has an ill-conceived structure, it will be limited to only a brief or extended description. If there is only a brief description, it will filter out advanced users who are interested in details. If there is only an extended description, then beginners will leave, scared by the details.

Lack of headings and subheadings

Headings and subheadings perform several important functions at once: they tell what the text is about and where the necessary information is in this text.

Most likely you immediately thought of the right example with headings as subtitles: it is structured, cut into portions and easy to learn. The left example is presented in the form of a text cake, which you do not want to study. Approximately all visitors of your site also think. Therefore, in order not to upset them - think about the structure.

Unreasoned headings and subtitles

On the Internet, most texts are read diagonally, and the main points for reading are headlines and subheadings. If they are not thought out and not made to tell a story, then you can quickly lose visitors.

If the reader does not have a good reason to study your content, then without thoughtful headlines and subheadings, he will not do it: it is always easier to close a page than to understand its contents. Therefore, when designing an article, always think about diagonal reading.

Masking useful content

If after reading diagonally the user decided to study your article, then first of all he will pay attention to the first paragraph. In this paragraph should be published the main idea of ​​the entire article. If this is not the case, then a significant part of users will leave and will not look at the remaining text.

Try to always make the main idea in the first paragraph. After add arguments. If you do the opposite, the conversion will decrease.

Ignore lists

The list is a tool that performs two functions: it helps to organize homogeneous information and makes it easier to read articles on the site. If the user sees the list and understands what he is about, then it is not necessary to read this list. If the list is not, then you have to read everything.

Do not ignore lists and add them where several homogeneous entities are listed. If order is important - use a numbered list. In all other situations, you can do a bulleted list.

What's next

Step number 1. Download the checklist with the listed design and usability errors.

Step number 2. Check your site and check all points that need to be improved.

Step number 3. Eliminate the noted problems and measure the conversion of the site.

And what mistakes in design and usability do you personally encounter? Share your experiences in the comments.

Posted by: Andrey Chorny, CEO Plerdy.com