High-quality marketing and web design go hand-in-hand. A well-designed site can help you engage visitors, improve SEO, and drive conversions. It can also help you make a strong first impression. As the Stanford Persuasive Technology Lab found, 46% of people say a website’s design is the number-one criterion for discerning a company’s credibility.
After all, your website is your virtual front office. You don’t want it to be messy, cluttered, and tough to navigate. You want it to be clean, professional, and inspiring.
Many marketers, however, are guilty of committing web design sins that only confuse or frustrate visitors. To help you avoid making these mistakes, we’ll break down the top 10 deadliest web design sins and how to fix them.
Let’s take a look.
1. Large, Unbroken Chunks of Text
Internet users are accustomed to small bursts of text—whether it’s in a 140-character tweet, Instagram caption, or Facebook message. In fact, the human attention span is now down to eight seconds. That’s why it’s important not to overwhelm readers with large paragraphs of copy.
Take this website for retailer Best Electronics. Aside from the Atari logo, the entire space above the fold is full of text. It’s harsh on the eyes and it takes too long to read. Viewers might see this and click right out of the page.
Instead of following this example, make it easy for readers to scan the page and quickly absorb the information they need. For instance, you can break up your text with different paragraphs, alignment, and images.
Just look at this “About” page from Medium. It fully explains the platform’s features and benefits, but without the deluge of text. All copy is broken into small paragraphs, which are accompanied by sub-headings and images.
This format provides a pleasant and simplified user experience, encouraging the reader to stay on the page and learn more.
2. Too Many Stock Photos
Stock photos tell a generic story—not your story. They can be good placeholders until you have the resources to capture original visuals. But you don’t want to rely on them too heavily, because they can come off as cheesy or disingenuous.
After all, every business has access to stock photos. They don’t have access to your unique and customized creations. By using original images, you can set yourself apart and share your brand voice.
For instance, Airbnb is built around connecting people with others. This mission is reflected in the site’s visual content. Images feature real Airbnb hosts and locations, showing customers that the company delivers genuine experiences.
3. Hidden Contact Information
Imagine inviting someone to your store or office. Only, when they arrive, they can’t find you or anyone else who can help them reach you. That would be disorienting, right? And you’d probably lose or at least frustrate your potential customer.
Avoid making this mistake online by clearly presenting your contact information on your website. For example, the first sentence on the Charm City Cakes website invites visitors to reach out and order a cake. People don’t have to scroll around, wondering where to go if they want to make a purchase.
Even as visitors continue to browse the site, a “Contact” tab always remains in the navigation bar at the top of the page. So if someone decides they want to reach out while searching through flavors, merchandise, or classes, they can simply click the link.
Once a visitor is on your “Contact” page, present them with an email link or contact form so they know exactly how to proceed. With a contact form, for instance, users can enter their information without leaving the page, and with an email link, they can comfortably send a message from their preferred email platform. Check out this discussion for more about the pros and cons of these two options.
4. Poor Mobile Optimization
Last year, mobile Internet usage surpassed desktop usage for the first time ever. As comScore reported, desktop is now a “secondary touch point” for many Internet users. So if your website doesn’t work on smartphones and tablets, you could lose a major portion of your audience.
Here are a few ways to optimize your site for mobile:
- Design with thumbs in mind. Place important action items at the bottom of the screen where users can easily tap them with one finger.
- Eliminate excessive animations and plugins to speed up loading times.
- Run your site through Google’s mobile-friendly testing system.
Just look at the mobile site for Typeform, a form-building platform. It loads quickly, uses minimal text, and presents two clear calls to action: “Ask for anything” and “See more examples.” It’s also easy to navigate with just a tap of your thumb.
The company’s services are even presented in blocks that look like smartphone app icons. This layout helps create a fluid and intuitive experience for the user.
5. Fonts That Are Too Small
Make sure you choose a font size that’s big enough to read but small enough to complement your images. Visitors shouldn’t have to squint or zoom in to read your copy. As designer Christian Miller wrote, most websites use fonts of 15-18 pixels, but some are even starting to use larger text of 20 pixels. That’s because bigger text improves readability, usability, and the visual impact of your content.
On the FedEx site, for instance, the font sizes are so small and varied that visitors don’t know where to direct their attention.
Designer Trent Walton’s website, on the other hand, is much more user friendly. The most important information is in large, bold letters at the top. There’s no question about who this person is and what he does. As you scroll down, the font is smaller but still well-spaced and easily digestible.
To find the right font size for your website, you can use helpful tools like the Modular Scale Calculator.
6. Improper Use of Colors
You want your site to be eye-catching, but you shouldn’t fill it with a bunch of colors for no reason. It’s important to deliberately choose colors that match your brand and convey the right emotions.
You can use this emotion guide to better understand the psychology of common colors. Grey evokes feelings of calmness, for example, while blue signifies trust and strength.
Consider Snapchat’s website. It conveys a bold message with just one color—a bright and powerful yellow. This color captures the exciting nature of the app, which lets people build connections by sharing their favorite moments. It also helps Snapchat stand out from a sea of blue-colored social platforms like Facebook, Twitter, and Tumblr.
As Snapchat proves, it’s possible to make a statement without a flurry of clashing colors and rainbows. You just need to choose the best two or three options for your brand, and make sure they elicit the right emotions from your audience.
7. Cluttered Images and Graphics
It’s tempting to fit as much information as possible onto one page, but remember to keep it simple. If you overload your website with too many graphics, viewers will just tune them out. It’s always better to convey one or two messages well than to convey ten messages poorly.
Even Brooks Brothers is guilty of committing this sin. The clothing brand’s homepage is full of cluttered and clashing graphics.
These images fail to tell a comprehensive story. Instead of directing the viewer’s attention to a single message, they try to split that attention among too many visuals that don’t match up.
Then there’s life coach Marie Forleo. She uses images that clearly fit into the narrative of her website.
These three pictures are layered on top of each other, but they don’t feel cluttered because they all help illustrate one point—that Forleo is a thought leader.
8. Non-Intuitive Navigation
Consider the customer’s journey when they arrive at your website. What do they want to know? Which tabs do they want to see? Walk yourself through this journey and make sure your design guides people along the way. You can also check your behavior flow report on Google Analytics to see how visitors progress from one page to the next.
Here are a few methods for improving your website navigation:
- Use labels in your navigation bars. Instead of writing “Products” and “Services,” be more descriptive about what you offer. This will help customers choose where to go, and it will also help your SEO.
- Avoid drop-down menus. They interrupt the flow of your design and can overwhelm visitors with too many options at once.
- Remind users where they are. Is someone on your “About” page? Indicate this on your navigation bar and include a button or link that directs them back to the homepage.
Apple’s website, for example, follows these guidelines.
Each product group has a label. There are no drop-down menus in sight. And when a user clicks on a certain label, the word remains highlighted so they know exactly which page they’re on.
9. Ineffective Use of White Space
White space isn’t the enemy; it can be the foundation of your website layout. By using what’s not there, you can easily direct people’s attention to what is there, and help them focus on the right elements.
For instance, here’s an example of ineffective use of whitespace from The Hunger Games writer Suzanne Collins’ website. It’s clearly divided into sections, but these sections are nonsensical. Why is the “Welcome” message all the way on the left side of the page? Why is the top image centered but the bottom image isn’t? Altogether, the design is confusing and almost absurd.
Dropbox, on the other hand, uses whitespace effectively. Each bit of information is cleanly parsed out and given room to breathe. Visitors don’t have to choose which element to look at. They can just scroll through the page with ease.
There may be “empty” spaces on the page, but they still serve a purpose: They help minimize distractions and highlight what’s truly important.
10. Ads That Are Too Intrusive
People come to your site to be informed or entertained—not to be bombarded with ads. If you do need to show ads, be sure that they fit into the design of your site and pop up after people have had some time to read your content.
Take Forbes, for example. You can’t even get to one article before you’re hit with an ad. Half of this entire front page is devoted to promoting Pitney Bowes. You’d think you’re at a site for a marketing agency, not a renowned publication.
Then there’s the Social Triggers website. It presents a pop-up ad for a free ebook, but only after you’ve visited the blog.
Sometimes you need to run ads to generate more revenue. Just try to be respectful to your website visitors. Remember that they’re the ones you built your site for, and that you want to give them the best experience possible.
It’s crucial to make a strong first impression with intuitive and engaging web design. Your website might have stellar copy and great images, but without the proper layout and formatting, it will still turn visitors away.
Make it as easy as possible for people to comprehend and navigate your website by offering a simple and user-friendly layout. Most notably, stick to a few key colors, optimize for mobile, and make sure your contact information is visible and easy to find.
With these ten tips, you can ward your website from those deadly sins and remain in your customers’ good graces.