Blog

Clean Up These Common Web Design Flaws

From time to time we feature advice and tips from publishers just like you. This week Tony Mariotti, Owner of Ruby One Mortgage gives his advice for making web design work for your site’s bottom line. 

Ask a person about their favorite website designs and the feedback you’ll often here is, “I like them because of the simple, clean design.”

Good user experience (UX) is good business. Make it easy for users to get the information they need, without excessive distractions or poor aesthetics, and you’ll gain both brand credibility and conversions. Less is more.

You’ll find a consistent theme among marketing experts who study conversion optimization for a living; they put extra emphasis on uncluttered pages, often removing extra navigation links that could a divert a user’s attention. Without good design, you’re not only hurting conversions from organic traffic, but you’re also throwing away money on paid traffic via PPC (pay-per-click advertising).

I would suggest clean design is needed for every page of your website, from your homepage to blog posts and landing pages.

“The process of simplifying your website design begins by knowing what your visitors want,” proclaims Dallas real estate agent, Jeff Knox. He goes on to say, “What I learned is that a potential buyer looking for real estate wants three things in the beginning – (1) to be able to search by city; (2) to be able to search by price; and, (3) for the results to be returned at a very fast rate.  That’s it.  Those are the three most important things to a consumer as they begin looking for a home.”

I feel like I could write a master’s thesis about all the ways to improve design and UX. Given the scope of a single article, let’s zero in on the most common web design problems and ways to fix them. The examples below come from real estate website homepages. Why? Because that’s the industry where I consult the most, so I see these issues every day. In other words, it was easy to find examples. But rest assured, the rules of good design apply to any industry.

Three Common Web Design Gotchas

I practice what I preach. My mortgage company website was designed and coded from scratch; simplicity was baked into the design from the beginning. However, ongoing diligence is required. I audit my page templates, looking for ways to prune unneeded elements and clarify any awkward copy that could lead to a bad user experience. You, too, can audit your website to see if you have any of these common UX challenges.

Page Elements

Be vigilant against too many page elements. Marketers tend to lose their minds sometimes with their homepages, adding a gazillion links and calls-to-action. Don’t be tempted by that siren song. In an attempt to be helpful, marketers sometimes think that giving users more and more information is a means to that end. Overloading users is not helpful.

Redundancy

The cousin of “too many elements” is redundancy. Repeating the same calls-to-action or navigation links on a page only generates noise. Keep an eye out for elements are exactly the same as well as ones that are similar (e.g. links that lead to the same internal page that use different anchor text). In either case, remove those redundant elements. It’s is an easy fix.

Clarity

Does the copy and navigation of your website make sense to your visitors? Are you sure? Put yourself in your visitor’s shoes and ask yourself if everything means what it should. Clarify copy that could be misunderstood, regardless of how “common sense” you think it is.

Example 1: Poor Design

Here’s an example of a homepage that could use a facelift. As a courtesy, I’ve hidden the company name. I’m not here to beat anyone up.

Bad design elements are labeled with numbered dots and reviewed below.

realty listings

 

Page Elements

Here’s the homepage of a real estate company website. What you can’t see is the whole page, which has 199 links (way too many)! Needless to say, there’s a “too many page elements” problem, even in the portion of this page shown in the screenshot. Most of the trouble comes from redundant elements.

Redundancy

This home page is full of redundant elements. So that you know, there are several hidden, duplicate links in the sub-navigation menu (visible when clicking on the dropdown arrows in the navigation links). For this exercise, the focus is on elements visible in the screenshot:

“Contact us” only needs one slot on a homepage. Maybe two if you include the footer, though 80% of visitors won’t scroll that far, as heat map studies nearly always show. Here are the variations, labeled “1” in the image:

  • Contact Us (top navigation, keep this one)
  • Email Us Today (secondary navigation)
  • Contact Us (under search links)
  • Dream Home Finder (links to a Contact Us form)
  • FREE Market Analysis (links to a Contact Us form)

Regarding those last two points, it’s much easier to have one contact form with a dropdown selector that gives users choices. Here’s an example from my site:

free mortgage quote UX

Back to the homepage screenshot… the search form dropdowns provide an excellent way for users to filter their queries and get relevant results. The search form does all the work a visitor needs. All the other links (by city, by price range, etc.) only create a visual cacophony. All the extra search links are unnecessary. They are labeled “2”:

  • Search for Homes (top navigation)
  • The search form itself (keep it)
  • Quick Search / Advanced Search / Map Search (all three are unneeded, though I’d be tempted to keep Map Search)
  • The cluster of active links that filter by city and price range (e.g. “Under $200,000”)

Registration and login appear more than once, and jointly labeled “3”.

  • Register
  • Login

Clarity

Keep an eye out for any copy or anchor text that could be misconstrued. As someone who visits real estate websites every day, I was quite unsure about the items labeled “4.” Here’s what confused me.

  • Local News – as in local real estate news or journalism you’d expect from a local newspaper?
  • Office Listings – meaning, listings from the agents that work in your office or commercial office space listings?

Example 2: Clean, Functional Web Design

Now let’s look at one of my favorite real estate websites, owned and perpetually tweaked by marketer and agent Ryan Fitzgerald at Raleigh Realty.

raleigh realty listings homepage

Here’s what makes this above-the-fold area of this homepage work:

  • Navigation elements are few, including only the most necessary, high-level activities a visitor needs to get started finding the information they want (a home).
  • “Sign In/Sign” consolidated into one link that points to one page.
  • I find it interesting that the primary contact call-to-action is “Call or Text.” Ryan prioritized phone calls/texting over a contact form (email). It certainly creates a very clean look.
  • The primary visual focus is the search box. It’s easy to find and use (doesn’t even have dropdowns – the user is encouraged to just their first search underway, not unlike Google’s homepage).
  • Every bit of copy is crystal clear, in its meaning, to a site visitor.

Summary:
Knowing precisely what your visitors want makes it easier to give it to them without distraction or confusion. Removing redundant page elements is the fastest way to clean up a web page. Clearing up confusing copy is also a quick fix. Your visitors will be rewarded with a better user experience. You’ll be rewarded with a stronger brand and higher conversion rate.