Give your customers what they expect, when it comes to making their way around your website. With so many online shopping options, customers don’t have to put up with confusing navigation or unintuitive shopping carts. Make sure you’re guiding your customer in the right direction and not causing them to leave your site.

“What does color have to do with it? Everything.”

Some of the most successful retailers use color to help guide their customers through their site. Where do you want your customer to look when they are ready to checkout? Make sure they are looking in the right place by adding color in the correct places. Using colored buttons and contrasting colors in your website’s navigation can dramatically help your user’s customer experience. The same way aisle signs and section banners in a retail store guide customers.

Using Color to Guide Your Customers

Let’s take a look at some examples of how color is used by some of the most successful online retailers on the market today.

Amazon Usability & Color

Amazon, known for their incredibly smart and user friendly shopping experience, uses different colors to gauge the importance of their buttons. As you can see both add to cart buttons are designed to appear brighter and more saturated in color than the add to wish list and baby registry buttons right below. Also notice the blue coloring behind this extremely important panel of options. Not only do the buttons guide the eye in this area because of their contrasting colors, but the blue background helps to break-up the white space and pull the customer’s eye to the right as well.

You’ll also notice in the upper left-hand corner, shop all departments is given a bright orange color. When on any other page besides their homepage, the navigation collapses to make way for a more narrowed list of search results, based on the section of the store you’ve chosen. Amazon wants to make sure their customers are aware that their main shopping categories are still available and easily found when collapsed.

Cafe Press Usability & Color

Cafe Press does an excellent job utilizing color where they want their customers to take action. With a minimalist design style, the other, less important links are presented in subdued colors allowing for less confusion and overwhelming feelings from visitors.

Buy.com Usability & Color

Buy.com follows suit with Cafe Press and allows their products to stand out on their own with a minimalist style of design. Again, green is used for the most important elements on the page. If you look at the print this page, email a friend and add to wishlist buttons, they are a lighter shade of blue and less saturated than the add to cart button above. Usability design is extremely important when it comes to getting a customer to checkout. Your customer should have no problem finding their shopping cart and adding an item to it.

“If the checkout buttons are not visible to the shoppers or they do not stand out in some way from the rest of the page, you will have a difficult time converting many of your shoppers to buyers.”

-eCommerce Optimization

L.L. Bean Signature Usability & Color

L.L. Bean Signature Usability & Color

The L.L. Bean Signature site has an excellent overall design. They use the color orange to showcase when their customer’s should make an action. In the examples above, It is important to keep the color consistent throughout the site as customers will eventually become accustomed to orange and what the color is associated with.

The North Face Usability & Color

Navigating through the North Face website is like riding a bike with training wheels. There are always three ways to know what page you’re on, made apparent by the color red, large fonts and the use of effective bulleting and overly large bread crumbs. Similar to the other examples, only one color is used to represent the shopping cart related actions.

Eddie Bauer Usability Design

Eddie Bauer (above) and First Ascent (below) use color to highlight the background of the active page the user is on. Eddie Bauer also is using color to highlight the active page in yellow. The more consistent you can be with your color choices, the easier it will be for your customer to shop!

First Ascent Usability & Color

Usability Takeaways

• Always give your customers a clear indication of where they are on your website. Color is a great way to do this.

• Make sure there is some differentiation between common buttons and buttons that have specific actions (IE. shopping cart functions).

• Choose one color to use to assist in guiding your customer. This way they know what to expect.

• Use more than one option to show your customer where they are (IE. breadcrumbs, color highlighting and large title headers)

Design Usability Resources

• 10 Principles Of Navigation Design And Why Quality Navigation Is So Critical
• 10 Useful Usability Findings and Guidelines

There is only one key ingredient in any design that will hold it together, make it rise and make it deliver what it is supposed to. Whether the design is for the web, a book cover or a simple business card, there is one piece to the puzzle that must be present for the design to be successful. What is it you ask?

When reading through the many design blogs and books out there today, you’ll find showcases of beautiful designs, tutorials on how to make or use a specific design program, what certain colors mean and where they should be used and many more things. But no matter how much you learn, there is still only one element that truly matters. Designers must ask themselves one question:

Is the design appropriate for the target customer?

The website or brochure may be designed with the most stunning colors, stylish fonts, and newest trends. But this doesn’t mean it’s great design or appropriate for your viewers. There are certain trends that are age, industry and location appropriate. Simply because you are utilizing them doesn’t mean the design will be successful.

What to Consider When Designing for a Specific Target Market

How will the product or service improve the customer’s life?

Whether you’re selling food, a new tie or a trip to Europe you have to showcase the reasons to why the customer would want any of these items. You’re not going to reach the customer by relying on a slick navigation, pretty pictures and an easy to use shopping cart. There needs to be a clear reason why they need or will benefit from the product or service. Design is a great way to guide the customer through the reasons why, in a particular order or way.

Product Example

Photo by Aaron Alexander

Say for example your selling a new tie. Why would someone want to purchase that specific tie over another? Maybe you’re showing imagery of a man wearing the tie on his wedding day. So what? That man looks great in that tie, but so does every other man that happens to be photographed with a fancy tie. What makes this tie any better?

Maybe the tie is made of special material that is meant to feel comfortable and breathable during high-stress occasions like a wedding. A good way to connect with the customer through the design knowing this detail is by increasing the size of the text and overlay it onto the photograph. Not only will the “pretty” photograph pull your customer’s attention into the page, but the large text with the tie’s fabric benefits will give the customer a reason to buy that tie over another. Highlighting specific details can really improve a designs overall success rate. And yes, it can be as simple as pulling out a product detail that already exists.

The key with products are to avoid leaving beneficial details to waste. Bring out the little details, especially when you’re selling something as common as a tie. Once your able to focus in on the benefits, use colors and other design elements to bring the viewers eye even more towards these little details.

Service Example

Photo by Alberto P Veiga

In this example, let’s say a travel company’s website is selling a trip to Europe. The client wants to push the ultimate travel package versus the basic travel package. How will the design help sell more ultimate packages for this client? A solution for this scenario could be to compare each package side-by-side without price involved, graphically. Highlight the ultimate package and the details that would make that choice better than the others. Show a video/written testimonial of a customer who has chosen this package in the past and why they liked it. Customer reviews are proven to be more beneficial and trusted by viewers than company recommendations alone.

Customer Review Focus

Customer reviews are becoming more and more common to online businesses. As a business owner, you should be aware of Google’s SideWiki. It allows customers to write their own reviews on any website and publish it. When another customer visits the website with a SideWiki, they can then see those reviews made by other visitors on the SideWiki. The power is in the customer’s hands. This technology may not be utilized by very many customers today, but it is important to be on the lookout for similar releases & technologies that will give customers the upper-hand on your websites. The last thing you want is a customer complaint shown to all your potential customers.

Checkout this useful article reviewing the SideWiki:

Google’s SideWiki Shifts Power To Consumers –Away From Corporate Websites

The target market in this travel example is likely a customer that has a mid to high income level and could afford a premium travel package. If the targeted customer was of a lower income bracket, the design would be entirely different. Maybe the company would be trying to sell travel packages during a non-peak season to Europe. You might highlight the discounted price with a sale burst or a bolded tag-line saying “Now you can visit Europe too, for half the price.” Instead of comparing special vacation packages, you are emphasizing with the design the urgency of traveling now and the benefit of saving money and being able to afford a trip.

The key is to pull out the details that are most important to highlight within the design. This takes both efforts of the designer and the business owner/project manager.

Tip for Designers: Most clients aren’t going to offer up all the details you need to know to target their specific market. Chances are you’re going to have to dig deep and ask! Your clients are the experts of their market. Is the business a start-up? Maybe you can do some research as well to help your client pull out essential details they might be missing. Show them you want the design to help improve their business.

Tip for Business Owners: To end up with a successful design for whatever you happen to be selling or showcasing, it is important to open up communication as much as possible with your designer. Make sure they know your end goals and your target market. Also make sure to give them the details you want to highlight or what is most important about your promoted products and/or services. Not sure what else to prepare? Read ” What to Prepare Before Hiring a Web Designer“.

Share your Expertise…

Designers: In what ways have you used design to successfully target a specific market?

Business Owners: How has design help to improve your business? What reports or analysis have you put in place to track the success of the design on your website? (if applicable)

Photo by lotyloty

What should you prepare prior to contacting a design and/or web developer? Having most if not all of these items listed below will greatly increase the success of you website. There are many areas that should be planned out before setting foot into the design. If you don’t plan ahead, chances are you’ll have trouble down the road when you decide you want to add pages, reach specific business goals, edit content to improve your SEO and much more.

Phase I: The Basics

Marketing Plan
What is your target market? Who are you trying to reach with your new website? Do they even have internet access readily available to them? These are a few of the many questions you should be asking yourself/team before even considering talking to a designer. You’ll want to make sure you can answer everything you possibly can about your potential customer.

Questions to Consider

• Why would your customer want to use your website? How will it aid them with making a purchase or using your services?
• Is your customer web-savvy? Will they understand how to use your site easily and efficiently? Consider interactive elements and hiring a designer that is competent in user interface design to make sure the site is easy to use.
• How do you plan to market your website to your customers? (Consider: Email marketing, PPC  advertising, affiliates, television, print and direct mail pieces, product packaging)

Web Hosting
Is your business able to host the website on your own servers? Will your designer be able to setup hosting for you? This is a great question to ask your potential designer. It’s good to be open to suggestions, as certain hosts provide different things that could be more beneficial to your website.

Site Goals
What goals do you want your website to achieve for your business? Think of goals you can measure. IE: I want to bring “x” number of visitors to my site by the end of 6 months. I hope to bring in “x” amount of dollars from my website after one year.

If you’ve already got a website, re-design goals are also great to have ready for your designer. Solving your current site’s limitations are what designers are here to do for you!

Style, Color & Other Design Elements
You’re probably thinking, “Isn’t it the designer’s job to figure out all of those elements?” Yes and no. It’s good to go into a discussion having some idea of what you’re looking for. Whether you know a few things or a lot about developing a website, you should know what style of design appeals to you and more importantly, your customers.

Not sure where to look? Here are some great web design showcases to help you along

• 35 Beautiful E-Commerce Websites
• Delish! 30 Successfully Designed Food Websites
• Top 20 Illustration & Type-Based Websites
• Checking in Hotel Web Design: 50 Cosy Hotel Websites and Trends

Budget
How much money do you have available to spend on your website? This can be a large factor in what you’re able to have developed on your new site. Always remember, the more functionality to a website, the more time involved and the more it will cost you. A professional developed website can cost thousands of dollars.

What elements are necessary to have? Which ones can you live without? Make sure you know what you are able to put into it without getting too far along and have to cut back on essential elements. Discuss your budget right away with your designer (Even though I’m sure they’ll ask right off the bat).

• Interested in a project quote? Submit your project details on our project quote page.

Phase II: The Content

What ideas do you want to drive home to your customer? Are they essential to your business’s success? Who is going to prepare the content for the website? Do you have a copywriter or should you consider hiring someone to help with this aspect of the site?

SEO Planning & Copywriting
The content of your website deserves plenty of attention. You’ll also want to consider SEO (search engine optimization) when developing the content for your site. An SEO advisor can help you target keywords that will help improve your search ranking when a potential customer searches for you or a keyword (product/service you might offer). These keywords should be found in your site’s content as much as possible. It’s important to think about SEO before building a site as the URL structure can play a large role.  Not everything can be done prior to contacting a designer, but consider having a rough plan for your copywriting and SEO.

SEO & Copywriting Resources

• Beginners Guide to SEO
• Ways to Increase Traffic
• 11 Best Practices for URLs
• Copywriting 101: An introduction to effective copywriting
• How To Improve Your Branding With Your Content

Page Layout
Consider the different pages you’d like to have on your website. How many will you need to have? Can you combine pages to make the navigation as simple as possible? Will you need to add more pages on in the future? These are all great items to think about when planning out the pages of your new site.

Special Features
Do you want to incorporate a shopping cart feature on your website? Do you plan on having a blog section so you can connect with your customers and share knowledge on the topics that affect your business?

There are many special features that you can add to make your site more dynamic and engaging. Many of them can dramatically make a difference on the way your site is built, what technology it uses, and the cost of the site.

• Shopping Carts & Online Stores
• Product Reviews & Customer Testimonials
• Blogs
• Forums & Discussion Boards
• Email Subscriptions
  

Phase III: The Future

CMS (Content Management System)
If you’re going to have an interactive website in which the content is updated regularly, you’ll want to consider a CMS. This will allow you to easily manage your website and make changes to it when necessary. Most websites nowadays have a CMS unless the changes to the site are minimal. This can increase the cost of a website somewhat, but is necessary to improve your user’s experience. The more often you’re changing your content, the more you’re users will want to visit your website.

CMS Examples:

• Magento Ecommerce Platform – A popular CMS option for online retailers
• WordPress – Publishing platform which caters to bloggers. A robust & free CMS option
• Joomla – A popular CMS for websites of all sizes

Goals for the Future
Do you plan on adding pages to your website in the future? Who is going to manage your website’s content? The fastest way to lose your viewer’s interest is by leaving your website by the way-side. Have a plan for the future. Make sure your keeping your site’s content fresh and giving users a reason to visit it on a consistent basis.

Sarah Lynn Design offers website management packages as well as copywriting, SEO, and business marketing to help you get your planning started. Check out everything we can offer you to help you business succeed on the web.

• Sarah Lynn Design Services