Small Business Website Series Part 3
Creating a website isn’t that difficult with the free and paid website builders, and WordPress and other CRM’s. Just about anybody can build a website with the right amount of time. The challenge is creating a website that looks professional, conveys the right messages and that accomplishes what you want your website to accomplish. Its a lot easier to get it wrong than it is to get it right. Which leads us into today’s topic: Bad vs. Good website design and development.
What makes a bad website? To some degree the answer is subjective. An ugly site can work well just as a great looking site could fail miserably. A site with a bad layout or minimal content might succeed where one carefully laid out with a lot of great content does not. So in essence a bad website is one that doesn’t do what you want it to do.
That being said, based on years of building websites and conducting conversion optimization testing, your probability of success is affected by:
- The design of your site
- How you organize page objectives
- The layout including the appropriate amount of white space
- Conveying the right messages
- Having clear calls-to-action
- Content that informs and directs the user to take action
- And more…
An Example of What We Would Call A Bad Design
As a web design firm we look at a lot of websites. I recently came across a website for an attorney that I thought was a good example of a poorly designed website. This site was redesigned in the last year, so at least it was mobile responsive. Here is the site (I’ve changed some of the items on the page like the logo, address and phone number, and any references to the business name).
1. The logo integration looks unprofessional.
Typically the first element on a website people notice is the logo. The logo to some degree can affect the visitor’s perception of your website. If your logo is clean, clear and professional looking then the visitor moves onto viewing the page with no negative perceptions. If your logo doesn’t look professional, though, it starts to create a negative perception in your visitors mind. Remember this is taking place at the subconscious level at the speed of a blink of the eye.
In the case of this site the blue background framed logo looks outdated and unprofessional. It would have been easy for the designer to remove the background and have the logo in a color to offset against the white background.
2. Poor eye flow design
The ideal eye flow of a page is for the visitor to read from left to right moving down the page. In the case of this page the combination layout and the random placement of color in the elements drives the visitor to read down the page in a less-than-ideal fashion. People tend to first skim pages and the eye is drawn to color. Based on our experience the grey line in the graphic above represents what we would expect the eye path to be on this page (we did not conduct eye flow testing on this page but assigned the expected eye flow path based on experience).
3. Use of a slider with poor stock photography choices
(this page included 6 different slides with alternative messages)
Sliders are one of the design trends that have been around for a couple of years. They seem like a great idea as you can get multiple messages into a single space. The problem comes in how people respond to sliders on a page. According to Yoast, the developer of the popular Yoast SEO plugin for WordPress, “only 1% of people click on sliders, and that tends to most often be on the first slider”.
A second issue is that having sliders with different messages violates the principal of having one Primary Objective per page. If a visitor could only take one action on your home page, what would you want them to do? Whatever it is, that is the primary objective of your home page. You want this message and call-to-action tied to your major objective to be in the prime real estate of your home page …the space below the header and above the fold. With a slider you dilute your primary objective by including additional major and minor objectives.
4. No clear primary call to action
As part of the fall out from using the slider, along with no primary objective there is no primary call-to-action. If you look at the slide in the image above the call to action is “How to know if you have a personal injury claim?” But the slide, and the additional five are not clickable meaning its a message with no chance of driving the visitor to take an action.
That leads me to conclude that the primary call-to-action is likely this text “Free Initial Consultation, Hablamos Español, Call: 404.969.1284” offering a free consultation. This text though is styled like all of the text on the page and does not stand out, in effect leaving the page without a primary call-to-action.
5. Lack of proper white space
Many bad website designs suffer from the lack of an appropriate amount of white space. This often occurs because the designer is trying to “sell” verses “direct” on the home page. While the end goal of your website may be to sell, your home page should act more like a traffic cop directing traffic to the appropriate place. In effect the goal of your home page is to get the visitor off of it as soon as possible, directing them to the content that best fits their needs.
Using white space allows visitors to more clearly identify content to find what they are looking for. Compare the original image above with our sample redesign below and ask yourself which is easier to read. The more readable content will be the content that does the best job of directing the visitor.
6. Bad footer layout
Content that is placed in your footer is often what we would call minor objective content. It usually includes basic company descriptions, contact information, links to blog posts, or maps to the business. This content has its place but by nature it is content that is good to be repeated throughout the site as a reference.
The design above has the appropriate information in the footer, but its just bad design to have the large block of space on the right side with no content. It leaves the page unbalanced and leaves an impression that something was forgotten or is not working, leaving the unfilled space.
Drumroll Please …How We Would Have Designed the Page
First a disclaimer. The redesign below was created in about 2 hours with no input from the site owner. We could only rely on what was on the current page to decide what was or was not important. In the real world we would have had several meetings with the client to help them develop or flesh out the purpose of their site, and determine the Primary, Major and Minor objectives. Only after we had developed a clear strategy for the site would we go into the design phase.
1. Updated logo to remove background color
This looks more professional and the coloring matches the site branding.
2. More natural eye flow path
The natural eye path is to read left to right. The new home page design uses sections to keep content on consistent levels making it easier for the visitor to methodically move down the page naturally.
3. Eliminated the slider in favor of a single image and call-to-action
This allows us to focus on our primary objective of either scheduling an appointment online or to call to schedule an appointment. We also are able to convey exactly who we helped (those injured due to the negligence of others) and state that we’ve had many successful settlements and trial verdicts.
We also use this to establish branding by having the attorney’s photo in the space (ok the image included is a stock photo. But if we were working with the client we would use an actual photo of the attorney.).
4. Use of white space to improve readability
In this redesign we are primarily working with the content available on the current design. By using a stacked horizontal layout with an appropriate amount of white space we make it easier for the visitor to scan content and easily find content that addresses their needs.
5. Completed the Footer
In the current design there was a huge empty space that made no sense. We used the extra space to add the address and contact information to the footer and improved the blog post listing styling to feature four instead of two.
6. Other changes we incorporated
- We moved the types of injuries they represent from hidden on the right side to featured in its own section with some additional content to drive clicks on each.
- We changed how the blog posts were presented to have them in two columns, rather than stacked, with the newsletter sign up right next to them.
- Added a testimonial to the home page in its own section. These testimonials would feature a random testimonial every time the page is loaded.
- Moved the social media icons to the footer. We view social links in most cases as minor objectives. We want social media to drive visitors to our website. We’re not as concerned with driving people from our website to social media.
- Established a contrasting color (orange) for our calls-to-action. There have been numerous studies about what the best color is to drive clicks on your calls-to-action. The findings show that the actual color isn;t as important as choosing a color that contrasts with the primary colors of your site. Blue is the primary color of this site so orange stands out very well.
Wrap Up
Over the last couple of posts we’ve been looking at questions and issues surrounding small business and self-employed websites. In “5 Bad Reasons Why Self-Employed or Small Businesses Don’t Have A Website” we looked at the top 5 reasons why they don’t have websites and how from a long-term perspectives these were not good enough reasons. In “The Best Way to Build Your Small Business Website” we looked at options for building your website yourself or outsourcing the development. And today’s post takes the next step in looking at bad verses good website design, and how its easier to get things wrong than right.
If you’re looking to build a new site or redesign an existing site, and would rather outsource your design and development, we can help. We’ve been building websites since 1998 and know a thing or two about designing websites that attract and covert visitors. Call us at 404-216-3953 or complete our contact form to take the first step in improving your website.
I don’t care who you are, what your business is, or whether you are self-employed, a simple partnership or a small business. You need a website. Not having one is a mistake. In our post “
There are a lot of reasons why a self-employed person or a small business should have a website. Some of them will make sense and others may have no relevance at all. But the bottom line is that for almost all businesses a website is a minimum requirement.
Content marketing is about delivering the right content to the right person at the right time. As we’ve been laying out in our “