So often, companies want to jump headlong into search engine optimization, link building, social media campaigns, and pay per click advertising for a quick way to boost website performance. But there are two main problems with this approach:
- to see real change, website marketing takes time, effort, and patience. If you want lasting results, you're in it for the long haul. You may see immediate results from your efforts, but it's not likely they'll last more than a month or two without continual work.
- you may get more visitors to your site, but they aren't going to stick around and convert if they don't like what they see or can't find their way around.
This week's site clinic is focused on making sure visitors like what they see when they come to your website. Studies have shown that one of the key reasons visitors spend time on or buy from a site is a professional design. If your site doesn't live up to their visual standards, you're losing conversions.
There are a few key design changes that will improve the performance of today's website clinic submission, Conway's Vintage Treasures
. Color schemes, text formatting, and prominence are key areas that CV Treasures needs to address in their design. Putting Together a Professional Looking Color Palette
I spent several years working in print and web design, constantly pouring over Pantones and hex codes (and using lots of trial and error!) to find that perfect combination. Choosing a good color scheme is never easy.
While the design of CV Treasures is clean and has many good elements, the color scheme is haphazard and detracts immediately from its professional perception. There are at least three shades of gray, mustard yellow, salmon, lavender, red, teal, and blue. And that's just the homepage.
There are two key problems with this:
- There are simply too many colors. Three or four colors are more than sufficient for a good design. For example: text should be the same color throughout the site (black); links should be a different, but consistent color (usually blue); section headers may be a third color, but should match a color used elsewhere in the design. Use colors for roll-over and active page effects in the navigation that have been used elsewhere in the design. This isn't a place to introduce something new.
- The colors used don't match. Good color schemes use colors from the same color family, with similar tones. If you like the shades of gray, the other colors need to have a grayer tint, like a slate blue instead of a royal blue. If you like the bright yellow, the other colors also need to be bright. If you like the pastels in the navigation, the other colors need to be pastel. Pick one color family and stick with it.
Additionally, the grays, white, and black used for the primary content and navigation areas are low contrast. If a low vision or color-blind person comes to the site, they are going to have difficulty distinguishing between colors. And this contrast is essential for breaking up the layout; indicating what is content, what is navigation, what is call to action. Colors help direct the eye to what's important, but if they all blend together, nothing is. Tips for selecting website color schemes:
Formatting Text for Consistency and Readability
- Use 3-4 colors in the main design, including text
- Use high contrast shades and colors, especially for text backgrounds
- To add splashes of color, incorporate images
- Use colors consistently in the same places to indicate the same things
- Avoid red
- Borrow ideas from websites you like
A little bit of good text formatting is easy to learn and do, and goes a very long way. And it seems like such a simple thing, but it makes a world of difference in design.
The CV Treasures website is all over the map when it comes to text formatting. The alignment, sizes, and colors are all over the place and the text is hard to scan. As with color schemes, consistency is key to professional looking text formatting. Alignment:
No matter what you are designing, one easy way to ensure that your marketing piece doesn't look professional is to use lots of centered text. Centering text should be used very sparingly, and never for blocks of text more than 3-4 lines long. I repeat: never ever center large blocks of text! Not only does too much centered text look bad, it's very hard to read.
Your content should always be left aligned for easiest reading. Other alignments are useful for small amounts of text in other mediums. But on the web, left alignment is best for content areas--and non-negotiable for vertical navigation. Sizes and color:
Your main text should be a consistent size and color on every page of the site. All of your section headers should be one size. Formatting on product pages should be the same throughout the site. Consistent use of font formatting helps visitors to understand what they are looking at, no matter where they are in the site. This is the beauty of CSS: it makes it easy to stay consistent and to make changes site-wide. Scan-ability:
Websites aren't books, and you can't expect your visitors to read every word on every page. They won't. Formatting your content so it is easy to scan is critical to helping users find what they are looking for or see what interests them. Organize text into sections and lead with headers (good place for using your keywords, too). Use bulleted/numbered lists where appropriate. Keep paragraphs short. Making Call To Action Buttons Most Prominent
One of the most important elements of an ecommerce website is the shopping cart button. CV Treasures has some pretty cool stuff to sell, but may be losing conversions because the "Add to Cart," "Shopping Cart," and "Checkout" buttons don't stand out. On CV Treasures, the "Shopping Cart" and "Checkout" actions are small
white text links on hidden on the top right corner of the website. The
"Add to Cart" button is a sepia button that you have to scroll to find
that blends in with the grays, especially for low vision visitors.
These are the call to actions of any ecommerce site. These links need to jump off the page so that your visitors notice them even if they aren't looking for them. It's a not-so-subliminal message that drives potential customers to a conversion.
Tips for designing shopping buttons that sell:
- Make them look like buttons
- Use bold, bright colors
- Place all shopping cart buttons to the right of your content
- Always keep these buttons above the fold where users don't have to scroll to find them
- Use text and icons to identify the button (keep icons traditional, like a shopping cart, though. This is not a place to be creative.)
The design and usability of a website has as much to do with increasing conversions as getting more traffic does. There's no point convincing more people to come to your site if they don't like what they see and head for the back button as soon as they arrive. CV Treasures is doing great optimization for the unique products they sell. A little clean up on the design of the website is sure to increase their sales.
May 23, 2008
Jackie Baker is an internet marketing analyst with SiteLogic Marketing (http://www.sitelogicmarketing.com) where she focuses on auditing websites as well as SEO, social media, usability, and information architecture consulting. She comes to the industry from a marketing/PR and website development background. Jackie maintains an active presence online through her blog RegardingHorses.com (http://www.regardinghorses.com) where she shares her love all things equine, particularly therapeutic riding.