This Is Why Web Design and UI Matter for SEO in 2020

This article is a guest contribution – read more about the author at the bottom of the post. 

A long time ago, in a galaxy far, far away…. web design and SEO used to be incredibly different departments, processes, and work-flows.

Okay, maybe not that long ago and not in a galaxy far, far away, but now more than ever, SEO is becoming an integral part of web design and vice versa.

Google Search Console now throws errors for elements of design and has even partnered up with https://material.io/ to help guide and influence your design.

I kid you not! Take a look at the footer of Material.io, and you’ll see Google’s logo.

Crazy, right?

Well, once you begin to consider the holistic ideology of a website seriously, it all starts to make more sense.

After all, the whole point of most websites is to solve a problem or answer a question.

If you can’t — or won’t — do it in a way that users enjoy visually, why would they stick around or come back?

That said, let’s jump right in to discuss the top three ways design and user interface can help improve SEO:

Color, Contrast, and Whitespace

Readability, Typography, Tone, and Direction

Headings, Underlines, and Bolded Text

Color, Contrast, and Whitespace

It’s never been truer, especially in marketing, that color has a power which directly influences decision making — and it looks like Google knows it, too.

As the evolution of user interface and SEO progresses, color, contrast, and whitespace are becoming crucial for a multitude of reasons.

Anecdotally speaking — outside of ADA standards for accessible design and Google’s known contrast requirements — have you noticed the flat-minimalistic trend?

How websites utilizing two or three flat pastel colors and one conversion shade with a ton of whitespace often skyrocket to position 0 and 1 in the SERPs?

I certainly have!

I know at this point, you might be thinking this is all a bunch of utter nonsense.

Your closest friend — who is an SEO guru — told you that design doesn’t impact your SERP ranking, right?

Well…

When digging through the Material.io guidelines, I found a study about how Google has used whitespace to convey trust and authority — and if they’re judging themselves based on this secondary signal, they may well be judging you.

Read here how Google created a custom Material theme with an emphasis on whitespace, because they found it consistently conveyed a sense of security to site visitors in surveys and tests.

It’s also important to note is that many major brands have moved to flat color combinations featuring high-contrast design and macro use of whitespace.

Think Uber, Lyft, Snapchat, Instagram, Facebook, and… Google & Google’s tools. 

Coincidence?

Let’s play devil’s advocate for a moment and assume Google isn’t evaluating your website based on attributes such as whitespace, flat pastel colors, and contrast.

Does this mean you shouldn’t employ these concepts strategically and base your site’s design solely on what you think “looks best?”

Research says no.

I won’t dig too deep here. This article intends to persuade you to use UI/UX Google likes, not give you an art lesson.

But here are some additional resources to provide further insight into the use of color, contrast, and whitespace.

Color in Design:

Article I – Understanding Color Psychology

Contrast:

Article I – Color Psychology and Contrasts

Psychology of Whitespace:

Article I – Whitespace & Web Design

Article II – Psychology of Web Design

Article III – Whitespace 

Readability, Typography, Tone, and Direction

I’m going to warn you right now: the following viewpoint is highly controversial in SEO circles.

So controversial that you may decide I’ve no clue what I’m talking about, and SEOButler should fire me as a contributor and denounce all my previous articles. 

Okay, maybe that’s a bit overdramatic, but you get my point.

To make my case, I’ll cite Google documentation and screenshots so we can discuss the points I espouse using the most authoritative sources available.

Let’s jump right in.

Check out the screenshot below. It’s from the Google developer documentation and style guide.

That’s right — straight from Google.

Let’s start with readability, typography, and tone.

As we can see from this document, Google wants us to adopt a “conversational tone,” as if we were a knowledgeable friend. 

Am I doing alright so far? 😉

The document goes on to state that your writing tone should be authoritative, approachable, and above all else — human.

Note: For some niches like medical and YMYL, this may not always apply, but informal blogs and articles should aim for a conversational tone.

Let’s take a minute to observe a few other things that pertain to how Google has decided to format their own material (not technically related to SEO):

• There’s a bulleted list for individuals who prefer to skim articles rather than read them fully (see what I did there?)
• The letter kerning is standard for most font sizes but has a slightly wider than usual word spacing, creating additional whitespace.
• In most cases, paragraph length never exceeds three sentences.
• The grammar is impeccable.
• Word selection and conventions are not overly difficult.

These are just a few observations. I’m sure you could make even more if you took the time.

One thing I want to discuss in greater detail about this particular Google page is direction. 

In this instance, direction refers to the path the reader’s eyes follow as they scan the page.

Direction is a crucial factor when it comes to bounce rate, pogo-sticking, and, most of all, providing the user with a timely solution to their query.

So, how is Google influencing direction within their own content?

Let’s reassess the image below.

Google has done something incredibly important here to help keep users engaged. Did you notice it before getting this far?

They have formatted the content to match how humans read, scan, and track web pages.

How, you ask?

1. The F-Shape — Generally speaking, people read and scan screens in the shape of an “F.” On a macro level, Google has made sure their documentation matches this behavior.
2. The F-Shape Reinforced — Not only is the entire article F-shaped on a macro level, but it’s also F-shaped on a micro-level. Take note of the sentence structure in the first four sections. Notice anything? Google has alternated between three lines, to two lines, back to three lines, and then two lines — reinforcing the F-shape.

Note: If they wanted to reinforce the F shape further, Google could’ve put their longest bullet points first and the shorter ones in descending order.

I hope all you CRO specialists are taking note!

What else do you notice about the direction of the text, if anything?

Maybe the breadcrumb navigation at the top of the page?

Or the key point and actionable take away for those low on time?

How about the fact there’s only one h1, and the smaller sub-headings are h2’s?

While technically a facet of semantic on-page SEO best practices, the headings highlight areas of interest for users, improving the direction.

Did you also notice the table of contents on the sidebar with jump links designed to help users find answers to their query more quickly?

Note: Since we’re talking about jump links: When done correctly, Google has lately been featuring jump links in their SERPs. Also, note that jump links with query answers usually obtain position 0.

Headings, Underlines, and Bolded Text

If you’re a technical SEO, I’ll bet you either consciously or subconsciously believe that headings, underlined words, and bolded text are critical semantic on-page SEO factors.

And you’re right, they are…

But that’s not why they were created, nor should it be the main purpose of their use.

Allow me to explain.

Headings

Headings are directional cues for people.

Yes, people — not just search engines.

Headings have been helping people find relevant information since long before the invention of the internet (think newspapers).

Design largely dictates the directional flow of users and how they experience and absorb information from websites.

Headings help break that experience up into critical segments of particular interest — especially when there’s a lot of text on the page (like with this article, for example).

When you use headings for their original intended purpose rather than as an SEO tactic, both you and the user win. You get to style your page semantically, and the user can quickly ascertain what information is valuable to them.

The question remains: do search engines look at headings only from a contextual standpoint? Or do they also examine what is above, below, and around them?

John Mueller of Google explains it like this:

“[ ]What we use these headings for is, well, we have this big chunk of text, or we have this big image, and there’s a heading above that, therefore maybe this heading applies to this chunk of text or to this image.

So it’s not so much like there are five keywords in these headings, therefore this page will rank for these keywords, but more, here’s some more information about that piece of text or about that image on that page.

And that helps us to better understand how to kind of frame that piece of text, how to frame the images that you have within those blocks. And with that, it’s a lot easier to find… the right queries that lead us to these pages.”

When you read the above excerpt, you may begin to paint a new picture for yourself when it comes to headings.

You can see that while headings can help with semantic principles of SEO, the critical part is to quickly guide users to the information you believe their query seeks.

After all, it’s like I tell my SEO’s at our local firm:

“Don’t use headers for keywords — use headers to help people understand the context of your topics.”

Easy enough, right?

Underlines or Colors In Hyperlinks

For years, there’s been debate in SEO circles regarding underlining hyperlinks, the colors of the hyperlinks themselves, and whether hyperlinks even have any impact on rankings.

There once even a point in internet history when the only style that could be attributed to a hyperlink was an underline.

But how does that still apply, and is it relevant?

Remember, you’re creating a website for your user, not just to rank higher in the SERPs.

If we head over to Google and start rummaging through their documentation, we may notice a few things that point towards an answer.

What are they?

• Google has moved away from underlining their hyperlinks. Until a year or two ago, all Google documentation had underlines visible to the reader.
• Google is still using the same color blue as always to represent a hyperlink.
• Google is using underlines on hover in the SERP for hyperlinks and on much of their documentation.

So what’s the takeaway?

Put yourself in the shoes of your audience and let that inform what you do.

If you land on a website with information you’re interested in reading and you want to click through a hyperlink, would you be more inclined to Click Here or to Click Here?

In our various studies, we’ve concluded that people are more likely to click the bolded, hyperlinked text over the former.

Why?

Because color is often used to attract and emphasize key points, but that does not necessarily convey the ability to read further by clicking on a link.

So, what does Google want?

In my opinion, Google only cares about consistency and making it crystal clear to your reader what can be clicked and what can’t.

What this means is — whether you decide to use this, or to use this — make sure you’re encouraging directional flow and using uniform conventions to direct your reader.

Note: In case studies, Google determined that using a blue hue with a contrast ratio of 4:1 for hyperlinks is best practice.

You can read more about hyperlinking conventions on Web Fx, a leading resource.

As to how this pertains to SEO, we now know that hyperlinks play an integral role in helping Google understand what pages are about — especially when related to an interlinking structure.

Because Google’s bots do not read color or underlines, there is no direct correlation to SEO from a primary ranking perspective. However, as a secondary consideration, if users don’t understand your hyperlinking conventions or are less likely to click them, you will see a drop in page pass-throughs and dwell time.

Bolded Text or Italics

When it comes to bolded and italic text formatting and SEO, any specialist worth their salt has tested their theories in the SERPS — especially as it pertains to design and indexability for emphasized context.

But what does Google say about bolds and italics, and how does the user experience relate back to SEO?

Let’s get it straight from the horse’s mouth.

In the image below, Google tells us exactly what it wants and has even given us an example of it. I bet they’ve done their research too!

Fascinating, isn’t it?

Note: While most people use <i> to italicize their text, there is a better way to do it.

How, you ask?

By using the <em> tag. The <em> tag was created to draw emphasis to a particular part of the text and can be styled with CSS.

Let’s test this theory. At the time of writing, Google hasn’t indexed this article.

I’m going to emphasize a piece of text below with the <em> tag and see how Google later pulls it into the SERPS.

<em style=”font-style: italic;”>Schieler Mew Has Written this Article On SEO Butler</em>

Prediction: Later, when Googling this exact phrase, I anticipate Google pulling it into the SERP bolded for this article. Let’s see what happens!

As it pertains to user direction and flow, we can draw this conclusion: Italics draw attention, as it’s a different style of formatting that’s used adjacent to expected formatting styles.

The reader will be naturally drawn to it, especially if Google is emphasizing bolds and italics in the SERPS, which is to be expected.

Final Thoughts on Web Design and UI and How It Affects SEO

Taking into consideration all of the points above from a design and UI perspective, you can begin to see how all of it ties into SEO.

While some of the claims here are inferred and correlative, I’ve gone directly to the source: I’ve looked at what Google is doing and how they do it.

While nothing in design or SEO is definitive, one principle seems clear — creating a seamless and satisfying experience for your users should be priority #1 in 2020.

There’s little doubt that Google is steering its algorithms to better understand how humans process information in order to provide more relevant results for search queries.

While it can be argued that design and UI are not yet a significant ranking factor in SEO, all signs point to them being ever more crucial going forward.

I will leave you with one last thought, my friends.

Perform SEO today, with the future in mind!
[cta]
[author_bio image=”https://seobutler.com/wp-content/uploads/2019/07/Schieler-Mew-Headshot-Cropped-150×150.png” name=”SCHIELER MEW”]Schieler Mew is a Digital Marketing Strategist and Comprehensive SEO consultant that has worked with Fortune 500 companies all the way down to local SMB’s. He specializes in advanced SEO theory and technical concepts to help online businesses thrive in evolving and volatile markets. Schieler is the owner of Viictory Media[/author_bio]