for Enterprises
for Agencies
for SMBs
for Entrepreneurs
Keyword Rank Tracker
On-Page SEO Checker
Website Audit
Competitor Analysis Tool
Backlink Checker
Local Marketing Tool
US Agencies
UK Agencies
Backlink Monitoring guide17 UX design elements that impact your website’s SEO success
User signals, along with your website’s performance metrics, can decide your pages’ fate on SERPs. You can influence both by fine-tuning your pages’ UX design elements.
Just think about two online stores selling similar goods at almost identical prices. An online shopper will choose the one that provides information packed in a clear and readable layout, has convenient navigation, is pleasing to the eye with a clean design, and looks trustworthy.
The online store that fits the above description is the place where searchers finish their search sessions more often than not. User behavior patterns indicate that this website helps people reach their goals and signal search engines to rank its pages higher.
There is no need to elaborate further on why UX is important for SEO. Instead, we’d like to help you organize your website UX design and optimization efforts. Here is a list of web page elements that matter most for SEO. Check it out and learn what features your website should have and how to configure them to achieve better SEO results.
1. Text formatting
Your text content should be relevant, useful, and readable. Even though many lay emphasis on the first two qualities, there’s more to readability than meets the eye. In today’s fast-paced world, people don’t read the entire text on a page, even if it’s good. Instead, they scan it and focus on the most appealing parts.
Text formatting aims to assist people in navigating through information and finding what matters to them. When done right, formatting supports the text hierarchy and helps readers distinguish between the primary and secondary content. The following formatting elements will help you structure your web pages and make them easy to read:
- Subheadings tell readers what’s next, help them navigate through long texts, and quickly find the most relevant pieces of information.
- Bulleted lists help you break text into small chunks that highlight key points and make it easy for the reader to remember information.
- Numbered lists show the sequence of actions that you suggest your readers follow.
- Blockquotes set off small parts of a text to highlight important facts, add social proof, or appeal to readers’ emotions.
- Bolding, italics, underlining—if not overused—attract readers’ eyes to the most important words or terms they may want to find on the page.
Formatting is not as easy as it seems. However, it’s only a problem when you build a custom website from scratch. Selecting sizes for fonts and spacing requires a good sense of proportion. If you use a CMS, you just need to select a ready-made template—all formatting styles will be predefined in the design made by a professional.
In terms of SEO, you should be aware of the means you use to visually highlight different parts of the text. With web pages, you can format text using HTML tags or CSS styles. Whereas CSS styles can be applied without limitations, HTML tags represent semantic markup and have particular meaning for search engines.
HTML tags—such as <h>, <b>, <strong>, <i>, <em>, <mark>, <ul>, <ol>, and others—not only change your text visually but can signal the importance of different parts of the text, reflect its structure, affect the meaning of highlighted words, or change the way the screen reader pronounces them. Therefore, make sure you follow the rules when using HTML tags for formatting.
And there’s one more thing to keep in mind when formatting texts—legibility on mobile screens. Your default font size for body text on mobile devices should be 16px or larger. That’s an optimal size for both text-heavy and interaction-heavy pages. It also works well for input fields for entering personal details or sending online queries via web forms. Also, check out the list of 11 UX writing best practices to make your copy more effective.
2. Images and illustrations
Visuals enrich your website’s user experience—pages look boring without them. You can use pictures to illustrate the statements you make in blog posts, feature the products in your catalog, or make your sales pages look more appealing and convincing. You may want to use photos, illustrations, screenshots, infographics, diagrams, or other types of images, depending on your goals.
However, images make pages heavier and slow down your site’s loading speed. Therefore, there’s not much sense in adding images for the sake of aesthetics. Every image you add should bring value to the user and be SEO-friendly. The value of images can be determined on a case-by-case basis, whereas their optimization has clear rules. Let’s highlight several essential tips from our complete guide on image SEO:
- Use file formats search engines can index (PNG, JPEG, or GIF) and consider using next-gen image formats, like WebP.
- Compress images before loading them on your site to balance their size and quality.
- Consider using <img srcset=”” src=”” alt=””> syntax with differently-sized versions of the same image to utilize responsive images that adjust to the size of the screen.
- Customize image names to make them descriptive and use hyphens, not underscores, to separate words in the file name.
- Add alt=”” and title=”” attributes to <img> tags to help search engines understand what’s on them.
- Obey the copyright law and avoid using the stock images everybody else is using.
The images from your website can show up in image search results. If you mark up your pages following Google’s guidelines on adding structured data, some of your images can be shown in rich snippets on general SERPs.
3. Above the fold
Above-the-fold content is the first thing users see when a web page loads. It should provide just enough information for a visitor to decide whether or not they want to stay and engage with the site. Most business websites want to have the following elements above the fold:
- Website name and logo—helps recognize and memorize your brand.
- Hero image—creates the right mood and evokes emotions.
- Headline—concisely tells visitors what the website is all about.
- CTA—converts those who are ready to act (subscribe, request a quote, start a trial, etc.)
- The main menu—provides links to the most important pages of the website.
In terms of design, today’s content management systems have home page templates for almost any industry. The templates follow best practices and include all the necessary structural elements. To get a nice-looking above-the-fold part of the page, all you need to do is substitute the placeholder hero image, headline, subheading, and CTAs.
Another advantage of modern website templates is that they now are responsive and designed to fit the screen on different devices. They have liquid layouts that change depending on the screen size, and rules for moving and stacking content blocks that make some information go below the fold on narrow screens.
When it comes to SEO, it’s not only important what information a visitor sees right after the page loads, but also how fast they can see it. After the page’s visual loading speed has officially become a ranking factor, it’s a good idea to balance your SEO and UX/UI design requirements so that the page will be beautiful and load fast.
4. Header and footer
Website headers usually contain the logo or company/website name and the most important features that should be accessible from any page—such as account sign-in, search bar, and site navigation.
Many websites have sticky headers that keep the main links or contact information readily accessible for visitors even when they scroll down pages.
Headers used to be quite massive and loaded with information. They would sometimes occupy up to ⅓ of the vertical space on the first screen. But mobile design has influenced things drastically. Today’s site header areas hardly take up ⅙ of the screen, with a small logo and a single line of navigation.
Whereas headers have become smaller, the opposite has happened to footers. They used to be thin, but now website owners often create mega footers, or fat footers. Such footers include links to as many pages as possible. On top of that, there you’ll find social media icons, contact details, and newsletter sign-up forms.
You can follow the trend, but remember one rule. People love consistency. The best approach to creating footers is knowing what your visitors expect to see there and giving them what they want. If they’re used to finding links to privacy policies and sitemaps on website footers, then you should put yours there too.
Headers and footers often transform when fit into a single column on mobile screens. While headers often become neater when hiding the main menu under a hamburger icon, footers tend to grow enormous in height and make pages seem endless.
Nevertheless, a loaded footer on mobile can be a good thing. By observing mobile heatmaps, UX designers discovered that mobile users scroll straight down to the footer quite often.
This happens because the swipe to scroll function on smartphones makes it easy to reach the bottom of the page. That’s why footers get almost as much attention from users on mobile devices as headers on desktop screens, which gives you a reason to put something useful on them.
5. Navigation menu
The main menu in the website’s header shouldn’t be overloaded, and should typically contain 5 to 8 key links. The type of links you’ll want to add depends on your business niche. Almost every website’s header links to Home, About Us, and Contact pages. The rest of the links may include:
- Catalog, list of products or services
- Sign up or sign-in buttons
- Shopping cart and wishlist icons
- Blog, resources, or knowledge base
Large online shops and magazines often use extended menus. The navigation links on those menus are usually grouped by category. For example, they may have their pages grouped by topic, such as politics, culture, sports… or by the type of content, such as videos, articles, popular, latest… or for an ecommerce site by product category, such as shoes, shirts, shorts, socks, and so on.
Optimizing navigation menus for mobile screens is one of the pain points in web design. The most common solution is to turn the horizontal menu into a drop-down or fly-out list and hide it under a hamburger menu icon in the header.
From the SEO design perspective, if you want to improve the ranking of a particular group of pages on your website, it makes total sense to include them on your main menu. In doing so you’ll add sitewide internal links to these pages and direct the website’s link equity to them. You’ll apply the good old PageRank sculpting technique, and let search engines know which pages are important.
6. CTA buttons
You’ll want to place your main call-to-action button in the header and on the above-the fold part of the page. This will show your website visitors the shortest way to achieve their goals with your help. This button should be distinct and stand out from the surrounding elements —perhaps a bright color or a drop shadow will do the trick.
You can even place a secondary CTA button on the same screen if it provides a reasonable alternative for visitors. It can lead visitors to the same goal but through a slightly longer path, and therefore, be less attention-grabbing than your main CTA button. For example, for a marketing platform, the main CTA would say ‘Start free trial’ while the secondary, ‘View demo account’.
When it comes to mobile optimization, you’ll want to have fewer CTA buttons per screen. First, because of their size—remember the UX rule stating that tap targets should be large enough to fit finger pads. Second, the page, form, or interface where visitors get after clicking those buttons might not be optimized for mobile. We keep the View demo account button on mobile screens because SE Ranking’s interface looks fine on smartphones.
Although the main purpose of CTA buttons is to improve the bottom line, they also contribute to SEO. They make visitors drill through your website pages. Moreover, clicking on these buttons always creates conversions. And a user session with conversions is the best kind of session on your website for every party involved—your business, SEO specialists, and search engines—because it means every party did its job right.
7. Language switcher
If your website targets more than one country or a multinational country, you’ll need to localize it and add a language switcher. Even if your site automatically detects languages based on the user region or browser settings, you’ll need this feature anyway.
Imagine your website defaults to German for an English speaking customer when they browse on someone else’s laptop while in Berlin on a trip. They’d want to switch to their native language. If you don’t offer such an option, they won’t have a great experience with you.
This small but important page element should reside either on the header or footer of your website. Both options are fine—you just need to make sure it’s really easy to find. For mobile devices, you often find language switchers in the main navigation as a menu item.
If your website has two language versions, you can add dedicated language buttons, links, or a toggle. If your website has three or more versions, a dropdown menu will help you save space. Just make sure you label languages correctly, for example use Deutsch instead of German and 日本語 instead of Japanese.
One more thing—think twice before using flag icons! Using the flag of Portugal to depict the Portuguese language would alienate the millions of people living in more than ten countries who speak this language. That said, if you have pages in Portuguese localized for Portugal and Brazil (with different content), adding flag icons would be a good solution.
8. Breadcrumbs
Every multi-level website needs breadcrumb navigation. Most websites leverage location-based or category-based breadcrumbs that reflect the site’s hierarchy. From the UX design perspective, breadcrumbs should meet several criteria to be convenient and useful:
- Every step of the navigation path (except the current page) should be clickable.
- Labels should match page names, especially if they include keywords.
- Ellipses should be used to shorten long labels and keep breadcrumbs readable.
- Middle-step labels should collapse to help fit a long breadcrumb trail into one row.
After a user lands on your site, a glance at the breadcrumbs should let them understand where the current page originates from and what categories it falls under. For example, an online store visitor that landed on a product page may want to use breadcrumbs to access a list of similar products in one click.
To save space on the mobile web, breadcrumbs are often omitted or collapsed to show only one label for the parent page (or the previous step). But sometimes breadcrumbs are used as the main navigation element on mobile screens. For example, eBay collapses breadcrumbs on category pages but shows the whole trail on product pages. Moreover, they enable horizontal scroll for the breadcrumbs element so as to fit it into one row on a horizontal screen.
Besides helping users, breadcrumbs also help SEO. Google not only uses breadcrumbs to better understand your site structure and categorization… but also to display the page URL in a more user-friendly manner in snippets on the SERP.
9. Left/right sidebars
Before the smartphone era, sidebars used to be an integral part of any website. Today, most sites have a mobile-first design, which means all their content flows in a single column. Even if a site has sidebars, you’ll see them only on a desktop screen. On smartphones, the content from sidebars usually drops beneath the main column’s content.
More and more web designers prefer to ditch this website element. Nevertheless, even though a huge share of traffic still comes from desktop devices, website sidebars won’t die. Moreover, they can still provide great value in terms of both UX design and SEO.
For example, businesses usually include sidebars in the design of their corporate blogs. On the blog post pages, you’ll often find sidebars showing ad banners featuring related products or events, newsletter subscription forms, and other conversion-focused elements.
Blogs that publish long-form content often add a table of contents to their sidebars to help readers navigate through articles. Having a table of contents that pulls <H2>and <H3> headings from the article not only improves user experience but also benefits SEO. Google uses this navigation element to create additional links in featured snippets or rich results, just like in the following example.
10. Faceted navigation
Large online stores often implement filtering and sorting features in their product listings. These features represent two types of so-called faceted navigation. Faceted navigation allows users to either narrow down the list of available products or reorder items on the list. Such capabilities improve user experience, but sometimes add complexity to SEO.
Faceted navigation can be implemented in two ways. It can use JavaScript code to dynamically change the product list without reloading the page. In this case, users view filtered or sorted lists on the same URL. Alternatively, the faceted navigation reloads every filtered or sorted list of items on a separate URL. In this situation, it adds an infinite number of indexable URLs to the site.
By showing sorted lists of products on different URLs, faceted navigation creates the problem of duplicate content. This harms SEO because ranking signals get diluted into multiple URLs. As a result, none of the copies of the page become strong enough to rank high on SERPs. The best way to solve the problem is to use rel=”canonical” and set it to the parent category page where users apply sorting. This will allow search engines to consolidate all sorting results into one canonical page.
If product filters create new URLs, problems can arise not only with duplicate content, but also with thin content. Some filters may return results that are very similar to each other, while combinations of filters may return a list of two or three products per page. The URLs containing such filtering results are not worth indexing and waste the website’s crawling budget.
You can prevent undesirable filtering results from indexing using restrictive directives for search robots. You can add robots meta tag with noindex, nofollow, or none directives to the <head> section of such pages. Or you can add X-Robots-Tag with noindex, nofollow, or none directives to the URL HTTP headers of such pages.
Yet, some filtering results pages can work well for SEO. You can optimize such pages for specific long-tail keywords. For example, if your potential customers use the “red shoes” query, the list of shoes filtered by the red color attribute will perfectly match their search intent. You can even configure your filters to show such results on a dedicated URL (something like website.com/shoes/red-shoes) and get it indexed and ranked high on SERPs.
11. Related or featured items
You’ll often see additional navigation widgets at the bottom of product or blog pages. These widgets help automate internal linking on your website. They help your visitors since they offer related suggestions, but SEO specialists love them too since they interlink a group of related posts or products, and that’s helpful for optimization!
Most related or featured items are displayed in the form of carousels or lists and show previews of the destination pages. For example, you might add a related post widget to your blog. It will show titles, thumbnails, and short excerpts from the articles it links to.
From the perspective of user experience optimization, this widget helps readers find more information about the same topic on your blog. From an SEO perspective, it helps you build more internal links to highlight the most important pages. Crawlers will be able to find ALL the pages of your blog and grasp the context of your content.
If you don’t want to use special widgets, you can manually add a plain list of links to your pages. Just make sure the link anchors contain relevant keywords and make it clear what pages you link to and why.
12. Social proof elements
Some SEO website design elements will help you leverage social proof. For example, you can show the number of customers you currently have, feature famous clients, or share their testimonials. You can also show badges, trust seals, and ratings you earn from review platforms, as well as authoritative research and advisory companies.
Among all the social proof elements, testimonials and customer reviews look the most convincing to your potential clients. The simplest way to add them to your site is a carousel with your customers’ quotes describing how your company helped them. You can make your testimonials look more compelling and convincing by adding your clients’ photos and links to their social profiles.
You can even go a step further and record short video testimonials or customer success stories. If you want to make your customer page truly impressive, blend short video testimonials with quote snippets and support them with links to related case studies.
13. Social share buttons
Your readers or customers may want to share your pages on Facebook, Twitter, Pinterest, or other social platforms. By having social share buttons on your website, you make sharing super-easy for your visitors, and they’ll thank you for that with lots of shares.
For example, you can add the Tweetable Quote feature to your blog. If someone wants to tweet a quote, statistics, or a catchy phrase from your article, they may do so in one click.
With social share buttons, your website visitors are more likely to share your content, which puts you in front of their audience— people who didn’t know about you or your products before… and the best thing is that social posts are seen as recommendations, which makes them extra-effective in marketing.
14. User input elements
Most of the pages on your site will be static and information-rich, while some may require user input and be interaction-focused. Web design offers a lot of tools that add interactivity to pages: forms with various input fields, file upload buttons, date and time pickers, text areas, and so on.
Forms are one of the most widespread types of user input elements. It’s hard to find a website that doesn’t offer its visitors at least one form to complete. That’s because forms usually play the role of the final step in a user’s journey on a website.
Register for an event, place an order, create an account—there’s a form for any conversion action. UX designers have to put a lot of thought into any of these. When done wrong, forms become barriers between users and their goals and cause frustration. To build helpful forms, you should remember the following rules:
- Ask only what’s required, because extra fields in a form reduce conversion rates.
- Use preset values and autocompletion to help people fill in forms faster.
- Use placeholder text and input masks to help people complete forms correctly.
- Match keyboard to input on mobile screens (letter or numeric keyboard).
- Make input fields large and convenient to tap on mobile screens.
- Use inline validation to immediately inform users if their data is incorrect.
Forms can be embedded into a webpage or open in a popup. If a form opens on a separate URL, the URL should be blocked from indexing in search engines.
15. Free online tools
Interactive elements help you transform an ordinary static web page into an entertaining or useful tool. People will spend more time on your site if you offer them an interactive calculator or a quiz. On top of that, a great interactive tool can help you build a ton of backlinks because people are eager to share links to useful online tools that provide value for free.
For example, SE Ranking offers a free-of-charge online Keyword Research and Suggestion Tool where you can check search volume, keyword difficulty, and PPC competition for five keywords, as well as get ideas of keywords that are semantically close to them.
Meanwhile, large online cosmetics stores offer virtual makeup and hairstyle try-on tools to wow their customers and help them choose the best products. For example, on the NYX website, people can upload a photo of themselves and apply different makeup looks and hairstyles to it, which is truly engaging!
16. Comments and reviews
Blog comments and product reviews are some of the most arguable page elements. Although they enable two-way communication between the business and its customers, they require resources and commitment to make the communication meaningful. Before adding comments or reviews to your site, you should weigh the pros and cons:
Reasons to add comments and reviews to your site:
- Every new comment or review updates the page and refreshes its content.
- Users create free-of-charge content and extend the text volume on pages.
- Comments and reviews work as social proof and can be used in rich snippets.
Reasons to disable comments and reviews on your site:
- Most comments on blogs don’t add any value to the content or are just link spam.
- Moderation and replies can be time-consuming and drain your resources.
- You can get very few or no comments at all if your audience doesn’t engage.
If you have the resources to manage comments, it can help you build relationships with your customers. Moreover, you’ll have a source of insight as to what your audience wants and it will help you make decisions on what products to sell or what content to publish.
17. iFrames for video, ads, maps…
iFrames allow displaying third-party content on your website without creating copies of that content. This way you can embed YouTube videos, Google ads, Google maps, social media posts, or RSS feed in your pages.
For example, say you want to add a video from YouTube to your website page. You don’t have to upload a copy of this video to your server. Instead, you add the <iframe> tag to your page’s HTML and specify a link to that video on YouTube in the src=”” parameter of the tag. As a result, you’ll have a YouTube player with the original video embedded on your page.
From the SEO point of view, having iFrames on your website is okay as long as you use them to embed some secondary or additional content. Crawlers will process content in iFrames and understand that it originates from a different website and therefore, they won’t consider it to be duplicated content. But make sure that you don’t overuse this feature and your pages have enough original content that looks valuable for search engines.
Let’s sum it up
Google’s approach to ranking makes us consider good UX design an integral part of SEO best practices. Convenient navigation, compelling and engaging content, mobile-friendly UX layout—every aspect of a good user experience is now a must. If your website doesn’t embody them all, visitors will hardly stay long enough to send a positive user signal to the search engine or convert into customers.
To build a great website you should decide what types of pages you’ll need and what structural elements they should consist of. First, consider what’s common for your industry so you can be sure to include all the page elements people expect to see. Then think about what you can add or change to become different, without breaking SEO rules. Hopefully, this article will help you finetune your website’s design for SEO and improve overall performance in search.
