A couple days ago Jeffrey Smith of SEO Design Solutions asked me to look at a client’s eCommerce site to help solve an interesting problem. The site offered an popular educational program in 9 different cities across the US. The site delivered leads when people entered their email address for more information on training opportunities in one of those 9 cities.
Interestingly, two out of the nine cities received only one-sixth to one-fourth the response rate of the other seven cities. Why? That was the question.
A Usability Evaluation of SERP Results
Like Sherlock Holmes honing in on the mystery, Jeffrey’s staffer pointed out that a prospective site visitor could either type in <the service> or type in <the service + a city>. Therefore, the search engine results page (SERP) for some of the cities had the client home page show up below the landing page specific to a given city. That is, for most cities, regardless of whether the city was entered in the search or not, the home page would appear above the city-specific landing page. However, for a couple cities, the home page would appear below the GEO targeted / city-specific page.
In all cases, both entries tended to appear in the top five or six listings, well within easy reading.
So, how should we analyze the problem of low conversion rates for the two cities?
First, Jeffrey’s staffer analyzed whether the two low conversion cities had SERP links consistently above the home page links. Turns out that indeed, when searchers added the city name to their search, only the two cities with low conversions had search engine results where the city-specific page appeared above the home page result.
Therefore, the low conversions resulted from the city-specific page failing to give a persuasive message and present the call-to-action in a convincing manner. These are usability problems, not SEO problems. Also, it would be impractical to “tune” the city-specific pages so they’d show up below the home page listings. We would need usability solutions to make the city-specific pages work as a conversion page.
Usability Comparison of Two Site Entry Pages
Wondering how conversions were done for most of the site-visitors, I looked at the home page and saw that a large “Request Information” box in the top right corner. It had nine fields asking for the usual name, address, email and desired training location (of nine cities available). Visitors looking to the left of the page saw a large inviting photographic image with a compelling benefit in text.
Meanwhile, the site web log shows if a site visitor completes the Request Information process, they have probably signed up from the home page. This is an interesting clue. Plus, the home page entertained the eyes.
Meanwhile, visiting the city-specific landing page was another experience. The page had a Request Information button on the left margin. It was modest with a pale pastel color, and not a large Request Information box at the top right like the home page.
Designing Web Usability
Here’s where usability meets SEO. SEO delivers the customer. But usability delivers the experience. For instance, what user experience does position give the site visitor? Which position captures attention better: a pale object to the left of the main content (and below the fold), or a more contrasting object to the right of the main content (and above the fold)?
Eye scan usability research shows that site visitors tend to jump to central page-content first. Add this to the traditional usability finding that users process text in a left-right, top-down pattern. Together, these facts suggest that objects to the right of the main focus will grab attention faster-especially if it is darker than the pale pastel object on the left column that also happens to fall below the fold.
Web Usability Testing Shows Reading Challenges
Furthermore, usability testers find people skip a lot of things when reading a page. Many times items on the left get interpreted as “navigation”. And if a site visitor does not want to navigate, they ignore items on left-especially if they’re below the fold.
Therefore, our first recommendation included placing a replica of the Request Information object to the right of the main content on the city-specific page. Also, it must appear above the fold.
A replica of the Request Information object serves two functions. Visitors who had already seen the home page would again see the same object on the city-specific page, and thus recognize it rapidly. This means they could effortlessly its presence and focus on whatever else was on the page. They could return to that object if they wanted more information.
Meanwhile, visitors who came to this landing page as their first experience of the site would see the large object as a clear invitation to Request Information-just as happened to the large percentage of “conversion” visitors on the home page.
Landing Pages Serve Both SEO and Usability Goals
For the record, we must acknowledge that the city-specific page serves a different function than the home page. The city-specific page must deliver the goods about the training services in the context of that city. Therefore, important content must appear high on the page to meet the site visitor’s expectations. This insures the page serves SEO goals of catering to city-specific searches.
Therefore, to support both SEO and usability goals, I recommended placing the Request Information towards the bottom right on the page, insuring that the title (Request Information) plus the top couple fields be clearly visible above the fold. This position acknowledged the site visitor’s need for textual and pictorial support about the specific city. But the lower-right position clearly supported the usability mission of providing a call-to-action for more information. Being on the right side made the Request Information a logical actionable follow-up after the site visitor had read data on the training amenities unique to that city.
More Help from Usability Standards and Methods
There were a few other points that could help the city-specific page gain more conversions if it happened to be the first page seen by a site visitor. Here’s a list that illustrate the usability definition of web design standards…
1) Make the text more scannable. Usability research and usability testing clearly show that site visitors want to minimize reading when information foraging. Support for scanning comes from bullet lists and numbered lists. The page had some bullets (good) but also large paragraphs (hard to read).
2) Include more headers. Research shows that headers help people remember site content better. It also helps them scan for topics of special interest. Do you find the headers on this blog useful? They also support your SEO goals by elevating the importance of the phrases for search engine metrics.
3) Use larger font. When I paste text from this site into my Word document, it comes up as 8.5 point font. I know that font point size shows up differently according to your monitor size and screen resolution. So point size is not the “final word”. However, the font caused me to work harder than other sites I saw on my same laptop. Other sites came out as 10 points or 11 points. Note the research finds that 20% of any group fails to have 20/20 corrected vision. So your audience has vision problems even before they see your site.
4) User dark font. On our reviewed site, the font was grey. Usability research shows that the foreground font should have a 90% difference in brightness compared with the background. Grey font just doesn’t do it. Check out this online contrast checker. You enter the RGB or Hex values of your web color and get a contrast read-out: http://www.snook.ca/technical/colour_contrast/colour.html
5) Understand how users interpret your words. This issue reflects the usability practice of understanding the “mental model” of the site’s audience.
Remember the “Request Information” button I said was in a pale pastel and also below the fold? The button appears inside a box (with the same pastel color) on the left side. Although the top portion of the box appears above the fold, site visitors failed to use the button, even though the button said “Request Info”. Why?
First, we see that the header for that box says “Contact Us”. Ask yourself, how does “Contact Us” give the same compelling call-to-action as “Request Info”? While I can’t speak for all site-visitors, common web usage convention suggests that “Contact Us” lacks the compelling power of “Request Information”. The later phrase actively invites action. The former reminds us of all other web sites where “Contact Us” serves as a catch-all for product problems, web-master messages, as well as complaints about service. Certainly, in that context, Contact Us fails to communicate “Request Information”.
I’ve just begun to scratch the surface of how usability science contributes to support SEO goals. All eCommerce sites require conversions. SEO provides the opportunity. Usability methods deliver the customer. Both disciplines serve the customer.
This guest post was written by Dr. John Sorflaten, PhD, CUA, Certified Professional Ergonomist (CPE) who in addition to a degree in Cognitive Psychology, has over 25 years of experience as a certified usability specialist.
SEO Design Solutions has the distinct pleasure of working Dr. Sorflaten to provide a unique suite of SEO and usability consulting services provided through on page website analysis and review. This convergence of SEO and usability provides clients with in-depth solutions to funnel visitors to the appropriate conversion objective, reduce user anxiety and enhance the user experience.