Digging Deeper into Search-Friendly Design - Interview with Shari Thurow

Rule 1: Easy to Read – Why It Matters

When you first step onto a website, the first thing you notice is how the text feels. If the font is too small, the color clashes with the background, or the line spacing feels cramped, you’ll hesitate to read further. A readable site not only keeps visitors engaged, it signals to search engines that the content is user‑friendly and therefore valuable. That trust translates into better rankings and higher click‑through rates from the SERP.

Testing legibility can feel subjective, but the discipline has become more objective over the years. A common benchmark for text contrast comes from the Web Content Accessibility Guidelines (WCAG). They recommend a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text. Many usability labs go even higher, aiming for a 90% contrast, especially for audiences older than 60 or with visual impairments. If your main text is a dark navy on a light gray, you’re likely under the threshold; switching to charcoal or a deeper navy can help.

Color psychology also plays a role. Yellow is the first hue the human eye registers, so it’s a great choice for call‑to‑action buttons or highlights. Pair it with navy, dark gray, or black to keep the contrast strong. A resource that dives deep into color theory for the web is Lighthouse International, which offers comprehensive guides on choosing palettes that work across devices.

Typography is another critical factor. Fonts such as Verdana and Arial were designed for screen readability. They maintain clarity even at smaller sizes. For body copy, keep your font size between 12–13 px and your line height around 1.5. If you have breadcrumb navigation or footer links, scale them down to 9–11 px to differentiate hierarchy without sacrificing readability.

Testing for legibility goes beyond color and font choices. It’s essential to run your site through several browsers (Chrome, Firefox, Safari, Edge) and operating systems (Windows, macOS, Linux). Even a minor CSS overlap can render text illegible on one platform while appearing fine on another. Use a test suite that includes a Mac and a Windows laptop to catch these discrepancies early. Many developers overlook this step, assuming that if a page looks good on their machine, it will work everywhere.

Analytics can give you clues about legibility issues. If your bounce rate spikes on a particular page, it could indicate that users can’t read the content quickly enough. Combine that data with heat maps to see if visitors are scrolling past important text without clicking. If you notice high scroll depth but low engagement, consider simplifying your layout and increasing contrast.

One more practical test: conduct a short usability interview. Show participants a page and ask them to locate a specific piece of information. Note whether they glance or read the text. If they struggle, that page isn’t readable enough. Repeating this test after making changes will confirm if the adjustments have helped.

Ultimately, readability is the foundation for everything that follows. A clear, accessible design keeps users on the page longer, improves conversion, and builds goodwill for both your brand and search engines. The next rule builds on that foundation by ensuring visitors can navigate that readable content with ease.

Rule 2: Easy to Navigate – Building a Mental Map

Navigation is the backbone of any website. If users can’t find their way, they’ll leave before they’ve seen the value you offer. The most common mistake is treating navigation as a purely functional requirement, forgetting that it also shapes user perception.

First, separate the needs of human visitors from those of search engine crawlers. For humans, you want a clear, logical menu that reflects the site hierarchy. For crawlers, a text‑link sitemap or a clean navigation structure is ideal. Most successful sites adopt both strategies: a visual menu for visitors and a hidden text menu that crawlers can read.

Ask yourself six questions during usability testing: 1) Where are you? 2) Are you in the right place? 3) Where do you want to go? 4) Where have you been? 5) How do you return to pages you’ve previously visited? 6) What do you want to do? If users can’t answer any of these within a few seconds, the navigation is failing.

Consistent labeling is crucial. A button labeled “Add to Cart” should always appear as “Add to Cart” everywhere. A navigation link titled “Products” should stay titled “Products” across all product sections. Inconsistent names create confusion and can frustrate users who expect a certain terminology.

Headings and title tags work together to reinforce navigation. A clear <title> tag lets both search engines and users understand the page’s purpose at a glance. If a page title reads “Buy Organic Coffee – Fresh Beans Online,” it instantly signals relevance. Keep title tags under 60 characters to avoid truncation in search results, and use the primary keyword near the beginning.

Breadcrumbs are another navigation aid that benefits both users and crawlers. They show the path to the current page and help users retrace steps. Breadcrumbs also provide extra internal links that search engines can crawl, potentially boosting visibility for deeper pages. Make sure the breadcrumb text matches the corresponding page titles to maintain consistency.

During a usability test, observe how participants locate a particular page. Note if they rely on the main menu, use the search bar, or stumble through the site structure. If many users avoid the main menu, consider simplifying the hierarchy or adding descriptive labels that better match user expectations.

Visual cues help users orient themselves. A sticky header that remains visible as users scroll provides constant access to navigation. Using contrasting colors or a subtle shadow for the header signals that the menu is always there. Additionally, highlight the current page in the navigation to give users a sense of place.

It’s also essential to test mobile navigation. The touch interface demands larger tap targets and often a collapsible menu. Use a responsive design that collapses the navigation into a hamburger icon on smaller screens, then expands it into a full menu when tapped. Test on a real phone to ensure tap targets are not too small and the menu opens smoothly.

Remember that navigation is an ongoing process. As you add new content or products, revisit the menu structure and breadcrumb paths to keep them logical. A well‑organized navigation system reduces bounce rates, increases time on site, and ultimately supports higher conversion rates.

Rule 3: Easy to Find – Leveraging Search Wisely

Not every site needs an internal search bar, but when the content volume grows, a search function becomes a critical tool. A poorly implemented search can frustrate users, while a well‑crafted search experience can reveal hidden value and drive conversions.

Begin by deciding if your site needs a search bar at all. A small informational site with a clean structure may not need it, but a large e‑commerce platform or a comprehensive knowledge base typically does. Once you decide on a search function, focus on its design, data collection, and integration with the rest of your site.

One of the first things you need is a well‑structured search results page. Use the <title> tag to display the search query, and keep the length to around 50 characters. The meta description should be a concise summary that encourages clicks, usually under 160 characters. Use the description to highlight the most relevant results or add a call‑to‑action. These details matter because they appear in the SERP and can influence click‑through rates.

Consider how you’ll handle “keyword not found” situations. A graceful error page that suggests related searches, displays popular categories, or offers a form to submit a request can turn a frustration into an opportunity. Many sites fail to plan for this scenario, leaving users stranded.

The data that your search engine generates is gold. If users frequently search for a term that appears in your content, it suggests the content may be buried too deep. Look at the most common queries and evaluate if the corresponding pages are easy to find via navigation or if you need to adjust the hierarchy.

Analyze the click‑through behavior on your search results. If users rarely click on the first result, that might indicate the result’s title or snippet doesn’t accurately reflect the content. Adjusting the title tags and meta descriptions to better match the actual page can improve relevance.

Use your search data to improve SEO. Search terms that don’t lead to conversions might reveal missing keyword opportunities. Add new landing pages or refine existing ones to target those phrases. This iterative approach ensures your site stays aligned with user intent.

Remember that internal search isn’t a replacement for a good navigation structure. It’s a complementary tool that serves users who know what they’re looking for or have a specific query. By combining robust navigation with a smart search function, you cover all user scenarios and improve overall satisfaction.

Finally, test your search on both desktop and mobile. Mobile users often rely more on search than on menus, so ensure the search bar is prominent and easy to use on small screens. Adjust the layout if necessary so that the input field is large enough to tap comfortably.

Rule 4: Consistent Layout and Design – Building Credibility

Inconsistent design can erode trust before a user even interacts with a page. Every element - from the logo to the call‑to‑action button - needs to feel familiar no matter where a visitor lands. A cohesive design signals professionalism and helps users build a mental model of your site.

Start with a master template for each type of page. Product pages should share a layout: a prominent image, a concise description, price, and an “Add to Cart” button in the same position. Blog posts should have the same heading style, image placement, and comment section. By keeping these elements consistent, users learn where to find the information they need, reducing cognitive load.

Uniform terminology across the site further strengthens this consistency. If a navigation link reads “Shop” on the homepage, keep it “Shop” on all category pages. A mismatch - like “Products” on one page and “Shop” on another - confuses users and can lead to higher bounce rates.

Color schemes should stay the same across pages. Use a primary brand color for headings and buttons, a secondary color for links, and a neutral background color to keep the focus on content. When you need a variation, keep it subtle: a lighter shade of the primary color for hover states, for example.

Typography also needs standardization. Choose a single body font and a limited set of heading fonts. If you need to differentiate sections, use font size or weight rather than a completely different typeface. Consistent typography helps users scan pages quickly and understand the hierarchy.

Icons and graphics should follow the same style guide. A flat icon set looks modern and matches the overall design. If you mix flat icons with skeuomorphic ones, the site feels disjointed.

Consistency isn’t only visual; it’s functional too. The behavior of interactive elements should be predictable. Clicking a “Buy” button should always add the item to the cart and display a confirmation. If the same action sometimes leads to a different page, users will feel uncertain.

Testing consistency involves reviewing each page manually or using an automated design audit tool. Tools like Lighthouse (https://lighthouse.io/) can report on design issues, accessibility, and performance. Cross‑browser testing ensures that your design holds up on different platforms and devices.

Regularly audit the site as new content is added. A new product page should be created using the existing template, not a custom layout that breaks the design pattern. Maintaining consistency is an ongoing process that pays off in higher engagement and lower support tickets.

Rule 5: Quick to Download – Performance and Perception

Page speed is more than a technical metric; it’s a direct influence on user experience and search engine rankings. A site that lags loses visitors almost instantly, regardless of how well‑crafted its content is. Search engines now factor load time into ranking algorithms, making speed a critical SEO component.

For usability testing, a good rule of thumb is to keep average load times under 5–12 seconds. In practice, many sites achieve much faster times by optimizing images, minifying CSS and JavaScript, and leveraging browser caching. If your pages regularly exceed 12 seconds, the site likely needs a comprehensive performance review.

Tools like NetMechanic (https://www.netmechanic.com/) and Andy King’s speed test (https://www.andryk.com/) give instant feedback on how each asset contributes to load time. They highlight large images, blocking scripts, or inefficient CSS that can be streamlined.

Jared Spool’s research emphasizes that perceived speed often matters more than actual speed. If a page feels responsive - because it provides feedback or displays a partial load - users perceive it as faster. Techniques such as lazy loading, progressive rendering, and skeleton screens can help create that perception.

When a page must include a lot of media - think high‑resolution images or video - consider breaking the content into multiple pages or using a content delivery network (CDN). This approach distributes load across servers, reducing latency for users in different geographic locations.

Page size is another factor. A balanced target is 60 KB for most pages, including scripts and styles. If a page must exceed this limit - for instance, an entertainment site with large galleries - keep the first 100 KB light and text‑heavy. This ensures that search engine crawlers can read the core content quickly, which can positively affect indexing and ranking.

For mobile users, test both Wi‑Fi and cellular connections. Many visitors rely on 3G or 4G, where page size and load time have a larger impact. Tools like Google’s PageSpeed Insights can give device‑specific suggestions.

Maintain a dedicated dial‑up line and an older computer as a sanity check. While most testing can be done online, seeing how a site performs on legacy hardware reveals hidden bottlenecks that modern browsers hide behind acceleration.

In addition to performance, keep an eye on analytics. A sudden spike in bounce rates might hint at a slowdown. Use heat maps to see if users stop interacting before content fully loads. Address these issues quickly to preserve user trust and SEO value.

Speed, like readability, is foundational. A fast, responsive site retains visitors, boosts conversions, and improves search rankings. Combine speed with the other four rules - readability, navigation, findability, and consistency - and your website becomes a powerhouse of user experience and SEO performance.