Designing for humans, and bots too
An integrative approach to Design and SEO
In the early days of the web, design and SEO weren’t really friends — websites with good SEO often had really “bad” design, and websites with “good” design often weren’t great for SEO. During that era, there was some crazy stuff going on involving stuffing content, really bad navigation, and just plain ol’ dated design.
When I started my latest role, I was partnered with our SEO team to design online experiences that grow organic traffic to our company’s website at scale. Knowing the reputation that SEO has amongst designers, I was skeptical about being able to produce engaging designs while delivering the traffic and lead counts I was accountable for. However, I welcomed the challenge!
Luckily, I was in for a surprise. Working with my company’s SEO team over the past year has led me to realize that the goals of SEO and design don’t have to be at odds with each other — in fact, they’re actually intertwined around anticipating and delivering value to your customers. Designing with SEO in mind creates an excellent user experience.
The Impact of SEO-Minded Design
At its core, our team is looking to deliver traffic to our website, which impacts our ability to acquire leads and product sign ups. I see design as an integral part of being able to deliver these KPIs, because we directly influence what visitors (and search engines) see on a given page. Designing pages to provide a thoughtful and valuable experience for visitors ultimately affects whether our content appears in a SERP (Search Engine Results Page) or not!
How To Practice SEO-Minded Design
There are a few concepts that tie SEO and design together that are helpful in balancing the best practices of both areas. Here’s what we’ll cover:
- Don’t Neglect the Mobile Experience
- Make Navigation Meaningful
- Give The People What They Want
- Practice Accessibility
1. Don’t Neglect the Mobile Experience
Google has shifted to mobile-first indexing, which means that it uses the mobile version of your website for indexing and ranking. The crazy reality is that Google may never see a desktop version of your website!
This change makes it imperative that content isn’t reduced at smaller screen sizes, which was common practice in the early days of web design. Hiding content on mobile but showing it on desktop is like clipping a bird’s wings — crawlers, or bots that scour the web for new content, won’t be able to explore the breadth of your website and gain enough context for the value that your content provides.
In practice, this means that your site navigation should be fully available to mobile users, and that the link structure is not dramatically different from navigation options offered on desktop. Additionally, text content and images should remain available to ensure crawlers (the bots that scour the web for new content) have enough context to understand what your website is about.
I’ll be the first to admit that reducing content for mobile is a bad habit I developed earlier in my career, and it’s really tough to break. To better embrace responsive design, I’ve shifted my mindset from trying to replicate the experience across all touch points to delivering the best experience possible on each platform. This gives you the freedom to optimize conversion flows on a per-platform basis, leveraging what you know about the needs of your users when they visit your site through different touch points.
Instead of trying to replicate the experience across all touch points, deliver the best experience possible on each platform.
In support of mobile-first indexing practices, search engines also heavily weigh the mobile friendliness of your website. As a result, you should pay close attention to the following things when designing your site for mobile devices:
- Size of tappable areas: Ensure there’s enough space for a person to tap on a link with their fingers. Tap targets of at least 48 pixels in size are considered standard by search engines like Google.
- Using legible font sizes: Text sizes should scale to ensure legibility on each device. Using fonts that are too small will result in penalties from search engines.
- Image asset file sizes: When exporting images and other media content, try to optimize the file size for web so it doesn’t take forever to load. User attention span is short and if pages take too long to load, potential visitors will abandon your site.
Responsive Design in Practice!
We used this approach when building our company’s Business Templates directory, which launched in March 2019. The content we offer is in the form of editable document templates, which users can download and use. Since the templates are offered for Microsoft Word, Excel, and PDF — typically desktop applications — we realized that users probably wouldn’t find much value in downloading the templates to their mobile devices. On mobile, I decided to prioritize the option to email a link to themselves to download the template later, enabling users to achieve their goals regardless of the platform they were on.
I also made a very simple change to my workflow to ensure that I’m considering responsive design at every stage of the design process. When I set up a new file in Sketch (the main software our team uses for interface design), I always create two “artboards” next to each other — one for desktop, and one for mobile. As I’m designing a screen for desktop, I concurrently arrange the same content to the mobile screen size without deleting anything, then make adjustments needed based on the mobile context. It’s not quite a mobile-first approach, but it’s a step in the right direction.
2. Make Navigation Meaningful
The better your navigation does at surfacing the way your website is structured, the better crawlers will be able to discover content and understand what your website is about.
But, clear navigation isn’t just for bots — it helps visitors navigate your website and find interesting, relevant content, too. Think about your own experience visiting a website for the first time. Perhaps you’ve found an article on Google that you enjoyed reading and want to see more articles by that author. A well-organized website makes that content readily available to you.
You’re probably familiar with several modules that are commonly used to organize content: “Related” feeds, “People also search for”, “People also bought…” — these features are commonly employed on ecommerce and directory websites. Although they might seem gimmicky, they can be valuable to customers for the following reasons:
- Reinforces content categorization. Visitors will learn about how you define categories on your website and the type of content that belongs in each. This empowers them to find specific content without aid.
- Promotes discovery of relevant content. This allows websites to deliver value for customers beyond their original query, encouraging customers to perceive us as knowledgeable, helpful thought partners. When they see content from us in the future, they may be more likely to trust us.
- Helps with decision making. These components reduce the cognitive load of having to recognize versus recall data, and customers feel reassured that they are not alone. However, it’s important to use this data wisely to be helpful, not abuse it.
Other UI components like breadcrumb navigation and table of contents may have a bad reputation in the design world but are useful to leverage for complex information architectures.
These components help manifest how your website is organized, enabling crawlers and visitors find their way around. For users, clear navigation acts like signage, telling you more about where you are, where you’ve been, and where you’re going. There’s nothing worse than having to resort to the Back button on your browser because you don’t know where else to click.
3. Give The People What They Want
How many times have you searched Google for answers and clicked on a link that gave you totally different content than you were expecting? We can probably agree that getting content that doesn’t answer your question is a frustrating experience and results in a loss of trust.
Search engines want to serve quality content that answers the queries that they receive, which makes designing pages with content that users are looking for one of the most important parts of enabling strong SEO. After all, when search engines don’t deliver quality content, they lose customers and revenue as a result!
Understanding what will be valuable to visitors comes from understanding their intent behind a query. Being familiar with user goals lays the foundation for you to create content that will deliver value. There are a few simple ways to learn more about user goals (short of being able to read their minds) that I like to practice on a regular basis.
Keyword Research
Keyword research examines the terms that people are typing in search engines, the number of times it’s being searched in a given time period (usually monthly), along with a few other metrics that help you determine the value and difficulty of pursuing ranking for that term.
Examining the queries people are typing in allows you to uncover more about the user’s knowledge of the keyword and intent behind their search. Matching the specificity of your content to the user’s expectations is critical in ensuring that you are delivering value. Here’s an example to consider:
In the first example, someone searching for “business plan proposal template download” might expect a page that enables them to directly download a “business plan” template, and connotes a high level of specificity and intent — this customer is likely considering viable options for them to implement for their business. This customer probably already knows what a business plan proposal is and how to use it. On the other hand, someone typing a query like “business plan proposal template examples” might not know what goes into a good business plan, and might be interested in a high-level article that gives them more context and a few options.
Keyword research also serves as a good litmus test for how well your copy resonates with customers. You can use metrics like monthly search volume (MSV) to see which keywords are commonly typed in search engines. This can help you understand how customers are referring to relevant concepts in the real world. You might consider this when weighing the cost and benefits of leveraging a commonly known term versus teaching a new one.
However, it’s important to understand the limitations of using keyword research when incorporating it into your process. Keyword research shows you what users are searching for, but doesn’t tell you what they’re actually looking for. People searching for the same term might be looking for very different things, and that depends greatly on the context that prompted them to enter a query. You can use keyword research to help you form a hypothesis about user intent, but you can’t draw any conclusions about causality from it. Using keyword research can be a powerful tool, but only if you take its findings at face value and use it properly.
Empathy Exercise
Once I’ve looked at the words people are searching for, I start to analyze the possible intent behind their query. For each page or asset I’m creating, I’ll create a brief list of the keywords, goals, and content a visitor might find valuable to accomplish their goals. This simple empathy exercise helps me consider the context in which people are visiting, and map out the modules that would create value to users.
For the example of the Business Template directory, I made a list that looked something like this:
The context that a user is searching in can have a huge impact on their expectations for your content — so, while performing the empathy exercise, it’s important to know that you might not capture every use case or scenario. Keeping in mind that things like the time of day, environment, and platform can affect an interaction, I use this empathy exercise to form a hypothesis about user’s goals, and then determine what content is valuable on that page. This sets a benchmark of the content that must be included — which allows me to wireframe modules that will showcase essential content. We can build off this foundation add content that stakeholders may require, as long as it doesn’t prevent customers from reaping the value that they’re coming for.
User Research & Testing
User testing or research is another helpful tool in evaluating the assumptions you bring into a project. It’s incredible how often your assumptions are totally different from the actual values that your customers hold, so it’s great to get their direct insights as often as possible. We’ve incorporated both moderated and unmoderated user testing into our arsenal using programs like Validately and Respondent which allow you to recruit and screen users to test your designs.
When used together, these three methods can give you a stronger understanding of the context that people are searching in and the goals that they might want your content to deliver on.
4. Apply accessibility best practices
Making your content accessible for all visitors is an important, but often overlooked step in the design process. There are a lot of common explanations for why accessibility hasn’t been prioritized, and unfortunately, some of these might sound familiar:
“Accessible design isn’t as visually interesting and looks boring.”
“It takes extra time to make something accessible for all.”
“It only impacts a small subset of our customers.”
The truth is that accessibility isn’t that hard, and it’s unacceptable to make excuses about why we can’t do it. Making content accessible impacts SEO because it creates a better user experience and helps search engines understand what your content is about. If it sounds daunting, these are a few simple things you can start with to improve the overall customer experience and impact SEO.
Add descriptive alt text
Alt text helps people who have visual impairments understand what non-text content on your website is about. Technology like screen readers are used to help people with visual impairments interact with websites, and these tools read the alt text you provide when it encounters an image, video, or other content that’s not text. In cases where images aren’t able to load (like slow or unstable internet connections), alt text appears in place of the image so users can still understand the content they’re unable to see.
People aren’t the only ones who use alt text though — search engines do too. Crawlers use alt text for two things:
- Understand what an image is about. Capturing the topic and purpose of your image in the alt text description helps search engines rank your image in image searches and drive additional traffic to your website.
- Understand what your website is about. This helps search engines better understand what your website is about and the value it delivers to users, which impacts what SERPs your page is seen on.
Designers, developers, and stakeholders can work together to ensure that descriptive alt text is implemented on all content. Collaborating and keeping each other accountable for this practice can not only drive traffic to your site, but help us create an inclusive experience for all.
Create a clear content hierarchy
Using headers to establish a consistent visual hierarchy makes content more digestible for both people and crawlers alike. It’s really difficult for people to read long bodies of text, so headers play an important role in providing users a way to quickly scan long pieces of content. Headers should be visually distinguished, clear and descriptive, telling readers (and crawlers) exactly what lies ahead.
Write descriptive anchor text
It’s pretty common practice to see buttons and CTAs that say “Read More” or “Learn More”. Unfortunately, this isn’t very helpful for visitors or bots in understanding what they should expect to see next. When effectively used, CTAs and hyperlink copy should help set the visitor’s expectation about what a linked page is about, allowing them to evaluate whether it’d be valuable for them to visit the page or not.
Anchor text is also read by screen readers for visitors with visual impairments, and using links that are not descriptive can be especially confusing to users who don’t have the visual context of where your CTA lives.
Applying these accessibility best practices will benefit everyone accessing your website and drive stronger SEO.
Now get out there and try it!
Designing with SEO in mind will help you create a stronger, better customer experience — so the best thing you can do in any situation is to put the user first. By using a collaborative, intentional approach to design and SEO can help us drive measurable impact for businesses, but more importantly leads us toward creating more inclusive experiences for all.
