Blog

UX and SEO: How UX Design Can Help With SEO Concerns

Published on: 
April 22, 2021
Updated on: 
August 13, 2021
by
Sam Torres
Sam Torres

The quest for owning the highest ranking page and prized snippets has historically centered on analyzing performance metrics to recalculate keyword, URL, and page architecture strategy. Too often, SEOs ignore what Google has determined to be equally essential to your page experience: user experience web design (UX). To rank against competitors, you need to ensure your site's safety, mobile responsiveness, and navigation structure are addressing the human needs of your users.

UX and SEO share a common goal: provide users with a satisfying response to their query, then convert that positive engagement into clicks, sales, and sign-ups (ideally at a high rate!). Let’s take a look at how SEO and UX design together can drive powerful organic traffic to your site.

Why is UX important for SEO?

User experience is all about creating an easy, enjoyable, and engaging interaction between your site and its visitors. Consider this: what turns you off when you arrive at a new website? A confusing layout? Tons of pop-up ads? No satisfying answer to your search query? When you encounter these negative factors, you can guess that that business didn’t consider user experience when designing their site. If you’ve landed on their page after a Google search, they’re probably doing something right when it comes to SEO. But, they’re missing out on conversions by not prioritizing their site visitors’ human need for trustworthy, clear content and ease-of-use.

It comes down to this: SEO may get users to your website, but UX design will keep them happy. In many cases, SEO and UX best practices overlap, meaning success in one area will likely lead to success in the other. We see this especially when considering:

Searcher Intent

Both SEO and UX require you to accurately respond to searcher intent in order to increase rankings. We’ll dive deeper into this a little later on, but if you’re unfamiliar with types of user intent, take a look at our blog on the art of choosing the right keywords.

Site Accessibility

Ensuring your site can be accessed and navigated by people of all abilities allows you to engage with as many people as possible, which can in turn lift your SEO rankings. Taking the time to guarantee differently-abled users will explore your online offerings with ease means more opportunities for conversions and happy search engine crawlers.

Mobile-Friendliness

Optimizing your site for mobile is nothing new to SEOs; it’s practically common knowledge that at least half of your audience will abandon a page if it isn’t mobile-friendly. We should also consider that mobile design isn’t just about satisfying Google’s Search signals; it’s truly about guaranteeing that users accessing your site on a mobile device have the same easy, positive experience as a desktop user. This means creating a responsive design that still converts when all the user’s working with is one thumb and a 4-inch screen.

Safe Browsing Techniques

Users encountering a “deceptive site ahead” alert from Google is a critical hit to any website’s organic traffic. Securing your site by serving it over HTTPS is (luckily) increasingly commonplace, and it is always to the advantage of site owners to keep their site safe for users by restricting admin access, updating plugins, running regular back-ups, and using SSL certificates. Google assesses site safety as part of its page experience evaluation, and not including the above precautions can be detrimental to your ability to achieve a higher ranking.

Non-Intrusive Interstitials

Intrusive interstitials consist of pop-ups, layout changes, and alerts that cover most of a page’s main content and are difficult to dismiss. As users ourselves, we strive to avoid, prevent, and minimize anything that is going to (quite literally) block us from seeing the content we’re looking for. As site designers, we can’t forget to think like a user and eliminate these user-hostile elements from our repertoire - or risk a significant hike in your site's bounce rate. Avoiding intrusive interstitials is crucial both for UX and for SEO. Users are more likely to stay on a page and interact with your content for the first, and passing Google's usability test is important for the second. Responsible interstitials that generally do not harm rankings include:

  • Dismissable banners of appropriate size (<20% of the screen size)
  • Chat boxes
  • Age verification, cookie acceptance, or similar use requirements
  • Login prompts for unindexable content
  • Share buttons

Do note, however, that how you implement these things can impact SEO. For example, some age verification tools will block search engines, so do your homework and always properly vet all your tools.

Core Web Vitals & Page Speed

Google has established its Core Web Vitals as key metrics for assessing website performance upon page load. The following ranking factors are determined to be of high importance when creating measurable (and speedy) outcomes on a user-centric site:

  • Largest Contentful Paint (LCP)

This measures how quickly a page’s largest text or image block loads for viewing. Google's guidelines define this as within 2.5 seconds of accessing the page to be "good".

  • First Input Delay (FID)

This measures the time it takes for a page to be able to begin processing event handlers and allow user interaction. According to Google, this should be less than 100 milliseconds from when the user accesses the page.

  • Cumulative Layout Shift (CLS)

This measures visual stability by calculating the number of frames in which an element moves and the total distance moved in pixels. For good UX, a site should maintain a CLS of <.1.

For an in-depth look at maintaining CWVs and the relationship between SEO and UX design, take a look at this presentation on UX, Core Vitals, and SEO.

In addition to LCP, FID, and CLS, both search engine optimization and UX require that site developers focus on site loading speed, including mobile page speed. Use Google’s PageSpeed Insights Tool to assess your performance and make adjustments to assure that users don’t abandon your site in favor of faster-loading competitors’.

How to Design a Website for UX and SEO (with examples)

Your goal should be for your website to quickly address searcher intent with fast-loading pages that are easy to navigate on mobile and desktop. When looking through the lens of UX, there are a couple of central design factors that take into account human preferences, tendencies, and needs.

Navigation Structure

User-centric site navigation is one thing above all else: simple. This may seem like a contradiction to (old school) SEO tactics, which historically resulted in a multitude of keyword-focused pages that attempt to capture disparate search inquiries. But today, data suggests that you can achieve a higher ranking by using a few content-rich, user-focused pages that include many related keywords and prioritize providing valuable, trustworthy information. This approach to driving organic traffic marries SEO strategy with high-quality UX design to create sites with fewer, easier-to-navigate pages that are more likely to satisfy searcher intent.

When a site visitor is trying to locate a product or find information about your brand, they should always be able to get to critical content they’re looking for in 3 clicks or less. This means creating intuitive menus and well-placed CTAs that are inspired by user behavior.

Answering Search Intent

When a user arrives at your site, the first content they see should match their search query - so they know they came to the correct place. It needs to happen for all webpages, from your homepage to your product/services pages to your strategic content.

This immediately builds trust with your brand and encourages visitors to keep scrolling and clicking through for more information. Plus, it helps with your SERP rankings and increases your chances of being a featured snippet. UX gives us a creative opportunity to use more than just text to respond to searcher intent. For example, take a look at the Under Armour page below that appears as a result for the query “men’s running shoes.”This page perfectly blends SEO and UX by featuring target keywords within a multi-faceted design. We first see a concise bit of text that explains what these products are and why they’ve landed on this page after searching “men’s running shoes.” Then, surrounding the copy, there are multiple products with clear images that reinforce the response to user intent.

Nike.com content & informational CTA embedded on a category page


This page perfectly blends SEO and UX by featuring target keywords within a multi-faceted design - on an eCommerce Category page, which is notoriously hard to get SEO-friendly page copy on without either burying it at the bottom of the page (where it's devalued for SEO) OR sticking it at the top of the page (where it will push down products, and therefore potentially harm conversions.)

This concise bit of text explains what these products are and why they’ve landed on this page after searching “men’s running shoes.” Then, surrounding the copy, there are multiple products with clear images that reinforce the response to user intent.

Including rich design features such as page links, images, and videos can motivate the user to take action and continue their journey through the site resulting in a sale. The Tiffany’s landing page below takes a similar approach, using brief copy in conjunction with product images to satisfy and captivate users searching for “engagement rings”.

Tiffany & Co creative SEO solutions for ecommerce category page issues

Landing Page Layouts

Where you place copy, CTAs, and shareable content on a landing page should reflect user behavior and address your brand or audience’s unique features. To achieve both SEO and UX success, consider:

  • Ordering page elements and copy in an intuitive, logical order

Where you place items like titles, images, links, and videos on your pages matter - to users, and to search engines. Present critical information at the top, then walk the user through the information they need to know, as they scroll down the page. Don't forget that search algorithms take placement into consideration too - burying 5 paragraphs of text at the bottom of a long page reduces the efficacy of that copy!

  • Using easy-to-read, concise text blocks

Users are more inclined to keep scrolling if page copy appears in digestible segments that only require a quick glance to comprehend. With the days of keyword stuffing long behind us (yay!), brief content can perform just as well as long-form articles packed with keywords. Break up content with plenty of H2/H3 headings, bullet points, and white space to not only help readers consume content but also provide the opportunity to improve organic search rankings with related and longtail keywords.

  • Addressing split intent

If users are likely to arrive at your site with disparate intentions, you may need immediate CTAs that allow users to indicate or clarify what they’re looking for. You can lead them to the quality content they crave with additional pages that specifically speak to their needs. Take a look at this landing page from MVMT that addresses two types of influencer audiences while still satisfying searcher intent. Each user has the opportunity to self-select the information they want to see, keeping them on the site and moving towards conversion.

example of messaging split intent
  • Including first-touch personalization

This in-depth look at eCommerce landing pages found that 80% of users were more likely to convert if they encountered personalized recommendations immediately upon reaching a landing page. For eCommerce sites, this looks like not just satisfying searcher intent with one product option “above the fold,” but several. Take a look at this page before and after making informed UX improvements:

Before

eCommerce example of product page pre-UX fix


After

eCommerce example of product page pre-UX fix, including personalized product recommendations

eCommerce example of product page pre-UX fix


In the “after” version, where design was updated with user behavior in mind, we immediately see 4 visible related products. This gives the user the opportunity to choose from multiple options, find what they need, and trust that this company has the solution to their problem.

Conversion Optimization

While UX design is about creating an ideal environment for user engagement, ultimately, it’s about driving action that converts leads into clients or sales. A few ways you can use SEO and UX principles together to create a profitable page experience for your audience include:

  • Using keywords & heatmaps to inform page design

Related and longtail keywords associated with your target keyword can help you paint a picture of what searchers want to see on your page - and where they want to end up. Use this information to create rich content like images, videos, and graphics that address SEO needs and increase CTRs. Tools like Hotjar can help you analyze user behavior and create a visual design that maximizes the potential for views and clicks on key regions of your page.

  • Rephrasing CTAs for SEO - and Users

Outpace your competitors by replacing generic “click here” or “sign up now” CTAs with keyword-rich, benefit-driven copy that ignites engagement. Look at how the revised CTAs below speak to users’ needs and specifically illustrate why they should complete the action. And, these new CTAs get bonus points for better setting expectations about what the user will see next, and what do with it.

Good vs bad CTA examples


Use UVP in CTAs


  • Consider your audience

Every aspect of your UX design should be inspired by the driving factors associated with target audience personas. Consulting experts on marketing in your industry can help you find missed connections and conversion opportunities on your website, and avoid the kind of poor user experiences that drive your customers away.

So how can you improve your search experience?

Take an integrative approach to building your page experience by coupling effective technical SEO strategy (and hopefully other digital marketing strategies!) with thoughtful UX design. By combining these forces, users will be greeted not only by keyword-driven copy but by a page that genuinely meets their needs. For help getting started with SEO, check out our article on building an SEO roadmap.

The Gray Dot Company offers world-class services that help you increase organic traffic to your site with cutting-edge SEO tools. Contact us today to learn more about how we can help you succeed on the web.

Work With Us
We’ll help teach, mastermind, and carry out SEO roadmaps that check all the boxes.
CONNECT THE DOTS WITH US