Website designs are created to encourage users to take action, to give feedback on the product or to fuel their creativity. Whatever your website goal is, you should avoid certain design features and know which ones to include in your design for sure. Here we present a round-up of the worst UI design features that can break your website and push visitors away.
UI Design Features to Avoid
1. Reset Button on Forms
I do not need to explain how irritating Reset buttons on web forms are, if you have had the ‘pleasure’ of experiencing them at least once. The Reset button on forms is placed usually near the Submit button, so a user can click on it by accident. If you copy-paste your message from somewhere (your text doc, etc.), it means you have a message ‘backup’ and this may be not so bad. But if someone writes a long message and fills numerous fields with personal data, he may not have the desire to complete this again due to an accidental wrong click.
The takeaway: never use a reset button on your contact form or any other form on your website, because it makes users do one and the same task twice. This doesn’t facilitate your communication with customers, instead it worsens your relations.
2. Cancel Button Located Next to Back Button
This problem is very similar to the previous one. Again buttons and again in the wrong place. Designers, is there not enough room on the websites that you so often place ‘Cancel’ and ‘Back’ buttons together, like very close to one another? Users can be misled by this action and it is possibly going to spoil their impression of your site.
3. X Button
Oftentimes users complain about X buttons that perform incorrectly. There are cases when the button doesn’t close the application (or page), but minimizes it. Who asked it to do this? The primary function of this button is to close the page (app, etc) by the user’s demand.
4. Pop-up Support Chat Window Within The First Minute of Site Browsing
Probably, you do it for the users’ good (pop-ups I mean), but don’t try that hard. What are users supposed to ask when they have no idea of what you do or sell? The obtrusiveness is one of the worst methods you can use for customer engagement.
Let the chat window open by demand – create a well-visible button somewhere on the sidebar so anyone can reach it when needed.
Bench Website with Unobtrusive Chat Window
5. Hidden Password Field Value
Password masking is among the worst UI design features too. Who are you protecting users from? Do you think they have someone standing behind them all the time? The majority of users hate these dots in the password field while they are filling it in.
Give users the opportunity to choose: provide them with a ‘Show’ button near the password field, so that they can turn this function on or off.
MailChimp Log in Form
6. Automatic Slideshow
Slideshows playing without the user asking for it may have an unexpected impact on your website performance. It doesn’t matter what the size or content of the slides, this feature may catch users napping and this is not for your good. Unexpected website actions may lead users to close the page. You cannot rely on this feature and hope that it would interest users to browse your site for longer or more attentively.
7. Carousel
Carousels were in trend a few years ago, but now they are absolutely not worth using. The first reason for this is their anti-mobile nature. Today, with the use of responsive design, carousels just don’t make the cut. Users won’t be able to view it when browsing a website on tablet or any other mobile device. You don’t want your website look outdated, do you? So don’t even consider carousels as a way to beautify your site or showcase your portfolio works.
8. Drop-down Menu
A drop-down menu is one of many navigation methods available, though not the best one. This style of navigation menu is so called because the menu drops down usually with a click or by hovering over it. This navigation style has a few drawbacks, for example mobile use. It is impossible to optimize this navigation for mobile devices, the only case is to replace this menu style with another one for your mobile site. Also, users often complain about drop-down menus nested in drop-down menus – this makes the website heavy, complex and far from being user-friendly.
9. Sticky Toolbar
Sticky toolbar is a useful design feature when used wisely. This can be a navigation bar stuck to the top of the page to ensure that users don’t need to scroll up to get out of the current page and proceed with site browsing. The mistake many developers make is that the sticky toolbar is not really sticky and it lags behind when scrolling down. Read this article to learn how to make your bar sticky with CSS or jQuery.
10. Top Navigation Logo that Doesn’t Go Back to the Homepage When You Click It
Users should always have a way to come back to the home page. If your navigation menu bar doesn’t include the Home button this is really bad, but when your logotype doesn’t link to the homepage, this is inadmissible.
Tonda Website with Perfect Navigation Instructions
11. Pointless “Hamburger” Navigation on Desktop
A hamburger navigation icon is a three-striped element featured usually at the top right or left corner of the webpage. It allows hiding navigation positions, but it makes users do needless actions. Usually users pick any section they need and go to the page they need (this is about casual website navigation), but a hamburger icon makes them first click on it to see the menu positions. This kind of navigation menu is more suitable for mobile devices, where the screen is too small to hold a large navigation menu bar, but desktop website design should definitely avoid this navigation style. Learn how to avoid hamburger navigation.
Here I would love to show you one interesting example – a desktop website design with a hamburger navigation (where it is absolutely unnecessary), which is missing on mobile devices – how are users supposed to browse web pages then?
Format Legal Desktop Website Design
Format Legal iPad Design
12. Prioritizing Keyboard Navigation over Mouse Navigation
Parallax and infinite scroll initiated the trend of keyboard navigation. Instead of mouse wheel scrolling, developers began using keyboard arrows to walk through the site. Keyboard navigation is inconvenient, moreover – it is unusual and inconsistent. You may greatly confuse your visitors, even if you include a small intro section on the homepage to explain the navigation principles on your website.
If you can’t manage without the keyboard navigation option on your site, provide users with a choice: make navigation work via keyboard arrows and mouse wheel.
CallFlex Website with Keyboard and Mouse Navigation
13. Bad Color Schemes
A bad color scheme is what we often see on the web, and it changes rarely. Designers keep making websites in awkward color combinations – something like red text on a red background, yellow background with white text, or all-different color palette for each site page. You should complete design classes, learn color theory and practice a lot to gain great results with your website design color. Here are some good courses you may start with:
For those who are not designers by profession and mission, but who are creating their websites alone, there is an awesome new feature that you have never seen before – Color Picker. This is an exclusive feature presented by the new MotoCMS 3.0 version. Color Picker is a part of the control panel built into MotoCMS templates – it allows setting the color palette for the entire website automatically. When you change the color of a certain element on a site, all the same style elements change their color without extra actions. This is a useful tool to make your website look professional and pleasant to users’ eyes without putting in great efforts.
14. Small Type
Do you want users to put on glasses, or screw up their eyes to be able to read your content? Small type can hardly ever be justified, and especially if it is used for web pages with a wall of text. The most optimal type size is 16px – this is not too big, not too small, and it is how content displays on desktops the best.
If you are interested in learning typography on a new level, here is a cool set of Typography Courses.
15. Captcha
Captchas are annoying. You just enter the site and voilà – capture is already there to check whether you are a human or robot. This is sometimes just annoying, but very often users leave the website along with being unsatisfied. Actually, captchas don’t work for spam protection, if you use them with this idea in mind. Here are better solutions to trick spam bots.
Conclusion
This was an overview of the most widespread UI design mistakes that designers and developers make. Have you been faced with any of these problems and what are your ways to overcome them?
