16 examples of website UX mistakes making an RWD website

When we conduct audits, browse websites or optimise websites, we often encounter many mistakes in the field of UX (User Experience) which render them almost useless. Below, we demonstrate 16 mistakes which we have recently noticed and which have caught our attention the most. These reckless, wrongly encoded types of website elements unfortunately happen very often and result in poor user experience.

1. Spaces between website sections are too large

As demonstrated above, between the section with text and the upper slider there is a space which is too large and does not look aesthetic and significantly reduces website functionality. Such a large space between sections causes that such website becomes considerably less attractive. In RWD, such website becomes too long, excessively large spaces e.g. between the heading and the text or button may even suggest that they belong to the neighbouring (previous or next) section.

2. Wrong use of website (or container) width

In this example, incorrect website width was applied in relation to its content. This causes that the distribution of text and other elements becomes visually unattractive. It would be better to create three horizontal columns here, instead of one.

3. Sidebar overlaps website content

Fixed sidebar is a solution that enables the placement of additional messages on a website and hyperlinks to important subsites. As it can be seen on the screen above — which, by the way, comes from the same website as the graphics above — the sidebar has been permanently fixed to the edge of this website, preventing it from proper adjustment to the dimensions of this website on mobile devices. Mobile users are not happy with such placement of side menu, therefore, if we want to use it, it would be better to hide it on smaller screens.

4. Overlapping elements

While adjusting the display width of a responsive website, it is often the case that individual elements overlap one another. While designing websites, many people still fail to verify how their website is displayed on mobile devices. A well thought- out website concept (website design to the size of mobile devices) should solve such problems at the design stage by taking into account the changes in screen width and adjustment of elements to one another or their scaling/reducing.

5. Text on the banner is too wide and wrongly formatted

On this screen, several mistakes connected with text formatting can be seen. Firstly, the differences between the size of “header” and the remaining parts of this description are too large. Apart from that, the lower description itself is definitely too long, making it very difficult to read. Therefore, it would be better to break it and increase its font size at the same time. It is also worth drawing attention to the poor contrast between the banner and the text.

6. Button clickable surface is too small or buttons are to close each other

This screen shows an extremely small and hence non-intuitive and useless clickable surface of this button — a small dot which is difficult to click on.

Such reduction of this surface is conducive to users’ frustration and difficulties in navigating the website.

7. Website graphics are too large in cointainer div ( img )

The screen above shows a website overloaded with graphics at resolution which is too large. Graphics that are too large in relation to required box sizes intended for their display e.g. sliders, sliders with logotypes, galleries (miniatures) are a frequent problem for website administrators. By adding graphics that exceed the required size, we needlessly increase the time needed for their loading.

Frequently, graphics placed on a website are dynamically decreased by css code or .js script and, as a result, they still have their original weight. This added picture is optically small and looks good in this box but it is decreased with the use of the aforementioned code which only scales it on this website, while maintaining its original weight.

With galleries, sections composed of photos or even an individual photo should be placed in their final dimension and this requires additional edition of such photos, making the work on such a website difficult and time-consuming. Automation of this process is an ideal solution to this situation, it is the so called automatic ‘cropping’ of added photo by the website (cutting the photo after scaling down to a smaller format — as a result, we have a physically smaller photo and weighing not 1mb or 500kb but 100kb).

Incorrect correct and incorrect (centered) arrangement of the thumbnail in the container, eg. in the logotype slider we should have nice centered logo

8. Open side menu without close button forces another click on the menu item

No close button reduces the convenience of website use, forcing the user to click again on the section to which he/she wants to go or in which he/she wants to stay. In order to eliminate this obvious problem, it will be sufficient to add the “X” button which will close this menu and allow us to browse the entire website.

9. Cutting text graphics at smaller resolution and equal padding

Browsing a website on smaller screens often causes that the box content, e.g. a tile, cuts the text or icons and this does not look aesthetic and has a negative impact on user experience. In this case, font size should be reduced.

10. Illegible website banner

Let us begin with several issues which require correction in this case. The first striking issue is the excessive spacing of letters which makes reading the text difficult. Apart from this problem, there is too much text and its hierarchy is wrong. The upper text should be placed in the lower part of this banner or should be written with larger font size. The entire design of this banner causes that it is illegible, white text on a relatively light background.

11. Illegible and impractical horizontal menu

After pointing the banner with your cursor, the lower horizontal menu appears which, first of all, looks bad, is illegible and completely impractical.
Such a solution takes a lot of space and requires the user to read into such a small font which will be more illegible at larger screen resolution. Additionally, such a horizontal menu is difficult for elderly people to use or people who do not know a lot about the internet.

12. No menu in the sliding panel

It is an evident and interesting mistake in the website code. In the sliding menu, there is no text which could lead to the subsites of this website. Such mistakes are unacceptable while creating useful, functional and well designed websites but unfortunately they occur quite often.

13. Light text on light background and vice versa

Can you see the text in the upper button on the right? We, and most probably other users, do not either. It would be sufficient to change the colour of this button or this text and such a problem would be solved.

14. Select list is too long

For a change, on this screen, we demonstrate properly executed buttons contained in this select list. Nevertheless, this example also has mistakes. In this case, creation of a shorter list would be a much better solution. Such long lists frequently turn out to be difficult to navigate. Another option is to create a window for the entire width and present those items in e.g. two columns or to prepare a wider menu, the so called mega menu, divided into e.g. categories.

15. No clickable tiles

It usually happens that we encounter a clickable button or heading within the entire tile e.g. news or blog. This solution is less intuitive and less beneficial than creating each clickable tile individually. The entire clickable tile is also more mobile user friendly.

16. No clickability of the entire button surface

We face a similar situation in the case of buttons. Most frequently, in buttons composed of a frame and background that is wider than the text (button with large padding), only the text on the button is clickable and this reduces the area of user interaction with such a button.