How Common Web Design Trends Can Negatively Impact SEO

When the user feels confused, frustrated or intimidated, your website analytics and your search ranking can reflect this. You might not realize it, but common design trends and practices could be the cause for this. In this post, we’ll explore what some of those look like.

When we talk about SEO, it’s usually a list of things that designers can do to help a site’s ranking improve. Speed up webpage loading times. Optimize around rankable keywords. Add schema markup. But what about those design decisions that designers make that do the opposite? Some of them might be minor infractions, but those SEO penalties can quickly add up.

Unfortunately, there are some web design trends and practices that contribute to negative SEO outcomes. Google and other search engines aren’t always transparent about what exactly they are, but we can surmise what some of them are based on how SEO penalties are assessed.

In the following post, I’m going to explain how some common design trends and practices may hurt the websites you build over the long run.

Web Design Trends That Can Negatively Impact SEO

Search engine optimization consists of a vast ecosystem of Do’s and Don’ts. While search engines like Google occasionally share with us the kinds of things not to do, we’re not going to get a list of every penalty that could ever possibly be imposed on a website’s ranking.

That said, we do know why Google, in particular, rewards and penalizes websites. It ultimately boils down to the user experience. If the user clicks on a page from search results that leads to a poor experience, it’s not just going to reflect poorly on the brand that runs the website. It’s going to reflect poorly on the search engine that directed them there. So search engines reward websites that keep their mutual users happy.

As for which web design trends and practices could potentially lead to a bad user experience and cost the site in terms of SEO, here are some of the more common ones:

Hidden Navigation

The navigation plays a pivotal role on the website. Without it, users would have to depend solely on scrolling and internal links to discover all that the site has to offer. So, when a website navigation goes against user expectations and common sense, it can lead to an inefficient and sometimes insufficient user experience.

There are a couple ways in which hiding navigation structures or links can go wrong for the user and, by proxy, the website’s ranking:

1. Hiding the navigation on desktop.
Although more users recognize what the hamburger menu icon does today than they did a few years back, that doesn’t make it an ideal substitute for the navigation bar on desktop. Back in 2016, NNG compared the performance of three types of navigation:

• A visible navigation bar
• A hidden hamburger menu
• A combo of navigation bar links and hamburger menu

Across the board, the hidden menu performed poorly in terms of:

• Percentage of sessions it was used
• Time it took users to engage with the navigation
• Content discoverability
• Task difficulty
• Average task time

The data has likely shifted somewhat in recent years as more users encounter hamburger menu icons everywhere—on mobile websites, PWAs and apps. However, that doesn’t make their inefficiency less problematic.

Users’ eyes are automatically drawn to the top-left corner of a website when they enter it. That’s why we place the logo there and why, for a long time, the navigation structure started closer to that side of the page.

What’s more, users’ eyes seek out content—imagery, words, anything that will answer their questions and help them complete their tasks as easily as possible. A hidden navigation doesn’t do much to satisfy these cravings.

On mobile, there’s no getting around this kind of navigation structure. On desktop, however, this is one of those cases when adopting a mobile-specific design for larger screens doesn’t work aside from minimizing the interface.

2. Placing popular webpages in the footer menu.
You don’t have to be a web designer to know what kinds of pages you’re going to find on most websites—like the About and Contact pages. So, when users visit a website with a specific goal and don’t immediately see a page for it in the navigation, that’s a problem.

I get the need for minimalism. We can’t afford to place bulky mega menus on the top of websites anymore. People just don’t have the attention spans or patience to scan through many of them anymore.

However, that doesn’t mean you can use minimalism as an excuse to place commonly visited webpages down in the footer.

For starters, that design choice assumes that every user will automatically know to go to the footer when they can’t find something on the top of the page.

Secondly, it assumes that users will be willing to scroll, scroll, scroll to find what they’re looking for.

Thirdly, it assumes that everyone else will eventually make it to the end of one of your pages and realize there’s a fuller navigation tucked into the footer.

In web design, we can’t work on assumptions. Unless you know for sure that users will inevitably find their way to the pages they’re looking for, they don’t belong hidden in the footer. The footer is where we place secondary content—links to social media, privacy pages, etc.

Again, when the navigation is hidden from users—be it the whole thing or just parts of it—you can expect that it’s going to annoy and frustrate users. Some may even miss out on some of your content because of it, which will impact their overall satisfaction with the site.

One-Page Websites Without Internal Links

By its very nature, a one-page website can’t have internal links because there are no other pages to link to besides the home page. That said, there is a workaround that some web designers may use.

Instead of creating a navigation with internal page links, the navigation consists of links pointing to section anchors on the homepage. These anchor links will be named similarly to internal pages. Even so, those “internal” hyperlinks aren’t going to do much for the site in terms of ranking.

Webpages rank well when they provide tons of value to the people searching for them. While you don’t have to include thousands of words on a page in order for that to happen, it’s all subjective.

For instance, let’s say someone wants seafood for dinner. They’ve heard about a local seafood restaurant that’s supposed to be great, but they want to check out the menu before hopping in the car. So, they do a Google search for the restaurant’s name plus “menu.”

Google sends them to the link on the restaurant’s website where the menu is. On a multi-page website, that would be the “Menu” page. On a single-page website, that would be the “Menu” anchor link. So long as the menu is there on the page or available in an easy-to-access downloadable format, that page or section should rank high in search results for that query.

However, this is where one-page websites are at a disadvantage. There’s only so much content you can put on that page before it starts to slow things down and make it more tedious for the user to scroll through. So, the likelihood that a one-page website is going to rank for any search term other than the overarching one that describes the website or a popular action/goal like viewing a menu is quite low. It’s just not possible or practical to add enough content to one page to make it of value to the visitor.

Another reason why one-page websites tend to struggle with SEO is because they’re not scalable. One of the known factors that improve a website’s ranking is how fresh the content is. This is why many websites have blogs, shops and other areas built for growth on them. As you add new, relevant content that offers greater value to users, the website improves its relevancy and authority.

While a one-page website in and of itself isn’t an SEO no-no, it does put serious limitations on how the website will perform in search over time. The restaurant example above is an exception to the rule—so long as the website remains updated and actively marketed online, that is. However, there aren’t many business models that can get away with a one-page design and still expect to rake in SEO benefits.

Infinite Scroll

Infinite scroll is one of those web design trends that won’t necessarily affect a search engine’s ability to index a website for ranking. However, it can greatly impact the users’ experience.

There are a few of reasons:

Footer access
Infinite scroll prevents access to the footer. Fast-moving users might be able to scroll to the bottom of the page and click the link they need in the footer before the new content loads. But what percentage of users do you think are capable of that? And should it really be their responsibility to have to beat the infinite scroll in order to access the page they want?

Miller’s Law
Infinite scroll can be draining on users. It’s the same reason why we don’t design ecommerce results pages to show dozens or even hundreds of products at a time. The human brain can realistically only hold seven or eight items in it at once. Anything more than that and the user will become overwhelmed.

Unethical design
The third issue relates to the ethics of infinite scroll. This design trend essentially creates an endless stream of content for users to consider. For some users, their natural response is overwhelm and flight. For other users, their natural response is to consume more and more and more, feeding their online addiction or whatever it is they’re using the content to avoid doing.

In the end, the users’ response to the infinite scroll isn’t going to be good for the website or its ability to attract new visitors via search engines. Even though it might seem like a positive thing— i.e., giving users as much content as possible—it can generate a lot of bad feelings in those users.

Imagery With Improper Alt Text

There are a few reasons to attach alt text to website images:

• Improve search engines’ comprehension of the content on the page.
• Create a new opportunity for the page to rank in (image) search results.
• Make the visual content accessible to all.

It’s not just a lack of alt text that can lead to problems with SEO or missed opportunities.

Vague alt text
Image alt text doesn’t automatically make an image or page more rankable. For instance, a decorative image, background graphic or icon doesn’t really need explaining and, thus, shouldn’t have alt text.

Alt text should first and foremost provide a clear description of what the user is seeing—but only for images that provide more information to users.

I’ve looked at some webpages that are full of descriptive graphics. However, when I pull up the code, the alt text reads like a list of nouns. Girl. Boy. Hospital. Shopping cart. GIF. None of those words would ever make for an acceptable alternative text description.

If you’re not sure whether your images are descriptive enough, read the paragraph that appears before the image, then the alt text and finally the subsequent paragraph. What you’re looking for is whether the alt text disrupts the flow of content. If it does, then it needs to be rewritten so that users who depend on alt text won’t experience that friction on their own.

Repetitive alt text
Another common alt text issue is caused by repetition. I tend to see this on business websites that use a lot of photography—especially stock photos.

Instead of using custom alt text for each image, they all have the same description. I think the assumption here is that, so long as you write alt text that reads well and includes the focus keyword for the page, it’s all that matters.

There are a number of issues with this. The first is that screen reader–dependent users are going to have to sit through listening to that same description every time they encounter it on the page. I don’t know about you, but that would drive me nuts.

The second is that none of those images will have any chance of ranking since they all say the same thing. It’s one of the reasons why it’s a big no-no for pages on the same site to use the same keywords. It’s called cannibalization.

Embedded “alt” text
All this means is that there’s no alt text coded into the webpage. Instead, the text appears inside of the image.

In very rare cases should descriptive text appear inside an image. The only real exception to this is the preview image for a blog post, article, etc. Even then, it’s not a good practice.

As a basic rule of thumb, choose images that are visually descriptive. Then, use alt text to provide the companion wording for the users who can’t see it with their own eyes.

Wrap-up

We’ve come such a long way on the web. I remember how terrible websites were when I was in college. We have it so good these days.

But just because we’ve nailed down what good responsive web design looks like, that doesn’t mean we should just assume that what everyone else does is okay to do, too. There are some web design trends and practices that might look good when you implement them and even get some oohs and aahs from users at first. However, they could be hurting the site’s SEO.