Some websites just look awful.
Maybe it’s autoplay videos that make you click away in horror, or sites that (still???) aren’t mobile-friendly. As much as we know what we personally dislike, many web designers still make nerve grating choices on the web pages they create.
If you’re a web designer, business owner or merely working on your personal website, check out the following 13 worst web design pet peeves. Then, ask yourself it you’re guilty of any of these annoying habits.
Pop Up Abuse
We get it. Most websites exist to sell a product or service, to gain subscribers, or to grow a personal or professional brand. This means the goal is to create conversions, collect email address, gain followers, etc. If you want to use pop ups as a way to accomplish your goals that’s not necessarily a problem.
The issue is when pop ups become abusive. If you’re using any of the following pop up techniques, please reconsider:
- More Than One Pop Up Per Visit
- Pop Ups That Don’t Provide an Exit or Obscure The Exit
- Multiple Pop Ups At Once
- Pop Ups That Insult People Who Aren’t Interested
- Pop Ups That Want Information For Nothing in Return
Solution: Limit popups to one. Avoid snarky button text unless you really know your audience, and give visitors a reward when they do answer your call to action.
Autoplay That Uses Audio
For some reason, in spite of it being widely hated, the autoplay video has emerged victorious. Most of us have resigned ourselves to this fact. If you want to use autoplay videos, it’s probably not going to have a negative effect.
There’s just one caveat. If you’re autoplaying videos with sound, you deserve every single bounce you receive. Not only is it an inconsiderate practice for the person visiting your page, it’s annoying for everyone around them.
Solution: Just stop it. Period.
Bad Stock Photos
- A Smiling Woman Wearing a Headset
- Two People Shaking Hands Across a Conference Table
- Man Staring at His Computer With a Look of Confusion on His Face
- The Obligatory Multi Culture Group Photo
- The Heroic Man in a Suit
- A Close Up of a Handshake
What do all of these pictures have in common? They’re all examples of bad stock photos that designers insist on using. The question is, why? These images don’t contribute anything useful to a webpage. Even worse, many are eyeroll inducing. There’s no reason to include these tired, overplayed elements on any web page.
Solution: Use real pictures, preferably of your own people and products. If you must use stock images, please pay a subscription fee. This will at least give you access to higher quality photos.
It’s amazing how little thought so many designers put into typography. It seems as if many take whatever the default font setting on whatever tool they are using, and just stick with that. They don’t take readability into consideration. They certainly don’t use typography to contribute to the overall look and feel of the web page. This is a shame.
Then, there’s the flip side of this. These are the designers who are so in love with customized fonts that they’ll combine four or five of them on a single page with absolutely no consideration for aesthetics. Typography is beautiful. So is minimalism.
Solution: Use typography to create beautiful web pages. Just don’t overdo it.
Chatbot: “Hi! I’m Susan. Is there anything I can help you with?”
Visitor: (Minimizes chat box and continues browsing)
Chatbot: “Are you absolutely sure I can’t help?”
Visitor: (Minimizes chat box and continues browsing)
Chatbot: “I won’t be ignored!”
Okay, maybe it doesn’t quite play out that way, but it can sure seem like it. Chatbots are great. They offer great first line customer service, and can help steer customers to the right products. However, they shouldn’t be intrusive. Users shouldn’t have to constantly minimize chat boxes or navigate around them.
Solution: Pop the chat window up once. Then, leave the visitor alone until they actively seek help.
Picture this. You’ve just landed in a new town and checked into your hotel room. You’re famished. You ask Google to find a nearby restaurant, and click on a really nice looking Italian place. You go to check out the menu, and see that they’re offering a six course, chef’s tasting menu with free wine pairing. All under 30 dollars.
What a cool event! Then, you look closer. As it turns out, it was a cool event, in 2014.
It’s just as important to keep web content updated as ensuring that there are no broken links or unstable functionality.
Solution: The folks at OWDT design have a great suggestion. Keep a spreadsheet with information on dated content. This should include a time and date to pull information down. This way, you can avoid disappointing your visitors.
Cutesy Page Load Screens
Sorry, our web page loads really slowly. Here’s a picture of a dinosaur tapping its foot. Would you like to see circle being slowly drawn on your screen while you wait? The intention of page load screens is to occupy and entertain the user when the screen they want isn’t loading fast enough.
Solution: One would think it would make more sense to fix the page load issue instead of chewing more bandwith just to display some silly animation.
Scrolling Web Pages That Also Have Footer Content
There’s nothing inherently wrong with scrolling web pages. It’s a perfectly valid design choice. Any criticism of that choice is strictly based on matters of taste. Plenty of websites are designed that way, and they function well.
For the unfamiliar, a scrolling web page is one that continues to load content as the user scrolls down. The issue is that choosing to use this method comes with a couple of trade-offs. At least it should. One of these trade-offs involves footer content.
Footer content has no place on a scrolling website. It makes navigation frustrating for anyone who might want to access that footer content. Each time the user tries to scroll down to the footer, more content loads, and they are back to the top of the screen again.
Solution: Relocate footer content so that users can access it easily rather than trying to race your web page to the bottom of the screen.
‘Page Not Found’, ‘We’re Sorry But The Content You Are Looking For is No Longer Here’, and ‘404 Error: Page Not Found’ are all different versions of the same message. The content you were promised just isn’t here for you.
Part of good web design is ongoing maintenance. This includes ensuring that the website is fully functional. Taking care of broken links by deleting or updating them should be a part of this process.
Solution: Plug your website URL into Dead Link Checker. The tool will help you to identify problematic links.
Headings and subheadings make web content easier to read. You know what content you are looking at, and what it is related to. This is the result of good web design creating a clear hierarchy on the page. You automatically know how each piece of content relates to the to other. This includes images as well as text.
When hierarchy is unclear, all of the content on the page kind of runs into another. There are o clear divisions. Users wonder, does this infographic go with that text? Is this list of bullet points supposed relate to this heading?
Solution: Use consistent font choice, size, and color to clearly indicate the difference between text, headings, subheadings, and captions.
Too Many Floating Icons
It’s easy to see why this technique is popular. If you want visitors to focus on a particular piece of content, or ensure that your call to action is clickable no matter where the visitor scrolls, using a floating icon does work.
Unfortunately, the trade off is rarely worth it. The floating icon is unattractive to begin with. In addition to that, it’s also intrusive and negatively impacts the browsing experience. If your floating element is promotional, constantly keeping it in the viewer’s face can seem spammy as well.
Solution: If you plan to use a floating icon, reconsider. It’s likely to cause enough annoyance that any benefits will be overshadowed. Consider using color and experimenting with placement instead.
Hidden Contact Information
It’s a bit mind boggling how designers will create websites for the purpose of making money, then make finding contact information uneccessarily difficult to find. Or, they leave contact information that is incomplete.
Solution: Include a link to contact information on all pages. On mobile sites, necessary contact information should be included on your home page. Finally, remember that contact information should include a physical location, phone number, address, email, social media links, and navigation.
Desktop Hamburger Menus
Hamburger menus exist on mobile sites for a very good reason. They increase readability and make it easier for users to navigate. The sidebar menu only makes an appearance when the visitor needs it.
Lately, the trend has been to create desktop websites that use the hamburger menu as well. This is taking mobile first too far. Asking users to click one more button just to have navigation options available to them simply makes no sense.
Solution: Unless you are simply out of real estate, just display your menu like you normally would. If you are out of real estate, it may be time to reconsider your cluttered page.
Bad design habits are hard to break. However, if you can avoid using these frustrating design techniques, both your clients and their customers will thank you.