The User Interface: How to Create a Buying Environment on Your Website

by 8 04/16/2014

thumbnail series2This is the third article in a five part series on website conversion. Be sure to check out Part 1, Performance Tuning, and Part 2, Logic and Direction, if you missed them.

Website designers often overlook the importance of providing a pleasant environment for their visitors. They succumb to the tendency to take a best guess at what visitors want, and then guess again if too many visitors click away.

It could be argued that if designers guess often enough, they’ll eventually get it right; however, each wrong guess creates casualties on the road to profitable website conversion.

It’s far better to start out with some good ideas in the beginning.

This article discusses four important topics to consider when optimizing the environment your website provides for its visitors. Think of it as a facelift for your online store, which can turn your website into a buying environment.

Color

Color may not be the first thing you think about when it comes to conversion optimization. But there’s no denying its impact on the mood, or environment, of your website.

There is an excellent article regarding color psychology on the Help Scout blog entitled, “The Psychology of Color in Marketing and Branding.” The article points out that there are many factors that influence individual color preferences, including past experience, cultural differences and home life.

Each person has a unique experience in life, and therefore no two individuals will select the same palette of favorite colors; however, there is widespread agreement on the appropriateness of certain colors.

For example, environmental concepts would be expressed in green—the color of healthy plant life. Rugged concepts would use dark browns—the color of the earth.

Now take a close look at your own website. What colors are predominant on your site? Do they flow together? Are important areas using the right colors?

Rather than attempting to use everyone’s favorite colors—which is impossible—your website should use colors to convey a personality. If you were selling Harley Davidson motorcycles, for example, you would use rugged dark brown colors. If a financial site, green.

Also, consider that colors have relationships with each other. These relationships can either be “analogous” or “triadic.” Analogous colors complement each other, while triadic colors contrast with each other.

color schemes

Source

When building your website’s messages, you’ll want to stick with complementary colors, or colors that are opposite one another on the color wheel.

When highlighting the call-to-action areas, you’ll want to use triadic colors (see the image above) so that visitors can easily locate them.

This doesn’t limit your color scheme. It simply gives you guidance when selecting colors for individual elements on your website. For example, if brown is your main color:

analogous colors

A palette of analogous colors

 

triadic colors

A palette of triadic colors

 

Action – Take an inventory of your current web colors and how they’re used. Are analogous colors being used to enhance your messages? Are triadic colors being used to highlight your call-to-action links?

Tip – Use the color wizard at the Colors on the Web site to calculate triadic and analogous colors.

Conforming to Visitor Behavior

When you break some subtle design rules, you may encourage your visitors to leave. These rules include:

  • Never automatically play any sound. Never. People often surf the web at work and won’t appreciate sudden loud music booming out their speakers.
  • Limit the use of pop-ups. Visitors don’t appreciate the interruption and often don’t trust them. Note that there is a tendency lately to use windows that gently slide-in from the side or bottom. These are perceived as being more acceptable, as they provide service when needed. Visitors can slide them out of the way when they’re not needed and slide them back into the window when needed.
  • The browser’s cursor should change to a pointer when hovering over a link. The cursor normally does this automatically, but if the link is implemented in JavaScript, you’ll have to change the cursor manually. People won’t click on a link unless they know it’s a link.
  • Get to the message. Each page should have a clear message—including the home page—but too many banners and moving parts can overshadow it. Visitors will conclude that they’ve stepped into a mess and will quickly leave.
  • Conform to the natural flow of reading. People who read text left-to-right (LTR) will scan a page left-to-right as they work their way top-to-bottom. Make sure your message flows in the same direction. If there is a call-to-action button, place it on the right, toward the bottom of the section. The opposite polarity should be used for right-to-left (RTL) web pages.

Action – Audit random pages on your site and ask yourself what a customer would do on each page. Does it flow properly (LTR vs RTL)? Is the navigation menu clearly visible on each page? Does each page convey an unambiguous message?

Tip – Use Google Analytics (or similar) to compile a list of “Top Exit Pages.” Then analyze these pages to see what might be driving visitors away.

Flow

Visitors should never question what is happening or lose their way through your site. If they lose their way, they’ll simply leave. And they may leave just before converting to a customer.

Sometimes this happens when visitors add an item to a shopping cart.

The shopping cart page suddenly appears, where visitors can select the quantity as well as check on the price. But if you don’t provide a way back to the exact same page (and position) where the item was initially selected, your visitors may get lost and abandon the cart.

Issues with flow can also occur when you provide a link on a product page. A visitor clicks on a link in your product page to get more information; however, by doing so, he loses his place on your product page.

Alternatively, by moving visitors off your site, you break the flow, requiring your visitors to navigate back to your product page. Many visitors will not bother returning.

You can address this problem in two ways:

  • Use target=”_blank” modification to your link tags, so the information page opens in another window.
  • Implement a “tooltip” menu in JavaScript.

Tooltip example

Tooltip example from the jquerytools website

Action—Use Google Analytics (or similar) and make note of breaks in the visitors’ trek through your website. The list of top exit pages may provide key insight to where the flow is getting broken. Ideally, your top exit page would be an order confirmation page.

Tip—Joseph Kerschbaum wrote a good introduction to this on the Search Engine Watch website entitled, “How to Use Google Analytics Visitors Flow Reports to Improve Conversion Rates.”

Payment Options

Not every customer carries a Visa or Master Card. If you only accept one type of card, you may lose a large percentage of customers for the lack of a payment option.

You may see a high cart-abandonment rate if customers, after filling their carts with products to purchase, learn that you don’t accept their preferred credit cards.

Action – At the very least, ensure you accept Visa, Master Card and Discover. If a large percent of your visitors consist of business customers, ensure you accept American Express.

Finally, make sure you accept PayPal. PayPal is very popular, and it allows direct payment through their system rather than using credit cards.

Tip – Consider putting credit card logos on your front page, telling your visitors what card types you accept before they invest time on your site.

payment options

Summary

Environmental factors cannot be ignored when optimizing your website’s user interface for conversion. Visitors demand simplicity and convenience. And if you don’t provide it, they’ll happily buy from your competitors.

Key elements include your selection of color, the overall organization of your site, sensible placement of elements, conforming to typical user behavior and convenience of payment. What would you add?

Stay tuned for the fourth article in the series. Next up: how visitors’ emotions must be taken into consideration during the conversion process.

About 

Kevin Gao is the founder and CEO of Comm100, a leading provider of live chat software for business. As a software developer as well as a small business expert, he’s always ambitious to revolutionize the way of online customer service and communication. Follow Kevin on Google+ to find more about him.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

8 COMMENTS

Paul

Great information, very helpful and put into the right perspective!

April 20, 2014 Reply

William V.

The user experience is indeed critical for a successful conversion. When you think about it, the process of purchasing something online is more complex than it seems. You have to find what you are looking for, make sure you did in fact place the item in the cart, enter billing and payment information, confirm your infromation, submit the transaction and than wait for the confirmation. If there are any interruptions in between any of those steps, most will not bother proceeding. Just to add to the list, a slow loading website is also annoying and increases site abandonment.

Cheers,

April 29, 2014 Reply

    Kathryn Aragon

    Well said, William. It’s critical that we give the buyer as easy a process as possible. Thanks for your input.

    April 29, 2014 Reply

    neil

    William, that is why optimizing for design is so important. It’s all about having everything optimized to the fullest :)

    April 30, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>