free consultation
Learn about examples of website errors and why it is important to perform an analysis and audit.
When conducting UX audits, reviewing websites or optimizing them, we often encounter many UX (user experience) design mistakes that make them poorly usable. Most of the errors listed below are due to poor implementation of a website's responsiveness (see is responsiveness ? ) or ill-conceived logic and structure.
table of contents:
Below are 19 mistakes we have encountered recently and which have most caught our attention. These types of ill-considered, poorly coded website elements are unfortunately common and affect the visitor's unfavorable perception of the site. See also how to optimize a site on wordpress
The article is divided into two areas : errors in tailoring communications and building positive user experiences, and technical errors on websites.
A website should be dedicated to your customer group. In the process of creating websites, you should build profiles of personas and determine who exactly your customer is and what expectations they have from your website, which offers specific services, products.
Correctly designed website architecture gives a sense of order and intuitiveness in navigating the website. Appropriately named categories, main menu and no more levels is a good practice in UX design. In the prototyping process, we should pay attention to content prioritization and proper arrangement of the site structure so that the most important information is immediately visible from the main menu and categories.
The website should be consistent with the brand's direction. A consistent color scheme, use of the brand's key visuals, and consistent styling are the basic principles that a website should continue as another point of contact between the client and your brand.
You send a form but don't know if it arrived ? The user did not receive a notification from the page or it is below the CTA button 'send' ? This is a common problem of not informing users about the status after the task is completed.
Headers that are too long or poorly designed for their place on the page are also a common problem on websites. Inconsistency in establishing a single style for h2-h3 type headings or their poor exposure on the page can result in a lack of readability and disruption of the coherence of the entire website.
See what digital web accessibility is and how to create sites universally for people with disabilities.
Also check :
The following are page problems related to usability, which is worth keeping in mind, since a website is created first and foremost for users.
Nobody likes long and boring forms with many fields and asterisks. It is worth thinking to make the form from the inquiry or product card as short as possible. It is worth to add appropriate facilities and design the states of the fields : filled, badly filled or not yet filled.
Did you know that users scroll to about 50-60% of the page length. It's worth paying attention to this fact and adjust content for service, sales pages to their perception capabilities. Separate longer texts with space, and start a new thought with a relevant headline.
Photos that take too long to load affect the technical optimization of the site. It is not advisable to load images that are too large or above 1mb. On the other hand, poor quality compressed photos will also not encourage people to buy the product. The photo should be large and clear, especially if we are talking about ecommerce.
They like to be annoying and disturbing. If you already need show them once and after 1 second. Use a clear X popup close button oand the ability to close the popup by clicking outside its area. See how to make a popup on a page
Create interesting and engaging content. Try not to duplicate the same content within the site as this will negatively affect the SEO issue and weaken the quality of the entire website.
There is a golden rule - the user should know where a particular button leads. Where he will be taken to. Try to describe each CTA with a function instead of using generic 'more'.
In the case of errors on the site, it is also worth ensuring that they are properly communicated through a dedicated subpage that reports a 404 error if the corresponding subpage is missing
See the following problems we encounter when analyzing websites that are underperforming in sales and conversions.
As you can see from the example above, an excessively large gap has been created between the text section and the top slide, which looks unsightly and significantly limits the functionality of the website. Such a large space between one section and another causes the website to significantly lose its attractiveness.
In the version for smaller screens ( RWD ) the website is unnecessarily elongated, inappropriately set, too large spacing, for example, between the header and the content, button more can suggest their belonging to the adjacent section ( earlier or next).
See properly implemented websites of our interactive agency from Krakow
This example uses the incorrect width of the site relative to the content placed in it. This causes the distribution of text and other elements to become visually unattractive, thus reducing the intuitiveness of the site. It would be worthwhile here to create three aesthetically pleasing horizontal columns instead of one.
Problem with sidebar on website
Sticking the sidebar rigidly is a solution for placing additional messages on the website in links to important subpages. As you can see in the above screenshots - taken from the same website - the sidebar has been permanently fixed to the edge of the website, which prevents it from adjusting properly to the dimensions of the displayed site on mobile devices. Mobile users are unlikely to be happy with such a sidebar menu arrangement, so if you already use it, it is good to hide it on smaller screens.
When modulating the display width of a responsive website, it is often the case that individual elements overlap. When designing websites, many people still do not verify how their site will look on mobile devices. A properly thought-out website concept (website design for the size of mobile devices) should solve such problems at the design stage by taking into account the change in screen width and adjusting the elements to fit together or scaling / reducing them.
In this screenshot, you can see several errors related to the formatting of the text. First, there are too large differences between the size of the "order" keyword and the rest of the description. In addition, the bottom description itself is far too long, making it quite problematic to read. Therefore, it would be worthwhile to break it down and increase its font size at the same time. It is also worth noting the low contrast between the banner and the text. See what the banner (slider) is on the page
This overview screen shows the extremely small and thus unintuitive and unusable active area of the CTA button. Limiting this area promotes user frustration and the creation of difficulties in navigating users through the site.
A very good UX/UI solution is to expand/enlarge the CTA element if the mouse pointer is nearby. What is a CTA and how to design
Overloading the page with graphics at too high a resolution is shown in the screen shot above.
Graphics that are too large in relation to the required size of the container designed to display them, e.g. slider, slider with logos, gallery (thumbnails) is a problem for web administrators. By adding graphics above the required size, we unnecessarily increase its loading time.
Often posted graphics on a website are shrunk on the page dynamically through css code or .js script which causes them to still have their original weight. An added photo is visually small and looks good in the container but is shrunk to it through the aforementioned code, which only scales it on the page while retaining its original weight.
Having galleries, sections consisting of photos or even a single photo, it would be necessary to place them in the target size which requires additional editing of the photo making the work on the site not very convenient and time consuming. The ideal way out of the situation is to automate this process through the so-called 'cropping' automatically by the site of the added photo (cropping the photo after scaling it to a smaller format - resulting in a physically smaller photo weighing not 1mb or 500kb but 100kb).
The lack of a closing button decreases the convenience of the site, forcing the user to click again on the section they want to move to or stay in.
To eliminate this obvious problem, simply add an "X" button that would allow you to close the menu and view the page in its full glory.
As you can see in this screengrab, lowering the display resolution of the website trims the bottom icons, which looks unsightly and certainly detracts from the user experience.
In this case, the font and icon size would have to be reduced or the view of the tiles would have to be designed accordingly for smaller screens.
Let's start with the litany of things that need improvement in this case. The first thing that strikes the eye is the excessive letter spacing, which makes the text difficult to read. In addition to this, too much content is also a problem, as well as its ill-defined hierarchy. The top text should be placed at the bottom of the banner or be written in a larger font. The whole design of the banner makes it unreadable, white text on a relatively light background.
When you hover over the banner, a lower horizontal menu appears, which first of all visually looks bad, is unreadable and completely impractical.
Such a solution wastes a lot of space and requires the user to read in a small font, which will be all the more unreadable at higher screen resolutions. In addition, the horizontal menu is difficult to use for the elderly or less familiar with the Internet.
This is an obvious error in the site's code. The drop-down menu does not show any content that could lead to sub-pages of the website. Such errors are unacceptable for creating useful, functional and elegant sites.
Do you see the text in the top button on the right? We and probably other users don't either. It would be enough just to change the highlight color of the button or text to solve this problem. Also, usually in order to draw attention, it is good to clearly signal to the user the change after hovering over the active element just by stronger / contrast / change of background color, the text on the button.
For a change, in this screenshot we show the correctly executed buttons that make up the select list. Nevertheless, this example is not without flaws. A much better solution in this case would be to create a shorter list. Such long listings often prove difficult to navigate.
Another option is to make a full-width window and present the items in, for example, two columns, or to prepare a wider layout of the so-called mega-menu with division into, for example, categories.
It is usual to encounter inactive tile sections with a single button. This solution is less intuitive and less beneficial in terms of UX than creating each active tile separately.
The entire 'clickable' (active) tile is also more mobile-friendly.
We encounter a similar situation with buttons. Most often in buttons composed of a frame, a wider background than the inscription (button with a large padding - inner margin) only the inscription of the button is active, which limits the area of user interaction with the button.
See to create websites in our digital agency, learn about the stages and our assumptions.
Performing an SEO audit can also help in the realization of improving a website's conversion, which will dent its weaknesses and technical problems that cause poor visibility in Google search.
Check out our website ux audit, improve visibility in Google and effectiveness for the user. Find out what the rejection rate is and how to reduce it
Comments to the entry : bad website ux:
I would also add a common mistake on company websites, it is the lack of contact in a prominent place without scrolling the page. It is best to use the top right corner for phone contact, email, and you can also add business hours. This has a very big impact on conversion and keeps the user longer on the site. Tested
FASON
Hey I am missing the answer to a common error: Small font makes text difficult to read. Worth adding Greetings,
MARCIN KORDOWSKI
I do not know if the speed of the site also counts, but certainly the right color scheme - not a mishmash :)) possibly you can think on accesibility, a more niche part of users but their convenience is also worth talking about.
ŁUKASZ
On the mobile version, a serious bug is the non-clickable phone number. This often leads to user annoyance because he has to copy the number or rewrite it on a piece of paper and paste it into the phone.
ORSANA
UX is especially important in the mobile version, where usability can significantly affect a user's time with a customer. As has already been commented on clearly presented and easily "clickable" contact is a key element. But in general, the proper spacing and size of clickable elements helps the customer's perception of the site.
ERGOEXPERT
Fellow(jank)ga Fason rightly wrote about contact information in a prominent place. It is reprehensible to force the user to scroll the page, but it is downright inexcusable to autmatically catch up new posts or news so that going all the way down (to the contact) is virtually impossible. This is discouraging and discouraging even if the site itself is neat and aesthetically pleasing.
KAROLINA
Digital Agency Hauerpower
Copyrights 2010-2022
