Websites nowadays are trying to stand out more and more, however it seems by doing this they forget how to follow simple web design and user experience standards that result in websites being downright.. annoying.
Here are some web design mistakes and ways to avoid avoid them.
Sliders / Carousels
Stop using sliders they aren’t effective and very little people will actually use them and see the content beyond the first slide. Autoplaying sliders make very little sense as well. There’s also a case to be made that carousels might be killing your conversions. It’s depicted pretty accurately in this instagram video.
Navigation Menu
Navigation should always be at the top. Left menus can work in certain contexts (example: user dashboard). But they’re more reserved to web apps, rather than websites.
- Stop hiding the navigation bar on desktop. Why are you trying to make the user work by having them click on a button to see the navigation bar or menu if the latter can easily fit on the screen? Don’t add an extra step for the user if you don’t have to.
- On mobile, can we collectively stop using long animations when the menu button is clicked, for the menu to appear?
- Stop forcing the user to click a button in the navigation for a drop down to appear. Drop downs (submenus) should appear on hover. Also please don’t make the submenu horizontal. It’s inefficient. If your menu has submenus, it should always have an arrow to indicate that. UX.
- Don’t put your logo on the right on of the navigation bar, don’t but the hamburger menu button anywhere else but on the right of the navigation bar. We have web standards for a reason.
- If you have a sticky or fixed top navigation bar, that’s cool. But please have it have a background color, otherwise content text goes under it and makes it illegible.
- Emojis in navigation can work pretty well in certain contexts, but for most websites, they just look unprofessional.
Call to Action
- If you have a contact button call to action on your homepage, that directs to a different page, please don’t do that. Just put the contact form on the homepage instead of adding an extra step for the user to contact you.
- Stop using Mystery Buttons. Examples: “Click here”, “Continue”, “Let’s go”. A Call to Action button caption should immediately convey, in a crystal clear way, what will happen once the user clicks that button.
- Don’t make the color of your Call to Action the same color as everything else on your website, you’re just losing out on conversions.
Alignment
- Stop center aligning everything. Don’t center text that has more than 3 lines, it ends up becoming annoying to read because of the inconsistent starting points for each line.
- Stop using justified text alignment. The inconsistency between the spacings of each word make it harder to read.
- Stop using right alignment for the same reasons why you shouldn’t use center alignment.
- Don’t vertically align text, this sacrifices User Experience (UX) for User Interface (UI).
Splash and Home Pages
- If a user is already on your website, why would you have them click a button to again, enter your website? Splash Pages hurt SEO, decrease conversions, and waste users time. Drop them.
- Don’t use vague h1s on the home page. This will confuse your user, and the search engines too.
- Don’t have an extra small home page with a bunch of links to your other pages. The home page should be informative enough for your user to understand who you are and what you do.
- Don’t use pre-loaders. A common problem with them is that often they cannot tell whether the website is done loading or not. Instead of attempting to hide how slow your website, stop adding in all this unnecessary JavaScript and CSS.
Your website isn’t a PowerPoint presentation, don’t make it feel like one.
Loading Effects Animations
Going overboard with effects takes away from the content, and adds bloat and loading time to your website.
- Stop using slow loading animations. It makes it impossible to quickly scan a website for content. If the website visitor just wants to get the information they need fast, and aren’t in the mood of watching an entire movie, that’s exactly what you need to provide. Don’t waste users time by making them sit through all these animations.
- If you insist on loading content on scroll down, the least you can do is not unload the content when the user scrolls back up, just to load it back the user scrolls back down.
Stop wasting user time with slow opening messages in the hero section too.
Scrolling and Cursor
This is a big one. Do not mess with scrolling. Don’t hide the scroll bar, don’t style the scroll bar, and don’t hijack the scrolling. The scroll bar is meant to be a consistent feature to navigate websites. Stop turning the entire website into a vertical slider by taking over the users scrolling, again, scrolling should be consistent from website to website. Stop messing around with it.
If you can avoid customizing the cursor that would be pretty neat too. Custom cursors give off 2005 MySpace vibes.
If the scrolling on a website is hijacked to the point of having to have Click to Scroll buttons, the design is bad.
Marquees
Marquees are annoying to look because the user cannot control the pace of the animation.
Forms
- Don’t have a separate first and last name fields for your forms. In small to medium sized forms having less input fields has shown to increase conversions – combine the two fields into one full name field.
- Don’t center align text forms, they should always be left aligned for better usability.
- In longer forms (more than 4 input fields), ensure the use of labels instead of placeholders. If a user types in their information in 5+ input fields and then wants to modify something, they will likely forget what the placeholder was, will have to delete their information just to remember what the input field was for, the user also won’t be able to Control F (find) the form easily from wherever they are on the web page.
Footers
People use links in the footer, and expect them to be there. Your footer should be a sort of a sitemap.
Honorable Mentions
- Don’t automatically play sounds when a user enters your website.
- Don’t make the user work to see tile content. Example, a tile shouldn’t have to be hovered on to display text. Blur the tile background image, display text on top.
- Logos that don’t have the name of the company. How’s the user supposed to know who you are based on an abstract icon? You’re not Apple or MasterCard (if you are, please share).
In Conclusion
- User Experience is more important than User Interface. Don’t make your users work harder and don’t add extra steps for something that can be accomplished more efficiently.
- If you’re a business owner OR a web designer reading this, the only thing you should focus on is user experience.
- Don’t ignore web design standards in an attempt to be special at the cost of User Experience.
- Your job is to cater the website to your users – make it as easy as possible to use your website.
- Predictability and web standards is the name of the game. Place elements where your users are expecting to see them.
👇 Share this and subscribe to our non-spammy mailing list if you found this helpful!